@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/widget-panels/ToolSettings.js

@@ -0,0 +1,143 @@
+"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 ToolSettings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolSettingsWidgetContent = exports.ToolSettingsContent = exports.useToolSettingsNode = exports.ToolSettingsGrid = exports.useHorizontalToolSettingNodes = exports.ToolSettingsDockedContent = exports.WidgetPanelsToolSettings = void 0;
+require("./ToolSettings.scss");
+const React = require("react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const Frontstage_1 = require("../frontstage/Frontstage");
+const FrontstageManager_1 = require("../frontstage/FrontstageManager");
+/** @internal */
+// istanbul ignore next - need to work on overflow unit testing
+function TsLabel({ children }) {
+    return React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal" }, children);
+}
+/** @internal */
+function WidgetPanelsToolSettings() {
+    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
+    const toolSettings = React.useContext(appui_layout_react_1.ToolSettingsStateContext);
+    const topCenterZone = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.topCenter;
+    if (!topCenterZone || !topCenterZone.isToolSettings || toolSettings.type === "widget")
+        return null;
+    return (React.createElement(ToolSettingsDockedContent, null));
+}
+exports.WidgetPanelsToolSettings = WidgetPanelsToolSettings;
+/** @internal */
+function ToolSettingsDockedContent() {
+    var _a, _b;
+    const settings = useHorizontalToolSettingNodes();
+    // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component
+    return (React.createElement(appui_layout_react_1.DockedToolSettings, { itemId: (_b = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.uniqueId) !== null && _b !== void 0 ? _b : "none", key: Date.now() }, settings && settings.map((entry, index) => React.createElement(appui_layout_react_1.DockedToolSetting, { key: index },
+        React.createElement(TsLabel, null, entry.labelNode),
+        entry.editorNode))));
+}
+exports.ToolSettingsDockedContent = ToolSettingsDockedContent;
+/** @internal */
+function useHorizontalToolSettingNodes() {
+    var _a;
+    const [settings, setSettings] = React.useState((_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes);
+    React.useEffect(() => {
+        const handleToolActivatedEvent = () => {
+            var _a;
+            const nodes = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
+            setSettings(nodes);
+        };
+        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(handleToolActivatedEvent);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
+        };
+    }, [setSettings]);
+    React.useEffect(() => {
+        const handleToolSettingsReloadEvent = () => {
+            var _a;
+            const nodes = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
+            setSettings(nodes);
+        };
+        FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
+        };
+    }, [setSettings]);
+    return settings;
+}
+exports.useHorizontalToolSettingNodes = useHorizontalToolSettingNodes;
+/** Component that arranges an array of ToolSettingsEntry items into a two column grid layout.
+ * The left column is considered the label column, the right column is considered the property
+ * editor column.
+ * @internal
+ */
+function ToolSettingsGrid({ settings }) {
+    return (React.createElement("div", { className: "uifw-standard-toolsettings-two-column-grid" }, settings && settings.map((setting, index) => {
+        return (React.createElement(React.Fragment, { key: index },
+            React.createElement("span", { className: "uifw-standard-toolsettings-label-entry" }, setting.labelNode),
+            setting.editorNode));
+    })));
+}
+exports.ToolSettingsGrid = ToolSettingsGrid;
+/** @internal */
+function useToolSettingsNode() {
+    var _a;
+    const [settings, setSettings] = React.useState((_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode);
+    React.useEffect(() => {
+        const handleToolActivatedEvent = () => {
+            var _a;
+            const nodes = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
+            setSettings(nodes);
+        };
+        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(handleToolActivatedEvent);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
+        };
+    }, [setSettings]);
+    React.useEffect(() => {
+        const handleToolSettingsReloadEvent = () => {
+            var _a;
+            const nodes = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
+            setSettings(nodes);
+        };
+        FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
+        };
+    }, [setSettings]);
+    return settings;
+}
+exports.useToolSettingsNode = useToolSettingsNode;
+/** @internal */
+function ToolSettingsContent() {
+    const toolSettings = React.useContext(appui_layout_react_1.ToolSettingsStateContext);
+    // This is needed to remount underlying components tree when going into widget state.
+    if (toolSettings.type === "docked")
+        return null;
+    return React.createElement(ToolSettingsWidgetContent, null);
+}
+exports.ToolSettingsContent = ToolSettingsContent;
+/** @internal */
+function ToolSettingsWidgetContent() {
+    var _a, _b;
+    const floatingToolSettingsContainerRef = React.useRef(null);
+    const node = useToolSettingsNode();
+    // if no tool settings hide the floating widgets tab
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (floatingToolSettingsContainerRef.current) {
+            const floatingWidgetTab = floatingToolSettingsContainerRef.current.closest(".nz-floating-toolsettings");
+            // istanbul ignore else
+            if (floatingWidgetTab) {
+                floatingWidgetTab.style.visibility = !!node ? "visible" : /* istanbul ignore next */ "hidden";
+            }
+        }
+    }, [node]);
+    // istanbul ignore next
+    const providerId = (_b = (_a = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.uniqueId) !== null && _b !== void 0 ? _b : "none";
+    return (React.createElement("div", { "data-toolsettings-provider": providerId, className: "uifw-floating-toolsettings-container", ref: floatingToolSettingsContainerRef },
+        React.createElement(appui_layout_react_1.ScrollableWidgetContent, null, node)));
+}
+exports.ToolSettingsWidgetContent = ToolSettingsWidgetContent;
+//# sourceMappingURL=ToolSettings.js.map

