@itwin/components-react 4.0.0-dev.11 → 4.0.0-dev.13

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

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "variables";
-
-.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;
-
-  > * {
-    &:not(.components-triangle) {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  > .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: $buic-icon-color
-    );
-  }
-
-  &: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: $buic-background-1;
-  border-color: $buic-background-5;
-  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;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+@import "variables";
+
+.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;
+
+  > * {
+    &:not(.components-triangle) {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  > .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: $buic-icon-color
+    );
+  }
+
+  &: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: $buic-background-1;
+  border-color: $buic-background-5;
+  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/esm/components-react/toolbar/PopupItemWithDrag.d.ts

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-/// <reference types="react" />
-import "./PopupItem.scss";
-import { GroupButton, RelativePosition } from "@itwin/appui-abstract";
-import { ToolbarButtonItemProps } from "./Item";
-import { ToolbarPanelAlignment } from "./ToolbarWithOverflow";
-import { Direction } from "./utilities/Direction";
-/** Properties of [[PopupItem]] component.
- * @public
- */
-export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
-    /** Panel of the toolbar. */
-    groupItem: GroupButton;
-}
-/** Expandable Group button Item
- * @public
- */
-export declare function PopupItemWithDrag(props: PopupItemWithDragProps): JSX.Element;
-/** @internal */
-export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+/// <reference types="react" />
+import "./PopupItem.scss";
+import { GroupButton, RelativePosition } from "@itwin/appui-abstract";
+import { ToolbarButtonItemProps } from "./Item";
+import { ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+import { Direction } from "./utilities/Direction";
+/** Properties of [[PopupItem]] component.
+ * @public
+ */
+export interface PopupItemWithDragProps extends ToolbarButtonItemProps {
+    /** Panel of the toolbar. */
+    groupItem: GroupButton;
+}
+/** Expandable Group button Item
+ * @public
+ */
+export declare function PopupItemWithDrag(props: PopupItemWithDragProps): JSX.Element;
+/** @internal */
+export declare function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition;
 //# sourceMappingURL=PopupItemWithDrag.d.ts.map

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/PopupItemWithDrag.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Toolbar\r\n */\r\n\r\nimport \"./PopupItem.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\r\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\r\nimport { ToolbarButtonItemProps } from \"./Item\";\r\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\r\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\r\nimport { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\r\nimport { useDragInteraction } from \"./useDragInteraction\";\r\nimport { Direction } from \"./utilities/Direction\";\r\n\r\n/** Properties of [[PopupItem]] component.\r\n * @public\r\n */\r\nexport interface PopupItemWithDragProps extends ToolbarButtonItemProps {\r\n  /** Panel of the toolbar. */\r\n  groupItem: GroupButton;\r\n}\r\n\r\nfunction tryFindActiveAction(item: GroupButton): ActionButton | undefined {\r\n  for (const childItem of item.items) {\r\n    // istanbul ignore else\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      if (childItem.isActive)\r\n        return childItem;\r\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n      const nestedChild = tryFindActiveAction(childItem);\r\n      if (nestedChild)\r\n        return nestedChild;\r\n    }\r\n  }\r\n  return undefined;\r\n}\r\n\r\nfunction getFirstAvailableChildActionItem(item: GroupButton): ActionButton | undefined {\r\n  for (const childItem of item.items) {\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      return childItem;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\r\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\r\n        // istanbul ignore else\r\n        if (nestedChild)\r\n          return nestedChild;\r\n      }\r\n    }\r\n  }\r\n  return undefined;\r\n}\r\n\r\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\r\n  const activeItem = tryFindActiveAction(item);\r\n  if (activeItem)\r\n    return activeItem;\r\n\r\n  // initially look only in root items\r\n  for (const childItem of item.items) {\r\n    // istanbul ignore else\r\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\r\n      return childItem;\r\n    }\r\n  }\r\n\r\n  // if not found look inside groups\r\n  return getFirstAvailableChildActionItem(item);\r\n}\r\n\r\n/** Expandable Group button Item\r\n * @public\r\n */\r\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\r\n  const [isPanelShown, setPanelShown] = React.useState(false);\r\n  const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));\r\n  const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\r\n\r\n  React.useEffect(() => {\r\n    const newActiveAction = getActiveAction(props.groupItem);\r\n    // istanbul ignore else\r\n    if (newActiveAction) {\r\n      // istanbul ignore next\r\n      if (newActiveAction.isActive) {\r\n        setActiveAction(newActiveAction);\r\n      } else {\r\n        if (activeAction && activeAction.isActive) {\r\n          setActiveAction({ ...activeAction, isActive: false });\r\n        }\r\n      }\r\n    }\r\n  }, [props.groupItem, activeAction]);\r\n\r\n  const processPanelOpenClose = React.useCallback((isOpening: boolean) => {\r\n    setPanelShown((prev) => {\r\n      // istanbul ignore else\r\n      if (prev !== isOpening)\r\n        onPopupPanelOpenClose(isOpening);\r\n      return isOpening;\r\n    });\r\n  }, [setPanelShown, onPopupPanelOpenClose]);\r\n\r\n  // handle open and closing popup panel\r\n  const onOpenPanel = React.useCallback(() => {\r\n    processPanelOpenClose(!isPanelShown);\r\n  }, [isPanelShown, processPanelOpenClose]);\r\n\r\n  // handle open and closing popup panel\r\n  const onGroupButtonClick = React.useCallback(() => {\r\n    // only execute action if not disabled\r\n    activeAction && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();\r\n  }, [activeAction]);\r\n\r\n  const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;\r\n  const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;\r\n  const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;\r\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\r\n  const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);\r\n\r\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);\r\n\r\n  const className = classnames(\r\n    \"components-toolbar-button-item\",\r\n    \"components-toolbar-expandable-button\",\r\n    isActive && \"components-active\",\r\n    isDisabled && \"components-disabled-drag\",\r\n    props.className);\r\n\r\n  const [targetRef, target] = useRefState<HTMLButtonElement>();\r\n  const handleClose = React.useCallback(() => {\r\n    processPanelOpenClose(false);\r\n  }, [processPanelOpenClose]);\r\n  const { hasOverflow } = useToolItemEntryContext();\r\n  const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;\r\n\r\n  return (\r\n    <ToolbarPopupContext.Provider value={{\r\n      closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),\r\n      setSelectedItem: /* istanbul ignore next */ (buttonItem: ActionButton) => setActiveAction(buttonItem),\r\n    }\r\n    }>\r\n      <button\r\n        data-item-id={props.itemId}\r\n        data-item-type=\"action-tool-button\"\r\n        data-item-group-priority={props.groupPriority}\r\n        data-item-priority={props.itemPriority}\r\n        data-item-provider-id={props.providerId}\r\n        ref={targetRef}\r\n        onPointerDown={handlePointerDown}\r\n        onClick={handleButtonClick}\r\n        onKeyDown={props.onKeyDown}\r\n        className={className}\r\n        style={props.style}\r\n        title={title}\r\n      >\r\n        <div className=\"components-icon\">\r\n          {icon}\r\n        </div>\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {badge}\r\n          </div>\r\n        }\r\n        <div className=\"components-triangle\" />\r\n      </button>\r\n      <PopupItemPopup\r\n        isOpen={isPanelShown}\r\n        onClose={handleClose}\r\n        position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\r\n        target={target}\r\n      >\r\n        <PopupItemsPanel groupItem={props.groupItem} activateOnPointerUp={true} />\r\n      </PopupItemPopup>\r\n    </ToolbarPopupContext.Provider>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition {\r\n  // istanbul ignore next\r\n  switch (expandsTo) {\r\n    case Direction.Bottom: {\r\n      if (alignment === ToolbarPanelAlignment.End)\r\n        return RelativePosition.BottomRight;\r\n      return RelativePosition.BottomLeft;\r\n    }\r\n    case Direction.Left:\r\n      return RelativePosition.LeftTop;\r\n    case Direction.Right:\r\n      return RelativePosition.RightTop;\r\n    case Direction.Top:\r\n      return RelativePosition.Top;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgB,uBAAuB,EAAE,sBAAsB,EAAe,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC3J,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,sCAAsC,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAC/H,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAUlD,SAAS,mBAAmB,CAAC,IAAiB;IAC5C,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;QAClC,uBAAuB;QACvB,IAAI,oBAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,IAAI,SAAS,CAAC,QAAQ;gBACpB,OAAO,SAAS,CAAC;SACpB;aAAM,IAAI,oBAAoB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YACxD,MAAM,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;YACnD,IAAI,WAAW;gBACb,OAAO,WAAW,CAAC;SACtB;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,gCAAgC,CAAC,IAAiB;IACzD,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;QAClC,IAAI,oBAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,uBAAuB;YACvB,IAAI,oBAAoB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;gBACjD,MAAM,WAAW,GAAG,gCAAgC,CAAC,SAAS,CAAC,CAAC;gBAChE,uBAAuB;gBACvB,IAAI,WAAW;oBACb,OAAO,WAAW,CAAC;aACtB;SACF;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,eAAe,CAAC,IAAiB;IACxC,MAAM,UAAU,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC;IAEpB,oCAAoC;IACpC,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;QAClC,uBAAuB;QACvB,IAAI,oBAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,OAAO,SAAS,CAAC;SAClB;KACF;IAED,kCAAkC;IAClC,OAAO,gCAAgC,CAAC,IAAI,CAAC,CAAC;AAChD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACzF,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAAG,sCAAsC,EAAE,CAAC;IAEzH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzD,uBAAuB;QACvB,IAAI,eAAe,EAAE;YACnB,uBAAuB;YACvB,IAAI,eAAe,CAAC,QAAQ,EAAE;gBAC5B,eAAe,CAAC,eAAe,CAAC,CAAC;aAClC;iBAAM;gBACL,IAAI,YAAY,IAAI,YAAY,CAAC,QAAQ,EAAE;oBACzC,eAAe,CAAC,EAAE,GAAG,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;iBACvD;aACF;SACF;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEpC,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACrE,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,uBAAuB;YACvB,IAAI,IAAI,KAAK,SAAS;gBACpB,qBAAqB,CAAC,SAAS,CAAC,CAAC;YACnC,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE3C,sCAAsC;IACtC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,qBAAqB,CAAC,CAAC,YAAY,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE1C,sCAAsC;IACtC,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,sCAAsC;QACtC,YAAY,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;IACvG,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,wBAAwB,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAC3G,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IACnH,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/F,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;IACvE,MAAM,UAAU,GAAG,uBAAuB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE/G,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,kBAAkB,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAErG,MAAM,SAAS,GAAG,UAAU,CAC1B,gCAAgC,EAChC,sCAAsC,EACtC,QAAQ,IAAI,mBAAmB,EAC/B,UAAU,IAAI,0BAA0B,EACxC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAqB,CAAC;IAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAClD,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,0BAA0B,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAElG,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE;YACnC,UAAU,EAAE,0BAA0B,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC;YACzE,eAAe,EAAE,0BAA0B,CAAC,CAAC,UAAwB,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;SACtG;QAEC,gDACgB,KAAK,CAAC,MAAM,oBACX,oBAAoB,8BACT,KAAK,CAAC,aAAa,wBACzB,KAAK,CAAC,YAAY,2BACf,KAAK,CAAC,UAAU,EACvC,GAAG,EAAE,SAAS,EACd,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK;YAEZ,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,IAAI,CACD;YACL,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CACF;YAER,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CAChC;QACT,oBAAC,cAAc,IACb,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,8BAA8B,CAAC,kBAAkB,EAAE,cAAc,CAAC,EAC5E,MAAM,EAAE,MAAM;YAEd,oBAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,mBAAmB,EAAE,IAAI,GAAI,CAC3D,CACY,CAChC,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,8BAA8B,CAAC,SAAoB,EAAE,SAAgC;IACnG,uBAAuB;IACvB,QAAQ,SAAS,EAAE;QACjB,KAAK,SAAS,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,SAAS,KAAK,qBAAqB,CAAC,GAAG;gBACzC,OAAO,gBAAgB,CAAC,WAAW,CAAC;YACtC,OAAO,gBAAgB,CAAC,UAAU,CAAC;SACpC;QACD,KAAK,SAAS,CAAC,IAAI;YACjB,OAAO,gBAAgB,CAAC,OAAO,CAAC;QAClC,KAAK,SAAS,CAAC,KAAK;YAClB,OAAO,gBAAgB,CAAC,QAAQ,CAAC;QACnC,KAAK,SAAS,CAAC,GAAG;YAChB,OAAO,gBAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,CAAC","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 { ActionButton, ConditionalBooleanValue, ConditionalStringValue, GroupButton, RelativePosition, ToolbarItemUtilities } from \"@itwin/appui-abstract\";\nimport { BadgeUtilities, IconHelper, useRefState } from \"@itwin/core-react\";\nimport { ToolbarButtonItemProps } from \"./Item\";\nimport { PopupItemPopup, ToolbarPopupContext } from \"./PopupItem\";\nimport { PopupItemsPanel } from \"./PopupItemsPanel\";\nimport { ToolbarPanelAlignment, useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from \"./ToolbarWithOverflow\";\nimport { useDragInteraction } from \"./useDragInteraction\";\nimport { Direction } from \"./utilities/Direction\";\n\n/** Properties of [[PopupItem]] component.\n * @public\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    // istanbul ignore else\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      if (childItem.isActive)\n        return childItem;\n    } else if (ToolbarItemUtilities.isGroupButton(childItem)) {\n      const nestedChild = tryFindActiveAction(childItem);\n      if (nestedChild)\n        return nestedChild;\n    }\n  }\n  return undefined;\n}\n\nfunction getFirstAvailableChildActionItem(item: GroupButton): ActionButton | undefined {\n  for (const childItem of item.items) {\n    if (ToolbarItemUtilities.isActionButton(childItem)) {\n      return childItem;\n    } else {\n      // istanbul ignore else\n      if (ToolbarItemUtilities.isGroupButton(childItem)) {\n        const nestedChild = getFirstAvailableChildActionItem(childItem);\n        // istanbul ignore else\n        if (nestedChild)\n          return nestedChild;\n      }\n    }\n  }\n  return undefined;\n}\n\nfunction getActiveAction(item: GroupButton): ActionButton | undefined {\n  const activeItem = tryFindActiveAction(item);\n  if (activeItem)\n    return activeItem;\n\n  // initially look only in root items\n  for (const childItem of item.items) {\n    // istanbul ignore else\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\n * @public\n */\nexport function PopupItemWithDrag(props: PopupItemWithDragProps) {\n  const [isPanelShown, setPanelShown] = React.useState(false);\n  const [activeAction, setActiveAction] = React.useState(getActiveAction(props.groupItem));\n  const { expandsTo, overflowExpandsTo, panelAlignment, onPopupPanelOpenClose } = useToolbarWithOverflowDirectionContext();\n\n  React.useEffect(() => {\n    const newActiveAction = getActiveAction(props.groupItem);\n    // istanbul ignore else\n    if (newActiveAction) {\n      // istanbul ignore next\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((isOpening: boolean) => {\n    setPanelShown((prev) => {\n      // istanbul ignore else\n      if (prev !== isOpening)\n        onPopupPanelOpenClose(isOpening);\n      return isOpening;\n    });\n  }, [setPanelShown, onPopupPanelOpenClose]);\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 && !ConditionalBooleanValue.getValue(activeAction.isDisabled) && activeAction.execute();\n  }, [activeAction]);\n\n  const badge = activeAction ? BadgeUtilities.getComponentForBadgeType(activeAction.badgeType) : props.badge;\n  const icon = activeAction ? IconHelper.getIconReactNode(activeAction.icon, activeAction.internalData) : props.icon;\n  const title = activeAction ? ConditionalStringValue.getValue(activeAction.label) : props.title;\n  const isActive = activeAction ? activeAction.isActive : props.isActive;\n  const isDisabled = ConditionalBooleanValue.getValue(activeAction ? activeAction.isDisabled : props.isDisabled);\n\n  const { handlePointerDown, handleButtonClick } = useDragInteraction(onGroupButtonClick, onOpenPanel);\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  const [targetRef, target] = useRefState<HTMLButtonElement>();\n  const handleClose = React.useCallback(() => {\n    processPanelOpenClose(false);\n  }, [processPanelOpenClose]);\n  const { hasOverflow } = useToolItemEntryContext();\n  const expandsToDirection = hasOverflow ? /* istanbul ignore next */ overflowExpandsTo : expandsTo;\n\n  return (\n    <ToolbarPopupContext.Provider value={{\n      closePanel: /* istanbul ignore next */ () => processPanelOpenClose(false),\n      setSelectedItem: /* istanbul ignore next */ (buttonItem: ActionButton) => 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\">\n          {icon}\n        </div>\n        {props.badge &&\n          <div className=\"components-badge\">\n            {badge}\n          </div>\n        }\n        <div className=\"components-triangle\" />\n      </button>\n      <PopupItemPopup\n        isOpen={isPanelShown}\n        onClose={handleClose}\n        position={toToolbarPopupRelativePosition(expandsToDirection, panelAlignment)}\n        target={target}\n      >\n        <PopupItemsPanel groupItem={props.groupItem} activateOnPointerUp={true} />\n      </PopupItemPopup>\n    </ToolbarPopupContext.Provider>\n  );\n}\n\n/** @internal */\nexport function toToolbarPopupRelativePosition(expandsTo: Direction, alignment: ToolbarPanelAlignment): RelativePosition {\n  // istanbul ignore next\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/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