@itwin/components-react 4.0.0-dev.9 → 4.0.0

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

@@ -1,439 +1,443 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Toolbar.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities, } from "@itwin/appui-abstract";
-import { BadgeUtilities, IconHelper, useRefs } from "@itwin/core-react";
-import { ToolbarButtonItem } from "./Item";
-import { ToolbarItems } from "./Items";
-import { ItemWrapper, useResizeObserverSingleDimension } from "./ItemWrapper";
-import { ToolbarOverflowButton } from "./Overflow";
-import { ToolbarOverflowPanel } from "./OverflowPanel";
-import { PopupItem } from "./PopupItem";
-import { PopupItemsPanel } from "./PopupItemsPanel";
-import { PopupItemWithDrag } from "./PopupItemWithDrag";
-import { Direction, DirectionHelpers, OrthogonalDirection, OrthogonalDirectionHelpers } from "./utilities/Direction";
-import { UiComponents } from "../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
-export const ToolbarPopupAutoHideContext = React.createContext(false);
-/**
- * React hook used to retrieve the ToolbarPopupAutoHideContext.
- *  @public
- */
-export function useToolbarPopupAutoHideContext() {
-    return React.useContext(ToolbarPopupAutoHideContext);
-}
-/** CustomToolbarItem type guard.
- * @internal
- */
-export function isCustomToolbarItem(item) {
-    return !!item.isCustom && ("panelContentNode" in item);
-}
-/** @internal */
-export const getToolbarDirection = (expandsTo) => {
-    const orthogonalDirection = DirectionHelpers.getOrthogonalDirection(expandsTo);
-    return OrthogonalDirectionHelpers.inverse(orthogonalDirection);
-};
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
- * @public
- */
-export var ToolbarPanelAlignment;
-(function (ToolbarPanelAlignment) {
-    ToolbarPanelAlignment[ToolbarPanelAlignment["Start"] = 0] = "Start";
-    ToolbarPanelAlignment[ToolbarPanelAlignment["End"] = 1] = "End";
-})(ToolbarPanelAlignment || (ToolbarPanelAlignment = {}));
-/** Enumeration of Toolbar Opacity setting.
- * @public
- */
-export 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 || (ToolbarOpacitySetting = {}));
-/** Helpers for [[ToolbarPanelAlignment]].
- * @internal
- */
-export 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;
-        }
-    }
-}
-/** 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
-export const ToolbarWithOverflowDirectionContext = React.createContext({
-    expandsTo: Direction.Bottom,
-    direction: OrthogonalDirection.Horizontal,
-    overflowExpandsTo: Direction.Right,
-    overflowDirection: 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 &&
-        IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
-        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
-    const isDisabled = React.useMemo(() => ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
-    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
-    const badge = React.useMemo(() => BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
-    return React.createElement(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 });
-}
-/** @internal */
-function GroupPopupItem({ item, addGroupSeparator }) {
-    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
-    const title = ConditionalStringValue.getValue(item.label);
-    const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
-    const panel = React.useMemo(() => React.createElement(PopupItemsPanel, { groupItem: item, activateOnPointerUp: false }), [item]);
-    if (useDragInteraction) {
-        return React.createElement(PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, groupItem: item, badge: badge, addGroupSeparator: addGroupSeparator });
-    }
-    return React.createElement(PopupItem, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: badge, hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator });
-}
-/** @internal */
-function ActionItem({ item, addGroupSeparator }) {
-    const title = ConditionalStringValue.getValue(item.label);
-    const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
-    const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
-    const onExecute = React.useCallback(() => {
-        item.execute();
-        onItemExecuted(item);
-    }, [item, onItemExecuted]);
-    return React.createElement(ToolbarButtonItem, { itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, key: item.id, isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isActive: item.isActive, onClick: onExecute, badge: badge, addGroupSeparator: addGroupSeparator });
-}
-/** @internal */
-export function ToolbarItemComponent({ item, addGroupSeparator }) {
-    if (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 (ToolbarItemUtilities.isActionButton(item)) {
-            return React.createElement(ActionItem, { item: item, addGroupSeparator: addGroupSeparator });
-        }
-    }
-    // istanbul ignore next
-    return null;
-}
-/** @internal */
-export function useToolbarWithOverflowDirectionContext() {
-    return React.useContext(ToolbarWithOverflowDirectionContext);
-}
-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
- */
-export function ToolbarWithOverflow(props) {
-    const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;
-    const useDragInteraction = !!props.useDragInteraction;
-    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;
-    const useHeight = (expandsTo === Direction.Right || expandsTo === Direction.Left);
-    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
-    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
-    const overflowTitle = React.useRef(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 = 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 = 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 = getToolbarDirection(expandsTo);
-    const overflowExpandsTo = undefined !== props.overflowExpandsTo ? props.overflowExpandsTo : Direction.Right;
-    const addOverflowButton = React.useCallback((atStart) => {
-        const overflowItems = !!atStart ? overflowPanelItems.reverse() : overflowPanelItems;
-        return (React.createElement(ToolbarItemContext.Provider, { value: {
-                hasOverflow: false,
-                useHeight,
-                onResize: handleOverflowResize,
-            } },
-            React.createElement(ToolbarOverflowButton, { expandsTo: expandsTo, onClick: handleClick, onClose: handleClose, open: overflowItems.length > 0 && isOverflowPanelOpen, panelNode: React.createElement(ToolbarOverflowPanel, null,
-                    React.createElement(OverflowItemsContainer, null, overflowItems.map(([key, child]) => {
-                        return (React.createElement(ToolbarItemContext.Provider, { key: key, value: {
-                                hasOverflow: true,
-                                useHeight,
-                                onResize: () => { },
-                            } }, React.createElement(ItemWrapper, { className: getItemWrapperClass(child) }, child)));
-                    }))), title: overflowTitle.current })));
-    }, [handleClick, handleClose, handleOverflowResize, isOverflowPanelOpen, expandsTo, overflowPanelItems, useHeight]);
-    const className = classnames("components-toolbar-overflow-sizer", OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
-    const showOverflowAtStart = (direction === 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(ToolbarWithOverflowDirectionContext.Provider, { value: {
-            expandsTo, direction, overflowExpandsTo, panelAlignment, useDragInteraction,
-            toolbarOpacitySetting: undefined !== props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,
-            overflowDirection: direction === OrthogonalDirection.Horizontal ? OrthogonalDirection.Vertical : 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(ToolbarItems, { className: "components-items", direction: direction },
-                (!overflowItemKeys || overflowItemKeys.length > 0) && showOverflowAtStart && addOverflowButton(true),
-                displayedItems.map(([key, child]) => {
-                    const onEntryResize = handleEntryResize(key);
-                    return (React.createElement(ToolbarItemContext.Provider, { key: key, value: {
-                            hasOverflow: false,
-                            useHeight,
-                            onResize: onEntryResize,
-                        } }, React.createElement(ItemWrapper, { className: getItemWrapperClass(child) }, child)));
-                }),
-                (!overflowItemKeys || overflowItemKeys.length > 0) && !showOverflowAtStart && addOverflowButton(false)))));
-}
-/** 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
-export const ToolbarItemContext = React.createContext(null);
-/** @internal */
-export function useToolItemEntryContext() {
-    return React.useContext(ToolbarItemContext);
-}
-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;
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Toolbar.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities, } from "@itwin/appui-abstract";
+import { BadgeUtilities, Icon, IconHelper, useRefs } from "@itwin/core-react";
+import { ToolbarButtonItem } from "./Item";
+import { ToolbarItems } from "./Items";
+import { ItemWrapper, useResizeObserverSingleDimension } from "./ItemWrapper";
+import { ToolbarOverflowButton } from "./Overflow";
+import { ToolbarOverflowPanel } from "./OverflowPanel";
+import { PopupItem } from "./PopupItem";
+import { PopupItemsPanel } from "./PopupItemsPanel";
+import { PopupItemWithDrag } from "./PopupItemWithDrag";
+import { Direction, DirectionHelpers, OrthogonalDirection, OrthogonalDirectionHelpers } from "./utilities/Direction";
+import { UiComponents } from "../UiComponents";
+import { SvgPlaceholder } from "@itwin/itwinui-icons-react";
+/**
+ * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ToolbarPopupAutoHideContext = React.createContext(false);
+/**
+ * React hook used to retrieve the ToolbarPopupAutoHideContext.
+ *  @public
+ */
+export function useToolbarPopupAutoHideContext() {
+    return React.useContext(ToolbarPopupAutoHideContext);
+}
+/** CustomToolbarItem type guard.
+ * @internal
+ */
+export function isCustomToolbarItem(item) {
+    return !!item.isCustom && ("panelContentNode" in item); // eslint-disable-line deprecation/deprecation
+}
+/** @internal */
+export const getToolbarDirection = (expandsTo) => {
+    const orthogonalDirection = DirectionHelpers.getOrthogonalDirection(expandsTo);
+    return OrthogonalDirectionHelpers.inverse(orthogonalDirection);
+};
+/** Available alignment modes of [[Toolbar]] panels.
+ * @public
+ */
+export var ToolbarPanelAlignment;
+(function (ToolbarPanelAlignment) {
+    ToolbarPanelAlignment[ToolbarPanelAlignment["Start"] = 0] = "Start";
+    ToolbarPanelAlignment[ToolbarPanelAlignment["End"] = 1] = "End";
+})(ToolbarPanelAlignment || (ToolbarPanelAlignment = {}));
+/** Enumeration of Toolbar Opacity setting.
+ * @public
+ */
+export 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 || (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;
+        }
+    }
+}
+/** 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";
+export { ToolbarPanelAlignmentHelpers };
+/**
+ * Context used by Toolbar component to provide Direction to child components.
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ToolbarWithOverflowDirectionContext = React.createContext({
+    expandsTo: Direction.Bottom,
+    direction: OrthogonalDirection.Horizontal,
+    overflowExpandsTo: Direction.Right,
+    overflowDirection: 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 &&
+        IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
+        React.createElement(Icon, { className: "icon", iconSpec: React.createElement(SvgPlaceholder, null) }), [item.icon, item.internalData]);
+    const isDisabled = React.useMemo(() => ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
+    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
+    const badge = React.useMemo(() => BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
+    return React.createElement(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 });
+}
+/** @internal */
+function GroupPopupItem({ item, addGroupSeparator }) {
+    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
+    const title = ConditionalStringValue.getValue(item.label);
+    const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
+    const panel = React.useMemo(() => React.createElement(PopupItemsPanel, { groupItem: item, activateOnPointerUp: false }), [item]);
+    if (useDragInteraction) {
+        return React.createElement(PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, groupItem: item, badge: badge, addGroupSeparator: addGroupSeparator });
+    }
+    return React.createElement(PopupItem, { key: item.id, itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: badge, hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator });
+}
+/** @internal */
+function ActionItem({ item, addGroupSeparator }) {
+    const title = ConditionalStringValue.getValue(item.label);
+    const badge = BadgeUtilities.getComponentForBadgeType(item.badgeType);
+    const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
+    const onExecute = React.useCallback(() => {
+        item.execute();
+        onItemExecuted(item);
+    }, [item, onItemExecuted]);
+    return React.createElement(ToolbarButtonItem, { itemId: item.id, providerId: item.providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, key: item.id, isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, icon: IconHelper.getIconReactNode(item.icon, item.internalData), isActive: item.isActive, onClick: onExecute, badge: badge, addGroupSeparator: addGroupSeparator });
+}
+/** @internal */
+export function ToolbarItemComponent({ item, addGroupSeparator }) {
+    if (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 (ToolbarItemUtilities.isActionButton(item)) {
+            return React.createElement(ActionItem, { item: item, addGroupSeparator: addGroupSeparator });
+        }
+    }
+    // istanbul ignore next
+    return null;
+}
+/** @internal */
+export function useToolbarWithOverflowDirectionContext() {
+    return React.useContext(ToolbarWithOverflowDirectionContext);
+}
+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
+ * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
+ */
+export function ToolbarWithOverflow(props) {
+    const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;
+    const useDragInteraction = !!props.useDragInteraction;
+    const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;
+    const useHeight = (expandsTo === Direction.Right || expandsTo === Direction.Left);
+    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
+    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
+    const overflowTitle = React.useRef(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) => {
+                /* istanbul ignore next */
+                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 = 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 = 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 = getToolbarDirection(expandsTo);
+    const overflowExpandsTo = undefined !== props.overflowExpandsTo ? props.overflowExpandsTo : Direction.Right;
+    const addOverflowButton = React.useCallback((atStart) => {
+        const overflowItems = !!atStart ? overflowPanelItems.reverse() : overflowPanelItems;
+        return (React.createElement(ToolbarItemContext.Provider, { value: {
+                hasOverflow: false,
+                useHeight,
+                onResize: handleOverflowResize,
+            } },
+            React.createElement(ToolbarOverflowButton, { expandsTo: expandsTo, onClick: handleClick, onClose: handleClose, open: overflowItems.length > 0 && isOverflowPanelOpen, panelNode: React.createElement(ToolbarOverflowPanel, null,
+                    React.createElement(OverflowItemsContainer, null, overflowItems.map(([key, child]) => {
+                        return (React.createElement(ToolbarItemContext.Provider, { key: key, value: {
+                                hasOverflow: true,
+                                useHeight,
+                                onResize: () => { },
+                            } }, React.createElement(ItemWrapper, { className: getItemWrapperClass(child) }, child)));
+                    }))), title: overflowTitle.current })));
+    }, [handleClick, handleClose, handleOverflowResize, isOverflowPanelOpen, expandsTo, overflowPanelItems, useHeight]);
+    const className = classnames("components-toolbar-overflow-sizer", OrthogonalDirectionHelpers.getCssClassName(direction), props.className);
+    const showOverflowAtStart = (direction === 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(ToolbarWithOverflowDirectionContext.Provider, { value: {
+            expandsTo, direction, overflowExpandsTo, panelAlignment, useDragInteraction,
+            toolbarOpacitySetting: undefined !== props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,
+            overflowDirection: direction === OrthogonalDirection.Horizontal ? OrthogonalDirection.Vertical : 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(ToolbarItems, { className: "components-items", direction: direction },
+                (!overflowItemKeys || overflowItemKeys.length > 0) && showOverflowAtStart && addOverflowButton(true),
+                displayedItems.map(([key, child]) => {
+                    const onEntryResize = handleEntryResize(key);
+                    return (React.createElement(ToolbarItemContext.Provider, { key: key, value: {
+                            hasOverflow: false,
+                            useHeight,
+                            onResize: onEntryResize,
+                        } }, React.createElement(ItemWrapper, { className: getItemWrapperClass(child) }, child)));
+                }),
+                (!overflowItemKeys || overflowItemKeys.length > 0) && !showOverflowAtStart && addOverflowButton(false)))));
+}
+/** 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
+export const ToolbarItemContext = React.createContext(null);
+/** @internal */
+export function useToolItemEntryContext() {
+    return React.useContext(ToolbarItemContext);
+}
+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