feat(expansion-panel): add closeMode so children are unmounted/hidden

Author: al3xbzh

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   `ExpansionPanel`: added `closeMode` to `"unmount"` or `"hide"` children when the item is closed.
+
 ## [3.17.2][] - 2025-10-01
 
 ### Fixed

packages/lumx-react/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -18,7 +18,11 @@ export default {
     component: ExpansionPanel,
     args: {
         'toggleButtonProps.label': 'Toggle',
-        children: 'Content',
+        children: (
+            <Text as="p" typography="body1" color="dark-L2" className="lumx-spacing-padding-big">
+                content
+            </Text>
+        ),
         label: 'Label',
     },
     decorators: [withNestedProps()],
@@ -77,3 +81,11 @@ export const Nested = {
         );
     },
 };
+
+/** Hide component instead of unmounting it */
+export const HideChildren = {
+    args: {
+        hasBackground: true,
+        closeMode: 'hide',
+    },
+};

packages/lumx-react/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -134,11 +134,11 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             expect(onToggleOpen).toHaveBeenCalledWith(false, expect.anything());
         });
 
-        it('should hide children after toggling the expansion panel', async () => {
+        it('should unmount children after toggling the expansion panel', async () => {
             const user = userEvent.setup();
             const { query } = setup({}, { controlled: true });
 
-            // Content is not visible by default
+            // Content is not mounted by default
             expect(query.content()).not.toBeInTheDocument();
 
             await user.click(query.header() as any);
@@ -149,6 +149,25 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
 
             expect(query.content()).not.toBeInTheDocument();
         });
+
+        it('should hide children after toggling the expansion panel', async () => {
+            const user = userEvent.setup();
+            const { element, query } = setup({ closeMode: 'hide' }, { controlled: true });
+
+            // Content is hidden (but mounted) by default
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-open`);
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).toBeInTheDocument();
+            expect(element).toHaveClass(`${CLASSNAME}--is-close`);
+        });
     });
 
     // Common tests suite.

packages/lumx-react/src/components/expansion-panel/ExpansionPanel.tsx

@@ -7,7 +7,7 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import isEmpty from 'lodash/isEmpty';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { GenericProps, HasCloseMode, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -17,7 +17,7 @@ import { IS_BROWSER } from '@lumx/react/constants';
 /**
  * Defines the props of the component.
  */
-export interface ExpansionPanelProps extends GenericProps, HasTheme {
+export interface ExpansionPanelProps extends GenericProps, HasCloseMode, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -52,7 +52,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
+const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {
+    closeMode: 'unmount',
+};
 
 const isDragHandle = isComponent(DragHandle);
 const isHeader = isComponent('header');
@@ -69,6 +71,7 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     const defaultTheme = useTheme() || Theme.light;
     const {
         className,
+        closeMode = DEFAULT_PROPS.closeMode,
         children: anyChildren,
         hasBackground,
         hasHeaderDivider,
@@ -127,32 +130,32 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
 
     const wrapperRef = useRef<HTMLDivElement>(null);
 
-    // Children visible while the open/close transition is running
+    // Children stay visible while the open/close transition is running
     const [isChildrenVisible, setChildrenVisible] = React.useState(isOpen);
 
     const isOpenRef = React.useRef(isOpen);
     React.useEffect(() => {
-        if (isOpen) {
+        if (isOpen || closeMode === 'hide') {
             setChildrenVisible(true);
         } else if (!IS_BROWSER) {
             // Outside a browser we can't wait for the transition
             setChildrenVisible(false);
         }
         isOpenRef.current = isOpen;
-    }, [isOpen]);
+    }, [closeMode, isOpen]);
 
-    // Change children visibility on transition end
+    // Change children's visibility on the transition end
     React.useEffect(() => {
         const { current: wrapper } = wrapperRef;
         if (!IS_BROWSER || !wrapper) {
             return undefined;
         }
         const onTransitionEnd = () => {
-            setChildrenVisible(isOpenRef.current);
+            setChildrenVisible(isOpenRef.current || closeMode === 'hide');
         };
         wrapper.addEventListener('transitionend', onTransitionEnd);
         return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-    }, []);
+    }, [closeMode]);
 
     return (
         <section ref={ref} {...forwardedProps} className={rootClassName}>