@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.20

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

@@ -8,7 +8,11 @@
  */
 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]; } });
+    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];

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

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

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

@@ -8,7 +8,11 @@
  */
 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]; } });
+    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];

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":["/*---------------------------------------------------------------------------------------------\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":["/*---------------------------------------------------------------------------------------------\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.js

@@ -8,7 +8,11 @@
  */
 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]; } });
+    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];

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":["/*---------------------------------------------------------------------------------------------\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"]}
+{"version":3,"file":"PopupItemsPanel.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/PopupItemsPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4DAAoC;AACpC,6CAA+B;AAC/B,0DAAyI;AACzI,kDAA+D;AAC/D,sDAAmD;AACnD,gDAAkD;AAClD,kDAA+C;AAC/C,8CAA2C;AAC3C,8CAA2C;AAC3C,yDAA+D;AAC/D,iDAAmD;AACnD,2CAAqD;AACrD,+DAA+E;AAE/E,SAAS,mBAAmB,CAAC,aAAqB;IAChD,IAAI,aAAa,IAAI,CAAC;QACpB,OAAO,aAAa,CAAC;IACvB,IAAI,aAAa,IAAI,EAAE;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IACtC,IAAI,aAAa,IAAI,EAAE;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IACtC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;AACtC,CAAC;AAOD;;GAEG;AACH,SAAgB,eAAe,CAAC,KAA2B;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEpE,wCAAwC;IACxC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,yBAAyB,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,eAAe,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAA2D,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACpI,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAC;QAC1D,IAAI,WAAW,IAAI,GAAG,CAAC,MAAM,EAAE;YAC7B,OAAO;gBACL,GAAG,GAAG;gBACN,CAAC,IAAI,CAAC;aACP,CAAC;SACH;QACD,OAAO;YACL,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC;YAC5B;gBACE,GAAG,GAAG,CAAC,WAAW,CAAC;gBACnB,IAAI;aACL;YACD,GAAG,GAAG,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;SAC9B,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAgC,EAAE,EAAE;QAClF,uBAAuB;QACvB,IAAI,qCAAoB,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE;YAC5C,+BAA+B;YAC/B,aAAa,CAAC,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClD,uBAAuB;QACvB,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,IAAA,kCAAsB,GAAE,CAAC;IACjE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAA,4DAAsC,GAAE,CAAC;IAE/E,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,0BAA0B,CAAA,CAAC,SAAqC,EAAE,EAAE;QAC9G,uBAAuB;QACvB,IAAI,qCAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,KAAK,CAAC,mBAAmB,IAAI,eAAe,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YAC3E,KAAK,CAAC,mBAAmB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACjD,cAAc,CAAC,SAAS,CAAC,CAAC;YAC1B,KAAK,CAAC,mBAAmB,IAAI,UAAU,EAAE,CAAC;SAC3C;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7E,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAqC,EAAE,EAAE;QACxF,uBAAuB;QACvB,IAAI,qCAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE;YAClD,eAAe,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,EAAE,CAAC;YACpB,cAAc,CAAC,SAAS,CAAC,CAAC;YAC1B,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAElD,sDAAsD;IACtD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsB,EAAE,EAAE;QACnE,SAAS,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,4BAA4B;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,CACjF,oBAAC,oBAAW,IAAC,GAAG,EAAE,WAAW,IAC1B,WAAW,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;QAC7B,MAAM,KAAK,GAAG,2BAAc,CAAC,wBAAwB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3E,MAAM,IAAI,GAAG,uBAAU,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QACjF,MAAM,KAAK,GAAG,uCAAsB,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,qCAAoB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YACjD,OAAO,CACL,oBAAC,4BAAiB,IAChB,UAAU,EAAE,wCAAuB,CAAC,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,EAClE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,oBAAoB,GAC7B,CACH,CAAC;SACH;QAED,OAAO,CACL,oBAAC,gBAAS,IACR,UAAU,EAAE,wCAAuB,CAAC,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,EAClE,QAAQ,EAAE,CAAC,CAAC,SAAS,CAAC,QAAQ,EAC9B,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,qBAAqB,EAC9B,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;IACJ,CAAC,CAAC,CACU,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpG,iDAAiD;IACjD,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;IACxF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,uCAAsB,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACpG,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,CAAC,KAAK,UAAU,CAAC,MAAM,IAAI,gDAAgD,EAC3E,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,iDAAiD,CAC3E,CAAC;IAEF,OAAO,CACL,oBAAC,aAAK,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe;QACpD,UAAU,CAAC,MAAM,GAAG,CAAC;YACpB,oBAAC,qBAAS,IACR,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,oBAAoB,GAC7B;QAEH,UAAU;YACT,oBAAC,aAAK,QACH,UAAU,CACL;QAET,OAAO;YACN,oBAAC,iBAAO,QACL,OAAO,CACA,CAEN,CACT,CAAC;AACJ,CAAC;AAzID,0CAyIC","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

@@ -9,11 +9,12 @@ import { Direction } from "./utilities/Direction";
 import { ToolbarOpacitySetting, ToolbarPanelAlignment } from "./ToolbarWithOverflow";
 /** Properties of [[Toolbar]] component.
  * @public
+ * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.
  */
 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. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
