From 0fbac98d933e03e5f93500f966a33e053f801b5c Mon Sep 17 00:00:00 2001 From: Magnar Ovedal Myrtveit Date: Sat, 27 Jul 2024 19:08:00 +0000 Subject: [PATCH 1/5] feat: compatibility with `exactOptionalPropertyTypes` With [`exactOptionalPropertyTypes`](https://www.typescriptlang.org/tsconfig/#exactOptionalPropertyTypes) enabled, optional properties cannot be `undefined` unless explicitly allowed. This commit explicitly allowes optional properties to be `undefined`. --- .../bits-ui/src/lib/bits/accordion/types.ts | 6 ++--- .../src/lib/bits/alert-dialog/types.ts | 6 ++--- .../src/lib/bits/aspect-ratio/types.ts | 2 +- packages/bits-ui/src/lib/bits/avatar/types.ts | 4 ++-- packages/bits-ui/src/lib/bits/button/types.ts | 10 ++++---- .../bits-ui/src/lib/bits/calendar/types.ts | 10 ++++---- .../bits-ui/src/lib/bits/checkbox/types.ts | 4 ++-- .../bits-ui/src/lib/bits/collapsible/types.ts | 4 ++-- packages/bits-ui/src/lib/bits/combobox/ctx.ts | 4 ++-- .../bits-ui/src/lib/bits/combobox/types.ts | 14 +++++------ .../bits-ui/src/lib/bits/date-field/types.ts | 12 +++++----- .../bits-ui/src/lib/bits/date-picker/types.ts | 16 ++++++------- .../src/lib/bits/date-range-field/types.ts | 12 +++++----- .../src/lib/bits/date-range-picker/types.ts | 16 ++++++------- packages/bits-ui/src/lib/bits/dialog/types.ts | 10 ++++---- .../bits-ui/src/lib/bits/floating/_types.ts | 24 +++++++++---------- .../src/lib/bits/floating/floating-config.ts | 18 +++++++------- .../src/lib/bits/link-preview/types.ts | 4 ++-- packages/bits-ui/src/lib/bits/menu/types.ts | 24 +++++++++---------- .../bits-ui/src/lib/bits/pagination/types.ts | 4 ++-- .../bits-ui/src/lib/bits/pin-input/types.ts | 4 ++-- .../bits-ui/src/lib/bits/popover/types.ts | 4 ++-- .../bits-ui/src/lib/bits/progress/types.ts | 4 ++-- .../bits-ui/src/lib/bits/radio-group/types.ts | 4 ++-- .../src/lib/bits/range-calendar/types.ts | 10 ++++---- packages/bits-ui/src/lib/bits/select/ctx.ts | 4 ++-- packages/bits-ui/src/lib/bits/select/types.ts | 12 +++++----- packages/bits-ui/src/lib/bits/slider/types.ts | 4 ++-- packages/bits-ui/src/lib/bits/switch/types.ts | 10 ++++---- packages/bits-ui/src/lib/bits/tabs/types.ts | 6 ++--- .../src/lib/bits/toggle-group/types.ts | 8 +++---- packages/bits-ui/src/lib/bits/toggle/types.ts | 4 ++-- .../bits-ui/src/lib/bits/toolbar/types.ts | 8 +++---- .../bits-ui/src/lib/bits/tooltip/types.ts | 4 ++-- packages/bits-ui/src/lib/internal/types.ts | 18 +++++++------- 35 files changed, 155 insertions(+), 153 deletions(-) diff --git a/packages/bits-ui/src/lib/bits/accordion/types.ts b/packages/bits-ui/src/lib/bits/accordion/types.ts index de440bbe7..b3772e286 100644 --- a/packages/bits-ui/src/lib/bits/accordion/types.ts +++ b/packages/bits-ui/src/lib/bits/accordion/types.ts @@ -23,12 +23,12 @@ export type AccordionPropsWithoutHTML = Expand< * The value of the accordion. * You can bind this to a value to programmatically control the open state. */ - value?: MeltAccordionProps["defaultValue"]; + value?: MeltAccordionProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn["defaultValue"]>; + onValueChange?: OnChangeFn["defaultValue"]> | undefined; } & DOMElement >; @@ -41,7 +41,7 @@ export type AccordionHeaderPropsWithoutHTML = Expand< /** * The heading level of the accordion header. */ - level?: ObjectVariation["level"]; + level?: ObjectVariation["level"] | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/alert-dialog/types.ts b/packages/bits-ui/src/lib/bits/alert-dialog/types.ts index 546838692..df36ccbc8 100644 --- a/packages/bits-ui/src/lib/bits/alert-dialog/types.ts +++ b/packages/bits-ui/src/lib/bits/alert-dialog/types.ts @@ -21,12 +21,12 @@ export type AlertDialogPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } >; @@ -54,7 +54,7 @@ export type AlertDialogPortalPropsWithoutHTML = DOMElement; export type AlertDialogTitlePropsWithoutHTML = Expand< { - level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts b/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts index 6594cd4f0..fdcb10699 100644 --- a/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts +++ b/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts @@ -2,7 +2,7 @@ import type { DOMEl, HTMLDivAttributes } from "$lib/internal/index.js"; export type AspectRatioPropsWithoutHTML = Expand< { - ratio?: number; + ratio?: number | undefined; } & DOMEl >; diff --git a/packages/bits-ui/src/lib/bits/avatar/types.ts b/packages/bits-ui/src/lib/bits/avatar/types.ts index a6f6d1d54..23a1dd480 100644 --- a/packages/bits-ui/src/lib/bits/avatar/types.ts +++ b/packages/bits-ui/src/lib/bits/avatar/types.ts @@ -14,12 +14,12 @@ export type AvatarPropsWithoutHTML = Expand< * The loading state of the image. * You can bind this to a boolean value to programmatically control the loading state. */ - loadingStatus?: "loading" | "loaded" | "error"; + loadingStatus?: "loading" | "loaded" | "error" | undefined; /** * A callback function called when the loading state changes. */ - onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">; + onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error"> | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/button/types.ts b/packages/bits-ui/src/lib/bits/button/types.ts index 2616fc44e..a2b39c2a8 100644 --- a/packages/bits-ui/src/lib/bits/button/types.ts +++ b/packages/bits-ui/src/lib/bits/button/types.ts @@ -6,19 +6,19 @@ export type ButtonPropsWithoutHTML = { /** * Melt UI builders to apply to the button component. */ - builders?: Builder[]; + builders?: Builder[] | undefined; }; type AnchorElement = ButtonPropsWithoutHTML & HTMLAnchorAttributes & { - href?: HTMLAnchorAttributes["href"]; - type?: never; + href?: HTMLAnchorAttributes["href"] | undefined; + type?: never | undefined; } & DOMEl; type ButtonElement = ButtonPropsWithoutHTML & HTMLButtonAttributes & { - type?: HTMLButtonAttributes["type"]; - href?: never; + type?: HTMLButtonAttributes["type"] | undefined; + href?: never | undefined; } & DOMEl; export type ButtonProps = AnchorElement | ButtonElement; diff --git a/packages/bits-ui/src/lib/bits/calendar/types.ts b/packages/bits-ui/src/lib/bits/calendar/types.ts index 87268de9f..62632af33 100644 --- a/packages/bits-ui/src/lib/bits/calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/calendar/types.ts @@ -30,12 +30,12 @@ export type CalendarPropsWithoutHTML = Expand< * You can bind this to a value to programmatically control the * value state. */ - value?: MeltCalendarProps["defaultValue"]; + value?: MeltCalendarProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn["defaultValue"]>; + onValueChange?: OnChangeFn["defaultValue"]> | undefined; /** * The placeholder date, used to display the calendar when no @@ -45,12 +45,12 @@ export type CalendarPropsWithoutHTML = Expand< * You can bind this to a value to programmatically control the * placeholder state. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * If `true`, the calendar will focus the selected day, @@ -59,7 +59,7 @@ export type CalendarPropsWithoutHTML = Expand< * * @default false */ - initialFocus?: boolean; + initialFocus?: boolean | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/checkbox/types.ts b/packages/bits-ui/src/lib/bits/checkbox/types.ts index 329cc4a6b..2d9a92482 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/types.ts +++ b/packages/bits-ui/src/lib/bits/checkbox/types.ts @@ -18,12 +18,12 @@ export type CheckboxPropsWithoutHTML = Expand< * * @defaultValue false */ - checked?: boolean | "indeterminate"; + checked?: boolean | "indeterminate" | undefined; /** * A callback function called when the checked state changes. */ - onCheckedChange?: OnChangeFn; + onCheckedChange?: OnChangeFn | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/collapsible/types.ts b/packages/bits-ui/src/lib/bits/collapsible/types.ts index 0033b9c04..fc9442e32 100644 --- a/packages/bits-ui/src/lib/bits/collapsible/types.ts +++ b/packages/bits-ui/src/lib/bits/collapsible/types.ts @@ -20,12 +20,12 @@ export type CollapsiblePropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/combobox/ctx.ts b/packages/bits-ui/src/lib/bits/combobox/ctx.ts index 493ad6626..f231553ac 100644 --- a/packages/bits-ui/src/lib/bits/combobox/ctx.ts +++ b/packages/bits-ui/src/lib/bits/combobox/ctx.ts @@ -46,11 +46,11 @@ export function getCtx() { type Items = { value: T; - label?: string; + label?: string | undefined; }; type Props = CreateComboboxProps & { - items?: Items[]; + items?: Items[] | undefined; }; export function setCtx(props: Props) { diff --git a/packages/bits-ui/src/lib/bits/combobox/types.ts b/packages/bits-ui/src/lib/bits/combobox/types.ts index e6bae961b..2be530b5b 100644 --- a/packages/bits-ui/src/lib/bits/combobox/types.ts +++ b/packages/bits-ui/src/lib/bits/combobox/types.ts @@ -43,7 +43,7 @@ export type ComboboxPropsWithoutHTML, Multiple>>; + onSelectedChange?: OnChangeFn, Multiple>> | undefined; /** * The open state of the combobox menu. @@ -51,17 +51,17 @@ export type ComboboxPropsWithoutHTML; + onOpenChange?: OnChangeFn | undefined; /** * Whether or not multiple values can be selected. */ - multiple?: Multiple; + multiple?: Multiple | undefined; /** * The value of the input. @@ -69,13 +69,13 @@ export type ComboboxPropsWithoutHTML` objects to * type the `selected` and `onSelectedChange` props. */ - items?: Selected[]; + items?: Selected[] | undefined; /** * Whether the input has been touched or not. You can bind to this to @@ -83,7 +83,7 @@ export type ComboboxPropsWithoutHTML; 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 4e9f3c118..414bcf630 100644 --- a/packages/bits-ui/src/lib/bits/date-field/types.ts +++ b/packages/bits-ui/src/lib/bits/date-field/types.ts @@ -17,34 +17,34 @@ export type DateFieldPropsWithoutHTML = Expand< * The value of the date field. * You can bind this to a `DateValue` object to programmatically control the value. */ - value?: DateValue; + value?: DateValue | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The placeholder date used to start the field. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * The id of the validation message element which is used to apply the * appropriate `aria-describedby` attribute to the input. */ - validationId?: string; + validationId?: string | undefined; /** * The id of the description element which is used to describe the input. * This is used to apply the appropriate `aria-describedby` attribute to the input. */ - descriptionId?: string; + descriptionId?: string | undefined; } >; 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 d3c8c7852..f9c77b1ad 100644 --- a/packages/bits-ui/src/lib/bits/date-picker/types.ts +++ b/packages/bits-ui/src/lib/bits/date-picker/types.ts @@ -51,45 +51,45 @@ export type DatePickerPropsWithoutHTML = Expand< * * @default false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; /** * The value of the date field. * You can bind this to a `DateValue` object to programmatically control the value. */ - value?: DateValue; + value?: DateValue | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The placeholder date used to start the field. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * The id of the validation message element which is used to apply the * appropriate `aria-describedby` attribute to the input. */ - validationId?: string; + validationId?: string | undefined; /** * The id of the description element which is used to describe the input. * This is used to apply the appropriate `aria-describedby` attribute to the input. */ - descriptionId?: string; + descriptionId?: string | undefined; } >; 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 acbcf3d44..3a31fbe4a 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 @@ -27,34 +27,34 @@ export type DateRangeFieldPropsWithoutHTML = Expand< * The value of the date field. * You can bind this to a `DateValue` object to programmatically control the value. */ - value?: DateRange; + value?: DateRange | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The placeholder date used to start the field. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * The id of the validation message element which is used to apply the * appropriate `aria-describedby` attribute to the input. */ - validationId?: string; + validationId?: string | undefined; /** * The id of the description element which is used to describe the input. * This is used to apply the appropriate `aria-describedby` attribute to the input. */ - descriptionId?: string; + descriptionId?: string | undefined; } >; 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 0efded93f..97930d3e0 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 @@ -57,45 +57,45 @@ export type DateRangePickerPropsWithoutHTML = Expand< * * @default false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; /** * The value of the date field. * You can bind this to a `DateValue` object to programmatically control the value. */ - value?: DateRange; + value?: DateRange | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The placeholder date used to start the field. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * The id of the validation message element which is used to apply the * appropriate `aria-describedby` attribute to the input. */ - validationId?: string; + validationId?: string | undefined; /** * The id of the description element which is used to describe the input. * This is used to apply the appropriate `aria-describedby` attribute to the input. */ - descriptionId?: string; + descriptionId?: string | undefined; /** * The `start` value of the date range, which can exist prior diff --git a/packages/bits-ui/src/lib/bits/dialog/types.ts b/packages/bits-ui/src/lib/bits/dialog/types.ts index 4310ca3f4..cd7f7ff41 100644 --- a/packages/bits-ui/src/lib/bits/dialog/types.ts +++ b/packages/bits-ui/src/lib/bits/dialog/types.ts @@ -25,22 +25,22 @@ export type DialogPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: MeltDialogProps["defaultOpen"] & {}; + open?: (MeltDialogProps["defaultOpen"] & {}) | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; /** * Override the default autofocus behavior of the dialog when it opens */ - openFocus?: FocusProp; + openFocus?: FocusProp | undefined; /** * Override the default autofocus behavior of the dialog after close */ - closeFocus?: FocusProp; + closeFocus?: FocusProp | undefined; } >; @@ -66,7 +66,7 @@ export type DialogPortalPropsWithoutHTML = DOMElement; export type DialogTitlePropsWithoutHTML = Expand< { - level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/floating/_types.ts b/packages/bits-ui/src/lib/bits/floating/_types.ts index a801947c2..30f625ad8 100644 --- a/packages/bits-ui/src/lib/bits/floating/_types.ts +++ b/packages/bits-ui/src/lib/bits/floating/_types.ts @@ -2,7 +2,7 @@ import type { DOMElement, Expand, Transition, TransitionProps } from "$lib/inter export type ArrowProps = Expand< { - size?: number; + size?: number | undefined; } & DOMElement >; @@ -22,7 +22,7 @@ export type FloatingProps = { * * @see https://floating-ui.com/docs/computePosition#placement */ - side?: "top" | "right" | "bottom" | "left"; + side?: "top" | "right" | "bottom" | "left" | undefined; /** * The preferred alignment of the anchor to render against when open. @@ -30,26 +30,26 @@ export type FloatingProps = { * * @see https://floating-ui.com/docs/computePosition#placement */ - align?: "start" | "center" | "end"; + align?: "start" | "center" | "end" | undefined; /** * An offset in pixels from the "start" or "end" alignment options. * @see https://floating-ui.com/docs/offset#options */ - alignOffset?: number; + alignOffset?: number | undefined; /** * The distance in pixels from the anchor to the floating element. * @see https://floating-ui.com/docs/offset#options */ - sideOffset?: number; + sideOffset?: number | undefined; /** * Whether the content should be the same width as the trigger. * * @see https://floating-ui.com/docs/size */ - sameWidth?: boolean; + sameWidth?: boolean | undefined; /** * When `true`, overrides the `side` and `align` options to prevent collisions @@ -58,7 +58,7 @@ export type FloatingProps = { * @default true * @see https://floating-ui.com/docs/flip */ - avoidCollisions?: boolean; + avoidCollisions?: boolean | undefined; /** * The amount in pixels of virtual padding around the viewport edges to check @@ -67,14 +67,14 @@ export type FloatingProps = { * @default 8 * @see https://floating-ui.com/docs/detectOverflow#padding */ - collisionPadding?: number; + collisionPadding?: number | undefined; /** * A boundary element or array of elements to check for collisions against. * * @see https://floating-ui.com/docs/detectoverflow#boundary */ - collisionBoundary?: Boundary; + collisionBoundary?: Boundary | undefined; /** * Whether the floating element should be constrained to the viewport. @@ -82,13 +82,13 @@ export type FloatingProps = { * @default false * @see https://floating-ui.com/docs/size */ - fitViewport?: boolean; + fitViewport?: boolean | undefined; /** * The positioning strategy to use for the floating element. * @see https://floating-ui.com/docs/computeposition#strategy */ - strategy?: "absolute" | "fixed"; + strategy?: "absolute" | "fixed" | undefined; /** * Whether the floating element can overlap the reference element. @@ -96,7 +96,7 @@ export type FloatingProps = { * * @see https://floating-ui.com/docs/shift#options */ - overlap?: boolean; + overlap?: boolean | undefined; }; export type ContentProps< diff --git a/packages/bits-ui/src/lib/bits/floating/floating-config.ts b/packages/bits-ui/src/lib/bits/floating/floating-config.ts index d28321bc0..6692cea04 100644 --- a/packages/bits-ui/src/lib/bits/floating/floating-config.ts +++ b/packages/bits-ui/src/lib/bits/floating/floating-config.ts @@ -25,14 +25,14 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/computePosition#placement */ - strategy?: "absolute" | "fixed"; + strategy?: "absolute" | "fixed" | undefined; /** * The offset of the floating element. * * @see https://floating-ui.com/docs/offset#options */ - offset?: { mainAxis?: number; crossAxis?: number }; + offset?: { mainAxis?: number; crossAxis?: number } | undefined; /** * The main axis offset or gap between the reference and floating elements. @@ -40,7 +40,7 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/offset#options */ - gutter?: number; + gutter?: number | undefined; /** * The virtual padding around the viewport edges to check for overflow. @@ -48,7 +48,7 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/detectOverflow#padding */ - overflowPadding?: number; + overflowPadding?: number | undefined; /** * Whether to flip the placement. @@ -56,7 +56,7 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/flip */ - flip?: boolean; + flip?: boolean | undefined; /** * Whether the floating element can overlap the reference element. @@ -64,7 +64,7 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/shift#options */ - overlap?: boolean; + overlap?: boolean | undefined; /** * Whether to make the floating element same width as the reference element. @@ -72,7 +72,7 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/size */ - sameWidth?: boolean; + sameWidth?: boolean | undefined; /** * Whether the floating element should fit the viewport. @@ -80,14 +80,14 @@ export type FloatingConfig = { * * @see https://floating-ui.com/docs/size */ - fitViewport?: boolean; + fitViewport?: boolean | undefined; /** * The overflow boundary of the reference element. * * @see https://floating-ui.com/docs/detectoverflow#boundary */ - boundary?: Boundary; + boundary?: Boundary | undefined; }; type Boundary = "clippingAncestors" | Element | Array | Rect; 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 4a1c88603..110110aa5 100644 --- a/packages/bits-ui/src/lib/bits/link-preview/types.ts +++ b/packages/bits-ui/src/lib/bits/link-preview/types.ts @@ -22,12 +22,12 @@ export type LinkPreviewPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } >; diff --git a/packages/bits-ui/src/lib/bits/menu/types.ts b/packages/bits-ui/src/lib/bits/menu/types.ts index aab68de9f..bdccfa98c 100644 --- a/packages/bits-ui/src/lib/bits/menu/types.ts +++ b/packages/bits-ui/src/lib/bits/menu/types.ts @@ -35,12 +35,12 @@ export type MenuPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } >; @@ -51,7 +51,7 @@ export type MenuSubTriggerPropsWithoutHTML = Expand< * * @defaultValue false; */ - disabled?: boolean; + disabled?: boolean | undefined; } & DOMElement >; @@ -63,12 +63,12 @@ export type MenuCheckboxItemPropsWithoutHTML = Expand< * * @defaultValue false */ - checked?: boolean | "indeterminate"; + checked?: boolean | "indeterminate" | undefined; /** * A callback function called when the checked state changes. */ - onCheckedChange?: OnChangeFn; + onCheckedChange?: OnChangeFn | undefined; } & DOMElement >; @@ -79,12 +79,12 @@ export type MenuRadioGroupPropsWithoutHTML = Expand< * * @defaultValue undefined */ - value?: MeltContextMenuRadioGroupProps["defaultValue"] & {}; + value?: (MeltContextMenuRadioGroupProps["defaultValue"] & {}) | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; } & DOMElement >; @@ -98,12 +98,12 @@ export type MenuSubPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } >; @@ -114,7 +114,7 @@ export type MenuItemPropsWithoutHTML = Expand< * * @defaultValue false */ - disabled?: boolean; + disabled?: boolean | undefined; } & DOMElement >; @@ -144,11 +144,11 @@ export type MenuRadioItemProps = MenuRadioItemPropsWithoutHTML & HTMLDivAttribut export type MenuGroupProps = MenuGroupPropsWithoutHTML & HTMLDivAttributes; type MenuAnchorElement = HTMLAnchorAttributes & { - href?: HTMLAnchorAttributes["href"]; + href?: HTMLAnchorAttributes["href"] | undefined; } & DOMEl; type MenuDivElement = HTMLDivAttributes & { - href?: never; + href?: never | undefined; } & DOMEl; export type MenuItemProps = Omit & diff --git a/packages/bits-ui/src/lib/bits/pagination/types.ts b/packages/bits-ui/src/lib/bits/pagination/types.ts index ac648669b..d65be9a8e 100644 --- a/packages/bits-ui/src/lib/bits/pagination/types.ts +++ b/packages/bits-ui/src/lib/bits/pagination/types.ts @@ -13,12 +13,12 @@ export type PaginationPropsWithoutHTML = Expand< * * You can bind this to a value to programmatically control the value state. */ - page?: number; + page?: number | undefined; /** * A callback function called when the page changes. */ - onPageChange?: OnChangeFn; + onPageChange?: OnChangeFn | undefined; } & DOMElement >; 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 ef62c0da6..64699a977 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/types.ts +++ b/packages/bits-ui/src/lib/bits/pin-input/types.ts @@ -18,12 +18,12 @@ export type PinInputPropsWithoutHTML = Expand< * * You can bind to this to programmatically control the value. */ - value?: MeltPinInputProps["defaultValue"]; + value?: MeltPinInputProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; } & DOMElement > >; diff --git a/packages/bits-ui/src/lib/bits/popover/types.ts b/packages/bits-ui/src/lib/bits/popover/types.ts index bbb4c6075..bc655a497 100644 --- a/packages/bits-ui/src/lib/bits/popover/types.ts +++ b/packages/bits-ui/src/lib/bits/popover/types.ts @@ -26,12 +26,12 @@ export type PopoverPropsWithoutHTML = Expand< * * @defaultValue false */ - open?: boolean; + open?: boolean | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; } >; diff --git a/packages/bits-ui/src/lib/bits/progress/types.ts b/packages/bits-ui/src/lib/bits/progress/types.ts index aecd283dc..a3fcb3be9 100644 --- a/packages/bits-ui/src/lib/bits/progress/types.ts +++ b/packages/bits-ui/src/lib/bits/progress/types.ts @@ -13,12 +13,12 @@ export type ProgressPropsWithoutHTML = Expand< * The value of the progress bar. * You can bind this to a number value to programmatically control the value. */ - value?: MeltProgressProps["defaultValue"]; + value?: MeltProgressProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; } & DOMElement >; // 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 f5f39aacc..8e257e897 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/types.ts +++ b/packages/bits-ui/src/lib/bits/radio-group/types.ts @@ -22,13 +22,13 @@ export type RadioGroupPropsWithoutHTML = Expand< * @defaultValue undefined */ - value?: MeltRadioGroupProps["defaultValue"] & {}; + value?: (MeltRadioGroupProps["defaultValue"] & {}) | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; } & DOMElement >; 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 fe3265bf3..ca9109b75 100644 --- a/packages/bits-ui/src/lib/bits/range-calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/range-calendar/types.ts @@ -30,12 +30,12 @@ export type RangeCalendarPropsWithoutHTML = Expand< * You can bind this to a value to programmatically control the * value state. */ - value?: DateRange; + value?: DateRange | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The placeholder date, used to display the calendar when no @@ -45,12 +45,12 @@ export type RangeCalendarPropsWithoutHTML = Expand< * You can bind this to a value to programmatically control the * placeholder state. */ - placeholder?: DateValue; + placeholder?: DateValue | undefined; /** * A callback function called when the placeholder changes. */ - onPlaceholderChange?: OnChangeFn; + onPlaceholderChange?: OnChangeFn | undefined; /** * If `true`, the calendar will focus the selected day, @@ -59,7 +59,7 @@ export type RangeCalendarPropsWithoutHTML = Expand< * * @default false */ - initialFocus?: boolean; + initialFocus?: boolean | undefined; /** * The `start` value of the date range, which can exist prior diff --git a/packages/bits-ui/src/lib/bits/select/ctx.ts b/packages/bits-ui/src/lib/bits/select/ctx.ts index 141d82a86..b12254a83 100644 --- a/packages/bits-ui/src/lib/bits/select/ctx.ts +++ b/packages/bits-ui/src/lib/bits/select/ctx.ts @@ -45,11 +45,11 @@ export function getCtx() { type Items = { value: T; - label?: string; + label?: string | undefined; }; type Props = CreateSelectProps & { - items?: Items[]; + items?: Items[] | undefined; }; export function setCtx(props: Props) { diff --git a/packages/bits-ui/src/lib/bits/select/types.ts b/packages/bits-ui/src/lib/bits/select/types.ts index 08fda2253..cf4fe7138 100644 --- a/packages/bits-ui/src/lib/bits/select/types.ts +++ b/packages/bits-ui/src/lib/bits/select/types.ts @@ -49,7 +49,7 @@ export type SelectPropsWithoutHTML, Multiple>>; + onSelectedChange?: OnChangeFn, Multiple>> | undefined; /** * The open state of the select menu. @@ -57,23 +57,23 @@ export type SelectPropsWithoutHTML; + onOpenChange?: OnChangeFn | undefined; /** * Whether or not multiple values can be selected. */ - multiple?: Multiple; + multiple?: Multiple | undefined; /** * Optionally provide an array of `Selected` objects to * type the `selected` and `onSelectedChange` props. */ - items?: Selected[]; + items?: Selected[] | undefined; } >; @@ -94,7 +94,7 @@ export type SelectValuePropsWithoutHTML = Expand< * * @defaultValue "" */ - placeholder?: string; + placeholder?: string | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/slider/types.ts b/packages/bits-ui/src/lib/bits/slider/types.ts index 3ac18d77e..1c410df1c 100644 --- a/packages/bits-ui/src/lib/bits/slider/types.ts +++ b/packages/bits-ui/src/lib/bits/slider/types.ts @@ -17,12 +17,12 @@ export type SliderPropsWithoutHTML = Expand< * The value of the slider. * You can bind this to a number value to programmatically control the value. */ - value?: number[]; + value?: number[] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/switch/types.ts b/packages/bits-ui/src/lib/bits/switch/types.ts index 174487155..5ae693b30 100644 --- a/packages/bits-ui/src/lib/bits/switch/types.ts +++ b/packages/bits-ui/src/lib/bits/switch/types.ts @@ -18,24 +18,26 @@ export type SwitchPropsWithoutHTML = Expand< * * @defaultValue false */ - checked?: boolean; + checked?: boolean | undefined; /** * A callback function called when the checked state changes. */ - onCheckedChange?: OnChangeFn; + onCheckedChange?: OnChangeFn | undefined; /** * Whether to include the hidden input element in the DOM. */ - includeInput?: boolean; + includeInput?: boolean | undefined; /** * Additional input attributes to pass to the hidden input element. * Note, the value, name, type, and checked attributes are derived from the * Switch props and cannot be overridden. */ - inputAttrs?: Partial>; + inputAttrs?: + | Partial> + | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/tabs/types.ts b/packages/bits-ui/src/lib/bits/tabs/types.ts index 2dba508d9..6834183ff 100644 --- a/packages/bits-ui/src/lib/bits/tabs/types.ts +++ b/packages/bits-ui/src/lib/bits/tabs/types.ts @@ -19,19 +19,19 @@ export type TabsPropsWithoutHTML = Expand< * The value of the currently active tab. * You can bind this to a string value to programmatically control the active tab. */ - value?: MeltTabsProps["defaultValue"] & {}; + value?: (MeltTabsProps["defaultValue"] & {}) | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn; + onValueChange?: OnChangeFn | undefined; /** * The orientation of the tabs, which determines how keyboard navigation works. * * @defaultValue "horizontal" */ - orientation?: MeltTabsProps["orientation"] & {}; + orientation?: (MeltTabsProps["orientation"] & {}) | undefined; } & DOMElement >; 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 4b1018ef2..ef35aa5b3 100644 --- a/packages/bits-ui/src/lib/bits/toggle-group/types.ts +++ b/packages/bits-ui/src/lib/bits/toggle-group/types.ts @@ -17,12 +17,12 @@ export type ToggleGroupPropsWithoutHTML = Expan * * You can bind to this to programmatically control the value. */ - value?: MeltToggleGroupProps["defaultValue"]; + value?: MeltToggleGroupProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn["defaultValue"]>; + onValueChange?: OnChangeFn["defaultValue"]> | undefined; /** * The type of the toggle group. @@ -31,7 +31,7 @@ export type ToggleGroupPropsWithoutHTML = Expan * at a time. If the type is `"multiple"`, the toggle group allows multiple items * to be selected at a time. */ - type?: T; + type?: T | undefined; } & DOMElement >; @@ -51,7 +51,7 @@ export type ToggleGroupItemPropsWithoutHTML = Expand< * * @defaultValue false */ - disabled?: boolean; + disabled?: boolean | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/toggle/types.ts b/packages/bits-ui/src/lib/bits/toggle/types.ts index ffb887ba6..3f69d1053 100644 --- a/packages/bits-ui/src/lib/bits/toggle/types.ts +++ b/packages/bits-ui/src/lib/bits/toggle/types.ts @@ -11,12 +11,12 @@ export type TogglePropsWithoutHTML = Expand< * * @defaultValue false */ - pressed?: boolean; + pressed?: boolean | undefined; /** * A callback function called when the pressed state changes. */ - onPressedChange?: OnChangeFn; + onPressedChange?: OnChangeFn | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/toolbar/types.ts b/packages/bits-ui/src/lib/bits/toolbar/types.ts index 7ba710a09..b3eb48538 100644 --- a/packages/bits-ui/src/lib/bits/toolbar/types.ts +++ b/packages/bits-ui/src/lib/bits/toolbar/types.ts @@ -26,12 +26,12 @@ export type ToolbarGroupPropsWithoutHTML = Expa * * You can bind to this to programmatically control the value. */ - value?: MeltToolbarGroupProps["defaultValue"]; + value?: MeltToolbarGroupProps["defaultValue"] | undefined; /** * A callback function called when the value changes. */ - onValueChange?: OnChangeFn["defaultValue"]>; + onValueChange?: OnChangeFn["defaultValue"]> | undefined; /** * The type of the toolbar toggle group. @@ -40,7 +40,7 @@ export type ToolbarGroupPropsWithoutHTML = Expa * at a time. If the type is `"multiple"`, the toolbar toggle group allows multiple items * to be selected at a time. */ - type?: T; + type?: T | undefined; } & DOMElement >; @@ -60,7 +60,7 @@ export type ToolbarGroupItemPropsWithoutHTML = Expand< * * @defaultValue false */ - disabled?: boolean; + disabled?: boolean | undefined; } & DOMElement >; diff --git a/packages/bits-ui/src/lib/bits/tooltip/types.ts b/packages/bits-ui/src/lib/bits/tooltip/types.ts index 22fbaa469..dafd3291b 100644 --- a/packages/bits-ui/src/lib/bits/tooltip/types.ts +++ b/packages/bits-ui/src/lib/bits/tooltip/types.ts @@ -38,12 +38,12 @@ export type TooltipPropsWithoutHTML = Expand> & { * * ``` */ - open?: boolean & {}; + open?: (boolean & {}) | undefined; /** * A callback function called when the open state changes. */ - onOpenChange?: OnChangeFn; + onOpenChange?: OnChangeFn | undefined; }; export type TooltipTriggerPropsWithoutHTML = DOMElement; diff --git a/packages/bits-ui/src/lib/internal/types.ts b/packages/bits-ui/src/lib/internal/types.ts index e5f2617cb..e146f8648 100644 --- a/packages/bits-ui/src/lib/internal/types.ts +++ b/packages/bits-ui/src/lib/internal/types.ts @@ -54,7 +54,7 @@ export type DOMEl = Expand<{ /** * Wheter to expose the underlying DOM element. */ - el?: T; + el?: T | undefined; }>; export type DOMElement = Expand<{ @@ -64,12 +64,12 @@ export type DOMElement = Expand<{ * * @see https://www.bits-ui.com/docs/delegation */ - asChild?: boolean; + asChild?: boolean | undefined; /** * Bind to the underlying DOM element of the component. */ - el?: T; + el?: T | undefined; }>; export type TransitionProps< @@ -80,34 +80,34 @@ export type TransitionProps< /** * A transition function to use during both the in and out transitions. */ - transition?: T; + transition?: T | undefined; /** * The configuration to pass to the `transition` function. */ - transitionConfig?: TransitionParams; + transitionConfig?: TransitionParams | undefined; /** * A transition function to use during the in transition. * * If provided, this will override the `transition` function. */ - inTransition?: In; + inTransition?: In | undefined; /** * The configuration to pass to the `inTransition` function. */ - inTransitionConfig?: TransitionParams; + inTransitionConfig?: TransitionParams | undefined; /** * A transition function to use during the out transition. * * If provided, this will override the `transition` function. */ - outTransition?: Out; + outTransition?: Out | undefined; /** * The configuration to pass to the `outTransition` function. */ - outTransitionConfig?: TransitionParams; + outTransitionConfig?: TransitionParams | undefined; }>; From 164099582ef340f91e947ee99b83844c533aa5b8 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Sat, 27 Jul 2024 17:41:40 -0400 Subject: [PATCH 2/5] add changeset --- .changeset/weak-dingos-help.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-dingos-help.md diff --git a/.changeset/weak-dingos-help.md b/.changeset/weak-dingos-help.md new file mode 100644 index 000000000..e552a3874 --- /dev/null +++ b/.changeset/weak-dingos-help.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +feat: compatibility with `exactOptionalPropertyTypes` From 06475aad123784fdcbb6d03c828d0bbff0ae796a Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Sun, 28 Jul 2024 13:40:30 -0400 Subject: [PATCH 3/5] tweak changeset --- .changeset/weak-dingos-help.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/weak-dingos-help.md b/.changeset/weak-dingos-help.md index e552a3874..05cf0c49c 100644 --- a/.changeset/weak-dingos-help.md +++ b/.changeset/weak-dingos-help.md @@ -2,4 +2,4 @@ "bits-ui": patch --- -feat: compatibility with `exactOptionalPropertyTypes` +fix: compatibility with `exactOptionalPropertyTypes` From 561daca73e983385843db48cce31ee8e20b0b3f4 Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Sun, 28 Jul 2024 13:40:44 -0400 Subject: [PATCH 4/5] add missing type import --- packages/bits-ui/src/lib/bits/aspect-ratio/types.ts | 2 +- packages/bits-ui/src/lib/bits/calendar/types.ts | 2 +- packages/bits-ui/src/lib/bits/menu/types.ts | 1 + packages/bits-ui/src/lib/bits/range-calendar/types.ts | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts b/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts index fdcb10699..dcc2897eb 100644 --- a/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts +++ b/packages/bits-ui/src/lib/bits/aspect-ratio/types.ts @@ -1,4 +1,4 @@ -import type { DOMEl, HTMLDivAttributes } from "$lib/internal/index.js"; +import type { DOMEl, Expand, HTMLDivAttributes } from "$lib/internal/index.js"; export type AspectRatioPropsWithoutHTML = Expand< { diff --git a/packages/bits-ui/src/lib/bits/calendar/types.ts b/packages/bits-ui/src/lib/bits/calendar/types.ts index 62632af33..e5359bd4f 100644 --- a/packages/bits-ui/src/lib/bits/calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/calendar/types.ts @@ -7,7 +7,7 @@ import type { } from "svelte/elements"; import type { DateValue } from "@internationalized/date"; import type { CreateCalendarProps as MeltCalendarProps } from "@melt-ui/svelte"; -import type { DOMElement, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js"; +import type { DOMElement, Expand, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js"; import type { CustomEventHandler } from "$lib/index.js"; type OmitCalendarProps = Omit< diff --git a/packages/bits-ui/src/lib/bits/menu/types.ts b/packages/bits-ui/src/lib/bits/menu/types.ts index bdccfa98c..3b91b4d30 100644 --- a/packages/bits-ui/src/lib/bits/menu/types.ts +++ b/packages/bits-ui/src/lib/bits/menu/types.ts @@ -14,6 +14,7 @@ import type { import type { DOMEl, DOMElement, + Expand, HTMLDivAttributes, OmitChecked, OmitFloating, 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 ca9109b75..7b8bbb685 100644 --- a/packages/bits-ui/src/lib/bits/range-calendar/types.ts +++ b/packages/bits-ui/src/lib/bits/range-calendar/types.ts @@ -7,7 +7,7 @@ import type { } from "svelte/elements"; import type { DateValue } from "@internationalized/date"; import type { CreateRangeCalendarProps as MeltRangeCalendarProps } from "@melt-ui/svelte"; -import type { DOMElement, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js"; +import type { DOMElement, Expand, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js"; import type { CustomEventHandler } from "$lib/index.js"; import type { DateRange } from "$lib/shared/index.js"; From e0aad5c0bfadf4fb19217bc464f1efb0e21b70a0 Mon Sep 17 00:00:00 2001 From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com> Date: Sun, 28 Jul 2024 13:43:10 -0400 Subject: [PATCH 5/5] add `exactOptionalPropertyTypes` to docs site --- sites/docs/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sites/docs/tsconfig.json b/sites/docs/tsconfig.json index 92b8db89e..3383b55b6 100644 --- a/sites/docs/tsconfig.json +++ b/sites/docs/tsconfig.json @@ -11,7 +11,8 @@ "strict": true, "moduleResolution": "NodeNext", "module": "NodeNext", - "verbatimModuleSyntax": true + "verbatimModuleSyntax": true, + "exactOptionalPropertyTypes": true }, "include": [ "./svelte-kit/ambient.d.ts",