@itwin/itwinui-react 3.9.0 → 3.10.0

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,35 @@ 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, requireIntent: false }),
+            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 +145,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.js

@@ -27,7 +27,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     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(() => {
+    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]) },

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/core/Tooltip/Tooltip.js

@@ -14,16 +14,20 @@ const useTooltip = (options = {}) => {
         placement,
         open,
         onOpenChange,
-        whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
-        middleware: [
-            middleware.offset !== undefined ? offset(middleware.offset) : offset(4),
+        whileElementsMounted: React.useMemo(() => 
+        // autoUpdate is expensive and should only be called when tooltip is open
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
+        middleware: React.useMemo(() => [
+            middleware.offset !== undefined
+                ? offset(middleware.offset)
+                : offset(4),
             middleware.flip && flip(),
             middleware.shift && shift(),
             middleware.size && size(),
             middleware.autoPlacement && autoPlacement(),
             middleware.inline && inline(),
             middleware.hide && hide(),
-        ].filter(Boolean),
+        ].filter(Boolean), [middleware]),
         ...(reference && { elements: { reference } }),
     });
     const ariaProps = React.useMemo(() => ariaStrategy === 'description'
@@ -94,7 +98,13 @@ const useTooltip = (options = {}) => {
         ...props,
         id,
     }), [interactions, props, id, open]);
-    return React.useMemo(() => ({ getReferenceProps, floatingProps, ...floating }), [getReferenceProps, floatingProps, floating]);
+    return React.useMemo(() => ({
+        getReferenceProps,
+        floatingProps,
+        ...floating,
+        // styles are not relevant when tooltip is not open
+        floatingStyles: floating.context.open ? floating.floatingStyles : {},
+    }), [getReferenceProps, floatingProps, floating]);
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
@@ -110,11 +120,13 @@ const useTooltip = (options = {}) => {
 export const Tooltip = React.forwardRef((props, forwardedRef) => {
     const { content, children, portal = true, className, style, ...rest } = props;
     const tooltip = useTooltip(rest);
+    const refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
     return (React.createElement(React.Fragment, null,
         cloneElementWithRef(children, (children) => ({
             ...tooltip.getReferenceProps(children.props),
             ref: tooltip.refs.setReference,
         })),
-        React.createElement(Portal, { portal: portal },
-            React.createElement(Box, { className: cx('iui-tooltip', className), ref: useMergedRefs(tooltip.refs.setFloating, forwardedRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))));
+        // Tooltip must always be present in the DOM (even when closed) for ARIA to work
+        props.ariaStrategy !== 'none' || tooltip.context.open ? (React.createElement(Portal, { portal: portal },
+            React.createElement(Box, { className: cx('iui-tooltip', className), ref: refs, style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))) : null));
 });

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;

package/esm/utils/providers/ScopeProvider.js

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { createStore, useAtomValue, useSetAtom } from 'jotai';
+const ScopeContext = React.createContext({
+    store: createStore(),
+    parentStore: null,
+});
+/**
+ * Provider that creates a fresh, isolated jotai store for its children.
+ *
+ * Should be used with `useScopedAtom` and/or `useScopedSetAtom`.
+ *
+ * @private
+ */
+export const ScopeProvider = ({ children }) => {
+    const store = React.useMemo(() => createStore(), []);
+    const parentStore = React.useContext(ScopeContext).store;
+    return (React.createElement(ScopeContext.Provider, { value: React.useMemo(() => ({ store, parentStore }), [store, parentStore]) }, children));
+};
+/**
+ * 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 const useScopedAtom = (atom) => {
+    const { store, parentStore } = React.useContext(ScopeContext);
+    const setAtom = useScopedSetAtom(atom);
+    const value = useAtomValue(atom, { store });
+    const inheritedValue = useAtomValue(atom, { store: parentStore || store });
+    if (value == undefined && inheritedValue != undefined) {
+        setAtom(inheritedValue);
+    }
+    return [value, setAtom];
+};
+/**
+ * Wrapper over `useSetAtom` that uses the store from the nearest `ScopeProvider`.
+ * @private
+ */
+export const useScopedSetAtom = (atom) => {
+    const { store } = React.useContext(ScopeContext);
+    return useSetAtom(atom, { store });
+};

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

@@ -1 +1,2 @@
 export * from './HydrationProvider.js';
+export * from './ScopeProvider.js';

package/esm/utils/providers/index.js

@@ -3,3 +3,4 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export * from './HydrationProvider.js';
+export * from './ScopeProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -59,6 +59,7 @@
     "@floating-ui/react": "^0.26.10",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "classnames": "^2.3.2",
+    "jotai": "^2.8.0",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.0"