@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,145 +1,145 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./PopupItem.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities } from "@itwin/appui-abstract";
-import { BadgeUtilities, IconHelper, useRefState } from "@itwin/core-react";
-import { PopupItemPopup, ToolbarPopupContext } from "./PopupItem";
-import { PopupItemsPanel } from "./PopupItemsPanel";
-import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { useDragInteraction } from "./useDragInteraction";
-import { Direction } from "./utilities/Direction";
-function tryFindActiveAction(item) {
-    for (const childItem of item.items) {
-        // istanbul ignore else
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            if (childItem.isActive)
-                return childItem;
-        }
-        else if (ToolbarItemUtilities.isGroupButton(childItem)) {
-            const nestedChild = tryFindActiveAction(childItem);
-            if (nestedChild)
-                return nestedChild;
-        }
-    }
-    return undefined;
-}
-function getFirstAvailableChildActionItem(item) {
-    for (const childItem of item.items) {
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-        else {
-            // istanbul ignore else
-            if (ToolbarItemUtilities.isGroupButton(childItem)) {
-                const nestedChild = getFirstAvailableChildActionItem(childItem);
-                // istanbul ignore else
-                if (nestedChild)
-                    return nestedChild;
-            }
-        }
-    }
-    return undefined;
-}
-function getActiveAction(item) {
-    const activeItem = tryFindActiveAction(item);
-    if (activeItem)
-        return activeItem;
-    // initially look only in root items
-    for (const childItem of item.items) {
-        // istanbul ignore else
-        if (ToolbarItemUtilities.isActionButton(childItem)) {
-            return childItem;
-        }
-    }
-    // if not found look inside groups
-    return getFirstAvailableChildActionItem(item);
-}
-/** Expandable Group button Item
- * @public
- */
-export function PopupItemWithDrag(props) {
-    const [isPanelShown, setPanelShown] = React.useState(false);
-    const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
-    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
-    React.useEffect(() => {
-        const newActiveAction = getActiveAction(props.groupItem);
-        // istanbul ignore else
-        if (newActiveAction) {
-            // istanbul ignore next
-            if (newActiveAction.isActive) {
-                setActiveAction(newActiveAction);
-            }
-            else {
-                if (activeAction && activeAction.isActive) {
-                    setActiveAction({ ...activeAction, isActive: false });
-                }
-            }
-        }
-    }, [props.groupItem, activeAction]);
-    const processPanelOpenClose = React.useCallback((isOpening) => {
-        setPanelShown((prev) => {
-            // istanbul ignore else
-            if (prev !== isOpening)
-                onPopupPanelOpenClose(isOpening);
-            return isOpening;
-        });
-    }, [setPanelShown, onPopupPanelOpenClose]);
-    // handle open and closing popup panel
-    const onOpenPanel = React.useCallback(() => {
-        processPanelOpenClose(!isPanelShown);
-    }, [isPanelShown, processPanelOpenClose]);
-    // handle open and closing popup panel
-    const onGroupButtonClick = React.useCallback(() => {
-        // only execute action if not disabled
-        activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();
-    }, [activeAction]);
-    const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;
-    const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;
-    const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;
-    const isActive = activeAction ? activeAction.isActive : props.isActive;
-    const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
-    const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);
-    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", isActive && "components-active", isDisabled && "components-disabled-drag", props.className);
-    const [targetRef, target] = useRefState();
-    const handleClose = React.useCallback(() => {
-        processPanelOpenClose(false);
-    }, [processPanelOpenClose]);
-    const { hasOverflow } = useToolItemEntryContext();
-    const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;
-    return (React.createElement(ToolbarPopupContext.Provider, { value: {
-            closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),
-            setSelectedItem: /* istanbul ignore next */ (buttonItem) => setActiveAction(buttonItem),
-        } },
-        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, onPointerDown: handlePointerDown, onClick: handleButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: title },
-            React.createElement("div", { className: "components-icon" }, icon),
-            props.badge &&
-                React.createElement("div", { className: "components-badge" }, badge),
-            React.createElement("div", { className: "components-triangle" })),
-        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
-            React.createElement(PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));
-}
-/** @internal */
-export function toToolbarPopupRelativePosition(expandsTo, alignment) {
-    // istanbul ignore next
-    switch (expandsTo) {
-        case Direction.Bottom: {
-            if (alignment === ToolbarPanelAlignment.End)
-                return RelativePosition.BottomRight;
-            return RelativePosition.BottomLeft;
-        }
-        case Direction.Left:
-            return RelativePosition.LeftTop;
-        case Direction.Right:
-            return RelativePosition.RightTop;
-        case Direction.Top:
-            return RelativePosition.Top;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./PopupItem.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ConditionalBooleanValue, ConditionalStringValue, RelativePosition, ToolbarItemUtilities } from "@itwin/appui-abstract";
+import { BadgeUtilities, IconHelper, useRefState } from "@itwin/core-react";
+import { PopupItemPopup, ToolbarPopupContext } from "./PopupItem";
+import { PopupItemsPanel } from "./PopupItemsPanel";
+import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { useDragInteraction } from "./useDragInteraction";
+import { Direction } from "./utilities/Direction";
+function tryFindActiveAction(item) {
+    for (const childItem of item.items) {
+        // istanbul ignore else
+        if (ToolbarItemUtilities.isActionButton(childItem)) {
+            if (childItem.isActive)
+                return childItem;
+        }
+        else if (ToolbarItemUtilities.isGroupButton(childItem)) {
+            const nestedChild = tryFindActiveAction(childItem);
+            if (nestedChild)
+                return nestedChild;
+        }
+    }
+    return undefined;
+}
+function getFirstAvailableChildActionItem(item) {
+    for (const childItem of item.items) {
+        if (ToolbarItemUtilities.isActionButton(childItem)) {
+            return childItem;
+        }
+        else {
+            // istanbul ignore else
+            if (ToolbarItemUtilities.isGroupButton(childItem)) {
+                const nestedChild = getFirstAvailableChildActionItem(childItem);
+                // istanbul ignore else
+                if (nestedChild)
+                    return nestedChild;
+            }
+        }
+    }
+    return undefined;
+}
+function getActiveAction(item) {
+    const activeItem = tryFindActiveAction(item);
+    if (activeItem)
+        return activeItem;
+    // initially look only in root items
+    for (const childItem of item.items) {
+        // istanbul ignore else
+        if (ToolbarItemUtilities.isActionButton(childItem)) {
+            return childItem;
+        }
+    }
+    // if not found look inside groups
+    return getFirstAvailableChildActionItem(item);
+}
+/** Expandable Group button Item
+ * @public
+ */
+export function PopupItemWithDrag(props) {
+    const [isPanelShown, setPanelShown] = React.useState(false);
+    const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();
+    React.useEffect(() => {
+        const newActiveAction = getActiveAction(props.groupItem);
+        // istanbul ignore else
+        if (newActiveAction) {
+            // istanbul ignore next
+            if (newActiveAction.isActive) {
+                setActiveAction(newActiveAction);
+            }
+            else {
+                if (activeAction && activeAction.isActive) {
+                    setActiveAction({ ...activeAction, isActive: false });
+                }
+            }
+        }
+    }, [props.groupItem, activeAction]);
+    const processPanelOpenClose = React.useCallback((isOpening) => {
+        setPanelShown((prev) => {
+            // istanbul ignore else
+            if (prev !== isOpening)
+                onPopupPanelOpenClose(isOpening);
+            return isOpening;
+        });
+    }, [setPanelShown, onPopupPanelOpenClose]);
+    // handle open and closing popup panel
+    const onOpenPanel = React.useCallback(() => {
+        processPanelOpenClose(!isPanelShown);
+    }, [isPanelShown, processPanelOpenClose]);
+    // handle open and closing popup panel
+    const onGroupButtonClick = React.useCallback(() => {
+        // only execute action if not disabled
+        activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();
+    }, [activeAction]);
+    const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;
+    const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;
+    const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;
+    const isActive = activeAction ? activeAction.isActive : props.isActive;
+    const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);
+    const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);
+    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", isActive && "components-active", isDisabled && "components-disabled-drag", props.className);
+    const [targetRef, target] = useRefState();
+    const handleClose = React.useCallback(() => {
+        processPanelOpenClose(false);
+    }, [processPanelOpenClose]);
+    const { hasOverflow } = useToolItemEntryContext();
+    const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;
+    return (React.createElement(ToolbarPopupContext.Provider, { value: {
+            closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),
+            setSelectedItem: /* istanbul ignore next */ (buttonItem) => setActiveAction(buttonItem),
+        } },
+        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, onPointerDown: handlePointerDown, onClick: handleButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: title },
+            React.createElement("div", { className: "components-icon" }, icon),
+            props.badge &&
+                React.createElement("div", { className: "components-badge" }, badge),
+            React.createElement("div", { className: "components-triangle" })),
+        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target },
+            React.createElement(PopupItemsPanel, { groupItem: props.groupItem, activateOnPointerUp: true }))));
+}
+/** @internal */
+export function toToolbarPopupRelativePosition(expandsTo, alignment) {
+    // istanbul ignore next
+    switch (expandsTo) {
+        case Direction.Bottom: {
+            if (alignment === ToolbarPanelAlignment.End)
+                return RelativePosition.BottomRight;
+            return RelativePosition.BottomLeft;
+        }
+        case Direction.Left:
+            return RelativePosition.LeftTop;
+        case Direction.Right:
+            return RelativePosition.RightTop;
+        case Direction.Top:
+            return RelativePosition.Top;
+    }
+}
 //# sourceMappingURL=PopupItemWithDrag.js.map

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

