@itwin/appui-react 4.0.0-dev.9 → 4.0.1

package/lib/cjs/appui-react/toolbar/GroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/GroupItem.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAGH,uEAAoE;AAIpE,+CAAsD;AACtD,sDAAmD;AAEnD,gFAAgF;AAChF,qBAAqB;AACrB,gFAAgF;AAEhF;;GAEG;AACH,MAAa,YAAa,SAAQ,yCAAmB;IAgBnD,YAAY,cAA8B,EAAE,cAAmC;QAC7E,KAAK,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QARxC,gBAAgB;QACT,aAAQ,GAAY,KAAK,CAAC;QAIzB,gBAAW,GAAmD,EAAE,CAAC;QAKvE,IAAI,CAAC,OAAO,GAAG,CAAC,cAAc,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF,IAAI,cAAc,CAAC,OAAO;YACxB,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;aACnC;YACH,YAAY,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC;SAC/D;QAED,IAAI,CAAC,aAAa,GAAG,CAAC,cAAc,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACrG,IAAI,CAAC,WAAW,GAAG,yBAAW,CAAC,aAAa,CAAC,cAAc,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;QACtG,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC;IAChE,CAAC;IAED,IAAW,EAAE;QACX,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gCAAgC;IAChC,IAAW,UAAU;QACnB,OAAO,yBAAW,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,CAAiD;QACpE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEM,YAAY,CAAC,KAAe;QACjC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK;YAC1B,OAAO;QAET,IAAI,CAAC,SAAS,GAAG,IAAI,kBAAQ,EAAE,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,iBAAO,EAAE,CAAC;QAE9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,EAAE;YAClC,MAAM,EAAE,GAAW,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,WAAW,CAAC,EAAU;QAC3B,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IAEM,cAAc,CAAC,KAAa;QACjC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IACrC,CAAC;IAEe,OAAO;IACvB,CAAC;;AA5EH,oCA6EC;AA5EgB,iBAAI,GAAG,CAAC,CAAC;AACV,0BAAa,GAAG,QAAQ,CAAC","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 Item\r\n */\r\n\r\nimport { ConditionalStringValue, OnItemExecutedFunc, StringGetter } from \"@itwin/appui-abstract\";\r\nimport { ActionButtonItemDef } from \"../shared/ActionButtonItemDef\";\r\nimport { AnyItemDef } from \"../shared/AnyItemDef\";\r\nimport { GroupItemProps } from \"../shared/GroupItemProps\";\r\nimport { ItemDefBase } from \"../shared/ItemDefBase\";\r\nimport { ItemList, ItemMap } from \"../shared/ItemMap\";\r\nimport { PropsHelper } from \"../utils/PropsHelper\";\r\n\r\n// -----------------------------------------------------------------------------\r\n// GroupItemDef class\r\n// -----------------------------------------------------------------------------\r\n\r\n/** An Item that opens a group of items.\r\n * @public\r\n */\r\nexport class GroupItemDef extends ActionButtonItemDef {\r\n  private static _sId = 0;\r\n  public static groupIdPrefix = \"Group-\";\r\n\r\n  public groupId: string;\r\n  public itemsInColumn: number;\r\n  public items: AnyItemDef[];\r\n  public defaultActiveItemId?: string;\r\n\r\n  /** @internal */\r\n  public overflow: boolean = false;\r\n\r\n  private _itemList!: ItemList;\r\n  private _itemMap!: ItemMap;\r\n  private _panelLabel: string | StringGetter | ConditionalStringValue = \"\";\r\n\r\n  constructor(groupItemProps: GroupItemProps, onItemExecuted?: OnItemExecutedFunc) {\r\n    super(groupItemProps, onItemExecuted);\r\n\r\n    this.groupId = (groupItemProps.groupId !== undefined) ? groupItemProps.groupId : \"\";\r\n    if (groupItemProps.groupId)\r\n      this.groupId = groupItemProps.groupId;\r\n    else {\r\n      GroupItemDef._sId++;\r\n      this.groupId = GroupItemDef.groupIdPrefix + GroupItemDef._sId;\r\n    }\r\n\r\n    this.itemsInColumn = (groupItemProps.itemsInColumn !== undefined) ? groupItemProps.itemsInColumn : 7;\r\n    this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.panelLabelKey);\r\n    this.items = groupItemProps.items;\r\n    this.defaultActiveItemId = groupItemProps.defaultActiveItemId;\r\n  }\r\n\r\n  public get id(): string {\r\n    return this.groupId;\r\n  }\r\n\r\n  /** Get the panelLabel string */\r\n  public get panelLabel(): string {\r\n    return PropsHelper.getStringFromSpec(this._panelLabel);\r\n  }\r\n\r\n  /** Set the panelLabel.\r\n   * @param v A string or a function to get the string.\r\n   */\r\n  public setPanelLabel(v: string | StringGetter | ConditionalStringValue) {\r\n    this._panelLabel = v;\r\n  }\r\n\r\n  public resolveItems(force?: boolean): void {\r\n    if (this._itemList && !force)\r\n      return;\r\n\r\n    this._itemList = new ItemList();\r\n    this._itemMap = new ItemMap();\r\n\r\n    this.items.map((item: AnyItemDef) => {\r\n      const id: string = item.id;\r\n      this._itemList.addItem(item);\r\n      this._itemMap.set(id, item);\r\n    });\r\n  }\r\n\r\n  public getItemById(id: string): ItemDefBase | undefined {\r\n    return this._itemMap.get(id);\r\n  }\r\n\r\n  public getItemByIndex(index: number): ItemDefBase | undefined {\r\n    return this._itemList.items[index];\r\n  }\r\n\r\n  public get itemCount(): number {\r\n    return this._itemList.items.length;\r\n  }\r\n\r\n  public override execute(): void {\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/GroupItem.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAGH,uEAAoE;AAIpE,+CAAsD;AACtD,sDAAmD;AAEnD,gFAAgF;AAChF,qBAAqB;AACrB,gFAAgF;AAEhF;;GAEG;AACH,MAAa,YAAa,SAAQ,yCAAmB;IAgBnD,YAAY,cAA8B,EAAE,cAAmC;QAC7E,KAAK,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QARxC,gBAAgB;QACT,aAAQ,GAAY,KAAK,CAAC;QAIzB,gBAAW,GAAmD,EAAE,CAAC;QAKvE,IAAI,CAAC,OAAO,GAAG,CAAC,cAAc,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF,IAAI,cAAc,CAAC,OAAO;YACxB,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;aACnC;YACH,YAAY,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC;SAC/D;QAED,IAAI,CAAC,aAAa,GAAG,CAAC,cAAc,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACrG,IAAI,CAAC,WAAW,GAAG,yBAAW,CAAC,aAAa,CAAC,cAAc,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;QACtG,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,mBAAmB,GAAG,cAAc,CAAC,mBAAmB,CAAC;IAChE,CAAC;IAED,IAAW,EAAE;QACX,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gCAAgC;IAChC,IAAW,UAAU;QACnB,OAAO,yBAAW,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,CAAiD;QACpE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEM,YAAY,CAAC,KAAe;QACjC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK;YAC1B,OAAO;QAET,IAAI,CAAC,SAAS,GAAG,IAAI,kBAAQ,EAAE,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,iBAAO,EAAE,CAAC;QAE9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,EAAE;YAClC,MAAM,EAAE,GAAW,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,WAAW,CAAC,EAAU;QAC3B,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IAEM,cAAc,CAAC,KAAa;QACjC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IACrC,CAAC;IAEe,OAAO;IACvB,CAAC;;AA3Ec,iBAAI,GAAG,CAAC,AAAJ,CAAK;AACV,0BAAa,GAAG,QAAQ,AAAX,CAAY;AAF5B,oCAAY","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 Item\n */\n\nimport { ConditionalStringValue, OnItemExecutedFunc, StringGetter } from \"@itwin/appui-abstract\";\nimport { ActionButtonItemDef } from \"../shared/ActionButtonItemDef\";\nimport { AnyItemDef } from \"../shared/AnyItemDef\";\nimport { GroupItemProps } from \"../shared/GroupItemProps\";\nimport { ItemDefBase } from \"../shared/ItemDefBase\";\nimport { ItemList, ItemMap } from \"../shared/ItemMap\";\nimport { PropsHelper } from \"../utils/PropsHelper\";\n\n// -----------------------------------------------------------------------------\n// GroupItemDef class\n// -----------------------------------------------------------------------------\n\n/** An Item that opens a group of items.\n * @public\n */\nexport class GroupItemDef extends ActionButtonItemDef {\n  private static _sId = 0;\n  public static groupIdPrefix = \"Group-\";\n\n  public groupId: string;\n  public itemsInColumn: number;\n  public items: AnyItemDef[];\n  public defaultActiveItemId?: string;\n\n  /** @internal */\n  public overflow: boolean = false;\n\n  private _itemList!: ItemList;\n  private _itemMap!: ItemMap;\n  private _panelLabel: string | StringGetter | ConditionalStringValue = \"\";\n\n  constructor(groupItemProps: GroupItemProps, onItemExecuted?: OnItemExecutedFunc) {\n    super(groupItemProps, onItemExecuted);\n\n    this.groupId = (groupItemProps.groupId !== undefined) ? groupItemProps.groupId : \"\";\n    if (groupItemProps.groupId)\n      this.groupId = groupItemProps.groupId;\n    else {\n      GroupItemDef._sId++;\n      this.groupId = GroupItemDef.groupIdPrefix + GroupItemDef._sId;\n    }\n\n    this.itemsInColumn = (groupItemProps.itemsInColumn !== undefined) ? groupItemProps.itemsInColumn : 7;\n    this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.panelLabelKey);\n    this.items = groupItemProps.items;\n    this.defaultActiveItemId = groupItemProps.defaultActiveItemId;\n  }\n\n  public get id(): string {\n    return this.groupId;\n  }\n\n  /** Get the panelLabel string */\n  public get panelLabel(): string {\n    return PropsHelper.getStringFromSpec(this._panelLabel);\n  }\n\n  /** Set the panelLabel.\n   * @param v A string or a function to get the string.\n   */\n  public setPanelLabel(v: string | StringGetter | ConditionalStringValue) {\n    this._panelLabel = v;\n  }\n\n  public resolveItems(force?: boolean): void {\n    if (this._itemList && !force)\n      return;\n\n    this._itemList = new ItemList();\n    this._itemMap = new ItemMap();\n\n    this.items.map((item: AnyItemDef) => {\n      const id: string = item.id;\n      this._itemList.addItem(item);\n      this._itemMap.set(id, item);\n    });\n  }\n\n  public getItemById(id: string): ItemDefBase | undefined {\n    return this._itemMap.get(id);\n  }\n\n  public getItemByIndex(index: number): ItemDefBase | undefined {\n    return this._itemList.items[index];\n  }\n\n  public get itemCount(): number {\n    return this._itemList.items.length;\n  }\n\n  public override execute(): void {\n  }\n}\n"]}

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

