@itwin/components-react 4.3.1 → 4.4.0

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts

@@ -3,97 +3,10 @@
  */
 import "./Toolbar.scss";
 import * as React from "react";
-import type { ActionButton, CommonToolbarItem, CustomButtonDefinition, GroupButton, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
 import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction, OrthogonalDirection } from "./utilities/Direction";
-/** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
- * @public
- * @deprecated in 4.0. Use [ToolbarCustomItem]($appui-react) instead.
- */
-export interface CustomToolbarItem extends CustomButtonDefinition {
-    /** defines the content to display in popup panel */
-    panelContentNode?: React.ReactNode;
-    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
-     * content node is unmounted each time the popup is closed. */
-    keepContentsLoaded?: boolean;
-}
-/**
- * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
- * @public
- */
-export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
-/**
- * React hook used to retrieve the ToolbarPopupAutoHideContext.
- *  @public
- */
-export declare function useToolbarPopupAutoHideContext(): boolean;
-/** Describes toolbar item.
- * @public
- * @deprecated in 4.0. Use [ToolbarItem]($appui-react) instead.
- */
-export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
-/** CustomToolbarItem type guard.
- * @internal
- */
-export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
-/** @internal */
-export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
-/** Available alignment modes of [[Toolbar]] panels.
- * @public
- */
-export declare enum ToolbarPanelAlignment {
-    Start = 0,
-    End = 1
-}
-/** Enumeration of Toolbar Opacity setting.
- * @public
- */
-export declare enum ToolbarOpacitySetting {
-    /** Use the default background, box-shadow opacity and backdrop-filter blur */
-    Defaults = 0,
-    /** Alter the opacity from transparent to the defaults based on mouse proximity */
-    Proximity = 1,
-    /** Use a transparent background, box-shadow opacity and backdrop-filter blur */
-    Transparent = 2
-}
-/** Helpers for [[ToolbarPanelAlignment]].
- * @internal
- */
-export declare class ToolbarPanelAlignmentHelpers {
-    /** Class name of [[ToolbarPanelAlignment.Start]] */
-    static readonly START_CLASS_NAME = "components-panel-alignment-start";
-    /** Class name of [[ToolbarPanelAlignment.End]] */
-    static readonly END_CLASS_NAME = "components-panel-alignment-end";
-    /** @returns Class name of specified [[ToolbarPanelAlignment]] */
-    static getCssClassName(panelAlignment: ToolbarPanelAlignment): string;
-}
-/** @internal */
-export interface ToolbarOverflowContextProps {
-    readonly expandsTo: Direction;
-    readonly direction: OrthogonalDirection;
-    readonly overflowExpandsTo: Direction;
-    readonly overflowDirection: OrthogonalDirection;
-    readonly panelAlignment: ToolbarPanelAlignment;
-    readonly useDragInteraction: boolean;
-    readonly toolbarOpacitySetting: ToolbarOpacitySetting;
-    readonly openPopupCount: number;
-    readonly onPopupPanelOpenClose: (isOpening: boolean) => void;
-    readonly overflowDisplayActive: boolean;
-    readonly onItemExecuted: OnItemExecutedFunc;
-    readonly onKeyDown: (e: React.KeyboardEvent) => void;
-}
-/**
- * Context used by Toolbar component to provide Direction to child components.
- * @internal
- */
-export declare const ToolbarWithOverflowDirectionContext: React.Context<ToolbarOverflowContextProps>;
-/** @internal */
-export declare function ToolbarItemComponent({ item, addGroupSeparator, }: {
-    item: ToolbarItem;
-    addGroupSeparator: boolean;
-}): JSX.Element | null;
-/** @internal */
-export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
+import type { Direction } from "./utilities/Direction";
+import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent";
 /** Properties of [[ToolbarWithOverflow]] component.
  * @public
  * @deprecated in 4.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
@@ -116,23 +29,10 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
     /** Optional function to call on any KeyDown events processed by toolbar */
     onKeyDown?: (e: React.KeyboardEvent) => void;
 }
-/** Component that displays tool settings as a bar across the top of the content view.
+/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
+ * and put the other items into a single panel.
  * @public
  * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
-/** Interface toolbars use to define context for its items.
- * @internal
- */
-export interface ToolbarItemContextArgs {
-    readonly hasOverflow: boolean;
-    readonly useHeight: boolean;
-    readonly onResize: (w: number) => void;
-}
-/** Interface toolbars use to define context for its items.
- * @internal
- */
-export declare const ToolbarItemContext: React.Context<ToolbarItemContextArgs>;
-/** @internal */
-export declare function useToolItemEntryContext(): ToolbarItemContextArgs;
 //# sourceMappingURL=ToolbarWithOverflow.d.ts.map

package/lib/esm/components-react/toolbar/ToolbarWithOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAGpC;;;GAGG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;;;GAIG;AAEH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAQlE"}

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

@@ -6,482 +6,16 @@
  * @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
- */
-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(
-// eslint-disable-next-line deprecation/deprecation
-item
-// eslint-disable-next-line deprecation/deprecation
-) {
-    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
- */
-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(() => {
-        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]);
-    // istanbul ignore next
-    const providerId = "providerId" in item ? item.providerId : undefined;
-    if (useDragInteraction) {
-        return (React.createElement(PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: 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: 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]);
-    // istanbul ignore next
-    const providerId = "providerId" in item ? item.providerId : undefined;
-    return (React.createElement(ToolbarButtonItem, { itemId: item.id, providerId: 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.
+import { InternalToolbarComponent } from "./InternalToolbarComponent";
+/** Component that displays toolbar items, displaying only the elements that can fit in the available space,
+ * and put the other items into a single panel.
  * @public
  * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 // eslint-disable-next-line deprecation/deprecation
 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;
-                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
- */
-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;
+    const { overflowExpandsTo, ...internalProps } = props;
+    return (React.createElement(InternalToolbarComponent, { enableOverflow: { overflowExpandsTo }, ...internalProps }));
 }
 //# sourceMappingURL=ToolbarWithOverflow.js.map