@itwin/itwinui-react 3.9.1 → 3.10.1

package/cjs/core/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Placement } from '@floating-ui/react';
+import type { Placement, UseListNavigationProps, ReferenceType, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { PortalProps } from '../../utils/components/Portal.js';
 type PopoverOptions = {
@@ -59,16 +59,39 @@ type PopoverInternalProps = {
         layoutShift?: boolean;
     };
     /**
-     * By default, the popover will only open on click.
-     * `hover` and `focus` can be manually specified as triggers.
+     * By default, only the click and dismiss interactions/triggers are enabled.
+     * Explicitly pass `false` to disable the defaults.
+     *
+     * Pass a boolean to enable/disable any of the supported interactions.
+     * Alternatively, pass an object to override the default props that the Popover sets for an interaction/trigger.
+     *
+     * When additional parameters are _required_ for an interaction/trigger, an object must be passed to enable it.
+     * Booleans will not be allowed in this case.
+     *
+     * @example
+     * <Popover
+     *   interactions={{
+     *     click: false,
+     *     focus: true,
+     *     hover: { move: false },
+     *     listNavigation: { … },
+     *   }}
+     *   // …
+     * >…</Popover>
      */
-    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    interactions?: {
+        click?: boolean | UseClickProps;
+        dismiss?: boolean | UseDismissProps;
+        hover?: boolean | UseHoverProps<ReferenceType>;
+        focus?: boolean | UseFocusProps;
+        listNavigation?: UseListNavigationProps;
+    };
     role?: 'dialog' | 'menu' | 'listbox';
     /**
      * Whether the popover should match the width of the trigger.
      */
     matchWidth?: boolean;
-};
+} & Omit<UseFloatingOptions, 'middleware' | 'placement'>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
@@ -83,11 +106,11 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    } & import("@floating-ui/react").ExtendedRefs<ReferenceType>;
     elements: {
         reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    } & import("@floating-ui/react").ExtendedElements<ReferenceType>;
     context: {
         x: number;
         y: number;
@@ -103,8 +126,8 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
         floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+        refs: import("@floating-ui/react").ExtendedRefs<ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<ReferenceType>;
     };
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;

package/cjs/core/Popover/Popover.js

