@itwin/itwinui-react 3.9.0 → 3.10.0

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

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

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

@@ -43,16 +43,20 @@ const useTooltip = (options = {}) => {
         placement,
         open,
         onOpenChange,
-        whileElementsMounted: (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions),
-        middleware: [
-            middleware.offset !== undefined ? (0, react_1.offset)(middleware.offset) : (0, react_1.offset)(4),
+        whileElementsMounted: React.useMemo(() => 
+        // autoUpdate is expensive and should only be called when tooltip is open
+        open ? (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
+        middleware: React.useMemo(() => [
+            middleware.offset !== undefined
+                ? (0, react_1.offset)(middleware.offset)
+                : (0, react_1.offset)(4),
             middleware.flip && (0, react_1.flip)(),
             middleware.shift && (0, react_1.shift)(),
             middleware.size && (0, react_1.size)(),
             middleware.autoPlacement && (0, react_1.autoPlacement)(),
             middleware.inline && (0, react_1.inline)(),
             middleware.hide && (0, react_1.hide)(),
-        ].filter(Boolean),
+        ].filter(Boolean), [middleware]),
         ...(reference && { elements: { reference } }),
     });
     const ariaProps = React.useMemo(() => ariaStrategy === 'description'
@@ -123,7 +127,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.
@@ -139,11 +149,13 @@ const useTooltip = (options = {}) => {
 exports.Tooltip = React.forwardRef((props, forwardedRef) => {
     const { content, children, portal = true, className, style, ...rest } = props;
     const tooltip = useTooltip(rest);
+    const refs = (0, index_js_1.useMergedRefs)(tooltip.refs.setFloating, forwardedRef);
     return (React.createElement(React.Fragment, null,
         (0, index_js_1.cloneElementWithRef)(children, (children) => ({
             ...tooltip.getReferenceProps(children.props),
             ref: tooltip.refs.setReference,
         })),
-        React.createElement(index_js_1.Portal, { portal: portal },
-            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), ref: (0, index_js_1.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(index_js_1.Portal, { portal: portal },
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tooltip', className), ref: refs, style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))) : null));
 });

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;

package/cjs/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/cjs/utils/providers/ScopeProvider.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScopedSetAtom = exports.useScopedAtom = exports.ScopeProvider = 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"));
+const jotai_1 = require("jotai");
+const ScopeContext = React.createContext({
+    store: (0, jotai_1.createStore)(),
+    parentStore: null,
+});
+/**
+ * Provider that creates a fresh, isolated jotai store for its children.
+ *
+ * Should be used with `useScopedAtom` and/or `useScopedSetAtom`.
+ *
+ * @private
+ */
+const ScopeProvider = ({ children }) => {
+    const store = React.useMemo(() => (0, jotai_1.createStore)(), []);
+    const parentStore = React.useContext(ScopeContext).store;
+    return (React.createElement(ScopeContext.Provider, { value: React.useMemo(() => ({ store, parentStore }), [store, parentStore]) }, children));
+};
+exports.ScopeProvider = ScopeProvider;
+/**
+ * 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
+ */
+const useScopedAtom = (atom) => {
+    const { store, parentStore } = React.useContext(ScopeContext);
+    const setAtom = (0, exports.useScopedSetAtom)(atom);
+    const value = (0, jotai_1.useAtomValue)(atom, { store });
+    const inheritedValue = (0, jotai_1.useAtomValue)(atom, { store: parentStore || store });
+    if (value == undefined && inheritedValue != undefined) {
+        setAtom(inheritedValue);
+    }
+    return [value, setAtom];
+};
+exports.useScopedAtom = useScopedAtom;
+/**
+ * Wrapper over `useSetAtom` that uses the store from the nearest `ScopeProvider`.
+ * @private
+ */
+const useScopedSetAtom = (atom) => {
+    const { store } = React.useContext(ScopeContext);
+    return (0, jotai_1.useSetAtom)(atom, { store });
+};
+exports.useScopedSetAtom = useScopedSetAtom;

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

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

package/cjs/utils/providers/index.js

@@ -19,3 +19,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 __exportStar(require("./HydrationProvider.js"), exports);
+__exportStar(require("./ScopeProvider.js"), exports);

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -73,10 +73,9 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children: childrenProp, className, ...rest } = props;
+    const { children, className, ...rest } = props;
     const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
-    const children = defaultAs === 'button' ? React.createElement("span", null, childrenProp) : childrenProp;
-    return (React.createElement(Box, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), ref: forwardedRef, ...rest }, children));
+    return (React.createElement(Button, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------