package/lib/cjs/appui-react/widget-panels/ToolSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolSettings.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/ToolSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ToolSettings\r\n */\r\n\r\nimport \"./ToolSettings.scss\";\r\nimport * as React from \"react\";\r\nimport { DockedToolSetting, DockedToolSettings, ScrollableWidgetContent, ToolSettingsStateContext } from \"@itwin/appui-layout-react\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/Frontstage\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\n\r\n/** Defines a ToolSettings property entry.\r\n * @public\r\n */\r\nexport interface ToolSettingsEntry {\r\n  // label node which potentially can contain a lock node as well.\r\n  labelNode: React.ReactNode;\r\n  // editor entry used to display and edit the property value\r\n  editorNode: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\n// istanbul ignore next - need to work on overflow unit testing\r\nfunction TsLabel({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"uif-toolsetting-label-docked-horizontal\">{children}</div>;\r\n}\r\n\r\n/** @internal */\r\nexport function WidgetPanelsToolSettings() {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const toolSettings = React.useContext(ToolSettingsStateContext);\r\n  const topCenterZone = frontstageDef?.topCenter;\r\n  if (!topCenterZone || !topCenterZone.isToolSettings || toolSettings.type === \"widget\")\r\n    return null;\r\n  return (\r\n    <ToolSettingsDockedContent />\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function ToolSettingsDockedContent() {\r\n  const settings = useHorizontalToolSettingNodes();\r\n  // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component\r\n  return (\r\n    <DockedToolSettings itemId={FrontstageManager.activeToolSettingsProvider?.uniqueId ?? \"none\"} key={Date.now()}>\r\n      {settings && settings.map((entry, index) => <DockedToolSetting key={index}><TsLabel>{entry.labelNode}</TsLabel>{entry.editorNode}</DockedToolSetting>)}\r\n    </DockedToolSettings>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function useHorizontalToolSettingNodes() {\r\n  const [settings, setSettings] = React.useState(FrontstageManager.activeToolSettingsProvider?.horizontalToolSettingNodes);\r\n\r\n  React.useEffect(() => {\r\n    const handleToolActivatedEvent = () => {\r\n      const nodes = FrontstageManager.activeToolSettingsProvider?.horizontalToolSettingNodes;\r\n      setSettings(nodes);\r\n    };\r\n    FrontstageManager.onToolActivatedEvent.addListener(handleToolActivatedEvent);\r\n    return () => {\r\n      FrontstageManager.onToolActivatedEvent.removeListener(handleToolActivatedEvent);\r\n    };\r\n  }, [setSettings]);\r\n\r\n  React.useEffect(() => {\r\n    const handleToolSettingsReloadEvent = () => {\r\n      const nodes = FrontstageManager.activeToolSettingsProvider?.horizontalToolSettingNodes;\r\n      setSettings(nodes);\r\n    };\r\n    FrontstageManager.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);\r\n    return () => {\r\n      FrontstageManager.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);\r\n    };\r\n  }, [setSettings]);\r\n\r\n  return settings;\r\n}\r\n\r\n/** Defines the ToolSettingsEntry entries that are used to populate a grid layout of ToolSetting properties.\r\n * Used only when the \"Use UI 2.0\" setting is true\r\n * @internal\r\n */\r\nexport interface ToolSettingsGridProps {\r\n  // label node which potentially can contain a lock node as well.\r\n  settings?: ToolSettingsEntry[];\r\n}\r\n\r\n/** Component that arranges an array of ToolSettingsEntry items into a two column grid layout.\r\n * The left column is considered the label column, the right column is considered the property\r\n * editor column.\r\n * @internal\r\n */\r\nexport function ToolSettingsGrid({ settings }: ToolSettingsGridProps) {\r\n  return (\r\n    <div className=\"uifw-standard-toolsettings-two-column-grid\">\r\n      {settings && settings.map((setting: ToolSettingsEntry, index: number) => {\r\n        return (\r\n          <React.Fragment key={index}>\r\n            <span className=\"uifw-standard-toolsettings-label-entry\">{setting.labelNode}</span>\r\n            {setting.editorNode}\r\n          </React.Fragment>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @internal */\r\nexport function useToolSettingsNode() {\r\n  const [settings, setSettings] = React.useState(FrontstageManager.activeToolSettingsProvider?.toolSettingsNode);\r\n  React.useEffect(() => {\r\n    const handleToolActivatedEvent = () => {\r\n      const nodes = FrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\r\n      setSettings(nodes);\r\n    };\r\n    FrontstageManager.onToolActivatedEvent.addListener(handleToolActivatedEvent);\r\n    return () => {\r\n      FrontstageManager.onToolActivatedEvent.removeListener(handleToolActivatedEvent);\r\n    };\r\n  }, [setSettings]);\r\n\r\n  React.useEffect(() => {\r\n    const handleToolSettingsReloadEvent = () => {\r\n      const nodes = FrontstageManager.activeToolSettingsProvider?.toolSettingsNode;\r\n      setSettings(nodes);\r\n    };\r\n    FrontstageManager.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);\r\n    return () => {\r\n      FrontstageManager.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);\r\n    };\r\n  }, [setSettings]);\r\n\r\n  return settings;\r\n}\r\n\r\n/** @internal */\r\nexport function ToolSettingsContent() {\r\n  const toolSettings = React.useContext(ToolSettingsStateContext);\r\n  // This is needed to remount underlying components tree when going into widget state.\r\n  if (toolSettings.type === \"docked\")\r\n    return null;\r\n  return <ToolSettingsWidgetContent />;\r\n}\r\n\r\n/** @internal */\r\nexport function ToolSettingsWidgetContent() {\r\n  const floatingToolSettingsContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const node = useToolSettingsNode();\r\n  // if no tool settings hide the floating widgets tab\r\n  React.useEffect(() => {\r\n    // istanbul ignore else\r\n    if (floatingToolSettingsContainerRef.current) {\r\n      const floatingWidgetTab = floatingToolSettingsContainerRef.current.closest(\".nz-floating-toolsettings\");\r\n      // istanbul ignore else\r\n      if (floatingWidgetTab) {\r\n        (floatingWidgetTab as HTMLDivElement).style.visibility = !!node ? \"visible\" : /* istanbul ignore next */ \"hidden\";\r\n      }\r\n    }\r\n  }, [node]);\r\n\r\n  // istanbul ignore next\r\n  const providerId = FrontstageManager.activeToolSettingsProvider?.uniqueId ?? \"none\";\r\n\r\n  return (\r\n    <div data-toolsettings-provider={providerId} className=\"uifw-floating-toolsettings-container\" ref={floatingToolSettingsContainerRef} >\r\n      <ScrollableWidgetContent>\r\n        {node}\r\n      </ScrollableWidgetContent>\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/widget-panels/ToolSettings.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uif-toolsetting-label-docked-horizontal {
+  padding-right: 0.5em;
+  align-self: center;
+}
+
+.uifw-standard-toolsettings-two-column-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: .5em;
+  column-gap: .75em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  align-items: center;
+  margin: 4px 4px 0px 4px;
+
+  .uifw-standard-toolsettings-label-entry {
+     text-align: end;
+  }
+}

