Merge branch 'main' into uyen/table-doc

.changeset/rude-books-drum.md

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

.changeset/tidy-geckos-check.md

@@ -0,0 +1,7 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Removed dependency on `react-transition-group`. Notable changes in components: 
+* `useToaster`: Animations have been reworked to directly use the web animations API.
+* `Dialog` and `Modal`: Exit animations have been temporarily removed.

apps/css-workshop/package.json

@@ -17,11 +17,12 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-    "preview": "astro preview --host",
+    "preview": "npx -y serve dist --listen 3050 -L",
     "clean": "rimraf dist && rimraf node_modules && rimraf .turbo",
     "approve": "backstop --config=./backstop/backstop.cjs approve",
     "test:only": "backstop --config=./backstop/backstop.cjs test --docker",
-    "test": "npm-run-all -p -r \"preview\" \"test:only {1}\" --"
+    "test:only:wait-for-preview": "npx -y wait-on http://localhost:3050 && pnpm run test:only",
+    "test": "npm-run-all -p -r \"preview\" \"test:only:wait-for-preview {1}\" --"
   },
   "prettier": "configs/prettier-astro-config.js"
 }

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",
@@ -130,7 +128,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "5",
-    "vite": "~5.1.8",
+    "vite": "~5.4.14",
     "vitest": "^1.2.1"
   },
   "peerDependencies": {

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

@@ -177,13 +177,6 @@ it('should not stay in the DOM when isOpen=false', () => {
 
   rerender(<Component isOpen={false} />);
 
-  // Should be there in the DOM until the exit animation is finished
-  dialogWrapper = container.querySelector('.iui-dialog-wrapper') as HTMLElement;
-  expect(dialogWrapper).toBeTruthy();
-
-  // Since timeout for the exit animation is 600ms
-  act(() => vi.advanceTimersByTime(600));
-
   dialogWrapper = container.querySelector('.iui-dialog-wrapper') as HTMLElement;
   expect(dialogWrapper).toBeFalsy();
 });

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

@@ -13,14 +13,13 @@ 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 = {
   /**
    * Dialog content.
    */
   children: React.ReactNode;
-} & Omit<DialogContextProps, 'dialogRootRef'>;
+} & DialogContextProps;
 
 const DialogComponent = React.forwardRef((props, ref) => {
   const {
@@ -42,37 +41,35 @@ 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>
-  );
+  return isOpen ? (
+    <DialogContext.Provider
+      value={{
+        isOpen,
+        onClose,
+        closeOnEsc,
+        closeOnExternalClick,
+        isDismissible,
+        preventDocumentScroll,
+        trapFocus,
+        setFocus,
+        isDraggable,
+        isResizable,
+        relativeTo,
+        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/DialogBackdrop.tsx

@@ -7,8 +7,8 @@ import { Backdrop } from '../Backdrop/Backdrop.js';
 import type { BackdropProps } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { useDialogContext } from './DialogContext.js';
-import type { DialogContextProps } from './DialogContext.js';
+import { useDialogContext, type DialogContextProps } from './DialogContext.js';
+import { useDialogMainContext } from './DialogMainContext.js';
 import cx from 'classnames';
 
 type DialogBackdropProps = BackdropProps &
@@ -25,6 +25,8 @@ type DialogBackdropProps = BackdropProps &
  */
 export const DialogBackdrop = React.forwardRef((props, ref) => {
   const dialogContext = useDialogContext();
+  const dialogMainContext = useDialogMainContext();
+
   const {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -47,6 +49,7 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
       return;
     }
     if (isDismissible && closeOnExternalClick && onClose) {
+      dialogMainContext?.beforeClose();
       onClose(event);
     }
     onMouseDown?.(event);