@@ -0,0 +1,32 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import * as React from "react";
+import { OnItemExecutedFunc } from "@itwin/appui-abstract";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction, ToolbarOpacitySetting, ToolbarPanelAlignment } from "@itwin/components-react";
+import { ToolbarItem } from "./ToolbarItem";
+/** Properties of [[Toolbar]] component.
+ * @beta
+ */
+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: ToolbarItem[];
+    /** Describes how expanded panels are aligned. Defaults to: [[ToolbarPanelAlignment.Start]] */
+    panelAlignment?: ToolbarPanelAlignment;
+    /** Use Drag Interaction to open popups with nest action buttons */
+    useDragInteraction?: boolean;
+    /** Determines whether to use mouse proximity to alter the opacity of the toolbar */
+    toolbarOpacitySetting?: ToolbarOpacitySetting;
+    /** Optional function to call on any item execution */
+    onItemExecuted?: OnItemExecutedFunc;
+    /** Optional function to call on any KeyDown events processed by toolbar */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+/** Component that displays toolbar items.
+ * @beta
+ */
+export declare function Toolbar(props: ToolbarProps): JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAyB,SAAS,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACzH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,eAAe;IAChE,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,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,OAAO,CAAC,KAAK,EAAE,YAAY,eAW1C"}

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