package/lib/cjs/appui-react/widget-panels/Toolbars.d.ts

@@ -0,0 +1,8 @@
+/** @packageDocumentation
+ * @module Item
+ */
+/// <reference types="react" />
+import "./Toolbars.scss";
+/** @internal */
+export declare function WidgetPanelsToolbars(): JSX.Element;
+//# sourceMappingURL=Toolbars.d.ts.map

package/lib/cjs/appui-react/widget-panels/Toolbars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbars.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Toolbars.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,iBAAiB,CAAC;AAIzB,gBAAgB;AAChB,wBAAgB,oBAAoB,gBAUnC"}

package/lib/cjs/appui-react/widget-panels/Toolbars.js

@@ -0,0 +1,25 @@
+"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 Item
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetPanelsToolbars = void 0;
+require("./Toolbars.scss");
+const React = require("react");
+const Frontstage_1 = require("../frontstage/Frontstage");
+/** @internal */
+function WidgetPanelsToolbars() {
+    var _a, _b, _c, _d;
+    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
+    const tools = (_b = (_a = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.topLeft) === null || _a === void 0 ? void 0 : _a.getSingleWidgetDef()) === null || _b === void 0 ? void 0 : _b.reactNode;
+    const navigation = (_d = (_c = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.topRight) === null || _c === void 0 ? void 0 : _c.getSingleWidgetDef()) === null || _d === void 0 ? void 0 : _d.reactNode;
+    return (React.createElement("div", { className: "uifw-widgetPanels-toolbars" },
+        tools,
+        navigation));
+}
+exports.WidgetPanelsToolbars = WidgetPanelsToolbars;
+//# sourceMappingURL=Toolbars.js.map

package/lib/cjs/appui-react/widget-panels/Toolbars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbars.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Toolbars.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2BAAyB;AACzB,+BAA+B;AAC/B,yDAAkE;AAElE,gBAAgB;AAChB,SAAgB,oBAAoB;;IAClC,MAAM,aAAa,GAAG,IAAA,mCAAsB,GAAE,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,kBAAkB,EAAE,0CAAE,SAAS,CAAC;IACtE,MAAM,UAAU,GAAG,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,0CAAE,kBAAkB,EAAE,0CAAE,SAAS,CAAC;IAC5E,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACxC,KAAK;QACL,UAAU,CACP,CACP,CAAC;AACJ,CAAC;AAVD,oDAUC","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 \"./Toolbars.scss\";\r\nimport * as React from \"react\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/Frontstage\";\r\n\r\n/** @internal */\r\nexport function WidgetPanelsToolbars() {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const tools = frontstageDef?.topLeft?.getSingleWidgetDef()?.reactNode;\r\n  const navigation = frontstageDef?.topRight?.getSingleWidgetDef()?.reactNode;\r\n  return (\r\n    <div className=\"uifw-widgetPanels-toolbars\">\r\n      {tools}\r\n      {navigation}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/widget-panels/Toolbars.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uifw-widgetPanels-toolbars {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  padding: 0.75em;
+  box-sizing: border-box;
+  grid-template-columns: 1fr 1fr;
+
+  .nz-tools-widget {
+    grid-column: 1;
+
+    &.nz-widget-navigationArea {
+      grid-column: 2;
+    }
+  }
+}

package/lib/cjs/appui-react/widget-panels/useWidgetDirection.d.ts

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+/** Returns widget direction.
+ * I.e. "horizontal" when widget is in bottom/top stage panel.
+ * @alpha
+ */
+export declare function useWidgetDirection(): "horizontal" | "vertical";
+//# sourceMappingURL=useWidgetDirection.d.ts.map

package/lib/cjs/appui-react/widget-panels/useWidgetDirection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetDirection.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAMH;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,GAAG,UAAU,CAW9D"}

package/lib/cjs/appui-react/widget-panels/useWidgetDirection.js

