@itwin/itwinui-react 3.17.0-dev.0 → 3.17.0-dev.2

package/esm/core/Toast/Toast.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Transition } from 'react-transition-group';
 import cx from 'classnames';
 import {
   getWindow,
@@ -9,6 +8,7 @@ import {
   useSafeContext,
   ButtonBase,
   useMediaQuery,
+  useLatestRef,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
@@ -33,7 +33,6 @@ export const Toast = (props) => {
   let [height, setHeight] = React.useState(0);
   let thisElement = React.useRef(null);
   let [margin, setMargin] = React.useState(0);
-  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -73,81 +72,41 @@ export const Toast = (props) => {
       setHeight(height);
     }
   };
-  let calculateOutAnimation = (node) => {
-    let translateX = 0;
-    let translateY = 0;
-    if (animateOutTo && node) {
-      let { x: startX, y: startY } = node.getBoundingClientRect();
-      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
-      translateX = endX - startX;
-      translateY = endY - startY;
-    }
-    return {
-      translateX,
-      translateY,
-    };
-  };
-  return React.createElement(
-    Transition,
-    {
-      timeout: {
-        enter: 240,
-        exit: animateOutTo ? 400 : 120,
-      },
-      in: isVisible,
-      appear: true,
-      unmountOnExit: true,
-      onEnter: (node) => {
-        if (motionOk) {
-          node.style.transform = 'translateY(15%)';
-          node.style.transitionTimingFunction = 'ease';
-        }
-      },
-      onEntered: (node) => {
-        if (motionOk) node.style.transform = 'translateY(0)';
-      },
-      onExiting: (node) => {
-        if (motionOk) {
-          let { translateX, translateY } = calculateOutAnimation(node);
-          node.style.transform = animateOutTo
-            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : 'scale(0.9)';
-          node.style.opacity = '0';
-          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
-        }
-      },
-      onExited: onRemove,
-    },
-    React.createElement(
-      Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      React.createElement(
-        'div',
+  let shouldBeMounted = useAnimateToastBasedOnVisibility(isVisible, {
+    thisElement,
+    animateOutTo,
+    onRemove,
+  });
+  return shouldBeMounted
+    ? React.createElement(
+        Box,
         {
-          ref: onRef,
+          ref: thisElement,
+          className: 'iui-toast-all',
+          style: {
+            height,
+            ...marginStyle(),
+          },
         },
-        React.createElement(ToastPresentation, {
-          as: 'div',
-          category: category,
-          content: content,
-          link: link,
-          type: type,
-          hasCloseButton: hasCloseButton,
-          onClose: close,
-          ...domProps?.toastProps,
-          contentProps: domProps?.contentProps,
-        }),
-      ),
-    ),
-  );
+        React.createElement(
+          'div',
+          {
+            ref: onRef,
+          },
+          React.createElement(ToastPresentation, {
+            as: 'div',
+            category: category,
+            content: content,
+            link: link,
+            type: type,
+            hasCloseButton: hasCloseButton,
+            onClose: close,
+            ...domProps?.toastProps,
+            contentProps: domProps?.contentProps,
+          }),
+        ),
+      )
+    : null;
 };
 export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
   let {
@@ -212,3 +171,100 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+let useAnimateToastBasedOnVisibility = (isVisible, args) => {
+  let { thisElement, animateOutTo, onRemove } = args;
+  let [shouldBeMounted, setShouldBeMounted] = React.useState(isVisible);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+  let onRemoveRef = useLatestRef(onRemove);
+  let [prevIsVisible, setPrevIsVisible] = React.useState(void 0);
+  React.useEffect(() => {
+    if (prevIsVisible !== isVisible) {
+      setPrevIsVisible(isVisible);
+      if (isVisible) safeAnimateIn();
+      else safeAnimateOut();
+    }
+    function calculateOutAnimation(node) {
+      let translateX = 0;
+      let translateY = 0;
+      if (animateOutTo && node) {
+        let { x: startX, y: startY } = node.getBoundingClientRect();
+        let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
+        translateX = endX - startX;
+        translateY = endY - startY;
+      }
+      return {
+        translateX,
+        translateY,
+      };
+    }
+    function safeAnimateIn() {
+      setShouldBeMounted(true);
+      queueMicrotask(() => {
+        animateIn();
+      });
+    }
+    function safeAnimateOut() {
+      if (motionOk) {
+        let animation = animateOut();
+        animation?.addEventListener('finish', () => {
+          setShouldBeMounted(false);
+          onRemoveRef.current?.();
+        });
+      } else {
+        setShouldBeMounted(false);
+        onRemoveRef.current?.();
+      }
+    }
+    function animateIn() {
+      if (!motionOk) return;
+      thisElement.current?.animate?.(
+        [
+          {
+            transform: 'translateY(15%)',
+          },
+          {
+            transform: 'translateY(0)',
+          },
+        ],
+        {
+          duration: 240,
+          fill: 'forwards',
+        },
+      );
+    }
+    function animateOut() {
+      if (null == thisElement.current || !motionOk) return;
+      let { translateX, translateY } = calculateOutAnimation(
+        thisElement.current,
+      );
+      let animationDuration = animateOutTo ? 400 : 120;
+      let animation = thisElement.current?.animate?.(
+        [
+          {
+            transform: animateOutTo
+              ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+              : 'scale(0.9)',
+            opacity: 0,
+            transitionDuration: `${animationDuration}ms`,
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 1, 1)',
+          },
+        ],
+        {
+          duration: animationDuration,
+          iterations: 1,
+          fill: 'forwards',
+        },
+      );
+      return animation;
+    }
+  }, [
+    isVisible,
+    prevIsVisible,
+    animateOutTo,
+    motionOk,
+    thisElement,
+    setShouldBeMounted,
+    onRemoveRef,
+  ]);
+  return shouldBeMounted;
+};

package/esm/core/Toast/Toaster.d.ts

@@ -38,7 +38,7 @@ export declare const Toaster: () => React.JSX.Element;
 export declare const ToastProvider: ({ children, inherit, }: {
     children: React.ReactNode;
     inherit?: boolean;
-}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+}) => React.JSX.Element;
 export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
 type ToasterState = {
     toasts: ToastProps[];

package/esm/core/Toast/Toaster.js

@@ -66,16 +66,24 @@ export const ToastProvider = ({ children, inherit = false }) => {
       placement: 'top',
     },
   });
