[accordion] New Accordion components and hooks (#577)

Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michał Dudak <[email protected]> Co-authored-by: atomiks <[email protected]>
mui · Oct 29, 2024 · 8054a85 · 8054a85
1 parent dd67366
commit 8054a85
Show file tree

Hide file tree

Showing 118 changed files with 4,308 additions and 1,335 deletions.
diff --git a/docs/data/api/accordion-header.json b/docs/data/api/accordion-header.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": "AccordionHeader",
+  "imports": [
+    "import { Accordion } from '@base_ui/react/Accordion';\nconst AccordionHeader = Accordion.Header;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionHeader",
+  "forwardsRefTo": "HTMLHeadingElement",
+  "filename": "/packages/mui-base/src/Accordion/Header/AccordionHeader.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-heading.json b/docs/data/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 { 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=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-item.json b/docs/data/api/accordion-item.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": "AccordionItem",
+  "imports": [
+    "import { Accordion } from '@base_ui/react/Accordion';\nconst AccordionItem = Accordion.Item;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "AccordionItem",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Accordion/Item/AccordionItem.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-panel.json b/docs/data/api/accordion-panel.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "AccordionPanel",
+  "imports": [
+    "import { 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=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-root.json b/docs/data/api/accordion-root.json
@@ -0,0 +1,31 @@
+{
+  "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" },
+    "loop": { "type": { "name": "bool" }, "default": "true" },
+    "onValueChange": { "type": { "name": "func" } },
+    "openMultiple": { "type": { "name": "bool" }, "default": "true" },
+    "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 { 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=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-section.json b/docs/data/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 { 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=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/accordion-trigger.json b/docs/data/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 { 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=\"/components/react-accordion/\">Accordion</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/collapsible-content.json b/docs/data/api/collapsible-content.json
@@ -1,10 +1,7 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "htmlHidden": {
-      "type": { "name": "enum", "description": "'hidden'<br>&#124;&nbsp;'until-found'" },
-      "default": "'hidden'"
-    },
+    "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "CollapsibleContent",

diff --git a/docs/data/api/collapsible-panel.json b/docs/data/api/collapsible-panel.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "CollapsiblePanel",
+  "imports": [
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsiblePanel = Collapsible.Panel;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CollapsiblePanel",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/use-accordion-root.json b/docs/data/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>"
+}
diff --git a/docs/data/components/accordion/UnstyledAccordionIntroduction.js b/docs/data/components/accordion/UnstyledAccordionIntroduction.js
@@ -0,0 +1,61 @@
+'use client';
+import * as React from 'react';
+import { Accordion } from '@base_ui/react/Accordion';
+import classes from './styles.module.css';
+
+export default function UnstyledAccordionIntroduction() {
+  return (
+    <div className={classes.demo}>
+      <Accordion.Root className={classes.root} aria-label="Base UI Accordion">
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 1</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 1
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 2</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 2
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 3</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 3
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}
+
+function ExpandMoreIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/docs/data/components/accordion/UnstyledAccordionIntroduction.tsx b/docs/data/components/accordion/UnstyledAccordionIntroduction.tsx
@@ -0,0 +1,61 @@
+'use client';
+import * as React from 'react';
+import { Accordion } from '@base_ui/react/Accordion';
+import classes from './styles.module.css';
+
+export default function UnstyledAccordionIntroduction() {
+  return (
+    <div className={classes.demo}>
+      <Accordion.Root className={classes.root} aria-label="Base UI Accordion">
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 1</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 1
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 2</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 2
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item className={classes.item}>
+          <Accordion.Header className={classes.header}>
+            <Accordion.Trigger className={classes.trigger}>
+              <span className={classes.triggerText}>Trigger 3</span>
+              <ExpandMoreIcon />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className={classes.panel}>
+            This is the contents of Accordion.Panel 3
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}
+
+function ExpandMoreIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
+    </svg>
+  );
+}