fix(expansion-panel): fix children remaining in DOM when isOpen changes

DSW-294

Author: Mcourt

Diff for: CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   `Chip`: trigger onClick when `Enter` key is pressed  
+-   `ExpansionPanel`: fix children remaining in the DOM when `isOpen` prop changes
 
 ## [3.9.4][] - 2024-11-04
 

Diff for: packages/lumx-core/src/js/constants/index.ts

@@ -13,6 +13,7 @@ export * from './keycodes';
  * you need to update their scss counterpart as well
  */
 export const DIALOG_TRANSITION_DURATION = 400;
+export const EXPANSION_PANEL_TRANSITION_DURATION = 400;
 export const NOTIFICATION_TRANSITION_DURATION = 200;
 export const SLIDESHOW_TRANSITION_DURATION = 5000;
 

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

@@ -6,6 +6,7 @@ import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/quer
 import userEvent from '@testing-library/user-event';
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
@@ -14,16 +15,29 @@ jest.mock('@lumx/react/utils/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 
+/** Controlled component that uses a local state to toggle the component */
+const ControlledComponent = (props: ExpansionPanelProps) => {
+    const [isOpen, handleClose, handleOpen] = useBooleanState(false);
+
+    return (
+        <ExpansionPanel isOpen={isOpen} onClose={handleClose} onOpen={handleOpen} {...props}>
+            {mockChildrenContent}
+        </ExpansionPanel>
+    );
+};
+
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<ExpansionPanelProps> = {}) => {
+const setup = (propsOverride: Partial<ExpansionPanelProps> = {}, options: { controlled?: boolean } = {}) => {
     const props = {
         toggleButtonProps: { label: 'Toggle' },
         children: mockChildrenContent,
         ...propsOverride,
     };
-    const { container } = render(<ExpansionPanel {...props} />);
+
+    const Component = options.controlled ? ControlledComponent : ExpansionPanel;
+    const { container } = render(<Component {...props} />);
 
     return {
         container,
@@ -116,6 +130,22 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
             expect(onClose).toHaveBeenCalled();
             expect(onToggleOpen).toHaveBeenCalledWith(false, expect.anything());
         });
+
+        it('should hide children after toggling the expansion panel', async () => {
+            const user = userEvent.setup();
+            const { query } = setup({}, { controlled: true });
+
+            // Content is not visible by default
+            expect(query.content()).not.toBeInTheDocument();
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).toBeInTheDocument();
+
+            await user.click(query.header() as any);
+
+            expect(query.content()).not.toBeInTheDocument();
+        });
     });
 
     // Common tests suite.

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

@@ -12,7 +12,8 @@ import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme
 import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
-import { WINDOW } from '@lumx/react/constants';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
 
 /**
  * Defines the props of the component.
@@ -81,7 +82,6 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
         ...forwardedProps
     } = props;
 
-    const [isChildrenVisible, setIsChildrenVisible] = useState(isOpen);
     const children: ReactNode[] = Children.toArray(anyChildren);
 
     // Partition children by types.
@@ -96,34 +96,16 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
     );
 
     const toggleOpen = (event: React.MouseEvent) => {
-        const hasReducedMotionEnabled = WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
         const shouldOpen = !isOpen;
 
         if (isFunction(onOpen) && shouldOpen) {
             onOpen(event);
-            // On open, we immediately show children
-            setIsChildrenVisible(true);
         }
         if (isFunction(onClose) && !shouldOpen) {
             onClose(event);
-            /**
-             * On close, we only show children immediately if reduced motion is enabled
-             * When disabled, the children will be hidden via the `onTransitionEnd` prop.
-             */
-            if (hasReducedMotionEnabled) {
-                setIsChildrenVisible(false);
-            }
         }
         if (isFunction(onToggleOpen)) {
             onToggleOpen(shouldOpen, event);
-            /**
-             * On toggle, we forward the show state if
-             * * the toggle will open the expansion panel
-             * * reduced motion is enabled. When disabled, the children will be hidden via the `onTransitionEnd` prop.
-             * */
-            if (shouldOpen || hasReducedMotionEnabled) {
-                setIsChildrenVisible(shouldOpen);
-            }
         }
     };
 
@@ -145,6 +127,9 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
 
     const wrapperRef = useRef<HTMLDivElement>(null);
 
+    /** Hide the children at the end of the transition */
+    const isChildrenVisible = useTransitionVisibility(wrapperRef, !!isOpen, EXPANSION_PANEL_TRANSITION_DURATION);
+
     // Switch max height on/off to activate the CSS transition (updates when children changes).
     const [maxHeight, setMaxHeight] = useState('0');
     useEffect(() => {
@@ -174,16 +159,7 @@ export const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forward
             </header>
 
             {(isOpen || isChildrenVisible) && (
-                <div
-                    className={`${CLASSNAME}__wrapper`}
-                    style={{ maxHeight }}
-                    // At the end of the closing transition, remove the children from the DOM
-                    onTransitionEnd={() => {
-                        if (!isOpen) {
-                            setIsChildrenVisible(false);
-                        }
-                    }}
-                >
+                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>
                     <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 

Diff for: packages/site-demo/content/product/components/expansion-panel/react/examples.tsx

@@ -1,6 +1,16 @@
 import { mdiDotsVertical } from '@lumx/icons';
 
-import { Divider, ExpansionPanel, FlexBox, GenericBlock, Heading, IconButton, Text, Thumbnail } from '@lumx/react';
+import {
+    Button,
+    Divider,
+    ExpansionPanel,
+    FlexBox,
+    GenericBlock,
+    Heading,
+    IconButton,
+    Text,
+    Thumbnail,
+} from '@lumx/react';
 import React, { useState } from 'react';
 
 export const App = () => {
@@ -11,8 +21,19 @@ export const App = () => {
     const [isOpen5, setOpen5] = useState(false);
     const stopPropagation = (evt: Event) => evt.stopPropagation();
 
+    const handleCloseAll = () => {
+        setOpen1(false);
+        setOpen2(false);
+        setOpen3(false);
+        setOpen4(false);
+        setOpen5(false);
+    };
+
     return (
         <>
+            <Button type="button" onClick={handleCloseAll}>
+                Close all
+            </Button>
             <ExpansionPanel
                 hasBackground
                 hasHeaderDivider