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

package/DEV-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/DEV-esm/styles.js

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

package/DEV-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/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2021-2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2021-2025 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/cjs/core/Dialog/Dialog.d.ts

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

package/cjs/core/Dialog/Dialog.js

@@ -19,7 +19,6 @@ const _DialogContext = require('./DialogContext.js');
 const _DialogButtonBar = require('./DialogButtonBar.js');
 const _DialogMain = require('./DialogMain.js');
 const _index = require('../../utils/index.js');
-const _reacttransitiongroup = require('react-transition-group');
 const DialogComponent = _react.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -39,49 +38,43 @@ const DialogComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = _react.useRef(null);
-  return _react.createElement(
-    _reacttransitiongroup.Transition,
-    {
-      in: isOpen,
-      timeout: {
-        exit: 600,
-      },
-      mountOnEnter: true,
-      unmountOnExit: true,
-    },
-    _react.createElement(
-      _DialogContext.DialogContext.Provider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        },
-      },
-      _react.createElement(
-        _index.Portal,
+  let mergedRefs = (0, _index.useMergedRefs)(ref, dialogRootRef);
+  return isOpen
+    ? _react.createElement(
+        _DialogContext.DialogContext.Provider,
         {
-          portal: portal,
+          value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            placement,
+          },
         },
-        _react.createElement(_index.Box, {
-          className: (0, _classnames.default)('iui-dialog-wrapper', className),
-          'data-iui-relative': 'container' === relativeTo,
-          ref: (0, _index.useMergedRefs)(ref, dialogRootRef),
-          ...rest,
-        }),
-      ),
-    ),
-  );
+        _react.createElement(
+          _index.Portal,
+          {
+            portal: portal,
+          },
+          _react.createElement(_index.Box, {
+            className: (0, _classnames.default)(
+              'iui-dialog-wrapper',
+              className,
+            ),
+            'data-iui-relative': 'container' === relativeTo,
+            ref: mergedRefs,
+            ...rest,
+          }),
+        ),
+      )
+    : null;
 });
 const Dialog = Object.assign(DialogComponent, {
   Backdrop: _DialogBackdrop.DialogBackdrop,

package/cjs/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/cjs/core/Dialog/DialogBackdrop.js

@@ -14,9 +14,11 @@ const _react = _interop_require_wildcard._(require('react'));
 const _Backdrop = require('../Backdrop/Backdrop.js');
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const _classnames = _interop_require_default._(require('classnames'));
 const DialogBackdrop = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
+  let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
   let {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -33,7 +35,10 @@ 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.Backdrop, {

package/cjs/core/Dialog/DialogMain.js

@@ -14,9 +14,9 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
-const _reacttransitiongroup = require('react-transition-group');
 const _DialogDragContext = require('./DialogDragContext.js');
 const _useDragAndDrop = require('../../utils/hooks/useDragAndDrop.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const DialogMain = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
   let {
@@ -37,12 +37,13 @@ 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(() => {
+  (0, _index.useLayoutEffect)(() => {
     if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   _react.useEffect(() => {
@@ -58,17 +59,19 @@ 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 } = (0, _useDragAndDrop.useDragAndDrop)(
     dialogRef,
-    dialogContext.dialogRootRef,
+    dialogRootRef,
     isDraggable,
   );
   let handlePointerDown = _react.useCallback(
@@ -88,13 +91,35 @@ 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(
     _index.Box,
     {
@@ -109,7 +134,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: (0, _index.useMergedRefs)(dialogRef, ref),
+      ref: (0, _index.useMergedRefs)(dialogRef, mountRef, ref),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -127,7 +152,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       isResizable &&
         _react.createElement(_index.Resizer, {
           elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
+          containerRef: dialogRootRef,
           onResizeStart: () => {
             if (!hasBeenResized.current) {
               hasBeenResized.current = true;
@@ -142,31 +167,14 @@ const DialogMain = _react.forwardRef((props, ref) => {
     children,
   );
   return _react.createElement(
-    _reacttransitiongroup.Transition,
+    _DialogMainContext.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.DialogDragContext.Provider,

package/cjs/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/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/ThemeProvider.d.ts

@@ -9,6 +9,8 @@ export type ThemeOptions = {
 };
 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.

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -41,8 +41,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
   (_future = future).themeBridge ??
-    (_future.themeBridge =
-      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
+    (_future.themeBridge = parent.context?.future?.themeBridge);
   let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );

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'>;