Add keepMounted to Accordion

docs/data/api/accordion-panel.json

@@ -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": "AccordionPanel",

docs/data/api/accordion-root.json

@@ -7,6 +7,8 @@
       "default": "0"
     },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "hiddenUntilFound": { "type": { "name": "bool" }, "default": "false" },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "loop": { "type": { "name": "bool" }, "default": "true" },
     "onValueChange": { "type": { "name": "func" } },
     "openMultiple": { "type": { "name": "bool" }, "default": "true" },

docs/data/translations/api-docs/accordion-panel/accordion-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 <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>, accordion items remains mounted when closed and is instead hidden using the <code>hidden</code> attribute. If <code>false</code>, accordion items are unmounted when closed."
     },
     "render": { "description": "A function to customize rendering of the component." }
   },

docs/data/translations/api-docs/accordion-root/accordion-root.json

@@ -11,6 +11,12 @@
       "description": "The default value representing the currently open <code>Accordion.Item</code> This is the uncontrolled counterpart of <code>value</code>."
     },
     "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "hiddenUntilFound": {
+      "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>, accordion items remains mounted when closed and is instead hidden using the <code>hidden</code> attribute. If <code>false</code>, accordion items are unmounted when closed."
+    },
     "loop": {
       "description": "If <code>true</code>, focus will loop when moving focus between <code>Trigger</code>s using the arrow keys."
     },

packages/mui-base/src/Accordion/Header/AccordionHeader.test.tsx

@@ -13,6 +13,7 @@ const accordionRootContextValue: AccordionRootContext = {
   disabled: false,
   handleValueChange: NOOP,
   hiddenUntilFound: false,
+  keepMounted: false,
   orientation: 'vertical',
   ownerState: {
     value: [0],

packages/mui-base/src/Accordion/Item/AccordionItem.test.tsx

@@ -11,6 +11,7 @@ const accordionRootContextValue: AccordionRootContext = {
   disabled: false,
   handleValueChange: NOOP,
   hiddenUntilFound: false,
+  keepMounted: false,
   orientation: 'vertical',
   ownerState: {
     value: [0],

packages/mui-base/src/Accordion/Panel/AccordionPanel.test.tsx

@@ -13,6 +13,7 @@ const accordionRootContextValue: AccordionRootContext = {
   disabled: false,
   handleValueChange: NOOP,
   hiddenUntilFound: false,
+  keepMounted: false,
   orientation: 'vertical',
   ownerState: {
     value: [0],

packages/mui-base/src/Accordion/Panel/AccordionPanel.tsx

@@ -6,6 +6,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useCollapsibleRootContext } from '../../Collapsible/Root/CollapsibleRootContext';
 import { useCollapsiblePanel } from '../../Collapsible/Panel/useCollapsiblePanel';
 import { useAccordionRootContext } from '../Root/AccordionRootContext';
+import type { AccordionRoot } from '../Root/AccordionRoot';
 import type { AccordionItem } from '../Item/AccordionItem';
 import { useAccordionItemContext } from '../Item/AccordionItemContext';
 import { accordionStyleHookMapping } from '../Item/styleHooks';
@@ -27,6 +28,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
   const {
     className,
     hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
     id: idProp,
     render,
     style: styleProp,
@@ -36,9 +38,9 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
   const { animated, mounted, open, panelId, setPanelId, setMounted, setOpen } =
     useCollapsibleRootContext();
 
-  const { hiddenUntilFound } = useAccordionRootContext();
+  const { hiddenUntilFound, keepMounted } = useAccordionRootContext();
 
-  const { getRootProps, height, width } = useCollapsiblePanel({
+  const { getRootProps, height, width, isOpen } = useCollapsiblePanel({
     animated,
     hiddenUntilFound: hiddenUntilFoundProp || hiddenUntilFound,
     id: idProp ?? panelId,
@@ -70,13 +72,17 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
     customStyleHookMapping: accordionStyleHookMapping,
   });
 
+  if (!(keepMountedProp || keepMounted) && !isOpen) {
+    return null;
+  }
+
   return renderElement();
 });
 
 export namespace AccordionPanel {
   export interface Props
     extends BaseUIComponentProps<'div', AccordionItem.OwnerState>,
-      Pick<useCollapsiblePanel.Parameters, 'hiddenUntilFound'> {}
+      Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
 }
 
 export { AccordionPanel };
@@ -96,6 +102,7 @@ AccordionPanel.propTypes /* remove-proptypes */ = {
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * If `true`, sets `hidden="until-found"` when closed.
+   * Requires setting `keepMounted` to `true`.
    * If `false`, sets `hidden` when closed.
    * @default false
    */
@@ -104,6 +111,13 @@ AccordionPanel.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   id: PropTypes.string,
+  /**
+   * If `true`, accordion items remains mounted when closed and is instead
+   * hidden using the `hidden` attribute.
+   * If `false`, accordion items are unmounted when closed.
+   * @default false
+   */
+  keepMounted: PropTypes.bool,
   /**
    * A function to customize rendering of the component.
    */