diff --git a/.circleci/config.yml b/.circleci/config.yml index ed527ac5a0..e1d7e15741 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -304,6 +304,12 @@ jobs: - run: name: Build packages command: pnpm release:build + - run: + name: Validate type declarations + command: pnpm validate-declarations + - run: + name: Check public types + command: pnpm -r run release:test - run: name: Test Node.js module resolution command: pnpm -F @base-ui/test-node-resolution test diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 70710e182b..41effe788d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -35,7 +35,6 @@ jobs: cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies - run: pnpm install - run: pnpm release:build - - run: pnpm validate-declarations - name: Publish packages if: matrix.os == 'ubuntu-latest' uses: mui/mui-public/.github/actions/ci-publish@master diff --git a/docs/reference/generated/accordion-item.json b/docs/reference/generated/accordion-item.json index 7d9d7ce3dd..f27d36e456 100644 --- a/docs/reference/generated/accordion-item.json +++ b/docs/reference/generated/accordion-item.json @@ -3,7 +3,7 @@ "description": "Groups an accordion header with the corresponding panel.\nRenders a `
` element.", "props": { "value": { - "type": "AccordionItemValue", + "type": "any", "description": "A unique value that identifies this accordion item.\nIf no value is provided, a unique ID will be generated automatically.\nUse when controlling the accordion programmatically, or to set an initial\nopen state.", "example": "```tsx\n\n // initially open\n // initially closed\n\n```" }, diff --git a/docs/reference/generated/alert-dialog-close.json b/docs/reference/generated/alert-dialog-close.json index 2bc8aa416f..bf4108a944 100644 --- a/docs/reference/generated/alert-dialog-close.json +++ b/docs/reference/generated/alert-dialog-close.json @@ -10,8 +10,7 @@ }, "className": { "type": "string | ((state: AlertDialog.Close.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: AlertDialog.Close.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Close.State) => ReactElement)", diff --git a/docs/reference/generated/alert-dialog-popup.json b/docs/reference/generated/alert-dialog-popup.json index 64f76e51d6..9ea2e3f051 100644 --- a/docs/reference/generated/alert-dialog-popup.json +++ b/docs/reference/generated/alert-dialog-popup.json @@ -14,8 +14,7 @@ }, "className": { "type": "string | ((state: AlertDialog.Popup.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: AlertDialog.Popup.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Popup.State) => ReactElement)", diff --git a/docs/reference/generated/alert-dialog-title.json b/docs/reference/generated/alert-dialog-title.json index 3325b0a28a..d0b0c8a263 100644 --- a/docs/reference/generated/alert-dialog-title.json +++ b/docs/reference/generated/alert-dialog-title.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: AlertDialog.Title.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: AlertDialog.Title.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: AlertDialog.Title.State) => ReactElement)", diff --git a/docs/reference/generated/checkbox-group.json b/docs/reference/generated/checkbox-group.json index 7bb4507b06..fae1efd9d2 100644 --- a/docs/reference/generated/checkbox-group.json +++ b/docs/reference/generated/checkbox-group.json @@ -13,9 +13,9 @@ "detailedType": "string[] | undefined" }, "onValueChange": { - "type": "((value: string[], eventDetails: Checkbox.Group.ChangeEventDetails) => void)", + "type": "((value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void)", "description": "Event handler called when a checkbox in the group is ticked or unticked.\nProvides the new value as an argument.", - "detailedType": "| ((\n value: string[],\n eventDetails: Checkbox.Group.ChangeEventDetails,\n ) => void)\n| undefined" + "detailedType": "| ((\n value: string[],\n eventDetails: CheckboxGroupChangeEventDetails,\n ) => void)\n| undefined" }, "allValues": { "type": "string[]", @@ -29,13 +29,13 @@ "detailedType": "boolean | undefined" }, "className": { - "type": "string | ((state: Checkbox.Group.State) => string)", + "type": "string | ((state: CheckboxGroup.State) => string)", "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { - "type": "ReactElement | ((props: HTMLProps, state: Checkbox.Group.State) => ReactElement)", + "type": "ReactElement | ((props: HTMLProps, state: CheckboxGroup.State) => ReactElement)", "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.", - "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Checkbox.Group.State,\n ) => ReactElement)" + "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: CheckboxGroup.State,\n ) => ReactElement)" } }, "dataAttributes": { diff --git a/docs/reference/generated/collapsible-panel.json b/docs/reference/generated/collapsible-panel.json index fd11f468fe..347f196cdd 100644 --- a/docs/reference/generated/collapsible-panel.json +++ b/docs/reference/generated/collapsible-panel.json @@ -10,8 +10,7 @@ }, "className": { "type": "string | ((state: Collapsible.Panel.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Collapsible.Panel.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "keepMounted": { "type": "boolean", diff --git a/docs/reference/generated/collapsible-root.json b/docs/reference/generated/collapsible-root.json index 9b406c0090..ff7976e24f 100644 --- a/docs/reference/generated/collapsible-root.json +++ b/docs/reference/generated/collapsible-root.json @@ -26,8 +26,7 @@ }, "className": { "type": "string | ((state: Collapsible.Root.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Collapsible.Root.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement) | null", diff --git a/docs/reference/generated/collapsible-trigger.json b/docs/reference/generated/collapsible-trigger.json index ab6cc34919..553b7b1ae8 100644 --- a/docs/reference/generated/collapsible-trigger.json +++ b/docs/reference/generated/collapsible-trigger.json @@ -10,8 +10,7 @@ }, "className": { "type": "string | ((state: Collapsible.Root.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Collapsible.Root.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)", diff --git a/docs/reference/generated/combobox-backdrop.json b/docs/reference/generated/combobox-backdrop.json index 235739c33d..a7cdce582e 100644 --- a/docs/reference/generated/combobox-backdrop.json +++ b/docs/reference/generated/combobox-backdrop.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: Combobox.Backdrop.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Combobox.Backdrop.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Combobox.Backdrop.State) => ReactElement)", diff --git a/docs/reference/generated/combobox-item-text.json b/docs/reference/generated/combobox-item-text.json deleted file mode 100644 index 214009a252..0000000000 --- a/docs/reference/generated/combobox-item-text.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "ComboboxItemText", - "description": "A container for the combobox item text.\nRenders a `` element.", - "props": { - "className": { - "type": "string | ((state: Combobox.ItemText.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." - }, - "render": { - "type": "ReactElement | ((props: HTMLProps, state: Combobox.ItemText.State) => ReactElement)", - "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." - } - }, - "dataAttributes": {}, - "cssVariables": {} -} diff --git a/docs/reference/generated/combobox-positioner.json b/docs/reference/generated/combobox-positioner.json index d9a8666279..a1a6f9117c 100644 --- a/docs/reference/generated/combobox-positioner.json +++ b/docs/reference/generated/combobox-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/combobox-selected-value.json b/docs/reference/generated/combobox-selected-value.json deleted file mode 100644 index 08958e04db..0000000000 --- a/docs/reference/generated/combobox-selected-value.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "ComboboxSelectedValue", - "description": "The currently selected value.\nDoesn't render its own HTML element.", - "props": { - "children": { - "type": "ReactNode | ((selectedValue: any) => ReactNode)", - "detailedType": "| React.ReactNode\n| ((selectedValue: any) => ReactNode)" - } - }, - "dataAttributes": {}, - "cssVariables": {} -} diff --git a/docs/reference/generated/combobox-trigger.json b/docs/reference/generated/combobox-trigger.json index 00dd1b758b..a1aef27729 100644 --- a/docs/reference/generated/combobox-trigger.json +++ b/docs/reference/generated/combobox-trigger.json @@ -16,8 +16,7 @@ }, "className": { "type": "string | ((state: Combobox.Trigger.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Combobox.Trigger.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Combobox.Trigger.State) => ReactElement)", diff --git a/docs/reference/generated/field-validity.json b/docs/reference/generated/field-validity.json index d87c512708..3ddbc1ce91 100644 --- a/docs/reference/generated/field-validity.json +++ b/docs/reference/generated/field-validity.json @@ -3,10 +3,10 @@ "description": "Used to display a custom message based on the field’s validity.\nRequires `children` to be a function that accepts field validity state as an argument.", "props": { "children": { - "type": "((state: FieldValidityState) => ReactNode)", + "type": "((state: Field.Validity.State) => ReactNode)", "required": true, "description": "A function that accepts the field validity state as an argument.\n\n```jsx\n\n {(validity) => {\n return
...
\n }}\n\n```", - "detailedType": "(state: FieldValidityState) => ReactNode" + "detailedType": "(state: Field.Validity.State) => ReactNode" } }, "dataAttributes": {}, diff --git a/docs/reference/generated/menu-checkbox-item.json b/docs/reference/generated/menu-checkbox-item.json index 1b0e76a0ec..f551b74c73 100644 --- a/docs/reference/generated/menu-checkbox-item.json +++ b/docs/reference/generated/menu-checkbox-item.json @@ -52,8 +52,7 @@ }, "className": { "type": "string | ((state: Menu.CheckboxItem.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Menu.CheckboxItem.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Menu.CheckboxItem.State) => ReactElement)", diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json index 8e42db2cd0..9faee9eb8c 100644 --- a/docs/reference/generated/menu-positioner.json +++ b/docs/reference/generated/menu-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/menu-radio-item.json b/docs/reference/generated/menu-radio-item.json index 72e9f7a08d..e6da3d2de6 100644 --- a/docs/reference/generated/menu-radio-item.json +++ b/docs/reference/generated/menu-radio-item.json @@ -10,7 +10,7 @@ "value": { "type": "any", "required": true, - "description": "Value of the radio item.\nThis is the value that will be set in the MenuRadioGroup when the item is selected." + "description": "Value of the radio item.\nThis is the value that will be set in the Menu.RadioGroup when the item is selected." }, "onClick": { "type": "MouseEventHandler", diff --git a/docs/reference/generated/navigation-menu-positioner.json b/docs/reference/generated/navigation-menu-positioner.json index c21183bbdf..487fc55016 100644 --- a/docs/reference/generated/navigation-menu-positioner.json +++ b/docs/reference/generated/navigation-menu-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/number-field-group.json b/docs/reference/generated/number-field-group.json index e48b3f7ef2..6e005c35e3 100644 --- a/docs/reference/generated/number-field-group.json +++ b/docs/reference/generated/number-field-group.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: NumberField.Group.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: NumberField.Group.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: NumberField.Group.State) => ReactElement)", diff --git a/docs/reference/generated/number-field-input.json b/docs/reference/generated/number-field-input.json index e29ff87a8f..ccd5110971 100644 --- a/docs/reference/generated/number-field-input.json +++ b/docs/reference/generated/number-field-input.json @@ -10,8 +10,7 @@ }, "className": { "type": "string | ((state: NumberField.Input.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: NumberField.Input.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: NumberField.Input.State) => ReactElement)", diff --git a/docs/reference/generated/number-field-root.json b/docs/reference/generated/number-field-root.json index 6c49687181..1b899f45bd 100644 --- a/docs/reference/generated/number-field-root.json +++ b/docs/reference/generated/number-field-root.json @@ -106,8 +106,7 @@ }, "className": { "type": "string | ((state: NumberField.Root.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: NumberField.Root.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: NumberField.Root.State) => ReactElement)", diff --git a/docs/reference/generated/popover-backdrop.json b/docs/reference/generated/popover-backdrop.json index 4882bc21e3..10a3c02542 100644 --- a/docs/reference/generated/popover-backdrop.json +++ b/docs/reference/generated/popover-backdrop.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: Popover.Backdrop.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Popover.Backdrop.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Popover.Backdrop.State) => ReactElement)", diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json index 8005983a15..7d9cd16e0c 100644 --- a/docs/reference/generated/popover-positioner.json +++ b/docs/reference/generated/popover-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/popover-root.json b/docs/reference/generated/popover-root.json index 28e0d00339..c8e47df725 100644 --- a/docs/reference/generated/popover-root.json +++ b/docs/reference/generated/popover-root.json @@ -4,7 +4,8 @@ "props": { "defaultOpen": { "type": "boolean", - "description": "Whether the popover is initially open.\nTo render a controlled popover, use the `open` prop instead.", + "default": "false", + "description": "Whether the popover is initially open.\n\nTo render a controlled popover, use the `open` prop instead.", "detailedType": "boolean | undefined" }, "open": { diff --git a/docs/reference/generated/popover-trigger.json b/docs/reference/generated/popover-trigger.json index 459fc0c632..cd605db7ff 100644 --- a/docs/reference/generated/popover-trigger.json +++ b/docs/reference/generated/popover-trigger.json @@ -38,7 +38,7 @@ }, "id": { "type": "string", - "description": "Id of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).", + "description": "ID of the trigger. In addition to being forwarded to the rendered element,\nit is also used to specify the active trigger for the popover in controlled mode (with the Popover.Root `triggerId` prop).", "detailedType": "string | undefined" }, "className": { diff --git a/docs/reference/generated/preview-card-arrow.json b/docs/reference/generated/preview-card-arrow.json index e6b41f6070..86f7e3c6da 100644 --- a/docs/reference/generated/preview-card-arrow.json +++ b/docs/reference/generated/preview-card-arrow.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: PreviewCard.Arrow.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: PreviewCard.Arrow.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: PreviewCard.Arrow.State) => ReactElement)", diff --git a/docs/reference/generated/preview-card-popup.json b/docs/reference/generated/preview-card-popup.json index 98b0dc41d1..2f3bd8382c 100644 --- a/docs/reference/generated/preview-card-popup.json +++ b/docs/reference/generated/preview-card-popup.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: PreviewCard.Popup.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: PreviewCard.Popup.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: PreviewCard.Popup.State) => ReactElement)", diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json index 8d73884781..34bf1ad35a 100644 --- a/docs/reference/generated/preview-card-positioner.json +++ b/docs/reference/generated/preview-card-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/radio-group.json b/docs/reference/generated/radio-group.json index 0166b3009c..457c1e0900 100644 --- a/docs/reference/generated/radio-group.json +++ b/docs/reference/generated/radio-group.json @@ -44,13 +44,13 @@ "detailedType": "React.Ref | undefined" }, "className": { - "type": "string | ((state: Radio.Group.State) => string)", + "type": "string | ((state: RadioGroup.State) => string)", "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { - "type": "ReactElement | ((props: HTMLProps, state: Radio.Group.State) => ReactElement)", + "type": "ReactElement | ((props: HTMLProps, state: RadioGroup.State) => ReactElement)", "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.", - "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Radio.Group.State,\n ) => ReactElement)" + "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: RadioGroup.State,\n ) => ReactElement)" } }, "dataAttributes": { diff --git a/docs/reference/generated/radio-root.json b/docs/reference/generated/radio-root.json index 26d16e0cd7..39b2756e9a 100644 --- a/docs/reference/generated/radio-root.json +++ b/docs/reference/generated/radio-root.json @@ -15,19 +15,16 @@ }, "disabled": { "type": "boolean", - "default": "false", "description": "Whether the component should ignore user interaction.", "detailedType": "boolean | undefined" }, "readOnly": { "type": "boolean", - "default": "false", "description": "Whether the user should be unable to select the radio button.", "detailedType": "boolean | undefined" }, "required": { "type": "boolean", - "default": "false", "description": "Whether the user must choose a value before submitting a form.", "detailedType": "boolean | undefined" }, diff --git a/docs/reference/generated/scroll-area-corner.json b/docs/reference/generated/scroll-area-corner.json index 6eb4a9265b..8de9bd3500 100644 --- a/docs/reference/generated/scroll-area-corner.json +++ b/docs/reference/generated/scroll-area-corner.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: ScrollArea.Corner.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: ScrollArea.Corner.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: ScrollArea.Corner.State) => ReactElement)", diff --git a/docs/reference/generated/scroll-area-thumb.json b/docs/reference/generated/scroll-area-thumb.json index 2bb8297e87..24ea9a7138 100644 --- a/docs/reference/generated/scroll-area-thumb.json +++ b/docs/reference/generated/scroll-area-thumb.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: ScrollArea.Thumb.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: ScrollArea.Thumb.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: ScrollArea.Thumb.State) => ReactElement)", diff --git a/docs/reference/generated/select-group-label.json b/docs/reference/generated/select-group-label.json index 89acf439a6..28054e2c76 100644 --- a/docs/reference/generated/select-group-label.json +++ b/docs/reference/generated/select-group-label.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: Select.GroupLabel.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Select.GroupLabel.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Select.GroupLabel.State) => ReactElement)", diff --git a/docs/reference/generated/select-item-indicator.json b/docs/reference/generated/select-item-indicator.json index bdd78a3a40..bc82227292 100644 --- a/docs/reference/generated/select-item-indicator.json +++ b/docs/reference/generated/select-item-indicator.json @@ -13,7 +13,6 @@ }, "keepMounted": { "type": "boolean", - "default": "false", "description": "Whether to keep the HTML element in the DOM when the item is not selected.", "detailedType": "boolean | undefined" }, diff --git a/docs/reference/generated/select-positioner.json b/docs/reference/generated/select-positioner.json index 0ea5ea13ab..339fe27941 100644 --- a/docs/reference/generated/select-positioner.json +++ b/docs/reference/generated/select-positioner.json @@ -12,7 +12,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", @@ -83,8 +83,7 @@ }, "className": { "type": "string | ((state: Select.Positioner.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Select.Positioner.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Select.Positioner.State) => ReactElement)", diff --git a/docs/reference/generated/select-trigger.json b/docs/reference/generated/select-trigger.json index 7fbb4fb9ca..0f8100e5f1 100644 --- a/docs/reference/generated/select-trigger.json +++ b/docs/reference/generated/select-trigger.json @@ -10,7 +10,6 @@ }, "disabled": { "type": "boolean", - "default": "false", "description": "Whether the component should ignore user interaction.", "detailedType": "boolean | undefined" }, diff --git a/docs/reference/generated/toast-description.json b/docs/reference/generated/toast-description.json index 686dd71f89..486625731a 100644 --- a/docs/reference/generated/toast-description.json +++ b/docs/reference/generated/toast-description.json @@ -4,8 +4,7 @@ "props": { "className": { "type": "string | ((state: Toast.Description.State) => string)", - "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", - "detailedType": "| string\n| ((state: Toast.Description.State) => string)" + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { "type": "ReactElement | ((props: HTMLProps, state: Toast.Description.State) => ReactElement)", diff --git a/docs/reference/generated/toggle-group.json b/docs/reference/generated/toggle-group.json index 328313770b..d90b2ee226 100644 --- a/docs/reference/generated/toggle-group.json +++ b/docs/reference/generated/toggle-group.json @@ -41,13 +41,13 @@ "detailedType": "'horizontal' | 'vertical' | undefined" }, "className": { - "type": "string | ((state: Toggle.Group.State) => string)", + "type": "string | ((state: ToggleGroup.State) => string)", "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { - "type": "ReactElement | ((props: HTMLProps, state: Toggle.Group.State) => ReactElement)", + "type": "ReactElement | ((props: HTMLProps, state: ToggleGroup.State) => ReactElement)", "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.", - "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Toggle.Group.State,\n ) => ReactElement)" + "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: ToggleGroup.State,\n ) => ReactElement)" } }, "dataAttributes": { diff --git a/docs/reference/generated/toggle.json b/docs/reference/generated/toggle.json index 76599dedf5..7b872a6b42 100644 --- a/docs/reference/generated/toggle.json +++ b/docs/reference/generated/toggle.json @@ -42,7 +42,7 @@ "render": { "type": "ReactElement | ((props: HTMLProps, state: Toggle.State) => ReactElement)", "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.", - "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Toggle.State,\n ) => ReactElement)" + "detailedType": "| ReactElement\n| ((props: HTMLProps, state: Toggle.State) => ReactElement)" } }, "dataAttributes": { diff --git a/docs/reference/generated/toolbar-separator.json b/docs/reference/generated/toolbar-separator.json index 2a7a48242e..7ed4070ed0 100644 --- a/docs/reference/generated/toolbar-separator.json +++ b/docs/reference/generated/toolbar-separator.json @@ -9,13 +9,13 @@ "detailedType": "'horizontal' | 'vertical' | undefined" }, "className": { - "type": "string | ((state: Separator.State) => string)", + "type": "string | ((state: SeparatorState) => string)", "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." }, "render": { - "type": "ReactElement | ((props: HTMLProps, state: Separator.State) => ReactElement)", + "type": "ReactElement | ((props: HTMLProps, state: SeparatorState) => ReactElement)", "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.", - "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Separator.State,\n ) => ReactElement)" + "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: SeparatorState,\n ) => ReactElement)" } }, "dataAttributes": { diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json index 67fa2c2e34..e17f6fb7d9 100644 --- a/docs/reference/generated/tooltip-positioner.json +++ b/docs/reference/generated/tooltip-positioner.json @@ -6,7 +6,7 @@ "type": "CollisionAvoidance", "description": "Determines how to handle collisions when positioning the popup.", "example": "```jsx\n\n```", - "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'shift' | 'none' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'shift' | 'none'\n align?: 'shift' | 'none'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" + "detailedType": "| {\n side?: 'none' | 'flip'\n align?: 'none' | 'shift' | 'flip'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| {\n side?: 'none' | 'shift'\n align?: 'none' | 'shift'\n fallbackAxisSide?: 'none' | 'start' | 'end'\n }\n| undefined" }, "align": { "type": "Align", diff --git a/docs/reference/generated/use-render.json b/docs/reference/generated/use-render.json index 5e6ac20270..263fc46d7e 100644 --- a/docs/reference/generated/use-render.json +++ b/docs/reference/generated/use-render.json @@ -3,7 +3,7 @@ "description": "Renders a Base UI element.", "parameters": { "render": { - "type": "useRender.RenderProp>", + "type": "UseRenderRenderProp>", "description": "The React element or a function that returns one to override the default element." }, "ref": { @@ -34,10 +34,10 @@ "detailedType": "boolean | undefined | undefined" }, "defaultTagName": { - "type": "'symbol' | 'object' | 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'big' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'center' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'keygen' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'menu' | 'menuitem' | 'meta' | 'meter' | 'nav' | 'noindex' | 'noscript' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'param' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'search' | 'slot' | 'script' | 'section' | 'select' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'table' | 'template' | 'tbody' | 'td' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr' | 'webview' | 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'set' | 'stop' | 'switch' | 'text' | 'textPath' | 'tspan' | 'use' | 'view'", + "type": "'symbol' | 'object' | 'search' | 'big' | 'link' | 'small' | 'sub' | 'sup' | 'div' | 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'center' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'keygen' | 'label' | 'legend' | 'li' | 'main' | 'map' | 'mark' | 'menu' | 'menuitem' | 'meta' | 'meter' | 'nav' | 'noindex' | 'noscript' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'param' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'slot' | 'script' | 'section' | 'select' | 'source' | 'span' | 'strong' | 'style' | 'summary' | 'table' | 'template' | 'tbody' | 'td' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr' | 'webview' | 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'set' | 'stop' | 'switch' | 'text' | 'textPath' | 'tspan' | 'use' | 'view'", "default": "'div'", "description": "The default tag name to use for the rendered element when `render` is not provided.", - "detailedType": "| 'symbol'\n| 'object'\n| 'a'\n| 'abbr'\n| 'address'\n| 'area'\n| 'article'\n| 'aside'\n| 'audio'\n| 'b'\n| 'base'\n| 'bdi'\n| 'bdo'\n| 'big'\n| 'blockquote'\n| 'body'\n| 'br'\n| 'button'\n| 'canvas'\n| 'caption'\n| 'center'\n| 'cite'\n| 'code'\n| 'col'\n| 'colgroup'\n| 'data'\n| 'datalist'\n| 'dd'\n| 'del'\n| 'details'\n| 'dfn'\n| 'dialog'\n| 'div'\n| 'dl'\n| 'dt'\n| 'em'\n| 'embed'\n| 'fieldset'\n| 'figcaption'\n| 'figure'\n| 'footer'\n| 'form'\n| 'h1'\n| 'h2'\n| 'h3'\n| 'h4'\n| 'h5'\n| 'h6'\n| 'head'\n| 'header'\n| 'hgroup'\n| 'hr'\n| 'html'\n| 'i'\n| 'iframe'\n| 'img'\n| 'input'\n| 'ins'\n| 'kbd'\n| 'keygen'\n| 'label'\n| 'legend'\n| 'li'\n| 'link'\n| 'main'\n| 'map'\n| 'mark'\n| 'menu'\n| 'menuitem'\n| 'meta'\n| 'meter'\n| 'nav'\n| 'noindex'\n| 'noscript'\n| 'ol'\n| 'optgroup'\n| 'option'\n| 'output'\n| 'p'\n| 'param'\n| 'picture'\n| 'pre'\n| 'progress'\n| 'q'\n| 'rp'\n| 'rt'\n| 'ruby'\n| 's'\n| 'samp'\n| 'search'\n| 'slot'\n| 'script'\n| 'section'\n| 'select'\n| 'small'\n| 'source'\n| 'span'\n| 'strong'\n| 'style'\n| 'sub'\n| 'summary'\n| 'sup'\n| 'table'\n| 'template'\n| 'tbody'\n| 'td'\n| 'textarea'\n| 'tfoot'\n| 'th'\n| 'thead'\n| 'time'\n| 'title'\n| 'tr'\n| 'track'\n| 'u'\n| 'ul'\n| 'var'\n| 'video'\n| 'wbr'\n| 'webview'\n| 'svg'\n| 'animate'\n| 'animateMotion'\n| 'animateTransform'\n| 'circle'\n| 'clipPath'\n| 'defs'\n| 'desc'\n| 'ellipse'\n| 'feBlend'\n| 'feColorMatrix'\n| 'feComponentTransfer'\n| 'feComposite'\n| 'feConvolveMatrix'\n| 'feDiffuseLighting'\n| 'feDisplacementMap'\n| 'feDistantLight'\n| 'feDropShadow'\n| 'feFlood'\n| 'feFuncA'\n| 'feFuncB'\n| 'feFuncG'\n| 'feFuncR'\n| 'feGaussianBlur'\n| 'feImage'\n| 'feMerge'\n| 'feMergeNode'\n| 'feMorphology'\n| 'feOffset'\n| 'fePointLight'\n| 'feSpecularLighting'\n| 'feSpotLight'\n| 'feTile'\n| 'feTurbulence'\n| 'filter'\n| 'foreignObject'\n| 'g'\n| 'image'\n| 'line'\n| 'linearGradient'\n| 'marker'\n| 'mask'\n| 'metadata'\n| 'mpath'\n| 'path'\n| 'pattern'\n| 'polygon'\n| 'polyline'\n| 'radialGradient'\n| 'rect'\n| 'set'\n| 'stop'\n| 'switch'\n| 'text'\n| 'textPath'\n| 'tspan'\n| 'use'\n| 'view'\n| undefined" + "detailedType": "| 'symbol'\n| 'object'\n| 'search'\n| 'big'\n| 'link'\n| 'small'\n| 'sub'\n| 'sup'\n| 'div'\n| 'a'\n| 'abbr'\n| 'address'\n| 'area'\n| 'article'\n| 'aside'\n| 'audio'\n| 'b'\n| 'base'\n| 'bdi'\n| 'bdo'\n| 'blockquote'\n| 'body'\n| 'br'\n| 'button'\n| 'canvas'\n| 'caption'\n| 'center'\n| 'cite'\n| 'code'\n| 'col'\n| 'colgroup'\n| 'data'\n| 'datalist'\n| 'dd'\n| 'del'\n| 'details'\n| 'dfn'\n| 'dialog'\n| 'dl'\n| 'dt'\n| 'em'\n| 'embed'\n| 'fieldset'\n| 'figcaption'\n| 'figure'\n| 'footer'\n| 'form'\n| 'h1'\n| 'h2'\n| 'h3'\n| 'h4'\n| 'h5'\n| 'h6'\n| 'head'\n| 'header'\n| 'hgroup'\n| 'hr'\n| 'html'\n| 'i'\n| 'iframe'\n| 'img'\n| 'input'\n| 'ins'\n| 'kbd'\n| 'keygen'\n| 'label'\n| 'legend'\n| 'li'\n| 'main'\n| 'map'\n| 'mark'\n| 'menu'\n| 'menuitem'\n| 'meta'\n| 'meter'\n| 'nav'\n| 'noindex'\n| 'noscript'\n| 'ol'\n| 'optgroup'\n| 'option'\n| 'output'\n| 'p'\n| 'param'\n| 'picture'\n| 'pre'\n| 'progress'\n| 'q'\n| 'rp'\n| 'rt'\n| 'ruby'\n| 's'\n| 'samp'\n| 'slot'\n| 'script'\n| 'section'\n| 'select'\n| 'source'\n| 'span'\n| 'strong'\n| 'style'\n| 'summary'\n| 'table'\n| 'template'\n| 'tbody'\n| 'td'\n| 'textarea'\n| 'tfoot'\n| 'th'\n| 'thead'\n| 'time'\n| 'title'\n| 'tr'\n| 'track'\n| 'u'\n| 'ul'\n| 'var'\n| 'video'\n| 'wbr'\n| 'webview'\n| 'svg'\n| 'animate'\n| 'animateMotion'\n| 'animateTransform'\n| 'circle'\n| 'clipPath'\n| 'defs'\n| 'desc'\n| 'ellipse'\n| 'feBlend'\n| 'feColorMatrix'\n| 'feComponentTransfer'\n| 'feComposite'\n| 'feConvolveMatrix'\n| 'feDiffuseLighting'\n| 'feDisplacementMap'\n| 'feDistantLight'\n| 'feDropShadow'\n| 'feFlood'\n| 'feFuncA'\n| 'feFuncB'\n| 'feFuncG'\n| 'feFuncR'\n| 'feGaussianBlur'\n| 'feImage'\n| 'feMerge'\n| 'feMergeNode'\n| 'feMorphology'\n| 'feOffset'\n| 'fePointLight'\n| 'feSpecularLighting'\n| 'feSpotLight'\n| 'feTile'\n| 'feTurbulence'\n| 'filter'\n| 'foreignObject'\n| 'g'\n| 'image'\n| 'line'\n| 'linearGradient'\n| 'marker'\n| 'mask'\n| 'metadata'\n| 'mpath'\n| 'path'\n| 'pattern'\n| 'polygon'\n| 'polyline'\n| 'radialGradient'\n| 'rect'\n| 'set'\n| 'stop'\n| 'switch'\n| 'text'\n| 'textPath'\n| 'tspan'\n| 'use'\n| 'view'\n| undefined" } }, "returnValue": "ReactElement | null" diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap index 9138792b7b..8103f77b50 100644 --- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap +++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap @@ -288,7 +288,7 @@ Renders a \`
\` element. | Prop | Type | Default | Description | | :----------- | :---------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| value | \`AccordionItemValue\` | - | A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state. | +| value | \`any\` | - | A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state. | | onOpenChange | \`((open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void)\` | - | Event handler called when the panel is opened or closed. | | disabled | \`boolean\` | \`false\` | Whether the component should ignore user interaction. | | className | \`string \\| ((state: Accordion.Item.State) => string)\` | - | CSS class applied to the element, or a function that returns a class based on the component’s state. | diff --git a/packages/react/src/accordion/header/AccordionHeader.tsx b/packages/react/src/accordion/header/AccordionHeader.tsx index a79b71e44c..f6a1a591f3 100644 --- a/packages/react/src/accordion/header/AccordionHeader.tsx +++ b/packages/react/src/accordion/header/AccordionHeader.tsx @@ -30,6 +30,8 @@ export const AccordionHeader = React.forwardRef(function AccordionHeader( return element; }); +export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionItem.State> {} + export namespace AccordionHeader { - export interface Props extends BaseUIComponentProps<'h3', AccordionItem.State> {} + export type Props = AccordionHeaderProps; } diff --git a/packages/react/src/accordion/index.ts b/packages/react/src/accordion/index.ts index bc75beb631..8efc69a3f5 100644 --- a/packages/react/src/accordion/index.ts +++ b/packages/react/src/accordion/index.ts @@ -1 +1,7 @@ export * as Accordion from './index.parts'; + +export type * from './root/AccordionRoot'; +export type * from './item/AccordionItem'; +export type * from './header/AccordionHeader'; +export type * from './trigger/AccordionTrigger'; +export type * from './panel/AccordionPanel'; diff --git a/packages/react/src/accordion/item/AccordionItem.tsx b/packages/react/src/accordion/item/AccordionItem.tsx index d8e1684ef9..90743b998e 100644 --- a/packages/react/src/accordion/item/AccordionItem.tsx +++ b/packages/react/src/accordion/item/AccordionItem.tsx @@ -87,8 +87,9 @@ export const AccordionItem = React.forwardRef(function AccordionItem( open: collapsible.open, disabled: collapsible.disabled, hidden: !collapsible.mounted, + transitionStatus: collapsible.transitionStatus, }), - [collapsible.open, collapsible.disabled, collapsible.mounted], + [collapsible.open, collapsible.disabled, collapsible.mounted, collapsible.transitionStatus], ); const collapsibleContext: CollapsibleRootContext = React.useMemo( @@ -96,7 +97,6 @@ export const AccordionItem = React.forwardRef(function AccordionItem( ...collapsible, onOpenChange, state: collapsibleState, - transitionStatus: collapsible.transitionStatus, }), [collapsible, collapsibleState, onOpenChange], ); @@ -139,37 +139,42 @@ export const AccordionItem = React.forwardRef(function AccordionItem( ); }); -export type AccordionItemValue = any | null; +export interface AccordionItemState extends AccordionRoot.State { + index: number; + open: boolean; +} + +export interface AccordionItemProps + extends BaseUIComponentProps<'div', AccordionItem.State>, + Partial> { + /** + * A unique value that identifies this accordion item. + * If no value is provided, a unique ID will be generated automatically. + * Use when controlling the accordion programmatically, or to set an initial + * open state. + * @example + * ```tsx + * + * // initially open + * // initially closed + * + * ``` + */ + value?: any; + /** + * Event handler called when the panel is opened or closed. + */ + onOpenChange?: (open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void; +} + +export type AccordionItemChangeEventReason = 'trigger-press' | 'none'; + +export type AccordionItemChangeEventDetails = + BaseUIChangeEventDetails; export namespace AccordionItem { - export interface State extends AccordionRoot.State { - index: number; - open: boolean; - } - - export interface Props - extends BaseUIComponentProps<'div', State>, - Partial> { - /** - * A unique value that identifies this accordion item. - * If no value is provided, a unique ID will be generated automatically. - * Use when controlling the accordion programmatically, or to set an initial - * open state. - * @example - * ```tsx - * - * // initially open - * // initially closed - * - * ``` - */ - value?: AccordionItemValue; - /** - * Event handler called when the panel is opened or closed. - */ - onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void; - } - - export type ChangeEventReason = 'trigger-press' | 'none'; - export type ChangeEventDetails = BaseUIChangeEventDetails; + export type State = AccordionItemState; + export type Props = AccordionItemProps; + export type ChangeEventReason = AccordionItemChangeEventReason; + export type ChangeEventDetails = AccordionItemChangeEventDetails; } diff --git a/packages/react/src/accordion/panel/AccordionPanel.tsx b/packages/react/src/accordion/panel/AccordionPanel.tsx index 184bb4ca68..a792309be6 100644 --- a/packages/react/src/accordion/panel/AccordionPanel.tsx +++ b/packages/react/src/accordion/panel/AccordionPanel.tsx @@ -164,12 +164,15 @@ export const AccordionPanel = React.forwardRef(function AccordionPanel( return element; }); -export namespace AccordionPanel { - export interface State extends AccordionItem.State { - transitionStatus: TransitionStatus; - } +export interface AccordionPanelState extends AccordionItem.State { + transitionStatus: TransitionStatus; +} - export interface Props - extends BaseUIComponentProps<'div', State>, - Pick {} +export interface AccordionPanelProps + extends BaseUIComponentProps<'div', AccordionPanel.State>, + Pick {} + +export namespace AccordionPanel { + export type State = AccordionPanelState; + export type Props = AccordionPanelProps; } diff --git a/packages/react/src/accordion/root/AccordionRoot.tsx b/packages/react/src/accordion/root/AccordionRoot.tsx index 0627f8e150..4b79028b13 100644 --- a/packages/react/src/accordion/root/AccordionRoot.tsx +++ b/packages/react/src/accordion/root/AccordionRoot.tsx @@ -161,72 +161,79 @@ export const AccordionRoot = React.forwardRef(function AccordionRoot( export type AccordionValue = (any | null)[]; -export namespace AccordionRoot { - export interface State { - value: AccordionValue; - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - orientation: Orientation; - } +export interface AccordionRootState { + value: AccordionValue; + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; + orientation: Orientation; +} - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * The controlled value of the item(s) that should be expanded. - * - * To render an uncontrolled accordion, use the `defaultValue` prop instead. - */ - value?: AccordionValue; - /** - * The uncontrolled value of the item(s) that should be initially expanded. - * - * To render a controlled accordion, use the `value` prop instead. - */ - defaultValue?: AccordionValue; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - /** - * Allows the browser’s built-in page search to find and expand the panel contents. - * - * Overrides the `keepMounted` prop and uses `hidden="until-found"` - * to hide the element without removing it from the DOM. - * @default false - */ - hiddenUntilFound?: boolean; - /** - * Whether to keep the element in the DOM while the panel is closed. - * This prop is ignored when `hiddenUntilFound` is used. - * @default false - */ - keepMounted?: boolean; - /** - * Whether to loop keyboard focus back to the first item - * when the end of the list is reached while using the arrow keys. - * @default true - */ - loop?: boolean; - /** - * Event handler called when an accordion item is expanded or collapsed. - * Provides the new value as an argument. - */ - onValueChange?: (value: AccordionValue, eventDetails: ChangeEventDetails) => void; - /** - * Whether multiple items can be open at the same time. - * @default true - */ - multiple?: boolean; - /** - * The visual orientation of the accordion. - * Controls whether roving focus uses left/right or up/down arrow keys. - * @default 'vertical' - */ - orientation?: Orientation; - } +export interface AccordionRootProps extends BaseUIComponentProps<'div', AccordionRoot.State> { + /** + * The controlled value of the item(s) that should be expanded. + * + * To render an uncontrolled accordion, use the `defaultValue` prop instead. + */ + value?: AccordionValue; + /** + * The uncontrolled value of the item(s) that should be initially expanded. + * + * To render a controlled accordion, use the `value` prop instead. + */ + defaultValue?: AccordionValue; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; + /** + * Allows the browser’s built-in page search to find and expand the panel contents. + * + * Overrides the `keepMounted` prop and uses `hidden="until-found"` + * to hide the element without removing it from the DOM. + * @default false + */ + hiddenUntilFound?: boolean; + /** + * Whether to keep the element in the DOM while the panel is closed. + * This prop is ignored when `hiddenUntilFound` is used. + * @default false + */ + keepMounted?: boolean; + /** + * Whether to loop keyboard focus back to the first item + * when the end of the list is reached while using the arrow keys. + * @default true + */ + loop?: boolean; + /** + * Event handler called when an accordion item is expanded or collapsed. + * Provides the new value as an argument. + */ + onValueChange?: (value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void; + /** + * Whether multiple items can be open at the same time. + * @default true + */ + multiple?: boolean; + /** + * The visual orientation of the accordion. + * Controls whether roving focus uses left/right or up/down arrow keys. + * @default 'vertical' + */ + orientation?: Orientation; +} + +export type AccordionRootChangeEventReason = 'trigger-press' | 'none'; - export type ChangeEventReason = 'trigger-press' | 'none'; - export type ChangeEventDetails = BaseUIChangeEventDetails; +export type AccordionRootChangeEventDetails = + BaseUIChangeEventDetails; + +export namespace AccordionRoot { + export type State = AccordionRootState; + export type Props = AccordionRootProps; + export type ChangeEventReason = AccordionRootChangeEventReason; + export type ChangeEventDetails = AccordionRootChangeEventDetails; } diff --git a/packages/react/src/accordion/trigger/AccordionTrigger.tsx b/packages/react/src/accordion/trigger/AccordionTrigger.tsx index 1c64da28f4..186c9dd735 100644 --- a/packages/react/src/accordion/trigger/AccordionTrigger.tsx +++ b/packages/react/src/accordion/trigger/AccordionTrigger.tsx @@ -184,8 +184,10 @@ export const AccordionTrigger = React.forwardRef(function AccordionTrigger( return element; }); +export interface AccordionTriggerProps + extends NativeButtonProps, + BaseUIComponentProps<'button', AccordionItem.State> {} + export namespace AccordionTrigger { - export interface Props - extends NativeButtonProps, - BaseUIComponentProps<'button', AccordionItem.State> {} + export type Props = AccordionTriggerProps; } diff --git a/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx b/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx index e34b9be480..aae3a1c2d7 100644 --- a/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx +++ b/packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx @@ -58,20 +58,24 @@ export const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop }); }); -export namespace AlertDialogBackdrop { - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Whether the backdrop is forced to render even when nested. - * @default false - */ - forceRender?: boolean; - } +export interface AlertDialogBackdropProps + extends BaseUIComponentProps<'div', AlertDialogBackdrop.State> { + /** + * Whether the backdrop is forced to render even when nested. + * @default false + */ + forceRender?: boolean; +} - export interface State { - /** - * Whether the dialog is currently open. - */ - open: boolean; - transitionStatus: TransitionStatus; - } +export interface AlertDialogBackdropState { + /** + * Whether the dialog is currently open. + */ + open: boolean; + transitionStatus: TransitionStatus; +} + +export namespace AlertDialogBackdrop { + export type Props = AlertDialogBackdropProps; + export type State = AlertDialogBackdropState; } diff --git a/packages/react/src/alert-dialog/close/AlertDialogClose.tsx b/packages/react/src/alert-dialog/close/AlertDialogClose.tsx index 82d5d4a343..242fae7e9a 100644 --- a/packages/react/src/alert-dialog/close/AlertDialogClose.tsx +++ b/packages/react/src/alert-dialog/close/AlertDialogClose.tsx @@ -42,13 +42,18 @@ export const AlertDialogClose = React.forwardRef(function AlertDialogClose( }); }); +export interface AlertDialogCloseProps + extends NativeButtonProps, + BaseUIComponentProps<'button', AlertDialogClose.State> {} + +export interface AlertDialogCloseState { + /** + * Whether the button is currently disabled. + */ + disabled: boolean; +} + export namespace AlertDialogClose { - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> {} - - export interface State { - /** - * Whether the button is currently disabled. - */ - disabled: boolean; - } + export type Props = AlertDialogCloseProps; + export type State = AlertDialogCloseState; } diff --git a/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx b/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx index eea9b287da..30c9afe686 100644 --- a/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx +++ b/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx @@ -28,8 +28,12 @@ export const AlertDialogDescription = React.forwardRef(function AlertDialogDescr }); }); -export namespace AlertDialogDescription { - export interface Props extends BaseUIComponentProps<'p', State> {} +export interface AlertDialogDescriptionProps + extends BaseUIComponentProps<'p', AlertDialogDescription.State> {} + +export interface AlertDialogDescriptionState {} - export interface State {} +export namespace AlertDialogDescription { + export type Props = AlertDialogDescriptionProps; + export type State = AlertDialogDescriptionState; } diff --git a/packages/react/src/alert-dialog/index.ts b/packages/react/src/alert-dialog/index.ts index 766a0ca54b..0d189c7144 100644 --- a/packages/react/src/alert-dialog/index.ts +++ b/packages/react/src/alert-dialog/index.ts @@ -1 +1,10 @@ export * as AlertDialog from './index.parts'; + +export type * from './root/AlertDialogRoot'; +export type * from './trigger/AlertDialogTrigger'; +export type * from './portal/AlertDialogPortal'; +export type * from './popup/AlertDialogPopup'; +export type * from './backdrop/AlertDialogBackdrop'; +export type * from './title/AlertDialogTitle'; +export type * from './description/AlertDialogDescription'; +export type * from './close/AlertDialogClose'; diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx index c0d27aa9e0..932b2b0744 100644 --- a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx +++ b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx @@ -127,49 +127,52 @@ export const AlertDialogPopup = React.forwardRef(function AlertDialogPopup( ); }); -export namespace AlertDialogPopup { - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Determines the element to focus when the dialog is opened. - * - * - `false`: Do not move focus. - * - `true`: Move focus based on the default behavior (first tabbable element or popup). - * - `RefObject`: Move focus to the ref element. - * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). - * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. - */ - initialFocus?: - | boolean - | React.RefObject - | ((openType: InteractionType) => boolean | HTMLElement | null | void); - /** - * Determines the element to focus when the dialog is closed. - * - * - `false`: Do not move focus. - * - `true`: Move focus based on the default behavior (trigger or previously focused element). - * - `RefObject`: Move focus to the ref element. - * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). - * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. - */ - finalFocus?: - | boolean - | React.RefObject - | ((closeType: InteractionType) => boolean | HTMLElement | null | void); - } +export interface AlertDialogPopupProps extends BaseUIComponentProps<'div', AlertDialogPopup.State> { + /** + * Determines the element to focus when the dialog is opened. + * + * - `false`: Do not move focus. + * - `true`: Move focus based on the default behavior (first tabbable element or popup). + * - `RefObject`: Move focus to the ref element. + * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). + * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. + */ + initialFocus?: + | boolean + | React.RefObject + | ((openType: InteractionType) => boolean | HTMLElement | null | void); + /** + * Determines the element to focus when the dialog is closed. + * + * - `false`: Do not move focus. + * - `true`: Move focus based on the default behavior (trigger or previously focused element). + * - `RefObject`: Move focus to the ref element. + * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). + * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. + */ + finalFocus?: + | boolean + | React.RefObject + | ((closeType: InteractionType) => boolean | HTMLElement | null | void); +} - export interface State { - /** - * Whether the dialog is currently open. - */ - open: boolean; - transitionStatus: TransitionStatus; - /** - * Whether the dialog is nested within a parent dialog. - */ - nested: boolean; - /** - * Whether the dialog has nested dialogs open. - */ - nestedDialogOpen: boolean; - } +export interface AlertDialogPopupState { + /** + * Whether the dialog is currently open. + */ + open: boolean; + transitionStatus: TransitionStatus; + /** + * Whether the dialog is nested within a parent dialog. + */ + nested: boolean; + /** + * Whether the dialog has nested dialogs open. + */ + nestedDialogOpen: boolean; +} + +export namespace AlertDialogPopup { + export type Props = AlertDialogPopupProps; + export type State = AlertDialogPopupState; } diff --git a/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx b/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx index 9f92e03516..26b5962e7f 100644 --- a/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx +++ b/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx @@ -28,17 +28,19 @@ export function AlertDialogPortal(props: AlertDialogPortal.Props) { ); } +export interface AlertDialogPortalProps { + children?: React.ReactNode; + /** + * Whether to keep the portal mounted in the DOM while the popup is hidden. + * @default false + */ + keepMounted?: boolean; + /** + * A parent element to render the portal element into. + */ + container?: FloatingPortalProps['root']; +} + export namespace AlertDialogPortal { - export interface Props { - children?: React.ReactNode; - /** - * Whether to keep the portal mounted in the DOM while the popup is hidden. - * @default false - */ - keepMounted?: boolean; - /** - * A parent element to render the portal element into. - */ - container?: FloatingPortalProps['root']; - } + export type Props = AlertDialogPortalProps; } diff --git a/packages/react/src/alert-dialog/root/AlertDialogRoot.tsx b/packages/react/src/alert-dialog/root/AlertDialogRoot.tsx index f19ac03558..a931c1b770 100644 --- a/packages/react/src/alert-dialog/root/AlertDialogRoot.tsx +++ b/packages/react/src/alert-dialog/root/AlertDialogRoot.tsx @@ -65,24 +65,30 @@ export const AlertDialogRoot: React.FC = function AlertDi return {children}; }; -export namespace AlertDialogRoot { - export interface Props - extends Omit { - /** - * Event handler called when the dialog is opened or closed. - */ - onOpenChange?: (open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void; - /** - * A ref to imperative actions. - * - `unmount`: When specified, the dialog will not be unmounted when closed. - * Instead, the `unmount` function must be called to unmount the dialog manually. - * Useful when the dialog's animation is controlled by an external library. - */ - actionsRef?: React.RefObject; - } +export interface AlertDialogRootProps + extends Omit { + /** + * Event handler called when the dialog is opened or closed. + */ + onOpenChange?: (open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void; + /** + * A ref to imperative actions. + * - `unmount`: When specified, the dialog will not be unmounted when closed. + * Instead, the `unmount` function must be called to unmount the dialog manually. + * Useful when the dialog's animation is controlled by an external library. + */ + actionsRef?: React.RefObject; +} - export type Actions = DialogRoot.Actions; +export type AlertDialogRootActions = DialogRoot.Actions; - export type ChangeEventReason = DialogRoot.ChangeEventReason; - export type ChangeEventDetails = BaseUIChangeEventDetails; +export type AlertDialogRootChangeEventReason = DialogRoot.ChangeEventReason; +export type AlertDialogRootChangeEventDetails = + BaseUIChangeEventDetails; + +export namespace AlertDialogRoot { + export type Props = AlertDialogRootProps; + export type Actions = AlertDialogRootActions; + export type ChangeEventReason = AlertDialogRootChangeEventReason; + export type ChangeEventDetails = AlertDialogRootChangeEventDetails; } diff --git a/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx b/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx index a7a09a2521..c3a13ae527 100644 --- a/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx +++ b/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx @@ -28,8 +28,11 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle( }); }); -export namespace AlertDialogTitle { - export interface Props extends BaseUIComponentProps<'h2', State> {} +export interface AlertDialogTitleProps extends BaseUIComponentProps<'h2', AlertDialogTitle.State> {} + +export interface AlertDialogTitleState {} - export interface State {} +export namespace AlertDialogTitle { + export type Props = AlertDialogTitleProps; + export type State = AlertDialogTitleState; } diff --git a/packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx b/packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx index f358276ddc..08974512af 100644 --- a/packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx +++ b/packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx @@ -49,17 +49,22 @@ export const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger( }); }); -export namespace AlertDialogTrigger { - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> {} +export interface AlertDialogTriggerProps + extends NativeButtonProps, + BaseUIComponentProps<'button', AlertDialogTrigger.State> {} + +export interface AlertDialogTriggerState { + /** + * Whether the dialog is currently disabled. + */ + disabled: boolean; + /** + * Whether the dialog is currently open. + */ + open: boolean; +} - export interface State { - /** - * Whether the dialog is currently disabled. - */ - disabled: boolean; - /** - * Whether the dialog is currently open. - */ - open: boolean; - } +export namespace AlertDialogTrigger { + export type Props = AlertDialogTriggerProps; + export type State = AlertDialogTriggerState; } diff --git a/packages/react/src/autocomplete/index.ts b/packages/react/src/autocomplete/index.ts index 25210fce27..e32e416c81 100644 --- a/packages/react/src/autocomplete/index.ts +++ b/packages/react/src/autocomplete/index.ts @@ -1 +1,55 @@ export * as Autocomplete from './index.parts'; + +export type * from './root/AutocompleteRoot'; +export type * from './value/AutocompleteValue'; + +export type { + ComboboxTriggerProps as AutocompleteTriggerProps, + ComboboxTriggerState as AutocompleteTriggerState, +} from '../combobox/trigger/ComboboxTrigger'; +export type { + ComboboxInputProps as AutocompleteInputProps, + ComboboxInputState as AutocompleteInputState, +} from '../combobox/input/ComboboxInput'; +export type { + ComboboxPopupProps as AutocompletePopupProps, + ComboboxPopupState as AutocompletePopupState, +} from '../combobox/popup/ComboboxPopup'; +export type { + ComboboxPositionerProps as AutocompletePositionerProps, + ComboboxPositionerState as AutocompletePositionerState, +} from '../combobox/positioner/ComboboxPositioner'; +export type { + ComboboxListProps as AutocompleteListProps, + ComboboxListState as AutocompleteListState, +} from '../combobox/list/ComboboxList'; +export type { + ComboboxItemProps as AutocompleteItemProps, + ComboboxItemState as AutocompleteItemState, +} from '../combobox/item/ComboboxItem'; +export type { + ComboboxArrowProps as AutocompleteArrowProps, + ComboboxArrowState as AutocompleteArrowState, +} from '../combobox/arrow/ComboboxArrow'; +export type { + ComboboxBackdropProps as AutocompleteBackdropProps, + ComboboxBackdropState as AutocompleteBackdropState, +} from '../combobox/backdrop/ComboboxBackdrop'; +export type { ComboboxPortalProps as AutocompletePortalProps } from '../combobox/portal/ComboboxPortal'; +export type { + ComboboxGroupProps as AutocompleteGroupProps, + ComboboxGroupState as AutocompleteGroupState, +} from '../combobox/group/ComboboxGroup'; +export type { + ComboboxGroupLabelProps as AutocompleteGroupLabelProps, + ComboboxGroupLabelState as AutocompleteGroupLabelState, +} from '../combobox/group-label/ComboboxGroupLabel'; +export type { + ComboboxEmptyProps as AutocompleteEmptyProps, + ComboboxEmptyState as AutocompleteEmptyState, +} from '../combobox/empty/ComboboxEmpty'; +export type { + ComboboxStatusProps as AutocompleteStatusProps, + ComboboxStatusState as AutocompleteStatusState, +} from '../combobox/status/ComboboxStatus'; +export type { ComboboxCollectionProps as AutocompleteCollectionProps } from '../combobox/collection/ComboboxCollection'; diff --git a/packages/react/src/autocomplete/root/AutocompleteRoot.tsx b/packages/react/src/autocomplete/root/AutocompleteRoot.tsx index a63cf3b91c..bb3c8bf99a 100644 --- a/packages/react/src/autocomplete/root/AutocompleteRoot.tsx +++ b/packages/react/src/autocomplete/root/AutocompleteRoot.tsx @@ -137,97 +137,108 @@ export function AutocompleteRoot( ); } -export namespace AutocompleteRoot { - export interface Props - extends Omit< - AriaCombobox.Props, - | 'selectionMode' - | 'selectedValue' - | 'defaultSelectedValue' - | 'onSelectedValueChange' - | 'fillInputOnItemPress' - | 'itemToStringValue' - | 'isItemEqualToValue' - // Different names - | 'inputValue' // value - | 'defaultInputValue' // defaultValue - | 'onInputValueChange' // onValueChange - | 'autoComplete' // mode - | 'itemToStringLabel' // itemToStringValue - // Custom JSDoc - | 'actionsRef' - | 'onOpenChange' - | 'onInputValueChange' - > { - /** - * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion. - * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item. - * - `both`: items are dynamically filtered based on the input value, which will temporarily change based on the active item (inline autocompletion). - * - `inline`: items are static (not filtered), and the input value will temporarily change based on the active item (inline autocompletion). - * - `none`: items are static (not filtered), and the input value will not change based on the active item. - * @default 'list' - */ - mode?: 'list' | 'both' | 'inline' | 'none'; - /** - * The uncontrolled input value of the autocomplete when it's initially rendered. - * - * To render a controlled autocomplete, use the `value` prop instead. - */ - defaultValue?: AriaCombobox.Props< - React.ComponentProps<'input'>['defaultValue'], - 'none' - >['defaultInputValue']; - /** - * The input value of the autocomplete. Use when controlled. - */ - value?: AriaCombobox.Props['value'], 'none'>['inputValue']; - /** - * Event handler called when the input value of the autocomplete changes. - */ - onValueChange?: (value: string, eventDetails: ChangeEventDetails) => void; - /** - * When the item values are objects (``), this function converts the object value to a string representation for both display in the input and form submission. - * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. - */ - itemToStringValue?: (itemValue: ItemValue) => string; - /** - * A ref to imperative actions. - * - `unmount`: When specified, the autocomplete will not be unmounted when closed. - * Instead, the `unmount` function must be called to unmount the autocomplete manually. - * Useful when the autocomplete's animation is controlled by an external library. - */ - actionsRef?: React.RefObject; - /** - * Event handler called when the popup is opened or closed. - */ - onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void; - /** - * Event handler called when the input value changes. - */ - onInputValueChange?: (inputValue: string, eventDetails: ChangeEventDetails) => void; - /** - * Callback fired when an item is highlighted or unhighlighted. - * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed. - * The `reason` can be: - * - `'keyboard'`: the highlight changed due to keyboard navigation. - * - `'pointer'`: the highlight changed due to pointer hovering. - * - `'none'`: the highlight changed programmatically. - */ - onItemHighlighted?: ( - highlightedValue: ItemValue | undefined, - eventDetails: AutocompleteRoot.HighlightEventDetails, - ) => void; - } - - export type State = AriaCombobox.State; +export type AutocompleteRootState = AriaCombobox.State; - export interface Actions { - unmount: () => void; - } +export interface AutocompleteRootActions { + unmount: () => void; +} - export type ChangeEventReason = AriaCombobox.ChangeEventReason; - export type ChangeEventDetails = AriaCombobox.ChangeEventDetails; +export type AutocompleteRootChangeEventReason = AriaCombobox.ChangeEventReason; +export type AutocompleteRootChangeEventDetails = AriaCombobox.ChangeEventDetails; + +export type AutocompleteRootHighlightEventReason = AriaCombobox.HighlightEventReason; +export type AutocompleteRootHighlightEventDetails = AriaCombobox.HighlightEventDetails; + +export interface AutocompleteRootProps + extends Omit< + AriaCombobox.Props, + | 'selectionMode' + | 'selectedValue' + | 'defaultSelectedValue' + | 'onSelectedValueChange' + | 'fillInputOnItemPress' + | 'itemToStringValue' + | 'isItemEqualToValue' + // Different names + | 'inputValue' // value + | 'defaultInputValue' // defaultValue + | 'onInputValueChange' // onValueChange + | 'autoComplete' // mode + | 'itemToStringLabel' // itemToStringValue + // Custom JSDoc + | 'actionsRef' + | 'onOpenChange' + | 'onInputValueChange' + > { + /** + * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion. + * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item. + * - `both`: items are dynamically filtered based on the input value, which will temporarily change based on the active item (inline autocompletion). + * - `inline`: items are static (not filtered), and the input value will temporarily change based on the active item (inline autocompletion). + * - `none`: items are static (not filtered), and the input value will not change based on the active item. + * @default 'list' + */ + mode?: 'list' | 'both' | 'inline' | 'none'; + /** + * The uncontrolled input value of the autocomplete when it's initially rendered. + * + * To render a controlled autocomplete, use the `value` prop instead. + */ + defaultValue?: AriaCombobox.Props< + React.ComponentProps<'input'>['defaultValue'], + 'none' + >['defaultInputValue']; + /** + * The input value of the autocomplete. Use when controlled. + */ + value?: AriaCombobox.Props['value'], 'none'>['inputValue']; + /** + * Event handler called when the input value of the autocomplete changes. + */ + onValueChange?: (value: string, eventDetails: AutocompleteRootChangeEventDetails) => void; + /** + * When the item values are objects (``), this function converts the object value to a string representation for both display in the input and form submission. + * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. + */ + itemToStringValue?: (itemValue: ItemValue) => string; + /** + * A ref to imperative actions. + * - `unmount`: When specified, the autocomplete will not be unmounted when closed. + * Instead, the `unmount` function must be called to unmount the autocomplete manually. + * Useful when the autocomplete's animation is controlled by an external library. + */ + actionsRef?: React.RefObject; + /** + * Event handler called when the popup is opened or closed. + */ + onOpenChange?: (open: boolean, eventDetails: AutocompleteRootChangeEventDetails) => void; + /** + * Event handler called when the input value changes. + */ + onInputValueChange?: ( + inputValue: string, + eventDetails: AutocompleteRootChangeEventDetails, + ) => void; + /** + * Callback fired when an item is highlighted or unhighlighted. + * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed. + * The `reason` can be: + * - `'keyboard'`: the highlight changed due to keyboard navigation. + * - `'pointer'`: the highlight changed due to pointer hovering. + * - `'none'`: the highlight changed programmatically. + */ + onItemHighlighted?: ( + highlightedValue: ItemValue | undefined, + eventDetails: AutocompleteRootHighlightEventDetails, + ) => void; +} - export type HighlightEventReason = AriaCombobox.HighlightEventReason; - export type HighlightEventDetails = AriaCombobox.HighlightEventDetails; +export namespace AutocompleteRoot { + export type Props = AutocompleteRootProps; + export type State = AutocompleteRootState; + export type Actions = AutocompleteRootActions; + export type ChangeEventReason = AutocompleteRootChangeEventReason; + export type ChangeEventDetails = AutocompleteRootChangeEventDetails; + export type HighlightEventReason = AutocompleteRootHighlightEventReason; + export type HighlightEventDetails = AutocompleteRootHighlightEventDetails; } diff --git a/packages/react/src/autocomplete/value/AutocompleteValue.tsx b/packages/react/src/autocomplete/value/AutocompleteValue.tsx index 9b2865f271..18178060b0 100644 --- a/packages/react/src/autocomplete/value/AutocompleteValue.tsx +++ b/packages/react/src/autocomplete/value/AutocompleteValue.tsx @@ -24,8 +24,13 @@ export function AutocompleteValue(props: AutocompleteValue.Props) { return inputValue; } +export interface AutocompleteValueState {} + +export interface AutocompleteValueProps { + children?: React.ReactNode | ((value: string) => React.ReactNode); +} + export namespace AutocompleteValue { - export interface Props { - children?: React.ReactNode | ((value: string) => React.ReactNode); - } + export type State = AutocompleteValueState; + export type Props = AutocompleteValueProps; } diff --git a/packages/react/src/avatar/fallback/AvatarFallback.tsx b/packages/react/src/avatar/fallback/AvatarFallback.tsx index c3b753b876..451fa79f51 100644 --- a/packages/react/src/avatar/fallback/AvatarFallback.tsx +++ b/packages/react/src/avatar/fallback/AvatarFallback.tsx @@ -48,11 +48,13 @@ export const AvatarFallback = React.forwardRef(function AvatarFallback( return element; }); +export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarRoot.State> { + /** + * How long to wait before showing the fallback. Specified in milliseconds. + */ + delay?: number; +} + export namespace AvatarFallback { - export interface Props extends BaseUIComponentProps<'span', AvatarRoot.State> { - /** - * How long to wait before showing the fallback. Specified in milliseconds. - */ - delay?: number; - } + export type Props = AvatarFallbackProps; } diff --git a/packages/react/src/avatar/image/AvatarImage.tsx b/packages/react/src/avatar/image/AvatarImage.tsx index f4b10a6ee7..bcff9f0732 100644 --- a/packages/react/src/avatar/image/AvatarImage.tsx +++ b/packages/react/src/avatar/image/AvatarImage.tsx @@ -63,11 +63,13 @@ export const AvatarImage = React.forwardRef(function AvatarImage( return element; }); +export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarRoot.State> { + /** + * Callback fired when the loading status changes. + */ + onLoadingStatusChange?: (status: ImageLoadingStatus) => void; +} + export namespace AvatarImage { - export interface Props extends BaseUIComponentProps<'img', AvatarRoot.State> { - /** - * Callback fired when the loading status changes. - */ - onLoadingStatusChange?: (status: ImageLoadingStatus) => void; - } + export type Props = AvatarImageProps; } diff --git a/packages/react/src/avatar/index.ts b/packages/react/src/avatar/index.ts index af3ac6cfc9..add96c6cdc 100644 --- a/packages/react/src/avatar/index.ts +++ b/packages/react/src/avatar/index.ts @@ -1 +1,5 @@ export * as Avatar from './index.parts'; + +export type * from './root/AvatarRoot'; +export type * from './image/AvatarImage'; +export type * from './fallback/AvatarFallback'; diff --git a/packages/react/src/avatar/root/AvatarRoot.tsx b/packages/react/src/avatar/root/AvatarRoot.tsx index e12586a938..e43da45c4a 100644 --- a/packages/react/src/avatar/root/AvatarRoot.tsx +++ b/packages/react/src/avatar/root/AvatarRoot.tsx @@ -46,10 +46,13 @@ export const AvatarRoot = React.forwardRef(function AvatarRoot( export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'; -export namespace AvatarRoot { - export interface Props extends BaseUIComponentProps<'span', State> {} +export interface AvatarRootState { + imageLoadingStatus: ImageLoadingStatus; +} - export interface State { - imageLoadingStatus: ImageLoadingStatus; - } +export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRoot.State> {} + +export namespace AvatarRoot { + export type State = AvatarRootState; + export type Props = AvatarRootProps; } diff --git a/packages/react/src/checkbox-group/CheckboxGroup.tsx b/packages/react/src/checkbox-group/CheckboxGroup.tsx index 96730deb52..73a49e73a4 100644 --- a/packages/react/src/checkbox-group/CheckboxGroup.tsx +++ b/packages/react/src/checkbox-group/CheckboxGroup.tsx @@ -141,43 +141,49 @@ export const CheckboxGroup = React.forwardRef(function CheckboxGroup( ); }); +export interface CheckboxGroupState extends FieldRoot.State { + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; +} + +export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroup.State> { + /** + * Names of the checkboxes in the group that should be ticked. + * + * To render an uncontrolled checkbox group, use the `defaultValue` prop instead. + */ + value?: string[]; + /** + * Names of the checkboxes in the group that should be initially ticked. + * + * To render a controlled checkbox group, use the `value` prop instead. + */ + defaultValue?: string[]; + /** + * Event handler called when a checkbox in the group is ticked or unticked. + * Provides the new value as an argument. + */ + onValueChange?: (value: string[], eventDetails: CheckboxGroupChangeEventDetails) => void; + /** + * Names of all checkboxes in the group. Use this when creating a parent checkbox. + */ + allValues?: string[]; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; +} + +export type CheckboxGroupChangeEventReason = 'none'; +export type CheckboxGroupChangeEventDetails = + BaseUIChangeEventDetails; + export namespace CheckboxGroup { - export interface State extends FieldRoot.State { - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - } - - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Names of the checkboxes in the group that should be ticked. - * - * To render an uncontrolled checkbox group, use the `defaultValue` prop instead. - */ - value?: string[]; - /** - * Names of the checkboxes in the group that should be initially ticked. - * - * To render a controlled checkbox group, use the `value` prop instead. - */ - defaultValue?: string[]; - /** - * Event handler called when a checkbox in the group is ticked or unticked. - * Provides the new value as an argument. - */ - onValueChange?: (value: string[], eventDetails: ChangeEventDetails) => void; - /** - * Names of all checkboxes in the group. Use this when creating a parent checkbox. - */ - allValues?: string[]; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - } - - export type ChangeEventReason = 'none'; - export type ChangeEventDetails = BaseUIChangeEventDetails; + export type State = CheckboxGroupState; + export type Props = CheckboxGroupProps; + export type ChangeEventReason = CheckboxGroupChangeEventReason; + export type ChangeEventDetails = CheckboxGroupChangeEventDetails; } diff --git a/packages/react/src/checkbox-group/index.ts b/packages/react/src/checkbox-group/index.ts index 7e5ef0aba5..01e0eb0eeb 100644 --- a/packages/react/src/checkbox-group/index.ts +++ b/packages/react/src/checkbox-group/index.ts @@ -1 +1,2 @@ export { CheckboxGroup } from './CheckboxGroup'; +export type * from './CheckboxGroup'; diff --git a/packages/react/src/checkbox-group/useCheckboxGroupParent.ts b/packages/react/src/checkbox-group/useCheckboxGroupParent.ts index 73118e0b18..f50258d907 100644 --- a/packages/react/src/checkbox-group/useCheckboxGroupParent.ts +++ b/packages/react/src/checkbox-group/useCheckboxGroupParent.ts @@ -103,29 +103,32 @@ export function useCheckboxGroupParent( ); } -export namespace useCheckboxGroupParent { - export interface Parameters { - allValues?: string[]; - value?: string[]; - onValueChange?: (value: string[], eventDetails: BaseUIChangeEventDetails<'none'>) => void; - } +export interface UseCheckboxGroupParentParameters { + allValues?: string[]; + value?: string[]; + onValueChange?: (value: string[], eventDetails: BaseUIChangeEventDetails<'none'>) => void; +} - export interface ReturnValue { +export interface UseCheckboxGroupParentReturnValue { + id: string | undefined; + indeterminate: boolean; + disabledStatesRef: React.RefObject>; + getParentProps: () => { id: string | undefined; indeterminate: boolean; - disabledStatesRef: React.RefObject>; - getParentProps: () => { - id: string | undefined; - indeterminate: boolean; - checked: boolean; - 'aria-controls': string; - onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<'none'>) => void; - }; - getChildProps: (name: string) => { - name: string; - id: string; - checked: boolean; - onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<'none'>) => void; - }; - } + checked: boolean; + 'aria-controls': string; + onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<'none'>) => void; + }; + getChildProps: (name: string) => { + name: string; + id: string; + checked: boolean; + onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<'none'>) => void; + }; +} + +export namespace useCheckboxGroupParent { + export type Parameters = UseCheckboxGroupParentParameters; + export type ReturnValue = UseCheckboxGroupParentReturnValue; } diff --git a/packages/react/src/checkbox/index.ts b/packages/react/src/checkbox/index.ts index 4e96104ea3..0a1170e208 100644 --- a/packages/react/src/checkbox/index.ts +++ b/packages/react/src/checkbox/index.ts @@ -1 +1,4 @@ export * as Checkbox from './index.parts'; + +export type * from './root/CheckboxRoot'; +export type * from './indicator/CheckboxIndicator'; diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx index 50b767cd61..22b56ac799 100644 --- a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx +++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx @@ -77,16 +77,20 @@ export const CheckboxIndicator = React.forwardRef(function CheckboxIndicator( return element; }); -export namespace CheckboxIndicator { - export interface State extends CheckboxRoot.State { - transitionStatus: TransitionStatus; - } +export interface CheckboxIndicatorState extends CheckboxRoot.State { + transitionStatus: TransitionStatus; +} - export interface Props extends BaseUIComponentProps<'span', State> { - /** - * Whether to keep the element in the DOM when the checkbox is not checked. - * @default false - */ - keepMounted?: boolean; - } +export interface CheckboxIndicatorProps + extends BaseUIComponentProps<'span', CheckboxIndicator.State> { + /** + * Whether to keep the element in the DOM when the checkbox is not checked. + * @default false + */ + keepMounted?: boolean; +} + +export namespace CheckboxIndicator { + export type State = CheckboxIndicatorState; + export type Props = CheckboxIndicatorProps; } diff --git a/packages/react/src/checkbox/root/CheckboxRoot.tsx b/packages/react/src/checkbox/root/CheckboxRoot.tsx index 88a0130b4b..415b79d639 100644 --- a/packages/react/src/checkbox/root/CheckboxRoot.tsx +++ b/packages/react/src/checkbox/root/CheckboxRoot.tsx @@ -320,97 +320,103 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot( ); }); -export namespace CheckboxRoot { - export interface State extends FieldRoot.State { - /** - * Whether the checkbox is currently ticked. - */ - checked: boolean; - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - /** - * Whether the user should be unable to tick or untick the checkbox. - */ - readOnly: boolean; - /** - * Whether the user must tick the checkbox before submitting a form. - */ - required: boolean; - /** - * Whether the checkbox is in a mixed state: neither ticked, nor unticked. - */ - indeterminate: boolean; - } +export interface CheckboxRootState extends FieldRoot.State { + /** + * Whether the checkbox is currently ticked. + */ + checked: boolean; + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; + /** + * Whether the user should be unable to tick or untick the checkbox. + */ + readOnly: boolean; + /** + * Whether the user must tick the checkbox before submitting a form. + */ + required: boolean; + /** + * Whether the checkbox is in a mixed state: neither ticked, nor unticked. + */ + indeterminate: boolean; +} - export interface Props - extends NativeButtonProps, - Omit, 'onChange' | 'value'> { - /** - * The id of the input element. - */ - id?: string; - /** - * Identifies the field when a form is submitted. - * @default undefined - */ - name?: string; - /** - * Whether the checkbox is currently ticked. - * - * To render an uncontrolled checkbox, use the `defaultChecked` prop instead. - * @default undefined - */ - checked?: boolean; - /** - * Whether the checkbox is initially ticked. - * - * To render a controlled checkbox, use the `checked` prop instead. - * @default false - */ - defaultChecked?: boolean; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - /** - * Event handler called when the checkbox is ticked or unticked. - */ - onCheckedChange?: (checked: boolean, eventDetails: ChangeEventDetails) => void; - /** - * Whether the user should be unable to tick or untick the checkbox. - * @default false - */ - readOnly?: boolean; - /** - * Whether the user must tick the checkbox before submitting a form. - * @default false - */ - required?: boolean; - /** - * Whether the checkbox is in a mixed state: neither ticked, nor unticked. - * @default false - */ - indeterminate?: boolean; - /** - * A ref to access the hidden `` element. - */ - inputRef?: React.Ref; - /** - * Whether the checkbox controls a group of child checkboxes. - * - * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group). - * @default false - */ - parent?: boolean; - /** - * The value of the selected checkbox. - */ - value?: string; - } +export interface CheckboxRootProps + extends NativeButtonProps, + Omit, 'onChange' | 'value'> { + /** + * The id of the input element. + */ + id?: string; + /** + * Identifies the field when a form is submitted. + * @default undefined + */ + name?: string; + /** + * Whether the checkbox is currently ticked. + * + * To render an uncontrolled checkbox, use the `defaultChecked` prop instead. + * @default undefined + */ + checked?: boolean; + /** + * Whether the checkbox is initially ticked. + * + * To render a controlled checkbox, use the `checked` prop instead. + * @default false + */ + defaultChecked?: boolean; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; + /** + * Event handler called when the checkbox is ticked or unticked. + */ + onCheckedChange?: (checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void; + /** + * Whether the user should be unable to tick or untick the checkbox. + * @default false + */ + readOnly?: boolean; + /** + * Whether the user must tick the checkbox before submitting a form. + * @default false + */ + required?: boolean; + /** + * Whether the checkbox is in a mixed state: neither ticked, nor unticked. + * @default false + */ + indeterminate?: boolean; + /** + * A ref to access the hidden `` element. + */ + inputRef?: React.Ref; + /** + * Whether the checkbox controls a group of child checkboxes. + * + * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group). + * @default false + */ + parent?: boolean; + /** + * The value of the selected checkbox. + */ + value?: string; +} + +export type CheckboxRootChangeEventReason = 'none'; +export type CheckboxRootChangeEventDetails = + BaseUIChangeEventDetails; - export type ChangeEventReason = 'none'; - export type ChangeEventDetails = BaseUIChangeEventDetails; +export namespace CheckboxRoot { + export type State = CheckboxRootState; + export type Props = CheckboxRootProps; + export type ChangeEventReason = CheckboxRootChangeEventReason; + export type ChangeEventDetails = CheckboxRootChangeEventDetails; } diff --git a/packages/react/src/collapsible/index.ts b/packages/react/src/collapsible/index.ts index 6d2cba0c78..a8c3f341ce 100644 --- a/packages/react/src/collapsible/index.ts +++ b/packages/react/src/collapsible/index.ts @@ -1 +1,5 @@ export * as Collapsible from './index.parts'; + +export type * from './root/CollapsibleRoot'; +export type * from './trigger/CollapsibleTrigger'; +export type * from './panel/CollapsiblePanel'; diff --git a/packages/react/src/collapsible/panel/CollapsiblePanel.tsx b/packages/react/src/collapsible/panel/CollapsiblePanel.tsx index 77768eb102..7450f5f146 100644 --- a/packages/react/src/collapsible/panel/CollapsiblePanel.tsx +++ b/packages/react/src/collapsible/panel/CollapsiblePanel.tsx @@ -156,26 +156,29 @@ export const CollapsiblePanel = React.forwardRef(function CollapsiblePanel( return element; }); -export namespace CollapsiblePanel { - export interface State extends CollapsibleRoot.State { - transitionStatus: TransitionStatus; - } +export interface CollapsiblePanelState extends CollapsibleRoot.State { + transitionStatus: TransitionStatus; +} - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Allows the browser’s built-in page search to find and expand the panel contents. - * - * Overrides the `keepMounted` prop and uses `hidden="until-found"` - * to hide the element without removing it from the DOM. - * - * @default false - */ - hiddenUntilFound?: boolean; - /** - * Whether to keep the element in the DOM while the panel is hidden. - * This prop is ignored when `hiddenUntilFound` is used. - * @default false - */ - keepMounted?: boolean; - } +export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanel.State> { + /** + * Allows the browser’s built-in page search to find and expand the panel contents. + * + * Overrides the `keepMounted` prop and uses `hidden="until-found"` + * to hide the element without removing it from the DOM. + * + * @default false + */ + hiddenUntilFound?: boolean; + /** + * Whether to keep the element in the DOM while the panel is hidden. + * This prop is ignored when `hiddenUntilFound` is used. + * @default false + */ + keepMounted?: boolean; +} + +export namespace CollapsiblePanel { + export type State = CollapsiblePanelState; + export type Props = CollapsiblePanelProps; } diff --git a/packages/react/src/collapsible/panel/useCollapsiblePanel.ts b/packages/react/src/collapsible/panel/useCollapsiblePanel.ts index 7215bd954d..7f8f5a4e65 100644 --- a/packages/react/src/collapsible/panel/useCollapsiblePanel.ts +++ b/packages/react/src/collapsible/panel/useCollapsiblePanel.ts @@ -397,59 +397,62 @@ export function useCollapsiblePanel( ); } -export namespace useCollapsiblePanel { - export interface Parameters { - abortControllerRef: React.RefObject; - animationTypeRef: React.RefObject; - externalRef: React.ForwardedRef; - /** - * The height of the panel. - */ - height: number | undefined; - /** - * Allows the browser’s built-in page search to find and expand the panel contents. - * - * Overrides the `keepMounted` prop and uses `hidden="until-found"` - * to hide the element without removing it from the DOM. - */ - hiddenUntilFound: boolean; - /** - * The `id` attribute of the panel. - */ - id: React.HTMLAttributes['id']; - /** - * Whether to keep the element in the DOM while the panel is closed. - * This prop is ignored when `hiddenUntilFound` is used. - */ - keepMounted: boolean; - /** - * Whether the collapsible panel is currently mounted. - */ - mounted: boolean; - onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void; - /** - * Whether the collapsible panel is currently open. - */ - open: boolean; - panelRef: React.RefObject; - runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void; - setDimensions: React.Dispatch>; - setMounted: (nextMounted: boolean) => void; - setOpen: (nextOpen: boolean) => void; - setVisible: React.Dispatch>; - transitionDimensionRef: React.RefObject<'height' | 'width' | null>; - /** - * The visible state of the panel used to determine the `[hidden]` attribute - * only when CSS keyframe animations are used. - */ - visible: boolean; - /** - * The width of the panel. - */ - width: number | undefined; - } +export interface UseCollapsiblePanelParameters { + abortControllerRef: React.RefObject; + animationTypeRef: React.RefObject; + externalRef: React.ForwardedRef; + /** + * The height of the panel. + */ + height: number | undefined; + /** + * Allows the browser’s built-in page search to find and expand the panel contents. + * + * Overrides the `keepMounted` prop and uses `hidden="until-found"` + * to hide the element without removing it from the DOM. + */ + hiddenUntilFound: boolean; + /** + * The `id` attribute of the panel. + */ + id: React.HTMLAttributes['id']; + /** + * Whether to keep the element in the DOM while the panel is closed. + * This prop is ignored when `hiddenUntilFound` is used. + */ + keepMounted: boolean; + /** + * Whether the collapsible panel is currently mounted. + */ + mounted: boolean; + onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void; + /** + * Whether the collapsible panel is currently open. + */ + open: boolean; + panelRef: React.RefObject; + runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void; + setDimensions: React.Dispatch>; + setMounted: (nextMounted: boolean) => void; + setOpen: (nextOpen: boolean) => void; + setVisible: React.Dispatch>; + transitionDimensionRef: React.RefObject<'height' | 'width' | null>; + /** + * The visible state of the panel used to determine the `[hidden]` attribute + * only when CSS keyframe animations are used. + */ + visible: boolean; + /** + * The width of the panel. + */ + width: number | undefined; +} + +export interface UseCollapsiblePanelReturnValue { + props: HTMLProps; +} - export interface ReturnValue { - props: HTMLProps; - } +export namespace useCollapsiblePanel { + export type Parameters = UseCollapsiblePanelParameters; + export type ReturnValue = UseCollapsiblePanelReturnValue; } diff --git a/packages/react/src/collapsible/root/CollapsibleRoot.tsx b/packages/react/src/collapsible/root/CollapsibleRoot.tsx index a19b191767..90bc9dfcac 100644 --- a/packages/react/src/collapsible/root/CollapsibleRoot.tsx +++ b/packages/react/src/collapsible/root/CollapsibleRoot.tsx @@ -78,35 +78,43 @@ export const CollapsibleRoot = React.forwardRef(function CollapsibleRoot( ); }); -export namespace CollapsibleRoot { - export interface State extends Pick {} +export interface CollapsibleRootState + extends Pick {} - export interface Props extends Omit, 'render'> { - /** - * Whether the collapsible panel is currently open. - * - * To render an uncontrolled collapsible, use the `defaultOpen` prop instead. - */ - open?: boolean; - /** - * Whether the collapsible panel is initially open. - * - * To render a controlled collapsible, use the `open` prop instead. - * @default false - */ - defaultOpen?: boolean; - /** - * Event handler called when the panel is opened or closed. - */ - onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - render?: BaseUIComponentProps<'div', State>['render'] | null; - } +export interface CollapsibleRootProps + extends Omit, 'render'> { + /** + * Whether the collapsible panel is currently open. + * + * To render an uncontrolled collapsible, use the `defaultOpen` prop instead. + */ + open?: boolean; + /** + * Whether the collapsible panel is initially open. + * + * To render a controlled collapsible, use the `open` prop instead. + * @default false + */ + defaultOpen?: boolean; + /** + * Event handler called when the panel is opened or closed. + */ + onOpenChange?: (open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; + render?: BaseUIComponentProps<'div', CollapsibleRootState>['render'] | null; +} - export type ChangeEventReason = 'trigger-press' | 'none'; - export type ChangeEventDetails = BaseUIChangeEventDetails; +export type CollapsibleRootChangeEventReason = 'trigger-press' | 'none'; +export type CollapsibleRootChangeEventDetails = + BaseUIChangeEventDetails; + +export namespace CollapsibleRoot { + export type State = CollapsibleRootState; + export type Props = CollapsibleRootProps; + export type ChangeEventReason = CollapsibleRootChangeEventReason; + export type ChangeEventDetails = CollapsibleRootChangeEventDetails; } diff --git a/packages/react/src/collapsible/root/useCollapsibleRoot.ts b/packages/react/src/collapsible/root/useCollapsibleRoot.ts index 00e57cdf99..25a7f9d130 100644 --- a/packages/react/src/collapsible/root/useCollapsibleRoot.ts +++ b/packages/react/src/collapsible/root/useCollapsibleRoot.ts @@ -150,72 +150,75 @@ export function useCollapsibleRoot( ); } -export namespace useCollapsibleRoot { - export interface Parameters { - /** - * Whether the collapsible panel is currently open. - * - * To render an uncontrolled collapsible, use the `defaultOpen` prop instead. - */ - open?: boolean; - /** - * Whether the collapsible panel is initially open. - * - * To render a controlled collapsible, use the `open` prop instead. - * @default false - */ - defaultOpen?: boolean; - /** - * Event handler called when the panel is opened or closed. - */ - onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled: boolean; - } +export interface UseCollapsibleRootParameters { + /** + * Whether the collapsible panel is currently open. + * + * To render an uncontrolled collapsible, use the `defaultOpen` prop instead. + */ + open?: boolean; + /** + * Whether the collapsible panel is initially open. + * + * To render a controlled collapsible, use the `open` prop instead. + * @default false + */ + defaultOpen?: boolean; + /** + * Event handler called when the panel is opened or closed. + */ + onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled: boolean; +} - export interface ReturnValue { - abortControllerRef: React.RefObject; - animationTypeRef: React.RefObject; - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - handleTrigger: (event: React.MouseEvent | React.KeyboardEvent) => void; - /** - * The height of the panel. - */ - height: number | undefined; - /** - * Whether the collapsible panel is currently mounted. - */ - mounted: boolean; - /** - * Whether the collapsible panel is currently open. - */ - open: boolean; - panelId: React.HTMLAttributes['id']; - panelRef: React.RefObject; - runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void; - setDimensions: React.Dispatch>; - setHiddenUntilFound: React.Dispatch>; - setKeepMounted: React.Dispatch>; - setMounted: (open: boolean) => void; - setOpen: (open: boolean) => void; - setPanelIdState: (id: string | undefined) => void; - setVisible: React.Dispatch>; - transitionDimensionRef: React.RefObject<'height' | 'width' | null>; - transitionStatus: TransitionStatus; - /** - * The visible state of the panel used to determine the `[hidden]` attribute - * only when CSS keyframe animations are used. - */ - visible: boolean; - /** - * The width of the panel. - */ - width: number | undefined; - } +export interface UseCollapsibleRootReturnValue { + abortControllerRef: React.RefObject; + animationTypeRef: React.RefObject; + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; + handleTrigger: (event: React.MouseEvent | React.KeyboardEvent) => void; + /** + * The height of the panel. + */ + height: number | undefined; + /** + * Whether the collapsible panel is currently mounted. + */ + mounted: boolean; + /** + * Whether the collapsible panel is currently open. + */ + open: boolean; + panelId: React.HTMLAttributes['id']; + panelRef: React.RefObject; + runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void; + setDimensions: React.Dispatch>; + setHiddenUntilFound: React.Dispatch>; + setKeepMounted: React.Dispatch>; + setMounted: (open: boolean) => void; + setOpen: (open: boolean) => void; + setPanelIdState: (id: string | undefined) => void; + setVisible: React.Dispatch>; + transitionDimensionRef: React.RefObject<'height' | 'width' | null>; + transitionStatus: TransitionStatus; + /** + * The visible state of the panel used to determine the `[hidden]` attribute + * only when CSS keyframe animations are used. + */ + visible: boolean; + /** + * The width of the panel. + */ + width: number | undefined; +} + +export namespace useCollapsibleRoot { + export type Parameters = UseCollapsibleRootParameters; + export type ReturnValue = UseCollapsibleRootReturnValue; } diff --git a/packages/react/src/collapsible/trigger/CollapsibleTrigger.tsx b/packages/react/src/collapsible/trigger/CollapsibleTrigger.tsx index a817e1e5be..da837779cc 100644 --- a/packages/react/src/collapsible/trigger/CollapsibleTrigger.tsx +++ b/packages/react/src/collapsible/trigger/CollapsibleTrigger.tsx @@ -67,8 +67,10 @@ export const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger( return element; }); +export interface CollapsibleTriggerProps + extends NativeButtonProps, + BaseUIComponentProps<'button', CollapsibleRoot.State> {} + export namespace CollapsibleTrigger { - export interface Props - extends NativeButtonProps, - BaseUIComponentProps<'button', CollapsibleRoot.State> {} + export type Props = CollapsibleTriggerProps; } diff --git a/packages/react/src/combobox/arrow/ComboboxArrow.tsx b/packages/react/src/combobox/arrow/ComboboxArrow.tsx index c5092d5077..eae7ed90fa 100644 --- a/packages/react/src/combobox/arrow/ComboboxArrow.tsx +++ b/packages/react/src/combobox/arrow/ComboboxArrow.tsx @@ -46,16 +46,19 @@ export const ComboboxArrow = React.forwardRef(function ComboboxArrow( }); }); +export interface ComboboxArrowState { + /** + * Whether the popup is currently open. + */ + open: boolean; + side: Side; + align: Align; + uncentered: boolean; +} + +export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrow.State> {} + export namespace ComboboxArrow { - export interface State { - /** - * Whether the popup is currently open. - */ - open: boolean; - side: Side; - align: Align; - uncentered: boolean; - } - - export interface Props extends BaseUIComponentProps<'div', State> {} + export type State = ComboboxArrowState; + export type Props = ComboboxArrowProps; } diff --git a/packages/react/src/combobox/backdrop/ComboboxBackdrop.tsx b/packages/react/src/combobox/backdrop/ComboboxBackdrop.tsx index 0b56bc6b7f..295055085b 100644 --- a/packages/react/src/combobox/backdrop/ComboboxBackdrop.tsx +++ b/packages/react/src/combobox/backdrop/ComboboxBackdrop.tsx @@ -57,14 +57,18 @@ export const ComboboxBackdrop = React.forwardRef(function ComboboxBackdrop( }); }); -export namespace ComboboxBackdrop { - export interface Props extends BaseUIComponentProps<'div', State> {} +export interface ComboboxBackdropProps + extends BaseUIComponentProps<'div', ComboboxBackdrop.State> {} + +export interface ComboboxBackdropState { + /** + * Whether the popup is currently open. + */ + open: boolean; + transitionStatus: TransitionStatus; +} - export interface State { - /** - * Whether the popup is currently open. - */ - open: boolean; - transitionStatus: TransitionStatus; - } +export namespace ComboboxBackdrop { + export type Props = ComboboxBackdropProps; + export type State = ComboboxBackdropState; } diff --git a/packages/react/src/combobox/chip-remove/ComboboxChipRemove.tsx b/packages/react/src/combobox/chip-remove/ComboboxChipRemove.tsx index 0a202ff93c..e309ae4f8f 100644 --- a/packages/react/src/combobox/chip-remove/ComboboxChipRemove.tsx +++ b/packages/react/src/combobox/chip-remove/ComboboxChipRemove.tsx @@ -124,13 +124,18 @@ export const ComboboxChipRemove = React.forwardRef(function ComboboxChipRemove( return element; }); +export interface ComboboxChipRemoveState { + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; +} + +export interface ComboboxChipRemoveProps + extends NativeButtonProps, + BaseUIComponentProps<'button', ComboboxChipRemove.State> {} + export namespace ComboboxChipRemove { - export interface State { - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - } - - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> {} + export type State = ComboboxChipRemoveState; + export type Props = ComboboxChipRemoveProps; } diff --git a/packages/react/src/combobox/chip/ComboboxChip.tsx b/packages/react/src/combobox/chip/ComboboxChip.tsx index 550c880c46..5596615b56 100644 --- a/packages/react/src/combobox/chip/ComboboxChip.tsx +++ b/packages/react/src/combobox/chip/ComboboxChip.tsx @@ -136,13 +136,16 @@ export const ComboboxChip = React.forwardRef(function ComboboxChip( ); }); -export namespace ComboboxChip { - export interface State { - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - } +export interface ComboboxChipState { + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; +} - export interface Props extends BaseUIComponentProps<'div', State> {} +export interface ComboboxChipProps extends BaseUIComponentProps<'div', ComboboxChip.State> {} + +export namespace ComboboxChip { + export type State = ComboboxChipState; + export type Props = ComboboxChipProps; } diff --git a/packages/react/src/combobox/chips/ComboboxChips.tsx b/packages/react/src/combobox/chips/ComboboxChips.tsx index 57cd72eefe..359441a36f 100644 --- a/packages/react/src/combobox/chips/ComboboxChips.tsx +++ b/packages/react/src/combobox/chips/ComboboxChips.tsx @@ -54,8 +54,11 @@ export const ComboboxChips = React.forwardRef(function ComboboxChips( ); }); -export namespace ComboboxChips { - export interface State {} +export interface ComboboxChipsState {} + +export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ComboboxChips { + export type State = ComboboxChipsState; + export type Props = ComboboxChipsProps; } diff --git a/packages/react/src/combobox/clear/ComboboxClear.tsx b/packages/react/src/combobox/clear/ComboboxClear.tsx index d3329ce0ff..9b104e7faf 100644 --- a/packages/react/src/combobox/clear/ComboboxClear.tsx +++ b/packages/react/src/combobox/clear/ComboboxClear.tsx @@ -142,29 +142,34 @@ export const ComboboxClear = React.forwardRef(function ComboboxClear( return element; }); -export namespace ComboboxClear { - export interface State { - /** - * Whether the popup is open. - */ - open: boolean; - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - transitionStatus: TransitionStatus; - } +export interface ComboboxClearState { + /** + * Whether the popup is open. + */ + open: boolean; + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; + transitionStatus: TransitionStatus; +} - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> { - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - /** - * Whether the component should remain mounted in the DOM when not visible. - * @default false - */ - keepMounted?: boolean; - } +export interface ComboboxClearProps + extends NativeButtonProps, + BaseUIComponentProps<'button', ComboboxClear.State> { + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; + /** + * Whether the component should remain mounted in the DOM when not visible. + * @default false + */ + keepMounted?: boolean; +} + +export namespace ComboboxClear { + export type State = ComboboxClearState; + export type Props = ComboboxClearProps; } diff --git a/packages/react/src/combobox/collection/ComboboxCollection.tsx b/packages/react/src/combobox/collection/ComboboxCollection.tsx index ad54948499..68c6f4bfb3 100644 --- a/packages/react/src/combobox/collection/ComboboxCollection.tsx +++ b/packages/react/src/combobox/collection/ComboboxCollection.tsx @@ -24,8 +24,10 @@ export function ComboboxCollection(props: ComboboxCollection.Props): React.JSX.E return {itemsToRender.map(children)}; } +export interface ComboboxCollectionProps { + children: (item: any, index: number) => React.ReactNode; +} + export namespace ComboboxCollection { - export interface Props { - children: (item: any, index: number) => React.ReactNode; - } + export type Props = ComboboxCollectionProps; } diff --git a/packages/react/src/combobox/empty/ComboboxEmpty.tsx b/packages/react/src/combobox/empty/ComboboxEmpty.tsx index 950882bb91..279cdd520b 100644 --- a/packages/react/src/combobox/empty/ComboboxEmpty.tsx +++ b/packages/react/src/combobox/empty/ComboboxEmpty.tsx @@ -34,8 +34,11 @@ export const ComboboxEmpty = React.forwardRef(function ComboboxEmpty( }); }); -export namespace ComboboxEmpty { - export interface State {} +export interface ComboboxEmptyState {} + +export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmpty.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ComboboxEmpty { + export type State = ComboboxEmptyState; + export type Props = ComboboxEmptyProps; } diff --git a/packages/react/src/combobox/group-label/ComboboxGroupLabel.tsx b/packages/react/src/combobox/group-label/ComboboxGroupLabel.tsx index a741a28093..8a9fc3f71a 100644 --- a/packages/react/src/combobox/group-label/ComboboxGroupLabel.tsx +++ b/packages/react/src/combobox/group-label/ComboboxGroupLabel.tsx @@ -35,8 +35,12 @@ export const ComboboxGroupLabel = React.forwardRef(function ComboboxGroupLabel( return element; }); -export namespace ComboboxGroupLabel { - export interface State {} +export interface ComboboxGroupLabelState {} + +export interface ComboboxGroupLabelProps + extends BaseUIComponentProps<'div', ComboboxGroupLabel.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ComboboxGroupLabel { + export type State = ComboboxGroupLabelState; + export type Props = ComboboxGroupLabelProps; } diff --git a/packages/react/src/combobox/group/ComboboxGroup.tsx b/packages/react/src/combobox/group/ComboboxGroup.tsx index 16fa8eab8e..908d059aec 100644 --- a/packages/react/src/combobox/group/ComboboxGroup.tsx +++ b/packages/react/src/combobox/group/ComboboxGroup.tsx @@ -48,14 +48,17 @@ export const ComboboxGroup = React.forwardRef(function ComboboxGroup( return wrappedElement; }); +export interface ComboboxGroupState {} + +export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> { + /** + * Items to be rendered within this group. + * When provided, child `Collection` components will use these items. + */ + items?: readonly any[]; +} + export namespace ComboboxGroup { - export interface State {} - - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Items to be rendered within this group. - * When provided, child `Collection` components will use these items. - */ - items?: readonly any[]; - } + export type State = ComboboxGroupState; + export type Props = ComboboxGroupProps; } diff --git a/packages/react/src/combobox/icon/ComboboxIcon.tsx b/packages/react/src/combobox/icon/ComboboxIcon.tsx index c398f7e3a7..b89208a69d 100644 --- a/packages/react/src/combobox/icon/ComboboxIcon.tsx +++ b/packages/react/src/combobox/icon/ComboboxIcon.tsx @@ -27,8 +27,11 @@ export const ComboboxIcon = React.forwardRef(function ComboboxIcon( return element; }); -export namespace ComboboxIcon { - export interface State {} +export interface ComboboxIconState {} + +export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {} - export interface Props extends BaseUIComponentProps<'span', State> {} +export namespace ComboboxIcon { + export type State = ComboboxIconState; + export type Props = ComboboxIconProps; } diff --git a/packages/react/src/combobox/index.ts b/packages/react/src/combobox/index.ts index 5ac204a442..6b3d447d34 100644 --- a/packages/react/src/combobox/index.ts +++ b/packages/react/src/combobox/index.ts @@ -1 +1,25 @@ export * as Combobox from './index.parts'; + +export type * from './root/ComboboxRoot'; +export type * from './trigger/ComboboxTrigger'; +export type * from './input/ComboboxInput'; +export type * from './popup/ComboboxPopup'; +export type * from './positioner/ComboboxPositioner'; +export type * from './list/ComboboxList'; +export type * from './item/ComboboxItem'; +export type * from './item-indicator/ComboboxItemIndicator'; +export type * from './value/ComboboxValue'; +export type * from './icon/ComboboxIcon'; +export type * from './arrow/ComboboxArrow'; +export type * from './backdrop/ComboboxBackdrop'; +export type * from './portal/ComboboxPortal'; +export type * from './empty/ComboboxEmpty'; +export type * from './group/ComboboxGroup'; +export type * from './group-label/ComboboxGroupLabel'; +export type * from './row/ComboboxRow'; +export type * from './chips/ComboboxChips'; +export type * from './chip/ComboboxChip'; +export type * from './chip-remove/ComboboxChipRemove'; +export type * from './clear/ComboboxClear'; +export type * from './status/ComboboxStatus'; +export type * from './collection/ComboboxCollection'; diff --git a/packages/react/src/combobox/input/ComboboxInput.tsx b/packages/react/src/combobox/input/ComboboxInput.tsx index a13eeb8821..c0a121416e 100644 --- a/packages/react/src/combobox/input/ComboboxInput.tsx +++ b/packages/react/src/combobox/input/ComboboxInput.tsx @@ -421,19 +421,22 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput( return element; }); -export namespace ComboboxInput { - export interface State extends FieldRoot.State { - /** - * Whether the popup is open. - */ - open: boolean; - } +export interface ComboboxInputState extends FieldRoot.State { + /** + * Whether the popup is open. + */ + open: boolean; +} - export interface Props extends BaseUIComponentProps<'input', State> { - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - } +export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInput.State> { + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; +} + +export namespace ComboboxInput { + export type State = ComboboxInputState; + export type Props = ComboboxInputProps; } diff --git a/packages/react/src/combobox/item-indicator/ComboboxItemIndicator.tsx b/packages/react/src/combobox/item-indicator/ComboboxItemIndicator.tsx index 6a939222be..cc96229b01 100644 --- a/packages/react/src/combobox/item-indicator/ComboboxItemIndicator.tsx +++ b/packages/react/src/combobox/item-indicator/ComboboxItemIndicator.tsx @@ -81,18 +81,22 @@ const Inner = React.memo( ), ); -export namespace ComboboxItemIndicator { - export interface Props extends BaseUIComponentProps<'span', State> { - children?: React.ReactNode; - /** - * Whether to keep the HTML element in the DOM when the item is not selected. - * @default false - */ - keepMounted?: boolean; - } +export interface ComboboxItemIndicatorProps + extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> { + children?: React.ReactNode; + /** + * Whether to keep the HTML element in the DOM when the item is not selected. + * @default false + */ + keepMounted?: boolean; +} - export interface State { - selected: boolean; - transitionStatus: TransitionStatus; - } +export interface ComboboxItemIndicatorState { + selected: boolean; + transitionStatus: TransitionStatus; +} + +export namespace ComboboxItemIndicator { + export type Props = ComboboxItemIndicatorProps; + export type State = ComboboxItemIndicatorState; } diff --git a/packages/react/src/combobox/item/ComboboxItem.tsx b/packages/react/src/combobox/item/ComboboxItem.tsx index 98f419c83f..35d45886f4 100644 --- a/packages/react/src/combobox/item/ComboboxItem.tsx +++ b/packages/react/src/combobox/item/ComboboxItem.tsx @@ -187,44 +187,47 @@ export const ComboboxItem = React.memo( }), ); +export interface ComboboxItemState { + /** + * Whether the item should ignore user interaction. + */ + disabled: boolean; + /** + * Whether the item is selected. + */ + selected: boolean; + /** + * Whether the item is highlighted. + */ + highlighted: boolean; +} + +export interface ComboboxItemProps + extends NonNativeButtonProps, + Omit, 'id'> { + children?: React.ReactNode; + /** + * An optional click handler for the item when selected. + * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus. + */ + onClick?: React.MouseEventHandler; + /** + * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM. + */ + index?: number; + /** + * A unique value that identifies this item. + * @default null + */ + value?: any; + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; +} + export namespace ComboboxItem { - export interface State { - /** - * Whether the item should ignore user interaction. - */ - disabled: boolean; - /** - * Whether the item is selected. - */ - selected: boolean; - /** - * Whether the item is highlighted. - */ - highlighted: boolean; - } - - export interface Props - extends NonNativeButtonProps, - Omit, 'id'> { - children?: React.ReactNode; - /** - * An optional click handler for the item when selected. - * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus. - */ - onClick?: React.MouseEventHandler; - /** - * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM. - */ - index?: number; - /** - * A unique value that identifies this item. - * @default null - */ - value?: any; - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - } + export type State = ComboboxItemState; + export type Props = ComboboxItemProps; } diff --git a/packages/react/src/combobox/list/ComboboxList.tsx b/packages/react/src/combobox/list/ComboboxList.tsx index f398c9d531..f6eb9d13aa 100644 --- a/packages/react/src/combobox/list/ComboboxList.tsx +++ b/packages/react/src/combobox/list/ComboboxList.tsx @@ -130,10 +130,14 @@ export const ComboboxList = React.forwardRef(function ComboboxList( ); }); -export namespace ComboboxList { - export interface State {} +export interface ComboboxListState {} - export interface Props extends Omit, 'children'> { - children?: React.ReactNode | ((item: any, index: number) => React.ReactNode); - } +export interface ComboboxListProps + extends Omit, 'children'> { + children?: React.ReactNode | ((item: any, index: number) => React.ReactNode); +} + +export namespace ComboboxList { + export type State = ComboboxListState; + export type Props = ComboboxListProps; } diff --git a/packages/react/src/combobox/popup/ComboboxPopup.tsx b/packages/react/src/combobox/popup/ComboboxPopup.tsx index 6c3377d16f..8225d9cdbb 100644 --- a/packages/react/src/combobox/popup/ComboboxPopup.tsx +++ b/packages/react/src/combobox/popup/ComboboxPopup.tsx @@ -124,42 +124,45 @@ export const ComboboxPopup = React.forwardRef(function ComboboxPopup( ); }); -export namespace ComboboxPopup { - export interface State { - open: boolean; - side: Side; - align: Align; - anchorHidden: boolean; - transitionStatus: TransitionStatus; - empty: boolean; - } +export interface ComboboxPopupState { + open: boolean; + side: Side; + align: Align; + anchorHidden: boolean; + transitionStatus: TransitionStatus; + empty: boolean; +} - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Determines the element to focus when the popup is opened. - * - * - `false`: Do not move focus. - * - `true`: Move focus based on the default behavior (first tabbable element or popup). - * - `RefObject`: Move focus to the ref element. - * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). - * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. - */ - initialFocus?: - | boolean - | React.RefObject - | ((openType: InteractionType) => void | boolean | HTMLElement | null); - /** - * Determines the element to focus when the popup is closed. - * - * - `false`: Do not move focus. - * - `true`: Move focus based on the default behavior (trigger or previously focused element). - * - `RefObject`: Move focus to the ref element. - * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). - * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. - */ - finalFocus?: - | boolean - | React.RefObject - | ((closeType: InteractionType) => void | boolean | HTMLElement | null); - } +export interface ComboboxPopupProps extends BaseUIComponentProps<'div', ComboboxPopup.State> { + /** + * Determines the element to focus when the popup is opened. + * + * - `false`: Do not move focus. + * - `true`: Move focus based on the default behavior (first tabbable element or popup). + * - `RefObject`: Move focus to the ref element. + * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). + * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. + */ + initialFocus?: + | boolean + | React.RefObject + | ((openType: InteractionType) => void | boolean | HTMLElement | null); + /** + * Determines the element to focus when the popup is closed. + * + * - `false`: Do not move focus. + * - `true`: Move focus based on the default behavior (trigger or previously focused element). + * - `RefObject`: Move focus to the ref element. + * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). + * Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. + */ + finalFocus?: + | boolean + | React.RefObject + | ((closeType: InteractionType) => void | boolean | HTMLElement | null); +} + +export namespace ComboboxPopup { + export type State = ComboboxPopupState; + export type Props = ComboboxPopupProps; } diff --git a/packages/react/src/combobox/portal/ComboboxPortal.tsx b/packages/react/src/combobox/portal/ComboboxPortal.tsx index 3cc58c6f65..c343cb20c8 100644 --- a/packages/react/src/combobox/portal/ComboboxPortal.tsx +++ b/packages/react/src/combobox/portal/ComboboxPortal.tsx @@ -30,17 +30,19 @@ export function ComboboxPortal(props: ComboboxPortal.Props) { ); } +export interface ComboboxPortalProps { + children?: React.ReactNode; + /** + * Whether to keep the portal mounted in the DOM while the popup is hidden. + * @default false + */ + keepMounted?: boolean; + /** + * A parent element to render the portal element into. + */ + container?: HTMLElement | null | React.RefObject; +} + export namespace ComboboxPortal { - export interface Props { - children?: React.ReactNode; - /** - * Whether to keep the portal mounted in the DOM while the popup is hidden. - * @default false - */ - keepMounted?: boolean; - /** - * A parent element to render the portal element into. - */ - container?: HTMLElement | null | React.RefObject; - } + export type Props = ComboboxPortalProps; } diff --git a/packages/react/src/combobox/positioner/ComboboxPositioner.tsx b/packages/react/src/combobox/positioner/ComboboxPositioner.tsx index 1d75f32201..18a5481f2f 100644 --- a/packages/react/src/combobox/positioner/ComboboxPositioner.tsx +++ b/packages/react/src/combobox/positioner/ComboboxPositioner.tsx @@ -156,19 +156,22 @@ export const ComboboxPositioner = React.forwardRef(function ComboboxPositioner( ); }); +export interface ComboboxPositionerState { + /** + * Whether the popup is currently open. + */ + open: boolean; + side: Side; + align: Align; + anchorHidden: boolean; + empty: boolean; +} + +export interface ComboboxPositionerProps + extends useAnchorPositioning.SharedParameters, + BaseUIComponentProps<'div', ComboboxPositioner.State> {} + export namespace ComboboxPositioner { - export interface State { - /** - * Whether the popup is currently open. - */ - open: boolean; - side: Side; - align: Align; - anchorHidden: boolean; - empty: boolean; - } - - export interface Props - extends useAnchorPositioning.SharedParameters, - BaseUIComponentProps<'div', State> {} + export type State = ComboboxPositionerState; + export type Props = ComboboxPositionerProps; } diff --git a/packages/react/src/combobox/root/ComboboxRoot.tsx b/packages/react/src/combobox/root/ComboboxRoot.tsx index de02b9d353..b83676cb06 100644 --- a/packages/react/src/combobox/root/ComboboxRoot.tsx +++ b/packages/react/src/combobox/root/ComboboxRoot.tsx @@ -150,19 +150,30 @@ type ComboboxRootComponentProps = | ComboboxRootControlledProps | ComboboxRootUncontrolledProps; -export namespace ComboboxRoot { - export type Props< - Value, - Multiple extends boolean | undefined = false, - > = ComboboxRootComponentProps; +export type ComboboxRootProps< + Value, + Multiple extends boolean | undefined = false, +> = ComboboxRootComponentProps; - export type State = AriaCombobox.State; +export type ComboboxRootState = AriaCombobox.State; - export type Actions = AriaCombobox.Actions; +export type ComboboxRootActions = AriaCombobox.Actions; - export type ChangeEventReason = AriaCombobox.ChangeEventReason; - export type ChangeEventDetails = AriaCombobox.ChangeEventDetails; +export type ComboboxRootChangeEventReason = AriaCombobox.ChangeEventReason; +export type ComboboxRootChangeEventDetails = AriaCombobox.ChangeEventDetails; - export type HighlightEventReason = AriaCombobox.HighlightEventReason; - export type HighlightEventDetails = AriaCombobox.HighlightEventDetails; +export type ComboboxRootHighlightEventReason = AriaCombobox.HighlightEventReason; +export type ComboboxRootHighlightEventDetails = AriaCombobox.HighlightEventDetails; + +export namespace ComboboxRoot { + export type Props = ComboboxRootProps< + Value, + Multiple + >; + export type State = ComboboxRootState; + export type Actions = ComboboxRootActions; + export type ChangeEventReason = ComboboxRootChangeEventReason; + export type ChangeEventDetails = ComboboxRootChangeEventDetails; + export type HighlightEventReason = ComboboxRootHighlightEventReason; + export type HighlightEventDetails = ComboboxRootHighlightEventDetails; } diff --git a/packages/react/src/combobox/row/ComboboxRow.tsx b/packages/react/src/combobox/row/ComboboxRow.tsx index b05e0d5b8a..6bc25fd5f5 100644 --- a/packages/react/src/combobox/row/ComboboxRow.tsx +++ b/packages/react/src/combobox/row/ComboboxRow.tsx @@ -23,8 +23,11 @@ export const ComboboxRow = React.forwardRef(function ComboboxRow( return {element}; }); -export namespace ComboboxRow { - export interface State {} +export interface ComboboxRowState {} + +export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRow.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ComboboxRow { + export type State = ComboboxRowState; + export type Props = ComboboxRowProps; } diff --git a/packages/react/src/combobox/status/ComboboxStatus.tsx b/packages/react/src/combobox/status/ComboboxStatus.tsx index 7a84327f8f..2187693984 100644 --- a/packages/react/src/combobox/status/ComboboxStatus.tsx +++ b/packages/react/src/combobox/status/ComboboxStatus.tsx @@ -27,8 +27,11 @@ export const ComboboxStatus = React.forwardRef(function ComboboxStatus( }); }); -export namespace ComboboxStatus { - export interface State {} +export interface ComboboxStatusState {} + +export interface ComboboxStatusProps extends BaseUIComponentProps<'div', ComboboxStatus.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ComboboxStatus { + export type State = ComboboxStatusState; + export type Props = ComboboxStatusProps; } diff --git a/packages/react/src/combobox/trigger/ComboboxTrigger.tsx b/packages/react/src/combobox/trigger/ComboboxTrigger.tsx index bc447848d1..887c60643d 100644 --- a/packages/react/src/combobox/trigger/ComboboxTrigger.tsx +++ b/packages/react/src/combobox/trigger/ComboboxTrigger.tsx @@ -175,23 +175,28 @@ export const ComboboxTrigger = React.forwardRef(function ComboboxTrigger( return element; }); -export namespace ComboboxTrigger { - export interface State extends FieldRoot.State { - /** - * Whether the popup is open. - */ - open: boolean; - /** - * Whether the component should ignore user interaction. - */ - disabled: boolean; - } +export interface ComboboxTriggerState extends FieldRoot.State { + /** + * Whether the popup is open. + */ + open: boolean; + /** + * Whether the component should ignore user interaction. + */ + disabled: boolean; +} - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> { - /** - * Whether the component should ignore user interaction. - * @default false - */ - disabled?: boolean; - } +export interface ComboboxTriggerProps + extends NativeButtonProps, + BaseUIComponentProps<'button', ComboboxTrigger.State> { + /** + * Whether the component should ignore user interaction. + * @default false + */ + disabled?: boolean; +} + +export namespace ComboboxTrigger { + export type State = ComboboxTriggerState; + export type Props = ComboboxTriggerProps; } diff --git a/packages/react/src/combobox/value/ComboboxValue.tsx b/packages/react/src/combobox/value/ComboboxValue.tsx index 0190c89cab..1251fb22a7 100644 --- a/packages/react/src/combobox/value/ComboboxValue.tsx +++ b/packages/react/src/combobox/value/ComboboxValue.tsx @@ -31,10 +31,13 @@ export function ComboboxValue(props: ComboboxValue.Props) { return resolveSelectedLabel(selectedValue, items, itemToStringLabel); } -export namespace ComboboxValue { - export interface State {} +export interface ComboboxValueState {} - export interface Props { - children?: React.ReactNode | ((selectedValue: any) => React.ReactNode); - } +export interface ComboboxValueProps { + children?: React.ReactNode | ((selectedValue: any) => React.ReactNode); +} + +export namespace ComboboxValue { + export type State = ComboboxValueState; + export type Props = ComboboxValueProps; } diff --git a/packages/react/src/composite/item/CompositeItem.tsx b/packages/react/src/composite/item/CompositeItem.tsx index 1c6d924cd5..8b39a8dfbd 100644 --- a/packages/react/src/composite/item/CompositeItem.tsx +++ b/packages/react/src/composite/item/CompositeItem.tsx @@ -34,15 +34,20 @@ export function CompositeItem>( }); } +export interface CompositeItemProps> + extends Pick, 'render' | 'className'> { + children?: React.ReactNode; + metadata?: Metadata; + refs?: React.Ref[]; + props?: Array | (() => Record)>; + state?: State; + stateAttributesMapping?: StateAttributesMapping; + tag?: keyof React.JSX.IntrinsicElements; +} + export namespace CompositeItem { - export interface Props> - extends Pick, 'render' | 'className'> { - children?: React.ReactNode; - metadata?: Metadata; - refs?: React.Ref[]; - props?: Array | (() => Record)>; - state?: State; - stateAttributesMapping?: StateAttributesMapping; - tag?: keyof React.JSX.IntrinsicElements; - } + export type Props> = CompositeItemProps< + Metadata, + State + >; } diff --git a/packages/react/src/composite/list/CompositeList.tsx b/packages/react/src/composite/list/CompositeList.tsx index 44d19d289c..c30badfb0a 100644 --- a/packages/react/src/composite/list/CompositeList.tsx +++ b/packages/react/src/composite/list/CompositeList.tsx @@ -166,19 +166,21 @@ function sortByDocumentPosition(a: Element, b: Element) { function disableEslintWarning(_: any) {} +export interface CompositeListProps { + children: React.ReactNode; + /** + * A ref to the list of HTML elements, ordered by their index. + * `useListNavigation`'s `listRef` prop. + */ + elementsRef: React.RefObject>; + /** + * A ref to the list of element labels, ordered by their index. + * `useTypeahead`'s `listRef` prop. + */ + labelsRef?: React.RefObject>; + onMapChange?: (newMap: Map | null>) => void; +} + export namespace CompositeList { - export interface Props { - children: React.ReactNode; - /** - * A ref to the list of HTML elements, ordered by their index. - * `useListNavigation`'s `listRef` prop. - */ - elementsRef: React.RefObject>; - /** - * A ref to the list of element labels, ordered by their index. - * `useTypeahead`'s `listRef` prop. - */ - labelsRef?: React.RefObject>; - onMapChange?: (newMap: Map | null>) => void; - } + export type Props = CompositeListProps; } diff --git a/packages/react/src/composite/root/CompositeRoot.tsx b/packages/react/src/composite/root/CompositeRoot.tsx index dbdba1aa4a..74f5c1e256 100644 --- a/packages/react/src/composite/root/CompositeRoot.tsx +++ b/packages/react/src/composite/root/CompositeRoot.tsx @@ -92,27 +92,32 @@ export function CompositeRoot> + extends Pick, 'render' | 'className' | 'children'> { + props?: Array | (() => Record)>; + state?: State; + stateAttributesMapping?: StateAttributesMapping; + refs?: React.Ref[]; + tag?: keyof React.JSX.IntrinsicElements; + orientation?: 'horizontal' | 'vertical' | 'both'; + cols?: number; + loop?: boolean; + highlightedIndex?: number; + onHighlightedIndexChange?: (index: number) => void; + itemSizes?: Dimensions[]; + dense?: boolean; + enableHomeAndEndKeys?: boolean; + onMapChange?: (newMap: Map | null>) => void; + stopEventPropagation?: boolean; + rootRef?: React.RefObject; + disabledIndices?: number[]; + modifierKeys?: ModifierKey[]; + highlightItemOnHover?: boolean; +} + export namespace CompositeRoot { - export interface Props> - extends Pick, 'render' | 'className' | 'children'> { - props?: Array | (() => Record)>; - state?: State; - stateAttributesMapping?: StateAttributesMapping; - refs?: React.Ref[]; - tag?: keyof React.JSX.IntrinsicElements; - orientation?: 'horizontal' | 'vertical' | 'both'; - cols?: number; - loop?: boolean; - highlightedIndex?: number; - onHighlightedIndexChange?: (index: number) => void; - itemSizes?: Dimensions[]; - dense?: boolean; - enableHomeAndEndKeys?: boolean; - onMapChange?: (newMap: Map | null>) => void; - stopEventPropagation?: boolean; - rootRef?: React.RefObject; - disabledIndices?: number[]; - modifierKeys?: ModifierKey[]; - highlightItemOnHover?: boolean; - } + export type Props> = CompositeRootProps< + Metadata, + State + >; } diff --git a/packages/react/src/context-menu/index.ts b/packages/react/src/context-menu/index.ts index 2e7b002d12..74e0d1717a 100644 --- a/packages/react/src/context-menu/index.ts +++ b/packages/react/src/context-menu/index.ts @@ -1 +1,62 @@ export * as ContextMenu from './index.parts'; + +export type * from './root/ContextMenuRoot'; +export type * from './trigger/ContextMenuTrigger'; + +export type { + MenuBackdropProps as ContextMenuBackdropProps, + MenuBackdropState as ContextMenuBackdropState, +} from '../menu/backdrop/MenuBackdrop'; +export type { MenuPortalProps as ContextMenuPortalProps } from '../menu/portal/MenuPortal'; +export type { + MenuPositionerProps as ContextMenuPositionerProps, + MenuPositionerState as ContextMenuPositionerState, +} from '../menu/positioner/MenuPositioner'; +export type { + MenuPopupProps as ContextMenuPopupProps, + MenuPopupState as ContextMenuPopupState, +} from '../menu/popup/MenuPopup'; +export type { + MenuArrowProps as ContextMenuArrowProps, + MenuArrowState as ContextMenuArrowState, +} from '../menu/arrow/MenuArrow'; +export type { + MenuGroupProps as ContextMenuGroupProps, + MenuGroupState as ContextMenuGroupState, +} from '../menu/group/MenuGroup'; +export type { + MenuGroupLabelProps as ContextMenuGroupLabelProps, + MenuGroupLabelState as ContextMenuGroupLabelState, +} from '../menu/group-label/MenuGroupLabel'; +export type { + MenuItemProps as ContextMenuItemProps, + MenuItemState as ContextMenuItemState, +} from '../menu/item/MenuItem'; +export type { + MenuCheckboxItemProps as ContextMenuCheckboxItemProps, + MenuCheckboxItemState as ContextMenuCheckboxItemState, +} from '../menu/checkbox-item/MenuCheckboxItem'; +export type { + MenuCheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps, + MenuCheckboxItemIndicatorState as ContextMenuCheckboxItemIndicatorState, +} from '../menu/checkbox-item-indicator/MenuCheckboxItemIndicator'; +export type { + MenuRadioGroupProps as ContextMenuRadioGroupProps, + MenuRadioGroupState as ContextMenuRadioGroupState, +} from '../menu/radio-group/MenuRadioGroup'; +export type { + MenuRadioItemProps as ContextMenuRadioItemProps, + MenuRadioItemState as ContextMenuRadioItemState, +} from '../menu/radio-item/MenuRadioItem'; +export type { + MenuRadioItemIndicatorProps as ContextMenuRadioItemIndicatorProps, + MenuRadioItemIndicatorState as ContextMenuRadioItemIndicatorState, +} from '../menu/radio-item-indicator/MenuRadioItemIndicator'; +export type { + MenuSubmenuRootProps as ContextMenuSubmenuRootProps, + MenuSubmenuRootState as ContextMenuSubmenuRootState, +} from '../menu/submenu-root/MenuSubmenuRoot'; +export type { + MenuSubmenuTriggerProps as ContextMenuSubmenuTriggerProps, + MenuSubmenuTriggerState as ContextMenuSubmenuTriggerState, +} from '../menu/submenu-trigger/MenuSubmenuTrigger'; diff --git a/packages/react/src/context-menu/root/ContextMenuRoot.tsx b/packages/react/src/context-menu/root/ContextMenuRoot.tsx index 2d1c38e244..90fc964a4e 100644 --- a/packages/react/src/context-menu/root/ContextMenuRoot.tsx +++ b/packages/react/src/context-menu/root/ContextMenuRoot.tsx @@ -50,20 +50,23 @@ export function ContextMenuRoot(props: ContextMenuRoot.Props) { ); } -export namespace ContextMenuRoot { - export interface State {} +export interface ContextMenuRootState {} + +export interface ContextMenuRootProps + extends Omit { + /** + * Event handler called when the menu is opened or closed. + */ + onOpenChange?: (open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void; +} - export interface Props - extends Omit< - Menu.Root.Props, - 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange' - > { - /** - * Event handler called when the menu is opened or closed. - */ - onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void; - } +export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason; +export type ContextMenuRootChangeEventDetails = + BaseUIChangeEventDetails; - export type ChangeEventReason = MenuRoot.ChangeEventReason; - export type ChangeEventDetails = BaseUIChangeEventDetails; +export namespace ContextMenuRoot { + export type State = ContextMenuRootState; + export type Props = ContextMenuRootProps; + export type ChangeEventReason = ContextMenuRootChangeEventReason; + export type ChangeEventDetails = ContextMenuRootChangeEventDetails; } diff --git a/packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx b/packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx index 8b236d60e8..93b534785e 100644 --- a/packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx +++ b/packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx @@ -172,8 +172,12 @@ export const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger( return element; }); -export namespace ContextMenuTrigger { - export interface State {} +export interface ContextMenuTriggerState {} + +export interface ContextMenuTriggerProps + extends BaseUIComponentProps<'div', ContextMenuTrigger.State> {} - export interface Props extends BaseUIComponentProps<'div', State> {} +export namespace ContextMenuTrigger { + export type State = ContextMenuTriggerState; + export type Props = ContextMenuTriggerProps; } diff --git a/packages/react/src/dialog/backdrop/DialogBackdrop.tsx b/packages/react/src/dialog/backdrop/DialogBackdrop.tsx index 439003156b..44fcc384a8 100644 --- a/packages/react/src/dialog/backdrop/DialogBackdrop.tsx +++ b/packages/react/src/dialog/backdrop/DialogBackdrop.tsx @@ -58,20 +58,23 @@ export const DialogBackdrop = React.forwardRef(function DialogBackdrop( }); }); -export namespace DialogBackdrop { - export interface Props extends BaseUIComponentProps<'div', State> { - /** - * Whether the backdrop is forced to render even when nested. - * @default false - */ - forceRender?: boolean; - } +export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdrop.State> { + /** + * Whether the backdrop is forced to render even when nested. + * @default false + */ + forceRender?: boolean; +} - export interface State { - /** - * Whether the dialog is currently open. - */ - open: boolean; - transitionStatus: TransitionStatus; - } +export interface DialogBackdropState { + /** + * Whether the dialog is currently open. + */ + open: boolean; + transitionStatus: TransitionStatus; +} + +export namespace DialogBackdrop { + export type Props = DialogBackdropProps; + export type State = DialogBackdropState; } diff --git a/packages/react/src/dialog/close/DialogClose.tsx b/packages/react/src/dialog/close/DialogClose.tsx index c2047e8189..aa766bda71 100644 --- a/packages/react/src/dialog/close/DialogClose.tsx +++ b/packages/react/src/dialog/close/DialogClose.tsx @@ -42,13 +42,18 @@ export const DialogClose = React.forwardRef(function DialogClose( }); }); +export interface DialogCloseProps + extends NativeButtonProps, + BaseUIComponentProps<'button', DialogClose.State> {} + +export interface DialogCloseState { + /** + * Whether the button is currently disabled. + */ + disabled: boolean; +} + export namespace DialogClose { - export interface Props extends NativeButtonProps, BaseUIComponentProps<'button', State> {} - - export interface State { - /** - * Whether the button is currently disabled. - */ - disabled: boolean; - } + export type Props = DialogCloseProps; + export type State = DialogCloseState; } diff --git a/packages/react/src/dialog/close/useDialogClose.ts b/packages/react/src/dialog/close/useDialogClose.ts index b38a89c320..b13b330429 100644 --- a/packages/react/src/dialog/close/useDialogClose.ts +++ b/packages/react/src/dialog/close/useDialogClose.ts @@ -29,34 +29,37 @@ export function useDialogClose(params: useDialogClose.Parameters): useDialogClos }; } -export namespace useDialogClose { - export interface Parameters { - /** - * Whether the button is currently disabled. - */ - disabled: boolean; - /** - * Whether the dialog is currently open. - */ - open: boolean; - /** - * Event handler called when the dialog is opened or closed. - */ - setOpen: (open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void; - /** - * Whether the component renders a native `