Refactored transitionend handling

Author: Eric Olkowski

packages/react-core/src/components/Alert/Alert.tsx

@@ -145,49 +145,27 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const shouldDismiss = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
   const [isDismissed, setIsDismissed] = React.useState(false);
-  const { hasAnimations } = React.useContext(AlertGroupContext);
+  const { hasAnimations, updateTransitionEnd } = React.useContext(AlertGroupContext);
   const { offstageRight } = alertGroupStyles.modifiers;
 
   const getParentAlertGroupItem = () => divRef.current?.closest(`.${alertGroupStyles.alertGroupItem}`);
   React.useEffect(() => {
     const shouldSetDismissed = shouldDismiss && !isDismissed;
-    if (shouldSetDismissed && hasAnimations) {
-      const alertGroupItem = getParentAlertGroupItem();
-      alertGroupItem?.classList.add(offstageRight);
-    }
-
-    if (shouldSetDismissed && !hasAnimations) {
-      setIsDismissed(true);
+    if (!shouldSetDismissed) {
+      return;
     }
-  }, [shouldDismiss, hasAnimations, isDismissed]);
 
-  React.useEffect(() => {
-    const handleOnTransitionEnd = (event: TransitionEvent) => {
-      const prefersReducedMotion = !window.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
-      const parentAlertGroupItem = getParentAlertGroupItem();
-      if (
-        parentAlertGroupItem?.contains(event.target as Node) &&
-        // If a user has no motion preference, we want to target the grid template rows transition
-        // so that the onClose is called after the "slide up" animation of other alerts finishes. Otherwise
-        // we want to target the opacity transition since no other transition with be firing.
-        ((prefersReducedMotion && event.propertyName === 'opacity') ||
-          (!prefersReducedMotion && event.propertyName === 'grid-template-rows')) &&
-        (event.target as HTMLElement).className.includes(offstageRight) &&
-        !isDismissed &&
-        shouldDismiss
-      ) {
-        setIsDismissed(true);
-      }
-    };
+    const alertGroupItem = getParentAlertGroupItem();
+    alertGroupItem?.classList.add(offstageRight);
 
     if (hasAnimations) {
-      window.addEventListener('transitionend', handleOnTransitionEnd);
+      updateTransitionEnd(() => {
+        setIsDismissed(true);
+      });
+    } else {
+      setIsDismissed(true);
     }
-
-    return () => {
-      window.removeEventListener('transitionend', handleOnTransitionEnd);
-    };
-  }, [hasAnimations, shouldDismiss, isDismissed]);
+  }, [shouldDismiss, isDismissed]);
 
   React.useEffect(() => {
     const calculatedTimeout = timeout === true ? 8000 : Number(timeout);

packages/react-core/src/components/Alert/AlertActionCloseButton.tsx

@@ -27,48 +27,20 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
   variantLabel,
   ...props
 }: AlertActionCloseButtonProps) => {
-  const [shouldDismissOnTransition, setShouldDismissOnTransition] = React.useState(false);
   const closeButtonRef = React.useRef(null);
-  const { hasAnimations } = React.useContext(AlertGroupContext);
+  const { hasAnimations, updateTransitionEnd } = React.useContext(AlertGroupContext);
   const { offstageRight } = alertGroupStyles.modifiers;
 
   const getParentAlertGroupItem = () => closeButtonRef.current?.closest(`.${alertGroupStyles.alertGroupItem}`);
   const handleOnClick = () => {
     if (hasAnimations) {
       getParentAlertGroupItem()?.classList.add(offstageRight);
-      setShouldDismissOnTransition(true);
+      updateTransitionEnd(() => onClose());
     } else {
       onClose();
     }
   };
 
-  React.useEffect(() => {
-    const handleOnTransitionEnd = (event: TransitionEvent) => {
-      const prefersReducedMotion = !window.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
-      const parentAlertGroupItem = getParentAlertGroupItem();
-      if (
-        shouldDismissOnTransition &&
-        parentAlertGroupItem?.contains(event.target as Node) &&
-        // If a user has no motion preference, we want to target the grid template rows transition
-        // so that the onClose is called after the "slide up" animation of other alerts finishes. Otherwise
-        // we want to target the opacity transition since no other transition with be firing.
-        ((prefersReducedMotion && event.propertyName === 'opacity') ||
-          (!prefersReducedMotion && event.propertyName === 'grid-template-rows')) &&
-        (event.target as HTMLElement).className.includes(offstageRight)
-      ) {
-        onClose();
-      }
-    };
-
-    if (hasAnimations) {
-      window.addEventListener('transitionend', handleOnTransitionEnd);
-    }
-
-    return () => {
-      window.removeEventListener('transitionend', handleOnTransitionEnd);
-    };
-  }, [hasAnimations, shouldDismissOnTransition]);
-
   return (
     <AlertContext.Consumer>
       {({ title, variantLabel: alertVariantLabel }) => (

packages/react-core/src/components/Alert/AlertGroup.tsx

@@ -8,7 +8,9 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   className?: string;
   /** Alerts to be rendered in the AlertGroup */
   children?: React.ReactNode;
-  /** Flag indicating whether alerts will have animations when being added or removed from the AlertGroup. */
+  /** @beta Flag to indicate whether Alerts are animated upon rendering and being dismissed. This is intended
+   * to be set to false for testing purposes only.
+   */
   hasAnimations?: boolean;
   /** Toast notifications are positioned at the top right corner of the viewport */
   isToast?: boolean;

packages/react-core/src/components/Alert/AlertGroupContext.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 
 interface AlertGroupContext {
   hasAnimations?: boolean;
+  updateTransitionEnd?: (onTransitionEnd: React.Dispatch<React.SetStateAction<() => void>>) => void;
 }
 
-export const AlertGroupContext = React.createContext<AlertGroupContext>({ hasAnimations: false });
+export const AlertGroupContext = React.createContext<AlertGroupContext>({
+  hasAnimations: false,
+  updateTransitionEnd: () => {}
+});

packages/react-core/src/components/Alert/AlertGroupInline.tsx

@@ -14,36 +14,58 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   onOverflowClick,
   overflowMessage,
   ...props
-}: AlertGroupProps) => (
-  <AlertGroupContext.Provider value={{ hasAnimations }}>
-    <ul
-      role="list"
-      aria-live={isLiveRegion ? 'polite' : null}
-      aria-atomic={isLiveRegion ? false : null}
-      className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
-      {...props}
-    >
-      {React.Children.toArray(children).map((alert, index) => (
-        <li
-          className={css(styles.alertGroupItem, hasAnimations && styles.modifiers.offstageTop)}
-          key={
-            (alert as React.ReactElement<AlertProps>).props?.id ||
-            `alertGroupItem-${(alert as React.ReactElement<AlertProps>).key}` ||
-            index
-          }
-        >
-          {alert}
-        </li>
-      ))}
-      {overflowMessage && (
-        <li>
-          <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
-            {overflowMessage}
-          </button>
-        </li>
-      )}
-    </ul>
-  </AlertGroupContext.Provider>
-);
+}: AlertGroupProps) => {
+  const [handleTransitionEnd, setHandleTransitionEnd] = React.useState(() => () => {});
+  const updateTransitionEnd = (onTransitionEnd: React.Dispatch<React.SetStateAction<() => void>>) => {
+    setHandleTransitionEnd(() => onTransitionEnd);
+  };
+  return (
+    <AlertGroupContext.Provider value={{ hasAnimations, updateTransitionEnd }}>
+      <ul
+        role="list"
+        aria-live={isLiveRegion ? 'polite' : null}
+        aria-atomic={isLiveRegion ? false : null}
+        className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
+        {...props}
+      >
+        {React.Children.toArray(children).map((alert, index) => (
+          <li
+            onTransitionEnd={(event: React.TransitionEvent<HTMLLIElement>) => {
+              if (!hasAnimations) {
+                return;
+              }
+
+              const prefersReducedMotion = !window.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
+              if (
+                // If a user has no motion preference, we want to target the grid template rows transition
+                // so that the onClose is called after the "slide up" animation of other alerts finishes.
+                // If they have motion preference, we don't need to check for a specific transition since only opacity should fire.
+                (prefersReducedMotion || (!prefersReducedMotion && event.propertyName === 'grid-template-rows')) &&
+                (event.target as HTMLElement).className.includes(styles.modifiers.offstageRight)
+              ) {
+                handleTransitionEnd();
+              }
+            }}
+            className={css(styles.alertGroupItem, hasAnimations && styles.modifiers.offstageTop)}
+            key={
+              (alert as React.ReactElement<AlertProps>).props?.id ||
+              `alertGroupItem-${(alert as React.ReactElement<AlertProps>).key}` ||
+              index
+            }
+          >
+            {alert}
+          </li>
+        ))}
+        {overflowMessage && (
+          <li>
+            <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
+              {overflowMessage}
+            </button>
+          </li>
+        )}
+      </ul>
+    </AlertGroupContext.Provider>
+  );
+};
 
 AlertGroupInline.displayName = 'AlertGroupInline';

packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Alert } from '../../Alert';
@@ -67,13 +67,21 @@ test('Toast Alert Group contains expected modifier class', () => {
 
   expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
 });
-
 test('alertgroup closes when alerts are closed', async () => {
+  window.matchMedia = (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  });
   const onClose = jest.fn();
   const user = userEvent.setup();
-
   render(
-    <AlertGroup hasAnimations={false} isToast appendTo={document.body}>
+    <AlertGroup className="pf-v6-m-no-motion" isToast appendTo={document.body}>
       <Alert
         isLiveRegion
         title={'Test Alert'}
@@ -83,5 +91,6 @@ test('alertgroup closes when alerts are closed', async () => {
   );
 
   await user.click(screen.getByLabelText('Close'));
+  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(onClose).toHaveBeenCalled();
 });

packages/react-core/src/components/Alert/examples/Alert.md

@@ -478,13 +478,3 @@ You may add multiple alerts to an alert group at once. Click the "add alert coll
 ```ts file="./AlertGroupMultipleDynamic.tsx"
 
 ```
-
-### Alert group with animations
-
-You can apply animations to alerts within an `<AlertGroup>` by passing the `hasAnimations` property. Doing so will animate alerts when added or removed from an `<AlertGroup>`. The following example shows both a toast and inline `<AlertGroup>` with animations applied.
-
-When using animations, each alert must have a unique `id` or `key` passed to it.
-
-```ts file="./AlertGroupAnimations.tsx"
-
-```