@lumx/react 3.9.4 → 3.9.5-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.4",
-        "@lumx/icons": "^3.9.4",
+        "@lumx/core": "^3.9.5-alpha.0",
+        "@lumx/icons": "^3.9.5-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.4"
+    "version": "3.9.5-alpha.0"
 }

package/src/components/chip/Chip.test.tsx

@@ -168,6 +168,21 @@ describe('<Chip />', () => {
             fireEvent.keyDown(chip, { key: 'A', code: 'KeyA' });
             expect(onKeyDown).toHaveBeenCalled();
         });
+
+        it('should forward key down event and trigger `onClick` when pressing Enter', async () => {
+            const user = userEvent.setup();
+            const onKeyDown = jest.fn();
+            const { chip } = setup({ onClick, onKeyDown });
+
+            await user.tab();
+            expect(chip).toHaveFocus();
+
+            await userEvent.keyboard('{Enter}');
+
+            expect(onKeyDown).toHaveBeenCalled();
+            expect(onClick).toHaveBeenCalled();
+            onClick.mockClear();
+        });
     });
 
     commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });

package/src/components/chip/Chip.tsx

@@ -101,7 +101,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
     const handleKeyDown = (evt: React.KeyboardEvent) => {
         onKeyDown?.(evt);
         if (hasOnClick) {
-            onEnterPressed(onClick);
+            onEnterPressed(onClick)(evt);
         }
     };
 

package/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.

package/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>