@@ -1,15 +1,15 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-/// <reference types="react" />
-import { GroupButton } from "@itwin/appui-abstract";
-interface PopupItemsPanelProps {
-    groupItem: GroupButton;
-    activateOnPointerUp?: boolean;
-}
-/** Component that displays a list of tools in a panel.
- * @internal future
- */
-export declare function PopupItemsPanel(props: PopupItemsPanelProps): JSX.Element;
-export {};
+/** @packageDocumentation
+ * @module Toolbar
+ */
+/// <reference types="react" />
+import { GroupButton } from "@itwin/appui-abstract";
+interface PopupItemsPanelProps {
+    groupItem: GroupButton;
+    activateOnPointerUp?: boolean;
+}
+/** Component that displays a list of tools in a panel.
+ * @internal future
+ */
+export declare function PopupItemsPanel(props: PopupItemsPanelProps): JSX.Element;
+export {};
 //# sourceMappingURL=PopupItemsPanel.d.ts.map

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

@@ -1,117 +1,117 @@
-/*---------------------------------------------------------------------------------------------
-* 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 classnames from "classnames";
-import * as React from "react";
-import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities } from "@itwin/appui-abstract";
-import { BadgeUtilities, IconHelper } from "@itwin/core-react";
-import { BackArrow } from "./groupPanel/BackArrow";
-import { GroupColumn } from "./groupPanel/Column";
-import { Columns } from "./groupPanel/Columns";
-import { Panel } from "./groupPanel/Panel";
-import { Title } from "./groupPanel/Title";
-import { GroupToolExpander } from "./groupPanel/tool/Expander";
-import { GroupTool } from "./groupPanel/tool/Tool";
-import { useToolbarPopupContext } from "./PopupItem";
-import { useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
-function getNumItemsInColumn(numTotalItems) {
-    if (numTotalItems <= 6)
-        return numTotalItems;
-    if (numTotalItems <= 24)
-        return Math.ceil(numTotalItems / 2);
-    if (numTotalItems <= 36)
-        return Math.ceil(numTotalItems / 3);
-    return Math.ceil(numTotalItems / 4);
-}
-/** Component that displays a list of tools in a panel.
- * @internal future
- */
-export function PopupItemsPanel(props) {
-    const [groupArray, setGroupArray] = React.useState([props.groupItem]);
-    const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);
-    const items = React.useMemo(() => activeGroup.items, [activeGroup]);
-    const preferredNumItemsInColumn = getNumItemsInColumn(items.length);
-    // Divide items equally between columns.
-    const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);
-    const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);
-    const columnToItems = React.useMemo(() => items.reduce((acc, item, index) => {
-        const columnIndex = Math.floor(index / numItemsPerColumn);
-        if (columnIndex >= acc.length) {
-            return [
-                ...acc,
-                [item],
-            ];
-        }
-        return [
-            ...acc.slice(0, columnIndex),
-            [
-                ...acc[columnIndex],
-                item,
-            ],
-            ...acc.slice(columnIndex + 1),
-        ];
-    }, []), [items, numItemsPerColumn]);
-    const handleGroupItemClick = React.useCallback((item) => {
-        // istanbul ignore else
-        if (ToolbarItemUtilities.isGroupButton(item)) {
-            // push group to front of array
-            setGroupArray([item, ...groupArray]);
-        }
-    }, [groupArray]);
-    const handleBackArrowClick = React.useCallback(() => {
-        // istanbul ignore else
-        if (groupArray.length > 1) {
-            setGroupArray(groupArray.slice(1));
-        }
-    }, [groupArray]);
-    const { closePanel, setSelectedItem } = useToolbarPopupContext();
-    const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();
-    const handleOnPointerUp = React.useCallback(/* istanbul ignore next */ (panelItem) => {
-        // istanbul ignore else
-        if (ToolbarItemUtilities.isActionButton(panelItem)) {
-            props.activateOnPointerUp && setSelectedItem && setSelectedItem(panelItem);
-            props.activateOnPointerUp && panelItem.execute();
-            onItemExecuted(panelItem);
-            props.activateOnPointerUp && closePanel();
-        }
-    }, [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]);
-    const handleActionItemClick = React.useCallback((panelItem) => {
-        // istanbul ignore else
-        if (ToolbarItemUtilities.isActionButton(panelItem)) {
-            setSelectedItem && setSelectedItem(panelItem);
-            panelItem.execute();
-            onItemExecuted(panelItem);
-            closePanel();
-        }
-    }, [setSelectedItem, closePanel, onItemExecuted]);
-    // istanbul ignore next - NEEDSWORK add complete tests
-    const handleOnKeyDown = React.useCallback((e) => {
-        onKeyDown(e);
-    }, [onKeyDown]);
-    // build n-number of columns
-    const columns = React.useMemo(() => columnToItems.map((columnItems, columnIndex) => React.createElement(GroupColumn, { key: columnIndex }, columnItems.map((panelItem) => {
-        const badge = BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);
-        const icon = IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);
-        const label = ConditionalStringValue.getValue(panelItem.label);
-        if (ToolbarItemUtilities.isGroupButton(panelItem)) {
-            return (React.createElement(GroupToolExpander, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), key: panelItem.id, label: label, icon: icon, badge: badge, item: panelItem, onClick: handleGroupItemClick }));
-        }
-        return (React.createElement(GroupTool, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), isActive: !!panelItem.isActive, key: panelItem.id, label: label, icon: icon, item: panelItem, onClick: handleActionItemClick, onPointerUp: handleOnPointerUp, badge: badge }));
-    }))), [columnToItems, handleActionItemClick, handleGroupItemClick, handleOnPointerUp]);
-    // ensure we have a panel title for nested groups
-    const titleString = activeGroup.panelLabel ? activeGroup.panelLabel : activeGroup.label;
-    const panelTitle = React.useMemo(() => ConditionalStringValue.getValue(titleString), [titleString]);
-    const className = classnames(1 === groupArray.length && "components-toolbar-item-expandable-group-group", groupArray.length > 1 && "components-toolbar-item-expandable-group-nested");
-    return (React.createElement(Panel, { className: className, onKeyDown: handleOnKeyDown },
-        groupArray.length > 1 &&
-            React.createElement(BackArrow, { className: "components-back", onClick: handleBackArrowClick }),
-        panelTitle &&
-            React.createElement(Title, null, panelTitle),
-        columns &&
-            React.createElement(Columns, null, columns)));
-}
+/*---------------------------------------------------------------------------------------------
+* 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 classnames from "classnames";
+import * as React from "react";
+import { ConditionalBooleanValue, ConditionalStringValue, ToolbarItemUtilities } from "@itwin/appui-abstract";
+import { BadgeUtilities, IconHelper } from "@itwin/core-react";
+import { BackArrow } from "./groupPanel/BackArrow";
+import { GroupColumn } from "./groupPanel/Column";
+import { Columns } from "./groupPanel/Columns";
+import { Panel } from "./groupPanel/Panel";
+import { Title } from "./groupPanel/Title";
+import { GroupToolExpander } from "./groupPanel/tool/Expander";
+import { GroupTool } from "./groupPanel/tool/Tool";
+import { useToolbarPopupContext } from "./PopupItem";
+import { useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
+function getNumItemsInColumn(numTotalItems) {
+    if (numTotalItems <= 6)
+        return numTotalItems;
+    if (numTotalItems <= 24)
+        return Math.ceil(numTotalItems / 2);
+    if (numTotalItems <= 36)
+        return Math.ceil(numTotalItems / 3);
+    return Math.ceil(numTotalItems / 4);
+}
+/** Component that displays a list of tools in a panel.
+ * @internal future
+ */
+export function PopupItemsPanel(props) {
+    const [groupArray, setGroupArray] = React.useState([props.groupItem]);
+    const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);
+    const items = React.useMemo(() => activeGroup.items, [activeGroup]);
+    const preferredNumItemsInColumn = getNumItemsInColumn(items.length);
+    // Divide items equally between columns.
+    const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);
+    const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);
+    const columnToItems = React.useMemo(() => items.reduce((acc, item, index) => {
+        const columnIndex = Math.floor(index / numItemsPerColumn);
+        if (columnIndex >= acc.length) {
+            return [
+                ...acc,
+                [item],
+            ];
+        }
+        return [
+            ...acc.slice(0, columnIndex),
+            [
+                ...acc[columnIndex],
+                item,
+            ],
+            ...acc.slice(columnIndex + 1),
+        ];
+    }, []), [items, numItemsPerColumn]);
+    const handleGroupItemClick = React.useCallback((item) => {
+        // istanbul ignore else
+        if (ToolbarItemUtilities.isGroupButton(item)) {
+            // push group to front of array
+            setGroupArray([item, ...groupArray]);
+        }
+    }, [groupArray]);
+    const handleBackArrowClick = React.useCallback(() => {
+        // istanbul ignore else
+        if (groupArray.length > 1) {
+            setGroupArray(groupArray.slice(1));
+        }
+    }, [groupArray]);
+    const { closePanel, setSelectedItem } = useToolbarPopupContext();
+    const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();
+    const handleOnPointerUp = React.useCallback(/* istanbul ignore next */ (panelItem) => {
+        // istanbul ignore else
+        if (ToolbarItemUtilities.isActionButton(panelItem)) {
+            props.activateOnPointerUp && setSelectedItem && setSelectedItem(panelItem);
+            props.activateOnPointerUp && panelItem.execute();
+            onItemExecuted(panelItem);
+            props.activateOnPointerUp && closePanel();
+        }
+    }, [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]);
+    const handleActionItemClick = React.useCallback((panelItem) => {
+        // istanbul ignore else
+        if (ToolbarItemUtilities.isActionButton(panelItem)) {
+            setSelectedItem && setSelectedItem(panelItem);
+            panelItem.execute();
+            onItemExecuted(panelItem);
+            closePanel();
+        }
+    }, [setSelectedItem, closePanel, onItemExecuted]);
+    // istanbul ignore next - NEEDSWORK add complete tests
+    const handleOnKeyDown = React.useCallback((e) => {
+        onKeyDown(e);
+    }, [onKeyDown]);
+    // build n-number of columns
+    const columns = React.useMemo(() => columnToItems.map((columnItems, columnIndex) => React.createElement(GroupColumn, { key: columnIndex }, columnItems.map((panelItem) => {
+        const badge = BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);
+        const icon = IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);
+        const label = ConditionalStringValue.getValue(panelItem.label);
+        if (ToolbarItemUtilities.isGroupButton(panelItem)) {
+            return (React.createElement(GroupToolExpander, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), key: panelItem.id, label: label, icon: icon, badge: badge, item: panelItem, onClick: handleGroupItemClick }));
+        }
+        return (React.createElement(GroupTool, { isDisabled: ConditionalBooleanValue.getValue(panelItem.isDisabled), isActive: !!panelItem.isActive, key: panelItem.id, label: label, icon: icon, item: panelItem, onClick: handleActionItemClick, onPointerUp: handleOnPointerUp, badge: badge }));
+    }))), [columnToItems, handleActionItemClick, handleGroupItemClick, handleOnPointerUp]);
+    // ensure we have a panel title for nested groups
+    const titleString = activeGroup.panelLabel ? activeGroup.panelLabel : activeGroup.label;
+    const panelTitle = React.useMemo(() => ConditionalStringValue.getValue(titleString), [titleString]);
+    const className = classnames(1 === groupArray.length && "components-toolbar-item-expandable-group-group", groupArray.length > 1 && "components-toolbar-item-expandable-group-nested");
+    return (React.createElement(Panel, { className: className, onKeyDown: handleOnKeyDown },
+        groupArray.length > 1 &&
+            React.createElement(BackArrow, { className: "components-back", onClick: handleBackArrowClick }),
+        panelTitle &&
+            React.createElement(Title, null, panelTitle),
+        columns &&
+            React.createElement(Columns, null, columns)));
+}
 //# sourceMappingURL=PopupItemsPanel.js.map

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

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction } from "./utilities/Direction";
-import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
-/** Properties of [[Toolbar]] component.
- * @public
- */
-export interface ToolbarProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItem[];
-    /** 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;
-}
-/** Component that displays tool settings as a bar across the top of the content view.
- * @public
- */
-export declare function Toolbar(props: ToolbarProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Toolbar.scss";
+import * as React from "react";
+import { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction } from "./utilities/Direction";
+import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+/** Properties of [[Toolbar]] component.
+ * @public
+ */
+export interface ToolbarProps extends CommonProps, NoChildrenProps {
+    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
+    expandsTo?: Direction;
+    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
+    items: CommonToolbarItem[];
+    /** 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;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @public
+ */
+export declare function Toolbar(props: ToolbarProps): JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map