Skip to content

Commit

Permalink
Add keepMounted prop to Collapsible
Browse files Browse the repository at this point in the history
  • Loading branch information
@mj12albert
mj12albert committed Nov 7, 2024
1 parent f5b07ee commit 10912d7
Show file tree
Hide file tree
Showing 15 changed files with 240 additions and 313 deletions.
1 change: 1 addition & 0 deletions docs/data/api/collapsible-panel.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"props": {
"className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
"hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
"keepMounted": { "type": { "name": "bool" }, "default": "false" },
"render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
},
"name": "CollapsiblePanel",
Expand Down
42 changes: 22 additions & 20 deletions docs/data/components/collapsible/CssAnimatedCollapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,28 @@ import classes from './styles.module.css';
export default function CssAnimatedCollapsible() {
const [open, setOpen] = React.useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
<p>This is the collapsed content</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
</p>
<p>This is a longer sentence and also the third paragraph</p>
</Collapsible.Panel>
</Collapsible.Root>
<div>
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
<p>This is the collapsed content</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
</p>
<p>This is a longer sentence and also the third paragraph</p>
</Collapsible.Panel>
</Collapsible.Root>
</div>
);
}

Expand Down
42 changes: 22 additions & 20 deletions docs/data/components/collapsible/CssAnimatedCollapsible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,28 @@ import classes from './styles.module.css';
export default function CssAnimatedCollapsible() {
const [open, setOpen] = React.useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
<p>This is the collapsed content</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
</p>
<p>This is a longer sentence and also the third paragraph</p>
</Collapsible.Panel>
</Collapsible.Root>
<div>
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, animationClasses.panel)}>
<p>This is the collapsed content</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
</p>
<p>This is a longer sentence and also the third paragraph</p>
</Collapsible.Panel>
</Collapsible.Root>
</div>
);
}

Expand Down
44 changes: 23 additions & 21 deletions docs/data/components/collapsible/CssTransitionCollapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,29 @@ import classes from './styles.module.css';
export default function CssTransitionCollapsible() {
const [open, setOpen] = React.useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
<p>This is the collapsed content.</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
.
</p>
<p>This is a longer sentence and also the third paragraph.</p>
</Collapsible.Panel>
</Collapsible.Root>
<div>
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
<p>This is the collapsed content.</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
.
</p>
<p>This is a longer sentence and also the third paragraph.</p>
</Collapsible.Panel>
</Collapsible.Root>
</div>
);
}

Expand Down
44 changes: 23 additions & 21 deletions docs/data/components/collapsible/CssTransitionCollapsible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,29 @@ import classes from './styles.module.css';
export default function CssTransitionCollapsible() {
const [open, setOpen] = React.useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
<p>This is the collapsed content.</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
.
</p>
<p>This is a longer sentence and also the third paragraph.</p>
</Collapsible.Panel>
</Collapsible.Root>
<div>
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className={classes.trigger}>
<ExpandMoreIcon className={classes.icon} />
Show {open ? 'less' : 'more'}
</Collapsible.Trigger>
<Collapsible.Panel className={clsx(classes.panel, transitionClasses.panel)}>
<p>This is the collapsed content.</p>
<p>
You can find the Base UI repository{' '}
<a
href="https://github.com/mui/base-ui"
target="_blank"
rel="noreferrer noopener"
>
here
</a>
.
</p>
<p>This is a longer sentence and also the third paragraph.</p>
</Collapsible.Panel>
</Collapsible.Root>
</div>
);
}

Expand Down
1 change: 1 addition & 0 deletions docs/data/components/collapsible/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.trigger {
background-color: buttonface;
display: flex;
width: 320px;
align-items: center;
Expand Down
5 changes: 4 additions & 1 deletion docs/data/translations/api-docs/collapsible-panel/collapsible-panel.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
"description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
},
"hiddenUntilFound": {
"description": "If <code>true</code>, sets <code>hidden=&quot;until-found&quot;</code> when closed. If <code>false</code>, sets <code>hidden</code> when closed."
"description": "If <code>true</code>, sets <code>hidden=&quot;until-found&quot;</code> when closed. Requires setting <code>keepMounted</code> to <code>true</code>. If <code>false</code>, sets <code>hidden</code> when closed."
},
"keepMounted": {
"description": "If <code>true</code>, the panel remains mounted when closed and is instead hidden using the <code>hidden</code> attribute If <code>false</code>, the panel is unmounted when closed."
},
"render": { "description": "A function to customize rendering of the component." }
},
Expand Down
164 changes: 0 additions & 164 deletions docs/src/app/experiments/collapsible-accordion.tsx
View file

This file was deleted.

Loading

0 comments on commit 10912d7

Please sign in to comment.