@@ -39,15 +39,29 @@ const Portal_js_1 = require("../../utils/components/Portal.js");
 const ThemeProvider_js_1 = require("../ThemeProvider/ThemeProvider.js");
 // ----------------------------------------------------------------------------
 const usePopover = (options) => {
-    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = options;
-    const middleware = { flip: true, shift: true, ...options.middleware };
+    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
+    const mergedInteractions = {
+        ...{
+            click: true,
+            dismiss: true,
+            hover: false,
+            focus: false,
+            listNavigation: undefined,
+        },
+        ...interactionsProp,
+    };
+    const tree = (0, react_1.useFloatingTree)();
+    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
     const [open, onOpenChange] = (0, index_js_1.useControlledState)(false, visible, onVisibleChange);
     const floating = (0, react_1.useFloating)({
         placement,
         open,
         onOpenChange,
-        whileElementsMounted: (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions),
-        middleware: [
+        whileElementsMounted: React.useMemo(() => 
+        // autoUpdate is expensive and should only be called when the popover is open
+        open ? (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
+        ...rest,
+        middleware: React.useMemo(() => [
             middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
             middleware.flip && (0, react_1.flip)(),
             middleware.shift && (0, react_1.shift)(),
@@ -60,18 +74,38 @@ const usePopover = (options) => {
             middleware.autoPlacement && (0, react_1.autoPlacement)(),
             middleware.inline && (0, react_1.inline)(),
             middleware.hide && (0, react_1.hide)(),
-        ].filter(Boolean),
+        ].filter(Boolean), [matchWidth, middleware]),
     });
     const interactions = (0, react_1.useInteractions)([
-        (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
-        (0, react_1.useDismiss)(floating.context, { outsidePress: closeOnOutsideClick }),
+        (0, react_1.useClick)(floating.context, {
+            enabled: !!mergedInteractions.click,
+            ...mergedInteractions.click,
+        }),
+        (0, react_1.useDismiss)(floating.context, {
+            enabled: !!mergedInteractions.dismiss,
+            outsidePress: closeOnOutsideClick,
+            bubbles: tree != null,
+            ...mergedInteractions.dismiss,
+        }),
         (0, react_1.useHover)(floating.context, {
-            enabled: !!trigger.hover,
+            enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
+            handleClose: (0, react_1.safePolygon)({
+                buffer: 1,
+                blockPointerEvents: true,
+            }),
+            move: false,
+            ...mergedInteractions.hover,
+        }),
+        (0, react_1.useFocus)(floating.context, {
+            enabled: !!mergedInteractions.focus,
+            ...mergedInteractions.focus,
         }),
-        (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
         (0, react_1.useRole)(floating.context, { role: 'dialog', enabled: !!role }),
+        (0, react_1.useListNavigation)(floating.context, {
+            enabled: !!mergedInteractions.listNavigation,
+            ...mergedInteractions.listNavigation,
+        }),
     ]);
     const [referenceWidth, setReferenceWidth] = React.useState();
     const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
@@ -144,11 +178,28 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
             ...popover.getReferenceProps(children.props),
             ref: popover.refs.setReference,
         })),
-        popover.open ? (React.createElement(Portal_js_1.Portal, { portal: portal },
-            React.createElement(react_1.FloatingPortal, null,
-                React.createElement(ThemeProvider_js_1.ThemeProvider, { portalContainer: popoverElement },
-                    React.createElement(react_1.FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
-                        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
-                                ? popover.refs.domReference.current?.id
-                                : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content)))))) : null));
+        popover.open ? (React.createElement(PopoverPortal, { portal: portal },
+            React.createElement(ThemeProvider_js_1.ThemeProvider, { portalContainer: popoverElement },
+                React.createElement(DisplayContents, null),
+                React.createElement(react_1.FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
+                    React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
+                            ? popover.refs.domReference.current?.id
+                            : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content))))) : null));
+});
+// ----------------------------------------------------------------------------
+const PopoverPortal = ({ children, portal = true, }) => {
+    const portalTo = (0, Portal_js_1.usePortalTo)(portal);
+    return (React.createElement(react_1.FloatingPortal, { root: portalTo },
+        React.createElement(DisplayContents, null),
+        children));
+};
+// ----------------------------------------------------------------------------
+/** Applies `display: contents` to the parent div. */
+const DisplayContents = React.memo(() => {
+    return (React.createElement(index_js_1.ShadowRoot, { css: `
+        :host {
+          display: contents;
+        }
+      ` },
+        React.createElement("slot", null)));
 });

package/cjs/core/Select/Select.js

@@ -228,9 +228,8 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(index_js_1.InputWithIcon, { ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
-            React.createElement(SelectButton, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', size: size, status: status, "aria-disabled": disabled ? 'true' : undefined, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, styleType: styleType, ...triggerProps, ref: (0, index_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)({
+            React.createElement(SelectButton, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', size: size, status: status, "aria-disabled": disabled ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, styleType: styleType, ...triggerProps, ref: (0, index_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)({
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
-                    'iui-disabled': disabled,
                 }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer }))),
