cleanup

.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

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/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 { CreateDateRangeFieldProps } 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<CreateDateRangeFieldProps>, "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/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>