@itwin/itwinui-react 3.9.1 → 3.10.1

package/esm/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/esm/core/Popover/Popover.js

@@ -4,21 +4,35 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, } from '@floating-ui/react';
-import { Box, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../../utils/index.js';
-import { Portal } from '../../utils/components/Portal.js';
+import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, useFloatingTree, useListNavigation, } from '@floating-ui/react';
+import { Box, ShadowRoot, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../../utils/index.js';
+import { usePortalTo } from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
 export 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 = useFloatingTree();
+    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
     const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
     const floating = useFloating({
         placement,
         open,
         onOpenChange,
-        whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
-        middleware: [
+        whileElementsMounted: React.useMemo(() => 
+        // autoUpdate is expensive and should only be called when the popover is open
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
+        ...rest,
+        middleware: React.useMemo(() => [
             middleware.offset !== undefined && offset(middleware.offset),
             middleware.flip && flip(),
             middleware.shift && shift(),
@@ -31,18 +45,38 @@ export const usePopover = (options) => {
             middleware.autoPlacement && autoPlacement(),
             middleware.inline && inline(),
             middleware.hide && hide(),
-        ].filter(Boolean),
+        ].filter(Boolean), [matchWidth, middleware]),
     });
     const interactions = useInteractions([
-        useClick(floating.context, { enabled: !!trigger.click }),
-        useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
+        useClick(floating.context, {
+            enabled: !!mergedInteractions.click,
+            ...mergedInteractions.click,
+        }),
+        useDismiss(floating.context, {
+            enabled: !!mergedInteractions.dismiss,
+            outsidePress: closeOnOutsideClick,
+            bubbles: tree != null,
+            ...mergedInteractions.dismiss,
+        }),
         useHover(floating.context, {
-            enabled: !!trigger.hover,
+            enabled: !!mergedInteractions.hover,
             delay: 100,
-            handleClose: safePolygon({ buffer: 1 }),
+            handleClose: safePolygon({
+                buffer: 1,
+                blockPointerEvents: true,
+            }),
+            move: false,
+            ...mergedInteractions.hover,
+        }),
+        useFocus(floating.context, {
+            enabled: !!mergedInteractions.focus,
+            ...mergedInteractions.focus,
         }),
-        useFocus(floating.context, { enabled: !!trigger.focus }),
         useRole(floating.context, { role: 'dialog', enabled: !!role }),
+        useListNavigation(floating.context, {
+            enabled: !!mergedInteractions.listNavigation,
+            ...mergedInteractions.listNavigation,
+        }),
     ]);
     const [referenceWidth, setReferenceWidth] = React.useState();
     const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
@@ -114,11 +148,28 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
             ...popover.getReferenceProps(children.props),
             ref: popover.refs.setReference,
         })),