+    /** 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;
@@ -26,8 +27,9 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps {
     /** 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.
+/** Component that displays toolbar items.
  * @public
+ * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
  */
 export declare function Toolbar(props: ToolbarProps): JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mIAAmI;IACnI,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAWD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAiF1C"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EAAE,kBAAkB,EACtC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAmD,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAiE,qBAAqB,EAAE,qBAAqB,EAAuC,MAAM,uBAAuB,CAAC;AAEzL;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAWD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAiF1C"}

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

@@ -8,7 +8,11 @@
  */
 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]; } });
+    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];
@@ -44,8 +48,9 @@ function getItemWrapperClass(child) {
     }
     return "";
 }
-/** Component that displays tool settings as a bar across the top of the content view.
+/** Component that displays toolbar items.
  * @public
+ * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.
  */
 function Toolbar(props) {
     const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.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 \"./Toolbar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  CommonToolbarItem, OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { ToolbarItems } from \"./Items\";\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n */\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nfunction getItemWrapperClass(child: React.ReactNode) {\n  // istanbul ignore else\n  if (React.isValidElement(child)) {\n    if (child.props && child.props.addGroupSeparator)\n      return \"components-toolbar-button-add-gap-before\";\n  }\n  return \"\";\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @public\n */\nexport function Toolbar(props: ToolbarProps) {\n  const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\n  const useDragInteraction = !!props.useDragInteraction;\n  const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\n  const [popupPanelCount, setPopupPanelCount] = React.useState(0);\n\n  const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\n    // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\n    setTimeout(() => {\n      setPopupPanelCount((prev) => {\n        const nextCount = isOpening ? (prev + 1) : (prev - 1);\n        // eslint-disable-next-line no-console\n        // console.log(`new popup count = ${nextCount}`);\n        return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;\n      });\n    });\n  }, []);\n\n  const availableNodes = React.useMemo<React.ReactNode[]>(() => {\n    return props.items.map((item, index) => {\n      let addGroupSeparator = false;\n      if (index > 0)\n        addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\n      return (\n        <ToolbarItemComponent\n          key={item.id}\n          item={item}\n          addGroupSeparator={!!addGroupSeparator}\n        />\n      );\n    });\n  }, [props.items]);\n\n  const direction = getToolbarDirection(expandsTo);\n  const className = classnames(\n    \"components-toolbar-overflow-sizer\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n    props.className);\n\n  // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\n  const wrapperClassName = classnames(\n    \"components-toolbar-item-container\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n  );\n\n  return (\n    <ToolbarWithOverflowDirectionContext.Provider value={\n      {\n        expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\n        toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\n        overflowDirection: OrthogonalDirection.Horizontal,\n        openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\n        onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },\n        onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e: React.KeyboardEvent) => { },\n      }\n    }>\n      <ToolbarItemContext.Provider\n        value={{\n          hasOverflow: false,\n          useHeight: false,\n          onResize: /* istanbul ignore next */ () => { },\n        }}\n      >\n        {(availableNodes.length > 0) &&\n          <div\n            className={className}\n            style={props.style}\n            onKeyDown={props.onKeyDown}\n            role=\"presentation\"\n          >\n            <ToolbarItems\n              className=\"components-items\"\n              direction={direction}\n            >\n              {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\n            </ToolbarItems>\n          </div>\n        }\n      </ToolbarItemContext.Provider>\n    </ToolbarWithOverflowDirectionContext.Provider >\n  );\n}\n"]}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/Toolbar.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 \"./Toolbar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  CommonToolbarItem, OnItemExecutedFunc,\n} from \"@itwin/appui-abstract\";\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { ToolbarItems } from \"./Items\";\nimport { Direction, OrthogonalDirection, OrthogonalDirectionHelpers } from \"./utilities/Direction\";\nimport { getToolbarDirection, ToolbarItemComponent, ToolbarItemContext, ToolbarOpacitySetting, ToolbarPanelAlignment, ToolbarWithOverflowDirectionContext } from \"./ToolbarWithOverflow\";\n\n/** Properties of [[Toolbar]] component.\n * @public\n * @deprecated in 4.0. Use [ToolbarProps]($appui-react) instead.\n */\nexport interface ToolbarProps extends CommonProps, NoChildrenProps {\n  /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */\n  expandsTo?: Direction;\n  /** Definitions for items of the toolbar. Items are expected to be already sorted by group and item. */\n  items: CommonToolbarItem[];\n  /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */\n  panelAlignment?: ToolbarPanelAlignment;\n  /** Use Drag Interaction to open popups with nest action buttons */\n  useDragInteraction?: boolean;\n  /** Determines whether to use mouse proximity to alter the opacity of the toolbar */\n  toolbarOpacitySetting?: ToolbarOpacitySetting;\n  /** Optional function to call on any item execution */\n  onItemExecuted?: OnItemExecutedFunc;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nfunction getItemWrapperClass(child: React.ReactNode) {\n  // istanbul ignore else\n  if (React.isValidElement(child)) {\n    if (child.props && child.props.addGroupSeparator)\n      return \"components-toolbar-button-add-gap-before\";\n  }\n  return \"\";\n}\n\n/** Component that displays toolbar items.\n * @public\n * @deprecated in 4.0. Use [Toolbar]($appui-react) instead.\n */\nexport function Toolbar(props: ToolbarProps) { // eslint-disable-line deprecation/deprecation\n  const expandsTo = props.expandsTo ? props.expandsTo : Direction.Bottom;\n  const useDragInteraction = !!props.useDragInteraction;\n  const panelAlignment = props.panelAlignment ? props.panelAlignment : ToolbarPanelAlignment.Start;\n  const [popupPanelCount, setPopupPanelCount] = React.useState(0);\n\n  const handlePopupPanelOpenClose = React.useCallback((isOpening: boolean) => {\n    // use setTimeout to avoid warning about setting state in Toolbar from render method of PopupItem/PopupItemWithDrag\n    setTimeout(() => {\n      setPopupPanelCount((prev) => {\n        const nextCount = isOpening ? (prev + 1) : (prev - 1);\n        // eslint-disable-next-line no-console\n        // console.log(`new popup count = ${nextCount}`);\n        return nextCount < 0 ? /* istanbul ignore next */ 0 : nextCount;\n      });\n    });\n  }, []);\n\n  const availableNodes = React.useMemo<React.ReactNode[]>(() => {\n    return props.items.map((item, index) => {\n      let addGroupSeparator = false;\n      if (index > 0)\n        addGroupSeparator = item.groupPriority !== props.items[index - 1].groupPriority;\n      return (\n        <ToolbarItemComponent\n          key={item.id}\n          item={item}\n          addGroupSeparator={!!addGroupSeparator}\n        />\n      );\n    });\n  }, [props.items]);\n\n  const direction = getToolbarDirection(expandsTo);\n  const className = classnames(\n    \"components-toolbar-overflow-sizer\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n    props.className);\n\n  // needed to construct DOM structure identical to ToolbarWithOverflow so same css can be applied.\n  const wrapperClassName = classnames(\n    \"components-toolbar-item-container\",\n    OrthogonalDirectionHelpers.getCssClassName(direction),\n  );\n\n  return (\n    <ToolbarWithOverflowDirectionContext.Provider value={\n      {\n        expandsTo, direction, overflowExpandsTo: Direction.Right, panelAlignment, useDragInteraction,\n        toolbarOpacitySetting: props.toolbarOpacitySetting ? props.toolbarOpacitySetting : ToolbarOpacitySetting.Proximity,\n        overflowDirection: OrthogonalDirection.Horizontal,\n        openPopupCount: popupPanelCount, onPopupPanelOpenClose: handlePopupPanelOpenClose, overflowDisplayActive: false,\n        onItemExecuted: props.onItemExecuted ? props.onItemExecuted : /* istanbul ignore next */ () => { },\n        onKeyDown: props.onKeyDown ? props.onKeyDown : /* istanbul ignore next */ (_e: React.KeyboardEvent) => { },\n      }\n    }>\n      <ToolbarItemContext.Provider\n        value={{\n          hasOverflow: false,\n          useHeight: false,\n          onResize: /* istanbul ignore next */ () => { },\n        }}\n      >\n        {(availableNodes.length > 0) &&\n          <div\n            className={className}\n            style={props.style}\n            onKeyDown={props.onKeyDown}\n            role=\"presentation\"\n          >\n            <ToolbarItems\n              className=\"components-items\"\n              direction={direction}\n            >\n              {availableNodes.map((child, index) => <div key={index} className={`${wrapperClassName} ${getItemWrapperClass(child)}`}>{child}</div>)}\n            </ToolbarItems>\n          </div>\n        }\n      </ToolbarItemContext.Provider>\n    </ToolbarWithOverflowDirectionContext.Provider >\n  );\n}\n"]}

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

