From c1faf158b15409872940923c109acb964fd0e75b Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Wed, 6 Nov 2024 17:22:17 +0800 Subject: [PATCH 01/14] Add keepMounted prop to Collapsible --- docs/data/api/collapsible-panel.json | 1 + .../collapsible/CssAnimatedCollapsible.js | 42 ++--- .../collapsible/CssAnimatedCollapsible.tsx | 42 ++--- .../collapsible/CssTransitionCollapsible.js | 44 ++--- .../collapsible/CssTransitionCollapsible.tsx | 44 ++--- .../components/collapsible/styles.module.css | 1 + .../collapsible-panel/collapsible-panel.json | 5 +- .../app/experiments/collapsible-accordion.tsx | 164 ------------------ .../collapsible-hidden-until-found.tsx | 7 +- .../app/experiments/collapsible.module.css | 2 +- docs/src/components/demo/Demo.tsx | 1 + .../panel/CollapsiblePanel.test.tsx | 80 ++++++++- .../collapsible/panel/CollapsiblePanel.tsx | 26 ++- .../collapsible/panel/useCollapsiblePanel.ts | 10 +- .../collapsible/root/CollapsibleRoot.test.tsx | 84 +++------ 15 files changed, 240 insertions(+), 313 deletions(-) delete mode 100644 docs/src/app/experiments/collapsible-accordion.tsx diff --git a/docs/data/api/collapsible-panel.json b/docs/data/api/collapsible-panel.json index 1bc64944d2..77ef423ac2 100644 --- a/docs/data/api/collapsible-panel.json +++ b/docs/data/api/collapsible-panel.json @@ -2,6 +2,7 @@ "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" }, + "keepMounted": { "type": { "name": "bool" }, "default": "false" }, "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "CollapsiblePanel", diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.js b/docs/data/components/collapsible/CssAnimatedCollapsible.js index 9e2fe5b8ef..efe332b6d9 100644 --- a/docs/data/components/collapsible/CssAnimatedCollapsible.js +++ b/docs/data/components/collapsible/CssAnimatedCollapsible.js @@ -8,26 +8,28 @@ import classes from './styles.module.css'; export default function CssAnimatedCollapsible() { const [open, setOpen] = React.useState(true); return ( - - - - Show {open ? 'less' : 'more'} - - -

This is the collapsed content

-

- You can find the Base UI repository{' '} - - here - -

-

This is a longer sentence and also the third paragraph

- - +
+ + + + Show {open ? 'less' : 'more'} + + +

This is the collapsed content

+

+ You can find the Base UI repository{' '} + + here + +

+

This is a longer sentence and also the third paragraph

