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

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

@@ -1 +1 @@
-{"version":3,"file":"PopupItemWithDrag.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemWithDrag.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA0B;AAC1B,4DAAoC;AACpC,6CAA+B;AAC/B,0DAA2J;AAC3J,kDAA4E;AAE5E,2CAAkE;AAClE,uDAAoD;AACpD,+DAA+H;AAC/H,6DAA0D;AAC1D,qDAAkD;AAUlD,SAAS,mBAAmB,CAAC,IAAiB;IAC5C,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;QAClC,uBAAuB;QACvB,IAAI,qCAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,IAAI,SAAS,CAAC,QAAQ;gBACpB,OAAO,SAAS,CAAC;SACpB;aAAM,IAAI,qCAAoB,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,qCAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,uBAAuB;YACvB,IAAI,qCAAoB,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,qCAAoB,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,SAAgB,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,IAAA,4DAAsC,GAAE,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,wCAAuB,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,2BAAc,CAAC,wBAAwB,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAC3G,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,uBAAU,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,uCAAsB,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,wCAAuB,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,IAAA,uCAAkB,EAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;IAErG,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,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,IAAA,wBAAW,GAAqB,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,IAAA,6CAAuB,GAAE,CAAC;IAClD,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,0BAA0B,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;IAElG,OAAO,CACL,oBAAC,+BAAmB,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,0BAAc,IACb,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,8BAA8B,CAAC,kBAAkB,EAAE,cAAc,CAAC,EAC5E,MAAM,EAAE,MAAM;YAEd,oBAAC,iCAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,mBAAmB,EAAE,IAAI,GAAI,CAC3D,CACY,CAChC,CAAC;AACJ,CAAC;AAtGD,8CAsGC;AAED,gBAAgB;AAChB,SAAgB,8BAA8B,CAAC,SAAoB,EAAE,SAAgC;IACnG,uBAAuB;IACvB,QAAQ,SAAS,EAAE;QACjB,KAAK,qBAAS,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,SAAS,KAAK,2CAAqB,CAAC,GAAG;gBACzC,OAAO,iCAAgB,CAAC,WAAW,CAAC;YACtC,OAAO,iCAAgB,CAAC,UAAU,CAAC;SACpC;QACD,KAAK,qBAAS,CAAC,IAAI;YACjB,OAAO,iCAAgB,CAAC,OAAO,CAAC;QAClC,KAAK,qBAAS,CAAC,KAAK;YAClB,OAAO,iCAAgB,CAAC,QAAQ,CAAC;QACnC,KAAK,qBAAS,CAAC,GAAG;YAChB,OAAO,iCAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,CAAC;AAfD,wEAeC","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":"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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"]}

package/lib/cjs/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/cjs/components-react/toolbar/PopupItemsPanel.js

