true
, sets hidden="until-found"
when closed. Requires setting keepMounted
to true
. If false
, sets hidden
when closed."
+ "description": "If true
, sets the hidden state using hidden="until-found"
. The panel remains mounted in the DOM when closed and overrides keepMounted
. If false
, sets the hidden state using hidden
."
},
"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."
+ "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. If the hiddenUntilFound
prop is used, the panel overrides this prop and is remains mounted when closed."
},
"render": { "description": "A function to customize rendering of the component." }
},
diff --git a/docs/src/app/experiments/collapsible-hidden-until-found.tsx b/docs/src/app/experiments/collapsible-hidden-until-found.tsx
index 19faad4ca8..e9390ec12e 100644
--- a/docs/src/app/experiments/collapsible-hidden-until-found.tsx
+++ b/docs/src/app/experiments/collapsible-hidden-until-found.tsx
@@ -51,7 +51,6 @@ export default function CollapsibleHiddenUntilFound() {
This is the collapsed content
@@ -66,7 +65,6 @@ export default function CollapsibleHiddenUntilFound() {This is the collapsed content
diff --git a/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx b/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx index be82a8296f..abc9599b19 100644 --- a/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx +++ b/packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx @@ -40,6 +40,17 @@ const AccordionPanel = React.forwardRef(function AccordionPanel( const { hiddenUntilFound, keepMounted } = useAccordionRootContext(); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if (keepMountedProp === false && (hiddenUntilFoundProp ?? hiddenUntilFound)) { + console.warn( + 'Base UI: The `keepMounted={false}` prop on a Accordion.Panel will be ignored when using `hiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.', + ); + } + }, [hiddenUntilFoundProp, hiddenUntilFound, keepMountedProp]); + } + const { getRootProps, height, width, isOpen } = useCollapsiblePanel({ animated, hiddenUntilFound: hiddenUntilFoundProp || hiddenUntilFound, @@ -72,7 +83,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel( customStyleHookMapping: accordionStyleHookMapping, }); - if (!(keepMountedProp || keepMounted) && !isOpen) { + if (!(keepMountedProp ?? keepMounted) && !isOpen) { return null; } diff --git a/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx b/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx index 7aeb096cd1..ea039e594c 100644 --- a/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx +++ b/packages/mui-base/src/Accordion/Root/AccordionRoot.tsx @@ -30,8 +30,8 @@ const AccordionRoot = React.forwardRef(function AccordionRoot( className, direction, disabled = false, - hiddenUntilFound = false, - keepMounted = false, + hiddenUntilFound: hiddenUntilFoundProp, + keepMounted: keepMountedProp, loop, onValueChange, openMultiple = true, @@ -42,6 +42,17 @@ const AccordionRoot = React.forwardRef(function AccordionRoot( ...otherProps } = props; + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if (hiddenUntilFoundProp && keepMountedProp === false) { + console.warn( + 'Base UI: The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.', + ); + } + }, [hiddenUntilFoundProp, keepMountedProp]); + } + // memoized to allow omitting both defaultValue and value // which would otherwise trigger a warning in useControlled const defaultValue = React.useMemo(() => { @@ -76,11 +87,11 @@ const AccordionRoot = React.forwardRef(function AccordionRoot( const contextValue: AccordionRootContext = React.useMemo( () => ({ ...accordion, - hiddenUntilFound, - keepMounted, + hiddenUntilFound: hiddenUntilFoundProp ?? false, + keepMounted: keepMountedProp ?? false, ownerState, }), - [accordion, hiddenUntilFound, keepMounted, ownerState], + [accordion, hiddenUntilFoundProp, keepMountedProp, ownerState], ); const { renderElement } = useComponentRenderer({ diff --git a/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx b/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx index f549dd4bbc..3c7e670df0 100644 --- a/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx +++ b/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx @@ -95,9 +95,7 @@ describe('