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

package/cjs/core/Dialog/DialogMainContext.js

@@ -0,0 +1,23 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  DialogMainContext: function () {
+    return DialogMainContext;
+  },
+  useDialogMainContext: function () {
+    return useDialogMainContext;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const DialogMainContext = _react.createContext(null);
+const useDialogMainContext = () => _react.useContext(DialogMainContext);

package/cjs/core/Dialog/DialogTitleBar.js

@@ -15,11 +15,13 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _DialogContext = require('./DialogContext.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const _DialogTitleBarTitle = require('./DialogTitleBarTitle.js');
 const _DialogDragContext = require('./DialogDragContext.js');
 const DialogTitleBar = Object.assign(
   _react.forwardRef((props, ref) => {
     let dialogContext = (0, _DialogContext.useDialogContext)();
+    let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
     let {
       children,
       titleText,
@@ -31,6 +33,13 @@ const DialogTitleBar = Object.assign(
       ...rest
     } = props;
     let { onPointerDown } = (0, _DialogDragContext.useDialogDragContext)();
+    let onClick = _react.useCallback(
+      (e) => {
+        dialogMainContext?.beforeClose();
+        onClose?.(e);
+      },
+      [dialogMainContext, onClose],
+    );
     return _react.createElement(
       _index.Box,
       {
@@ -60,7 +69,7 @@ const DialogTitleBar = Object.assign(
                 {
                   size: 'small',
                   styleType: 'borderless',
-                  onClick: onClose,
+                  onClick: onClick,
                   'aria-label': 'Close',
                   'data-iui-shift': 'right',
                 },

package/cjs/core/Panels/Panels.js

@@ -166,7 +166,7 @@ const PanelTrigger = (props) => {
     panels,
   } = (0, _index.useSafeContext)(PanelsWrapperContext);
   let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
-  let fallbackId = _react.useId();
+  let fallbackId = (0, _index.useId)();
   let triggerId = children.props.id || fallbackId;
   let onClick = _react.useCallback(() => {
     if (null == activePanel) return;

package/cjs/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>

package/cjs/core/SideNavigation/SideNavigation.js

@@ -125,17 +125,7 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
         ),
         'bottom' === expanderPlacement && ExpandButton,
       ),
-      submenu &&
-        _react.createElement(
-          _index.WithCSSTransition,
-          {
-            in: isSubmenuOpen,
-            dimension: 'width',
-            timeout: 200,
-            classNames: 'iui',
-          },
-          submenu,
-        ),
+      submenu && isSubmenuOpen ? submenu : null,
     ),
   );
 });

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -29,19 +29,18 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let newSelectedRowIds = {};
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
+    let hasSubComponents = !!row.initialSubRows[0]?.original[_Table.iuiId];
+    let hasSubRows = row.subRows.length > 0 && !hasSubComponents;
     let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[_Table.iuiId] === void 0)
+    if (hasSubRows)
       row.initialSubRows.forEach((subRow) => {
         let result = handleRow(subRow);
         if (!result) isAllSubSelected = false;
       });
-    if (
-      newState.selectedRowIds[row.id] &&
-      (!instance.selectSubRows ||
-        !row.initialSubRows.length ||
-        isAllSubSelected)
-    )
-      newSelectedRowIds[row.id] = true;
+    let isRowSelected = newState.selectedRowIds[row.id];
+    let case1 = isRowSelected && (!instance.selectSubRows || !hasSubRows);
+    let case2 = hasSubRows && isAllSubSelected;
+    if (case1 || case2) newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];
   };
   instance.initialRows.forEach((row) => handleRow(row));

package/cjs/core/Tabs/Tabs.js

@@ -174,7 +174,15 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

package/cjs/core/ThemeProvider/ThemeContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
+import type { FutureOptions, ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType;
     themeOptions?: ThemeOptions;
     portalContainer?: HTMLElement | null;
+    future?: FutureOptions;
 } | undefined>;

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -6,14 +6,18 @@ export type ThemeOptions = {
      * Will default to user preference if browser supports it.
      */
     highContrast?: boolean;
+};
+export type FutureOptions = {
     /**
+     * @alpha
+     *
      * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
      *
      * This is useful in making apps looks like future versions of iTwinUI to help with incremental adoption.
      *
      * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
      */
-    bridgeToFutureVersions?: boolean;
+    themeBridge?: boolean;
 };
 export type ThemeType = 'light' | 'dark' | 'os';
 type RootProps = {
@@ -26,13 +30,13 @@ type RootProps = {
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
      * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
-     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
-     * and `portalContainer` (if possible).
+     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`,
+     * `portalContainer`, and `future.themeBridge` (if possible).
      *
      * @default 'inherit'
      */
     theme?: ThemeType | 'inherit';
-    themeOptions?: Pick<ThemeOptions, 'highContrast' | 'bridgeToFutureVersions'> & {
+    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
         /**
          * Whether or not the element should apply the recommended `background-color` on itself.
          *
@@ -46,8 +50,12 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
+    /**
+     * Options to help with early adoption of features from future versions.
+     */
+    future?: FutureOptions;
 };
-type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
+type ThemeProviderOwnProps = Pick<RootProps, 'theme' | 'future'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
     /**

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -21,13 +21,14 @@ const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
 const ownerDocumentAtom = (0, _jotai.atom)(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -39,11 +40,8 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge = parent.context?.future?.themeBridge);
   let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
@@ -51,8 +49,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return _react.createElement(
     _index.ScopeProvider,
@@ -80,6 +79,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: (0, _index.useMergedRefs)(
                 forwardedRef,
                 setRootElement,
@@ -91,6 +91,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             _react.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -118,7 +119,7 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
   });
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
   let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
@@ -138,7 +139,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -188,6 +189,7 @@ const PortalContainer = _react.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
@@ -218,6 +220,7 @@ const PortalContainer = _react.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/cjs/core/Toast/Toast.d.ts

@@ -66,7 +66,7 @@ export type ToastProps = {
  * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
-export declare const Toast: (props: ToastProps) => React.JSX.Element;
+export declare const Toast: (props: ToastProps) => React.JSX.Element | null;
 export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
     onClose?: () => void;
     contentProps?: React.ComponentProps<'div'>;

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.0';
+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/cjs/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/esm/core/Dialog/Dialog.d.ts

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