Remove react-transition-group dependency

.changeset/rude-books-drum.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Animation related classes are made now deprecated: `.iui-enter`, `.iui-enter-active`, `.iui-exit`, `.iui-exit-active`.

.changeset/tidy-geckos-check.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Removed dependency on `react-transition-group`.

apps/react-workshop/src/Toasts.test.ts

@@ -20,6 +20,9 @@ describe('Toasts', () => {
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });
+
+      // Wait for entry animation to complete
+      cy.wait(240);
       cy.compareSnapshot(testName);
     });
   });

packages/itwinui-css/src/mixins.scss

@@ -41,37 +41,6 @@
   }
 }
 
-/// Classes for react-transition-group
-/// Used for expand/collapse transitions. Needs height/width to be set in JS.
-@mixin iui-transition-group {
-  $transition-rule:
-    opacity var(--iui-duration-1) ease-out,
-    width var(--iui-duration-1) ease-out,
-    height var(--iui-duration-1) ease-out;
-
-  &.iui-enter {
-    opacity: 0;
-  }
-
-  &.iui-enter-active {
-    opacity: 1;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-
-  &.iui-exit {
-    opacity: 1;
-  }
-
-  &.iui-exit-active {
-    opacity: 0;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: $transition-rule;
-    }
-  }
-}
-
 @mixin safari-only {
   @supports (-apple-pay-button-style: inherit) {
     @content;

packages/itwinui-css/src/side-navigation/side-navigation.scss

@@ -162,13 +162,6 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
   background-color: var(--iui-color-background);
   border-inline-end: 1px solid var(--iui-color-border);
 
-  @include mixins.iui-transition-group;
-
-  &.iui-enter-active,
-  &.iui-exit-active {
-    display: flex;
-  }
-
   &-content {
     padding-block: 0 var(--iui-size-s);
     padding-inline: var(--iui-size-s);

packages/itwinui-css/src/table/base.scss

@@ -211,7 +211,6 @@
       border-inline-end: 1px solid transparent;
       border-block-end: 1px solid var(--iui-color-border);
       flex-shrink: 0;
-      @include mixins.iui-transition-group;
     }
 
     // #region Selection

packages/itwinui-react/package.json

@@ -109,8 +109,7 @@
     "@tanstack/react-virtual": "^3.8.2",
     "classnames": "^2.3.2",
     "jotai": "^2.8.0",
-    "react-table": "^7.8.0",
-    "react-transition-group": "^4.4.5"
+    "react-table": "^7.8.0"
   },
   "devDependencies": {
     "@swc/cli": "^0.5.1",
@@ -121,7 +120,6 @@
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@types/react-transition-group": "^4.4.10",
     "@vitest/coverage-v8": "^1.2.1",
     "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",

packages/itwinui-react/src/core/Dialog/Dialog.tsx

@@ -13,7 +13,6 @@ import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { Transition } from 'react-transition-group';
 
 type DialogProps = {
   /**
@@ -42,37 +41,50 @@ const DialogComponent = React.forwardRef((props, ref) => {
   } = props;
 
   const dialogRootRef = React.useRef<HTMLDivElement>(null);
+  const mergedRefs = useMergedRefs(ref, dialogRootRef);
 
-  return (
-    <Transition in={isOpen} timeout={{ exit: 600 }} mountOnEnter unmountOnExit>
-      <DialogContext.Provider
-        value={{
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        }}
-      >
-        <Portal portal={portal}>
-          <Box
-            className={cx('iui-dialog-wrapper', className)}
-            data-iui-relative={relativeTo === 'container'}
-            ref={useMergedRefs(ref, dialogRootRef)}
-            {...rest}
-          />
-        </Portal>
-      </DialogContext.Provider>
-    </Transition>
-  );
+  const [shouldBeMounted, setShouldBeMounted] = React.useState(isOpen);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setShouldBeMounted(true);
+    }
+    // Wait for DialogMain to receive the isOpen=false to properly handle its exit. E.g. move focus to trigger.
+    else {
+      setTimeout(() => {
+        setShouldBeMounted(false);
+      }, 600);
+    }
+  }, [isOpen]);
+
+  return shouldBeMounted ? (
+    <DialogContext.Provider
+      value={{
+        isOpen,
+        onClose,
+        closeOnEsc,
+        closeOnExternalClick,
+        isDismissible,
+        preventDocumentScroll,
+        trapFocus,
+        setFocus,
+        isDraggable,
+        isResizable,
+        relativeTo,
+        dialogRootRef,
+        placement,
+      }}
+    >
+      <Portal portal={portal}>
+        <Box
+          className={cx('iui-dialog-wrapper', className)}
+          data-iui-relative={relativeTo === 'container'}
+          ref={mergedRefs}
+          {...rest}
+        />
+      </Portal>
+    </DialogContext.Provider>
+  ) : null;
 }) as PolymorphicForwardRefComponent<'div', DialogProps>;
 if (process.env.NODE_ENV === 'development') {
   DialogComponent.displayName = 'Dialog';

packages/itwinui-react/src/core/Dialog/DialogMain.tsx

@@ -16,7 +16,6 @@ import {
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import type { DialogContextProps } from './DialogContext.js';
-import { Transition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
 
@@ -203,36 +202,53 @@ export const DialogMain = React.forwardRef((props, ref) => {
     </Box>
   );
 
-  return (
-    <Transition
-      in={isOpen}
-      appear={true}
-      timeout={{ exit: 600 }}
-      // Focuses dialog when opened
-      onEntered={() => {
-        previousFocusedElement.current = dialogRef.current?.ownerDocument
-          .activeElement as HTMLElement;
-        setFocus && dialogRef.current?.focus({ preventScroll: true });
-      }}
-      // Brings back focus to the previously focused element when closed
-      onExit={() => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        ) {
-          previousFocusedElement.current?.focus();
-        }
-      }}
-      unmountOnExit={true}
-      nodeRef={dialogRef}
-    >
-      <DialogDragContext.Provider value={{ onPointerDown: handlePointerDown }}>
-        {trapFocus && <FocusTrap>{content}</FocusTrap>}
-        {!trapFocus && content}
-      </DialogDragContext.Provider>
-    </Transition>
-  );
+  /** Focuses dialog when opened. */
+  const onEnter = React.useCallback(() => {
+    previousFocusedElement.current = dialogRef.current?.ownerDocument
+      .activeElement as HTMLElement;
+    setFocus && dialogRef.current?.focus({ preventScroll: true });
+  }, [setFocus]);
+
+  /** Brings back focus to the previously focused element when closed. */
+  const onExit = React.useCallback(() => {
+    if (
+      dialogRef.current?.contains(
+        dialogRef.current?.ownerDocument.activeElement,
+      )
+    ) {
+      previousFocusedElement.current?.focus();
+    }
+  }, []);
+
+  const [prevIsOpen, setPrevIsOpen] = React.useState<typeof isOpen>(false);
+  const [shouldBeMounted, setShouldBeMounted] = React.useState(isOpen);
+
+  if (prevIsOpen !== isOpen) {
+    setPrevIsOpen(isOpen);
+
+    if (isOpen) {
+      // Mount *before* handling dialog entry.
+      queueMicrotask(() => {
+        onEnter();
+      });
+
+      setShouldBeMounted(true);
+    } else {
+      onExit();
+
+      // Wait for the animation to end
+      setTimeout(() => {
+        setShouldBeMounted(false);
+      }, 600);
+    }
+  }
+
+  return shouldBeMounted ? (
+    <DialogDragContext.Provider value={{ onPointerDown: handlePointerDown }}>
+      {trapFocus && <FocusTrap>{content}</FocusTrap>}
+      {!trapFocus && content}
+    </DialogDragContext.Provider>
+  ) : null;
 }) as PolymorphicForwardRefComponent<'div', DialogMainProps>;
 if (process.env.NODE_ENV === 'development') {
   DialogMain.displayName = 'Dialog.Main';

packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  WithCSSTransition,
-  SvgChevronRight,
-  Box,
-  useControlledState,
-} from '../../utils/index.js';
+import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 
@@ -45,12 +40,12 @@ type SideNavigationProps = {
    */
   onExpanderClick?: () => void;
   /**
-   * Submenu to show supplemental info assicated to the main item.
+   * Submenu to show supplemental info associated to the main item.
    *
    * Should be used with the `isSubmenuOpen` props from both `SideNavigation` and `SidenavButton`.
    * @example
    * <SideNavigation
-   *   // ...
+   *   // …
    *   submenu={(
    *     <SidenavSubmenu>
    *       <SidenavSubmenuHeader>Documents</SidenavSubmenuHeader>
@@ -178,16 +173,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
           {expanderPlacement === 'bottom' && ExpandButton}
         </Box>
 
-        {submenu && (
-          <WithCSSTransition
-            in={isSubmenuOpen}
-            dimension='width'
-            timeout={200}
-            classNames='iui'
-          >
-            {submenu}
-          </WithCSSTransition>
-        )}
+        {submenu && isSubmenuOpen ? submenu : null}
       </Box>
     </SidenavExpandedContext.Provider>
   );

packages/itwinui-react/src/core/Toast/Toast.test.tsx

@@ -13,6 +13,15 @@ import {
 import { userEvent } from '@testing-library/user-event';
 import { ToastProvider } from './Toaster.js';
 
+// Set reduced motion to not trigger animations since JSDom doesn't mock `animate()`.
+const originalMatchMedia = window.matchMedia;
+beforeAll(() => {
+  window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+});
+afterAll(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
 it('renders the category classes & icons correctly', () => {
   const categories: Array<ToastCategory> = [
     'negative',