@itwin/itwinui-react 3.0.10 → 3.1.0

package/cjs/core/Popover/Popover.js

@@ -14,7 +14,8 @@ 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, middleware = { flip: true, shift: true }, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = 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 [open, onOpenChange] = (0, index_js_1.useControlledState)(false, visible, onVisibleChange);
     const floating = (0, react_1.useFloating)({
         placement,
@@ -86,7 +87,10 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     const { portal = true, 
     //
     // popover options
-    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, 
+    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, 
+    //
+    // extra props
+    positionReference, 
     //
     // dom props
     className, children, content, applyBackground = false, ...rest } = props;
@@ -96,11 +100,19 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
         onVisibleChange,
         closeOnOutsideClick,
         role: 'dialog',
+        middleware,
     });
     const [popoverElement, setPopoverElement] = React.useState();
     const popoverRef = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, setPopoverElement);
     const triggerId = `${(0, index_js_1.useId)()}-trigger`;
     const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        if (!positionReference) {
+            return;
+        }
+        popover.refs.setPositionReference(positionReference);
+        return () => void popover.refs.setPositionReference(null);
+    }, [popover.refs, positionReference]);
     return (React.createElement(React.Fragment, null,
         (0, index_js_1.cloneElementWithRef)(children, (children) => ({
             id: children.props.id || triggerId,

package/cjs/core/Table/Table.js

@@ -7,6 +7,7 @@ const tslib_1 = require("tslib");
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_table_1 = require("react-table");
 const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
@@ -465,11 +466,19 @@ const Table = (props) => {
                         updateStickyState();
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
+                React.createElement(ShadowTemplate, null,
+                    React.createElement("slot", null),
+                    React.createElement("div", { "aria-hidden": true, style: {
+                            // This ensures that the table-body is always the same width as the table-header,
+                            // even if the table has no rows. See https://github.com/iTwin/iTwinUI/pull/1725
+                            width: headerRef.current?.scrollWidth,
+                            height: 0.1,
+                        } })),
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll_js_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (React.createElement(index_js_1.Box, { as: 'div', ...emptyTableContentProps, className: (0, classnames_1.default)('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement(ProgressRadial_js_1.ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement(index_js_1.Box, { className: 'iui-table-row' },
-                    React.createElement(index_js_1.Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement(index_js_1.Box, { className: 'iui-table-row', "data-iui-loading": 'true' },
+                    React.createElement(index_js_1.Box, { className: 'iui-table-cell' },
                         React.createElement(ProgressRadial_js_1.ProgressRadial, { indeterminate: true, size: 'small' })))),
                 !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(index_js_1.Box, { as: 'div', ...emptyTableContentProps, className: (0, classnames_1.default)('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyTableContent))),
@@ -481,3 +490,20 @@ const Table = (props) => {
 };
 exports.Table = Table;
 exports.default = exports.Table;
+// ----------------------------------------------------------------------------
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ */
+const ShadowTemplate = ({ children }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template?.parentElement;
+        if (!template || !parent || parent.shadowRoot) {
+            return;
+        }
+        setShadowRoot(parent.attachShadow({ mode: 'open' }));
+        template.remove();
+    }, []);
+    return (React.createElement("template", { ref: attachShadowRef }, shadowRoot && ReactDOM.createPortal(children, shadowRoot)));
+};

package/cjs/core/Tabs/Tabs.js

@@ -37,7 +37,7 @@ const TabList = React.forwardRef((props, ref) => {
     const isClient = (0, index_js_1.useIsClient)();
     const tablistRef = React.useRef(null);
     const [tablistSizeRef, tabsWidth] = (0, index_js_1.useContainerWidth)(type !== 'default');
-    const refs = (0, index_js_1.useMergedRefs)(ref, tablistRef, tablistSizeRef);
+    const refs = (0, index_js_1.useMergedRefs)(ref, tablistRef, tablistSizeRef, useScrollbarGutter());
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
             'iui-green': color === 'green',
             'iui-animated': type !== 'default' && isClient,
@@ -138,7 +138,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
             setActiveValue(value);
         }
     }, [activeValue, setActiveValue, value]);
-    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: isActive ? 0 : -1, "aria-selected": isActive, "aria-controls": `${idPrefix}-panel-${value}`, ref: (0, index_js_1.useMergedRefs)(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value}`, onClick: (0, index_js_1.mergeEventHandlers)(props.onClick, () => setActiveValue(value)), onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown), onFocus: (0, index_js_1.mergeEventHandlers)(props.onFocus, () => {
+    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: isActive ? 0 : -1, "aria-selected": isActive, "aria-controls": `${idPrefix}-panel-${value.replaceAll(' ', '-')}`, ref: (0, index_js_1.useMergedRefs)(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, onClick: (0, index_js_1.mergeEventHandlers)(props.onClick, () => setActiveValue(value)), onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown), onFocus: (0, index_js_1.mergeEventHandlers)(props.onFocus, () => {
             tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             if (focusActivationMode === 'auto' && !props.disabled) {
                 setActiveValue(value);
@@ -178,7 +178,7 @@ TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = React.forwardRef((props, ref) => {
     const { value, className, children, ...rest } = props;
     const { activeValue, idPrefix } = (0, index_js_1.useSafeContext)(TabsContext);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', className), "aria-labelledby": `${idPrefix}-tab-${value}`, role: 'tabpanel', hidden: activeValue !== value ? true : undefined, ref: ref, ...rest, id: `${idPrefix}-panel-${value}` }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', className), "aria-labelledby": `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, role: 'tabpanel', hidden: activeValue !== value ? true : undefined, ref: ref, ...rest, id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}` }, children));
 });
 TabsPanel.displayName = 'Tabs.Panel';
 const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
@@ -323,3 +323,23 @@ exports.Tabs = Object.assign(LegacyTabsComponent, {
 const TabsContext = React.createContext(undefined);
 const TabListContext = React.createContext(undefined);
 exports.default = exports.Tabs;
+// ----------------------------------------------------------------------------
+/**
+ * This conditionally adds `scrollbar-gutter: stable` only if the content overflows.
+ * This is a workaround to prevent layout shift that happens because of scrollbar width.
+ *
+ * @see https://github.com/iTwin/iTwinUI/issues/1627
+ */
+const useScrollbarGutter = () => {
+    return React.useCallback((element) => {
+        if (element) {
+            if (element.scrollHeight > element.clientHeight) {
+                element.style.scrollbarGutter = 'stable';
+                // Safari fallback
+                if (!CSS.supports('scrollbar-gutter: stable')) {
+                    element.style.overflowY = 'scroll';
+                }
+            }
+        }
+    }, []);
+};

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -42,27 +42,26 @@ const Toaster_js_1 = require("../Toast/Toaster.js");
  */
 exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
     const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, ...rest } = props;
-    const [parentTheme, rootRef, parentContext] = useParentTheme();
-    const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+    const [rootElement, setRootElement] = React.useState(null);
+    const parent = useParentThemeAndContext(rootElement);
+    const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
     // default apply background only for topmost ThemeProvider
-    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
+    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parent.theme);
     // default inherit highContrast option from parent if also inheriting base theme
-    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit'
-        ? parentContext?.themeOptions?.highContrast
-        : undefined);
+    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' ? parentContext?.portalContainer : undefined);
+        (themeProp === 'inherit' ? parent.context?.portalContainer : undefined);
     const [portalContainer, setPortalContainer] = (0, index_js_1.useControlledState)(null, portaledPortalContainer);
     const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainer }), 
     // 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(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
-        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef), ...rest },
+        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
             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' } },
@@ -81,22 +80,46 @@ const Root = React.forwardRef((props, forwardedRef) => {
 });
 // ----------------------------------------------------------------------------
 /**
- * Returns theme from either parent context or by reading the closest
+ * Returns theme information from either parent ThemeContext or by reading the closest
  * data-iui-theme attribute if context is not found.
+ *
+ * Also returns the ThemeContext itself (if found).
  */
-const useParentTheme = () => {
+const useParentThemeAndContext = (rootElement) => {
     const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-    const rootRef = React.useRef(null);
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
+    const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
+    const parentThemeRef = (0, index_js_1.useLatestRef)(parentContext?.theme);
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        setParentTheme((old) => old ||
-            rootRef.current?.parentElement
-                ?.closest('[data-iui-theme]')
-                ?.getAttribute('data-iui-theme'));
-    }, []);
-    return [
-        parentContext?.theme ?? parentThemeState,
-        rootRef,
-        parentContext,
-    ];
+        // bail if we already have theme from context
+        if (parentThemeRef.current) {
+            return;
+        }
+        // find parent theme from closest data-iui-theme attribute
+        const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+        if (!closestRoot) {
+            return;
+        }
+        // helper function that updates state to match data attributes from closest root
+        const synchronizeTheme = () => {
+            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
+        };
+        // set theme for initial mount
+        synchronizeTheme();
+        // use mutation observers to listen to future updates to data attributes
+        const observer = new MutationObserver(() => synchronizeTheme());
+        observer.observe(closestRoot, {
+            attributes: true,
+            attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [rootElement, parentThemeRef]);
+    return {
+        theme: parentContext?.theme ?? parentThemeState,
+        highContrast: parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
+        context: parentContext,
+    };
 };

package/cjs/core/Tile/Tile.d.ts

@@ -249,9 +249,69 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
+        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "as" | "children" | "content" | "portal" | keyof {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined; /**
+             * Default tile variant or the folder layout.
+             * @default 'default'
+             */
+            id?: string | undefined;
+        }> & {
+            content: React.ReactNode;
+            children?: React.ReactNode;
+        } & import("../utils/index.js").PortalProps & {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined; /**
+             * Default tile variant or the folder layout.
+             * @default 'default'
+             */
+            id?: string | undefined;
+        } & {
+            as?: "div" | undefined;
+        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;

package/cjs/core/Tooltip/Tooltip.js

@@ -61,8 +61,12 @@ const useTooltip = (options = {}) => {
             ...interactions.getReferenceProps(),
         }).forEach(([key, value]) => {
             if (typeof value === 'function') {
-                reference.addEventListener(domEventName(key), value);
-                cleanupValues[key] = value;
+                // manually add `.nativeEvent` (react concept) because floating-ui needs it
+                const patchedHandler = (event) => {
+                    value({ ...event, nativeEvent: event });
+                };
+                reference.addEventListener(domEventName(key), patchedHandler);
+                cleanupValues[key] = patchedHandler;
             }
             else if (value) {
                 cleanupValues[key] = reference.getAttribute(key);

package/cjs/core/Tree/Tree.d.ts

@@ -33,6 +33,12 @@ export type NodeData<T> = {
 };
 export type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
 export type TreeProps<T> = {
+    /**
+     * Modify size of the tree.
+     *
+     * @default 'default'
+     */
+    size?: 'default' | 'small';
     /**
      * Render function that should return the node element.
      * Recommended to use `TreeNode` component.

package/cjs/core/Tree/Tree.js

@@ -61,7 +61,7 @@ const TreeContext_js_1 = require("./TreeContext.js");
   />
  */
 const Tree = (props) => {
-    const { data, className, nodeRenderer, getNode, enableVirtualization = false, style, ...rest } = props;
+    const { data, className, nodeRenderer, getNode, size = 'default', enableVirtualization = false, style, ...rest } = props;
     const treeRef = React.useRef(null);
     const focusedIndex = React.useRef(0);
     React.useEffect(() => {
@@ -146,8 +146,9 @@ const Tree = (props) => {
                         setScrollToIndex(parentNodeIndex);
                     }
                     : undefined,
+                size,
             } }, nodeRenderer(node.nodeProps)));
-    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer]);
+    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer, size]);
     const [scrollToIndex, setScrollToIndex] = React.useState();
     const flatNodesListRef = React.useRef(flatNodesList);
     React.useEffect(() => {
@@ -175,7 +176,7 @@ const Tree = (props) => {
             items[focusedIndex.current]?.focus();
         }
     };
-    return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
+    return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, "data-iui-size": size === 'small' ? 'small' : undefined, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
 };
 exports.Tree = Tree;
 const TreeElement = index_js_1.polymorphic.ul('iui-tree', {

package/cjs/core/Tree/TreeContext.d.ts

@@ -24,6 +24,10 @@ export type TreeContextProps = {
      * Function that scrolls to the node's parent node.
      */
     scrollToParent?: () => void;
+    /**
+     * Size of the tree.
+     */
+    size?: 'default' | 'small';
 };
 export declare const TreeContext: React.Context<TreeContextProps | undefined>;
 export declare const useTreeContext: () => TreeContextProps;

package/cjs/core/Tree/TreeNodeExpander.js

@@ -10,10 +10,13 @@ const React = tslib_1.__importStar(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const IconButton_js_1 = require("../Buttons/IconButton.js");
+const TreeContext_js_1 = require("./TreeContext.js");
 exports.TreeNodeExpander = React.forwardRef((props, ref) => {
     const { isExpanded, ...rest } = props;
+    const size = React.useContext(TreeContext_js_1.TreeContext)?.size ?? 'default';
+    const ChevronIcon = size === 'small' ? index_js_1.SvgChevronRightSmall : index_js_1.SvgChevronRight;
     return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },
-        React.createElement(index_js_1.SvgChevronRight, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
+        React.createElement(ChevronIcon, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });

package/cjs/core/utils/icons/SvgChevronRightSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronRightSmall: (props: React.ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;

package/cjs/core/utils/icons/SvgChevronRightSmall.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgChevronRightSmall = void 0;
+const tslib_1 = require("tslib");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require("react"));
+const Svg_js_1 = require("./Svg.js");
+const SvgChevronRightSmall = (props) => {
+    return (React.createElement(Svg_js_1.Svg, { ...props },
+        React.createElement("path", { d: 'm5.525 2-1.05 1.05L9.425 8l-4.95 4.95L5.525 14l6-6-6-6Z' })));
+};
+exports.SvgChevronRightSmall = SvgChevronRightSmall;

package/cjs/core/utils/icons/index.d.ts

@@ -7,6 +7,7 @@ export * from './SvgClose.js';
 export * from './SvgCloseSmall.js';
 export * from './SvgChevronLeft.js';
 export * from './SvgChevronRight.js';
+export * from './SvgChevronRightSmall.js';
 export * from './SvgChevronLeftDouble.js';
 export * from './SvgChevronRightDouble.js';
 export * from './SvgCaretUpSmall.js';

package/cjs/core/utils/icons/index.js

@@ -14,6 +14,7 @@ tslib_1.__exportStar(require("./SvgClose.js"), exports);
 tslib_1.__exportStar(require("./SvgCloseSmall.js"), exports);
 tslib_1.__exportStar(require("./SvgChevronLeft.js"), exports);
 tslib_1.__exportStar(require("./SvgChevronRight.js"), exports);
+tslib_1.__exportStar(require("./SvgChevronRightSmall.js"), exports);
 tslib_1.__exportStar(require("./SvgChevronLeftDouble.js"), exports);
 tslib_1.__exportStar(require("./SvgChevronRightDouble.js"), exports);
 tslib_1.__exportStar(require("./SvgCaretUpSmall.js"), exports);

package/cjs/styles.js

@@ -208,9 +208,9 @@ const styles = {
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-uartp55": "_iui3-uartp55",
+  "iui-uj1wh1i": "_iui3-uj1wh1i",
   "iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
-  "iui-uartp5m": "_iui3-uartp5m",
+  "iui-uj1wh1t": "_iui3-uj1wh1t",
   "iui-radio": "_iui3-radio",
   "iui-radio-tile": "_iui3-radio-tile",
   "iui-radio-tile-icon": "_iui3-radio-tile-icon",

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
+export declare const ButtonGroupContext: React.Context<string | undefined>;
 type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -6,6 +6,10 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
 import { FloatingDelayGroup } from '@floating-ui/react';
+// ----------------------------------------------------------------------------
+/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
+export const ButtonGroupContext = React.createContext(undefined);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -40,25 +44,26 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
     const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
     const refs = useMergedRefs(overflowRef, ref);
     return (React.createElement(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(Box, { className: cx('iui-button-group', {
-                'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-            }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
-            if (!(visibleCount < items.length)) {
-                return items;
-            }
-            const overflowStart = overflowPlacement === 'start'
-                ? items.length - visibleCount
-                : visibleCount - 1;
-            return (React.createElement(React.Fragment, null,
-                overflowButton &&
-                    overflowPlacement === 'start' &&
-                    overflowButton(overflowStart),
-                overflowPlacement === 'start'
-                    ? items.slice(overflowStart + 1)
-                    : items.slice(0, Math.max(0, overflowStart)),
-                overflowButton &&
-                    overflowPlacement === 'end' &&
-                    overflowButton(overflowStart)));
-        })())));
+        React.createElement(ButtonGroupContext.Provider, { value: orientation },
+            React.createElement(Box, { className: cx('iui-button-group', {
+                    'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+                }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!(visibleCount < items.length)) {
+                    return items;
+                }
+                const overflowStart = overflowPlacement === 'start'
+                    ? items.length - visibleCount
+                    : visibleCount - 1;
+                return (React.createElement(React.Fragment, null,
+                    overflowButton &&
+                        overflowPlacement === 'start' &&
+                        overflowButton(overflowStart),
+                    overflowPlacement === 'start'
+                        ? items.slice(overflowStart + 1)
+                        : items.slice(0, Math.max(0, overflowStart)),
+                    overflowButton &&
+                        overflowPlacement === 'end' &&
+                        overflowButton(overflowStart)));
+            })()))));
 });
 export default ButtonGroup;

package/esm/core/Buttons/IconButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { ButtonProps } from './Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type IconButtonProps = {
@@ -11,6 +12,11 @@ export type IconButtonProps = {
      * Name of the button, shown in a tooltip and exposed to assistive technologies.
      */
     label?: React.ReactNode;
+    /**
+     * Props passed to the Tooltip that contains the `label`.
+     * Can be used for customizing the tooltip's `placement`, etc.
+     */
+    labelProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'content' | 'reference' | 'ariaStrategy' | 'children'>;
     /**
      * Passes props to IconButton icon.
      */

package/esm/core/Buttons/IconButton.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { Box, ButtonBase } from '../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
 /**
  * Icon button
  * @example
@@ -15,10 +16,11 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export const IconButton = React.forwardRef((props, ref) => {
-    const { isActive, children, styleType = 'default', size, className, label, iconProps, ...rest } = props;
+    const { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
+    const buttonGroupOrientation = React.useContext(ButtonGroupContext);
     const button = (React.createElement(ButtonBase, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, ...rest },
         React.createElement(Box, { as: 'span', "aria-hidden": true, ...iconProps, className: cx('iui-button-icon', iconProps?.className) }, children),
         label ? React.createElement(VisuallyHidden, null, label) : null));
-    return label ? (React.createElement(Tooltip, { content: label, ariaStrategy: 'none' }, button)) : (button);
+    return label ? (React.createElement(Tooltip, { placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top', ...labelProps, content: label, ariaStrategy: 'none' }, button)) : (button);
 });
 export default IconButton;