@@ -8,6 +8,7 @@ import { CommonProps, NoChildrenProps } from "@itwin/core-react";
 import { Direction, OrthogonalDirection } from "./utilities/Direction";
 /** Describes the data needed to insert a custom `React` button into an ToolbarWithOverflow.
  * @public
+ * @deprecated in 4.0. Use [ToolbarCustomItem]($appui-react) instead.
  */
 export interface CustomToolbarItem extends CustomButtonDefinition {
     /** defines the content to display in popup panel */
@@ -28,15 +29,16 @@ export declare const ToolbarPopupAutoHideContext: React.Context<boolean>;
 export declare function useToolbarPopupAutoHideContext(): boolean;
 /** Describes toolbar item.
  * @public
+ * @deprecated in 4.0. Use [ToolbarItem]($appui-react) instead.
  */
-export declare type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
+export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem;
 /** CustomToolbarItem type guard.
  * @internal
  */
 export declare function isCustomToolbarItem(item: ToolbarItem): item is CustomToolbarItem;
 /** @internal */
 export declare const getToolbarDirection: (expandsTo: Direction) => OrthogonalDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+/** Available alignment modes of [[Toolbar]] panels.
  * @public
  */
 export declare enum ToolbarPanelAlignment {
@@ -94,13 +96,14 @@ export declare function ToolbarItemComponent({ item, addGroupSeparator }: {
 export declare function useToolbarWithOverflowDirectionContext(): ToolbarOverflowContextProps;
 /** Properties of [[ToolbarWithOverflow]] component.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflowProps]($appui-react) instead.
  */
 export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
     /** Describes to which direction the popup panels are expanded. Defaults to: [[Direction.Bottom]] */
     expandsTo?: Direction;
     /** Describes to which direction the overflow popup panels are expanded. Defaults to: [[Direction.Right]] */
     overflowExpandsTo?: Direction;
-    /** definitions for items of the toolbar. i.e. [[CommonToolbarItem]]. Items are expected to be already sorted by group and item. */
+    /** 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;
@@ -115,6 +118,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps {
 }
 /** Component that displays tool settings as a bar across the top of the content view.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 export declare function ToolbarWithOverflow(props: ToolbarWithOverflowProps): JSX.Element;
 /** Interface toolbars use to define context for its items.

package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAAE,iBAAiB,EAAmD,sBAAsB,EACxG,WAAW,EAAE,kBAAkB,EAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,WAAW,EAAc,eAAe,EAAW,MAAM,mBAAmB,CAAC;AAStG,OAAO,EAAE,SAAS,EAAoB,mBAAmB,EAA8B,MAAM,uBAAuB,CAAC;AAGrH;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;kEAC8D;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AAEH,eAAO,MAAM,2BAA2B,wBAAsC,CAAC;AAE/E;;;GAGG;AACH,wBAAgB,8BAA8B,YAE7C;AAED;;GAEG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzE;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,IAAI,iBAAiB,CAEhF;AAED,gBAAgB;AAChB,eAAO,MAAM,mBAAmB,cAAe,SAAS,KAAG,mBAG1D,CAAC;AAEF;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,KAAK,IAAA;IACL,GAAG,IAAA;CACJ;AAED;;GAEG;AACH,oBAAY,qBAAqB;IAC/B,8EAA8E;IAC9E,QAAQ,IAAA;IACR,kFAAkF;IAClF,SAAS,IAAA;IACT,gFAAgF;IAChF,WAAW,IAAA;CACZ;AAED;;GAEG;AACH,qBAAa,4BAA4B;IACvC,oDAAoD;IACpD,gBAAuB,gBAAgB,sCAAsC;IAC7E,kDAAkD;IAClD,gBAAuB,cAAc,oCAAoC;IAEzE,iEAAiE;WACnD,eAAe,CAAC,cAAc,EAAE,qBAAqB,GAAG,MAAM;CAQ7E;AAED,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,mBAAmB,CAAC;IACxC,QAAQ,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;IAChD,QAAQ,CAAC,cAAc,EAAE,qBAAqB,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;IACtD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,QAAQ,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC5C,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtD;AAED;;;GAGG;AAEH,eAAO,MAAM,mCAAmC,4CAa9C,CAAC;AAyFH,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAAE,sBAalH;AAED,gBAAgB;AAChB,wBAAgB,sCAAsC,gCAErD;AAeD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW,EAAE,eAAe;IAC5E,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,mIAAmI;IACnI,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,sDAAsD;IACtD,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC9C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAoLlE;AAqID;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,uCAAqD,CAAC;AAErF,gBAAgB;AAChB,wBAAgB,uBAAuB,2BAEtC"}
+{"version":3,"file":"ToolbarWithOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components-react/toolbar/ToolbarWithOverflow.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components-react/toolbar/ToolbarWithOverflow.js

@@ -8,7 +8,11 @@
  */
 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]; } });