@@ -0,0 +1,31 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetDirection = void 0;
+const React = require("react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const useFrameworkVersion_1 = require("../hooks/useFrameworkVersion");
+/** Returns widget direction.
+ * I.e. "horizontal" when widget is in bottom/top stage panel.
+ * @alpha
+ */
+function useWidgetDirection() {
+    const version = (0, useFrameworkVersion_1.useFrameworkVersion)();
+    const tabId = React.useContext(appui_layout_react_1.TabIdContext);
+    const nineZone = React.useContext(appui_layout_react_1.NineZoneContext);
+    if (version === "2") {
+        const tabLocation = (0, appui_layout_react_1.findTab)(nineZone, tabId);
+        if (tabLocation && ("side" in tabLocation) && (0, appui_layout_react_1.isHorizontalPanelSide)(tabLocation.side)) {
+            return "horizontal";
+        }
+    }
+    return "vertical";
+}
+exports.useWidgetDirection = useWidgetDirection;
+//# sourceMappingURL=useWidgetDirection.js.map

package/lib/cjs/appui-react/widget-panels/useWidgetDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetDirection.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/useWidgetDirection.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,kEAA0G;AAC1G,sEAAmE;AAEnE;;;GAGG;AACH,SAAgB,kBAAkB;IAChC,MAAM,OAAO,GAAG,IAAA,yCAAmB,GAAE,CAAC;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAY,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,oCAAe,CAAC,CAAC;IACnD,IAAI,OAAO,KAAK,GAAG,EAAE;QACnB,MAAM,WAAW,GAAG,IAAA,4BAAO,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC7C,IAAI,WAAW,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,IAAA,0CAAqB,EAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YACrF,OAAO,YAAY,CAAC;SACrB;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAXD,gDAWC","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 Widget\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { findTab, isHorizontalPanelSide, NineZoneContext, TabIdContext } from \"@itwin/appui-layout-react\";\r\nimport { useFrameworkVersion } from \"../hooks/useFrameworkVersion\";\r\n\r\n/** Returns widget direction.\r\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\r\n * @alpha\r\n */\r\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\r\n  const version = useFrameworkVersion();\r\n  const tabId = React.useContext(TabIdContext);\r\n  const nineZone = React.useContext(NineZoneContext);\r\n  if (version === \"2\") {\r\n    const tabLocation = findTab(nineZone, tabId);\r\n    if (tabLocation && (\"side\" in tabLocation) && isHorizontalPanelSide(tabLocation.side)) {\r\n      return \"horizontal\";\r\n    }\r\n  }\r\n  return \"vertical\";\r\n}\r\n"]}

package/lib/cjs/appui-react/widgets/BasicNavigationWidget.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+/// <reference types="react" />
+import { CommonToolbarItem } from "@itwin/appui-abstract";
+/** Properties that can be used to append items to the default set of toolbar items of [[DefaultNavigationWidget]].
+ * @public
+ */
+export interface BasicNavigationWidgetProps {
+    /** optional set of additional items to include in horizontal toolbar */
+    additionalHorizontalItems?: CommonToolbarItem[];
+    /** optional set of additional items to include in vertical toolbar */
+    additionalVerticalItems?: CommonToolbarItem[];
+}
+/** Basic Navigation Widget that provides standard tools to manipulate views containing element data.
+ * Supports the specification of additional horizontal and vertical toolbar items through props.
+ * @public
+ */
+export declare function BasicNavigationWidget(props: BasicNavigationWidgetProps): JSX.Element;
+//# sourceMappingURL=BasicNavigationWidget.d.ts.map

package/lib/cjs/appui-react/widgets/BasicNavigationWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicNavigationWidget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BasicNavigationWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,iBAAiB,EAAoC,MAAM,uBAAuB,CAAC;AAO5F;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,wEAAwE;IACxE,yBAAyB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChD,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/C;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eAqDtE"}

package/lib/cjs/appui-react/widgets/BasicNavigationWidget.js

@@ -0,0 +1,60 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicNavigationWidget = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const CoreToolDefinitions_1 = require("../tools/CoreToolDefinitions");
+const ToolbarComposer_1 = require("../toolbar/ToolbarComposer");
+const ToolbarHelper_1 = require("../toolbar/ToolbarHelper");
+const BasicToolWidget_1 = require("./BasicToolWidget");
+const NavigationWidgetComposer_1 = require("./NavigationWidgetComposer");
+/** Basic Navigation Widget that provides standard tools to manipulate views containing element data.
+ * Supports the specification of additional horizontal and vertical toolbar items through props.
+ * @public
+ */
+function BasicNavigationWidget(props) {
+    const getHorizontalToolbarItems = React.useCallback(() => {
+        const items = ToolbarHelper_1.ToolbarHelper.createToolbarItemsFromItemDefs([
+            CoreToolDefinitions_1.CoreTools.rotateViewCommand,
+            CoreToolDefinitions_1.CoreTools.panViewCommand,
+            CoreToolDefinitions_1.CoreTools.fitViewCommand,
+            CoreToolDefinitions_1.CoreTools.windowAreaCommand,
+            CoreToolDefinitions_1.CoreTools.viewUndoCommand,
+            CoreToolDefinitions_1.CoreTools.viewRedoCommand,
+        ]);
+        if (props.additionalHorizontalItems)
+            items.push(...props.additionalHorizontalItems);
+        return items;
+    }, [props.additionalHorizontalItems]);
+    const getVerticalToolbarItems = React.useCallback(() => {
+        const items = [];
+        items.push(ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(10, CoreToolDefinitions_1.CoreTools.walkViewCommand), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(20, CoreToolDefinitions_1.CoreTools.toggleCameraViewCommand));
+        if (props.additionalVerticalItems)
+            items.push(...props.additionalVerticalItems);
+        return items;
+    }, [props.additionalVerticalItems]);
+    const [horizontalItems, setHorizontalItems] = React.useState(() => getHorizontalToolbarItems());
+    const [verticalItems, setVerticalItems] = React.useState(() => getVerticalToolbarItems());
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        if (isInitialMount.current)
+            isInitialMount.current = false;
+        else {
+            setHorizontalItems(getHorizontalToolbarItems());
+            setVerticalItems(getVerticalToolbarItems());
+        }
+    }, [props.additionalHorizontalItems, props.additionalVerticalItems, getHorizontalToolbarItems, getVerticalToolbarItems]);
+    const uiIsVisible = (0, BasicToolWidget_1.useUiVisibility)();
+    const className = (0, classnames_1.default)(!uiIsVisible && "nz-hidden");
+    return (React.createElement(NavigationWidgetComposer_1.NavigationWidgetComposer, { className: className, horizontalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: horizontalItems, usage: appui_abstract_1.ToolbarUsage.ViewNavigation, orientation: appui_abstract_1.ToolbarOrientation.Horizontal }), verticalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: verticalItems, usage: appui_abstract_1.ToolbarUsage.ViewNavigation, orientation: appui_abstract_1.ToolbarOrientation.Vertical }) }));
+}
+exports.BasicNavigationWidget = BasicNavigationWidget;
+//# sourceMappingURL=BasicNavigationWidget.js.map

