@itwin/components-react 3.7.3 → 3.7.5

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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"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"]}

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

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

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

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