WIP Add keepMounted prop to Collapsible

mui · Nov 28, 2024 · d089d08 · d089d08
1 parent 5e827dc
commit d089d08
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/docs/src/app/experiments/collapsible.module.css b/docs/src/app/experiments/collapsible.module.css
@@ -1,6 +1,6 @@
 .wrapper {
   --width: 320px;
-  --duration: 300ms;
+  --duration: 1000ms;
 
   font-family: system-ui, sans-serif;
   line-height: 1.4;

diff --git a/packages/react/src/collapsible/panel/CollapsiblePanel.tsx b/packages/react/src/collapsible/panel/CollapsiblePanel.tsx
@@ -22,12 +22,12 @@ const CollapsiblePanel = React.forwardRef(function CollapsiblePanel(
   props: CollapsiblePanel.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const { className, hiddenUntilFound, render, ...otherProps } = props;
+  const { className, hiddenUntilFound, keepMounted = false, render, ...otherProps } = props;
 
   const { animated, mounted, open, panelId, setPanelId, setMounted, setOpen, state } =
     useCollapsibleRootContext();
 
-  const { getRootProps, height, width } = useCollapsiblePanel({
+  const { getRootProps, height, width, isOpen } = useCollapsiblePanel({
     animated,
     hiddenUntilFound,
     id: panelId,
@@ -55,6 +55,10 @@ const CollapsiblePanel = React.forwardRef(function CollapsiblePanel(
     customStyleHookMapping: collapsibleStyleHookMapping,
   });
 
+  if (!keepMounted && !isOpen) {
+    return null;
+  }
+
   return renderElement();
 });
 
@@ -63,7 +67,15 @@ export { CollapsiblePanel };
 namespace CollapsiblePanel {
   export interface Props
     extends BaseUIComponentProps<'div', CollapsibleRoot.State>,
-      Pick<useCollapsiblePanel.Parameters, 'hiddenUntilFound'> {}
+      Pick<useCollapsiblePanel.Parameters, 'hiddenUntilFound'> {
+    /**
+     * If `true`, the panel remains mounted when closed and is instead
+     * hidden using the `hidden` attribute
+     * If `false`, the panel is unmounted when closed.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
 }
 
 CollapsiblePanel.propTypes /* remove-proptypes */ = {

diff --git a/packages/react/src/collapsible/panel/useCollapsiblePanel.ts b/packages/react/src/collapsible/panel/useCollapsiblePanel.ts
@@ -286,8 +286,9 @@ export function useCollapsiblePanel(
       getRootProps,
       height,
       width,
+      isOpen,
     }),
-    [getRootProps, height, width],
+    [getRootProps, height, width, isOpen],
   );
 }
 
@@ -322,5 +323,9 @@ export namespace useCollapsiblePanel {
     ) => React.ComponentPropsWithRef<'button'>;
     height: number;
     width: number;
+    /**
+     * The open state of the panel, that accounts for animation/transition status.
+     */
+    isOpen: boolean;
   }
 }