@@ -258,7 +257,7 @@ const isSingleOnChange = (onChange, multiple) => {
 // ----------------------------------------------------------------------------
 const SelectButton = React.forwardRef((props, forwardedRef) => {
     const { size, status, styleType = 'default', ...rest } = props;
-    return (React.createElement(index_js_1.Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-select-button', props.className) }));
+    return (React.createElement(index_js_1.Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-select-button', 'iui-field', props.className) }));
 });
 // ----------------------------------------------------------------------------
 const SelectEndIcon = React.forwardRef((props, forwardedRef) => {

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
 type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/cjs/core/SideNavigation/SideNavigation.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideNavigation = void 0;
+exports.SideNavigation = exports.SidenavExpandedContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -35,7 +35,8 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
-const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+// ----------------------------------------------------------------------------
+exports.SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -51,25 +52,23 @@ const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
  * />
  */
 exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [isExpanded, setIsExpanded] = (0, index_js_1.useControlledState)(false, isExpandedProp);
+    const ExpandButton = (React.createElement(IconButton_js_1.IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
+            setIsExpanded((expanded) => !expanded);
             onExpanderClick?.();
-        }, [onExpanderClick]) },
+        }, [onExpanderClick, setIsExpanded]) },
         React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
-                React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(exports.SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(index_js_1.Box, { ...wrapperProps, className: (0, classnames_1.default)('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(index_js_1.Box, { as: 'div', className: (0, classnames_1.default)('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(index_js_1.Box, { as: 'div', ...topProps, className: (0, classnames_1.default)('iui-top', topProps?.className) }, items),
+                    React.createElement(index_js_1.Box, { as: 'div', ...bottomProps, className: (0, classnames_1.default)('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/cjs/core/SideNavigation/SidenavButton.js

@@ -34,11 +34,15 @@ exports.SidenavButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Button_js_1 = require("../Buttons/Button.js");
+const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
+const SideNavigation_js_1 = require("./SideNavigation.js");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 exports.SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    const isExpanded = React.useContext(SideNavigation_js_1.SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return !isExpanded ? (React.createElement(Tooltip_js_1.Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/cjs/core/Table/TablePaginator.js

@@ -81,9 +81,7 @@ const TablePaginator = (props) => {
         isMounted.current = true;
     }, [focusedIndex]);
     const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(index_js_1.ButtonBase, { key: index, className: (0, classnames_1.default)('iui-table-paginator-page-button', {
-            'iui-table-paginator-page-button-small': buttonSize === 'small',
-        }), "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(Button_js_1.Button, { key: index, className: 'iui-table-paginator-page-button', styleType: 'borderless', size: buttonSize, "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
     const pageList = React.useMemo(() => new Array(totalPagesCount)
         .fill(null)

package/cjs/core/Table/columns/selectionColumn.js

@@ -65,7 +65,16 @@ const SelectionColumn = (props = {}) => {
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
         },
         Cell: ({ row }) => (React.createElement(Checkbox_js_1.Checkbox, { ...row.getToggleRowSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
-            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation() })),
+            , disabled: isDisabled?.(row.original), onClick: (e) => e.stopPropagation(), onChange: () => {
+                if (row.subRows.length > 0) {
+                    //This code ignores any sub-rows that are not currently available(i.e disabled or filtered out).
+                    //If all available sub-rows are selected, then it deselects them all, otherwise it selects them all.
+                    row.toggleRowSelected(!row.subRows.every((subRow) => subRow.isSelected || isDisabled?.(subRow.original)));
+                }
+                else {
+                    row.toggleRowSelected();
+                }
+            } })),
         cellRenderer: (props) => (React.createElement(index_js_1.DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

package/cjs/core/Table/hooks/useSubRowSelection.js

@@ -38,7 +38,7 @@ const useInstance = (instance) => {
         const selectedFlatRows = [];
         const setSelectionState = (row, selectedRowIds) => {
             let isSomeSubRowsSelected = false;
-            row.subRows.forEach((subRow) => {
+            row.initialSubRows.forEach((subRow) => {
                 setSelectionState(subRow, selectedRowIds);
                 if (subRow.isSelected || subRow.isSomeSelected) {
                     isSomeSubRowsSelected = true;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -37,6 +37,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
 const ThemeContext_js_1 = require("./ThemeContext.js");
 const Toaster_js_1 = require("../Toast/Toaster.js");
+const jotai_1 = require("jotai");
+// ----------------------------------------------------------------------------
+const ownerDocumentAtom = (0, jotai_1.atom)(undefined);
+// ----------------------------------------------------------------------------
 /**
  * This component provides global state and applies theme to the entire tree
  * that it is wrapping around.
@@ -74,26 +78,21 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
     themeOptions.applyBackground ?? (themeOptions.applyBackground = !parent.theme);
     // default inherit highContrast option from parent if also inheriting base theme
     themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
-    /**
-     * We will portal our portal container into `portalContainer` prop (if specified),
-     * or inherit `portalContainer` from context (if also inheriting theme).
-     */
-    const portaledPortalContainer = portalContainerProp ||
-        (themeProp === 'inherit' ? parent.context?.portalContainer : undefined);
-    const [portalContainer, setPortalContainer] = (0, index_js_1.useControlledState)(null, portaledPortalContainer);
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainer }), 
+    const [portalContainerFromParent] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions }), 
     // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [theme, JSON.stringify(themeOptions), portalContainer]);
-    return (React.createElement(index_js_1.HydrationProvider, null,
-        React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
-            includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
-            React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
+    [theme, JSON.stringify(themeOptions)]);
+    return (React.createElement(index_js_1.ScopeProvider, null,
+        React.createElement(index_js_1.HydrationProvider, null,
+            React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
                 React.createElement(Toaster_js_1.ToastProvider, null,
-                    children,
-                    portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
-                        React.createElement(Toaster_js_1.Toaster, null))))))));
+                    includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
+                    React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
+                        children,
+                        React.createElement(PortalContainer, { portalContainerProp: portalContainerProp, portalContainerFromParent: portalContainerFromParent, isInheritingTheme: themeProp === 'inherit' })))))));
 });
+exports.ThemeProvider.displayName = 'ThemeProvider';
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
     const { theme, children, themeOptions, className, ...rest } = props;
@@ -102,7 +101,10 @@ const Root = React.forwardRef((props, forwardedRef) => {
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     const shouldApplyBackground = themeOptions?.applyBackground;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: forwardedRef, ...rest }, children));
+    const setOwnerDocument = (0, index_js_1.useScopedSetAtom)(ownerDocumentAtom);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: (0, index_js_1.useMergedRefs)(forwardedRef, (el) => {
+            setOwnerDocument(el?.ownerDocument);
+        }), ...rest }, children));
 });
 // ----------------------------------------------------------------------------
 /**
@@ -150,6 +152,40 @@ const useParentThemeAndContext = (rootElement) => {
     };
 };
 // ----------------------------------------------------------------------------
+/**
+ * Creates a new portal container if necessary, or reuses the parent portal container.
+ *
+ * Updates `portalContainerAtom` with the correct portal container.
+ */
+const PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme, }) => {
+    const [ownerDocument] = (0, index_js_1.useScopedAtom)(ownerDocumentAtom);
+    const [portalContainer, setPortalContainer] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
+    // bail if not hydrated, because portals don't work on server
+    const isHydrated = (0, index_js_1.useHydration)() === 'hydrated';
+    if (!isHydrated) {
+        return null;
+    }
+    // Create a new portal container only if necessary:
+    // - not inheriting theme
+    // - no parent portal container to portal into
+    // - parent portal container is in a different window (#2006)
+    if (!portalContainerProp && // bail if portalContainerProp is set, because it takes precedence
+        (!isInheritingTheme ||
+            !portalContainerFromParent ||
+            portalContainerFromParent.ownerDocument !== ownerDocument)) {
+        return (React.createElement("div", { style: { display: 'contents' }, ref: setPortalContainer },
+            React.createElement(Toaster_js_1.Toaster, null)));
+    }
+    const portalTarget = portalContainerProp || portalContainerFromParent;
+    // Synchronize atom with the correct portal container if necessary.
+    if (portalTarget && portalTarget !== portalContainer) {
+        setPortalContainer(portalTarget);
+    }
+    return portalTarget
+        ? ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portalTarget)
+        : null;
+});
+// ----------------------------------------------------------------------------
 /**
  * When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
  * dynamically import it (if possible) and fallback to loading it from a CDN.

package/cjs/core/TimePicker/TimePicker.js

@@ -236,16 +236,6 @@ exports.TimePicker = React.forwardRef((props, forwardedRef) => {
 const TimePickerColumn = (props) => {
     const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
     const needFocus = React.useRef(setFocus);
-    // Used to focus row only when changed (keyboard navigation)
-    // e.g. without this on every rerender it would be focused
-    React.useEffect(() => {
-        if (needFocus.current) {
-            needFocus.current = false;
-        }
-    });
-    const scrollIntoView = (ref, isSame) => {
-        isSame && ref?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    };
     const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
         if (event.altKey) {
             return;
@@ -283,8 +273,18 @@ const TimePickerColumn = (props) => {
                 }, className: (0, classnames_1.default)({
                     'iui-selected': isSameSelected(value),
                 }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
-                    scrollIntoView(ref, isSameFocus);
-                    needFocus.current && isSameFocus && ref?.focus();
+                    if (!ref || !isSameFocus) {
+                        return;
+                    }
+                    // Move focus/scroll in the next task, after the DOM has stabilized.
+                    // This gives it priority over other conflicting logic (e.g. from floating-ui/Popover).
+                    setTimeout(() => {
+                        ref.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                        if (needFocus.current) {
+                            ref.focus();
+                            needFocus.current = false;
+                        }
+                    });
                 }, onClick: () => {
                     onSelectChange(value);
                 } }, valueRenderer(value, precision)));

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -5,6 +5,10 @@ type ToggleSwitchProps = {
      * Label for the toggle switch.
      */
     label?: React.ReactNode;
