@lumx/react 3.6.1 → 3.6.2-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.1",
-        "@lumx/icons": "^3.6.1",
+        "@lumx/core": "^3.6.2-alpha.0",
+        "@lumx/icons": "^3.6.2-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -113,5 +113,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.1"
+    "version": "3.6.2-alpha.0"
 }

package/src/components/dialog/Dialog.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { Progress, ProgressVariant, Size } from '@lumx/react';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
@@ -185,7 +185,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const rootRef = useRef<HTMLDivElement>(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;
 

package/src/components/lightbox/Lightbox.tsx

@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
 import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
-import { DOCUMENT } from '@lumx/react/constants';
+import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
@@ -88,7 +88,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     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

package/src/components/notification/Notification.tsx

@@ -7,7 +7,7 @@ import isFunction from 'lodash/isFunction';
 
 import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -80,7 +80,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
     }
     const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};
     const rootRef = useRef<HTMLDivElement>(null);
-    const isVisible = useTransitionVisibility(rootRef, !!isOpen);
+    const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
     const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
 
     const handleCallback = (evt: React.MouseEvent) => {

package/src/hooks/useTransitionVisibility.ts

@@ -12,6 +12,7 @@ import { userHasReducedMotion } from '@lumx/react/utils/userHasReducedMotion';
 export const useTransitionVisibility = (
     ref: RefObject<HTMLElement>,
     isComponentVisible: boolean,
+    timeout: number,
     onVisibilityChange?: (isVisible: boolean) => void,
 ) => {
     const [isVisible, setVisible] = useState(isComponentVisible);
@@ -26,22 +27,15 @@ export const useTransitionVisibility = (
         const { current: element } = 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: TransitionEvent) => {
-            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) {