feat/fix: add readonlySegments & fix dialog exit transitons (#272)

.changeset/bright-gorillas-hope.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Progress: update `value` type to include `null` for `'indeterminate'` state

.changeset/good-tigers-turn.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Menubar: move `preventScroll` prop from `Menubar.Menu` to `Menubar.Root`

.changeset/gorgeous-carrots-fail.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Date Range Field: add `readonlySegments` prop to specify certain segments as 'readonly' to the user

.changeset/nice-bees-scream.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Date Field: add `readonlySegments` prop to specify certain segments as readonly

.changeset/shaggy-ears-brush.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Alert Dialog: Fix bug with exit transitions

package.json

@@ -92,7 +92,7 @@
   "type": "module",
   "dependencies": {
     "@internationalized/date": "^3.5.1",
-    "@melt-ui/svelte": "0.67.0",
+    "@melt-ui/svelte": "0.68.0",
     "nanoid": "^5.0.4"
   },
   "peerDependencies": {

src/content/api-reference/date-field.ts

@@ -89,6 +89,13 @@ export const root: APISchema<DateField.Props> = {
 			type: C.BOOLEAN,
 			description: "Whether or not the field is readonly.",
 			default: C.FALSE
+		},
+		readonlySegments: {
+			type: {
+				type: C.ARRAY,
+				definition: "EditableSegmentPart[]"
+			},
+			description: "An array of segments that should be readonly, which prevent user input on them."
 		}
 	},
 	slotProps: {

src/content/api-reference/date-range-field.ts

@@ -92,6 +92,14 @@ export const root: APISchema<DateRangeField.Props> = {
 			type: C.BOOLEAN,
 			description: "Whether or not the field is readonly.",
 			default: C.FALSE
+		},
+		readonlySegments: {
+			type: {
+				type: C.OBJECT,
+				definition: "{ start: EditableSegmentPart[]; end: EditableSegmentPart[]; }"
+			},
+			description:
+				"The segments for the start and end fields that should be readonly, meaning users cannot edit them. This is useful for prepopulating fixed segments like years, months, or days."
 		}
 	},
 	slotProps: {

src/content/api-reference/menubar.ts

@@ -21,6 +21,12 @@ export const root: APISchema<Menubar.Props> = {
 			description:
 				"Whether or not to loop through the menubar menu triggers when navigating with the keyboard."
 		},
+		preventScroll: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to prevent scrolling the body while a menu in the menubar is open."
+		},
 		...domElProps("HTMLDivElement")
 	},
 	slotProps: { ...builderAndAttrsSlotProps, ids: idsSlotProp }

src/lib/bits/alert-dialog/ctx.ts