+    /**
+     * Passes properties for ToggleSwitch label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
     /**
      * Position of the label.
      * @default 'right'

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -53,7 +53,7 @@ const index_js_1 = require("../../utils/index.js");
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 exports.ToggleSwitch = React.forwardRef((props, ref) => {
-    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', icon: iconProp, ...rest } = props;
+    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', labelProps = {}, icon: iconProp, ...rest } = props;
     // Disallow custom icon for small size, but keep the default checkmark when prop is not passed.
     const shouldShowIcon = iconProp === undefined || (iconProp !== null && size !== 'small');
     return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
@@ -63,5 +63,5 @@ exports.ToggleSwitch = React.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: ref, ...rest }),
         shouldShowIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, iconProp || React.createElement(index_js_1.SvgCheckmark, null))),
-        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
+        label && (React.createElement(index_js_1.Box, { as: 'span', ...labelProps, className: (0, classnames_1.default)('iui-toggle-switch-label', labelProps?.className) }, label))));
 });

package/cjs/utils/components/Portal.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
+export declare const portalContainerAtom: import("jotai").PrimitiveAtom<HTMLElement | undefined> & {
+    init: HTMLElement | undefined;
+};
 export type PortalProps = {
     /**
      * Where should the element be portaled to?
      *
-     * If true, it will portal into nearest ThemeContext.portalContainer.
+     * If true, it will portal into nearest ThemeProvider's portalContainer.
      *
      * If false, it will not be portaled.
      *
@@ -20,7 +23,7 @@ export type PortalProps = {
 /**
  * Helper component that portals children according to the following conditions:
  *   - renders null on server
- *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to true, renders into nearest ThemeProvider's portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
  *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
@@ -29,3 +32,4 @@ export type PortalProps = {
  * @private
  */
 export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;