@@ -0,0 +1,26 @@
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+const React = require("react");
+const components_react_1 = require("@itwin/components-react");
+const toUIAToolbarItem_1 = require("./toUIAToolbarItem");
+/** Component that displays toolbar items.
+ * @beta
+ */
+function Toolbar(props) {
+    const { items, ...other } = props;
+    const uiaItems = React.useMemo(() => {
+        return items.map((item) => (0, toUIAToolbarItem_1.toUIAToolbarItem)(item));
+    }, [items]);
+    return (React.createElement(components_react_1.Toolbar // eslint-disable-line deprecation/deprecation
+    , { items: uiaItems, ...other }));
+}
+exports.Toolbar = Toolbar;
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAG/B,8DAAyH;AAEzH,yDAAsD;AAsBtD;;GAEG;AACH,SAAgB,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,mCAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,CACL,oBAAC,0BAAU,CAAC,8CAA8C;QACxD,KAAK,EAAE,QAAQ,KACX,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAXD,0BAWC","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 * as React from \"react\";\nimport { OnItemExecutedFunc } from \"@itwin/appui-abstract\";\nimport { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport { Toolbar as CR_Toolbar, Direction, ToolbarOpacitySetting, ToolbarPanelAlignment } from \"@itwin/components-react\";\nimport { ToolbarItem } from \"./ToolbarItem\";\nimport { toUIAToolbarItem } from \"./toUIAToolbarItem\";\n\n/** Properties of [[Toolbar]] component.\n * @beta\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: ToolbarItem[];\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\n/** Component that displays toolbar items.\n * @beta\n */\nexport function Toolbar(props: ToolbarProps) {\n  const { items, ...other } = props;\n  const uiaItems = React.useMemo(() => {\n    return items.map((item) => toUIAToolbarItem(item));\n  }, [items]);\n  return (\n    <CR_Toolbar // eslint-disable-line deprecation/deprecation\n      items={uiaItems}\n      {...other}\n    />\n  );\n}\n"]}

