[all components] Fix type portability

.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

.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

docs/reference/generated/accordion-item.json

@@ -3,7 +3,7 @@
   "description": "Groups an accordion header with the corresponding panel.\nRenders a `<div>` 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<Accordion.Root value={['a']}>\n  <Accordion.Item value=\"a\" /> // initially open\n  <Accordion.Item value=\"b\" /> // initially closed\n</Accordion.Root>\n```"
     },

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)",

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)",

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)",

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": {

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",

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",

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)",

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)",

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<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\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",

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)",

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<Field.Validity>\n  {(validity) => {\n    return <div>...</div>\n  }}\n</Field.Validity>\n```",
-      "detailedType": "(state: FieldValidityState) => ReactNode"
+      "detailedType": "(state: Field.Validity.State) => ReactNode"
     }
   },
   "dataAttributes": {},

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)",

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<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\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",

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<HTMLElement>",

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<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\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",

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)",

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)",

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)",

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)",

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<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\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",

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": {

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": {

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)",

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)",

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<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\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",