[infra] Add support for automatic generation of data-attributes API

docs/data/api/collapsible-trigger.json

@@ -7,6 +7,9 @@
   "imports": [
     "import { Collapsible } from '@base-ui-components/react/collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
   ],
+  "dataAttributes": {
+    "data-panel-open": { "description": "Indicates whether the collapsible panel is opened." }
+  },
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

docs/data/translations/api-docs/collapsible-trigger/collapsible-trigger.json

@@ -6,5 +6,8 @@
     },
     "render": { "description": "A function to customize rendering of the component." }
   },
-  "classDescriptions": {}
+  "classDescriptions": {},
+  "dataAttributesDescriptions": {
+    "data-panel-open": "Indicates whether the collapsible panel is opened."
+  }
 }

docs/reference/generated/collapsible-trigger.json

@@ -10,5 +10,10 @@
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "A function to customize rendering of the component."
     }
+  },
+  "dataAttributes": {
+    "data-panel-open": {
+      "description": "Indicates whether the collapsible panel is opened."
+    }
   }
 }

docs/reference/generated/dialog-backdrop.json

@@ -21,17 +21,17 @@
       "description": "A function to customize rendering of the component."
     }
   },
-  "attributes": {
-    "[data-open]": {
+  "dataAttributes": {
+    "data-open": {
       "description": "Present when the dialog is open."
     },
-    "[data-closed]": {
+    "data-closed": {
       "description": "Present when the dialog is closed."
     },
-    "[data-starting-style]": {
+    "data-starting-style": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-ending-style]": {
+    "data-ending-style": {
       "description": "Present when the dialog is animating out."
     }
   }

docs/reference/generated/dialog-popup.json

@@ -28,23 +28,23 @@
       "description": "A function to customize rendering of the component."
     }
   },
-  "attributes": {
-    "[data-open]": {
+  "dataAttributes": {
+    "data-open": {
       "description": "Present when the dialog is open."
     },
-    "[data-closed]": {
+    "data-closed": {
       "description": "Present when the dialog is closed."
     },
-    "[data-starting-style]": {
+    "data-starting-style": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-ending-style]": {
+    "data-ending-style": {
       "description": "Present when the dialog is animating out."
     },
-    "[data-modal]": {
+    "data-modal": {
       "description": "Present when the dialog is modal."
     },
-    "[data-nested-dialogs]": {
+    "data-nested-dialogs": {
       "type": "number",
       "description": "Indicates how many dialogs are nested within."
     }

docs/reference/generated/dialog-trigger.json

@@ -11,11 +11,11 @@
       "description": "A function to customize rendering of the component."
     }
   },
-  "attributes": {
-    "[data-modal]": {
+  "dataAttributes": {
+    "data-modal": {
       "description": "Present when the corresponding dialog is modal."
     },
-    "[data-popup-open]": {
+    "data-popup-open": {
       "description": "Present when the corresponding dialog is open."
     }
   }

docs/reference/overrides/dialog-backdrop.json

@@ -1,16 +1,16 @@
 {
   "name": "DialogBackdrop",
-  "attributes": {
-    "[data-open]": {
+  "dataAttributes": {
+    "data-open": {
       "description": "Present when the dialog is open."
     },
-    "[data-closed]": {
+    "data-closed": {
       "description": "Present when the dialog is closed."
     },
-    "[data-starting-style]": {
+    "data-starting-style": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-ending-style]": {
+    "data-ending-style": {
       "description": "Present when the dialog is animating out."
     }
   }

docs/reference/overrides/dialog-popup.json

@@ -1,22 +1,22 @@
 {
   "name": "DialogPopup",
-  "attributes": {
-    "[data-open]": {
+  "dataAttributes": {
+    "data-open": {
       "description": "Present when the dialog is open."
     },
-    "[data-closed]": {
+    "data-closed": {
       "description": "Present when the dialog is closed."
     },
-    "[data-starting-style]": {
+    "data-starting-style": {
       "description": "Present when the dialog is animating in."
     },
-    "[data-ending-style]": {
+    "data-ending-style": {
       "description": "Present when the dialog is animating out."
     },
-    "[data-modal]": {
+    "data-modal": {
       "description": "Present when the dialog is modal."
     },
-    "[data-nested-dialogs]": {
+    "data-nested-dialogs": {
       "type": "number",
       "description": "Indicates how many dialogs are nested within."
     }

docs/reference/overrides/dialog-trigger.json

@@ -1,10 +1,10 @@
 {
   "name": "DialogTrigger",
-  "attributes": {
-    "[data-modal]": {
+  "dataAttributes": {
+    "data-modal": {
       "description": "Present when the corresponding dialog is modal."
     },
-    "[data-popup-open]": {
+    "data-popup-open": {
       "description": "Present when the corresponding dialog is open."
     }
   }

docs/src/components/reference/AttributesTable.tsx

@@ -38,10 +38,12 @@ export async function AttributesTable({ data, ...props }: AttributesTableProps)
             useMDXComponents: () => inlineMdxComponents,
           });
 
+          const attributeName = name.startsWith('[') ? name : `[${name}]`;
+
           return (
             <Table.Row key={name}>
               <Table.RowHeader>
-                <Code className="text-navy">{name}</Code>
+                <Code className="text-navy">{attributeName}</Code>
               </Table.RowHeader>
               <Table.Cell>
                 <AttributeType />

docs/src/components/reference/rehypeReference.mjs

@@ -94,11 +94,11 @@ export function rehypeReference() {
             }),
           );
 
-          if (def.attributes) {
+          if (def.dataAttributes) {
             subtree.push(
               createMdxElement({
                 name: ATTRIBUTES_TABLE,
-                props: { data: def.attributes },
+                props: { data: def.dataAttributes },
               }),
             );
           }

docs/src/components/reference/types.ts

@@ -2,7 +2,7 @@ export interface ComponentDef {
   name: string;
   description?: string;
   props: Record<string, PropDef>;
-  attributes?: Record<string, AttributeDef>;
+  dataAttributes?: Record<string, AttributeDef>;
   cssVariables?: Record<string, CssVariableDef>;
 }
 

package.json

@@ -78,7 +78,7 @@
     "@mui/internal-markdown": "^1.0.22",
     "@mui/internal-scripts": "^1.0.29",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
-    "@mui/monorepo": "github:mui/material-ui#v6.1.10",
+    "@mui/monorepo": "github:mui/material-ui#0eafaa04fa68500cc820076fcf9f7299f28ece5d",
     "@next/eslint-plugin-next": "^14.2.18",
     "@octokit/rest": "^20.1.1",
     "@playwright/test": "1.49.0",

packages/react/src/collapsible/trigger/CollapsibleTriggerDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum CollapsibleTriggerDataAttributes {
+  /**
+   * Indicates whether the collapsible panel is opened.
+   */
+  panelOpen = 'data-panel-open',
+}

scripts/buildApiDocs/buildReference.ts

@@ -81,17 +81,20 @@ export async function buildReference() {
       console.warn(`Missing component description: ${componentData.name}`);
     }
 
-    const attributes = componentOverrides?.attributes;
+    const dataAttributes =
+      !!componentData?.dataAttributes || !!componentOverrides?.dataAttributes
+        ? { ...componentData?.dataAttributes, ...componentOverrides?.dataAttributes }
+        : undefined;
     const cssVariables =
-      !!componentData?.cssVariables || componentOverrides?.cssVariables
+      !!componentData?.cssVariables || !!componentOverrides?.cssVariables
         ? { ...componentData?.cssVariables, ...componentOverrides?.cssVariables }
         : undefined;
 
     const json: ComponentDef = {
       name: componentData.name,
       description: descriptionData.componentDescription,
       props,
-      attributes,
+      dataAttributes,
       cssVariables,
     };