@lumx/react 3.13.3-alpha.2 → 3.14.0

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;
 
 /**
@@ -7180,8 +7179,33 @@ 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);
+  // 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]);
+
+  // 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
   }, forwardedProps, {
@@ -7201,10 +7225,10 @@ const ExpansionPanel = forwardRef((props, ref) => {
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     "aria-expanded": isOpen || 'false'
   })))), /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$Z}__wrapper`
-  }, (isOpen || isChildrenVisible) && /*#__PURE__*/React__default.createElement("div", {
-    className: `${CLASSNAME$Z}__container`,
+    className: `${CLASSNAME$Z}__wrapper`,
     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", {