@itwin/components-react 3.5.0-dev.18 → 3.5.0-dev.19

package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.js

@@ -1,482 +1,482 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Toolbar
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToolItemEntryContext = exports.ToolbarItemContext = exports.ToolbarWithOverflow = exports.useToolbarWithOverflowDirectionContext = exports.ToolbarItemComponent = exports.ActionItem = exports.GroupPopupItem = exports.CustomItem = exports.ToolbarWithOverflowDirectionContext = exports.ToolbarPanelAlignmentHelpers = exports.ToolbarOpacitySetting = exports.ToolbarPanelAlignment = exports.getToolbarDirection = exports.isCustomToolbarItem = exports.useToolbarPopupAutoHideContext = exports.ToolbarPopupAutoHideContext = void 0;
-require("./Toolbar.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const Item_1 = require("./Item");
-const Items_1 = require("./Items");
-const ItemWrapper_1 = require("./ItemWrapper");
-const Overflow_1 = require("./Overflow");
-const OverflowPanel_1 = require("./OverflowPanel");
-const PopupItem_1 = require("./PopupItem");
-const PopupItemsPanel_1 = require("./PopupItemsPanel");
-const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
-const Direction_1 = require("./utilities/Direction");
-const UiComponents_1 = require("../UiComponents");
-/**
- * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.ToolbarPopupAutoHideContext = React.createContext(false);
-/**
- * React hook used to retrieve the ToolbarPopupAutoHideContext.
- *  @public
- */
-function useToolbarPopupAutoHideContext() {
-    return React.useContext(exports.ToolbarPopupAutoHideContext);
-}
-exports.useToolbarPopupAutoHideContext = useToolbarPopupAutoHideContext;
-/** CustomToolbarItem type guard.
- * @internal
- */
-function isCustomToolbarItem(item) {
-    return !!item.isCustom && (("buttonNode" in item) || ("panelContentNode" in item));
-}
-exports.isCustomToolbarItem = isCustomToolbarItem;
-/** @internal */
-const getToolbarDirection = (expandsTo) => {
-    const orthogonalDirection = Direction_1.DirectionHelpers.getOrthogonalDirection(expandsTo);
-    return Direction_1.OrthogonalDirectionHelpers.inverse(orthogonalDirection);
-};
-exports.getToolbarDirection = getToolbarDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
- * @public
- */
-var ToolbarPanelAlignment;
-(function (ToolbarPanelAlignment) {
-    ToolbarPanelAlignment[ToolbarPanelAlignment["Start"] = 0] = "Start";
-    ToolbarPanelAlignment[ToolbarPanelAlignment["End"] = 1] = "End";
-})(ToolbarPanelAlignment = exports.ToolbarPanelAlignment || (exports.ToolbarPanelAlignment = {}));
-/** Enumeration of Toolbar Opacity setting.
- * @public
- */
-var ToolbarOpacitySetting;
-(function (ToolbarOpacitySetting) {
-    /** Use the default background, box-shadow opacity and backdrop-filter blur */
-    ToolbarOpacitySetting[ToolbarOpacitySetting["Defaults"] = 0] = "Defaults";
-    /** Alter the opacity from transparent to the defaults based on mouse proximity */
-    ToolbarOpacitySetting[ToolbarOpacitySetting["Proximity"] = 1] = "Proximity";
-    /** Use a transparent background, box-shadow opacity and backdrop-filter blur */
-    ToolbarOpacitySetting[ToolbarOpacitySetting["Transparent"] = 2] = "Transparent";
-})(ToolbarOpacitySetting = exports.ToolbarOpacitySetting || (exports.ToolbarOpacitySetting = {}));
-/** Helpers for [[ToolbarPanelAlignment]].
- * @internal
- */
-class ToolbarPanelAlignmentHelpers {
-    /** @returns Class name of specified [[ToolbarPanelAlignment]] */
-    static getCssClassName(panelAlignment) {
-        switch (panelAlignment) {
-            case ToolbarPanelAlignment.Start:
-                return ToolbarPanelAlignmentHelpers.START_CLASS_NAME;
-            case ToolbarPanelAlignment.End:
-                return ToolbarPanelAlignmentHelpers.END_CLASS_NAME;
-        }
-    }
-}
-exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
-/** Class name of [[ToolbarPanelAlignment.Start]] */
-ToolbarPanelAlignmentHelpers.START_CLASS_NAME = "components-panel-alignment-start";
-/** Class name of [[ToolbarPanelAlignment.End]] */
-ToolbarPanelAlignmentHelpers.END_CLASS_NAME = "components-panel-alignment-end";
-/**
- * Context used by Toolbar component to provide Direction to child components.
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.ToolbarWithOverflowDirectionContext = React.createContext({
-    expandsTo: Direction_1.Direction.Bottom,
-    direction: Direction_1.OrthogonalDirection.Horizontal,
-    overflowExpandsTo: Direction_1.Direction.Right,
-    overflowDirection: Direction_1.OrthogonalDirection.Vertical,
-    panelAlignment: ToolbarPanelAlignment.Start,
-    useDragInteraction: false,
-    toolbarOpacitySetting: ToolbarOpacitySetting.Proximity,
-    openPopupCount: 0,
-    onPopupPanelOpenClose: /* istanbul ignore next */ (_isOpening) => { },
-    overflowDisplayActive: false,
-    onItemExecuted: /* istanbul ignore next */ (_item) => void {},
-    onKeyDown: /* istanbul ignore next */ (_e) => void {},
-});
-/** @internal */
-function CustomItem({ item, addGroupSeparator }) {
-    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
-    const icon = React.useMemo(() => (item.icon &&
-        core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
-        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
-    const isDisabled = React.useMemo(() => appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
-    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = appui_abstract_1.ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
-    const badge = React.useMemo(() => core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
-    if (item.panelContentNode) {
-        return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
-    }
-    // istanbul ignore else
-    if (item.buttonNode)
-        return React.createElement(React.Fragment, null, item.buttonNode);
-    // istanbul ignore next
-    return null;
-}
-exports.CustomItem = CustomItem;
-/** @internal */
-function GroupPopupItem({ item, addGroupSeparator }) {
-    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
-    const title = appui_abstract_1.ConditionalStringValue.getValue(item.label);
-    const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType);
-    const panel = React.useMemo(() => React.createElement(PopupItemsPanel_1.PopupItemsPanel, { groupItem: item, activateOnPointerUp: false }), [item]);
-    if (useDragInteraction) {
-        return React.createElement(PopupItemWithDrag_1.PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, groupItem: item, badge: badge, addGroupSeparator: addGroupSeparator });
-    }
-    return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: badge, hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator });
-}
-exports.GroupPopupItem = GroupPopupItem;
-/** @internal */
-function ActionItem({ item, addGroupSeparator }) {
-    const title = appui_abstract_1.ConditionalStringValue.getValue(item.label);
-    const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType);
-    const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
-    const onExecute = React.useCallback(() => {
-        item.execute();
-        onItemExecuted(item);
-    }, [item, onItemExecuted]);
-    return React.createElement(Item_1.ToolbarButtonItem, { itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, key: item.id, isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isActive: item.isActive, onClick: onExecute, badge: badge, addGroupSeparator: addGroupSeparator });
-}
-exports.ActionItem = ActionItem;
-/** @internal */
-function ToolbarItemComponent({ item, addGroupSeparator }) {
-    if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(item)) {
-        return React.createElement(GroupPopupItem, { item: item, addGroupSeparator: addGroupSeparator });
-    }
-    else if (isCustomToolbarItem(item)) {
-        return React.createElement(CustomItem, { item: item, addGroupSeparator: addGroupSeparator });
-    }
-    else {
-        // istanbul ignore else
-        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(item)) {
-            return React.createElement(ActionItem, { item: item, addGroupSeparator: addGroupSeparator });
-        }
-    }
-    // istanbul ignore next
-    return null;
-}
-exports.ToolbarItemComponent = ToolbarItemComponent;
-/** @internal */
-function useToolbarWithOverflowDirectionContext() {
-    return React.useContext(exports.ToolbarWithOverflowDirectionContext);
-}
-exports.useToolbarWithOverflowDirectionContext = useToolbarWithOverflowDirectionContext;
-function OverflowItemsContainer(p) {
-    return React.createElement(React.Fragment, null, p.children);
-}
-function getItemWrapperClass(child) {
-    // istanbul ignore else
-    if (React.isValidElement(child)) {
-        if (child.props && child.props.addGroupSeparator)
-            return "components-toolbar-button-add-gap-before";
-    }
-    return undefined;
-}
-/** Component that displays tool settings as a bar across the top of the content view.
- * @public
- */
-function ToolbarWithOverflow(props) {
-    const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
-    const useDragInteraction = !!props.useDragInteraction;
-    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;
-    const useHeight = (expandsTo === Direction_1.Direction.Right || expandsTo === Direction_1.Direction.Left);
-    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
-    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
-    const overflowTitle = React.useRef(UiComponents_1.UiComponents.translate("toolbar.overflow"));
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    });
-    const handlePopupPanelOpenClose = React.useCallback((isOpening) => {
-        // use setTimeout to avoid warning about setting state in ToolbarWithOverflow from render method of PopupItem/PopupItemWithDrag
-        setTimeout(() => {
-            // istanbul ignore next
-            if (!isMounted.current)
-                return;
-            setPopupPanelCount((prev) => {
-                const nextCount = isOpening ? (prev + 1) : (prev - 1);
-                // eslint-disable-next-line no-console
-                // console.log(`new popup count = ${nextCount}`);
-                return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;
-            });
-        });
-    }, []);
-    const ref = React.useRef(null);
-    const width = React.useRef(undefined);
-    const availableNodes = React.useMemo(() => {
-        return props.items.map((item, index) => {
-            let addGroupSeparator = false;
-            if (index > 0)
-                addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;
-            return (React.createElement(ToolbarItemComponent, { key: item.id, item: item, addGroupSeparator: !!addGroupSeparator }));
-        });
-    }, [props.items]);
-    /* overflowItemKeys - keys of items to show in overflow panel
-     * handleContainerResize - handler called when container <div> is resized.
-     * handleOverflowResize - handler called when determining size of overflow indicator/button.
-     * handleEntryResize - handler called when determining size of each item/button.  */
-    const [overflowItemKeys, handleContainerResize, handleOverflowResize, handleEntryResize] = useOverflow(availableNodes, panelAlignment === ToolbarPanelAlignment.End);
-    // handler called by ResizeObserver
-    const handleResize = React.useCallback((w) => {
-        width.current = w;
-        width.current !== undefined && handleContainerResize(width.current);
-    }, [handleContainerResize]);
-    const resizeObserverRef = (0, ItemWrapper_1.useResizeObserverSingleDimension)(handleResize, useHeight);
-    const handleClick = React.useCallback(() => {
-        setIsOverflowPanelOpen((prev) => !prev);
-    }, []);
-    // istanbul ignore next - NEEDSWORK add complete tests
-    const handleClose = React.useCallback(() => {
-        setIsOverflowPanelOpen(false);
-    }, []);
-    const refs = (0, core_react_1.useRefs)(ref, resizeObserverRef);
-    const availableItems = React.Children.toArray(availableNodes);
-    const displayedItems = availableItems.reduce((acc, child, index) => {
-        const key = getChildKey(child, index);
-        if (!overflowItemKeys || overflowItemKeys.indexOf(key) < 0) {
-            acc.push([key, child]);
-        }
-        return acc;
-    }, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const overflowPanelItems = overflowItemKeys ? availableItems.reduce((acc, child, index) => {
-        const key = getChildKey(child, index);
-        if (overflowItemKeys.indexOf(key) >= 0) {
-            acc.push([key, child]);
-        }
-        return acc;
-    }, []) : [];
-    const direction = (0, exports.getToolbarDirection)(expandsTo);
-    const overflowExpandsTo = undefined !== props.overflowExpandsTo ? props.overflowExpandsTo : Direction_1.Direction.Right;
-    const addOverflowButton = React.useCallback((atStart) => {
-        const overflowItems = !!atStart ? overflowPanelItems.reverse() : overflowPanelItems;
-        return (React.createElement(exports.ToolbarItemContext.Provider, { value: {
-                hasOverflow: false,
-                useHeight,
-                onResize: handleOverflowResize,
-            } },
-            React.createElement(Overflow_1.ToolbarOverflowButton, { expandsTo: expandsTo, onClick: handleClick, onClose: handleClose, open: overflowItems.length > 0 && isOverflowPanelOpen, panelNode: React.createElement(OverflowPanel_1.ToolbarOverflowPanel, null,
-                    React.createElement(OverflowItemsContainer, null, overflowItems.map(([key, child]) => {
-                        return (React.createElement(exports.ToolbarItemContext.Provider, { key: key, value: {
-                                hasOverflow: true,
-                                useHeight,
-                                onResize: () => { },
-                            } }, React.createElement(ItemWrapper_1.ItemWrapper, { className: getItemWrapperClass(child) }, child)));
-                    }))), title: overflowTitle.current })));
-    }, [handleClick, handleClose, handleOverflowResize, isOverflowPanelOpen, expandsTo, overflowPanelItems, useHeight]);
-    const className = (0, classnames_1.default)("components-toolbar-overflow-sizer", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
-    const showOverflowAtStart = (direction === Direction_1.OrthogonalDirection.Horizontal) && (panelAlignment === ToolbarPanelAlignment.End);
-    /* The ItemWrapper is used to wrap the <Item> <ExpandableItem> with a <div> that specifies a ref that the sizing logic uses to determine the
-       size of the item. */
-    return (React.createElement(exports.ToolbarWithOverflowDirectionContext.Provider, { value: {
-            expandsTo, direction, overflowExpandsTo, panelAlignment, useDragInteraction,
-            toolbarOpacitySetting: undefined !== props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,
-            overflowDirection: direction === Direction_1.OrthogonalDirection.Horizontal ? Direction_1.OrthogonalDirection.Vertical : Direction_1.OrthogonalDirection.Horizontal,
-            openPopupCount: popupPanelCount,
-            onPopupPanelOpenClose: handlePopupPanelOpenClose,
-            overflowDisplayActive: overflowPanelItems.length > 0 && isOverflowPanelOpen,
-            onItemExecuted: props.onItemExecuted ? props.onItemExecuted : () => { },
-            onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e) => { },
-        } }, (availableItems.length > 0) &&
-        React.createElement("div", { className: className, ref: refs, style: props.style, onKeyDown: props.onKeyDown, role: "presentation" },
-            React.createElement(Items_1.ToolbarItems, { className: "components-items", direction: direction },
-                (!overflowItemKeys || overflowItemKeys.length > 0) && showOverflowAtStart && addOverflowButton(true),
-                displayedItems.map(([key, child]) => {
-                    const onEntryResize = handleEntryResize(key);
-                    return (React.createElement(exports.ToolbarItemContext.Provider, { key: key, value: {
-                            hasOverflow: false,
-                            useHeight,
-                            onResize: onEntryResize,
-                        } }, React.createElement(ItemWrapper_1.ItemWrapper, { className: getItemWrapperClass(child) }, child)));
-                }),
-                (!overflowItemKeys || overflowItemKeys.length > 0) && !showOverflowAtStart && addOverflowButton(false)))));
-}
-exports.ToolbarWithOverflow = ToolbarWithOverflow;
-/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of availableItems.
- * @internal
- */
-function getChildKey(child, index) {
-    // istanbul ignore else
-    if (React.isValidElement(child) && child.key !== null) {
-        return child.key.toString();
-    }
-    // istanbul ignore next
-    return index.toString();
-}
-/** Returns a subset of toolbar item entry keys that exceed given width and should be overflowItemKeys.
- * @internal
- */
-function determineOverflowItems(size, entries, overflowButtonSize, overflowButtonAtStart) {
-    let toolbarSize = 0;
-    const buttonPadding = 2;
-    if (overflowButtonAtStart && entries.length > 0) {
-        let i = entries.length - 1;
-        for (; i >= 0; i--) {
-            const w = entries[i][1] + buttonPadding;
-            const newSettingsWidth = toolbarSize + w;
-            if (newSettingsWidth > size) {
-                toolbarSize += (overflowButtonSize + buttonPadding);
-                break;
-            }
-            toolbarSize = newSettingsWidth;
-        }
-        if (i >= 0) {
-            let j = i + 1;
-            for (; j < entries.length; j++) {
-                if (toolbarSize <= size)
-                    break;
-                const w = entries[j][1] + buttonPadding;
-                toolbarSize -= w;
-            }
-            return entries.slice(0, j).map((e) => e[0]);
-        }
-        else {
-            return [];
-        }
-    }
-    else {
-        let i = 0;
-        for (; i < entries.length; i++) {
-            const w = entries[i][1] + buttonPadding;
-            const newSettingsWidth = toolbarSize + w;
-            if (newSettingsWidth > size) {
-                toolbarSize += (overflowButtonSize + buttonPadding);
-                break;
-            }
-            toolbarSize = newSettingsWidth;
-        }
-        let j = i;
-        for (; j > 0; j--) {
-            if (toolbarSize <= size)
-                break;
-            const w = entries[j][1] + buttonPadding;
-            toolbarSize -= w;
-        }
-        return entries.slice(j).map((e) => e[0]);
-    }
-}
-/** Hook that returns a list of overflowItemKeys availableItems.
- * @internal
- */
-function useOverflow(availableItems, overflowButtonAtStart) {
-    const [overflowItemKeys, setOverflown] = React.useState();
-    const itemSizes = React.useRef(new Map());
-    const size = React.useRef(undefined);
-    const overflowButtonSize = React.useRef(undefined);
-    const calculateOverflow = React.useCallback(() => {
-        const sizes = verifiedMapEntries(itemSizes.current);
-        if (size.current === undefined ||
-            sizes === undefined ||
-            overflowButtonSize.current === undefined) {
-            setOverflown(undefined);
-            return;
-        }
-        // Calculate overflow.
-        const newOverflown = determineOverflowItems(size.current, [...sizes.entries()], overflowButtonSize.current, overflowButtonAtStart);
-        setOverflown((prevOverflown) => {
-            return eql(prevOverflown, newOverflown) ? prevOverflown : newOverflown;
-        });
-    }, [overflowButtonAtStart]);
-    React.useLayoutEffect(() => {
-        const newEntryWidths = new Map();
-        const array = React.Children.toArray(availableItems);
-        for (let i = 0; i < array.length; i++) {
-            const child = array[i];
-            const key = getChildKey(child, i);
-            const lastW = itemSizes.current.get(key);
-            newEntryWidths.set(key, lastW);
-        }
-        itemSizes.current = newEntryWidths;
-        calculateOverflow();
-    }, [availableItems, calculateOverflow]);
-    const handleContainerResize = React.useCallback((w) => {
-        const calculate = size.current !== w;
-        size.current = w;
-        calculate && calculateOverflow();
-    }, [calculateOverflow]);
-    const handleOverflowResize = React.useCallback((w) => {
-        const calculate = overflowButtonSize.current !== w;
-        overflowButtonSize.current = w;
-        calculate && calculateOverflow();
-    }, [calculateOverflow]);
-    const handleEntryResize = React.useCallback((key) => (w) => {
-        const oldW = itemSizes.current.get(key);
-        if (oldW !== w) {
-            itemSizes.current.set(key, w);
-            calculateOverflow();
-        }
-    }, [calculateOverflow]);
-    return [overflowItemKeys, handleContainerResize, handleOverflowResize, handleEntryResize];
-}
-/** Interface toolbars use to define context for its items.
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-exports.ToolbarItemContext = React.createContext(null);
-/** @internal */
-function useToolItemEntryContext() {
-    return React.useContext(exports.ToolbarItemContext);
-}
-exports.useToolItemEntryContext = useToolItemEntryContext;
-function verifiedMapEntries(map) {
-    for (const [, val] of map) {
-        // istanbul ignore next  during unit testing
-        if (val === undefined)
-            return undefined;
-    }
-    return map;
-}
-function eql(prev, value) {
-    if (!prev)
-        return false;
-    // istanbul ignore next
-    if (prev.length !== value.length)
-        return false;
-    for (let i = 0; i < prev.length; i++) {
-        const p = prev[i];
-        const v = value[i];
-        // istanbul ignore next
-        if (p !== v)
-            return false;
-    }
-    return true;
-}
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolItemEntryContext = exports.ToolbarItemContext = exports.ToolbarWithOverflow = exports.useToolbarWithOverflowDirectionContext = exports.ToolbarItemComponent = exports.ActionItem = exports.GroupPopupItem = exports.CustomItem = exports.ToolbarWithOverflowDirectionContext = exports.ToolbarPanelAlignmentHelpers = exports.ToolbarOpacitySetting = exports.ToolbarPanelAlignment = exports.getToolbarDirection = exports.isCustomToolbarItem = exports.useToolbarPopupAutoHideContext = exports.ToolbarPopupAutoHideContext = void 0;
+require("./Toolbar.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const Item_1 = require("./Item");
+const Items_1 = require("./Items");
+const ItemWrapper_1 = require("./ItemWrapper");
+const Overflow_1 = require("./Overflow");
+const OverflowPanel_1 = require("./OverflowPanel");
+const PopupItem_1 = require("./PopupItem");
+const PopupItemsPanel_1 = require("./PopupItemsPanel");
+const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
+const Direction_1 = require("./utilities/Direction");
+const UiComponents_1 = require("../UiComponents");
+/**
+ * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.ToolbarPopupAutoHideContext = React.createContext(false);
+/**
+ * React hook used to retrieve the ToolbarPopupAutoHideContext.
+ *  @public
+ */
+function useToolbarPopupAutoHideContext() {
+    return React.useContext(exports.ToolbarPopupAutoHideContext);
+}
+exports.useToolbarPopupAutoHideContext = useToolbarPopupAutoHideContext;
+/** CustomToolbarItem type guard.
+ * @internal
+ */
+function isCustomToolbarItem(item) {
+    return !!item.isCustom && (("buttonNode" in item) || ("panelContentNode" in item));
+}
+exports.isCustomToolbarItem = isCustomToolbarItem;
+/** @internal */
+const getToolbarDirection = (expandsTo) => {
+    const orthogonalDirection = Direction_1.DirectionHelpers.getOrthogonalDirection(expandsTo);
+    return Direction_1.OrthogonalDirectionHelpers.inverse(orthogonalDirection);
+};
+exports.getToolbarDirection = getToolbarDirection;
+/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+ * @public
+ */
+var ToolbarPanelAlignment;
+(function (ToolbarPanelAlignment) {
+    ToolbarPanelAlignment[ToolbarPanelAlignment["Start"] = 0] = "Start";
+    ToolbarPanelAlignment[ToolbarPanelAlignment["End"] = 1] = "End";
+})(ToolbarPanelAlignment = exports.ToolbarPanelAlignment || (exports.ToolbarPanelAlignment = {}));
+/** Enumeration of Toolbar Opacity setting.
+ * @public
+ */
+var ToolbarOpacitySetting;
+(function (ToolbarOpacitySetting) {
+    /** Use the default background, box-shadow opacity and backdrop-filter blur */
+    ToolbarOpacitySetting[ToolbarOpacitySetting["Defaults"] = 0] = "Defaults";
+    /** Alter the opacity from transparent to the defaults based on mouse proximity */
+    ToolbarOpacitySetting[ToolbarOpacitySetting["Proximity"] = 1] = "Proximity";
+    /** Use a transparent background, box-shadow opacity and backdrop-filter blur */
+    ToolbarOpacitySetting[ToolbarOpacitySetting["Transparent"] = 2] = "Transparent";
+})(ToolbarOpacitySetting = exports.ToolbarOpacitySetting || (exports.ToolbarOpacitySetting = {}));
+/** Helpers for [[ToolbarPanelAlignment]].
+ * @internal
+ */
+class ToolbarPanelAlignmentHelpers {
+    /** @returns Class name of specified [[ToolbarPanelAlignment]] */
+    static getCssClassName(panelAlignment) {
+        switch (panelAlignment) {
+            case ToolbarPanelAlignment.Start:
+                return ToolbarPanelAlignmentHelpers.START_CLASS_NAME;
+            case ToolbarPanelAlignment.End:
+                return ToolbarPanelAlignmentHelpers.END_CLASS_NAME;
+        }
+    }
+}
+exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
+/** Class name of [[ToolbarPanelAlignment.Start]] */
+ToolbarPanelAlignmentHelpers.START_CLASS_NAME = "components-panel-alignment-start";
+/** Class name of [[ToolbarPanelAlignment.End]] */
+ToolbarPanelAlignmentHelpers.END_CLASS_NAME = "components-panel-alignment-end";
+/**
+ * Context used by Toolbar component to provide Direction to child components.
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.ToolbarWithOverflowDirectionContext = React.createContext({
+    expandsTo: Direction_1.Direction.Bottom,
+    direction: Direction_1.OrthogonalDirection.Horizontal,
+    overflowExpandsTo: Direction_1.Direction.Right,
+    overflowDirection: Direction_1.OrthogonalDirection.Vertical,
+    panelAlignment: ToolbarPanelAlignment.Start,
+    useDragInteraction: false,
+    toolbarOpacitySetting: ToolbarOpacitySetting.Proximity,
+    openPopupCount: 0,
+    onPopupPanelOpenClose: /* istanbul ignore next */ (_isOpening) => { },
+    overflowDisplayActive: false,
+    onItemExecuted: /* istanbul ignore next */ (_item) => void {},
+    onKeyDown: /* istanbul ignore next */ (_e) => void {},
+});
+/** @internal */
+function CustomItem({ item, addGroupSeparator }) {
+    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
+    const icon = React.useMemo(() => (item.icon &&
+        core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
+        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
+    const isDisabled = React.useMemo(() => appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
+    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = appui_abstract_1.ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
+    const badge = React.useMemo(() => core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
+    if (item.panelContentNode) {
+        return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
+    }
+    // istanbul ignore else
+    if (item.buttonNode)
+        return React.createElement(React.Fragment, null, item.buttonNode);
+    // istanbul ignore next
+    return null;
+}
+exports.CustomItem = CustomItem;
+/** @internal */
+function GroupPopupItem({ item, addGroupSeparator }) {
+    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
+    const title = appui_abstract_1.ConditionalStringValue.getValue(item.label);
+    const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType);
+    const panel = React.useMemo(() => React.createElement(PopupItemsPanel_1.PopupItemsPanel, { groupItem: item, activateOnPointerUp: false }), [item]);
+    if (useDragInteraction) {
+        return React.createElement(PopupItemWithDrag_1.PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, groupItem: item, badge: badge, addGroupSeparator: addGroupSeparator });
+    }
+    return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: badge, hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator });
+}
+exports.GroupPopupItem = GroupPopupItem;
+/** @internal */
+function ActionItem({ item, addGroupSeparator }) {
+    const title = appui_abstract_1.ConditionalStringValue.getValue(item.label);
+    const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType);
+    const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
+    const onExecute = React.useCallback(() => {
+        item.execute();
+        onItemExecuted(item);
+    }, [item, onItemExecuted]);
+    return React.createElement(Item_1.ToolbarButtonItem, { itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, key: item.id, isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), title: title, icon: core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData), isActive: item.isActive, onClick: onExecute, badge: badge, addGroupSeparator: addGroupSeparator });
+}
+exports.ActionItem = ActionItem;
+/** @internal */
+function ToolbarItemComponent({ item, addGroupSeparator }) {
+    if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(item)) {
+        return React.createElement(GroupPopupItem, { item: item, addGroupSeparator: addGroupSeparator });
+    }
+    else if (isCustomToolbarItem(item)) {
+        return React.createElement(CustomItem, { item: item, addGroupSeparator: addGroupSeparator });
+    }
+    else {
+        // istanbul ignore else
+        if (appui_abstract_1.ToolbarItemUtilities.isActionButton(item)) {
+            return React.createElement(ActionItem, { item: item, addGroupSeparator: addGroupSeparator });
+        }
+    }
+    // istanbul ignore next
+    return null;
+}
+exports.ToolbarItemComponent = ToolbarItemComponent;
+/** @internal */
+function useToolbarWithOverflowDirectionContext() {
+    return React.useContext(exports.ToolbarWithOverflowDirectionContext);
+}
+exports.useToolbarWithOverflowDirectionContext = useToolbarWithOverflowDirectionContext;
+function OverflowItemsContainer(p) {
+    return React.createElement(React.Fragment, null, p.children);
+}
+function getItemWrapperClass(child) {
+    // istanbul ignore else
+    if (React.isValidElement(child)) {
+        if (child.props && child.props.addGroupSeparator)
+            return "components-toolbar-button-add-gap-before";
+    }
+    return undefined;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @public
+ */
+function ToolbarWithOverflow(props) {
+    const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
+    const useDragInteraction = !!props.useDragInteraction;
+    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;
+    const useHeight = (expandsTo === Direction_1.Direction.Right || expandsTo === Direction_1.Direction.Left);
+    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
+    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
+    const overflowTitle = React.useRef(UiComponents_1.UiComponents.translate("toolbar.overflow"));
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+    const handlePopupPanelOpenClose = React.useCallback((isOpening) => {
+        // use setTimeout to avoid warning about setting state in ToolbarWithOverflow from render method of PopupItem/PopupItemWithDrag
+        setTimeout(() => {
+            // istanbul ignore next
+            if (!isMounted.current)
+                return;
+            setPopupPanelCount((prev) => {
+                const nextCount = isOpening ? (prev + 1) : (prev - 1);
+                // eslint-disable-next-line no-console
+                // console.log(`new popup count = ${nextCount}`);
+                return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;
+            });
+        });
+    }, []);
+    const ref = React.useRef(null);
+    const width = React.useRef(undefined);
+    const availableNodes = React.useMemo(() => {
+        return props.items.map((item, index) => {
+            let addGroupSeparator = false;
+            if (index > 0)
+                addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;
+            return (React.createElement(ToolbarItemComponent, { key: item.id, item: item, addGroupSeparator: !!addGroupSeparator }));
+        });
+    }, [props.items]);
+    /* overflowItemKeys - keys of items to show in overflow panel
+     * handleContainerResize - handler called when container <div> is resized.
+     * handleOverflowResize - handler called when determining size of overflow indicator/button.
+     * handleEntryResize - handler called when determining size of each item/button.  */
+    const [overflowItemKeys, handleContainerResize, handleOverflowResize, handleEntryResize] = useOverflow(availableNodes, panelAlignment === ToolbarPanelAlignment.End);
+    // handler called by ResizeObserver
+    const handleResize = React.useCallback((w) => {
+        width.current = w;
+        width.current !== undefined && handleContainerResize(width.current);
+    }, [handleContainerResize]);
+    const resizeObserverRef = (0, ItemWrapper_1.useResizeObserverSingleDimension)(handleResize, useHeight);
+    const handleClick = React.useCallback(() => {
+        setIsOverflowPanelOpen((prev) => !prev);
+    }, []);
+    // istanbul ignore next - NEEDSWORK add complete tests
+    const handleClose = React.useCallback(() => {
+        setIsOverflowPanelOpen(false);
+    }, []);
+    const refs = (0, core_react_1.useRefs)(ref, resizeObserverRef);
+    const availableItems = React.Children.toArray(availableNodes);
+    const displayedItems = availableItems.reduce((acc, child, index) => {
+        const key = getChildKey(child, index);
+        if (!overflowItemKeys || overflowItemKeys.indexOf(key) < 0) {
+            acc.push([key, child]);
+        }
+        return acc;
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const overflowPanelItems = overflowItemKeys ? availableItems.reduce((acc, child, index) => {
+        const key = getChildKey(child, index);
+        if (overflowItemKeys.indexOf(key) >= 0) {
+            acc.push([key, child]);
+        }
+        return acc;
+    }, []) : [];
+    const direction = (0, exports.getToolbarDirection)(expandsTo);
+    const overflowExpandsTo = undefined !== props.overflowExpandsTo ? props.overflowExpandsTo : Direction_1.Direction.Right;
+    const addOverflowButton = React.useCallback((atStart) => {
+        const overflowItems = !!atStart ? overflowPanelItems.reverse() : overflowPanelItems;
+        return (React.createElement(exports.ToolbarItemContext.Provider, { value: {
+                hasOverflow: false,
+                useHeight,
+                onResize: handleOverflowResize,
+            } },
+            React.createElement(Overflow_1.ToolbarOverflowButton, { expandsTo: expandsTo, onClick: handleClick, onClose: handleClose, open: overflowItems.length > 0 && isOverflowPanelOpen, panelNode: React.createElement(OverflowPanel_1.ToolbarOverflowPanel, null,
+                    React.createElement(OverflowItemsContainer, null, overflowItems.map(([key, child]) => {
+                        return (React.createElement(exports.ToolbarItemContext.Provider, { key: key, value: {
+                                hasOverflow: true,
+                                useHeight,
+                                onResize: () => { },
+                            } }, React.createElement(ItemWrapper_1.ItemWrapper, { className: getItemWrapperClass(child) }, child)));
+                    }))), title: overflowTitle.current })));
+    }, [handleClick, handleClose, handleOverflowResize, isOverflowPanelOpen, expandsTo, overflowPanelItems, useHeight]);
+    const className = (0, classnames_1.default)("components-toolbar-overflow-sizer", Direction_1.OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
+    const showOverflowAtStart = (direction === Direction_1.OrthogonalDirection.Horizontal) && (panelAlignment === ToolbarPanelAlignment.End);
+    /* The ItemWrapper is used to wrap the <Item> <ExpandableItem> with a <div> that specifies a ref that the sizing logic uses to determine the
+       size of the item. */
+    return (React.createElement(exports.ToolbarWithOverflowDirectionContext.Provider, { value: {
+            expandsTo, direction, overflowExpandsTo, panelAlignment, useDragInteraction,
+            toolbarOpacitySetting: undefined !== props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,
+            overflowDirection: direction === Direction_1.OrthogonalDirection.Horizontal ? Direction_1.OrthogonalDirection.Vertical : Direction_1.OrthogonalDirection.Horizontal,
+            openPopupCount: popupPanelCount,
+            onPopupPanelOpenClose: handlePopupPanelOpenClose,
+            overflowDisplayActive: overflowPanelItems.length > 0 && isOverflowPanelOpen,
+            onItemExecuted: props.onItemExecuted ? props.onItemExecuted : () => { },
+            onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e) => { },
+        } }, (availableItems.length > 0) &&
+        React.createElement("div", { className: className, ref: refs, style: props.style, onKeyDown: props.onKeyDown, role: "presentation" },
+            React.createElement(Items_1.ToolbarItems, { className: "components-items", direction: direction },
+                (!overflowItemKeys || overflowItemKeys.length > 0) && showOverflowAtStart && addOverflowButton(true),
+                displayedItems.map(([key, child]) => {
+                    const onEntryResize = handleEntryResize(key);
+                    return (React.createElement(exports.ToolbarItemContext.Provider, { key: key, value: {
+                            hasOverflow: false,
+                            useHeight,
+                            onResize: onEntryResize,
+                        } }, React.createElement(ItemWrapper_1.ItemWrapper, { className: getItemWrapperClass(child) }, child)));
+                }),
+                (!overflowItemKeys || overflowItemKeys.length > 0) && !showOverflowAtStart && addOverflowButton(false)))));
+}
+exports.ToolbarWithOverflow = ToolbarWithOverflow;
+/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of availableItems.
+ * @internal
+ */
+function getChildKey(child, index) {
+    // istanbul ignore else
+    if (React.isValidElement(child) && child.key !== null) {
+        return child.key.toString();
+    }
+    // istanbul ignore next
+    return index.toString();
+}
+/** Returns a subset of toolbar item entry keys that exceed given width and should be overflowItemKeys.
+ * @internal
+ */
+function determineOverflowItems(size, entries, overflowButtonSize, overflowButtonAtStart) {
+    let toolbarSize = 0;
+    const buttonPadding = 2;
+    if (overflowButtonAtStart && entries.length > 0) {
+        let i = entries.length - 1;
+        for (; i >= 0; i--) {
+            const w = entries[i][1] + buttonPadding;
+            const newSettingsWidth = toolbarSize + w;
+            if (newSettingsWidth > size) {
+                toolbarSize += (overflowButtonSize + buttonPadding);
+                break;
+            }
+            toolbarSize = newSettingsWidth;
+        }
+        if (i >= 0) {
+            let j = i + 1;
+            for (; j < entries.length; j++) {
+                if (toolbarSize <= size)
+                    break;
+                const w = entries[j][1] + buttonPadding;
+                toolbarSize -= w;
+            }
+            return entries.slice(0, j).map((e) => e[0]);
+        }
+        else {
+            return [];
+        }
+    }
+    else {
+        let i = 0;
+        for (; i < entries.length; i++) {
+            const w = entries[i][1] + buttonPadding;
+            const newSettingsWidth = toolbarSize + w;
+            if (newSettingsWidth > size) {
+                toolbarSize += (overflowButtonSize + buttonPadding);
+                break;
+            }
+            toolbarSize = newSettingsWidth;
+        }
+        let j = i;
+        for (; j > 0; j--) {
+            if (toolbarSize <= size)
+                break;
+            const w = entries[j][1] + buttonPadding;
+            toolbarSize -= w;
+        }
+        return entries.slice(j).map((e) => e[0]);
+    }
+}
+/** Hook that returns a list of overflowItemKeys availableItems.
+ * @internal
+ */
+function useOverflow(availableItems, overflowButtonAtStart) {
+    const [overflowItemKeys, setOverflown] = React.useState();
+    const itemSizes = React.useRef(new Map());
+    const size = React.useRef(undefined);
+    const overflowButtonSize = React.useRef(undefined);
+    const calculateOverflow = React.useCallback(() => {
+        const sizes = verifiedMapEntries(itemSizes.current);
+        if (size.current === undefined ||
+            sizes === undefined ||
+            overflowButtonSize.current === undefined) {
+            setOverflown(undefined);
+            return;
+        }
+        // Calculate overflow.
+        const newOverflown = determineOverflowItems(size.current, [...sizes.entries()], overflowButtonSize.current, overflowButtonAtStart);
+        setOverflown((prevOverflown) => {
+            return eql(prevOverflown, newOverflown) ? prevOverflown : newOverflown;
+        });
+    }, [overflowButtonAtStart]);
+    React.useLayoutEffect(() => {
+        const newEntryWidths = new Map();
+        const array = React.Children.toArray(availableItems);
+        for (let i = 0; i < array.length; i++) {
+            const child = array[i];
+            const key = getChildKey(child, i);
+            const lastW = itemSizes.current.get(key);
+            newEntryWidths.set(key, lastW);
+        }
+        itemSizes.current = newEntryWidths;
+        calculateOverflow();
+    }, [availableItems, calculateOverflow]);
+    const handleContainerResize = React.useCallback((w) => {
+        const calculate = size.current !== w;
+        size.current = w;
+        calculate && calculateOverflow();
+    }, [calculateOverflow]);
+    const handleOverflowResize = React.useCallback((w) => {
+        const calculate = overflowButtonSize.current !== w;
+        overflowButtonSize.current = w;
+        calculate && calculateOverflow();
+    }, [calculateOverflow]);
+    const handleEntryResize = React.useCallback((key) => (w) => {
+        const oldW = itemSizes.current.get(key);
+        if (oldW !== w) {
+            itemSizes.current.set(key, w);
+            calculateOverflow();
+        }
+    }, [calculateOverflow]);
+    return [overflowItemKeys, handleContainerResize, handleOverflowResize, handleEntryResize];
+}
+/** Interface toolbars use to define context for its items.
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.ToolbarItemContext = React.createContext(null);
+/** @internal */
+function useToolItemEntryContext() {
+    return React.useContext(exports.ToolbarItemContext);
+}
+exports.useToolItemEntryContext = useToolItemEntryContext;
+function verifiedMapEntries(map) {
+    for (const [, val] of map) {
+        // istanbul ignore next  during unit testing
+        if (val === undefined)
+            return undefined;
+    }
+    return map;
+}
+function eql(prev, value) {
+    if (!prev)
+        return false;
+    // istanbul ignore next
+    if (prev.length !== value.length)
+        return false;
+    for (let i = 0; i < prev.length; i++) {
+        const p = prev[i];
+        const v = value[i];
+        // istanbul ignore next
+        if (p !== v)
+            return false;
+    }
+    return true;
+}
 //# sourceMappingURL=ToolbarWithOverflow.js.map