@lumx/react 3.6.1 → 3.6.2-alpha.0

package/index.js

@@ -383,6 +383,13 @@ function uid(len) {
  */
 const CSS_PREFIX = 'lumx';
 
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+
 /**
  * Delay on hover after which we open or close the tooltip.
  * Only applies to devices supporting pointer hover.
@@ -2932,7 +2939,7 @@ const userHasReducedMotion = () => {
  * @param onVisibilityChange Callback called when the visibility changes.
  * @return true if the component should be rendered
  */
-const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) => {
+const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityChange) => {
   const [isVisible, setVisible] = useState(isComponentVisible);
   const previousVisibility = useRef(isVisible);
 
@@ -2947,22 +2954,14 @@ const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) =>
     } = ref;
 
     // Transition event is not supported or the user prefers reduced motion.
-    // => Skip `transitionend` event listening and set visibility to false directly.
+    // => Skip and set visibility to false directly.
     if (!element || !window.TransitionEvent || userHasReducedMotion()) {
       setVisible(false);
       return undefined;
     }
-
-    // Update visibility on opacity transition end.
-    const onTransitionEnd = e => {
-      if (e.target !== ref.current || e.propertyName !== 'opacity') return;
-      setVisible(wasVisible => !wasVisible);
-    };
-    element.addEventListener('transitionend', onTransitionEnd);
-    return () => {
-      element.removeEventListener('transitionend', onTransitionEnd);
-    };
-  }, [isComponentVisible, ref]);
+    const timer = setTimeout(() => setVisible(false), timeout);
+    return () => clearTimeout(timer);
+  }, [isComponentVisible, ref, timeout]);
   useEffect(() => {
     if (onVisibilityChange && previousVisibility.current !== isVisible) {
       onVisibilityChange(isVisible);
@@ -3095,7 +3094,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
   const rootRef = useRef(null);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
+  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
   const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
   return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
@@ -7818,7 +7817,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
   useDisableBodyScroll(isOpen && wrapperRef.current);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useTransitionVisibility(wrapperRef, !!isOpen);
+  const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
 
   // Handle focus trap.
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -8625,7 +8624,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     icon
   } = NOTIFICATION_CONFIGURATION[type] || {};
   const rootRef = useRef(null);
-  const isVisible = useTransitionVisibility(rootRef, !!isOpen);
+  const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
     if (isFunction(onActionClick)) {