package/lib/cjs/appui-react/widgets/BasicNavigationWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicNavigationWidget.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BasicNavigationWidget.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,0DAA4F;AAC5F,sEAAyD;AACzD,gEAA6D;AAC7D,4DAAyD;AACzD,uDAAoD;AACpD,yEAAsE;AAYtE;;;GAGG;AACH,SAAgB,qBAAqB,CAAC,KAAiC;IAErE,MAAM,yBAAyB,GAAG,KAAK,CAAC,WAAW,CACjD,GAAwB,EAAE;QACxB,MAAM,KAAK,GAAwB,6BAAa,CAAC,8BAA8B,CAAC;YAC9E,+BAAS,CAAC,iBAAiB;YAC3B,+BAAS,CAAC,cAAc;YACxB,+BAAS,CAAC,cAAc;YACxB,+BAAS,CAAC,iBAAiB;YAC3B,+BAAS,CAAC,eAAe;YACzB,+BAAS,CAAC,eAAe;SAC1B,CAAC,CAAC;QACH,IAAI,KAAK,CAAC,yBAAyB;YACjC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACjD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAExC,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAC/C,GAAwB,EAAE;QACxB,MAAM,KAAK,GAAwB,EAAE,CAAC;QACtC,KAAK,CAAC,IAAI,CACR,6BAAa,CAAC,4BAA4B,CAAC,EAAE,EAAE,+BAAS,CAAC,eAAe,CAAC,EACzE,6BAAa,CAAC,4BAA4B,CAAC,EAAE,EAAE,+BAAS,CAAC,uBAAuB,CAAC,CAClF,CAAC;QACF,IAAI,KAAK,CAAC,uBAAuB;YAC/B,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;QAC/C,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEtC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,yBAAyB,EAAE,CAAC,CAAC;IAChG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAE1F,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,cAAc,CAAC,OAAO;YACxB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;aAC5B;YACH,kBAAkB,CAAC,yBAAyB,EAAE,CAAC,CAAC;YAChD,gBAAgB,CAAC,uBAAuB,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEzH,MAAM,WAAW,GAAG,IAAA,iCAAe,GAAE,CAAC;IACtC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,CAAC,WAAW,IAAI,WAAW,CAC5B,CAAC;IAEF,OAAO,CACL,oBAAC,mDAAwB,IAAC,SAAS,EAAE,SAAS,EAC5C,iBAAiB,EAAE,oBAAC,iCAAe,IAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,6BAAY,CAAC,cAAc,EAAE,WAAW,EAAE,mCAAkB,CAAC,UAAU,GAAI,EAC9I,eAAe,EAAE,oBAAC,iCAAe,IAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,6BAAY,CAAC,cAAc,EAAE,WAAW,EAAE,mCAAkB,CAAC,QAAQ,GAAI,GACxI,CACH,CAAC;AACJ,CAAC;AArDD,sDAqDC","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 Widget\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonToolbarItem, ToolbarOrientation, ToolbarUsage } from \"@itwin/appui-abstract\";\r\nimport { CoreTools } from \"../tools/CoreToolDefinitions\";\r\nimport { ToolbarComposer } from \"../toolbar/ToolbarComposer\";\r\nimport { ToolbarHelper } from \"../toolbar/ToolbarHelper\";\r\nimport { useUiVisibility } from \"./BasicToolWidget\";\r\nimport { NavigationWidgetComposer } from \"./NavigationWidgetComposer\";\r\n\r\n/** Properties that can be used to append items to the default set of toolbar items of [[DefaultNavigationWidget]].\r\n * @public\r\n */\r\nexport interface BasicNavigationWidgetProps {\r\n  /** optional set of additional items to include in horizontal toolbar */\r\n  additionalHorizontalItems?: CommonToolbarItem[];\r\n  /** optional set of additional items to include in vertical toolbar */\r\n  additionalVerticalItems?: CommonToolbarItem[];\r\n}\r\n\r\n/** Basic Navigation Widget that provides standard tools to manipulate views containing element data.\r\n * Supports the specification of additional horizontal and vertical toolbar items through props.\r\n * @public\r\n */\r\nexport function BasicNavigationWidget(props: BasicNavigationWidgetProps) {\r\n\r\n  const getHorizontalToolbarItems = React.useCallback(\r\n    (): CommonToolbarItem[] => {\r\n      const items: CommonToolbarItem[] = ToolbarHelper.createToolbarItemsFromItemDefs([\r\n        CoreTools.rotateViewCommand,\r\n        CoreTools.panViewCommand,\r\n        CoreTools.fitViewCommand,\r\n        CoreTools.windowAreaCommand,\r\n        CoreTools.viewUndoCommand,\r\n        CoreTools.viewRedoCommand,\r\n      ]);\r\n      if (props.additionalHorizontalItems)\r\n        items.push(...props.additionalHorizontalItems);\r\n      return items;\r\n    }, [props.additionalHorizontalItems]);\r\n\r\n  const getVerticalToolbarItems = React.useCallback(\r\n    (): CommonToolbarItem[] => {\r\n      const items: CommonToolbarItem[] = [];\r\n      items.push(\r\n        ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.walkViewCommand),\r\n        ToolbarHelper.createToolbarItemFromItemDef(20, CoreTools.toggleCameraViewCommand),\r\n      );\r\n      if (props.additionalVerticalItems)\r\n        items.push(...props.additionalVerticalItems);\r\n      return items;\r\n    }, [props.additionalVerticalItems]);\r\n\r\n  const [horizontalItems, setHorizontalItems] = React.useState(() => getHorizontalToolbarItems());\r\n  const [verticalItems, setVerticalItems] = React.useState(() => getVerticalToolbarItems());\r\n\r\n  const isInitialMount = React.useRef(true);\r\n  React.useEffect(() => {\r\n    if (isInitialMount.current)\r\n      isInitialMount.current = false;\r\n    else {\r\n      setHorizontalItems(getHorizontalToolbarItems());\r\n      setVerticalItems(getVerticalToolbarItems());\r\n    }\r\n  }, [props.additionalHorizontalItems, props.additionalVerticalItems, getHorizontalToolbarItems, getVerticalToolbarItems]);\r\n\r\n  const uiIsVisible = useUiVisibility();\r\n  const className = classnames(\r\n    !uiIsVisible && \"nz-hidden\",\r\n  );\r\n\r\n  return (\r\n    <NavigationWidgetComposer className={className}\r\n      horizontalToolbar={<ToolbarComposer items={horizontalItems} usage={ToolbarUsage.ViewNavigation} orientation={ToolbarOrientation.Horizontal} />}\r\n      verticalToolbar={<ToolbarComposer items={verticalItems} usage={ToolbarUsage.ViewNavigation} orientation={ToolbarOrientation.Vertical} />}\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/widgets/BasicToolWidget.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+/// <reference types="react" />
+import { CommonToolbarItem } from "@itwin/appui-abstract";
+/** Properties that can be used to append items to the default set of toolbar items of [[ReviewToolWidget]].
+ * @public
+ */
+export interface BasicToolWidgetProps {
+    /** if true include hide/isolate Models and Categories */
+    showCategoryAndModelsContextTools?: boolean;
+    /** Name of icon WebFont entry or if specifying an SVG symbol added by plug on use "svg:" prefix to imported symbol Id. */
+    icon?: string;
+    /** optional set of additional items to include in horizontal toolbar */
+    additionalHorizontalItems?: CommonToolbarItem[];
+    /** optional set of additional items to include in vertical toolbar */
+    additionalVerticalItems?: CommonToolbarItem[];
+}
+/** @internal */
+export declare function useUiVisibility(): boolean;
+/** Default Tool Widget for standard "review" applications. Provides standard tools to review, and measure elements.
+ * This definition will also show a overflow button if there is not enough room to display all the toolbar buttons.
+ * @public
+ */
+export declare function BasicToolWidget(props: BasicToolWidgetProps): JSX.Element;
+//# sourceMappingURL=BasicToolWidget.d.ts.map