@@ -25,7 +25,8 @@ export function setCtx(props: SetProps) {
 	const getAttrs = createBitAttrs(NAME, PARTS);
 	const initAlertDialog = createDialog({
 		...removeUndefined(props),
-		role: "alertdialog"
+		role: "alertdialog",
+		forceVisible: true
 	});
 	const alertDialog = {
 		...initAlertDialog,

src/lib/bits/date-field/components/date-field.svelte

@@ -20,6 +20,7 @@
 	export let readonly: $$Props["readonly"] = undefined;
 	export let validationId: $$Props["validationId"] = undefined;
 	export let descriptionId: $$Props["descriptionId"] = undefined;
+	export let readonlySegments: $$Props["readonlySegments"] = undefined;
 
 	const {
 		states: {
@@ -40,6 +41,7 @@
 		maxValue,
 		minValue,
 		readonly,
+		readonlySegments,
 		isDateUnavailable,
 		onValueChange: ({ next }) => {
 			if (value !== next) {
@@ -121,6 +123,7 @@
 	$: updateOption("maxValue", maxValue);
 	$: updateOption("minValue", minValue);
 	$: updateOption("readonly", readonly);
+	$: updateOption("readonlySegments", readonlySegments);
 </script>
 
 <slot isInvalid={$localIsInvalid} ids={$idValues} />

src/lib/bits/date-range-field/_types.ts

@@ -7,10 +7,18 @@
 import type { Expand, OnChangeFn, OmitDates, DOMElement } from "$lib/internal/index.js";
 import type { DateRange, SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
-import type { CreateDateFieldProps } from "@melt-ui/svelte";
+import type { CreateDateRangeFieldProps as ICreateDateRangeFieldProps } from "@melt-ui/svelte";
+
+type CreateDateRangeFieldProps = Omit<
+	OmitDates<ICreateDateRangeFieldProps>,
+	"required" | "name" | "startIds" | "endIds" | "startName" | "endName"
+>;
 
 type Props = Expand<
-	Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> & {
+	Omit<
+		OmitDates<CreateDateRangeFieldProps>,
+		"required" | "name" | "startIds" | "endIds" | "startName" | "endName"
+	> & {
 		/**
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.

src/lib/bits/date-range-field/components/date-range-field.svelte

@@ -20,6 +20,7 @@
 	export let readonly: $$Props["readonly"] = undefined;
 	export let validationId: $$Props["validationId"] = undefined;
 	export let descriptionId: $$Props["descriptionId"] = undefined;
+	export let readonlySegments: $$Props["readonlySegments"] = undefined;
 
 	const {
 		states: {
@@ -41,6 +42,7 @@
 		minValue,
 		readonly,
 		isDateUnavailable,
+		readonlySegments,
 		onValueChange: ({ next }) => {
 			if (value !== next) {
 				onValueChange?.(next);
@@ -174,6 +176,7 @@
 	$: updateOption("maxValue", maxValue);
 	$: updateOption("minValue", minValue);
 	$: updateOption("readonly", readonly);
+	$: updateOption("readonlySegments", readonlySegments);
 
 	$: idSlotProp = {
 		start: $startIdValues,

src/lib/bits/menubar/components/menubar-menu.svelte

@@ -9,7 +9,6 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let preventScroll: $$Props["preventScroll"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
@@ -27,7 +26,6 @@
 		closeOnOutsideClick,
 		closeOnEscape,
 		portal,
-		preventScroll,
 		loop,
 		dir,
 		typeahead,
@@ -57,7 +55,6 @@
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
-	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
 	$: updateOption("closeFocus", closeFocus);

src/lib/bits/menubar/components/menubar.svelte

@@ -10,14 +10,15 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = true;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let preventScroll: $$Props["preventScroll"] = undefined;
 	export let el: $$Props["el"] = undefined;
 
 	const {
 		elements: { menubar },
 		updateOption,
 		ids,
 		getMenubarAttrs
-	} = setCtx({ loop, closeOnEscape });
+	} = setCtx({ loop, closeOnEscape, preventScroll });
 
 	const idValues = derived([ids.menubar], ([$menubarId]) => ({
 		menubar: $menubarId
@@ -30,6 +31,7 @@
 
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
+	$: updateOption("preventScroll", preventScroll);
 	$: builder = $menubar;
 	$: Object.assign(builder, attrs);
 </script>

src/lib/bits/progress/_types.ts

@@ -12,12 +12,12 @@ type Props = Expand<
 		 * The value of the progress bar.
 		 * You can bind this to a number value to programmatically control the value.
 		 */
-		value?: CreateProgressProps["defaultValue"] & {};
+		value?: CreateProgressProps["defaultValue"];
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<number>;
+		onValueChange?: OnChangeFn<number | null>;
 	} & DOMElement
 >;
 

src/lib/shared/index.ts

@@ -1,5 +1,5 @@
 import type { DateValue } from "@internationalized/date";
-import type { Month, Page, PageItem, Ellipsis } from "@melt-ui/svelte";
+import type { Month, Page, PageItem, Ellipsis, EditableSegmentPart } from "@melt-ui/svelte";
 
 export type Selected<Value> = {
 	value: Value;
@@ -25,4 +25,4 @@ export type SegmentPart =
 export type FocusTarget = string | HTMLElement | SVGElement | null;
 export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => FocusTarget);
 
-export type { Month, Page, PageItem, Ellipsis };
+export type { Month, Page, PageItem, Ellipsis, EditableSegmentPart };

src/tests/progress/ProgressTest.svelte

@@ -2,7 +2,7 @@
 	import { Progress } from "$lib";
 
 	type $$Props = Progress.Props;
-	export let value = 0;
+	export let value: $$Props["value"] = 0;
 </script>
 
 <main>