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

package/cjs/core/Toast/Toast.js

@@ -20,7 +20,6 @@ _export(exports, {
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const _reacttransitiongroup = require('react-transition-group');
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
@@ -48,9 +47,6 @@ const Toast = (props) => {
   let [height, setHeight] = _react.useState(0);
   let thisElement = _react.useRef(null);
   let [margin, setMargin] = _react.useState(0);
-  let motionOk = (0, _index.useMediaQuery)(
-    '(prefers-reduced-motion: no-preference)',
-  );
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -90,81 +86,41 @@ 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(
-    _reacttransitiongroup.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(
-      _index.Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      _react.createElement(
-        'div',
+  let shouldBeMounted = useAnimateToastBasedOnVisibility(isVisible, {
+    thisElement,
+    animateOutTo,
+    onRemove,
+  });
+  return shouldBeMounted
+    ? _react.createElement(
+        _index.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;
 };
 const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
   let {
@@ -239,3 +195,102 @@ const ToastPresentation = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+const useAnimateToastBasedOnVisibility = (isVisible, args) => {
+  let { thisElement, animateOutTo, onRemove } = args;
+  let [shouldBeMounted, setShouldBeMounted] = _react.useState(isVisible);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
+  let onRemoveRef = (0, _index.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/cjs/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/cjs/core/Toast/Toaster.js

@@ -96,16 +96,24 @@ 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/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.17.0-dev.1';
+const e = '3.17.0-dev.2';
 const u = new Proxy(
   {},
   {

package/cjs/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/cjs/utils/components/index.js

@@ -8,7 +8,6 @@ _export_star._(require('./FocusTrap.js'), exports);
 _export_star._(require('./InputContainer.js'), exports);
 _export_star._(require('./InputFlexContainer.js'), exports);
 _export_star._(require('./InputWithIcon.js'), exports);
-_export_star._(require('./WithCSSTransition.js'), exports);
 _export_star._(require('./MiddleTextTruncation.js'), exports);
 _export_star._(require('./AutoclearingHiddenLiveRegion.js'), exports);
 _export_star._(require('./Box.js'), exports);

package/esm/core/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ type DialogProps = {
      * Dialog content.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'dialogRootRef'>;
+} & DialogContextProps;
 /**
  * Dialog component.
  * @example

package/esm/core/Dialog/Dialog.js

@@ -7,7 +7,6 @@ import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../../utils/index.js';
-import { Transition } from 'react-transition-group';
 let DialogComponent = React.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -27,49 +26,40 @@ let DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = React.useRef(null);
-  return React.createElement(
-    Transition,
-    {
-      in: isOpen,
-      timeout: {
-        exit: 600,
-      },
-      mountOnEnter: true,
-      unmountOnExit: true,
-    },
-    React.createElement(
-      DialogContext.Provider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        },
-      },
-      React.createElement(
-        Portal,
+  let mergedRefs = useMergedRefs(ref, dialogRootRef);
+  return isOpen
+    ? React.createElement(
+        DialogContext.Provider,
         {
-          portal: portal,
+          value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            placement,
+          },
         },
-        React.createElement(Box, {
-          className: cx('iui-dialog-wrapper', className),
-          'data-iui-relative': 'container' === relativeTo,
-          ref: useMergedRefs(ref, dialogRootRef),
-          ...rest,
-        }),
-      ),
-    ),
-  );
+        React.createElement(
+          Portal,
+          {
+            portal: portal,
+          },
+          React.createElement(Box, {
+            className: cx('iui-dialog-wrapper', className),
+            'data-iui-relative': 'container' === relativeTo,
+            ref: mergedRefs,
+            ...rest,
+          }),
+        ),
+      )
+    : null;
 });
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,

package/esm/core/Dialog/DialogBackdrop.d.ts

@@ -1,6 +1,6 @@
 import type { BackdropProps } from '../Backdrop/Backdrop.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DialogContextProps } from './DialogContext.js';
+import { type DialogContextProps } from './DialogContext.js';
 type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick' | 'relativeTo'>;
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`

package/esm/core/Dialog/DialogBackdrop.js

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
+import { useDialogMainContext } from './DialogMainContext.js';
 import cx from 'classnames';
 export const DialogBackdrop = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
+  let dialogMainContext = useDialogMainContext();
   let {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -21,7 +23,10 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
   let handleMouseDown = (event) => {
     event.persist();
     if (event.target !== backdropRef.current) return;
-    if (isDismissible && closeOnExternalClick && onClose) onClose(event);
+    if (isDismissible && closeOnExternalClick && onClose) {
+      dialogMainContext?.beforeClose();
+      onClose(event);
+    }
     onMouseDown?.(event);
   };
   return React.createElement(Backdrop, {

package/esm/core/Dialog/DialogMain.js

@@ -10,9 +10,9 @@ import {
   ShadowRoot,
 } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
-import { Transition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
+import { DialogMainContext } from './DialogMainContext.js';
 export const DialogMain = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
   let {
@@ -33,12 +33,13 @@ export const DialogMain = React.forwardRef((props, ref) => {
     placement = dialogContext.placement,
     ...rest
   } = props;
-  let [style, setStyle] = React.useState();
+  let { dialogRootRef } = dialogContext;
   let dialogRef = React.useRef(null);
-  let hasBeenResized = React.useRef(false);
   let previousFocusedElement = React.useRef();
+  let [style, setStyle] = React.useState();
+  let hasBeenResized = React.useRef(false);
   let originalBodyOverflow = React.useRef('');
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   React.useEffect(() => {
@@ -54,17 +55,19 @@ export const DialogMain = React.forwardRef((props, ref) => {
     return () => {
       ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-  }, [isOpen, preventDocumentScroll]);
+  }, [dialogRef, isOpen, preventDocumentScroll]);
   let handleKeyDown = (event) => {
     if (event.altKey) return;
     event.persist();
-    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) {
+      beforeClose();
       onClose(event);
+    }
     onKeyDown?.(event);
   };
   let { onPointerDown, transform } = useDragAndDrop(
     dialogRef,
-    dialogContext.dialogRootRef,
+    dialogRootRef,
     isDraggable,
   );
   let handlePointerDown = React.useCallback(
@@ -84,13 +87,35 @@ export const DialogMain = React.forwardRef((props, ref) => {
       insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
-  }, [isDraggable, isOpen]);
+  }, [dialogRef, isDraggable, isOpen]);
   let setResizeStyle = React.useCallback((newStyle) => {
     setStyle((oldStyle) => ({
       ...oldStyle,
       ...newStyle,
     }));
   }, []);
+  let onEnter = React.useCallback(() => {
+    previousFocusedElement.current =
+      dialogRef.current?.ownerDocument.activeElement;
+    if (setFocus)
+      dialogRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [dialogRef, previousFocusedElement, setFocus]);
+  let beforeClose = React.useCallback(() => {
+    if (
+      dialogRef.current?.contains(
+        dialogRef.current?.ownerDocument.activeElement,
+      )
+    )
+      previousFocusedElement.current?.focus();
+  }, [dialogRef, previousFocusedElement]);
+  let mountRef = React.useCallback(
+    (element) => {
+      if (element) onEnter();
+    },
+    [onEnter],
+  );
   let content = React.createElement(
     Box,
     {
@@ -105,7 +130,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: useMergedRefs(dialogRef, ref),
+      ref: useMergedRefs(dialogRef, mountRef, ref),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -123,7 +148,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
       isResizable &&
         React.createElement(Resizer, {
           elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
+          containerRef: dialogRootRef,
           onResizeStart: () => {
             if (!hasBeenResized.current) {
               hasBeenResized.current = true;
@@ -138,31 +163,14 @@ export const DialogMain = React.forwardRef((props, ref) => {
     children,
   );
   return React.createElement(
-    Transition,
+    DialogMainContext.Provider,
     {
-      in: isOpen,
-      appear: true,
-      timeout: {
-        exit: 600,
-      },
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus &&
-          dialogRef.current?.focus({
-            preventScroll: true,
-          });
-      },
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        )
-          previousFocusedElement.current?.focus();
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
+      value: React.useMemo(
+        () => ({
+          beforeClose,
+        }),
+        [beforeClose],
+      ),
     },
     React.createElement(
       DialogDragContext.Provider,

package/esm/core/Dialog/DialogMainContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type DialogMainContextProps = {
+    beforeClose: () => void;
+};
+export declare const DialogMainContext: React.Context<DialogMainContextProps | null>;
+export declare const useDialogMainContext: () => DialogMainContextProps | null;
+export {};

package/esm/core/Dialog/DialogMainContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export const DialogMainContext = React.createContext(null);
+export const useDialogMainContext = () => React.useContext(DialogMainContext);

package/esm/core/Dialog/DialogTitleBar.js

@@ -3,11 +3,13 @@ import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
+import { useDialogMainContext } from './DialogMainContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';
 export const DialogTitleBar = Object.assign(
   React.forwardRef((props, ref) => {
     let dialogContext = useDialogContext();
+    let dialogMainContext = useDialogMainContext();
     let {
       children,
       titleText,
@@ -19,6 +21,13 @@ export const DialogTitleBar = Object.assign(
       ...rest
     } = props;
     let { onPointerDown } = useDialogDragContext();
+    let onClick = React.useCallback(
+      (e) => {
+        dialogMainContext?.beforeClose();
+        onClose?.(e);
+      },
+      [dialogMainContext, onClose],
+    );
     return React.createElement(
       Box,
       {
@@ -41,7 +50,7 @@ export const DialogTitleBar = Object.assign(
                 {
                   size: 'small',
                   styleType: 'borderless',
-                  onClick: onClose,
+                  onClick: onClick,
                   'aria-label': 'Close',
                   'data-iui-shift': 'right',
                 },

package/esm/core/Panels/Panels.js

@@ -12,6 +12,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Flex } from '../Flex/Flex.js';
@@ -152,7 +153,7 @@ let PanelTrigger = (props) => {
     panels,
   } = useSafeContext(PanelsWrapperContext);
   let { id: panelId } = useSafeContext(PanelContext);
-  let fallbackId = React.useId();
+  let fallbackId = useId();
   let triggerId = children.props.id || fallbackId;
   let onClick = React.useCallback(() => {
     if (null == activePanel) return;

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -25,12 +25,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>