@lumx/react 3.0.4-alpha.1 → 3.0.5-alpha.1

package/index.js

@@ -343,13 +343,6 @@ 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.
@@ -2465,42 +2458,6 @@ function partitionMulti(elements, predicates) {
   return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
 }
 
-/**
- * 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
- */
-function useDelayedVisibility(isComponentVisible, transitionDuration, onVisibilityChange) {
-  // 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;
-}
-
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 // Older browsers don't support event options, feature detect it.
@@ -2716,6 +2673,52 @@ const useDisableBodyScroll = modalElement => {
   }, [modalElement]);
 };
 
+/**
+ * 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
+ */
+const useTransitionVisibility = (ref, isComponentVisible, onVisibilityChange) => {
+  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 => {
+      if (e.target !== ref.current || e.propertyName !== 'opacity') return;
+      setVisible(wasVisible => !wasVisible);
+    };
+    element.addEventListener('transitionend', onTransitionEnd);
+    return () => {
+      element.removeEventListener('transitionend', onTransitionEnd);
+    };
+  });
+  return isVisible || isComponentVisible;
+};
+
 const _excluded$h = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange"];
 
 /**
@@ -2827,14 +2830,14 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
   const footerChildProps = footerChild === null || footerChild === void 0 ? void 0 : footerChild.props;
   const footerChildContent = footerChildProps === null || footerChildProps === void 0 ? void 0 : 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(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), onVisibilityChange);
   return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
   }, forwardedProps, {
@@ -7266,7 +7269,6 @@ InputLabel.className = CLASSNAME$w;
 InputLabel.defaultProps = DEFAULT_PROPS$s;
 
 const _excluded$B = ["ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "preventAutoClose", "theme", "zIndex"];
-const LIGHTBOX_TRANSITION_DURATION = 400;
 
 /**
  * Defines the props of the component.
@@ -7318,7 +7320,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
   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
@@ -7906,7 +7908,8 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     color,
     icon
   } = NOTIFICATION_CONFIGURATION[type] || {};
-  const isVisible = useDelayedVisibility(!!isOpen, NOTIFICATION_TRANSITION_DURATION);
+  const rootRef = useRef(null);
+  const isVisible = useTransitionVisibility(rootRef, !!isOpen);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
     if (isFunction(onActionClick)) {
@@ -7918,7 +7921,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   React.createElement("div", _extends({
-    ref: ref,
+    ref: mergeRefs(ref, rootRef),
     role: "alert"
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({