@itwin/components-react 4.17.6 → 5.0.0-dev.3

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

@@ -1,152 +0,0 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import type { ActionButton, CommonToolbarItem, CustomButtonDefinition, GroupButton, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import type { BadgeKind, CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction, OrthogonalDirection } from "./utilities/Direction";
-import type { BeEvent } from "@itwin/core-bentley";
-/** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
- * @public
- * @deprecated in 4.0.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.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, badgeKind, }: {
-    item: ToolbarItem;
-    addGroupSeparator: boolean;
-    badgeKind?: BadgeKind;
-}): React.JSX.Element | null;
-/** @internal */
-export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
-/** Old toolbar item type with new badge type.
- * @internal
- */
-export type CommonToolbarItemWithBadgeKind = CommonToolbarItem & {
-    badgeKind?: BadgeKind;
-};
-/** Properties of [[ToolbarComponent]] component.
- * @internal
- */
-export interface InternalToolbarComponentProps extends CommonProps, // eslint-disable-line deprecation/deprecation
-NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Describes if items that do not fit available space should move to an expandable panel. Defaults to: false */
-    enableOverflow?: boolean | {
-        /** Describes to which direction the overflow popup panels are expanded if overflow is enabled. Defaults to: [[Direction.Right]] */
-        overflowExpandsTo?: Direction;
-    };
-    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItemWithBadgeKind[];
-    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
-    panelAlignment?: ToolbarPanelAlignment;
-    /** Use Drag Interaction to open popups with nest action buttons. */
-    useDragInteraction?: boolean;
-    /** Determines whether to use mouse proximity to alter the opacity of the toolbar. */
-    toolbarOpacitySetting?: ToolbarOpacitySetting;
-    /** Optional function to call on any item execution. */
-    onItemExecuted?: OnItemExecutedFunc;
-    /** Optional function to call on any KeyDown events processed by toolbar. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** SyncEvents on which the conditional should listen to. */
-    syncUiEvent?: BeEvent<(args: {
-        eventIds: Set<string>;
-    }) => void>;
-}
-/** Component that displays toolbar items.
- * @internal
- */
-export declare function InternalToolbarComponent(props: InternalToolbarComponentProps): React.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=InternalToolbarComponent.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InternalToolbarComponent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/InternalToolbarComponent.tsx"],"names":[],"mappings":"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"}

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

