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

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>

package/esm/core/SideNavigation/SideNavigation.js

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  WithCSSTransition,
-  SvgChevronRight,
-  Box,
-  useControlledState,
-} from '../../utils/index.js';
+import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 export const SidenavExpandedContext = React.createContext(void 0);
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
@@ -94,17 +89,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         ),
         'bottom' === expanderPlacement && ExpandButton,
       ),
-      submenu &&
-        React.createElement(
-          WithCSSTransition,
-          {
-            in: isSubmenuOpen,
-            dimension: 'width',
-            timeout: 200,
-            classNames: 'iui',
-          },
-          submenu,
-        ),
+      submenu && isSubmenuOpen ? submenu : null,
     ),
   );
 });

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

@@ -7,19 +7,18 @@ let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let newSelectedRowIds = {};
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
+    let hasSubComponents = !!row.initialSubRows[0]?.original[iuiId];
+    let hasSubRows = row.subRows.length > 0 && !hasSubComponents;
     let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[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/esm/core/Tabs/Tabs.js

@@ -160,7 +160,15 @@ let 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/esm/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/esm/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/esm/core/ThemeProvider/ThemeProvider.js

@@ -23,13 +23,14 @@ import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
 let ownerDocumentAtom = atom(void 0);
 export 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();
@@ -41,18 +42,16 @@ export 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] = useScopedAtom(portalContainerAtom);
   let contextValue = React.useMemo(
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return React.createElement(
     ScopeProvider,
@@ -80,6 +79,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
               ...rest,
             },
@@ -87,6 +87,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
             React.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -112,7 +113,7 @@ let MainRoot = React.forwardRef((props, forwardedRef) => {
   });
 });
 let Root = React.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
@@ -130,7 +131,7 @@ let 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,
     },
@@ -178,6 +179,7 @@ let PortalContainer = React.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] =
@@ -207,6 +209,7 @@ let PortalContainer = React.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/esm/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'>;