Add Collapsible components and hooks

docs/data/base/components/collapsible/collapsible.md

@@ -0,0 +1,56 @@
+---
+productId: base-ui
+title: React Collapsible components
+components: CollapsibleRoot, CollapsibleTrigger, CollapsibleContent
+hooks: useCollapsibleRoot, useCollapsibleTrigger, useCollapsibleContent
+githubLabel: 'component: collapsible'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+packageName: '@base_ui/react'
+---
+
+# Collapsible
+
+<p class="description">Collapsible is a component that shows or hides content.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Installation
+
+Base UI components are all available as a single package.
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @base_ui/react
+```
+
+```bash yarn
+yarn add @base_ui/react
+```
+
+```bash pnpm
+pnpm add @base_ui/react
+```
+
+</codeblock>
+
+Once you have the package installed, import the component.
+
+```ts
+import * as Collapsible from '@base_ui/react/Collapsible';
+```
+
+## Anatomy
+
+- `<Collapsible.Root />` is a top-level component that facilitates communication between other components. It does not render to the DOM.
+- `<Collapsible.Trigger />` is the trigger element, a `<button>` by default, that toggles the open/closed state of the content
+- `<Collapsible.Content />` is component that contains the Collapsible's content
+
+```tsx
+<Collapsible.Root>
+  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+  <Collapsible.Content>This is the content</Collapsible.Content>
+</Collapsible.Root>
+```

docs/data/base/pages.ts

@@ -39,6 +39,7 @@ const pages: readonly MuiPage[] = [
         pathname: '/base-ui/components/data-display',
         subheader: 'data-display',
         children: [
+          { pathname: '/base-ui/react-collapsible', title: 'Collapsible' },
           { pathname: '/base-ui/react-popover', title: 'Popover' },
           { pathname: '/base-ui/react-tooltip', title: 'Tooltip' },
         ],

docs/data/base/pagesApi.js

@@ -42,6 +42,18 @@ module.exports = [
       '/base-ui/react-click-away-listener/components-api/#click-away-listener',
     title: 'ClickAwayListener',
   },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-content',
+    title: 'CollapsibleContent',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-root',
+    title: 'CollapsibleRoot',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-trigger',
+    title: 'CollapsibleTrigger',
+  },
   {
     pathname: '/base-ui/react-transitions/components-api/#css-animation',
     title: 'CssAnimation',
@@ -256,6 +268,18 @@ module.exports = [
     pathname: '/base-ui/react-checkbox/hooks-api/#use-checkbox-root',
     title: 'useCheckboxRoot',
   },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-content',
+    title: 'useCollapsibleContent',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-root',
+    title: 'useCollapsibleRoot',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-trigger',
+    title: 'useCollapsibleTrigger',
+  },
   {
     pathname: '/base-ui/react-dialog/hooks-api/#use-dialog-close',
     title: 'useDialogClose',

docs/pages/base-ui/api/collapsible-content.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": "CollapsibleContent",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CollapsibleContent",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}

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

@@ -0,0 +1,20 @@
+{
+  "props": {
+    "defaultOpen": { "type": { "name": "bool" }, "default": "true" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onOpenChange": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } }
+  },
+  "name": "CollapsibleRoot",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "CollapsibleRoot",
+  "filename": "/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/collapsible-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": "CollapsibleTrigger",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CollapsibleTrigger",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/base-ui/api/use-collapsible-content.json

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

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

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

docs/pages/base-ui/api/use-collapsible-trigger.json

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

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

@@ -0,0 +1,96 @@
+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/collapsible/collapsible.md?@mui/markdown';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import CollapsibleContentApiJsonPageContent from '../../api/collapsible-content.json';
+import CollapsibleRootApiJsonPageContent from '../../api/collapsible-root.json';
+import CollapsibleTriggerApiJsonPageContent from '../../api/collapsible-trigger.json';
+import useCollapsibleContentApiJsonPageContent from '../../api/use-collapsible-content.json';
+import useCollapsibleRootApiJsonPageContent from '../../api/use-collapsible-root.json';
+import useCollapsibleTriggerApiJsonPageContent from '../../api/use-collapsible-trigger.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 CollapsibleContentApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-content',
+    false,
+    /\.\/collapsible-content.*.json$/,
+  );
+  const CollapsibleContentApiDescriptions = mapApiPageTranslations(CollapsibleContentApiReq);
+
+  const CollapsibleRootApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-root',
+    false,
+    /\.\/collapsible-root.*.json$/,
+  );
+  const CollapsibleRootApiDescriptions = mapApiPageTranslations(CollapsibleRootApiReq);
+
+  const CollapsibleTriggerApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-trigger',
+    false,
+    /\.\/collapsible-trigger.*.json$/,
+  );
+  const CollapsibleTriggerApiDescriptions = mapApiPageTranslations(CollapsibleTriggerApiReq);
+
+  const useCollapsibleContentApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-content',
+    false,
+    /\.\/use-collapsible-content.*.json$/,
+  );
+  const useCollapsibleContentApiDescriptions = mapApiPageTranslations(useCollapsibleContentApiReq);
+
+  const useCollapsibleRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-root',
+    false,
+    /\.\/use-collapsible-root.*.json$/,
+  );
+  const useCollapsibleRootApiDescriptions = mapApiPageTranslations(useCollapsibleRootApiReq);
+
+  const useCollapsibleTriggerApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-trigger',
+    false,
+    /\.\/use-collapsible-trigger.*.json$/,
+  );
+  const useCollapsibleTriggerApiDescriptions = mapApiPageTranslations(useCollapsibleTriggerApiReq);
+
+  return {
+    props: {
+      componentsApiDescriptions: {
+        CollapsibleContent: CollapsibleContentApiDescriptions,
+        CollapsibleRoot: CollapsibleRootApiDescriptions,
+        CollapsibleTrigger: CollapsibleTriggerApiDescriptions,
+      },
+      componentsApiPageContents: {
+        CollapsibleContent: CollapsibleContentApiJsonPageContent,
+        CollapsibleRoot: CollapsibleRootApiJsonPageContent,
+        CollapsibleTrigger: CollapsibleTriggerApiJsonPageContent,
+      },
+      hooksApiDescriptions: {
+        useCollapsibleContent: useCollapsibleContentApiDescriptions,
+        useCollapsibleRoot: useCollapsibleRootApiDescriptions,
+        useCollapsibleTrigger: useCollapsibleTriggerApiDescriptions,
+      },
+      hooksApiPageContents: {
+        useCollapsibleContent: useCollapsibleContentApiJsonPageContent,
+        useCollapsibleRoot: useCollapsibleRootApiJsonPageContent,
+        useCollapsibleTrigger: useCollapsibleTriggerApiJsonPageContent,
+      },
+    },
+  };
+};

docs/pages/base-ui/react-collapsible/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/collapsible/collapsible.md?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};