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

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.2",
+        "@lumx/icons": "^3.13.3-alpha.2",
         "@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.2"
 }

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

@@ -1,12 +1,10 @@
-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';
@@ -101,13 +99,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);
         }
     };
@@ -133,17 +131,6 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
     /** 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<string | undefined>('0');
-    useEffect(() => {
-        const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
-        setMaxHeight(`${height}px`);
-    }, [isOpen]);
-
-    const onTransitionEnd = React.useCallback(() => {
-        setMaxHeight(undefined);
-    }, []);
-
     return (
         <section ref={ref} {...forwardedProps} className={rootClassName}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
@@ -165,15 +152,15 @@ export const ExpansionPanel = forwardRef<ExpansionPanelProps, HTMLDivElement>((p
                 </div>
             </header>
 
-            {(isOpen || isChildrenVisible) && (
-                <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }} onTransitionEnd={onTransitionEnd}>
+            <div className={`${CLASSNAME}__wrapper`}>
+                {(isOpen || isChildrenVisible) && (
                     <div className={`${CLASSNAME}__container`} ref={wrapperRef}>
                         <div className={`${CLASSNAME}__content`}>{content}</div>
 
                         {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}
                     </div>
-                </div>
-            )}
+                )}
+            </div>
         </section>
     );
 });