-        popover.open ? (React.createElement(Portal, { portal: portal },
-            React.createElement(FloatingPortal, null,
-                React.createElement(ThemeProvider, { portalContainer: popoverElement },
-                    React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
-                        React.createElement(Box, { className: cx({ '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, { portalContainer: popoverElement },
+                React.createElement(DisplayContents, null),
+                React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
+                    React.createElement(Box, { className: cx({ '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 = usePortalTo(portal);
+    return (React.createElement(FloatingPortal, { root: portalTo },
+        React.createElement(DisplayContents, null),
+        children));
+};
+// ----------------------------------------------------------------------------
+/** Applies `display: contents` to the parent div. */
+const DisplayContents = React.memo(() => {
+    return (React.createElement(ShadowRoot, { css: `
+        :host {
+          display: contents;
+        }
+      ` },
+        React.createElement("slot", null)));
 });

package/esm/core/Select/Select.js

@@ -199,9 +199,8 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(InputWithIcon, { ...rest, ref: 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: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx({
+            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: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx({
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
-                    'iui-disabled': disabled,
                 }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(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 }))),
@@ -229,7 +228,7 @@ const isSingleOnChange = (onChange, multiple) => {
 // ----------------------------------------------------------------------------
 const SelectButton = React.forwardRef((props, forwardedRef) => {
     const { size, status, styleType = 'default', ...rest } = props;
-    return (React.createElement(Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: cx('iui-select-button', props.className) }));
+    return (React.createElement(Box, { "data-iui-size": size, "data-iui-status": status, "data-iui-variant": styleType !== 'default' ? styleType : undefined, ...rest, ref: forwardedRef, className: cx('iui-select-button', 'iui-field', props.className) }));
 });
 // ----------------------------------------------------------------------------
 const SelectEndIcon = React.forwardRef((props, forwardedRef) => {

package/esm/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/esm/core/SideNavigation/SideNavigation.js

@@ -4,9 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { WithCSSTransition, SvgChevronRight, Box } from '../../utils/index.js';
+import { WithCSSTransition, SvgChevronRight, Box, useControlledState, } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
+// ----------------------------------------------------------------------------
+export const SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -22,25 +23,23 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
  * />
  */
 export const 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, { 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] = useControlledState(false, isExpandedProp);
+    const ExpandButton = (React.createElement(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(SvgChevronRight, null)));
-    return (React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
-                React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items),
+                    React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/esm/core/SideNavigation/SidenavButton.js

@@ -5,11 +5,15 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { SidenavExpandedContext } from './SideNavigation.js';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 export const SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    const isExpanded = React.useContext(SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button, { className: cx('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, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/esm/core/Table/TablePaginator.js

@@ -9,7 +9,7 @@ import { Button } from '../Buttons/Button.js';
 import { DropdownButton } from '../Buttons/DropdownButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box, ButtonBase, } from '../../utils/index.js';
+import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box, } from '../../utils/index.js';
 const defaultLocalization = {
     pageSizeLabel: (size) => `${size} per page`,
     rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
@@ -52,9 +52,7 @@ export 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(ButtonBase, { key: index, className: cx('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, { 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/esm/core/Table/columns/selectionColumn.js

@@ -39,7 +39,16 @@ export const SelectionColumn = (props = {}) => {
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));
         },
         Cell: ({ row }) => (React.createElement(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(DefaultCell, { ...props, isDisabled: (rowData) => !!isDisabled?.(rowData) })),
     };
 };

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

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

@@ -5,9 +5,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, HydrationProvider, } from '../../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useLatestRef, importCss, isUnitTest, HydrationProvider, useHydration, ScopeProvider, portalContainerAtom, useScopedAtom, useScopedSetAtom, } from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
+import { atom } from 'jotai';
+// ----------------------------------------------------------------------------
+const ownerDocumentAtom = atom(undefined);
+// ----------------------------------------------------------------------------
 /**
  * This component provides global state and applies theme to the entire tree
  * that it is wrapping around.
@@ -45,26 +49,21 @@ export const 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] = useControlledState(null, portaledPortalContainer);
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainer }), 
+    const [portalContainerFromParent] = useScopedAtom(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(HydrationProvider, null,
-        React.createElement(ThemeContext.Provider, { value: contextValue },
-            includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
-            React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
+    [theme, JSON.stringify(themeOptions)]);
+    return (React.createElement(ScopeProvider, null,
+        React.createElement(HydrationProvider, null,
+            React.createElement(ThemeContext.Provider, { value: contextValue },
                 React.createElement(ToastProvider, null,
-                    children,
-                    portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
-                        React.createElement(Toaster, null))))))));
+                    includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
+                    React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
+                        children,
+                        React.createElement(PortalContainer, { portalContainerProp: portalContainerProp, portalContainerFromParent: portalContainerFromParent, isInheritingTheme: themeProp === 'inherit' })))))));
 });
+ThemeProvider.displayName = 'ThemeProvider';
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
     const { theme, children, themeOptions, className, ...rest } = props;
@@ -73,7 +72,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(Box, { className: cx('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 = useScopedSetAtom(ownerDocumentAtom);
+    return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: useMergedRefs(forwardedRef, (el) => {
+            setOwnerDocument(el?.ownerDocument);
+        }), ...rest }, children));
 });
 // ----------------------------------------------------------------------------
 /**
@@ -121,6 +123,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] = useScopedAtom(ownerDocumentAtom);
+    const [portalContainer, setPortalContainer] = useScopedAtom(portalContainerAtom);
+    // bail if not hydrated, because portals don't work on server
+    const isHydrated = 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, 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, 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/esm/core/TimePicker/TimePicker.js

@@ -207,16 +207,6 @@ export const 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;
@@ -254,8 +244,18 @@ const TimePickerColumn = (props) => {
                 }, className: cx({
                     '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/esm/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/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -24,7 +24,7 @@ import { Box, SvgCheckmark } from '../../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>} />
  */
 export const 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(Box, { as: label ? 'label' : 'div', className: cx('iui-toggle-switch-wrapper', {
@@ -34,5 +34,5 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         React.createElement(Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: ref, ...rest }),
         shouldShowIcon && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, iconProp || React.createElement(SvgCheckmark, null))),
-        label && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
+        label && (React.createElement(Box, { as: 'span', ...labelProps, className: cx('iui-toggle-switch-label', labelProps?.className) }, label))));
 });

package/esm/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/esm/utils/components/Portal.js

@@ -4,14 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
-import { getDocument } from '../functions/dom.js';
 import { useIsClient } from '../hooks/useIsClient.js';
+import { atom } from 'jotai';
+import { useScopedAtom } from '../providers/ScopeProvider.js';
+// ----------------------------------------------------------------------------
+export const portalContainerAtom = 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).
@@ -29,12 +31,11 @@ export const Portal = (props) => {
     return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
 // ----------------------------------------------------------------------------
-const usePortalTo = (portal) => {
-    const themeInfo = React.useContext(ThemeContext);
-    const defaultPortalTo = themeInfo?.portalContainer ?? getDocument()?.body;
+export const usePortalTo = (portal) => {
+    const [portalContainer] = useScopedAtom(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;
 };

package/esm/utils/providers/ScopeProvider.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Atom, WritableAtom } from 'jotai';
+/**
+ * Provider that creates a fresh, isolated jotai store for its children.
+ *
+ * Should be used with `useScopedAtom` and/or `useScopedSetAtom`.
+ *
+ * @private
+ */
+export declare const ScopeProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+/**
+ * Wrapper over `useAtom` that uses the store from the nearest `ScopeProvider`.
+ *
+ * If the atom is not set in the current store, it will recursively look in the parent store(s).
+ * This is only useful for initial values. Future updates to the parent will not be reflected.
+ *
+ * @private
+ */
+export declare const useScopedAtom: <T>(atom: Atom<T>) => readonly [Awaited<T>, (...args: unknown[]) => unknown];
+/**
+ * Wrapper over `useSetAtom` that uses the store from the nearest `ScopeProvider`.
+ * @private
+ */
+export declare const useScopedSetAtom: <T>(atom: WritableAtom<T, unknown[], unknown>) => (...args: unknown[]) => unknown;