@lumx/react 3.9.4 → 3.9.5

package/index.js

@@ -354,6 +354,7 @@ 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;
 
 /**
@@ -5701,6 +5702,9 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
   const handleOnAfterClick = useStopPropagation(onAfterClick);
   const handleKeyDown = evt => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
+    if (hasOnClick) {
+      onEnterPressed(onClick)(evt);
+    }
   };
   return (
     /*#__PURE__*/
@@ -7172,7 +7176,6 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
       toggleButtonProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$12);
-  const [isChildrenVisible, setIsChildrenVisible] = useState(isOpen);
   const children = Children.toArray(anyChildren);
 
   // Partition children by types.
@@ -7184,34 +7187,15 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$Z}__label`
   }, label);
   const toggleOpen = event => {
-    var _WINDOW$matchMedia, _WINDOW$matchMedia$ca;
-    const hasReducedMotionEnabled = WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$matchMedia = WINDOW.matchMedia) === null || _WINDOW$matchMedia === void 0 ? void 0 : (_WINDOW$matchMedia$ca = _WINDOW$matchMedia.call(WINDOW, '(prefers-reduced-motion: reduce)')) === null || _WINDOW$matchMedia$ca === void 0 ? void 0 : _WINDOW$matchMedia$ca.matches;
     const shouldOpen = !isOpen;
     if (isFunction(onOpen) && shouldOpen) {
       onOpen(event);
-      // On open, we immediately show children
-      setIsChildrenVisible(true);
     }
     if (isFunction(onClose) && !shouldOpen) {
       onClose(event);
-      /**
-       * On close, we only show children immediately if reduced motion is enabled
-       * When disabled, the children will be hidden via the `onTransitionEnd` prop.
-       */
-      if (hasReducedMotionEnabled) {
-        setIsChildrenVisible(false);
-      }
     }
     if (isFunction(onToggleOpen)) {
       onToggleOpen(shouldOpen, event);
-      /**
-       * On toggle, we forward the show state if
-       * * the toggle will open the expansion panel
-       * * reduced motion is enabled. When disabled, the children will be hidden via the `onTransitionEnd` prop.
-       * */
-      if (shouldOpen || hasReducedMotionEnabled) {
-        setIsChildrenVisible(shouldOpen);
-      }
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
@@ -7227,6 +7211,9 @@ const ExpansionPanel = /*#__PURE__*/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(() => {
@@ -7256,13 +7243,6 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
     style: {
       maxHeight
     }
-    // At the end of the closing transition, remove the children from the DOM
-    ,
-    onTransitionEnd: () => {
-      if (!isOpen) {
-        setIsChildrenVisible(false);
-      }
-    }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$Z}__container`,
     ref: wrapperRef