package/lib/cjs/appui-react/widgets/BasicToolWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicToolWidget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BasicToolWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,iBAAiB,EAAoC,MAAM,uBAAuB,CAAC;AAQ5F;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,yDAAyD;IACzD,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,0HAA0H;IAC1H,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,yBAAyB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChD,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/C;AAED,gBAAgB;AAEhB,wBAAgB,eAAe,YAU9B;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAgE1D"}

package/lib/cjs/appui-react/widgets/BasicToolWidget.js

@@ -0,0 +1,74 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicToolWidget = exports.useUiVisibility = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const CoreToolDefinitions_1 = require("../tools/CoreToolDefinitions");
+const SelectionContextItemDef_1 = require("../selection/SelectionContextItemDef");
+const ToolbarComposer_1 = require("../toolbar/ToolbarComposer");
+const ToolbarHelper_1 = require("../toolbar/ToolbarHelper");
+const UiFramework_1 = require("../UiFramework");
+const ToolWidgetComposer_1 = require("./ToolWidgetComposer");
+/** @internal */
+// istanbul ignore next
+function useUiVisibility() {
+    const [uiIsVisible, setUiIsVisible] = React.useState(UiFramework_1.UiFramework.getIsUiVisible());
+    React.useEffect(() => {
+        const handleUiVisibilityChanged = ((args) => setUiIsVisible(args.visible));
+        UiFramework_1.UiFramework.onUiVisibilityChanged.addListener(handleUiVisibilityChanged);
+        return () => {
+            UiFramework_1.UiFramework.onUiVisibilityChanged.removeListener(handleUiVisibilityChanged);
+        };
+    }, []);
+    return uiIsVisible;
+}
+exports.useUiVisibility = useUiVisibility;
+/** Default Tool Widget for standard "review" applications. Provides standard tools to review, and measure elements.
+ * This definition will also show a overflow button if there is not enough room to display all the toolbar buttons.
+ * @public
+ */
+function BasicToolWidget(props) {
+    const getHorizontalToolbarItems = React.useCallback((useCategoryAndModelsContextTools) => {
+        const items = [];
+        if (useCategoryAndModelsContextTools) {
+            items.push(ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(10, CoreToolDefinitions_1.CoreTools.clearSelectionItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(20, SelectionContextItemDef_1.SelectionContextToolDefinitions.clearHideIsolateEmphasizeElementsItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(30, SelectionContextItemDef_1.SelectionContextToolDefinitions.hideSectionToolGroup), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(40, SelectionContextItemDef_1.SelectionContextToolDefinitions.isolateSelectionToolGroup), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(50, SelectionContextItemDef_1.SelectionContextToolDefinitions.emphasizeElementsItemDef));
+        }
+        else {
+            items.push(ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(10, CoreToolDefinitions_1.CoreTools.clearSelectionItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(20, SelectionContextItemDef_1.SelectionContextToolDefinitions.clearHideIsolateEmphasizeElementsItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(30, SelectionContextItemDef_1.SelectionContextToolDefinitions.hideElementsItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(40, SelectionContextItemDef_1.SelectionContextToolDefinitions.isolateElementsItemDef), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(50, SelectionContextItemDef_1.SelectionContextToolDefinitions.emphasizeElementsItemDef));
+        }
+        if (props.additionalHorizontalItems)
+            items.push(...props.additionalHorizontalItems);
+        return items;
+    }, [props.additionalHorizontalItems]);
+    const getVerticalToolbarItems = React.useCallback(() => {
+        const items = [];
+        items.push(ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(10, CoreToolDefinitions_1.CoreTools.selectElementCommand), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(20, CoreToolDefinitions_1.CoreTools.measureToolGroup), ToolbarHelper_1.ToolbarHelper.createToolbarItemFromItemDef(30, CoreToolDefinitions_1.CoreTools.sectionToolGroup));
+        if (props.additionalVerticalItems)
+            items.push(...props.additionalVerticalItems);
+        return items;
+    }, [props.additionalVerticalItems]);
+    const [horizontalItems, setHorizontalItems] = React.useState(() => getHorizontalToolbarItems(!!props.showCategoryAndModelsContextTools));
+    const [verticalItems, setVerticalItems] = React.useState(() => getVerticalToolbarItems());
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        if (isInitialMount.current)
+            isInitialMount.current = false;
+        else {
+            setHorizontalItems(getHorizontalToolbarItems(!!props.showCategoryAndModelsContextTools));
+            setVerticalItems(getVerticalToolbarItems());
+        }
+    }, [props.showCategoryAndModelsContextTools, props.additionalHorizontalItems, props.additionalVerticalItems, getHorizontalToolbarItems, getVerticalToolbarItems]);
+    const uiIsVisible = useUiVisibility();
+    const className = (0, classnames_1.default)(!uiIsVisible && "nz-hidden");
+    return (React.createElement(ToolWidgetComposer_1.ToolWidgetComposer, { className: className, cornerItem: React.createElement(ToolWidgetComposer_1.BackstageAppButton, { icon: props.icon }), horizontalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: horizontalItems, usage: appui_abstract_1.ToolbarUsage.ContentManipulation, orientation: appui_abstract_1.ToolbarOrientation.Horizontal }), verticalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: verticalItems, usage: appui_abstract_1.ToolbarUsage.ContentManipulation, orientation: appui_abstract_1.ToolbarOrientation.Vertical }) }));
+}
+exports.BasicToolWidget = BasicToolWidget;
+//# sourceMappingURL=BasicToolWidget.js.map