package/lib/cjs/appui-react/toolbar/ToolbarComposer.d.ts

@@ -1,21 +1,20 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-/// <reference types="react" />
-import { CommonToolbarItem } from "@itwin/appui-abstract";
-import { ToolbarOrientation, ToolbarUsage } from "./ToolbarItem";
-/** Properties for the [[ToolbarComposer]] React components
- * @public
- */
-export interface ExtensibleToolbarProps {
-    items: CommonToolbarItem[];
-    usage: ToolbarUsage;
-    /** Toolbar orientation. */
-    orientation: ToolbarOrientation;
-}
-/**
- * Toolbar that is populated and maintained by item managers.
- * @public
- */
-export declare function ToolbarComposer(props: ExtensibleToolbarProps): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+/// <reference types="react" />
+import { ToolbarItem, ToolbarOrientation, ToolbarUsage } from "./ToolbarItem";
+/** Properties for the [[ToolbarComposer]] React components
+ * @public
+ */
+export interface ExtensibleToolbarProps {
+    items: ToolbarItem[];
+    usage: ToolbarUsage;
+    /** Toolbar orientation. */
+    orientation: ToolbarOrientation;
+}
+/**
+ * Toolbar that is populated and maintained by item managers.
+ * @public
+ */
+export declare function ToolbarComposer(props: ExtensibleToolbarProps): JSX.Element;
 //# sourceMappingURL=ToolbarComposer.d.ts.map

package/lib/cjs/appui-react/toolbar/ToolbarComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EACS,iBAAiB,EAChC,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AA8MjE;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,eAkC5D"}
+{"version":3,"file":"ToolbarComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/toolbar/ToolbarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAYH,OAAO,EAAgF,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqM5J;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,eAoC5D"}

package/lib/cjs/appui-react/toolbar/ToolbarComposer.js

