New Accordion hooks and components

docs/data/base/components/accordion/accordion.md

@@ -0,0 +1,13 @@
+---
+productId: base-ui
+title: React Accordion components
+components: AccordionRoot, AccordionSection, AccordionHeading, AccordionTrigger, AccordionPanel
+hooks: useAccordionRoot
+githubLabel: 'component: accordion'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+packageName: '@base_ui/react'
+---
+
+# Accordion
+
+<p class="description">Accordion is a stacked set of interactive headings that each reveal an associated section of content.</p>

docs/data/base/pages.ts

@@ -34,6 +34,7 @@ const pages: readonly MuiPage[] = [
         pathname: '/base-ui/components/data-display',
         subheader: 'data-display',
         children: [
+          { pathname: '/base-ui/react-accordion', title: 'Accordion' },
           { pathname: '/base-ui/react-collapsible', title: 'Collapsible' },
           { pathname: '/base-ui/react-popover', title: 'Popover' },
           { pathname: '/base-ui/react-preview-card', title: 'Preview Card' },

docs/data/base/pagesApi.js

@@ -1,4 +1,24 @@
 module.exports = [
+  {
+    pathname: '/base-ui/react-accordion/components-api/#accordion-heading',
+    title: 'AccordionHeading',
+  },
+  {
+    pathname: '/base-ui/react-accordion/components-api/#accordion-panel',
+    title: 'AccordionPanel',
+  },
+  {
+    pathname: '/base-ui/react-accordion/components-api/#accordion-root',
+    title: 'AccordionRoot',
+  },
+  {
+    pathname: '/base-ui/react-accordion/components-api/#accordion-section',
+    title: 'AccordionSection',
+  },
+  {
+    pathname: '/base-ui/react-accordion/components-api/#accordion-trigger',
+    title: 'AccordionTrigger',
+  },
   {
     pathname: '/base-ui/react-alert-dialog/components-api/#alert-dialog-backdrop',
     title: 'AlertDialogBackdrop',
@@ -334,6 +354,10 @@ module.exports = [
     pathname: '/base-ui/react-tooltip/components-api/#tooltip-trigger',
     title: 'TooltipTrigger',
   },
+  {
+    pathname: '/base-ui/react-accordion/hooks-api/#use-accordion-root',
+    title: 'useAccordionRoot',
+  },
   {
     pathname: '/base-ui/react-autocomplete/hooks-api/#use-autocomplete',
     title: 'useAutocomplete',

docs/pages/base-ui/api/accordion-heading.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "AccordionHeading",
+  "imports": [
+    "import * as Accordion from '@base_ui/react/Accordion';\nconst AccordionHeading = Accordion.Heading;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionHeading",
+  "forwardsRefTo": "HTMLHeadingElement",
+  "filename": "/packages/mui-base/src/Accordion/Heading/AccordionHeading.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/accordion-panel.json

@@ -0,0 +1,23 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "htmlHidden": {
+      "type": { "name": "enum", "description": "'hidden'<br>&#124;&nbsp;'until-found'" },
+      "default": "'hidden'"
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "AccordionPanel",
+  "imports": [
+    "import * as Accordion from '@base_ui/react/Accordion';\nconst AccordionPanel = Accordion.Panel;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionPanel",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/accordion-root.json

@@ -0,0 +1,29 @@
+{
+  "props": {
+    "animated": { "type": { "name": "bool" }, "default": "true" },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultValue": {
+      "type": { "name": "arrayOf", "description": "Array&lt;number<br>&#124;&nbsp;string&gt;" },
+      "default": "0"
+    },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onOpenChange": { "type": { "name": "func" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "value": {
+      "type": { "name": "arrayOf", "description": "Array&lt;number<br>&#124;&nbsp;string&gt;" }
+    }
+  },
+  "name": "AccordionRoot",
+  "imports": [
+    "import * as Accordion from '@base_ui/react/Accordion';\nconst AccordionRoot = Accordion.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/accordion-section.json

@@ -0,0 +1,21 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onOpenChange": { "type": { "name": "func" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "AccordionSection",
+  "imports": [
+    "import * as Accordion from '@base_ui/react/Accordion';\nconst AccordionSection = Accordion.Section;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionSection",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Accordion/Section/AccordionSection.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/accordion-trigger.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "AccordionTrigger",
+  "imports": [
+    "import * as Accordion from '@base_ui/react/Accordion';\nconst AccordionTrigger = Accordion.Trigger;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionTrigger",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/use-accordion-root.json

@@ -0,0 +1,8 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useAccordionRoot",
+  "filename": "/packages/mui-base/src/Accordion/Root/useAccordionRoot.ts",
+  "imports": ["import { useAccordionRoot } from '@base_ui/react/Accordion';"],
+  "demos": "<ul><li><a href=\"/base-ui/react-accordion/#hook\">Accordion</a></li></ul>"
+}

docs/pages/base-ui/react-accordion/[docsTab]/index.js

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/accordion/accordion.md?@mui/markdown';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import AccordionHeadingApiJsonPageContent from '../../api/accordion-heading.json';
+import AccordionPanelApiJsonPageContent from '../../api/accordion-panel.json';
+import AccordionRootApiJsonPageContent from '../../api/accordion-root.json';
+import AccordionSectionApiJsonPageContent from '../../api/accordion-section.json';
+import AccordionTriggerApiJsonPageContent from '../../api/accordion-trigger.json';
+import useAccordionRootApiJsonPageContent from '../../api/use-accordion-root.json';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
+
+export const getStaticPaths = () => {
+  return {
+    paths: [{ params: { docsTab: 'components-api' } }, { params: { docsTab: 'hooks-api' } }],
+    fallback: false, // can also be true or 'blocking'
+  };
+};
+
+export const getStaticProps = () => {
+  const AccordionHeadingApiReq = require.context(
+    'docs-base/translations/api-docs/accordion-heading',
+    false,
+    /\.\/accordion-heading.*.json$/,
+  );
+  const AccordionHeadingApiDescriptions = mapApiPageTranslations(AccordionHeadingApiReq);
+
+  const AccordionPanelApiReq = require.context(
+    'docs-base/translations/api-docs/accordion-panel',
+    false,
+    /\.\/accordion-panel.*.json$/,
+  );
+  const AccordionPanelApiDescriptions = mapApiPageTranslations(AccordionPanelApiReq);
+
+  const AccordionRootApiReq = require.context(
+    'docs-base/translations/api-docs/accordion-root',
+    false,
+    /\.\/accordion-root.*.json$/,
+  );
+  const AccordionRootApiDescriptions = mapApiPageTranslations(AccordionRootApiReq);
+
+  const AccordionSectionApiReq = require.context(
+    'docs-base/translations/api-docs/accordion-section',
+    false,
+    /\.\/accordion-section.*.json$/,
+  );
+  const AccordionSectionApiDescriptions = mapApiPageTranslations(AccordionSectionApiReq);
+
+  const AccordionTriggerApiReq = require.context(
+    'docs-base/translations/api-docs/accordion-trigger',
+    false,
+    /\.\/accordion-trigger.*.json$/,
+  );
+  const AccordionTriggerApiDescriptions = mapApiPageTranslations(AccordionTriggerApiReq);
+
+  const useAccordionRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-accordion-root',
+    false,
+    /\.\/use-accordion-root.*.json$/,
+  );
+  const useAccordionRootApiDescriptions = mapApiPageTranslations(useAccordionRootApiReq);
+
+  return {
+    props: {
+      componentsApiDescriptions: {
+        AccordionHeading: AccordionHeadingApiDescriptions,
+        AccordionPanel: AccordionPanelApiDescriptions,
+        AccordionRoot: AccordionRootApiDescriptions,
+        AccordionSection: AccordionSectionApiDescriptions,
+        AccordionTrigger: AccordionTriggerApiDescriptions,
+      },
+      componentsApiPageContents: {
+        AccordionHeading: AccordionHeadingApiJsonPageContent,
+        AccordionPanel: AccordionPanelApiJsonPageContent,
+        AccordionRoot: AccordionRootApiJsonPageContent,
+        AccordionSection: AccordionSectionApiJsonPageContent,
+        AccordionTrigger: AccordionTriggerApiJsonPageContent,
+      },
+      hooksApiDescriptions: { useAccordionRoot: useAccordionRootApiDescriptions },
+      hooksApiPageContents: { useAccordionRoot: useAccordionRootApiJsonPageContent },
+    },
+  };
+};

docs/pages/base-ui/react-accordion/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/accordion/accordion.md?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};