package/lib/cjs/appui-react/widgets/BasicToolWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicToolWidget.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BasicToolWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Widget\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonToolbarItem, ToolbarOrientation, ToolbarUsage } from \"@itwin/appui-abstract\";\r\nimport { CoreTools } from \"../tools/CoreToolDefinitions\";\r\nimport { SelectionContextToolDefinitions } from \"../selection/SelectionContextItemDef\";\r\nimport { ToolbarComposer } from \"../toolbar/ToolbarComposer\";\r\nimport { ToolbarHelper } from \"../toolbar/ToolbarHelper\";\r\nimport { UiFramework, UiVisibilityEventArgs } from \"../UiFramework\";\r\nimport { BackstageAppButton, ToolWidgetComposer } from \"./ToolWidgetComposer\";\r\n\r\n/** Properties that can be used to append items to the default set of toolbar items of [[ReviewToolWidget]].\r\n * @public\r\n */\r\nexport interface BasicToolWidgetProps {\r\n  /** if true include hide/isolate Models and Categories */\r\n  showCategoryAndModelsContextTools?: boolean;\r\n  /** Name of icon WebFont entry or if specifying an SVG symbol added by plug on use \"svg:\" prefix to imported symbol Id. */\r\n  icon?: string;\r\n  /** optional set of additional items to include in horizontal toolbar */\r\n  additionalHorizontalItems?: CommonToolbarItem[];\r\n  /** optional set of additional items to include in vertical toolbar */\r\n  additionalVerticalItems?: CommonToolbarItem[];\r\n}\r\n\r\n/** @internal */\r\n// istanbul ignore next\r\nexport function useUiVisibility() {\r\n  const [uiIsVisible, setUiIsVisible] = React.useState(UiFramework.getIsUiVisible());\r\n  React.useEffect(() => {\r\n    const handleUiVisibilityChanged = ((args: UiVisibilityEventArgs): void => setUiIsVisible(args.visible));\r\n    UiFramework.onUiVisibilityChanged.addListener(handleUiVisibilityChanged);\r\n    return () => {\r\n      UiFramework.onUiVisibilityChanged.removeListener(handleUiVisibilityChanged);\r\n    };\r\n  }, []);\r\n  return uiIsVisible;\r\n}\r\n\r\n/** Default Tool Widget for standard \"review\" applications. Provides standard tools to review, and measure elements.\r\n * This definition will also show a overflow button if there is not enough room to display all the toolbar buttons.\r\n * @public\r\n */\r\nexport function BasicToolWidget(props: BasicToolWidgetProps) {\r\n  const getHorizontalToolbarItems = React.useCallback(\r\n    (useCategoryAndModelsContextTools: boolean): CommonToolbarItem[] => {\r\n      const items: CommonToolbarItem[] = [];\r\n      if (useCategoryAndModelsContextTools) {\r\n        items.push(\r\n          ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.clearSelectionItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(20, SelectionContextToolDefinitions.clearHideIsolateEmphasizeElementsItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(30, SelectionContextToolDefinitions.hideSectionToolGroup),\r\n          ToolbarHelper.createToolbarItemFromItemDef(40, SelectionContextToolDefinitions.isolateSelectionToolGroup),\r\n          ToolbarHelper.createToolbarItemFromItemDef(50, SelectionContextToolDefinitions.emphasizeElementsItemDef),\r\n        );\r\n      } else {\r\n        items.push(\r\n          ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.clearSelectionItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(20, SelectionContextToolDefinitions.clearHideIsolateEmphasizeElementsItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(30, SelectionContextToolDefinitions.hideElementsItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(40, SelectionContextToolDefinitions.isolateElementsItemDef),\r\n          ToolbarHelper.createToolbarItemFromItemDef(50, SelectionContextToolDefinitions.emphasizeElementsItemDef),\r\n        );\r\n      }\r\n      if (props.additionalHorizontalItems)\r\n        items.push(...props.additionalHorizontalItems);\r\n      return items;\r\n    }, [props.additionalHorizontalItems]);\r\n\r\n  const getVerticalToolbarItems = React.useCallback(\r\n    (): CommonToolbarItem[] => {\r\n      const items: CommonToolbarItem[] = [];\r\n      items.push(\r\n        ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.selectElementCommand),\r\n        ToolbarHelper.createToolbarItemFromItemDef(20, CoreTools.measureToolGroup),\r\n        ToolbarHelper.createToolbarItemFromItemDef(30, CoreTools.sectionToolGroup),\r\n      );\r\n      if (props.additionalVerticalItems)\r\n        items.push(...props.additionalVerticalItems);\r\n      return items;\r\n    }, [props.additionalVerticalItems]);\r\n\r\n  const [horizontalItems, setHorizontalItems] = React.useState(() => getHorizontalToolbarItems(!!props.showCategoryAndModelsContextTools));\r\n  const [verticalItems, setVerticalItems] = React.useState(() => getVerticalToolbarItems());\r\n\r\n  const isInitialMount = React.useRef(true);\r\n  React.useEffect(() => {\r\n    if (isInitialMount.current)\r\n      isInitialMount.current = false;\r\n    else {\r\n      setHorizontalItems(getHorizontalToolbarItems(!!props.showCategoryAndModelsContextTools));\r\n      setVerticalItems(getVerticalToolbarItems());\r\n    }\r\n  }, [props.showCategoryAndModelsContextTools, props.additionalHorizontalItems, props.additionalVerticalItems, getHorizontalToolbarItems, getVerticalToolbarItems]);\r\n\r\n  const uiIsVisible = useUiVisibility();\r\n  const className = classnames(\r\n    !uiIsVisible && \"nz-hidden\",\r\n  );\r\n\r\n  return (\r\n    <ToolWidgetComposer className={className}\r\n      cornerItem={<BackstageAppButton icon={props.icon} />}\r\n      horizontalToolbar={<ToolbarComposer items={horizontalItems} usage={ToolbarUsage.ContentManipulation} orientation={ToolbarOrientation.Horizontal} />}\r\n      verticalToolbar={<ToolbarComposer items={verticalItems} usage={ToolbarUsage.ContentManipulation} orientation={ToolbarOrientation.Vertical} />}\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/widgets/ContentToolWidgetComposer.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/**
+ * Props for [[ContentToolWidgetComposer]].
+ * @public
+ */
+export interface ContentToolWidgetComposerProps {
+    /** If default backstage button is desired use <BackstageAppButton />. */
+    cornerButton?: React.ReactNode;
+}
+/**
+ * ContentToolWidgetComposer composes a Tool Widget with no tools defined by default. UiItemsProviders
+ * are used to populate the toolbars. See [[StandardContentToolsProvider]].
+ * @example
+ * ToolWidget with no corner button
+ * ```
+ * <ContentToolWidgetComposer />
+ * ```
+ * ToolWidget with corner button
+ * ```
+ * const cornerButton = <BackstageAppButton icon={"icon-bentley-systems"} />;
+ * <ContentToolWidgetComposer cornerButton={cornerButton} />
+ * ```
+ * @public
+ */
+export declare function ContentToolWidgetComposer(props: ContentToolWidgetComposerProps): JSX.Element;
+//# sourceMappingURL=ContentToolWidgetComposer.d.ts.map

