@lumx/react 3.13.3-alpha.2 → 3.14.0

package/package.json

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

package/src/components/expansion-panel/ExpansionPanel.stories.tsx

@@ -1,9 +1,18 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 
-import { ExpansionPanel, FlexBox } from '@lumx/react';
+import { ExpansionPanel, ExpansionPanelProps, Text } from '@lumx/react';
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 
+function useBaseProps({
+    toggleButtonProps = { label: 'Toggle' },
+    isOpen: initiallyOpen,
+    ...args
+}: Partial<ExpansionPanelProps>) {
+    const [isOpen, setOpen] = React.useState(initiallyOpen);
+    return { isOpen, toggleButtonProps, onToggleOpen: setOpen, ...args };
+}
+
 export default {
     title: 'LumX components/expansion-panel/ExpansionPanel',
     component: ExpansionPanel,
@@ -13,11 +22,8 @@ export default {
         label: 'Label',
     },
     decorators: [withNestedProps()],
-    render({ toggleButtonProps, ...args }: any) {
-        const [isOpen, setOpen] = React.useState(args.isOpen);
-        return (
-            <ExpansionPanel isOpen={isOpen} toggleButtonProps={toggleButtonProps} onToggleOpen={setOpen} {...args} />
-        );
+    render(args: ExpansionPanelProps) {
+        return <ExpansionPanel {...useBaseProps(args)} />;
     },
 };
 
@@ -40,19 +46,34 @@ export const HasHeaderDivider = {
     },
 };
 
-/** Test resizable content work */
-export const ResizingContent = {
-    args: {
-        hasBackground: true,
-        children: (
-            <FlexBox
-                style={{ resize: 'both', overflow: 'hidden' }}
-                hAlign="center"
-                vAlign="center"
-                className="lumx-spacing-padding-huge"
-            >
-                Content
-            </FlexBox>
-        ),
+/** Nested expansion panels */
+export const Nested = {
+    args: {},
+    render(args: ExpansionPanelProps) {
+        return (
+            <ExpansionPanel {...useBaseProps(args)}>
+                <ExpansionPanel
+                    label="Child 1"
+                    hasBackground
+                    className="lumx-spacing-margin-left-huge lumx-spacing-margin-bottom-big"
+                    {...useBaseProps(args)}
+                >
+                    <Text as="p" typography="body1" color="dark-L2" className="lumx-spacing-padding-big">
+                        content child 1
+                    </Text>
+                </ExpansionPanel>
+
+                <ExpansionPanel
+                    label="Child 2"
+                    hasBackground
+                    className="lumx-spacing-margin-left-huge lumx-spacing-margin-bottom-big"
+                    {...useBaseProps(args)}
+                >
+                    <Text as="p" typography="body1" color="dark-L2" className="lumx-spacing-padding-big">
+                        content child 2
+                    </Text>
+                </ExpansionPanel>
+            </ExpansionPanel>
+        );
     },
 };

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -10,10 +10,9 @@ import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/partitionMulti';
-import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
-import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { IS_BROWSER } from '@lumx/react/constants';
 
 /**
  * Defines the props of the component.
@@ -128,8 +127,32 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
 
     const wrapperRef = useRef<HTMLDivElement>(null);
 
-    /** Hide the children at the end of the transition */
-    const isChildrenVisible = useTransitionVisibility(wrapperRef, !!isOpen, EXPANSION_PANEL_TRANSITION_DURATION);
+    // Children visible while the open/close transition is running
+    const [isChildrenVisible, setChildrenVisible] = React.useState(isOpen);
+
+    const isOpenRef = React.useRef(isOpen);
+    React.useEffect(() => {
+        if (isOpen) {
+            setChildrenVisible(true);
+        } else if (!IS_BROWSER) {
+            // Outside a browser we can't wait for the transition
+            setChildrenVisible(false);
+        }
+        isOpenRef.current = isOpen;
+    }, [isOpen]);
+
+    // Change children visibility on transition end
+    React.useEffect(() => {
+        const { current: wrapper } = wrapperRef;
+        if (!IS_BROWSER || !wrapper) {
+            return undefined;
+        }
+        const onTransitionEnd = () => {
+            setChildrenVisible(isOpenRef.current);
+        };
+        wrapper.addEventListener('transitionend', onTransitionEnd);
+        return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
+    }, []);
 
     return (
         <section ref={ref} {...forwardedProps} className={rootClassName}>
@@ -152,9 +175,9 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
                 </div>
             </header>
 
-            <div className={`${CLASSNAME}__wrapper`}>
+            <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                 {(isOpen || isChildrenVisible) && (
-                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
+                    <div className={`${CLASSNAME}__container`}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 
                         {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}