+    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];
@@ -45,6 +49,7 @@ const PopupItemsPanel_1 = require("./PopupItemsPanel");
 const PopupItemWithDrag_1 = require("./PopupItemWithDrag");
 const Direction_1 = require("./utilities/Direction");
 const UiComponents_1 = require("../UiComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /**
  * Context used by Toolbar items to know if popup panel should be hidden - via AutoHide.
  * @public
@@ -63,7 +68,7 @@ exports.useToolbarPopupAutoHideContext = useToolbarPopupAutoHideContext;
  * @internal
  */
 function isCustomToolbarItem(item) {
-    return !!item.isCustom && ("panelContentNode" in item);
+    return !!item.isCustom && ("panelContentNode" in item); // eslint-disable-line deprecation/deprecation
 }
 exports.isCustomToolbarItem = isCustomToolbarItem;
 /** @internal */
@@ -72,7 +77,7 @@ const getToolbarDirection = (expandsTo) => {
     return Direction_1.OrthogonalDirectionHelpers.inverse(orthogonalDirection);
 };
 exports.getToolbarDirection = getToolbarDirection;
-/** Available alignment modes of [[ToolbarWithOverflow]] panels.
+/** Available alignment modes of [[Toolbar]] panels.
  * @public
  */
 var ToolbarPanelAlignment;
@@ -106,11 +111,11 @@ class ToolbarPanelAlignmentHelpers {
         }
     }
 }
-exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
 /** Class name of [[ToolbarPanelAlignment.Start]] */
 ToolbarPanelAlignmentHelpers.START_CLASS_NAME = "components-panel-alignment-start";
 /** Class name of [[ToolbarPanelAlignment.End]] */
 ToolbarPanelAlignmentHelpers.END_CLASS_NAME = "components-panel-alignment-end";
+exports.ToolbarPanelAlignmentHelpers = ToolbarPanelAlignmentHelpers;
 /**
  * Context used by Toolbar component to provide Direction to child components.
  * @internal
@@ -135,9 +140,9 @@ function CustomItem({ item, addGroupSeparator }) {
     const { useDragInteraction } = useToolbarWithOverflowDirectionContext();
     const icon = React.useMemo(() => (item.icon &&
         core_react_1.IconHelper.getIconReactNode(item.icon, item.internalData)) || /* istanbul ignore next */
-        React.createElement("i", { className: "icon icon-placeholder" }), [item.icon, item.internalData]);
+        React.createElement(core_react_1.Icon, { className: "icon", iconSpec: React.createElement(itwinui_icons_react_1.SvgPlaceholder, null) }), [item.icon, item.internalData]);
     const isDisabled = React.useMemo(() => appui_abstract_1.ConditionalBooleanValue.getValue(item.isDisabled), [item.isDisabled]);
