diff --git a/.changeset/chilly-icons-juggle.md b/.changeset/chilly-icons-juggle.md new file mode 100644 index 000000000..07f54431a --- /dev/null +++ b/.changeset/chilly-icons-juggle.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +breaking: remove `controlled` props in favor of Svelte's [Function Bindings](https://svelte.dev/docs/svelte/bind#Function-bindings) diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte index 488c8329f..a5b8f6236 100644 --- a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte +++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte @@ -16,7 +16,6 @@ onValueChange = noop, loop = true, orientation = "vertical", - controlledValue = false, ...restProps }: AccordionRootProps = $props(); @@ -27,14 +26,9 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } + value = v; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onValueChange(v as any); } ) as WritableBox | WritableBox, id: box.with(() => id), diff --git a/packages/bits-ui/src/lib/bits/accordion/types.ts b/packages/bits-ui/src/lib/bits/accordion/types.ts index 20de03358..6f62030a8 100644 --- a/packages/bits-ui/src/lib/bits/accordion/types.ts +++ b/packages/bits-ui/src/lib/bits/accordion/types.ts @@ -32,16 +32,6 @@ export type BaseAccordionRootPropsWithoutHTML = { * @defaultValue "vertical" */ orientation?: Orientation; - - /** - * Whether the value of the accordion is controlled or not. - * If `true`, the accordion will not update the value internally, instead - * it will call `onValueChange` when it would have otherwise, and it is up to you - * to update the `value` prop. - * - * @defaultValue false - */ - controlledValue?: boolean; }; export type AccordionRootSinglePropsWithoutHTML = BaseAccordionRootPropsWithoutHTML & { diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte index 7ddcd1601..e7eee43ac 100644 --- a/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte +++ b/packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte @@ -4,24 +4,15 @@ import { noop } from "$lib/internal/noop.js"; import { useDialogRoot } from "$lib/bits/dialog/dialog.svelte.js"; - let { - open = $bindable(false), - onOpenChange = noop, - controlledOpen = false, - children, - }: AlertDialogRootProps = $props(); + let { open = $bindable(false), onOpenChange = noop, children }: AlertDialogRootProps = $props(); useDialogRoot({ variant: box.with(() => "alert-dialog"), open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/calendar/components/calendar.svelte b/packages/bits-ui/src/lib/bits/calendar/components/calendar.svelte index cc2faab34..6b916cf93 100644 --- a/packages/bits-ui/src/lib/bits/calendar/components/calendar.svelte +++ b/packages/bits-ui/src/lib/bits/calendar/components/calendar.svelte @@ -33,8 +33,6 @@ type, disableDaysOutsideMonth = true, initialFocus = false, - controlledValue = false, - controlledPlaceholder = false, ...restProps }: CalendarRootProps = $props(); @@ -43,27 +41,15 @@ defaultPlaceholder: undefined, defaultValue: value, }); - - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + placeholder = defaultPlaceholder; } if (value === undefined) { const defaultValue = type === "single" ? "" : []; - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(defaultValue as any); - } else { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value = defaultValue as any; - } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value = defaultValue as any; } - value === undefined && (value = type === "single" ? undefined : []); - const rootState = useCalendarRoot({ id: box.with(() => id), ref: box.with( @@ -88,26 +74,17 @@ placeholder: box.with( () => placeholder as DateValue, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v as DateValue); - } else { - placeholder = v; - onPlaceholderChange(v as DateValue); - } + placeholder = v; + onPlaceholderChange(v as DateValue); } ), preventDeselect: box.with(() => preventDeselect), value: box.with( () => value, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } + value = v; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onValueChange(v as any); } ), type: box.with(() => type), diff --git a/packages/bits-ui/src/lib/bits/calendar/types.ts b/packages/bits-ui/src/lib/bits/calendar/types.ts index 6317e954b..504c324c7 100644 --- a/packages/bits-ui/src/lib/bits/calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/calendar/types.ts @@ -188,26 +188,6 @@ type CalendarBaseRootPropsWithoutHTML = { * @defaultValue false */ disableDaysOutsideMonth?: boolean; - - /** - * Whether or not the calendar is controlled or not. If `true`, the calendar will not update - * the value internally, instead it will call `onValueChange` when it would have otherwise, - * and it is up to you to update the `value` prop that is passed to the `Calendar.Root` - * component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the calendar placeholder is controlled or not. If `true`, the calendar will - * not update the placeholder internally, instead it will call `onPlaceholderChange` when it - * would have otherwise, and it is up to you to update the `placeholder` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; }; export type CalendarSingleRootPropsWithoutHTML = { diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte index d195794bb..b748a44eb 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte +++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte @@ -15,9 +15,7 @@ name = undefined, value = "on", id = useId(), - controlledChecked = false, indeterminate = $bindable(false), - controlledIndeterminate = false, onIndeterminateChange, child, type = "button", @@ -28,12 +26,8 @@ checked: box.with( () => checked, (v) => { - if (controlledChecked) { - onCheckedChange?.(v); - } else { - checked = v; - onCheckedChange?.(v); - } + checked = v; + onCheckedChange?.(v); } ), disabled: box.with(() => disabled ?? false), @@ -48,12 +42,8 @@ indeterminate: box.with( () => indeterminate, (v) => { - if (controlledIndeterminate) { - onIndeterminateChange?.(v); - } else { - indeterminate = v; - onIndeterminateChange?.(v); - } + indeterminate = v; + onIndeterminateChange?.(v); } ), type: box.with(() => type), diff --git a/packages/bits-ui/src/lib/bits/checkbox/types.ts b/packages/bits-ui/src/lib/bits/checkbox/types.ts index f98ffc39e..2d5fc1109 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/types.ts +++ b/packages/bits-ui/src/lib/bits/checkbox/types.ts @@ -55,16 +55,6 @@ export type CheckboxRootPropsWithoutHTML = WithChild< */ onCheckedChange?: OnChangeFn; - /** - * Whether or not the checkbox is controlled or not. If `true`, the checkbox will not update - * the checked state internally, instead it will call `onCheckedChange` when it would have - * otherwise, and it is up to you to update the `checked` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledChecked?: boolean; - /** * Whether the checkbox is in an indeterminate state or not. * @@ -76,16 +66,6 @@ export type CheckboxRootPropsWithoutHTML = WithChild< * A callback function called when the indeterminate state changes. */ onIndeterminateChange?: OnChangeFn; - - /** - * Whether the indeterminate state is controlled or not. If `true`, the checkbox will - * not update the indeterminate state internally, instead it will call - * `onIndeterminateChange` when it would have otherwise, and it is up to you to update - * the `indeterminate` prop that is passed to the component. - * - * @defaultValue false - */ - controlledIndeterminate?: boolean; }, CheckboxRootSnippetProps >; @@ -133,16 +113,6 @@ export type CheckboxGroupPropsWithoutHTML = WithChild<{ * A callback function called when the value changes. */ onValueChange?: OnChangeFn; - - /** - * Whether or not the checkbox group value is controlled or not. If `true`, the - * checkbox group will not update the value internally, instead it will call - * `onValueChange` when it would have otherwise, and it is up to you to update - * the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type CheckboxGroupProps = CheckboxGroupPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte index e2778df41..14ff2f302 100644 --- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte +++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte @@ -12,7 +12,6 @@ ref = $bindable(null), open = $bindable(false), disabled = false, - controlledOpen = false, onOpenChange = noop, ...restProps }: CollapsibleRootProps = $props(); @@ -21,12 +20,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), disabled: box.with(() => disabled), diff --git a/packages/bits-ui/src/lib/bits/collapsible/types.ts b/packages/bits-ui/src/lib/bits/collapsible/types.ts index b1983d930..c3b63d201 100644 --- a/packages/bits-ui/src/lib/bits/collapsible/types.ts +++ b/packages/bits-ui/src/lib/bits/collapsible/types.ts @@ -28,15 +28,6 @@ export type CollapsibleRootPropsWithoutHTML = WithChild<{ * A callback function called when the open state changes. */ onOpenChange?: OnChangeFn; - - /** - * Whether or not the collapsible is controlled or not. If `true`, the collapsible will not - * update the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type CollapsibleRootProps = CollapsibleRootPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte index 7cc4655c6..f353e0bd1 100644 --- a/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte +++ b/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte @@ -17,8 +17,6 @@ loop = false, scrollAlignment = "nearest", required = false, - controlledOpen = false, - controlledValue = false, items = [], allowDeselect = true, children, @@ -26,12 +24,7 @@ if (value === undefined) { const defaultValue = type === "single" ? "" : []; - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(defaultValue as any); - } else { - value = defaultValue; - } + value = defaultValue; } const rootState = useSelectRoot({ @@ -39,14 +32,9 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } + value = v; + // @ts-expect-error - we know + onValueChange(v); } ) as WritableBox | WritableBox, disabled: box.with(() => disabled), @@ -54,12 +42,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), loop: box.with(() => loop), diff --git a/packages/bits-ui/src/lib/bits/command/components/command.svelte b/packages/bits-ui/src/lib/bits/command/components/command.svelte index 46951d462..2cd7f6c44 100644 --- a/packages/bits-ui/src/lib/bits/command/components/command.svelte +++ b/packages/bits-ui/src/lib/bits/command/components/command.svelte @@ -18,7 +18,6 @@ label = "", vimBindings = true, disablePointerSelection = false, - controlledValue = false, children, child, ...restProps @@ -36,12 +35,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), vimBindings: box.with(() => vimBindings), diff --git a/packages/bits-ui/src/lib/bits/command/types.ts b/packages/bits-ui/src/lib/bits/command/types.ts index 9c94bba92..77db48d75 100644 --- a/packages/bits-ui/src/lib/bits/command/types.ts +++ b/packages/bits-ui/src/lib/bits/command/types.ts @@ -79,15 +79,6 @@ export type CommandRootPropsWithoutHTML = WithChild<{ * @defaultValue true */ vimBindings?: boolean; - - /** - * Whether or not the command is controlled or not. If `true`, the command will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type CommandRootProps = CommandRootPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/context-menu/components/context-menu.svelte b/packages/bits-ui/src/lib/bits/context-menu/components/context-menu.svelte index b7df9eb44..a42a2c8d7 100644 --- a/packages/bits-ui/src/lib/bits/context-menu/components/context-menu.svelte +++ b/packages/bits-ui/src/lib/bits/context-menu/components/context-menu.svelte @@ -9,7 +9,6 @@ open = $bindable(false), dir = "ltr", onOpenChange = noop, - controlledOpen = false, children, }: ContextMenuRootProps = $props(); @@ -17,12 +16,8 @@ variant: box.with(() => "context-menu"), dir: box.with(() => dir), onClose: () => { - if (controlledOpen) { - onOpenChange(false); - } else { - open = false; - onOpenChange?.(false); - } + open = false; + onOpenChange?.(false); }, }); @@ -30,12 +25,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte b/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte index e61641bb2..dbe30072a 100644 --- a/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte +++ b/packages/bits-ui/src/lib/bits/date-field/components/date-field.svelte @@ -23,8 +23,6 @@ readonly = false, readonlySegments = [], required = false, - controlledPlaceholder = false, - controlledValue = false, errorMessageId, children, }: DateFieldRootProps = $props(); @@ -36,34 +34,22 @@ defaultValue: value, }); - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + placeholder = defaultPlaceholder; } useDateFieldRoot({ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), placeholder: box.with( () => placeholder as DateValue, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v); - } else { - placeholder = v; - onPlaceholderChange(v); - } + placeholder = v; + onPlaceholderChange(v); } ), disabled: box.with(() => disabled), diff --git a/packages/bits-ui/src/lib/bits/date-field/types.ts b/packages/bits-ui/src/lib/bits/date-field/types.ts index ea609ec73..9ff7b4ffb 100644 --- a/packages/bits-ui/src/lib/bits/date-field/types.ts +++ b/packages/bits-ui/src/lib/bits/date-field/types.ts @@ -19,7 +19,7 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{ * * @bindable */ - value?: DateValue | undefined; + value?: DateValue; /** * A callback that is called when the date field value changes. @@ -33,7 +33,7 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{ * * @bindable */ - placeholder?: DateValue | undefined; + placeholder?: DateValue; /** * A callback that is called when the date field's placeholder value changes. @@ -136,25 +136,6 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{ */ required?: boolean; - /** - * Whether or not the value is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the placeholder is controlled or not. If `true`, the component will not update - * the placeholder state internally, instead it will call `onPlaceholderChange` when it would - * have otherwise, and it is up to you to update the `value` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; - /** * The `id` of the element which contains the error messages for the date field when the * date is invalid. diff --git a/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte b/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte index 5a24acbfd..b66f5e94d 100644 --- a/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte +++ b/packages/bits-ui/src/lib/bits/date-picker/components/date-picker.svelte @@ -41,9 +41,6 @@ numberOfMonths = 1, closeOnDateSelect = true, initialFocus = false, - controlledPlaceholder = false, - controlledValue = false, - controlledOpen = false, errorMessageId, children, }: DatePickerRootProps = $props(); @@ -55,20 +52,12 @@ defaultValue: value, }); - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + placeholder = defaultPlaceholder; } function onDateSelect() { if (closeOnDateSelect) { - if (controlledOpen) { - onOpenChange(false); - } else { - open = false; - } + open = false; } } @@ -76,34 +65,22 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), placeholder: box.with( () => placeholder as DateValue, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v as DateValue); - } else { - placeholder = v; - onPlaceholderChange(v as DateValue); - } + placeholder = v; + onPlaceholderChange(v as DateValue); } ), isDateUnavailable: box.with(() => isDateUnavailable), diff --git a/packages/bits-ui/src/lib/bits/date-picker/types.ts b/packages/bits-ui/src/lib/bits/date-picker/types.ts index 3d2b682e5..a6a835cf2 100644 --- a/packages/bits-ui/src/lib/bits/date-picker/types.ts +++ b/packages/bits-ui/src/lib/bits/date-picker/types.ts @@ -256,35 +256,6 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{ */ initialFocus?: boolean; - /** - * Whether or not the value is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the placeholder is controlled or not. If `true`, the component will not update - * the placeholder state internally, instead it will call `onPlaceholderChange` when it would - * have otherwise, and it is up to you to update the `placeholder` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would - * have otherwise, and it is up to you to update the `open` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledOpen?: boolean; - /** * The `id` of the element which contains the error messages for the date field when the * date is invalid. diff --git a/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte b/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte index 657a4f834..f5fa5f686 100644 --- a/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte +++ b/packages/bits-ui/src/lib/bits/date-range-field/components/date-range-field.svelte @@ -31,8 +31,6 @@ child, onStartValueChange = noop, onEndValueChange = noop, - controlledPlaceholder = false, - controlledValue = false, errorMessageId, ...restProps }: DateRangeFieldRootProps = $props(); @@ -47,20 +45,13 @@ defaultValue: value?.start, }); - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + placeholder = defaultPlaceholder; } if (value === undefined) { const defaultValue = { start: undefined, end: undefined }; - if (controlledValue) { - onValueChange(defaultValue); - } else { - value = defaultValue; - } + + value = defaultValue; } const rootState = useDateRangeFieldRoot({ @@ -82,24 +73,16 @@ placeholder: box.with( () => placeholder as DateValue, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v); - } else { - placeholder = v; - onPlaceholderChange(v); - } + placeholder = v; + onPlaceholderChange(v); } ), readonlySegments: box.with(() => readonlySegments), value: box.with( () => value as DateRange, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), startValue: box.with( diff --git a/packages/bits-ui/src/lib/bits/date-range-field/types.ts b/packages/bits-ui/src/lib/bits/date-range-field/types.ts index 892b088fb..2262dbe1a 100644 --- a/packages/bits-ui/src/lib/bits/date-range-field/types.ts +++ b/packages/bits-ui/src/lib/bits/date-range-field/types.ts @@ -33,7 +33,7 @@ export type DateRangeFieldRootPropsWithoutHTML = WithChild<{ * * @bindable */ - placeholder?: DateValue | undefined; + placeholder?: DateValue; /** * A callback that is called when the date field's placeholder value changes. @@ -56,13 +56,13 @@ export type DateRangeFieldRootPropsWithoutHTML = WithChild<{ * The minimum acceptable date. When provided, the date field * will be marked as invalid if the user enters a date before this date. */ - minValue?: DateValue | undefined; + minValue?: DateValue; /** * The maximum acceptable date. When provided, the date field * will be marked as invalid if the user enters a date after this date. */ - maxValue?: DateValue | undefined; + maxValue?: DateValue; /** * If true, the date field will be disabled and users will not be able @@ -151,25 +151,6 @@ export type DateRangeFieldRootPropsWithoutHTML = WithChild<{ */ onEndValueChange?: OnChangeFn; - /** - * Whether or not the value is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the placeholder is controlled or not. If `true`, the component will not update - * the placeholder state internally, instead it will call `onPlaceholderChange` when it would - * have otherwise, and it is up to you to update the `value` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; - /** * The `id` of the element which contains the error messages for the date field when the * date is invalid. diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte b/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte index 8913dab1d..a26318da9 100644 --- a/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte +++ b/packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte @@ -44,9 +44,6 @@ closeOnRangeSelect = true, onStartValueChange = noop, onEndValueChange = noop, - controlledValue = false, - controlledPlaceholder = false, - controlledOpen = false, validate = noop, errorMessageId, child, @@ -58,11 +55,7 @@ let endValue = $state(value?.end); if (value === undefined) { - if (controlledValue) { - onValueChange({ start: undefined, end: undefined }); - } else { - value = { start: undefined, end: undefined }; - } + value = { start: undefined, end: undefined }; } if (placeholder === undefined) { @@ -71,20 +64,13 @@ defaultPlaceholder: undefined, defaultValue: value?.start, }); - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + + placeholder = defaultPlaceholder; } function onRangeSelect() { if (closeOnRangeSelect) { - if (controlledOpen) { - onOpenChange(false); - } else { - open = false; - } + open = false; } } @@ -92,34 +78,22 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), value: box.with( () => value as DateRange, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), placeholder: box.with( () => placeholder as DateValue, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v as DateValue); - } else { - placeholder = v; - onPlaceholderChange(v as DateValue); - } + placeholder = v; + onPlaceholderChange(v as DateValue); } ), isDateUnavailable: box.with(() => isDateUnavailable), diff --git a/packages/bits-ui/src/lib/bits/date-range-picker/types.ts b/packages/bits-ui/src/lib/bits/date-range-picker/types.ts index e31760cca..62e4824ed 100644 --- a/packages/bits-ui/src/lib/bits/date-range-picker/types.ts +++ b/packages/bits-ui/src/lib/bits/date-range-picker/types.ts @@ -266,35 +266,6 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{ */ onEndValueChange?: OnChangeFn; - /** - * Whether or not the value is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the placeholder is controlled or not. If `true`, the component will not update - * the placeholder state internally, instead it will call `onPlaceholderChange` when it would - * have otherwise, and it is up to you to update the `placeholder` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would - * have otherwise, and it is up to you to update the `open` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledOpen?: boolean; - /** * The `id` of the element which contains the error messages for the date field when the * date is invalid. diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte index dd6bbc38c..bfb9be3b9 100644 --- a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte +++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte @@ -4,24 +4,15 @@ import type { DialogRootProps } from "../types.js"; import { noop } from "$lib/internal/noop.js"; - let { - open = $bindable(false), - onOpenChange = noop, - controlledOpen = false, - children, - }: DialogRootProps = $props(); + let { open = $bindable(false), onOpenChange = noop, children }: DialogRootProps = $props(); useDialogRoot({ variant: box.with(() => "dialog"), open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/dialog/types.ts b/packages/bits-ui/src/lib/bits/dialog/types.ts index a512b53fc..d7f30d599 100644 --- a/packages/bits-ui/src/lib/bits/dialog/types.ts +++ b/packages/bits-ui/src/lib/bits/dialog/types.ts @@ -27,15 +27,6 @@ export type DialogRootPropsWithoutHTML = WithChildren<{ * A callback that is called when the popover's open state changes. */ onOpenChange?: OnChangeFn; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type DialogRootProps = DialogRootPropsWithoutHTML; diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview.svelte index e628fcee9..34d5ce7e4 100644 --- a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview.svelte +++ b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview.svelte @@ -10,7 +10,6 @@ onOpenChange = noop, openDelay = 700, closeDelay = 300, - controlledOpen = false, children, }: LinkPreviewRootProps = $props(); @@ -18,12 +17,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), openDelay: box.with(() => openDelay), diff --git a/packages/bits-ui/src/lib/bits/link-preview/types.ts b/packages/bits-ui/src/lib/bits/link-preview/types.ts index 019c3d48d..870e8df05 100644 --- a/packages/bits-ui/src/lib/bits/link-preview/types.ts +++ b/packages/bits-ui/src/lib/bits/link-preview/types.ts @@ -57,15 +57,6 @@ export type LinkPreviewRootPropsWithoutHTML = WithChildren<{ * @defaultValue false */ ignoreNonKeyboardFocus?: boolean; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML; diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte index 933fb0271..e363942d2 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte @@ -14,10 +14,8 @@ onCheckedChange = noop, disabled = false, onSelect = noop, - controlledChecked = false, closeOnSelect = true, indeterminate = $bindable(false), - controlledIndeterminate = false, onIndeterminateChange = noop, ...restProps }: MenuCheckboxItemProps = $props(); @@ -26,12 +24,8 @@ checked: box.with( () => checked, (v) => { - if (controlledChecked) { - onCheckedChange(v); - } else { - checked = v; - onCheckedChange(v); - } + checked = v; + onCheckedChange(v); } ), id: box.with(() => id), @@ -45,12 +39,8 @@ indeterminate: box.with( () => indeterminate, (v) => { - if (controlledIndeterminate) { - onIndeterminateChange(v); - } else { - indeterminate = v; - onIndeterminateChange(v); - } + indeterminate = v; + onIndeterminateChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte index 6508dcf9e..78a25c557 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte @@ -12,7 +12,6 @@ ref = $bindable(null), value = $bindable(""), onValueChange = noop, - controlledValue = false, ...restProps }: MenuRadioGroupProps = $props(); @@ -20,12 +19,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), ref: box.with( diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte index 5f2cb3f6c..aa1b1d6fc 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu-sub.svelte @@ -5,23 +5,14 @@ import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte"; import { noop } from "$lib/internal/noop.js"; - let { - open = $bindable(false), - onOpenChange = noop, - controlledOpen = false, - children, - }: MenuSubProps = $props(); + let { open = $bindable(false), onOpenChange = noop, children }: MenuSubProps = $props(); useMenuSubmenu({ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange?.(v); - } + open = v; + onOpenChange?.(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu.svelte index 64fbe1498..bfae62610 100644 --- a/packages/bits-ui/src/lib/bits/menu/components/menu.svelte +++ b/packages/bits-ui/src/lib/bits/menu/components/menu.svelte @@ -9,7 +9,6 @@ open = $bindable(false), dir = "ltr", onOpenChange = noop, - controlledOpen = false, _internal_variant: variant = "dropdown-menu", children, }: MenuRootProps & { @@ -20,12 +19,8 @@ variant: box.with(() => variant), dir: box.with(() => dir), onClose: () => { - if (controlledOpen) { - onOpenChange(false); - } else { - open = false; - onOpenChange?.(false); - } + open = false; + onOpenChange(false); }, }); @@ -33,12 +28,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/menu/types.ts b/packages/bits-ui/src/lib/bits/menu/types.ts index aba6f0bc3..9fdcad7e2 100644 --- a/packages/bits-ui/src/lib/bits/menu/types.ts +++ b/packages/bits-ui/src/lib/bits/menu/types.ts @@ -33,15 +33,6 @@ export type MenuRootPropsWithoutHTML = WithChildren<{ * @defaultValue "ltr" */ dir?: Direction; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type MenuRootProps = MenuRootPropsWithoutHTML; @@ -131,16 +122,6 @@ export type MenuCheckboxItemPropsWithoutHTML = */ onCheckedChange?: OnChangeFn; - /** - * Whether or not the checked state is controlled or not. If `true`, the component will not - * update the checked state internally, instead it will call `onCheckedChange` when it - * would have otherwise, and it is up to you to update the `checked` prop that is passed - * to the component. - * - * @defaultValue false - */ - controlledChecked?: boolean; - /** * Whether the checkbox is in an indeterminate state or not. * @@ -153,16 +134,6 @@ export type MenuCheckboxItemPropsWithoutHTML = */ onIndeterminateChange?: OnChangeFn; - /** - * Whether the indeterminate state is controlled or not. If `true`, the checkbox will - * not update the indeterminate state internally, instead it will call - * `onIndeterminateChange` when it would have otherwise, and it is up to you to update - * the `indeterminate` prop that is passed to the component. - * - * @defaultValue false - */ - controlledIndeterminate?: boolean; - /** * Whether or not the menu item should close when selected. * @@ -196,15 +167,6 @@ export type MenuSubPropsWithoutHTML = WithChildren<{ * A callback that is called when the menu is opened or closed. */ onOpenChange?: OnChangeFn; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type MenuSubProps = MenuSubPropsWithoutHTML; @@ -259,15 +221,6 @@ export type MenuRadioGroupPropsWithoutHTML = WithChild<{ * A callback that is fired when the selected radio item changes. */ onValueChange?: OnChangeFn; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type MenuRadioGroupProps = MenuRadioGroupPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte b/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte index 715933de8..f7e6a7cb8 100644 --- a/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte +++ b/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte @@ -14,7 +14,6 @@ dir = "ltr", loop = true, onValueChange = noop, - controlledValue = false, ...restProps }: MenubarRootProps = $props(); @@ -23,12 +22,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange?.(v); - } + value = v; + onValueChange?.(v); } ), dir: box.with(() => dir), diff --git a/packages/bits-ui/src/lib/bits/menubar/types.ts b/packages/bits-ui/src/lib/bits/menubar/types.ts index 8de1689ae..ecc072139 100644 --- a/packages/bits-ui/src/lib/bits/menubar/types.ts +++ b/packages/bits-ui/src/lib/bits/menubar/types.ts @@ -28,15 +28,6 @@ export type MenubarRootPropsWithoutHTML = WithChild<{ * A callback that is called when the active menu changes. */ onValueChange?: OnChangeFn; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type MenubarRootProps = MenubarRootPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte index b0a88c4e4..092cbd9f9 100644 --- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte +++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte @@ -16,7 +16,6 @@ skipDelayDuration = 300, dir = "ltr", orientation = "horizontal", - controlledValue = false, ...restProps }: NavigationMenuRootProps = $props(); @@ -25,12 +24,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), delayDuration: box.with(() => delayDuration), diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/types.ts b/packages/bits-ui/src/lib/bits/navigation-menu/types.ts index f6dd8d4e3..bf5b2b859 100644 --- a/packages/bits-ui/src/lib/bits/navigation-menu/types.ts +++ b/packages/bits-ui/src/lib/bits/navigation-menu/types.ts @@ -22,13 +22,6 @@ export type NavigationMenuRootPropsWithoutHTML = WithChild<{ */ onValueChange?: OnChangeFn; - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - */ - controlledValue?: boolean; - /** * The duration from when the mouse enters a trigger until the content opens. * diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte index f2da7779d..629a9b5ca 100644 --- a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte +++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte @@ -15,7 +15,6 @@ onPageChange = noop, loop = false, orientation = "horizontal", - controlledPage = false, child, children, ...restProps @@ -28,12 +27,8 @@ page: box.with( () => page, (v) => { - if (controlledPage) { - onPageChange(v); - } else { - page = v; - onPageChange?.(v); - } + page = v; + onPageChange?.(v); } ), loop: box.with(() => loop), diff --git a/packages/bits-ui/src/lib/bits/pagination/types.ts b/packages/bits-ui/src/lib/bits/pagination/types.ts index dc21edcd0..7c09750e7 100644 --- a/packages/bits-ui/src/lib/bits/pagination/types.ts +++ b/packages/bits-ui/src/lib/bits/pagination/types.ts @@ -59,15 +59,6 @@ export type PaginationRootPropsWithoutHTML = WithChild< * @defaultValue "horizontal" */ orientation?: "horizontal" | "vertical"; - - /** - * Whether or not the page state is controlled or not. If `true`, the component will not update - * the page state internally, instead it will call `onPageChange` when it would have - * otherwise, and it is up to you to update the `page` prop that is passed to the component. - * - * @defaultValue false - */ - controlledPage?: boolean; }, PaginationSnippetProps >; diff --git a/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte b/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte index 118343e25..f47b46bcf 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte +++ b/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte @@ -21,7 +21,6 @@ disabled = false, value = $bindable(""), onValueChange = noop, - controlledValue = false, onPaste, ...restProps }: PinInputRootProps = $props(); @@ -43,12 +42,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), pushPasswordManagerStrategy: box.with(() => pushPasswordManagerStrategy), diff --git a/packages/bits-ui/src/lib/bits/pin-input/types.ts b/packages/bits-ui/src/lib/bits/pin-input/types.ts index 7217e1bd5..90c6a73e0 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/types.ts +++ b/packages/bits-ui/src/lib/bits/pin-input/types.ts @@ -69,16 +69,6 @@ export type PinInputRootPropsWithoutHTML = Omit< */ inputId?: string; - /** - * Whether or not the value state is controlled or not. If `true`, the component will - * not update the value state internally, instead it will call `onValueChange` when - * it would have otherwise, and it is up to you to update the `value` prop that is - * passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - /** * The children snippet used to render the individual cells. */ diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte index 889deead1..bf458a3b6 100644 --- a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte +++ b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte @@ -5,23 +5,14 @@ import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte"; import { noop } from "$lib/internal/noop.js"; - let { - open = $bindable(false), - onOpenChange = noop, - controlledOpen = false, - children, - }: PopoverRootProps = $props(); + let { open = $bindable(false), onOpenChange = noop, children }: PopoverRootProps = $props(); usePopoverRoot({ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), }); diff --git a/packages/bits-ui/src/lib/bits/popover/types.ts b/packages/bits-ui/src/lib/bits/popover/types.ts index 77a65b839..ef98ea732 100644 --- a/packages/bits-ui/src/lib/bits/popover/types.ts +++ b/packages/bits-ui/src/lib/bits/popover/types.ts @@ -23,15 +23,6 @@ export type PopoverRootPropsWithoutHTML = WithChildren<{ * A callback that is called when the popover's open state changes. */ onOpenChange?: OnChangeFn; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type PopoverRootProps = PopoverRootPropsWithoutHTML; diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte index 7365b2c58..9947ddc27 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte +++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte @@ -18,7 +18,6 @@ required = false, id = useId(), onValueChange = noop, - controlledValue = false, ...restProps }: RadioGroupRootProps = $props(); @@ -33,12 +32,8 @@ () => value, (v) => { if (v === value) return; - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange?.(v); - } + value = v; + onValueChange?.(v); } ), ref: box.with( diff --git a/packages/bits-ui/src/lib/bits/radio-group/types.ts b/packages/bits-ui/src/lib/bits/radio-group/types.ts index 7240a08b9..7575005f1 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/types.ts +++ b/packages/bits-ui/src/lib/bits/radio-group/types.ts @@ -56,15 +56,6 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{ * input is rendered. */ required?: boolean; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte b/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte index 2ae0d57b9..6e8bda9b0 100644 --- a/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte +++ b/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte @@ -33,8 +33,6 @@ disableDaysOutsideMonth = true, onStartValueChange = noop, onEndValueChange = noop, - controlledPlaceholder = false, - controlledValue = false, ...restProps }: RangeCalendarRootProps = $props(); @@ -46,21 +44,12 @@ defaultPlaceholder: undefined, defaultValue: value?.start, }); - - if (controlledPlaceholder) { - onPlaceholderChange(defaultPlaceholder); - } else { - placeholder = defaultPlaceholder; - } + placeholder = defaultPlaceholder; } if (value === undefined) { const defaultValue = { start: undefined, end: undefined }; - if (controlledValue) { - onValueChange(defaultValue); - } else { - value = defaultValue; - } + value = defaultValue; } const rootState = useRangeCalendarRoot({ @@ -72,23 +61,15 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), placeholder: box.with( () => placeholder!, (v) => { - if (controlledPlaceholder) { - onPlaceholderChange(v); - } else { - placeholder = v; - onPlaceholderChange(v); - } + placeholder = v; + onPlaceholderChange(v); } ), disabled: box.with(() => disabled), diff --git a/packages/bits-ui/src/lib/bits/range-calendar/types.ts b/packages/bits-ui/src/lib/bits/range-calendar/types.ts index ff1d3a7dd..1729dd5fe 100644 --- a/packages/bits-ui/src/lib/bits/range-calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/range-calendar/types.ts @@ -198,25 +198,6 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild< * only part of the value is changed/completed. */ onEndValueChange?: OnChangeFn; - - /** - * Whether or not the value is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - - /** - * Whether or not the placeholder is controlled or not. If `true`, the component will not - * update the placeholder state internally, instead it will call `onPlaceholderChange` when - * it would have otherwise, and it is up to you to update the `value` prop that is passed - * to the component. - * - * @defaultValue false - */ - controlledPlaceholder?: boolean; }, RangeCalendarRootSnippetProps >; diff --git a/packages/bits-ui/src/lib/bits/select/components/select.svelte b/packages/bits-ui/src/lib/bits/select/components/select.svelte index cb5e084c0..3f73b16d9 100644 --- a/packages/bits-ui/src/lib/bits/select/components/select.svelte +++ b/packages/bits-ui/src/lib/bits/select/components/select.svelte @@ -17,8 +17,6 @@ loop = false, scrollAlignment = "nearest", required = false, - controlledOpen = false, - controlledValue = false, items = [], allowDeselect = true, children, @@ -26,12 +24,8 @@ if (value === undefined) { const defaultValue = type === "single" ? "" : []; - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(defaultValue as any); - } else { - value = defaultValue; - } + + value = defaultValue; } const rootState = useSelectRoot({ @@ -39,14 +33,9 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } + value = v; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onValueChange(v as any); } ) as WritableBox | WritableBox, disabled: box.with(() => disabled), @@ -54,12 +43,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), loop: box.with(() => loop), diff --git a/packages/bits-ui/src/lib/bits/select/types.ts b/packages/bits-ui/src/lib/bits/select/types.ts index 061f6ddd6..41bfa37a5 100644 --- a/packages/bits-ui/src/lib/bits/select/types.ts +++ b/packages/bits-ui/src/lib/bits/select/types.ts @@ -63,24 +63,6 @@ export type SelectBaseRootPropsWithoutHTML = WithChildren<{ */ scrollAlignment?: "nearest" | "center"; - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; - /** * Optionally provide an array of `value` and `label` pairs that will be used to match * and trigger selection when the trigger is focused and a key is pressed while the content diff --git a/packages/bits-ui/src/lib/bits/slider/components/slider.svelte b/packages/bits-ui/src/lib/bits/slider/components/slider.svelte index 0fadb6855..aadce8b69 100644 --- a/packages/bits-ui/src/lib/bits/slider/components/slider.svelte +++ b/packages/bits-ui/src/lib/bits/slider/components/slider.svelte @@ -21,7 +21,6 @@ dir = "ltr", autoSort = true, orientation = "horizontal", - controlledValue = false, ...restProps }: SliderRootProps = $props(); @@ -38,14 +37,9 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - // @ts-expect-error - we know - onValueChange(v); - } else { - value = v; - // @ts-expect-error - we know - onValueChange(v); - } + value = v; + // @ts-expect-error - we know + onValueChange(v); } ) as WritableBox | WritableBox, // @ts-expect-error - we know diff --git a/packages/bits-ui/src/lib/bits/slider/types.ts b/packages/bits-ui/src/lib/bits/slider/types.ts index a6c43f95e..c98594ad0 100644 --- a/packages/bits-ui/src/lib/bits/slider/types.ts +++ b/packages/bits-ui/src/lib/bits/slider/types.ts @@ -60,16 +60,6 @@ export type BaseSliderRootPropsWithoutHTML = { * @defaultValue false */ disabled?: boolean; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will - * not update the value state internally, instead it will call `onValueChange` when it - * would have otherwise, and it is up to you to update the `value` prop that is passed - * to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }; export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & { diff --git a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte index 96e689578..3a8dca173 100644 --- a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte +++ b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte @@ -18,7 +18,6 @@ name = undefined, type = "button", onCheckedChange = noop, - controlledChecked = false, ...restProps }: SwitchRootProps = $props(); @@ -26,12 +25,8 @@ checked: box.with( () => checked, (v) => { - if (controlledChecked) { - onCheckedChange(v); - } else { - checked = v; - onCheckedChange?.(v); - } + checked = v; + onCheckedChange?.(v); } ), disabled: box.with(() => disabled ?? false), diff --git a/packages/bits-ui/src/lib/bits/switch/types.ts b/packages/bits-ui/src/lib/bits/switch/types.ts index da35218a9..b3ccfab81 100644 --- a/packages/bits-ui/src/lib/bits/switch/types.ts +++ b/packages/bits-ui/src/lib/bits/switch/types.ts @@ -51,16 +51,6 @@ export type SwitchRootPropsWithoutHTML = WithChild< * A callback function called when the checked state changes. */ onCheckedChange?: OnChangeFn; - - /** - * Whether or not the checkbox is controlled or not. If `true`, the checkbox will not update - * the checked state internally, instead it will call `onCheckedChange` when it would have - * otherwise, and it is up to you to update the `checked` prop that is passed to the - * component. - * - * @defaultValue false - */ - controlledChecked?: boolean; }, SwitchRootSnippetProps >; diff --git a/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte b/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte index 51fef86eb..5d528823a 100644 --- a/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte +++ b/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte @@ -14,7 +14,6 @@ loop = true, activationMode = "automatic", disabled = false, - controlledValue = false, children, child, ...restProps @@ -25,12 +24,8 @@ value: box.with( () => value, (v) => { - if (controlledValue) { - onValueChange(v); - } else { - value = v; - onValueChange(v); - } + value = v; + onValueChange(v); } ), orientation: box.with(() => orientation), diff --git a/packages/bits-ui/src/lib/bits/tabs/types.ts b/packages/bits-ui/src/lib/bits/tabs/types.ts index c1db8a9ac..03ced990f 100644 --- a/packages/bits-ui/src/lib/bits/tabs/types.ts +++ b/packages/bits-ui/src/lib/bits/tabs/types.ts @@ -48,15 +48,6 @@ export type TabsRootPropsWithoutHTML = WithChild<{ * @defaultValue false */ disabled?: boolean; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }>; export type TabsRootProps = TabsRootPropsWithoutHTML & diff --git a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte index d92369daa..a0a3eeb77 100644 --- a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte +++ b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte @@ -16,7 +16,6 @@ loop = true, orientation = "horizontal", rovingFocus = true, - controlledValue = false, child, children, ...restProps @@ -24,12 +23,8 @@ if (value === undefined) { const defaultValue = type === "single" ? "" : []; - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(defaultValue as any); - } else { - value = defaultValue; - } + + value = defaultValue; } const rootState = useToggleGroupRoot({ @@ -37,14 +32,9 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange?.(v as any); - } + value = v; + // @ts-expect-error - we know + onValueChange(v); } ) as WritableBox | WritableBox, disabled: box.with(() => disabled), diff --git a/packages/bits-ui/src/lib/bits/toggle-group/types.ts b/packages/bits-ui/src/lib/bits/toggle-group/types.ts index 541505176..c6d2390bb 100644 --- a/packages/bits-ui/src/lib/bits/toggle-group/types.ts +++ b/packages/bits-ui/src/lib/bits/toggle-group/types.ts @@ -35,15 +35,6 @@ export type BaseToggleGroupRootProps = { * users navigate between the items using the tab key. */ rovingFocus?: boolean; - - /** - * Whether or not the value state is controlled or not. If `true`, the component will not update - * the value state internally, instead it will call `onValueChange` when it would have - * otherwise, and it is up to you to update the `value` prop that is passed to the component. - * - * @defaultValue false - */ - controlledValue?: boolean; }; export type SingleToggleGroupRootPropsWithoutHTML = WithChild< diff --git a/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte b/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte index 8e8561dd6..a3af61ffb 100644 --- a/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte +++ b/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte @@ -12,7 +12,6 @@ onPressedChange = noop, disabled = false, type = "button", - controlledPressed = false, children, child, ...restProps @@ -22,12 +21,8 @@ pressed: box.with( () => pressed, (v) => { - if (controlledPressed) { - onPressedChange(v); - } else { - pressed = v; - onPressedChange(v); - } + pressed = v; + onPressedChange(v); } ), disabled: box.with(() => disabled ?? false), diff --git a/packages/bits-ui/src/lib/bits/toggle/types.ts b/packages/bits-ui/src/lib/bits/toggle/types.ts index ffaf6e299..f79b47a37 100644 --- a/packages/bits-ui/src/lib/bits/toggle/types.ts +++ b/packages/bits-ui/src/lib/bits/toggle/types.ts @@ -25,16 +25,6 @@ export type ToggleRootPropsWithoutHTML = WithChild< * @defaultValue false */ disabled?: boolean | null | undefined; - - /** - * Whether or not the pressed state is controlled or not. If `true`, the component will not - * update the pressed state internally, instead it will call `onPressedChange` when it - * would have otherwise, and it is up to you to update the `pressed` prop that is passed to - * the component. - * - * @defaultValue false - */ - controlledPressed?: boolean; }, ToggleRootSnippetProps >; diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte index 51ac40edf..88c297130 100644 --- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte +++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte @@ -13,7 +13,6 @@ onValueChange = noop, type, disabled = false, - controlledValue = false, child, children, ...restProps @@ -21,12 +20,7 @@ if (value === undefined) { const defaultValue = type === "single" ? "" : []; - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(defaultValue as any); - } else { - value = defaultValue; - } + value = defaultValue; } const groupState = useToolbarGroup({ @@ -36,14 +30,9 @@ value: box.with( () => value!, (v) => { - if (controlledValue) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } else { - value = v; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onValueChange(v as any); - } + value = v; + // @ts-expect-error - we know + onValueChange(v); } ) as WritableBox | WritableBox, ref: box.with( diff --git a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte index e3636e5dc..9b5e2b2c6 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte +++ b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip.svelte @@ -13,7 +13,6 @@ disableCloseOnTriggerClick, disableHoverableContent, ignoreNonKeyboardFocus, - controlledOpen = false, children, }: TooltipRootProps = $props(); @@ -21,12 +20,8 @@ open: box.with( () => open, (v) => { - if (controlledOpen) { - onOpenChange(v); - } else { - open = v; - onOpenChange(v); - } + open = v; + onOpenChange(v); } ), delayDuration: box.with(() => delayDuration), diff --git a/packages/bits-ui/src/lib/bits/tooltip/types.ts b/packages/bits-ui/src/lib/bits/tooltip/types.ts index cc3dc8084..765df783f 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/types.ts +++ b/packages/bits-ui/src/lib/bits/tooltip/types.ts @@ -111,15 +111,6 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{ * @defaultValue false */ ignoreNonKeyboardFocus?: boolean; - - /** - * Whether or not the open state is controlled or not. If `true`, the component will not update - * the open state internally, instead it will call `onOpenChange` when it would have - * otherwise, and it is up to you to update the `open` prop that is passed to the component. - * - * @defaultValue false - */ - controlledOpen?: boolean; }>; export type TooltipRootProps = TooltipRootPropsWithoutHTML; diff --git a/sites/docs/content/components/accordion.md b/sites/docs/content/components/accordion.md index 9e9a8e752..921876854 100644 --- a/sites/docs/content/components/accordion.md +++ b/sites/docs/content/components/accordion.md @@ -213,13 +213,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the accordion's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the accordion responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Accordion.Root` component. -2. Provide a `value` prop to `Accordion.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/alert-dialog.md b/sites/docs/content/components/alert-dialog.md index b202a0a01..1c38e4544 100644 --- a/sites/docs/content/components/alert-dialog.md +++ b/sites/docs/content/components/alert-dialog.md @@ -205,7 +205,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/calendar.md b/sites/docs/content/components/calendar.md index c2f0aabec..a3d438cb4 100644 --- a/sites/docs/content/components/calendar.md +++ b/sites/docs/content/components/calendar.md @@ -132,13 +132,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's placeholder state, use the `controlledPlaceholder` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPlaceholder` prop to `true` on the `Calendar.Root` component. -2. Provide a `placeholder` prop to `Calendar.Root`, which should be a variable holding the current state. -3. Implement an `onPlaceholderChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myPlaceholder = p)} + bind:placeholder={() => myPlaceholder, (newPlaceholder) => (myPlaceholder = newPlaceholder)} > @@ -225,13 +217,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Calendar.Root` component. -2. Provide a `value` prop to `Calendar.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/checkbox.md b/sites/docs/content/components/checkbox.md index 197f9379c..203f18f93 100644 --- a/sites/docs/content/components/checkbox.md +++ b/sites/docs/content/components/checkbox.md @@ -157,13 +157,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the checkbox's checked state, use the `controlledChecked` prop. This approach requires you to manually manage the checked state, giving you full control over when and how the checkbox responds to change events. - -To implement controlled state: - -1. Set the `controlledChecked` prop to `true` on the `Checkbox.Root` component. -2. Provide a `checked` prop to `Checkbox.Root`, which should be a variable holding the current state. -3. Implement an `onCheckedChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myChecked = c)}> + myChecked, (newChecked) => (myChecked = newChecked)}> ``` @@ -242,13 +236,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the checkbox's checked state, use the `controlledIndeterminate` prop. This approach requires you to manually manage the `indeterminate` state, giving you full control over when and how the checkbox responds to change events. - -To implement controlled state: - -1. Set the `controlledIndeterminate` prop to `true` on the `Checkbox.Root` component. -2. Provide a `indeterminate` prop to `Checkbox.Root`, which should be a variable holding the current state. -3. Implement an `onIndeterminateChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myIndeterminate = i)} + bind:indeterminate={() => myIndeterminate, + (newIndeterminate) => (myIndeterminate = newIndeterminate)} > @@ -414,13 +401,7 @@ For more granular control or to perform additional logic on state changes, use t #### 3. Fully Controlled -For complete control over the Checkbox Group's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the group responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Checkbox.Group` component. -2. Provide a `value` prop to `Checkbox.Group`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/collapsible.md b/sites/docs/content/components/collapsible.md index 25fb3187b..77854292f 100644 --- a/sites/docs/content/components/collapsible.md +++ b/sites/docs/content/components/collapsible.md @@ -145,22 +145,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the Collapsible's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the collapsible responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Collapsible.Root` component. -2. Provide an `open` prop to `Collapsible.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/combobox.md b/sites/docs/content/components/combobox.md index 97b4bfc0d..2b8492334 100644 --- a/sites/docs/content/components/combobox.md +++ b/sites/docs/content/components/combobox.md @@ -202,13 +202,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Combobox.Root` component. -2. Provide a `value` prop to `Combobox.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` @@ -291,13 +285,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledOpen` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Combobox.Root` component. -2. Provide an `open` prop to `Combobox.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = v)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/command.md b/sites/docs/content/components/command.md index 06d7e056b..c533c8ec9 100644 --- a/sites/docs/content/components/command.md +++ b/sites/docs/content/components/command.md @@ -132,13 +132,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Command.Root` component. -2. Provide a `value` prop to `Command.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/context-menu.md b/sites/docs/content/components/context-menu.md index 9fa4ab756..408002577 100644 --- a/sites/docs/content/components/context-menu.md +++ b/sites/docs/content/components/context-menu.md @@ -197,13 +197,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `ContextMenu.Root` component. -2. Provide an `open` prop to `ContextMenu.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/date-field.md b/sites/docs/content/components/date-field.md index b9044149a..bf6e3fc39 100644 --- a/sites/docs/content/components/date-field.md +++ b/sites/docs/content/components/date-field.md @@ -194,13 +194,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's placeholder state, use the `controlledPlaceholder` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPlaceholder` prop to `true` on the `DateField.Root` component. -2. Provide a `placeholder` prop to `DateField.Root`, which should be a variable holding the current state. -3. Implement an `onPlaceholderChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myPlaceholder = p)} + bind:placeholder={() => myPlaceholder, (newPlaceholder) => (myPlaceholder = newPlaceholder)} > @@ -287,13 +279,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `DateField.Root` component. -2. Provide a `value` prop to `DateField.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/date-picker.md b/sites/docs/content/components/date-picker.md index a1cb14168..c114f5d8c 100644 --- a/sites/docs/content/components/date-picker.md +++ b/sites/docs/content/components/date-picker.md @@ -138,13 +138,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's placeholder state, use the `controlledPlaceholder` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPlaceholder` prop to `true` on the `DatePicker.Root` component. -2. Provide a `placeholder` prop to `DatePicker.Root`, which should be a variable holding the current state. -3. Implement an `onPlaceholderChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myPlaceholder = p)} + bind:placeholder={() => myPlaceholder, (newPlaceholder) => (myPlaceholder = newPlaceholder)} > @@ -231,13 +223,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `DatePicker.Root` component. -2. Provide a `value` prop to `DatePicker.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` @@ -320,22 +306,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `DatePicker.Root` component. -2. Provide an `open` prop to `DatePicker.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/date-range-field.md b/sites/docs/content/components/date-range-field.md index c47886a46..b68948945 100644 --- a/sites/docs/content/components/date-range-field.md +++ b/sites/docs/content/components/date-range-field.md @@ -103,13 +103,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's placeholder state, use the `controlledPlaceholder` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPlaceholder` prop to `true` on the `DateRangeField.Root` component. -2. Provide a `placeholder` prop to `DateRangeField.Root`, which should be a variable holding the current state. -3. Implement an `onPlaceholderChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myPlaceholder = p)} + bind:placeholder={() => myPlaceholder, (newPlaceholder) => (myPlaceholder = newPlaceholder)} > @@ -214,13 +206,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `DateRangeField.Root` component. -2. Provide a `value` prop to `DateRangeField.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/date-range-picker.md b/sites/docs/content/components/date-range-picker.md index 9954b68a1..4886e6c5d 100644 --- a/sites/docs/content/components/date-range-picker.md +++ b/sites/docs/content/components/date-range-picker.md @@ -137,14 +137,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's placeholder state, use the `controlledPlaceholder` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPlaceholder` prop to `true` on the `DateRangePicker.Root` component. -2. Provide a `placeholder` prop to `DateRangePicker.Root`, which should be a variable holding the current state. -3. Implement an `onPlaceholderChange` handler to update the state when the internal state changes. -4. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte (myPlaceholder = p)} + bind:placeholder={() => myPlaceholder, (newPlaceholder) => (myPlaceholder = newPlaceholder)} > @@ -249,13 +240,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `DateRangePicker.Root` component. -2. Provide a `value` prop to `DateRangePicker.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` @@ -338,22 +323,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `DateRangePicker.Root` component. -2. Provide an `open` prop to `DateRangePicker.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/dialog.md b/sites/docs/content/components/dialog.md index 76fc90409..08e4b9d9a 100644 --- a/sites/docs/content/components/dialog.md +++ b/sites/docs/content/components/dialog.md @@ -219,22 +219,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Dialog.Root` component. -2. Provide an `open` prop to `Dialog.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/dropdown-menu.md b/sites/docs/content/components/dropdown-menu.md index bd4a61376..56a1d9830 100644 --- a/sites/docs/content/components/dropdown-menu.md +++ b/sites/docs/content/components/dropdown-menu.md @@ -172,13 +172,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `DropdownMenu.Root` component. -2. Provide an `open` prop to `DropdownMenu.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/link-preview.md b/sites/docs/content/components/link-preview.md index 225ef640d..fc016feed 100644 --- a/sites/docs/content/components/link-preview.md +++ b/sites/docs/content/components/link-preview.md @@ -95,13 +95,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `LinkPreview.Root` component. -2. Provide an `open` prop to `LinkPreview.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/menubar.md b/sites/docs/content/components/menubar.md index 4d43b80d7..ce7666dc9 100644 --- a/sites/docs/content/components/menubar.md +++ b/sites/docs/content/components/menubar.md @@ -169,7 +169,7 @@ Use the `bind:value` directive for effortless two-way synchronization between yo ### Change Handler -You can also use the `onValueCHange` prop to update local state when the menubar's active menu changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the menus open or close. +You can also use the `onValueChange` prop to update local state when the menubar's active menu changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the menus open or close. ```svelte {3,7-11} - (myPage = p)}> + myPage, (newPage) => (myPage = newPage)}> ``` diff --git a/sites/docs/content/components/pin-input.md b/sites/docs/content/components/pin-input.md index 6fc50dda2..5f76cdc51 100644 --- a/sites/docs/content/components/pin-input.md +++ b/sites/docs/content/components/pin-input.md @@ -114,13 +114,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `PinInput.Root` component. -2. Provide a `value` prop to `PinInput.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/popover.md b/sites/docs/content/components/popover.md index dfe7191ba..2cac91cf3 100644 --- a/sites/docs/content/components/popover.md +++ b/sites/docs/content/components/popover.md @@ -88,22 +88,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Popover.Root` component. -2. Provide an `open` prop to `Popover.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the local state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/radio-group.md b/sites/docs/content/components/radio-group.md index ab1c7e831..f43cf40d2 100644 --- a/sites/docs/content/components/radio-group.md +++ b/sites/docs/content/components/radio-group.md @@ -146,13 +146,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `RadioGroup.Root` component. -2. Provide a `value` prop to `RadioGroup.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/select.md b/sites/docs/content/components/select.md index 78778b657..682e1ebe9 100644 --- a/sites/docs/content/components/select.md +++ b/sites/docs/content/components/select.md @@ -194,13 +194,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Select.Root` component. -2. Provide a `value` prop to `Select.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` @@ -283,13 +277,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledOpen` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Select.Root` component. -2. Provide an `open` prop to `Select.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = v)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/components/slider.md b/sites/docs/content/components/slider.md index c57885d7d..a1225898d 100644 --- a/sites/docs/content/components/slider.md +++ b/sites/docs/content/components/slider.md @@ -136,13 +136,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Slider.Root` component. -2. Provide a `value` prop to `Slider.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/switch.md b/sites/docs/content/components/switch.md index 73d00d0f5..3ce22b163 100644 --- a/sites/docs/content/components/switch.md +++ b/sites/docs/content/components/switch.md @@ -138,13 +138,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the switch's checked state, use the `controlledChecked` prop. This approach requires you to manually manage the checked state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledChecked` prop to `true` on the `Switch.Root` component. -2. Provide a `checked` prop to `Switch.Root`, which should be a variable holding the current state. -3. Implement an `onCheckedChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myChecked = c)}> + myChecked, (newChecked) => (myChecked = newChecked)}> ``` diff --git a/sites/docs/content/components/tabs.md b/sites/docs/content/components/tabs.md index 604f303f4..ede064b9a 100644 --- a/sites/docs/content/components/tabs.md +++ b/sites/docs/content/components/tabs.md @@ -87,13 +87,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Tabs.Root` component. -2. Provide a `value` prop to `Tabs.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/toggle-group.md b/sites/docs/content/components/toggle-group.md index 971b68bbc..3a66295d1 100644 --- a/sites/docs/content/components/toggle-group.md +++ b/sites/docs/content/components/toggle-group.md @@ -92,13 +92,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `ToggleGroup.Root` component. -2. Provide a `value` prop to `ToggleGroup.Root`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myValue = v)} -> + myValue, (newValue) => (myValue = newValue)}> ``` diff --git a/sites/docs/content/components/toggle.md b/sites/docs/content/components/toggle.md index 6ae6a0606..998e98567 100644 --- a/sites/docs/content/components/toggle.md +++ b/sites/docs/content/components/toggle.md @@ -78,13 +78,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's pressed state, use the `controlledPressed` prop. This approach requires you to manually manage the checked state, giving you full control over when and how the component responds to change events. - -To implement controlled state: - -1. Set the `controlledPressed` prop to `true` on the `Toggle.Root` component. -2. Provide a `pressed` prop to `Toggle.Root`, which should be a variable holding the current state. -3. Implement an `onPressedChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myPressed = p)}> + myPressed, (newPressed) => (myPressed = newPressed)}> ``` diff --git a/sites/docs/content/components/toolbar.md b/sites/docs/content/components/toolbar.md index fce7af7cc..550a8f7bf 100644 --- a/sites/docs/content/components/toolbar.md +++ b/sites/docs/content/components/toolbar.md @@ -93,13 +93,7 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events. - -To implement controlled state: - -1. Set the `controlledValue` prop to `true` on the `Toolbar.Group` component. -2. Provide a `value` prop to `Toolbar.Group`, which should be a variable holding the current state. -3. Implement an `onValueChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - { - myValue = v; - // additional logic here. - }} - > + myValue, (newValue) => (myValue = newValue)}> diff --git a/sites/docs/content/components/tooltip.md b/sites/docs/content/components/tooltip.md index d4709b4e6..f67f70dfb 100644 --- a/sites/docs/content/components/tooltip.md +++ b/sites/docs/content/components/tooltip.md @@ -135,22 +135,15 @@ For more granular control or to perform additional logic on state changes, use t ### 3. Fully Controlled -For complete control over the dialog's open state, use the `controlledOpen` prop. This approach requires you to manually manage the open state, giving you full control over when and how the tooltip responds to open/close events. - -To implement controlled state: - -1. Set the `controlledOpen` prop to `true` on the `Tooltip.Root` component. -2. Provide an `open` prop to `Tooltip.Root`, which should be a variable holding the current state. -3. Implement an `onOpenChange` handler to update the state when the internal state changes. +For complete control over the component's state, use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the value state externally. ```svelte - (myOpen = o)}> + myOpen, (newOpen) => (myOpen = newOpen)}> ``` diff --git a/sites/docs/content/controlled-state.md b/sites/docs/content/controlled-state.md index fed95579b..32a668ce6 100644 --- a/sites/docs/content/controlled-state.md +++ b/sites/docs/content/controlled-state.md @@ -49,11 +49,7 @@ Controlled state puts you in charge of the component's state management. Use thi - You want to synchronize the component's state with other parts of your application. - You require custom logic for state updates. -To implement controlled state: - -- Set the `controlled` prop to true (e.g., `controlledValue`). -- Pass a local state variable to the component. -- Use the `on`Change callback to update the local state (e.g., `onValueChange`). +To implement controlled state, use [Function Bindings](https://svelte.dev/docs/svelte/bind#Function-bindings) to manage the state externally. This approach allows you to control the state updates and perform additional logic as needed. Here's an example of how you might use controlled state with the `Accordion` component: @@ -63,23 +59,11 @@ Here's an example of how you might use controlled state with the `Accordion` com let myValue = $state(""); - (myValue = v)}> + myValue, (newValue) => (myValue = newValue)}> ``` -In this controlled state example: - -- We set `controlledValue` to true. -- We pass our local `myValue` state to the value prop. -- We use `onValueChange` to handle state updates - - - -Unlike uncontrolled state, controlled state does not update the state before calling the `onValueChange` function. - - - ## Best Practices - **Choose wisely**: Use controlled state only when necessary. Uncontrolled state is simpler and sufficient for most use cases. diff --git a/sites/docs/src/lib/content/api-reference/accordion.api.ts b/sites/docs/src/lib/content/api-reference/accordion.api.ts index 313870022..ad3914d52 100644 --- a/sites/docs/src/lib/content/api-reference/accordion.api.ts +++ b/sites/docs/src/lib/content/api-reference/accordion.api.ts @@ -6,7 +6,6 @@ import type { AccordionTriggerPropsWithoutHTML, } from "bits-ui"; import { - controlledValueProp, createApiSchema, createBooleanProp, createCSSVarSchema, @@ -65,7 +64,6 @@ const root = createApiSchema({ description: "A callback function called when the active accordion item value changes. If the `type` is `'single'`, the argument will be a string. If `type` is `'multiple'`, the argument will be an array of strings.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ description: "Whether or not the accordion is disabled. When disabled, the accordion cannot be interacted with.", diff --git a/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts b/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts index 35fb301b1..0741e4370 100644 --- a/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts +++ b/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts @@ -20,7 +20,6 @@ import { } from "./extended-types/dialog/index.js"; import { childrenSnippet, - controlledOpenProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -58,7 +57,6 @@ const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback function called when the open state changes.", }), - controlledOpen: controlledOpenProp, children: childrenSnippet(), }, }); diff --git a/sites/docs/src/lib/content/api-reference/calendar.api.ts b/sites/docs/src/lib/content/api-reference/calendar.api.ts index 03981d21e..9a2da46d1 100644 --- a/sites/docs/src/lib/content/api-reference/calendar.api.ts +++ b/sites/docs/src/lib/content/api-reference/calendar.api.ts @@ -20,10 +20,7 @@ import { SingleOrMultipleProp, WeekdayFormatProp, } from "./extended-types/shared/index.js"; - import { - controlledPlaceholderProp, - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -94,7 +91,6 @@ export const root = createApiSchema({ definition: CalendarOnValueChangeProp, description: "A function that is called when the selected date changes.", }), - controlledValue: controlledValueProp, placeholder: { type: dateValueProp, description: @@ -104,7 +100,6 @@ export const root = createApiSchema({ definition: OnPlaceholderChangeProp, description: "A function that is called when the placeholder date changes.", }), - controlledPlaceholder: controlledPlaceholderProp, pagedNavigation: createBooleanProp({ description: "Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.", diff --git a/sites/docs/src/lib/content/api-reference/checkbox.api.ts b/sites/docs/src/lib/content/api-reference/checkbox.api.ts index bdc963de3..f8ebbc41e 100644 --- a/sites/docs/src/lib/content/api-reference/checkbox.api.ts +++ b/sites/docs/src/lib/content/api-reference/checkbox.api.ts @@ -4,9 +4,6 @@ import type { CheckboxRootPropsWithoutHTML, } from "bits-ui"; import { - controlledCheckedProp, - controlledIndeterminateProp, - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -41,7 +38,6 @@ export const root = createApiSchema({ description: "A callback that is fired when the checkbox button's checked state changes.", }), - controlledChecked: controlledCheckedProp, indeterminate: createBooleanProp({ default: C.FALSE, description: "Whether the checkbox is an indeterminate state or not.", @@ -51,7 +47,6 @@ export const root = createApiSchema({ definition: CheckboxRootOnIndeterminateChangeProp, description: "A callback that is fired when the indeterminate state changes.", }), - controlledIndeterminate: controlledIndeterminateProp, disabled: createBooleanProp({ default: C.FALSE, description: @@ -108,7 +103,6 @@ export const group = createApiSchema({ definition: CheckboxGroupOnValueChangeProp, description: "A callback that is fired when the checkbox group's value state changes.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: diff --git a/sites/docs/src/lib/content/api-reference/collapsible.api.ts b/sites/docs/src/lib/content/api-reference/collapsible.api.ts index 8cc750a84..1eb9b92f1 100644 --- a/sites/docs/src/lib/content/api-reference/collapsible.api.ts +++ b/sites/docs/src/lib/content/api-reference/collapsible.api.ts @@ -4,7 +4,6 @@ import type { CollapsibleTriggerPropsWithoutHTML, } from "bits-ui"; import { - controlledOpenProp, createApiSchema, createBooleanProp, createCSSVarSchema, @@ -35,7 +34,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that is fired when the collapsible's open state changes.", }), - controlledOpen: controlledOpenProp, disabled: createBooleanProp({ default: C.FALSE, description: diff --git a/sites/docs/src/lib/content/api-reference/combobox.api.ts b/sites/docs/src/lib/content/api-reference/combobox.api.ts index a72d03911..d89eae07b 100644 --- a/sites/docs/src/lib/content/api-reference/combobox.api.ts +++ b/sites/docs/src/lib/content/api-reference/combobox.api.ts @@ -25,8 +25,6 @@ import { FloatingContentChildSnippetProps } from "./extended-types/floating/inde import { arrowProps, childrenSnippet, - controlledOpenProp, - controlledValueProp, createApiSchema, createBooleanProp, createCSSVarSchema, @@ -80,7 +78,6 @@ export const root = createApiSchema({ description: "A callback that is fired when the combobox value changes. When the type is `'single'`, the argument will be a string. When the type is `'multiple'`, the argument will be an array of strings.", }), - controlledValue: controlledValueProp, open: createBooleanProp({ default: C.FALSE, description: "The open state of the combobox menu.", @@ -90,7 +87,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that is fired when the combobox menu's open state changes.", }), - controlledOpen: controlledOpenProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the combobox component is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/command.api.ts b/sites/docs/src/lib/content/api-reference/command.api.ts index f7add0f0d..5a77ac060 100644 --- a/sites/docs/src/lib/content/api-reference/command.api.ts +++ b/sites/docs/src/lib/content/api-reference/command.api.ts @@ -15,7 +15,6 @@ import type { import { NoopProp, OnStringValueChangeProp } from "./extended-types/shared/index.js"; import { CommandFilterProp, CommandOnStateChangeProp } from "./extended-types/command/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createCSSVarSchema, @@ -41,7 +40,6 @@ const root = createApiSchema({ definition: OnStringValueChangeProp, description: "A callback that is fired when the command value changes.", }), - controlledValue: controlledValueProp, label: createStringProp({ description: "An accessible label for the command menu. This is not visible and is only used for screen readers.", diff --git a/sites/docs/src/lib/content/api-reference/date-field.api.ts b/sites/docs/src/lib/content/api-reference/date-field.api.ts index 1a17c88f0..a0512cb2f 100644 --- a/sites/docs/src/lib/content/api-reference/date-field.api.ts +++ b/sites/docs/src/lib/content/api-reference/date-field.api.ts @@ -6,8 +6,6 @@ import type { } from "bits-ui"; import { childrenSnippet, - controlledPlaceholderProp, - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -47,7 +45,6 @@ export const root = createApiSchema({ definition: OnDateValueChangeProp, description: "A function that is called when the selected date changes.", }), - controlledValue: controlledValueProp, placeholder: createPropSchema({ type: dateValueProp, description: @@ -58,7 +55,6 @@ export const root = createApiSchema({ definition: OnPlaceholderChangeProp, description: "A function that is called when the placeholder date changes.", }), - controlledPlaceholder: controlledPlaceholderProp, required: createBooleanProp({ description: "Whether or not the date field is required.", default: C.FALSE, diff --git a/sites/docs/src/lib/content/api-reference/date-picker.api.ts b/sites/docs/src/lib/content/api-reference/date-picker.api.ts index 6fb9dc93e..2919a620c 100644 --- a/sites/docs/src/lib/content/api-reference/date-picker.api.ts +++ b/sites/docs/src/lib/content/api-reference/date-picker.api.ts @@ -25,9 +25,6 @@ import { } from "./date-field.api.js"; import { childrenSnippet, - controlledOpenProp, - controlledPlaceholderProp, - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -45,7 +42,6 @@ export const root = createApiSchema({ props: { value: calendarRoot.props!.value, onValueChange: calendarRoot.props!.onValueChange, - controlledValue: controlledValueProp, open: createBooleanProp({ default: C.FALSE, description: "The open state of the popover content.", @@ -55,10 +51,8 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that fires when the open state changes.", }), - controlledOpen: controlledOpenProp, placeholder: calendarRoot.props!.placeholder, onPlaceholderChange: calendarRoot.props!.onPlaceholderChange, - controlledPlaceholder: controlledPlaceholderProp, isDateUnavailable: calendarRoot.props!.isDateUnavailable, isDateDisabled: calendarRoot.props!.isDateDisabled, validate: dateFieldRoot.props!.validate, diff --git a/sites/docs/src/lib/content/api-reference/date-range-field.api.ts b/sites/docs/src/lib/content/api-reference/date-range-field.api.ts index 6b4017473..79f16918d 100644 --- a/sites/docs/src/lib/content/api-reference/date-range-field.api.ts +++ b/sites/docs/src/lib/content/api-reference/date-range-field.api.ts @@ -38,10 +38,8 @@ export const root = createApiSchema({ definition: DateOnRangeChangeProp, description: "A function that is called when the selected date changes.", }), - controlledValue: dateFieldRoot.props!.controlledValue, placeholder: dateFieldRoot.props!.placeholder, onPlaceholderChange: dateFieldRoot.props!.onPlaceholderChange, - controlledPlaceholder: dateFieldRoot.props!.controlledPlaceholder, errorMessageId: dateFieldRoot.props!.errorMessageId, validate: dateFieldRoot.props!.validate, onInvalid: dateFieldRoot.props!.onInvalid, diff --git a/sites/docs/src/lib/content/api-reference/date-range-picker.api.ts b/sites/docs/src/lib/content/api-reference/date-range-picker.api.ts index 2e44faff5..baeb37931 100644 --- a/sites/docs/src/lib/content/api-reference/date-range-picker.api.ts +++ b/sites/docs/src/lib/content/api-reference/date-range-picker.api.ts @@ -37,10 +37,8 @@ const root = createApiSchema({ props: { value: rangeFieldRoot.props!.value, onValueChange: rangeFieldRoot.props!.onValueChange, - controlledValue: rangeFieldRoot.props!.controlledValue, placeholder: rangeFieldRoot.props!.placeholder, onPlaceholderChange: rangeFieldRoot.props!.onPlaceholderChange, - controlledPlaceholder: rangeFieldRoot.props!.controlledPlaceholder, readonlySegments: rangeFieldRoot.props!.readonlySegments, isDateUnavailable: calendarRoot.props!.isDateUnavailable, minValue: rangeFieldRoot.props!.minValue, @@ -70,7 +68,6 @@ const root = createApiSchema({ numberOfMonths: rangeCalendarRoot.props!.numberOfMonths, open: datePickerRoot.props!.open, onOpenChange: datePickerRoot.props!.onOpenChange, - controlledOpen: datePickerRoot.props!.controlledOpen, onEndValueChange: rangeFieldRoot.props!.onEndValueChange, onStartValueChange: rangeFieldRoot.props!.onStartValueChange, ...withChildProps({ elType: "HTMLDivElement" }), diff --git a/sites/docs/src/lib/content/api-reference/dialog.api.ts b/sites/docs/src/lib/content/api-reference/dialog.api.ts index 25ed4c846..092b4f1c6 100644 --- a/sites/docs/src/lib/content/api-reference/dialog.api.ts +++ b/sites/docs/src/lib/content/api-reference/dialog.api.ts @@ -10,7 +10,6 @@ import type { } from "bits-ui"; import { childrenSnippet, - controlledOpenProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -57,7 +56,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback function called when the open state changes.", }), - controlledOpen: controlledOpenProp, children: childrenSnippet(), }, }); diff --git a/sites/docs/src/lib/content/api-reference/helpers.ts b/sites/docs/src/lib/content/api-reference/helpers.ts index 508c84bf4..fc33dffb6 100644 --- a/sites/docs/src/lib/content/api-reference/helpers.ts +++ b/sites/docs/src/lib/content/api-reference/helpers.ts @@ -572,45 +572,3 @@ export const valueDateRangeChangeFn: PropSchema = createFunctionProp({ definition: DateOnRangeChangeProp, description: "A function that is called when the selected date range changes.", }); - -export const controlledValueProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `value` is controlled or not. If `true`, the component will not update the `value` state internally, instead it will call `onValueChange` when it would have otherwise, and it is up to you to update the `value` prop that is passed to the component.", -}); - -export const controlledPlaceholderProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `placeholder` is controlled or not. If `true`, the component will not update the `placeholder` state internally, instead it will call `onPlaceholderChange` when it would have otherwise, and it is up to you to update the `placeholder` prop that is passed to the component.", -}); - -export const controlledOpenProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `open` state is controlled or not. If `true`, the component will not update the `open` state internally, instead it will call `onOpenChange` when it would have otherwise, and it is up to you to update the `open` prop that is passed to the component.", -}); - -export const controlledCheckedProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `checked` state is controlled or not. If `true`, the component will not update the `checked` state internally, instead it will call `onCheckedChange` when it would have otherwise, and it is up to you to update the `checked` prop that is passed to the component.", -}); - -export const controlledIndeterminateProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `indeterminate` state is controlled or not. If `true`, the component will not update the `indeterminate` state internally, instead it will call `onIndeterminateChange` when it would have otherwise, and it is up to you to update the `indeterminate` prop that is passed to the component.", -}); - -export const controlledPressedProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `pressed` state is controlled or not. If `true`, the component will not update the `pressed` state internally, instead it will call `onPressedChange` when it would have otherwise, and it is up to you to update the `pressed` prop that is passed to the component.", -}); - -export const controlledPageProp = createBooleanProp({ - default: C.FALSE, - description: - "Whether or not the `page` state is controlled or not. If `true`, the component will not update the `page` state internally, instead it will call `onPageChange` when it would have otherwise, and it is up to you to update the `page` prop that is passed to the component.", -}); diff --git a/sites/docs/src/lib/content/api-reference/link-preview.api.ts b/sites/docs/src/lib/content/api-reference/link-preview.api.ts index 34025a4c0..9a2a66e71 100644 --- a/sites/docs/src/lib/content/api-reference/link-preview.api.ts +++ b/sites/docs/src/lib/content/api-reference/link-preview.api.ts @@ -9,7 +9,6 @@ import { OnOpenChangeProp, OpenClosedProp } from "./extended-types/shared/index. import { arrowProps, childrenSnippet, - controlledOpenProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -46,7 +45,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that fires when the open state changes.", }), - controlledOpen: controlledOpenProp, openDelay: createNumberProp({ default: "700", description: diff --git a/sites/docs/src/lib/content/api-reference/menu.api.ts b/sites/docs/src/lib/content/api-reference/menu.api.ts index 34d08f3e3..594a307f2 100644 --- a/sites/docs/src/lib/content/api-reference/menu.api.ts +++ b/sites/docs/src/lib/content/api-reference/menu.api.ts @@ -18,10 +18,6 @@ import type { import { arrowProps, childrenSnippet, - controlledCheckedProp, - controlledIndeterminateProp, - controlledOpenProp, - controlledValueProp, createBooleanProp, createDataAttrSchema, createFunctionProp, @@ -86,7 +82,6 @@ const props = { definition: OnOpenChangeProp, description: "A callback that is fired when the menu's open state changes.", }), - controlledOpen: controlledOpenProp, dir: dirProp, children: childrenSnippet(), } satisfies PropObj; @@ -101,7 +96,6 @@ const subProps = { definition: OnOpenChangeProp, description: "A callback that is fired when the submenu's open state changes.", }), - controlledOpen: controlledOpenProp, children: childrenSnippet(), } satisfies PropObj; @@ -184,7 +178,6 @@ const checkboxItemProps = { description: "A callback that is fired when the checkbox menu item's checked state changes.", }), - controlledChecked: controlledCheckedProp, indeterminate: createBooleanProp({ default: C.FALSE, description: "Whether the checkbox menu item is in an indeterminate state or not.", @@ -194,7 +187,6 @@ const checkboxItemProps = { definition: CheckboxRootOnIndeterminateChangeProp, description: "A callback that is fired when the indeterminate state changes.", }), - controlledIndeterminate: controlledIndeterminateProp, ...omit(sharedItemProps, "child", "children"), ...withChildProps({ elType: "HTMLDivElement", @@ -212,7 +204,6 @@ const radioGroupProps = { definition: OnStringValueChangeProp, description: "A callback that is fired when the radio group's value changes.", }), - controlledValue: controlledValueProp, ...withChildProps({ elType: "HTMLDivElement" }), } satisfies PropObj; diff --git a/sites/docs/src/lib/content/api-reference/menubar.api.ts b/sites/docs/src/lib/content/api-reference/menubar.api.ts index 27a4d7873..d766342e4 100644 --- a/sites/docs/src/lib/content/api-reference/menubar.api.ts +++ b/sites/docs/src/lib/content/api-reference/menubar.api.ts @@ -19,7 +19,6 @@ import type { MenubarTriggerPropsWithoutHTML, } from "bits-ui"; import { - controlledValueProp, createApiSchema, createBooleanProp, createFunctionProp, @@ -43,7 +42,6 @@ export const root = createApiSchema({ definition: OnStringValueChangeProp, description: "A callback function called when the active menu value changes.", }), - controlledValue: controlledValueProp, dir: dirProp, loop: createBooleanProp({ default: C.TRUE, diff --git a/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts b/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts index 0ec5e230f..d1f189863 100644 --- a/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts +++ b/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts @@ -9,7 +9,6 @@ import type { NavigationMenuViewportPropsWithoutHTML, } from "bits-ui"; import { - controlledValueProp, createApiSchema, createBooleanProp, createEnumProp, @@ -38,7 +37,6 @@ export const root = createApiSchema({ definition: OnStringValueChangeProp, description: "A callback function called when the active menu value changes.", }), - controlledValue: controlledValueProp, dir: dirProp, skipDelayDuration: createNumberProp({ default: "300", diff --git a/sites/docs/src/lib/content/api-reference/pagination.api.ts b/sites/docs/src/lib/content/api-reference/pagination.api.ts index bca32f55a..15bfee2ad 100644 --- a/sites/docs/src/lib/content/api-reference/pagination.api.ts +++ b/sites/docs/src/lib/content/api-reference/pagination.api.ts @@ -6,7 +6,6 @@ import type { } from "bits-ui"; import { pageItemProp } from "./extended-types/index.js"; import { - controlledPageProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -40,7 +39,6 @@ export const root = createApiSchema({ definition: PaginationOnPageChangeProp, description: "A function called when the selected page changes.", }), - controlledPage: controlledPageProp, perPage: createNumberProp({ description: "The number of items per page.", default: "1", diff --git a/sites/docs/src/lib/content/api-reference/pin-input.api.ts b/sites/docs/src/lib/content/api-reference/pin-input.api.ts index df4acff66..c2412ca7f 100644 --- a/sites/docs/src/lib/content/api-reference/pin-input.api.ts +++ b/sites/docs/src/lib/content/api-reference/pin-input.api.ts @@ -10,7 +10,6 @@ import { } from "./extended-types/pin-input/index.js"; import { OnStringValueChangeProp } from "./extended-types/shared/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -35,7 +34,6 @@ const root = createApiSchema({ description: "A callback function that is called when the value of the input changes.", definition: OnStringValueChangeProp, }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the pin input is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/popover.api.ts b/sites/docs/src/lib/content/api-reference/popover.api.ts index 9a72bb38d..d1aae3306 100644 --- a/sites/docs/src/lib/content/api-reference/popover.api.ts +++ b/sites/docs/src/lib/content/api-reference/popover.api.ts @@ -11,7 +11,6 @@ import { FloatingContentChildSnippetProps } from "./extended-types/floating/inde import { arrowProps, childrenSnippet, - controlledOpenProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -49,7 +48,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that fires when the open state changes.", }), - controlledOpen: controlledOpenProp, children: childrenSnippet(), }, }); diff --git a/sites/docs/src/lib/content/api-reference/radio-group.api.ts b/sites/docs/src/lib/content/api-reference/radio-group.api.ts index 2aaffe4fe..2c1dc10e7 100644 --- a/sites/docs/src/lib/content/api-reference/radio-group.api.ts +++ b/sites/docs/src/lib/content/api-reference/radio-group.api.ts @@ -1,6 +1,5 @@ import type { RadioGroupItemPropsWithoutHTML, RadioGroupRootPropsWithoutHTML } from "bits-ui"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -27,7 +26,6 @@ export const root = createApiSchema({ definition: OnStringValueChangeProp, description: "A callback that is fired when the radio group's value changes.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: diff --git a/sites/docs/src/lib/content/api-reference/range-calendar.api.ts b/sites/docs/src/lib/content/api-reference/range-calendar.api.ts index c9cd96610..63e348fe9 100644 --- a/sites/docs/src/lib/content/api-reference/range-calendar.api.ts +++ b/sites/docs/src/lib/content/api-reference/range-calendar.api.ts @@ -32,10 +32,8 @@ export const root = createApiSchema({ props: { value: valueDateRangeProp, onValueChange: valueDateRangeChangeFn, - controlledValue: calendarRoot.props!.controlledValue, placeholder: calendarRoot.props!.placeholder, onPlaceholderChange: calendarRoot.props!.onPlaceholderChange, - controlledPlaceholder: calendarRoot.props!.controlledPlaceholder, pagedNavigation: calendarRoot.props!.pagedNavigation, preventDeselect: calendarRoot.props!.preventDeselect, weekdayFormat: calendarRoot.props!.weekdayFormat, diff --git a/sites/docs/src/lib/content/api-reference/select.api.ts b/sites/docs/src/lib/content/api-reference/select.api.ts index fa84aafb7..8a225b7a0 100644 --- a/sites/docs/src/lib/content/api-reference/select.api.ts +++ b/sites/docs/src/lib/content/api-reference/select.api.ts @@ -27,8 +27,6 @@ import { FloatingContentChildSnippetProps } from "./extended-types/floating/inde import { arrowProps, childrenSnippet, - controlledOpenProp, - controlledValueProp, createApiSchema, createBooleanProp, createCSSVarSchema, @@ -82,7 +80,6 @@ export const root = createApiSchema({ description: "A callback that is fired when the select value changes. When the type is `'single'`, the argument will be a string. When the type is `'multiple'`, the argument will be an array of strings.", }), - controlledValue: controlledValueProp, open: createBooleanProp({ default: C.FALSE, description: "The open state of the select menu.", @@ -92,7 +89,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that is fired when the select menu's open state changes.", }), - controlledOpen: controlledOpenProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the select component is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/slider.api.ts b/sites/docs/src/lib/content/api-reference/slider.api.ts index 3e9b69a2c..6133a8c42 100644 --- a/sites/docs/src/lib/content/api-reference/slider.api.ts +++ b/sites/docs/src/lib/content/api-reference/slider.api.ts @@ -7,7 +7,6 @@ import type { import { SliderRootOnValueChangeProp } from "./extended-types/slider/index.js"; import { OrientationProp, SingleOrMultipleProp } from "./extended-types/shared/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -47,7 +46,6 @@ const root = createApiSchema({ description: "A callback function called when the user finishes dragging the thumb and the value changes. This is different than the `onValueChange` callback because it waits until the user stops dragging before calling the callback, where the `onValueChange` callback is called immediately after the user starts dragging.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the switch is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/switch.api.ts b/sites/docs/src/lib/content/api-reference/switch.api.ts index 92fa61340..bd23583e7 100644 --- a/sites/docs/src/lib/content/api-reference/switch.api.ts +++ b/sites/docs/src/lib/content/api-reference/switch.api.ts @@ -1,6 +1,5 @@ import type { SwitchRootPropsWithoutHTML, SwitchThumbPropsWithoutHTML } from "bits-ui"; import { - controlledCheckedProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -35,7 +34,6 @@ const root = createApiSchema({ definition: SwitchRootOnCheckedChangeProp, description: "A callback function called when the checked state of the switch changes.", }), - controlledChecked: controlledCheckedProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the switch is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/tabs.api.ts b/sites/docs/src/lib/content/api-reference/tabs.api.ts index 0a5b8db03..56cb11608 100644 --- a/sites/docs/src/lib/content/api-reference/tabs.api.ts +++ b/sites/docs/src/lib/content/api-reference/tabs.api.ts @@ -7,7 +7,6 @@ import type { import { OnStringValueChangeProp, OrientationProp } from "./extended-types/shared/index.js"; import { TabsRootActivationModeProp, TabsTriggerStateProp } from "./extended-types/tabs/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -30,7 +29,6 @@ const root = createApiSchema({ definition: OnStringValueChangeProp, description: "A callback function called when the active tab value changes.", }), - controlledValue: controlledValueProp, activationMode: createEnumProp({ options: ["automatic", "manual"], description: diff --git a/sites/docs/src/lib/content/api-reference/toggle-group.api.ts b/sites/docs/src/lib/content/api-reference/toggle-group.api.ts index 752f94c0c..0925d20dc 100644 --- a/sites/docs/src/lib/content/api-reference/toggle-group.api.ts +++ b/sites/docs/src/lib/content/api-reference/toggle-group.api.ts @@ -7,7 +7,6 @@ import { } from "./extended-types/shared/index.js"; import { ToggleRootStateDataAttr } from "./extended-types/toggle/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -41,7 +40,6 @@ const root = createApiSchema({ description: "A callback function called when the value of the toggle group changes. The type of the value is dependent on the type of the toggle group.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the switch is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/toggle.api.ts b/sites/docs/src/lib/content/api-reference/toggle.api.ts index 35f4373a4..02adb242d 100644 --- a/sites/docs/src/lib/content/api-reference/toggle.api.ts +++ b/sites/docs/src/lib/content/api-reference/toggle.api.ts @@ -4,7 +4,6 @@ import { ToggleRootStateDataAttr, } from "./extended-types/toggle/index.js"; import { - controlledPressedProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -26,7 +25,6 @@ const root = createApiSchema({ definition: ToggleRootOnPressedChangeProp, description: "A callback function called when the pressed state of the toggle changes.", }), - controlledPressed: controlledPressedProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the switch is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/toolbar.api.ts b/sites/docs/src/lib/content/api-reference/toolbar.api.ts index 5cd17d2e9..31a20d4cd 100644 --- a/sites/docs/src/lib/content/api-reference/toolbar.api.ts +++ b/sites/docs/src/lib/content/api-reference/toolbar.api.ts @@ -12,7 +12,6 @@ import { } from "./extended-types/shared/index.js"; import { ToggleRootStateDataAttr } from "./extended-types/toggle/index.js"; import { - controlledValueProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -101,7 +100,6 @@ const group = createApiSchema({ definition: OnChangeStringOrArrayProp, description: "A callback function called when the value changes.", }), - controlledValue: controlledValueProp, disabled: createBooleanProp({ default: C.FALSE, description: "Whether or not the switch is disabled.", diff --git a/sites/docs/src/lib/content/api-reference/tooltip.api.ts b/sites/docs/src/lib/content/api-reference/tooltip.api.ts index 8b7996221..39a6d3660 100644 --- a/sites/docs/src/lib/content/api-reference/tooltip.api.ts +++ b/sites/docs/src/lib/content/api-reference/tooltip.api.ts @@ -15,7 +15,6 @@ import { FloatingContentChildSnippetProps } from "./extended-types/floating/inde import { arrowProps, childrenSnippet, - controlledOpenProp, createApiSchema, createBooleanProp, createDataAttrSchema, @@ -102,7 +101,6 @@ export const root = createApiSchema({ definition: OnOpenChangeProp, description: "A callback that fires when the open state changes.", }), - controlledOpen: controlledOpenProp, disabled, delayDuration, disableHoverableContent, diff --git a/sites/docs/src/routes/(main)/sink/+page.svelte b/sites/docs/src/routes/(main)/sink/+page.svelte index a80edf4b0..c6a7d36b8 100644 --- a/sites/docs/src/routes/(main)/sink/+page.svelte +++ b/sites/docs/src/routes/(main)/sink/+page.svelte @@ -38,7 +38,7 @@ {#each thumbs as index} - + open, onOpenChange} delayDuration={0}> {#snippet child({ props })}