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

package/index.js

@@ -523,7 +523,6 @@ const CSS_PREFIX = 'lumx';
  * you need to update their scss counterpart as well
  */
 const DIALOG_TRANSITION_DURATION = 400;
-const EXPANSION_PANEL_TRANSITION_DURATION = 400;
 const NOTIFICATION_TRANSITION_DURATION = 200;
 
 /**
@@ -7157,13 +7156,13 @@ const ExpansionPanel = forwardRef((props, ref) => {
   }, label);
   const toggleOpen = event => {
     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);
     }
   };
@@ -7180,17 +7179,32 @@ const ExpansionPanel = forwardRef((props, ref) => {
   }));
   const wrapperRef = useRef(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(() => {
-    const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
-    setMaxHeight(`${height}px`);
+  // Children visible while the open/close transition is running
+  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
+  const isOpenRef = React__default.useRef(isOpen);
+  React__default.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__default.useCallback(() => {
-    setMaxHeight(undefined);
+
+  // Change children visibility on transition end
+  React__default.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 /*#__PURE__*/React__default.createElement("section", _extends({
     ref: ref
@@ -7210,15 +7224,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
     emphasis: Emphasis.low,
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     "aria-expanded": isOpen || 'false'
-  })))), (isOpen || isChildrenVisible) && /*#__PURE__*/React__default.createElement("div", {
+  })))), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$Z}__wrapper`,
-    style: {
-      maxHeight
-    },
-    onTransitionEnd: onTransitionEnd
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$Z}__container`,
     ref: wrapperRef
+  }, (isOpen || isChildrenVisible) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$Z}__container`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$Z}__content`
   }, content), footer && /*#__PURE__*/React__default.createElement("div", {