+export declare const usePortalTo: (portal: NonNullable<PortalProps['portal']>) => HTMLElement | null | undefined;

package/cjs/utils/components/Portal.js

@@ -23,21 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
+exports.usePortalTo = exports.Portal = exports.portalContainerAtom = void 0;
 const ReactDOM = __importStar(require("react-dom"));
-const ThemeContext_js_1 = require("../../core/ThemeProvider/ThemeContext.js");
-const dom_js_1 = require("../functions/dom.js");
 const useIsClient_js_1 = require("../hooks/useIsClient.js");
+const jotai_1 = require("jotai");
+const ScopeProvider_js_1 = require("../providers/ScopeProvider.js");
+// ----------------------------------------------------------------------------
+exports.portalContainerAtom = (0, jotai_1.atom)(undefined);
 // ----------------------------------------------------------------------------
 /**
  * Helper component that portals children according to the following conditions:
  *   - renders null on server
- *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to true, renders into nearest ThemeProvider's portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
  *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
@@ -48,7 +45,7 @@ const useIsClient_js_1 = require("../hooks/useIsClient.js");
 const Portal = (props) => {
     const { portal = true, children } = props;
     const isClient = (0, useIsClient_js_1.useIsClient)();
-    const portalTo = usePortalTo(portal);
+    const portalTo = (0, exports.usePortalTo)(portal);
     if (!isClient) {
         return null;
     }
@@ -57,11 +54,11 @@ const Portal = (props) => {
 exports.Portal = Portal;
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
-    const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
-    const defaultPortalTo = themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body;
+    const [portalContainer] = (0, ScopeProvider_js_1.useScopedAtom)(exports.portalContainerAtom);
     if (typeof portal === 'boolean') {
-        return portal ? defaultPortalTo : null;
+        return portal ? portalContainer : null;
     }
     const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
-    return portalTo ?? defaultPortalTo;
+    return portalTo ?? portalContainer;
 };
+exports.usePortalTo = usePortalTo;