[all components] Fix type portability (#2912)

Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>

Author: atomiks

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