@@ -1,225 +1,221 @@
-"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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarComposer = void 0;
-const React = require("react");
-const core_bentley_1 = require("@itwin/core-bentley");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const components_react_1 = require("@itwin/components-react");
-const SyncUiEventDispatcher_1 = require("../syncui/SyncUiEventDispatcher");
-const UiFramework_1 = require("../UiFramework");
-const DragInteraction_1 = require("./DragInteraction");
-const useDefaultToolbarItems_1 = require("./useDefaultToolbarItems");
-const useUiItemsProviderToolbarItems_1 = require("./useUiItemsProviderToolbarItems");
-const ToolbarItem_1 = require("./ToolbarItem");
-/** Private function to set up sync event monitoring of toolbar items */
-function useToolbarItemSyncEffect(uiDataProvider, syncIdsOfInterest) {
-    React.useEffect(() => {
-        const handleSyncUiEvent = (args) => {
-            if (0 === syncIdsOfInterest.length)
-                return;
-            // istanbul ignore else
-            if (syncIdsOfInterest.some((value) => args.eventIds.has(value.toLowerCase()))) {
-                // process each item that has interest
-                uiDataProvider.refreshAffectedItems(args.eventIds);
-            }
-        };
-        SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
-        return () => {
-            SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.removeListener(handleSyncUiEvent);
-        };
-    }, [uiDataProvider, syncIdsOfInterest, uiDataProvider.items]);
-    React.useEffect(() => {
-        const handleToolActivatedEvent = ({ toolId }) => {
-            uiDataProvider.setActiveToolId(toolId);
-        };
-        UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
-        return () => {
-            UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
-        };
-    }, [uiDataProvider, uiDataProvider.items]);
-}
-function nestedAddItemToSpecifiedParentGroup(items, groupChildren) {
-    const outItems = [];
-    for (const toolbarItem of items) {
-        if (!appui_abstract_1.ToolbarItemUtilities.isGroupButton(toolbarItem)) {
-            outItems.push(toolbarItem);
-            continue;
-        }
-        const newChildren = nestedAddItemToSpecifiedParentGroup(toolbarItem.items, groupChildren);
-        const foundIndices = [];
-        groupChildren.forEach((entry, index) => {
-            if (entry.parentToolGroupId === toolbarItem.id) {
-                foundIndices.push(index);
-            }
-        });
-        // istanbul ignore else
-        if (foundIndices.length) {
-            // process in reverse order so groupChildren can be reduced as we find matches
-            foundIndices.sort(
-            // istanbul ignore next
-            (a, b) => a - b).reverse().forEach((foundIndex) => {
-                newChildren.push(groupChildren[foundIndex]);
-                groupChildren.splice(foundIndex);
-            });
-        }
-        outItems.push({ ...toolbarItem, items: newChildren });
-    }
-    return outItems;
-}
-function addItemToSpecifiedParentGroup(items, groupChildren) {
-    const outItems = [];
-    for (const toolbarItem of items) {
-        if (!appui_abstract_1.ToolbarItemUtilities.isGroupButton(toolbarItem)) {
-            outItems.push(toolbarItem);
-            continue;
-        }
-        const newChildren = nestedAddItemToSpecifiedParentGroup(toolbarItem.items, groupChildren);
-        const foundIndices = [];
-        groupChildren.forEach((entry, index) => {
-            if (entry.parentToolGroupId === toolbarItem.id) {
-                foundIndices.push(index);
-            }
-        });
-        // istanbul ignore else
-        if (foundIndices.length) {
-            // process in reverse order so groupChildren can be reduced as we find matches
-            foundIndices.sort(
-            // istanbul ignore next
-            (a, b) => a - b).reverse().forEach((foundIndex) => {
-                newChildren.push(groupChildren[foundIndex]);
-                groupChildren.splice(foundIndex);
-            });
-        }
-        outItems.push({ ...toolbarItem, items: newChildren });
-    }
-    return outItems;
-}
-function cloneGroup(inGroup) {
-    const childItems = [];
-    inGroup.items.forEach((item) => {
-        if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(item))
-            childItems.push(cloneGroup(item));
-        else
-            childItems.push(item);
-    });
-    const clonedGroup = { ...inGroup, items: childItems };
-    return clonedGroup;
-}
-function getItemSortValue(item) {
-    const groupValue = undefined === item.groupPriority ? 0 : /* istanbul ignore next */ item.groupPriority;
-    return groupValue * 10000 + item.itemPriority;
-}
-function getSortedChildren(group) {
-    const sortedChildren = group.items
-        .filter((item) => !(appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden)))
-        .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))
-        .map((i) => {
-        if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(i)) {
-            return { ...i, items: getSortedChildren(i) };
-        }
-        return i;
-    });
-    return sortedChildren;
-}
-/** local function to combine items from Stage and from Extensions */
-function combineItems(defaultItems, addonItems) {
-    let items = [];
-    const groupChildren = [];
-    // istanbul ignore else
-    if (defaultItems.length) {
-        defaultItems.forEach((srcItem) => {
-            if (-1 === items.findIndex((item) => item.id === srcItem.id)) {
-                // if the default item is a group that an addon may insert into copy it so we don't mess with original
-                const toolbarItem = appui_abstract_1.ToolbarItemUtilities.isGroupButton(srcItem) ? cloneGroup(srcItem) : srcItem;
-                if (toolbarItem.parentToolGroupId && (appui_abstract_1.ToolbarItemUtilities.isGroupButton(toolbarItem) || appui_abstract_1.ToolbarItemUtilities.isActionButton(toolbarItem)))
-                    groupChildren.push(toolbarItem);
-                else
-                    items.push(toolbarItem);
-            }
-        });
-    }
-    // istanbul ignore else
-    if (addonItems.length) {
-        addonItems.forEach((srcItem) => {
-            if (-1 === items.findIndex((item) => item.id === srcItem.id)) {
-                // if the default item is a group that an addon may insert into copy it so we don't mess with original
-                const toolbarItem = appui_abstract_1.ToolbarItemUtilities.isGroupButton(srcItem) ? cloneGroup(srcItem) : srcItem;
-                if (toolbarItem.parentToolGroupId && (appui_abstract_1.ToolbarItemUtilities.isGroupButton(toolbarItem) || appui_abstract_1.ToolbarItemUtilities.isActionButton(toolbarItem)))
-                    groupChildren.push(toolbarItem);
-                else
-                    items.push(toolbarItem);
-            }
-        });
-    }
-    // if an item from an addon has specified a parent group then try to find it and insert it.  If no parent is found, add item at root level.
-    if (groupChildren.length) {
-        items = addItemToSpecifiedParentGroup(items, groupChildren);
-        if (groupChildren.length) {
-            groupChildren.forEach((toolbarItem) => {
-                core_bentley_1.Logger.logWarning("ToolbarComposer", `Requested Parent Group [${toolbarItem.parentToolGroupId}] not found, so item [${toolbarItem.id}] is added directly to toolbar.`);
-                items.push(toolbarItem);
-            });
-        }
-    }
-    const availableItems = items
-        .filter((item) => !(appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden)))
-        .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))
-        .map((i) => {
-        if (appui_abstract_1.ToolbarItemUtilities.isGroupButton(i)) {
-            return { ...i, items: getSortedChildren(i) };
-        }
-        return i;
-    });
-    return availableItems;
-}
-const useProximityOpacitySetting = () => {
-    const [proximityOpacity, setProximityOpacity] = React.useState(UiFramework_1.UiFramework.visibility.useProximityOpacity);
-    React.useEffect(() => {
-        // istanbul ignore next
-        const handleUiVisibilityChanged = () => {
-            setProximityOpacity(UiFramework_1.UiFramework.visibility.useProximityOpacity);
-        };
-        UiFramework_1.UiFramework.onUiVisibilityChanged.addListener(handleUiVisibilityChanged);
-        return () => {
-            UiFramework_1.UiFramework.onUiVisibilityChanged.removeListener(handleUiVisibilityChanged);
-        };
-    }, []);
-    return proximityOpacity;
-};
-/**
- * Toolbar that is populated and maintained by item managers.
- * @public
- */
-function ToolbarComposer(props) {
-    const { usage, orientation } = props;
-    const [defaultItemsManager, setDefaultItemsManager] = React.useState(() => new appui_abstract_1.ToolbarItemsManager(props.items));
-    React.useEffect(() => {
-        setDefaultItemsManager(new appui_abstract_1.ToolbarItemsManager(props.items));
-    }, [props.items]); // eslint-disable-line react-hooks/exhaustive-deps
-    // process default items
-    const defaultItems = (0, useDefaultToolbarItems_1.useDefaultToolbarItems)(defaultItemsManager);
-    const syncIdsOfInterest = React.useMemo(() => appui_abstract_1.ToolbarItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);
-    useToolbarItemSyncEffect(defaultItemsManager, syncIdsOfInterest);
-    // process items from addon UI providers
-    const [addonItemsManager] = React.useState(() => new appui_abstract_1.ToolbarItemsManager());
-    const addonItems = (0, useUiItemsProviderToolbarItems_1.useUiItemsProviderToolbarItems)(addonItemsManager, usage, orientation);
-    const addonSyncIdsOfInterest = React.useMemo(() => appui_abstract_1.ToolbarItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
-    useToolbarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
-    const toolbarItems = React.useMemo(() => combineItems(defaultItems, addonItems), [defaultItems, addonItems]);
-    const toolbarOrientation = orientation === ToolbarItem_1.ToolbarOrientation.Horizontal ? core_react_1.Orientation.Horizontal : core_react_1.Orientation.Vertical;
-    const expandsTo = toolbarOrientation === core_react_1.Orientation.Horizontal ? components_react_1.Direction.Bottom : usage === ToolbarItem_1.ToolbarUsage.ViewNavigation ? components_react_1.Direction.Left : components_react_1.Direction.Right;
-    const panelAlignment = (toolbarOrientation === core_react_1.Orientation.Horizontal && usage === ToolbarItem_1.ToolbarUsage.ViewNavigation) ? components_react_1.ToolbarPanelAlignment.End : components_react_1.ToolbarPanelAlignment.Start;
-    const isDragEnabled = React.useContext(DragInteraction_1.ToolbarDragInteractionContext);
-    const useProximityOpacity = useProximityOpacitySetting();
-    return React.createElement(components_react_1.ToolbarWithOverflow, { expandsTo: expandsTo, panelAlignment: panelAlignment, items: toolbarItems, useDragInteraction: isDragEnabled, toolbarOpacitySetting: useProximityOpacity && !UiFramework_1.UiFramework.isMobile() ? components_react_1.ToolbarOpacitySetting.Proximity : /* istanbul ignore next */ components_react_1.ToolbarOpacitySetting.Defaults });
-}
-exports.ToolbarComposer = ToolbarComposer;
+"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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarComposer = void 0;
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const components_react_1 = require("@itwin/components-react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const SyncUiEventDispatcher_1 = require("../syncui/SyncUiEventDispatcher");
+const UiFramework_1 = require("../UiFramework");
+const DragInteraction_1 = require("./DragInteraction");
+const useDefaultToolbarItems_1 = require("./useDefaultToolbarItems");
+const useUiItemsProviderToolbarItems_1 = require("./useUiItemsProviderToolbarItems");
+const ToolbarItem_1 = require("./ToolbarItem");
+const ToolbarItemsManager_1 = require("./ToolbarItemsManager");
+const ToolbarWithOverflow_1 = require("./ToolbarWithOverflow");
+/** Private function to set up sync event monitoring of toolbar items */
+function useToolbarItemSyncEffect(uiDataProvider, syncIdsOfInterest) {
+    React.useEffect(() => {
+        return SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {
+            if (0 === syncIdsOfInterest.length)
+                return;
+            // istanbul ignore else
+            if (syncIdsOfInterest.some((value) => args.eventIds.has(value.toLowerCase()))) {
+                // process each item that has interest
+                uiDataProvider.refreshAffectedItems(args.eventIds);
+            }
+        });
+    }, [uiDataProvider, syncIdsOfInterest, uiDataProvider.items]);
+    React.useEffect(() => {
+        return UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(({ toolId }) => {
+            uiDataProvider.setActiveToolId(toolId);
+        });
+    }, [uiDataProvider, uiDataProvider.items]);
+}
+function nestedAddItemToSpecifiedParentGroup(items, groupChildren) {
+    const outItems = [];
+    for (const toolbarItem of items) {
+        if (!(0, ToolbarItem_1.isToolbarGroupItem)(toolbarItem)) {
+            outItems.push(toolbarItem);
+            continue;
+        }
+        const newChildren = nestedAddItemToSpecifiedParentGroup(toolbarItem.items, groupChildren);
+        const foundIndices = [];
+        groupChildren.forEach((entry, index) => {
+            if (entry.parentGroupItemId === toolbarItem.id) {
+                foundIndices.push(index);
+            }
+        });
+        // istanbul ignore else
+        if (foundIndices.length) {
+            // process in reverse order so groupChildren can be reduced as we find matches
+            foundIndices.sort(
+            // istanbul ignore next
+            (a, b) => a - b).reverse().forEach((foundIndex) => {
+                newChildren.push(groupChildren[foundIndex]);
+                groupChildren.splice(foundIndex);
+            });
+        }
+        outItems.push({ ...toolbarItem, items: newChildren });
+    }
+    return outItems;
+}
+function addItemToSpecifiedParentGroup(items, groupChildren) {
+    const outItems = [];
+    for (const toolbarItem of items) {
+        if (!(0, ToolbarItem_1.isToolbarGroupItem)(toolbarItem)) {
+            outItems.push(toolbarItem);
+            continue;
+        }
+        const newChildren = nestedAddItemToSpecifiedParentGroup(toolbarItem.items, groupChildren);
+        const foundIndices = [];
+        groupChildren.forEach((entry, index) => {
+            if (entry.parentGroupItemId === toolbarItem.id) {
+                foundIndices.push(index);
+            }
+        });
+        // istanbul ignore else
+        if (foundIndices.length) {
+            // process in reverse order so groupChildren can be reduced as we find matches
+            foundIndices.sort(
+            // istanbul ignore next
+            (a, b) => a - b).reverse().forEach((foundIndex) => {
+                newChildren.push(groupChildren[foundIndex]);
+                groupChildren.splice(foundIndex);
+            });
+        }
+        outItems.push({ ...toolbarItem, items: newChildren });
+    }
+    return outItems;
+}
+function cloneGroup(inGroup) {
+    const childItems = [];
+    inGroup.items.forEach((item) => {
+        if ((0, ToolbarItem_1.isToolbarGroupItem)(item))
+            childItems.push(cloneGroup(item));
+        else
+            childItems.push(item);
+    });
+    const clonedGroup = { ...inGroup, items: childItems };
+    return clonedGroup;
+}
+function getItemSortValue(item) {
+    const groupValue = undefined === item.groupPriority ? 0 : /* istanbul ignore next */ item.groupPriority;
+    return groupValue * 10000 + item.itemPriority;
+}
+function getSortedChildren(group) {
+    const sortedChildren = group.items
+        .filter((item) => !(appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden)))
+        .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))
+        .map((i) => {
+        if ((0, ToolbarItem_1.isToolbarGroupItem)(i)) {
+            return { ...i, items: getSortedChildren(i) };
+        }
+        return i;
+    });
+    return sortedChildren;
+}
+/** local function to combine items from Stage and from Extensions */
+function combineItems(defaultItems, addonItems) {
+    let items = [];
+    const groupChildren = [];
+    // istanbul ignore else
+    if (defaultItems.length) {
+        defaultItems.forEach((srcItem) => {
+            if (-1 === items.findIndex((item) => item.id === srcItem.id)) {
+                // if the default item is a group that an addon may insert into copy it so we don't mess with original
+                const toolbarItem = (0, ToolbarItem_1.isToolbarGroupItem)(srcItem) ? cloneGroup(srcItem) : srcItem;
+                if (((0, ToolbarItem_1.isToolbarGroupItem)(toolbarItem) || (0, ToolbarItem_1.isToolbarActionItem)(toolbarItem)) && toolbarItem.parentGroupItemId)
+                    groupChildren.push(toolbarItem);
+                else
+                    items.push(toolbarItem);
+            }
+        });
+    }
+    // istanbul ignore else
+    if (addonItems.length) {
+        addonItems.forEach((srcItem) => {
+            if (-1 === items.findIndex((item) => item.id === srcItem.id)) {
+                // if the default item is a group that an addon may insert into copy it so we don't mess with original
+                const toolbarItem = (0, ToolbarItem_1.isToolbarGroupItem)(srcItem) ? cloneGroup(srcItem) : srcItem;
+                if (((0, ToolbarItem_1.isToolbarGroupItem)(toolbarItem) || (0, ToolbarItem_1.isToolbarActionItem)(toolbarItem)) && toolbarItem.parentGroupItemId)
+                    groupChildren.push(toolbarItem);
+                else
+                    items.push(toolbarItem);
+            }
+        });
+    }
+    // if an item from an addon has specified a parent group then try to find it and insert it.  If no parent is found, add item at root level.
+    if (groupChildren.length) {
+        items = addItemToSpecifiedParentGroup(items, groupChildren);
+        if (groupChildren.length) {
+            groupChildren.forEach((toolbarItem) => {
+                core_bentley_1.Logger.logWarning("ToolbarComposer", `Requested Parent Group [${toolbarItem.parentGroupItemId}] not found, so item [${toolbarItem.id}] is added directly to toolbar.`);
+                items.push(toolbarItem);
+            });
+        }
+    }
+    const availableItems = items
+        .filter((item) => !(appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden)))
+        .sort((a, b) => getItemSortValue(a) - getItemSortValue(b))
+        .map((i) => {
+        if ((0, ToolbarItem_1.isToolbarGroupItem)(i)) {
+            return { ...i, items: getSortedChildren(i) };
+        }
+        return i;
+    });
+    return availableItems;
+}
+const useProximityOpacitySetting = () => {
+    const [proximityOpacity, setProximityOpacity] = React.useState(UiFramework_1.UiFramework.visibility.useProximityOpacity);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const handleUiVisibilityChanged = () => {
+            setProximityOpacity(UiFramework_1.UiFramework.visibility.useProximityOpacity);
+        };
+        UiFramework_1.UiFramework.onUiVisibilityChanged.addListener(handleUiVisibilityChanged);
+        return () => {
+            UiFramework_1.UiFramework.onUiVisibilityChanged.removeListener(handleUiVisibilityChanged);
+        };
+    }, []);
+    return proximityOpacity;
+};
+/**
+ * Toolbar that is populated and maintained by item managers.
+ * @public
+ */
+function ToolbarComposer(props) {
+    const { usage, orientation } = props;
+    const [defaultItemsManager, setDefaultItemsManager] = React.useState(() => new ToolbarItemsManager_1.ToolbarItemsManager(props.items));
+    React.useEffect(() => {
+        setDefaultItemsManager(new ToolbarItemsManager_1.ToolbarItemsManager(props.items));
+    }, [props.items]); // eslint-disable-line react-hooks/exhaustive-deps
+    // process default items
+    const defaultItems = (0, useDefaultToolbarItems_1.useDefaultToolbarItems)(defaultItemsManager);
+    const syncIdsOfInterest = React.useMemo(() => ToolbarItemsManager_1.ToolbarItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);
+    useToolbarItemSyncEffect(defaultItemsManager, syncIdsOfInterest);
+    // process items from addon UI providers
+    const [addonItemsManager] = React.useState(() => new ToolbarItemsManager_1.ToolbarItemsManager());
+    const addonItems = (0, useUiItemsProviderToolbarItems_1.useUiItemsProviderToolbarItems)(addonItemsManager, usage, orientation);
+    const addonSyncIdsOfInterest = React.useMemo(() => ToolbarItemsManager_1.ToolbarItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
+    useToolbarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
+    const items = React.useMemo(() => {
+        return combineItems(defaultItems, addonItems);
+    }, [defaultItems, addonItems]);
+    const toolbarOrientation = orientation === ToolbarItem_1.ToolbarOrientation.Horizontal ? core_react_1.Orientation.Horizontal : core_react_1.Orientation.Vertical;
+    const expandsTo = toolbarOrientation === core_react_1.Orientation.Horizontal ? components_react_1.Direction.Bottom : usage === ToolbarItem_1.ToolbarUsage.ViewNavigation ? components_react_1.Direction.Left : components_react_1.Direction.Right;
+    const panelAlignment = (toolbarOrientation === core_react_1.Orientation.Horizontal && usage === ToolbarItem_1.ToolbarUsage.ViewNavigation) ? components_react_1.ToolbarPanelAlignment.End : components_react_1.ToolbarPanelAlignment.Start;
+    const isDragEnabled = React.useContext(DragInteraction_1.ToolbarDragInteractionContext);
+    const useProximityOpacity = useProximityOpacitySetting();
+    return React.createElement(ToolbarWithOverflow_1.ToolbarWithOverflow, { expandsTo: expandsTo, panelAlignment: panelAlignment, items: items, useDragInteraction: isDragEnabled, toolbarOpacitySetting: useProximityOpacity && !UiFramework_1.UiFramework.isMobile() ? components_react_1.ToolbarOpacitySetting.Proximity : /* istanbul ignore next */ components_react_1.ToolbarOpacitySetting.Defaults });
+}
+exports.ToolbarComposer = ToolbarComposer;
 //# sourceMappingURL=ToolbarComposer.js.map