@lumx/react 3.13.3-alpha.1 → 3.13.3-alpha.3

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.13.3-alpha.1",
-        "@lumx/icons": "^3.13.3-alpha.1",
+        "@lumx/core": "^3.13.3-alpha.3",
+        "@lumx/icons": "^3.13.3-alpha.3",
         "@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.1"
+    "version": "3.13.3-alpha.3"
 }

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

@@ -1,21 +1,18 @@
-import React, { Children, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { Children, PropsWithChildren, ReactNode, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
-import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
 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.
@@ -101,13 +98,13 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     const toggleOpen = (event: React.MouseEvent) => {
         const shouldOpen = !isOpen;
 
-        if (isFunction(onOpen) && shouldOpen) {
+        if (onOpen && shouldOpen) {
             onOpen(event);
         }
-        if (isFunction(onClose) && !shouldOpen) {
+        if (onClose && !shouldOpen) {
             onClose(event);
         }
-        if (isFunction(onToggleOpen)) {
+        if (onToggleOpen) {
             onToggleOpen(shouldOpen, event);
         }
     };
@@ -130,18 +127,31 @@ 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);
 
-    // Switch max height on/off to activate the CSS transition (updates when children changes).
-    const [maxHeight, setMaxHeight] = useState<string | undefined>('0');
-    useEffect(() => {
-        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
-        setMaxHeight(`${height}px`);
+    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]);
 
-    const onTransitionEnd = React.useCallback(() => {
-        setMaxHeight(undefined);
+    // 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 (
@@ -165,15 +175,15 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
                 </div>
             </header>
 
-            {(isOpen || isChildrenVisible) && (
-                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }} onTransitionEnd={onTransitionEnd}>
-                    <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
+            <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                {(isOpen || isChildrenVisible) && (
+                    <div className={`${CLASSNAME}__container`}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 
                         {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}
                     </div>
-                </div>
-            )}
+                )}
+            </div>
         </section>
     );
 });