package/lib/cjs/appui-react/widgets/ContentToolWidgetComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentToolWidgetComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/widgets/ContentToolWidgetComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC7C,yEAAyE;IACzE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,eAc9E"}

package/lib/cjs/appui-react/widgets/ContentToolWidgetComposer.js

@@ -0,0 +1,39 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentToolWidgetComposer = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const ToolbarComposer_1 = require("../toolbar/ToolbarComposer");
+const ToolWidgetComposer_1 = require("./ToolWidgetComposer");
+const BasicToolWidget_1 = require("./BasicToolWidget");
+/**
+ * ContentToolWidgetComposer composes a Tool Widget with no tools defined by default. UiItemsProviders
+ * are used to populate the toolbars. See [[StandardContentToolsProvider]].
+ * @example
+ * ToolWidget with no corner button
+ * ```
+ * <ContentToolWidgetComposer />
+ * ```
+ * ToolWidget with corner button
+ * ```
+ * const cornerButton = <BackstageAppButton icon={"icon-bentley-systems"} />;
+ * <ContentToolWidgetComposer cornerButton={cornerButton} />
+ * ```
+ * @public
+ */
+function ContentToolWidgetComposer(props) {
+    const { cornerButton } = props;
+    const uiIsVisible = (0, BasicToolWidget_1.useUiVisibility)();
+    const className = (0, classnames_1.default)(!uiIsVisible && "nz-hidden");
+    return (React.createElement(ToolWidgetComposer_1.ToolWidgetComposer, { className: className, cornerItem: cornerButton, horizontalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: [], usage: appui_abstract_1.ToolbarUsage.ContentManipulation, orientation: appui_abstract_1.ToolbarOrientation.Horizontal }), verticalToolbar: React.createElement(ToolbarComposer_1.ToolbarComposer, { items: [], usage: appui_abstract_1.ToolbarUsage.ContentManipulation, orientation: appui_abstract_1.ToolbarOrientation.Vertical }) }));
+}
+exports.ContentToolWidgetComposer = ContentToolWidgetComposer;
+//# sourceMappingURL=ContentToolWidgetComposer.js.map