diff --git a/.changeset/gorgeous-carrots-fail.md b/.changeset/gorgeous-carrots-fail.md new file mode 100644 index 000000000..baeed7873 --- /dev/null +++ b/.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 diff --git a/.changeset/nice-bees-scream.md b/.changeset/nice-bees-scream.md new file mode 100644 index 000000000..35363642d --- /dev/null +++ b/.changeset/nice-bees-scream.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Date Field: add `readonlySegments` prop to specify certain segments as readonly diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts index c041c484a..c99eb67c4 100644 --- a/src/content/api-reference/date-field.ts +++ b/src/content/api-reference/date-field.ts @@ -89,6 +89,13 @@ export const root: APISchema = { 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: { diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts index 01bd84a5e..32e5c0a7a 100644 --- a/src/content/api-reference/date-range-field.ts +++ b/src/content/api-reference/date-range-field.ts @@ -92,6 +92,14 @@ export const root: APISchema = { 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: { diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts index 2ccc9ee8f..04d0119cf 100644 --- a/src/content/api-reference/menubar.ts +++ b/src/content/api-reference/menubar.ts @@ -21,6 +21,12 @@ export const root: APISchema = { 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 } diff --git a/src/lib/bits/date-range-field/_types.ts b/src/lib/bits/date-range-field/_types.ts index de837bffb..db2aec2de 100644 --- a/src/lib/bits/date-range-field/_types.ts +++ b/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, + "required" | "name" | "startIds" | "endIds" | "startName" | "endName" +>; type Props = Expand< - Omit, "required" | "name"> & { + Omit< + OmitDates, + "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. diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts index 9fe70c1b0..f1757ba0d 100644 --- a/src/lib/shared/index.ts +++ b/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; @@ -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 }; diff --git a/src/tests/progress/ProgressTest.svelte b/src/tests/progress/ProgressTest.svelte index 636163323..32f08c71f 100644 --- a/src/tests/progress/ProgressTest.svelte +++ b/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;