@@ -1,505 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { Badge, Icon, IconHelper } 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 { SvgPlaceholder } from "@itwin/itwinui-icons-react";
-import { useConditionalSynchedItems } from "./useConditionalSynchedItems";
-import { useTranslation } from "../l10n/useTranslation";
-/**
- * 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
- */
-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
- */
-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: (_isOpening) => { },
-    overflowDisplayActive: false,
-    onItemExecuted: (_item) => void {},
-    onKeyDown: (_e) => void {},
-});
-/** @internal */
-function CustomItem({ item, addGroupSeparator, badgeKind, }) {
-    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
-    const icon = React.useMemo(() => (item.icon &&
-        // eslint-disable-next-line deprecation/deprecation
-        IconHelper.getIconReactNode(item.icon, item.internalData)) || (
-    // eslint-disable-next-line deprecation/deprecation
-    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(() => ConditionalStringValue.getValue(item.label) ?? item.id, [item.id, item.label]);
-    return (
-    // eslint-disable-next-line deprecation/deprecation
-    React.createElement(PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: React.createElement(Badge, { type: badgeKind || item.badgeType }), addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded }));
-}
-/** @internal */
-function GroupPopupItem({ item, addGroupSeparator, badgeKind, }) {
-    const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
-    const title = ConditionalStringValue.getValue(item.label);
-    const panel = React.useMemo(() => React.createElement(PopupItemsPanel, { groupItem: item, activateOnPointerUp: false }), [item]);
-    const providerId = "providerId" in item ? item.providerId : undefined;
-    if (useDragInteraction) {
-        return (
-        // eslint-disable-next-line deprecation/deprecation
-        React.createElement(PopupItemWithDrag, { key: item.id, itemId: item.id, providerId: providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, 
-            // eslint-disable-next-line deprecation/deprecation
-            icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, groupItem: item, badge: React.createElement(Badge, { type: badgeKind || item.badgeType }), addGroupSeparator: addGroupSeparator }));
-    }
-    return (
-    // eslint-disable-next-line deprecation/deprecation
-    React.createElement(PopupItem, { key: item.id, itemId: item.id, providerId: providerId, itemPriority: item.itemPriority, groupPriority: item.groupPriority, 
-        // eslint-disable-next-line deprecation/deprecation
-        icon: IconHelper.getIconReactNode(item.icon, item.internalData), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), title: title, panel: panel, badge: React.createElement(Badge, { type: badgeKind || item.badgeType }), hideIndicator: useDragInteraction, addGroupSeparator: addGroupSeparator }));
-}
-/** @internal */
-function ActionItem({ item, addGroupSeparator, badgeKind, }) {
-    const title = ConditionalStringValue.getValue(item.label);
-    const { onItemExecuted } = useToolbarWithOverflowDirectionContext();
-    const onExecute = React.useCallback(() => {
-        item.execute();
-        onItemExecuted(item);
-    }, [item, onItemExecuted]);
-    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, 
-        // eslint-disable-next-line deprecation/deprecation
-        icon: IconHelper.getIconReactNode(item.icon, item.internalData), isActive: item.isActive, onClick: onExecute, badge: React.createElement(Badge, { type: badgeKind || item.badgeType }), addGroupSeparator: addGroupSeparator }));
-}
-/** @internal */
-export function ToolbarItemComponent({ item, addGroupSeparator, badgeKind, }) {
-    if (ToolbarItemUtilities.isGroupButton(item)) {
-        return (React.createElement(GroupPopupItem, { item: item, addGroupSeparator: addGroupSeparator, badgeKind: badgeKind }));
-    }
-    else if (isCustomToolbarItem(item)) {
-        return (React.createElement(CustomItem, { item: item, addGroupSeparator: addGroupSeparator, badgeKind: badgeKind }));
-    }
-    else {
-        if (ToolbarItemUtilities.isActionButton(item)) {
-            return (React.createElement(ActionItem, { item: item, addGroupSeparator: addGroupSeparator, badgeKind: badgeKind }));
-        }
-    }
-    return null;
-}
-/** @internal */
-export function useToolbarWithOverflowDirectionContext() {
-    return React.useContext(ToolbarWithOverflowDirectionContext);
-}
-function OverflowItemsContainer(p) {
-    return React.createElement(React.Fragment, null, p.children);
-}
-function getItemWrapperClass(child) {
-    if (React.isValidElement(child)) {
-        if (child.props && child.props.addGroupSeparator)
-            return "components-toolbar-button-add-gap-before";
-    }
-    return undefined;
-}
-/**
- * Recursively looks through all items and groups and removes the hidden items
- * from the working object.
- * @param items List of object to analyze.
- * @returns Copy of the provided items, minus the hidden ones.
- */
-function filterHiddenItems(items) {
-    return items
-        .filter((item) => !ConditionalBooleanValue.getValue(item.isHidden))
-        .map((i) => {
-        if ("items" in i) {
-            return { ...i, items: filterHiddenItems(i.items) };
-        }
-        return i;
-    });
-}
-/** Component that displays toolbar items.
- * @internal
- */
-export function InternalToolbarComponent(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 { translate } = useTranslation();
-    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
-    const [popupPanelCount, setPopupPanelCount] = React.useState(0);
-    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(() => {
-            if (!isMounted.current)
-                return;
-            setPopupPanelCount((prev) => {
-                const nextCount = isOpening ? prev + 1 : prev - 1;
-                return nextCount < 0 ? 0 : nextCount;
-            });
-        });
-    }, []);
-    const width = React.useRef(undefined);
-    const eventSynchedItems = useConditionalSynchedItems(props.items, props.syncUiEvent);
-    const availableNodes = React.useMemo(() => {
-        const filteredItems = filterHiddenItems(eventSynchedItems);
-        return filteredItems.map((item, index) => {
-            let addGroupSeparator = false;
-            if (index > 0)
-                addGroupSeparator =
-                    item.groupPriority !== filteredItems[index - 1].groupPriority;
-            return (React.createElement(ToolbarItemComponent, { key: item.id, item: item, addGroupSeparator: !!addGroupSeparator, badgeKind: item.badgeKind }));
-        });
-    }, [eventSynchedItems]);
-    /* 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);
-    }, []);
-    const handleClose = React.useCallback(() => {
-        setIsOverflowPanelOpen(false);
-    }, []);
-    // Not setting the ref will disable overflow management, but will keep proper refresh of items.
-    const ref = props.enableOverflow ? resizeObserverRef : undefined;
-    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 = (typeof props.enableOverflow !== "boolean" &&
-        props.enableOverflow?.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: translate("toolbar.overflow") })));
-    }, [
-        overflowPanelItems,
-        useHeight,
-        handleOverflowResize,
-        expandsTo,
-        handleClick,
-        handleClose,
-        isOverflowPanelOpen,
-        translate,
-    ]);
-    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: 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
-                : (_e) => { },
-        } }, availableItems.length > 0 && (React.createElement("div", { className: className, ref: ref, style: props.style, onKeyDown: props.onKeyDown, role: "presentation" },
-        React.createElement(ToolbarItems, { className: "components-items", direction: direction },
-            props.enableOverflow &&
-                (!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)));
-            }),
-            props.enableOverflow &&
-                (!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) {
-    if (React.isValidElement(child) && child.key !== null) {
-        return child.key.toString();
-    }
-    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({
-    hasOverflow: false,
-    useHeight: false,
-    onResize: () => {
-        // intentionally do nothing by default.
-    },
-});
-/** @internal */
-export function useToolItemEntryContext() {
-    return React.useContext(ToolbarItemContext);
-}
-function verifiedMapEntries(map) {
-    for (const [, val] of map) {
-        if (val === undefined)
-            return undefined;
-    }
-    return map;
-}
-function eql(prev, value) {
-    if (!prev)
-        return false;
-    if (prev.length !== value.length)
-        return false;
-    for (let i = 0; i < prev.length; i++) {
-        const p = prev[i];
-        const v = value[i];
-        if (p !== v)
-            return false;
-    }
-    return true;
-}
-//# sourceMappingURL=InternalToolbarComponent.js.map