-    const title = React.useMemo(() => /* istanbul ignore next */ { var _a; /* istanbul ignore next */ return (_a = appui_abstract_1.ConditionalStringValue.getValue(item.label)) !== null && _a !== void 0 ? _a : item.id; }, [item.id, item.label]);
+    const title = React.useMemo(() => /* istanbul ignore next */ appui_abstract_1.ConditionalStringValue.getValue(item.label) ?? item.id, [item.id, item.label]);
     const badge = React.useMemo(() => core_react_1.BadgeUtilities.getComponentForBadgeType(item.badgeType), [item.badgeType]);
     return React.createElement(PopupItem_1.PopupItem, { key: item.id, itemId: item.id, icon: icon, isDisabled: isDisabled, title: title, panel: item.panelContentNode, hideIndicator: useDragInteraction, badge: badge, addGroupSeparator: addGroupSeparator, keepContentsMounted: item.keepContentsLoaded });
 }
@@ -199,6 +204,7 @@ function getItemWrapperClass(child) {
 }
 /** Component that displays tool settings as a bar across the top of the content view.
  * @public
+ * @deprecated in 4.0. Use [ToolbarWithOverflow]($appui-react) instead.
  */
 function ToolbarWithOverflow(props) {
     const expandsTo = props.expandsTo ? props.expandsTo : Direction_1.Direction.Bottom;
@@ -222,6 +228,7 @@ function ToolbarWithOverflow(props) {
             if (!isMounted.current)
                 return;
             setPopupPanelCount((prev) => {
+                /* istanbul ignore next */
                 const nextCount = isOpening ? (prev + 1) : (prev - 1);
                 // eslint-disable-next-line no-console
                 // console.log(`new popup count = ${nextCount}`);