From 1e306e28e0aa675cedfeb8c927dac5f182a031f6 Mon Sep 17 00:00:00 2001 From: dav-is Date: Tue, 7 Oct 2025 15:32:23 -0400 Subject: [PATCH 001/130] Begin migration to new typegen infra --- docs/next.config.mjs | 23 +++ docs/package.json | 1 + .../react/components/accordion/page.mdx | 28 +++- .../react/components/accordion/types.md | 119 +++++++++++++++ .../react/components/accordion/types.ts | 10 ++ .../react/components/checkbox/page.mdx | 10 +- .../react/components/checkbox/types.ts | 7 + .../ReferenceTable/ReferenceTable.tsx | 57 ++++++++ docs/src/utils/createTypes.ts | 26 ++++ .../src/accordion/header/AccordionHeader.tsx | 1 + .../src/accordion/item/AccordionItem.tsx | 1 + .../src/accordion/panel/AccordionPanel.tsx | 1 + .../src/accordion/root/AccordionRoot.tsx | 1 + .../accordion/trigger/AccordionTrigger.tsx | 1 + .../checkbox/indicator/CheckboxIndicator.tsx | 1 + .../react/src/checkbox/root/CheckboxRoot.tsx | 1 + pnpm-lock.yaml | 137 +++++++++++++++++- 17 files changed, 420 insertions(+), 5 deletions(-) create mode 100644 docs/src/app/(public)/(content)/react/components/accordion/types.md create mode 100644 docs/src/app/(public)/(content)/react/components/accordion/types.ts create mode 100644 docs/src/app/(public)/(content)/react/components/checkbox/types.ts create mode 100644 docs/src/components/ReferenceTable/ReferenceTable.tsx create mode 100644 docs/src/utils/createTypes.ts diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 663e84bd868..9636b44e75c 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -50,6 +50,29 @@ const rootPackage = loadPackageJson(); const nextConfig = { trailingSlash: false, pageExtensions: ['mdx', 'tsx'], + turbopack: { + rules: { + './app/**/types.ts': { + as: '*.ts', + loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedTypesMeta'], + }, + }, + }, + webpack: (config, { defaultLoaders }) => { + // for production builds + config.module.rules.push({ + test: /\/types\.ts$/, + use: [ + defaultLoaders.babel, + { + loader: '@mui/internal-docs-infra/pipeline/loadPrecomputedTypesMeta', + options: { performance: { logging: true } }, + }, + ], + }); + + return config; + }, env: { // docs-infra LIB_VERSION: rootPackage.version, diff --git a/docs/package.json b/docs/package.json index 8e416be4ea1..33c8b7dccd5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,6 +21,7 @@ "@emotion/styled": "^11.14.1", "@mdx-js/loader": "^3.1.1", "@mdx-js/react": "^3.1.1", + "@mui/internal-docs-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-docs-infra@e0b3427", "@next/mdx": "^15.5.3", "@react-spring/web": "^10.0.3", "@stefanprobst/rehype-extract-toc": "^3.0.0", diff --git a/docs/src/app/(public)/(content)/react/components/accordion/page.mdx b/docs/src/app/(public)/(content)/react/components/accordion/page.mdx index 9fb894cf13f..621de2b0030 100644 --- a/docs/src/app/(public)/(content)/react/components/accordion/page.mdx +++ b/docs/src/app/(public)/(content)/react/components/accordion/page.mdx @@ -27,4 +27,30 @@ import { Accordion } from '@base-ui-components/react/accordion'; ## API reference - +import { + TypesAccordionRoot, + TypesAccordionItem, + TypesAccordionHeader, + TypesAccordionTrigger, + TypesAccordionPanel, +} from './types'; + +### Root + + + +### Item + + + +### Header + + + +### Trigger + + + +### Panel + + diff --git a/docs/src/app/(public)/(content)/react/components/accordion/types.md b/docs/src/app/(public)/(content)/react/components/accordion/types.md new file mode 100644 index 00000000000..964c25f7dc6 --- /dev/null +++ b/docs/src/app/(public)/(content)/react/components/accordion/types.md @@ -0,0 +1,119 @@ +# Accordion + +[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly)' + +## Root + +Groups all parts of the accordion. +Renders a `
` element. + +**Root Props:** + +| Prop | Type | Default | Description | +| :--------------- | :---------------------------------------------------------------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| defaultValue | `any[]` | - | The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the \`value\` prop instead. | +| value | `any[]` | - | The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the \`defaultValue\` prop instead. | +| onValueChange | `((value: any[], eventDetails: Accordion.Root.ChangeEventDetails) => void)` | - | Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument. | +| hiddenUntilFound | `boolean` | `false` | 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. | +| multiple | `boolean` | `true` | Whether multiple items can be open at the same time. | +| disabled | `boolean` | `false` | Whether the component should ignore user interaction. | +| loop | `boolean` | `true` | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. | +| orientation | `Orientation` | `'vertical'` | The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys. | +| className | `string \| ((state: Accordion.Root.State) => string)` | - | CSS class applied to the element, or a function that returns a class based on the component’s state. | +| keepMounted | `boolean` | `false` | Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used. | +| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Root.State) => ReactElement)` | - | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a \`ReactElement\` or a function that returns the element to render. | + +**Root Data Attributes:** + +| Attribute | Type | Description | +| :--------------- | :--- | :------------------------------------------ | +| data-orientation | - | Indicates the orientation of the accordion. | +| data-disabled | - | Present when the accordion is disabled. | + +## Item + +Groups an accordion header with the corresponding panel. +Renders a `
` element. + +**Item Props:** + +| 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. | +| 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. | +| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)` | - | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a \`ReactElement\` or a function that returns the element to render. | + +**Item Data Attributes:** + +| Attribute | Type | Description | +| :------------ | :------- | :------------------------------------------- | +| data-open | - | Present when the accordion item is open. | +| data-disabled | - | Present when the accordion item is disabled. | +| data-index | `number` | Indicates the index of the accordion item. | + +## Header + +A heading that labels the corresponding panel. +Renders an `

` element. + +**Header Props:** + +| Prop | Type | Default | Description | +| :-------- | :---------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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. | +| render | `ReactElement \| ((props: HTMLProps, state: Accordion.Item.State) => ReactElement)` | - | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a \`ReactElement\` or a function that returns the element to render. | + +**Header Data Attributes:** + +| Attribute | Type | Description | +| :------------ | :------- | :------------------------------------------- | +| data-open | - | Present when the accordion item is open. | +| data-disabled | - | Present when the accordion item is disabled. | +| data-index | `number` | Indicates the index of the accordion item. | + +## Trigger + +A button that opens and closes the corresponding panel. +Renders a `