+ + +
); } diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx index 09c175023c..5c95ddded3 100644 --- a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx +++ b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx @@ -8,26 +8,28 @@ import classes from './styles.module.css'; export default function CssAnimatedCollapsible() { const [open, setOpen] = React.useState(true); return ( - - - - Show {open ? 'less' : 'more'} - - -

This is the collapsed content

-

- You can find the Base UI repository{' '} - - here - -

-

This is a longer sentence and also the third paragraph

- - +
+ + + + Show {open ? 'less' : 'more'} + + +

This is the collapsed content

+

+ You can find the Base UI repository{' '} + + here + +

+

This is a longer sentence and also the third paragraph

+ + +
); } diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.js b/docs/data/components/collapsible/CssTransitionCollapsible.js index 31bd4d7d87..6df528c8fe 100644 --- a/docs/data/components/collapsible/CssTransitionCollapsible.js +++ b/docs/data/components/collapsible/CssTransitionCollapsible.js @@ -8,27 +8,29 @@ import classes from './styles.module.css'; export default function CssTransitionCollapsible() { const [open, setOpen] = React.useState(true); return ( - - - - Show {open ? 'less' : 'more'} - - -

This is the collapsed content.

-

- You can find the Base UI repository{' '} - - here - - . -

-

This is a longer sentence and also the third paragraph.

- - +
+ + + + Show {open ? 'less' : 'more'} + + +

This is the collapsed content.

+

+ You can find the Base UI repository{' '} + + here + + . +

+

This is a longer sentence and also the third paragraph.

+ + +
); } diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.tsx b/docs/data/components/collapsible/CssTransitionCollapsible.tsx index acf1585173..ad0dd8571a 100644 --- a/docs/data/components/collapsible/CssTransitionCollapsible.tsx +++ b/docs/data/components/collapsible/CssTransitionCollapsible.tsx @@ -8,27 +8,29 @@ import classes from './styles.module.css'; export default function CssTransitionCollapsible() { const [open, setOpen] = React.useState(true); return ( - - - - Show {open ? 'less' : 'more'} - - -

This is the collapsed content.

-

- You can find the Base UI repository{' '} - - here - - . -

-

This is a longer sentence and also the third paragraph.

- - +
+ + + + Show {open ? 'less' : 'more'} + + +

This is the collapsed content.

+

+ You can find the Base UI repository{' '} + + here + + . +

+

This is a longer sentence and also the third paragraph.

+ + +
); } diff --git a/docs/data/components/collapsible/styles.module.css b/docs/data/components/collapsible/styles.module.css index dfc809e071..b2d85f3064 100644 --- a/docs/data/components/collapsible/styles.module.css +++ b/docs/data/components/collapsible/styles.module.css @@ -1,4 +1,5 @@ .trigger { + background-color: buttonface; display: flex; width: 320px; align-items: center; diff --git a/docs/data/translations/api-docs/collapsible-panel/collapsible-panel.json b/docs/data/translations/api-docs/collapsible-panel/collapsible-panel.json index 3a629b202e..57a591d862 100644 --- a/docs/data/translations/api-docs/collapsible-panel/collapsible-panel.json +++ b/docs/data/translations/api-docs/collapsible-panel/collapsible-panel.json @@ -5,7 +5,10 @@ "description": "Class names applied to the element or a function that returns them based on the component's state." }, "hiddenUntilFound": { - "description": "If true, sets hidden="until-found" when closed. If false, sets hidden when closed." + "description": "If true, sets hidden="until-found" when closed. Requires setting keepMounted to true. If false, sets hidden when closed." + }, + "keepMounted": { + "description": "If true, the panel remains mounted when closed and is instead hidden using the hidden attribute If false, the panel is unmounted when closed." }, "render": { "description": "A function to customize rendering of the component." } }, diff --git a/docs/src/app/experiments/collapsible-accordion.tsx b/docs/src/app/experiments/collapsible-accordion.tsx deleted file mode 100644 index cac46088b4..0000000000 --- a/docs/src/app/experiments/collapsible-accordion.tsx +++ /dev/null @@ -1,164 +0,0 @@ -'use client'; -import * as React from 'react'; -import { Collapsible } from '@base-ui-components/react/collapsible'; - -const TRANSITION_DURATION = '350ms'; - -function AccordionSection(props: { - index: number; - openIndex: number; - setOpen: (nextOpenIndex: number) => void; -}) { - const { index, openIndex, setOpen } = props; - const isOpen = index === openIndex; - return ( - setOpen(isOpen ? -1 : index)} - > - - - - - - - {isOpen ? 'Close' : 'Open'} Panel {index} - - -

This is the collapsed content of Panel {index}

-

This is the second paragraph

-

This is the third paragraph

- - - - ); -} - -export default function CollapsibleAccordion() { - const [openIndex, setOpen] = React.useState(-1); - return ( -
- 
-        A crude accordion where only 1 of the 3 {``}s can be open at
-        any time
-        

-        Animated using CSS transitions
-
- {[0, 1, 2].map((index) => ( - - ))} -
- ); -} - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -export function Styles() { - return ( - - ); -} diff --git a/docs/src/app/experiments/collapsible-hidden-until-found.tsx b/docs/src/app/experiments/collapsible-hidden-until-found.tsx index ef9b4c7691..2b29e6bcb8 100644 --- a/docs/src/app/experiments/collapsible-hidden-until-found.tsx +++ b/docs/src/app/experiments/collapsible-hidden-until-found.tsx @@ -36,6 +36,7 @@ export default function CollapsibleHiddenUntilFound() { Trigger 1

This is the collapsed content

@@ -49,8 +50,9 @@ export default function CollapsibleHiddenUntilFound() { Trigger 2

This is the collapsed content

May the force be with you

@@ -63,8 +65,9 @@ export default function CollapsibleHiddenUntilFound() { Trigger 3

This is the collapsed content

May the force be with you

diff --git a/docs/src/app/experiments/collapsible.module.css b/docs/src/app/experiments/collapsible.module.css index d4e2bfd0ec..79110406c5 100644 --- a/docs/src/app/experiments/collapsible.module.css +++ b/docs/src/app/experiments/collapsible.module.css @@ -33,7 +33,7 @@ transition: transform var(--duration) ease-in; } -.trigger[data-open] .icon { +.trigger[data-panel-open] .icon { transform: rotate(0); transition: transform var(--duration) ease-out; } diff --git a/docs/src/components/demo/Demo.tsx b/docs/src/components/demo/Demo.tsx index fb57779959..8d86a5dc7a 100644 --- a/docs/src/components/demo/Demo.tsx +++ b/docs/src/components/demo/Demo.tsx @@ -64,6 +64,7 @@ export function Demo({ className, defaultOpen = false, title, ...props }: DemoPr