-  if (React.useContext(ToasterStateContext) && inherit) return children;
+  let toasterDispatchContext = React.useContext(ToasterDispatchContext);
+  let toasterStateContext = React.useContext(ToasterStateContext);
+  let shouldReuse = toasterStateContext && inherit;
+  let toasterDispatchContextValue = shouldReuse
+    ? toasterDispatchContext
+    : dispatch;
+  let toasterStateContextValue = shouldReuse
+    ? toasterStateContext
+    : toasterState;
   return React.createElement(
     ToasterDispatchContext.Provider,
     {
-      value: dispatch,
+      value: toasterDispatchContextValue,
     },
     React.createElement(
       ToasterStateContext.Provider,
       {
-        value: toasterState,
+        value: toasterStateContextValue,
       },
       children,
     ),

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.0-dev.0';
+const t = '3.17.0-dev.2';
 const u = new Proxy(
   {},
   {

package/esm/utils/components/index.d.ts

@@ -3,7 +3,6 @@ export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
 export * from './InputWithIcon.js';
-export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';

package/esm/utils/components/index.js

@@ -3,7 +3,6 @@ export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
 export * from './InputWithIcon.js';
-export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';

package/esm/utils/hooks/useGlobals.d.ts

@@ -10,6 +10,7 @@ export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType;
     themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: import("../../core/ThemeProvider/ThemeProvider.js").FutureOptions;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.17.0-dev.0",
+  "version": "3.17.0-dev.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -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,12 +128,12 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "5",
-    "vite": "~5.1.8",
+    "vite": "~5.4.14",
     "vitest": "^1.2.1"
   },
   "peerDependencies": {
-    "react": ">= 17.0.0 < 19.0.0",
-    "react-dom": ">=17.0.0 < 19.0.0"
+    "react": ">=17.0.0 <19.0.0",
+    "react-dom": ">=17.0.0 <19.0.0"
   },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [