@itwin/components-react 4.17.0 → 5.0.0-dev.2

package/lib/components-react/toolbar/PopupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItem.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAaxD;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/D;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yCAM5B,CAAC;AAEL;;;GAGG;AACH,wBAAgB,sBAAsB,6BAErC;AAED;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;kEAC8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA4E9C;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAUxD"}

package/lib/components-react/toolbar/PopupItem.js

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Popup } from "@itwin/core-react";
+import { useRefState } from "@itwin/core-react/internal";
+import { useToolbarPopupAutoHideContext, useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./InternalToolbarComponent.js";
+import { toToolbarPopupRelativePosition, } from "./PopupItemWithDrag.js";
+/** Context used by Toolbar items in popups to close the popup panel.
+ * @public
+ * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.
+ */
+export const ToolbarPopupContext = React.createContext({
+    /** function used to close popup panel */
+    closePanel: () => { },
+    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */
+    setSelectedItem: (_buttonItem) => { },
+});
+/** React hook used to retrieve the ToolbarPopupContext.
+ * @public
+ * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.
+ */
+export function useToolbarPopupContext() {
+    return React.useContext(ToolbarPopupContext);
+}
+/** Popup toolbar item that displays a panel.
+ * @public
+ * @deprecated in 4.16.0. Used internally to construct toolbars.
+ */
+export function PopupItem(props) {
+    const [isPanelShown, setPanelShown] = React.useState(false);
+    const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose, } = useToolbarWithOverflowDirectionContext();
+    const processPanelOpenClose = React.useCallback((isOpening) => {
+        setPanelShown((prev) => {
+            if (prev !== isOpening)
+                onPopupPanelOpenClose(isOpening);
+            return isOpening;
+        });
+    }, [setPanelShown, onPopupPanelOpenClose]);
+    // handle open and closing overflow panel
+    const onButtonClick = React.useCallback(() => {
+        processPanelOpenClose(!isPanelShown);
+        if (props.onClick)
+            props.onClick();
+    }, [props, isPanelShown, processPanelOpenClose]);
+    const className = classnames("components-toolbar-button-item", "components-toolbar-expandable-button", props.isDisabled && "components-disabled", props.className);
+    const [targetRef, target] = useRefState();
+    const handleClose = React.useCallback(() => {
+        processPanelOpenClose(false);
+    }, [processPanelOpenClose]);
+    const { hasOverflow } = useToolItemEntryContext();
+    const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;
+    const { hideIndicator, panel } = props;
+    return (React.createElement(ToolbarPopupContext.Provider, { value: {
+            closePanel: () => processPanelOpenClose(false),
+        } },
+        React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "tool-button-popup", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, ref: targetRef, disabled: props.isDisabled, onClick: onButtonClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
+            React.createElement("div", { className: "components-icon" }, props.icon),
+            props.badge && React.createElement("div", { className: "components-badge" }, props.badge),
+            hideIndicator ? undefined : React.createElement("div", { className: "components-triangle" })),
+        React.createElement(PopupItemPopup, { isOpen: isPanelShown, onClose: handleClose, position: toToolbarPopupRelativePosition(expandsToDirection, panelAlignment), target: target, keepContentsMounted: props.keepContentsMounted }, panel)));
+}
+/** @internal */
+export function PopupItemPopup(props) {
+    const isHidden = useToolbarPopupAutoHideContext();
+    const className = classnames("components-toolbar-popupItem_popupItemPopup", isHidden && "nz-hidden");
+    return (React.createElement(Popup, { className: className, offset: 0, showShadow: false, ...props }));
+}
+//# sourceMappingURL=PopupItem.js.map

package/lib/components-react/toolbar/PopupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItem.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup } from \"@itwin/core-react\";\nimport { useRefState } from \"@itwin/core-react/internal\";\nimport type { ToolbarButtonItemProps } from \"./Item.js\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent.js\";\nimport {\n  PopupItemWithDrag,\n  toToolbarPopupRelativePosition,\n} from \"./PopupItemWithDrag.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/**\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link ToolbarPopupContext} context.\n */\nexport interface ToolbarPopupContextProps {\n  readonly closePanel: () => void;\n  readonly setSelectedItem?: (buttonItem: ActionButton) => void;\n}\n\n/** Context used by Toolbar items in popups to close the popup panel.\n * @public\n * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.\n */\nexport const ToolbarPopupContext =\n  React.createContext<ToolbarPopupContextProps>({\n    /** function used to close popup panel */\n    closePanel: () => {},\n    /** if popup panel is a GroupButton then this is call to set the selected action item within the panel */\n    setSelectedItem: (_buttonItem: ActionButton) => {},\n  });\n\n/** React hook used to retrieve the ToolbarPopupContext.\n * @public\n * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.\n */\nexport function useToolbarPopupContext() {\n  return React.useContext(ToolbarPopupContext);\n}\n\n/** Properties of [[PopupItem]] component.\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link PopupItem} component.\n */\nexport interface PopupItemProps extends ToolbarButtonItemProps {\n  /** Describes if expandable item triangle indicator should be hidden. */\n  hideIndicator?: boolean;\n  /** Panel of the toolbar. */\n  panel?: React.ReactNode;\n  /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the\n   * content node is unmounted each time the popup is closed. */\n  keepContentsMounted?: boolean;\n}\n\n/** Popup toolbar item that displays a panel.\n * @public\n * @deprecated in 4.16.0. Used internally to construct toolbars.\n */\nexport function PopupItem(props: PopupItemProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing overflow panel\n  const onButtonClick = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n    if (props.onClick) props.onClick();\n  }, [props, isPanelShown, processPanelOpenClose]);\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    props.isDisabled && \"components-disabled\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  const { hideIndicator, panel } = props;\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"tool-button-popup\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        disabled={props.isDisabled} // this is needed to prevent focusing/keyboard access to disabled buttons\n        onClick={onButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">{props.icon}</div>\n        {props.badge && <div className=\"components-badge\">{props.badge}</div>}\n        {hideIndicator ? undefined : <div className=\"components-triangle\" />}\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n        keepContentsMounted={props.keepContentsMounted}\n      >\n        {panel}\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\ninterface PopupItemPopupProps {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  onClose(): void;\n  position: RelativePosition;\n  target?: HTMLElement;\n  keepContentsMounted?: boolean;\n}\n\n/** @internal */\nexport function PopupItemPopup(props: PopupItemPopupProps) {\n  const isHidden = useToolbarPopupAutoHideContext();\n  const className = classnames(\n    \"components-toolbar-popupItem_popupItemPopup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  return (\n    <Popup className={className} offset={0} showShadow={false} {...props} />\n  );\n}\n"]}

package/lib/components-react/toolbar/PopupItem.scss

@@ -0,0 +1,81 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
+
+.components-toolbar-expandable-button {
+  $triangle-width: 4px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 3px;
+  $arrow-shadow: $icon-shadow;
+  position: relative;
+
+  > .components-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: var(--iui-color-text)
+    );
+  }
+
+  &:active > .components-triangle {
+    filter: $no-shadow;
+
+    @include triangle-bottom-right-color($pressed-icon-color);
+  }
+
+  &.components-active {
+    &:not(:active):not(.components-disabled) {
+      > .components-triangle {
+        filter: $no-shadow;
+
+        @include triangle-bottom-right-color($active-icon-color);
+      }
+    }
+  }
+
+  &.components-disabled {
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+
+  &.components-disabled-drag {
+    > .components-icon {
+      color: $disabled-icon-color;
+    }
+
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+}
+
+.components-toolbar-popupItem_popupItemPopup {
+  @include uicore-z-index(toolbar-panels);
+  width: fit-content;
+  background: var(--iui-color-background);
+  border-color: var(--iui-color-background-disabled);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/components-react/toolbar/PopupItemWithDrag.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./PopupItem.scss";
+import * as React from "react";
+import type { GroupButton } from "@itwin/appui-abstract";
+import { RelativePosition } from "@itwin/appui-abstract";
+import type { ToolbarButtonItemProps } from "./Item.js";
+import { ToolbarPanelAlignment } from "./InternalToolbarComponent.js";
+import { Direction } from "./utilities/Direction.js";
+/** Properties of [[PopupItemWithDrag]] component.
+ * @public
+ * @deprecated in 4.16.0. Props of deprecated {@link PopupItemWithDrag} component.
+ */
+export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
+    /** Panel of the toolbar. */
+    groupItem: GroupButton;
+}
+/** Expandable group button item with drag.
+ * @public
+ * @deprecated in 4.16.0. Used internally to construct toolbars.
+ */
+export declare function PopupItemWithDrag(props: PopupItemWithDragProps): React.JSX.Element;
+/** @internal */
+export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
+//# sourceMappingURL=PopupItemWithDrag.d.ts.map

package/lib/components-react/toolbar/PopupItemWithDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItemWithDrag.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAIxD,OAAO,EACL,qBAAqB,EAGtB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrD;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,4BAA4B;IAC5B,SAAS,EAAE,WAAW,CAAC;CACxB;AA6CD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAiI9D;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,qBAAqB,GAC/B,gBAAgB,CAclB"}

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

@@ -0,0 +1,143 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { IconHelper } from "@itwin/core-react";
+import { Badge, useRefState } from "@itwin/core-react/internal";
+import { PopupItemPopup, ToolbarPopupContext } from "./PopupItem.js";
+import { PopupItemsPanel } from "./PopupItemsPanel.js";
+import { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./InternalToolbarComponent.js";
+import { useDragInteraction } from "./useDragInteraction.js";
+import { Direction } from "./utilities/Direction.js";
+function tryFindActiveAction(item) {
+    for (const childItem of item.items) {
+        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 {
+            if (ToolbarItemUtilities.isGroupButton(childItem)) {
+                const nestedChild = getFirstAvailableChildActionItem(childItem);
+                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) {
+        if (ToolbarItemUtilities.isActionButton(childItem)) {
+            return childItem;
+        }
+    }
+    // if not found look inside groups
+    return getFirstAvailableChildActionItem(item);
+}
+/** Expandable group button item with drag.
+ * @public
+ * @deprecated in 4.16.0. Used internally to construct toolbars.
+ */
+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);
+        if (newActiveAction) {
+            if (newActiveAction.isActive) {
+                setActiveAction(newActiveAction);
+            }
+            else {
+                if (activeAction && activeAction.isActive) {
+                    setActiveAction({ ...activeAction, isActive: false });
+                }
+            }
+        }
+    }, [props.groupItem, activeAction]);
+    const processPanelOpenClose = React.useCallback((isOpening) => {
+        setPanelShown((prev) => {
+            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 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 ? overflowExpandsTo : expandsTo;
+    return (React.createElement(ToolbarPopupContext.Provider, { value: {
+            closePanel: () => processPanelOpenClose(false),
+            setSelectedItem: (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" }, activeAction ? (React.createElement(Badge, { type: activeAction.badgeKind || activeAction.badgeType })) : (props.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) {
+    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/components-react/toolbar/PopupItemWithDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./PopupItem.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  RelativePosition,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { IconHelper } from \"@itwin/core-react\";\nimport { Badge, useRefState } from \"@itwin/core-react/internal\";\nimport type { ToolbarButtonItemProps } from \"./Item.js\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem.js\";\nimport type { ActionButtonWithBadgeKind } from \"./PopupItemsPanel.js\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel.js\";\nimport {\n  ToolbarPanelAlignment,\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent.js\";\nimport { useDragInteraction } from \"./useDragInteraction.js\";\nimport { Direction } from \"./utilities/Direction.js\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Properties of [[PopupItemWithDrag]] component.\n * @public\n * @deprecated in 4.16.0. Props of deprecated {@link PopupItemWithDrag} component.\n */\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\n  /** Panel of the toolbar. */\n  groupItem: GroupButton;\n}\n\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive) return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild) return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(\n  item: GroupButton\n): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        if (nestedChild) return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem) return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    }\n  }\n\n  // if not found look inside groups\n  return getFirstAvailableChildActionItem(item);\n}\n\n/** Expandable group button item with drag.\n * @public\n * @deprecated in 4.16.0. Used internally to construct toolbars.\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState<\n    ActionButtonWithBadgeKind | undefined\n  >(getActiveAction(props.groupItem));\n  const {\n    expandsTo,\n    overflowExpandsTo,\n    panelAlignment,\n    onPopupPanelOpenClose,\n  } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    if (newActiveAction) {\n      if (newActiveAction.isActive) {\n        setActiveAction(newActiveAction);\n      } else {\n        if (activeAction && activeAction.isActive) {\n          setActiveAction({ ...activeAction, isActive: false });\n        }\n      }\n    }\n  }, [props.groupItem, activeAction]);\n\n  const processPanelOpenClose = React.useCallback(\n    (isOpening: boolean) => {\n      setPanelShown((prev) => {\n        if (prev !== isOpening) onPopupPanelOpenClose(isOpening);\n        return isOpening;\n      });\n    },\n    [setPanelShown, onPopupPanelOpenClose]\n  );\n\n  // handle open and closing popup panel\n  const onOpenPanel = React.useCallback(() => {\n    processPanelOpenClose(!isPanelShown);\n  }, [isPanelShown, processPanelOpenClose]);\n\n  // handle open and closing popup panel\n  const onGroupButtonClick = React.useCallback(() => {\n    // only execute action if not disabled\n    activeAction &&\n      !ConditionalBooleanValue.getValue(activeAction.isDisabled) &&\n      activeAction.execute();\n  }, [activeAction]);\n\n  const icon = activeAction\n    ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData)\n    : props.icon;\n  const title = activeAction\n    ? ConditionalStringValue.getValue(activeAction.label)\n    : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(\n    activeAction ? activeAction.isDisabled : props.isDisabled\n  );\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(\n    onGroupButtonClick,\n    onOpenPanel\n  );\n\n  const className = classnames(\n    \"components-toolbar-button-item\",\n    \"components-toolbar-expandable-button\",\n    isActive && \"components-active\",\n    isDisabled && \"components-disabled-drag\",\n    props.className\n  );\n\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? overflowExpandsTo : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider\n      value={{\n        closePanel: () => processPanelOpenClose(false),\n        setSelectedItem: (buttonItem: ActionButton) =>\n          setActiveAction(buttonItem),\n      }}\n    >\n      <button\n        data-item-id={props.itemId}\n        data-item-type=\"action-tool-button\"\n        data-item-group-priority={props.groupPriority}\n        data-item-priority={props.itemPriority}\n        data-item-provider-id={props.providerId}\n        ref={targetRef}\n        onPointerDown={handlePointerDown}\n        onClick={handleButtonClick}\n        onKeyDown={props.onKeyDown}\n        className={className}\n        style={props.style}\n        title={title}\n      >\n        <div className=\"components-icon\">{icon}</div>\n        {props.badge && (\n          <div className=\"components-badge\">\n            {activeAction ? (\n              <Badge type={activeAction.badgeKind || activeAction.badgeType} />\n            ) : (\n              props.badge\n            )}\n          </div>\n        )}\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(\n          expandsToDirection,\n          panelAlignment\n        )}\n        target={target}\n      >\n        <PopupItemsPanel\n          groupItem={props.groupItem}\n          activateOnPointerUp={true}\n        />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(\n  expandsTo: Direction,\n  alignment: ToolbarPanelAlignment\n): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom: {\n      if (alignment === ToolbarPanelAlignment.End)\n        return RelativePosition.BottomRight;\n      return RelativePosition.BottomLeft;\n    }\n    case Direction.Left:\n      return RelativePosition.LeftTop;\n    case Direction.Right:\n      return RelativePosition.RightTop;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import type { ActionButton, GroupButton } from "@itwin/appui-abstract";
+import type { BadgeKind } from "@itwin/core-react/internal";
+/** Abstract group button type with new badge type. */
+interface GroupButtonWithBadgeKind extends GroupButton {
+    badgeKind?: BadgeKind;
+    items: ReadonlyArray<ActionButtonWithBadgeKind | GroupButtonWithBadgeKind>;
+}
+/** Abstract action button type with new badge type.
+ * @internal
+ */
+export interface ActionButtonWithBadgeKind extends ActionButton {
+    badgeKind?: BadgeKind;
+}
+interface PopupItemsPanelProps {
+    groupItem: GroupButtonWithBadgeKind;
+    activateOnPointerUp?: boolean;
+}
+/** Component that displays a list of tools in a panel.
+ * @internal future
+ */
+export declare function PopupItemsPanel(props: PopupItemsPanelProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PopupItemsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItemsPanel.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAOvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAmB5D,sDAAsD;AACtD,UAAU,wBAAyB,SAAQ,WAAW;IACpD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC,yBAAyB,GAAG,wBAAwB,CAAC,CAAC;CAC5E;AAED;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,YAAY;IAC7D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,wBAAwB,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqK1D"}

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

@@ -0,0 +1,114 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { IconHelper } from "@itwin/core-react";
+import { Badge } from "@itwin/core-react/internal";
+import { BackArrow } from "./groupPanel/BackArrow.js";
+import { GroupColumn } from "./groupPanel/Column.js";
+import { Columns } from "./groupPanel/Columns.js";
+import { Panel } from "./groupPanel/Panel.js";
+import { Title } from "./groupPanel/Title.js";
+import { GroupToolExpander } from "./groupPanel/tool/Expander.js";
+import { GroupTool } from "./groupPanel/tool/Tool.js";
+import { useToolbarPopupContext } from "./PopupItem.js";
+import { useToolbarWithOverflowDirectionContext } from "./InternalToolbarComponent.js";
+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) => {
+        if (ToolbarItemUtilities.isGroupButton(item)) {
+            // push group to front of array
+            setGroupArray([item, ...groupArray]);
+        }
+    }, [groupArray]);
+    const handleBackArrowClick = React.useCallback(() => {
+        if (groupArray.length > 1) {
+            setGroupArray(groupArray.slice(1));
+        }
+    }, [groupArray]);
+    // eslint-disable-next-line deprecation/deprecation
+    const { closePanel, setSelectedItem } = useToolbarPopupContext();
+    const { onItemExecuted, onKeyDown } = useToolbarWithOverflowDirectionContext();
+    const handleOnPointerUp = React.useCallback((panelItem) => {
+        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) => {
+        if (ToolbarItemUtilities.isActionButton(panelItem)) {
+            setSelectedItem && setSelectedItem(panelItem);
+            panelItem.execute();
+            onItemExecuted(panelItem);
+            closePanel();
+        }
+    }, [setSelectedItem, closePanel, onItemExecuted]);
+    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) => {
+        // eslint-disable-next-line deprecation/deprecation
+        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: React.createElement(Badge, { type: panelItem.badgeKind || panelItem.badgeType }), 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: React.createElement(Badge, { type: panelItem.badgeKind || panelItem.badgeType }) }));
+    })))), [
+        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/components-react/toolbar/PopupItemsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n  ToolbarItemUtilities,\n} from \"@itwin/appui-abstract\";\nimport { IconHelper } from \"@itwin/core-react\";\nimport type { BadgeKind } from \"@itwin/core-react/internal\";\nimport { Badge } from \"@itwin/core-react/internal\";\nimport { BackArrow } from \"./groupPanel/BackArrow.js\";\nimport { GroupColumn } from \"./groupPanel/Column.js\";\nimport { Columns } from \"./groupPanel/Columns.js\";\nimport { Panel } from \"./groupPanel/Panel.js\";\nimport { Title } from \"./groupPanel/Title.js\";\nimport { GroupToolExpander } from \"./groupPanel/tool/Expander.js\";\nimport { GroupTool } from \"./groupPanel/tool/Tool.js\";\nimport { useToolbarPopupContext } from \"./PopupItem.js\";\nimport { useToolbarWithOverflowDirectionContext } from \"./InternalToolbarComponent.js\";\n\nfunction getNumItemsInColumn(numTotalItems: number): number {\n  if (numTotalItems <= 6) return numTotalItems;\n  if (numTotalItems <= 24) return Math.ceil(numTotalItems / 2);\n  if (numTotalItems <= 36) return Math.ceil(numTotalItems / 3);\n  return Math.ceil(numTotalItems / 4);\n}\n\n/** Abstract group button type with new badge type. */\ninterface GroupButtonWithBadgeKind extends GroupButton {\n  badgeKind?: BadgeKind;\n  items: ReadonlyArray<ActionButtonWithBadgeKind | GroupButtonWithBadgeKind>;\n}\n\n/** Abstract action button type with new badge type.\n * @internal\n */\nexport interface ActionButtonWithBadgeKind extends ActionButton {\n  badgeKind?: BadgeKind;\n}\n\ninterface PopupItemsPanelProps {\n  groupItem: GroupButtonWithBadgeKind;\n  activateOnPointerUp?: boolean;\n}\n\n/** Component that displays a list of tools in a panel.\n * @internal future\n */\nexport function PopupItemsPanel(props: PopupItemsPanelProps) {\n  const [groupArray, setGroupArray] = React.useState([props.groupItem]);\n  const activeGroup = React.useMemo(() => groupArray[0], [groupArray]);\n  const items = React.useMemo(() => activeGroup.items, [activeGroup]);\n\n  const preferredNumItemsInColumn = getNumItemsInColumn(items.length);\n\n  // Divide items equally between columns.\n  const numberOfColumns = Math.ceil(items.length / preferredNumItemsInColumn);\n  const numItemsPerColumn = Math.ceil(items.length / numberOfColumns);\n\n  const columnToItems = React.useMemo(\n    () =>\n      items.reduce<\n        ReadonlyArray<\n          ReadonlyArray<GroupButtonWithBadgeKind | ActionButtonWithBadgeKind>\n        >\n      >((acc, item, index) => {\n        const columnIndex = Math.floor(index / numItemsPerColumn);\n        if (columnIndex >= acc.length) {\n          return [...acc, [item]];\n        }\n        return [\n          ...acc.slice(0, columnIndex),\n          [...acc[columnIndex], item],\n          ...acc.slice(columnIndex + 1),\n        ];\n      }, []),\n    [items, numItemsPerColumn]\n  );\n\n  const handleGroupItemClick = React.useCallback(\n    (item: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isGroupButton(item)) {\n        // push group to front of array\n        setGroupArray([item, ...groupArray]);\n      }\n    },\n    [groupArray]\n  );\n\n  const handleBackArrowClick = React.useCallback(() => {\n    if (groupArray.length > 1) {\n      setGroupArray(groupArray.slice(1));\n    }\n  }, [groupArray]);\n\n  // eslint-disable-next-line deprecation/deprecation\n  const { closePanel, setSelectedItem } = useToolbarPopupContext();\n  const { onItemExecuted, onKeyDown } =\n    useToolbarWithOverflowDirectionContext();\n\n  const handleOnPointerUp = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        props.activateOnPointerUp &&\n          setSelectedItem &&\n          setSelectedItem(panelItem);\n        props.activateOnPointerUp && panelItem.execute();\n        onItemExecuted(panelItem);\n        props.activateOnPointerUp && closePanel();\n      }\n    },\n    [props.activateOnPointerUp, setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleActionItemClick = React.useCallback(\n    (panelItem: GroupButton | ActionButton) => {\n      if (ToolbarItemUtilities.isActionButton(panelItem)) {\n        setSelectedItem && setSelectedItem(panelItem);\n        panelItem.execute();\n        onItemExecuted(panelItem);\n        closePanel();\n      }\n    },\n    [setSelectedItem, closePanel, onItemExecuted]\n  );\n\n  const handleOnKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      onKeyDown(e);\n    },\n    [onKeyDown]\n  );\n\n  // build n-number of columns\n  const columns = React.useMemo(\n    () =>\n      columnToItems.map((columnItems, columnIndex) => (\n        <GroupColumn key={columnIndex}>\n          {columnItems.map((panelItem) => {\n            // eslint-disable-next-line deprecation/deprecation\n            const icon = IconHelper.getIconReactNode(\n              panelItem.icon,\n              panelItem.internalData\n            );\n            const label = ConditionalStringValue.getValue(panelItem.label);\n            if (ToolbarItemUtilities.isGroupButton(panelItem)) {\n              return (\n                <GroupToolExpander\n                  isDisabled={ConditionalBooleanValue.getValue(\n                    panelItem.isDisabled\n                  )}\n                  key={panelItem.id}\n                  label={label}\n                  icon={icon}\n                  badge={\n                    <Badge type={panelItem.badgeKind || panelItem.badgeType} />\n                  }\n                  item={panelItem}\n                  onClick={handleGroupItemClick}\n                />\n              );\n            }\n\n            return (\n              <GroupTool\n                isDisabled={ConditionalBooleanValue.getValue(\n                  panelItem.isDisabled\n                )}\n                isActive={!!panelItem.isActive}\n                key={panelItem.id}\n                label={label}\n                icon={icon}\n                item={panelItem}\n                onClick={handleActionItemClick}\n                onPointerUp={handleOnPointerUp}\n                badge={\n                  <Badge type={panelItem.badgeKind || panelItem.badgeType} />\n                }\n              />\n            );\n          })}\n        </GroupColumn>\n      )),\n    [\n      columnToItems,\n      handleActionItemClick,\n      handleGroupItemClick,\n      handleOnPointerUp,\n    ]\n  );\n\n  // ensure we have a panel title for nested groups\n  const titleString = activeGroup.panelLabel\n    ? activeGroup.panelLabel\n    : activeGroup.label;\n  const panelTitle = React.useMemo(\n    () => ConditionalStringValue.getValue(titleString),\n    [titleString]\n  );\n  const className = classnames(\n    1 === groupArray.length && \"components-toolbar-item-expandable-group-group\",\n    groupArray.length > 1 && \"components-toolbar-item-expandable-group-nested\"\n  );\n\n  return (\n    <Panel className={className} onKeyDown={handleOnKeyDown}>\n      {groupArray.length > 1 && (\n        <BackArrow className=\"components-back\" onClick={handleBackArrowClick} />\n      )}\n      {panelTitle && <Title>{panelTitle}</Title>}\n      {columns && <Columns>{columns}</Columns>}\n    </Panel>\n  );\n}\n"]}

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

@@ -0,0 +1,35 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Toolbar.scss";
+import * as React from "react";
+import type { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import type { Direction } from "./utilities/Direction.js";
+import type { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./InternalToolbarComponent.js";
+/** Properties of [[Toolbar]] component.
+ * @public
+ * @deprecated in 4.0.0. Use [ToolbarProps]($appui-react) instead.
+ */
+export interface ToolbarProps extends CommonProps, NoChildrenProps {
+    /** Describes to which direction the popup panels are expanded, also defines the orientation of the toolbar (Top/Bottom will create an horizontal toolbar, Left/Right will create a vertical toolbar). 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 toolbar items.
+ * @public
+ * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.
+ */
+export declare function Toolbar(props: ToolbarProps): React.JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/Toolbar.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,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AAGvC;;;GAGG;AAEH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,2OAA2O;IAC3O,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,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;;;GAGG;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAE1C"}

package/lib/components-react/toolbar/Toolbar.js

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 * as React from "react";
+import { InternalToolbarComponent } from "./InternalToolbarComponent.js";
+/** Component that displays toolbar items.
+ * @public
+ * @deprecated in 4.0.0. Use [Toolbar]($appui-react) instead.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function Toolbar(props) {
+    return React.createElement(InternalToolbarComponent, { ...props });
+}
+//# sourceMappingURL=Toolbar.js.map