@@ -1,143 +1,147 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupItemsPanel = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const BackArrow_1 = require("./groupPanel/BackArrow");
-const Column_1 = require("./groupPanel/Column");
-const Columns_1 = require("./groupPanel/Columns");
-const Panel_1 = require("./groupPanel/Panel");
-const Title_1 = require("./groupPanel/Title");
-const Expander_1 = require("./groupPanel/tool/Expander");
-const Tool_1 = require("./groupPanel/tool/Tool");
-const PopupItem_1 = require("./PopupItem");
-const ToolbarWithOverflow_1 = require("./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
- */
-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 (appui_abstract_1.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 } = (0, PopupItem_1.useToolbarPopupContext)();
-    const { onItemExecuted, onKeyDown } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
-    const handleOnPointerUp = React.useCallback(/* istanbul ignore next */ (panelItem) => {
-        // istanbul ignore else
-        if (appui_abstract_1.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 (appui_abstract_1.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(Column_1.GroupColumn, { key: columnIndex }, columnItems.map((panelItem) => {
-        const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);
-        const icon = core_react_1.IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);
-        const label = appui_abstract_1.ConditionalStringValue.getValue(panelItem.label);
-        if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(panelItem)) {
-            return (React.createElement(Expander_1.GroupToolExpander, { isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(panelItem.isDisabled), key: panelItem.id, label: label, icon: icon, badge: badge, item: panelItem, onClick: handleGroupItemClick }));
-        }
-        return (React.createElement(Tool_1.GroupTool, { isDisabled: appui_abstract_1.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(() => appui_abstract_1.ConditionalStringValue.getValue(titleString), [titleString]);
-    const className = (0, classnames_1.default)(1 === groupArray.length && "components-toolbar-item-expandable-group-group", groupArray.length > 1 && "components-toolbar-item-expandable-group-nested");
-    return (React.createElement(Panel_1.Panel, { className: className, onKeyDown: handleOnKeyDown },
-        groupArray.length > 1 &&
-            React.createElement(BackArrow_1.BackArrow, { className: "components-back", onClick: handleBackArrowClick }),
-        panelTitle &&
-            React.createElement(Title_1.Title, null, panelTitle),
-        columns &&
-            React.createElement(Columns_1.Columns, null, columns)));
-}
-exports.PopupItemsPanel = PopupItemsPanel;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupItemsPanel = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const BackArrow_1 = require("./groupPanel/BackArrow");
+const Column_1 = require("./groupPanel/Column");
+const Columns_1 = require("./groupPanel/Columns");
+const Panel_1 = require("./groupPanel/Panel");
+const Title_1 = require("./groupPanel/Title");
+const Expander_1 = require("./groupPanel/tool/Expander");
+const Tool_1 = require("./groupPanel/tool/Tool");
+const PopupItem_1 = require("./PopupItem");
+const ToolbarWithOverflow_1 = require("./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
+ */
+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 (appui_abstract_1.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 } = (0, PopupItem_1.useToolbarPopupContext)();
+    const { onItemExecuted, onKeyDown } = (0, ToolbarWithOverflow_1.useToolbarWithOverflowDirectionContext)();
+    const handleOnPointerUp = React.useCallback(/* istanbul ignore next */ (panelItem) => {
+        // istanbul ignore else
+        if (appui_abstract_1.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 (appui_abstract_1.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(Column_1.GroupColumn, { key: columnIndex }, columnItems.map((panelItem) => {
+        const badge = core_react_1.BadgeUtilities.getComponentForBadgeType(panelItem.badgeType);
+        const icon = core_react_1.IconHelper.getIconReactNode(panelItem.icon, panelItem.internalData);
+        const label = appui_abstract_1.ConditionalStringValue.getValue(panelItem.label);
+        if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(panelItem)) {
+            return (React.createElement(Expander_1.GroupToolExpander, { isDisabled: appui_abstract_1.ConditionalBooleanValue.getValue(panelItem.isDisabled), key: panelItem.id, label: label, icon: icon, badge: badge, item: panelItem, onClick: handleGroupItemClick }));
+        }
+        return (React.createElement(Tool_1.GroupTool, { isDisabled: appui_abstract_1.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(() => appui_abstract_1.ConditionalStringValue.getValue(titleString), [titleString]);
+    const className = (0, classnames_1.default)(1 === groupArray.length && "components-toolbar-item-expandable-group-group", groupArray.length > 1 && "components-toolbar-item-expandable-group-nested");
+    return (React.createElement(Panel_1.Panel, { className: className, onKeyDown: handleOnKeyDown },
+        groupArray.length > 1 &&
+            React.createElement(BackArrow_1.BackArrow, { className: "components-back", onClick: handleBackArrowClick }),
+        panelTitle &&
+            React.createElement(Title_1.Title, null, panelTitle),
+        columns &&
+            React.createElement(Columns_1.Columns, null, columns)));
+}
+exports.PopupItemsPanel = PopupItemsPanel;
 //# sourceMappingURL=PopupItemsPanel.js.map

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

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

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

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Toolbar.scss";
-import * as React from "react";
-import { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
-import { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction } from "./utilities/Direction";
-import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
-/** Properties of [[Toolbar]] component.
- * @public
- */
-export interface ToolbarProps extends CommonProps, NoChildrenProps {
-    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
-    expandsTo?: Direction;
-    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
-    items: CommonToolbarItem[];
-    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
-    panelAlignment?: ToolbarPanelAlignment;
-    /** Use Drag Interaction to open popups with nest action buttons */
-    useDragInteraction?: boolean;
-    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
-    toolbarOpacitySetting?: ToolbarOpacitySetting;
-    /** Optional function to call on any item execution */
-    onItemExecuted?: OnItemExecutedFunc;
-    /** Optional function to call on any KeyDown events processed by toolbar */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-/** Component that displays tool settings as a bar across the top of the content view.
- * @public
- */
-export declare function Toolbar(props: ToolbarProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Toolbar.scss";
+import * as React from "react";
+import { CommonToolbarItem, OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction } from "./utilities/Direction";
+import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
+/** Properties of [[Toolbar]] component.
+ * @public
+ */
+export interface ToolbarProps extends CommonProps, NoChildrenProps {
+    /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
+    expandsTo?: Direction;
+    /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */
+    items: CommonToolbarItem[];
+    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
+    panelAlignment?: ToolbarPanelAlignment;
+    /** Use Drag Interaction to open popups with nest action buttons */
+    useDragInteraction?: boolean;
+    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
+    toolbarOpacitySetting?: ToolbarOpacitySetting;
+    /** Optional function to call on any item execution */
+    onItemExecuted?: OnItemExecutedFunc;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @public
+ */
+export declare function Toolbar(props: ToolbarProps): JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map