@lumx/react 3.0.4 → 3.0.5-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.4",
-        "@lumx/icons": "^3.0.4",
+        "@lumx/core": "^3.0.5-alpha.1",
+        "@lumx/icons": "^3.0.5-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -114,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.4",
-    "gitHead": "a2e7c8a0dab1f63d23d14a32255525cd8bef1be5"
+    "version": "3.0.5-alpha.1",
+    "gitHead": "e05f8419842b4c8ebdb9b21026e17d18ec6ebbbb"
 }

package/src/components/dialog/Dialog.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { Progress, ProgressVariant, Size } from '@lumx/react';
 
-import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
+import { 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';
@@ -16,8 +16,8 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 
 /**
  * Defines the props of the component.
@@ -166,15 +166,15 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const footerChildProps = (footerChild as ReactElement)?.props;
     const footerChildContent = footerChildProps?.children;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRefs = useRef([wrapperRef]);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const rootRef = useRef<HTMLDivElement>(null);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
+
     return isOpen || isVisible
         ? createPortal(
               <div

package/src/components/lightbox/Lightbox.tsx

@@ -10,13 +10,11 @@ import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-
-const LIGHTBOX_TRANSITION_DURATION = 400;
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 
 /**
  * Defines the props of the component.
@@ -82,7 +80,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     useDisableBodyScroll(isOpen && wrapperRef.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION);
+    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen);
 
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/components/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -7,12 +7,13 @@ import isFunction from 'lodash/isFunction';
 
 import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
-import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
+import { DOCUMENT } 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';
 
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
+import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Defines the props of the component.
@@ -78,7 +79,8 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         return null;
     }
     const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};
-    const isVisible = useDelayedVisibility(!!isOpen, NOTIFICATION_TRANSITION_DURATION);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const isVisible = useTransitionVisibility(rootRef, !!isOpen);
     const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);
 
     const handleCallback = (evt: React.MouseEvent) => {
@@ -92,7 +94,7 @@ export const Notification: Comp<NotificationProps, HTMLDivElement> = forwardRef(
         ? createPortal(
               // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
               <div
-                  ref={ref}
+                  ref={mergeRefs(ref, rootRef)}
                   role="alert"
                   {...forwardedProps}
                   className={classNames(

package/src/hooks/useTransitionVisibility.ts

@@ -0,0 +1,53 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+/**
+ * Returns true if the component is visible tracking the opacity transition.
+ *
+ * @param ref Element on which to listen the transition event.
+ * @param isComponentVisible Whether the component intends to be visible or not.
+ * @param onVisibilityChange Callback called when the visibility changes.
+ * @return true if the component should be rendered
+ */
+export const useTransitionVisibility = (
+    ref: RefObject<HTMLElement>,
+    isComponentVisible: boolean,
+    onVisibilityChange?: (isVisible: boolean) => void,
+) => {
+    const [isVisible, setVisible] = useState(isComponentVisible);
+    const previousVisibility = useRef(isVisible);
+
+    useEffect(() => {
+        if (isComponentVisible) {
+            setVisible(true);
+        } else if (!window.TransitionEvent) {
+            // Transition event is not available so visibility is set to false directly.
+            setVisible(false);
+        }
+    }, [isComponentVisible]);
+
+    useEffect(() => {
+        if (onVisibilityChange && previousVisibility.current !== isVisible) {
+            onVisibilityChange(isVisible);
+            previousVisibility.current = isVisible;
+        }
+    }, [isVisible, onVisibilityChange]);
+
+    useEffect(() => {
+        const { current: element } = ref;
+        if (!element) {
+            return undefined;
+        }
+
+        // Listen opacity transition
+        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);
+        };
+    });
+
+    return isVisible || isComponentVisible;
+};

package/src/hooks/useDelayedVisibility.tsx

@@ -1,44 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-
-/**
- * Returns true if the component is visible taking into account the component's
- * own visibility and the animations delay
- *
- * @param isComponentVisible Whether the component intends to be visible or not.
- * @param transitionDuration time in ms that the transition takes for the specific component.
- * @param onVisibilityChange Callback called when the visibility changes.
- * @return true if the component should be rendered
- */
-export function useDelayedVisibility(
-    isComponentVisible: boolean,
-    transitionDuration: number,
-    onVisibilityChange?: (isVisible: boolean) => void,
-): boolean {
-    // Delay visibility to account for the 400ms of CSS opacity animation.
-    const [isVisible, setVisible] = useState(isComponentVisible);
-
-    useEffect(() => {
-        if (isComponentVisible) {
-            setVisible(true);
-        } else {
-            setTimeout(() => setVisible(false), transitionDuration);
-        }
-    }, [isComponentVisible, transitionDuration]);
-
-    /**
-     * Since we don't want onVisibiltyChange function to trigger itself if when it changes,
-     * we store the previous visibility and only trigger when visibility is different
-     * than previous value.
-     */
-
-    const previousVisibility = useRef(isVisible);
-
-    useEffect(() => {
-        if (onVisibilityChange && previousVisibility.current !== isVisible) {
-            onVisibilityChange(isVisible);
-            previousVisibility.current = isVisible;
-        }
-    }, [isVisible, onVisibilityChange]);
-
-    return isComponentVisible || isVisible;
-}