@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.3

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

@@ -1 +1 @@
-{"version":3,"file":"useTransientState.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/useTransientState.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,kEAAuF;AAEvF;;GAEG;AACH,SAAgB,iBAAiB,CAAC,MAAmB,EAAE,SAAsB;IAC3E,IAAA,sCAAqB,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC3C,CAAC;AAFD,8CAEC","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 Widget\n */\n\nimport { useTransientState as useTransientStateImpl } from \"@itwin/appui-layout-react\";\n\n/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.\n * @beta\n */\nexport function useTransientState(onSave?: () => void, onRestore?: () => void): void {\n  useTransientStateImpl(onSave, onRestore);\n}\n"]}
+{"version":3,"file":"useTransientState.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/useTransientState.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,kEAAuF;AAEvF;;GAEG;AACH,SAAgB,iBAAiB,CAAC,MAAmB,EAAE,SAAsB;IAC3E,IAAA,sCAAqB,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC3C,CAAC;AAFD,8CAEC","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 { useTransientState as useTransientStateImpl } from \"@itwin/appui-layout-react\";\r\n\r\n/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.\r\n * @beta\r\n */\r\nexport function useTransientState(onSave?: () => void, onRestore?: () => void): void {\r\n  useTransientStateImpl(onSave, onRestore);\r\n}\r\n"]}

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

@@ -1,9 +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";
+/** @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.js

@@ -1,30 +1,30 @@
-"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 core_bentley_1 = require("@itwin/core-bentley");
-/** Returns widget direction.
- * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
- */
-function useWidgetDirection() {
-    const tabId = React.useContext(appui_layout_react_1.TabIdContext);
-    (0, core_bentley_1.assert)(!!tabId);
-    return (0, appui_layout_react_1.useLayout)((state) => {
-        const tabLocation = (0, appui_layout_react_1.getTabLocation)(state, tabId);
-        if (tabLocation && ("side" in tabLocation) && (0, appui_layout_react_1.isHorizontalPanelSide)(tabLocation.side)) {
-            return "horizontal";
-        }
-        return "vertical";
-    });
-}
-exports.useWidgetDirection = useWidgetDirection;
+"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 core_bentley_1 = require("@itwin/core-bentley");
+/** Returns widget direction.
+ * I.e. "horizontal" when widget is in bottom/top stage panel.
+ * @alpha
+ */
+function useWidgetDirection() {
+    const tabId = React.useContext(appui_layout_react_1.TabIdContext);
+    (0, core_bentley_1.assert)(!!tabId);
+    return (0, appui_layout_react_1.useLayout)((state) => {
+        const tabLocation = (0, appui_layout_react_1.getTabLocation)(state, 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

@@ -1 +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,kEAA2G;AAC3G,sDAA6C;AAE7C;;;GAGG;AACH,SAAgB,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAY,CAAC,CAAC;IAC7C,IAAA,qBAAM,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,IAAA,8BAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,IAAA,mCAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IAAI,WAAW,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,IAAA,0CAAqB,EAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YACrF,OAAO,YAAY,CAAC;SACrB;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC;AAVD,gDAUC","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 Widget\n */\n\nimport * as React from \"react\";\nimport { getTabLocation, isHorizontalPanelSide, TabIdContext, useLayout } from \"@itwin/appui-layout-react\";\nimport { assert } from \"@itwin/core-bentley\";\n\n/** Returns widget direction.\n * I.e. \"horizontal\" when widget is in bottom/top stage panel.\n * @alpha\n */\nexport function useWidgetDirection(): \"horizontal\" | \"vertical\" {\n  const tabId = React.useContext(TabIdContext);\n  assert(!!tabId);\n  return useLayout((state) => {\n    const tabLocation = getTabLocation(state, tabId);\n    if (tabLocation && (\"side\" in tabLocation) && isHorizontalPanelSide(tabLocation.side)) {\n      return \"horizontal\";\n    }\n    return \"vertical\";\n  });\n}\n"]}
+{"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,kEAA2G;AAC3G,sDAA6C;AAE7C;;;GAGG;AACH,SAAgB,kBAAkB;IAChC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAY,CAAC,CAAC;IAC7C,IAAA,qBAAM,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChB,OAAO,IAAA,8BAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,WAAW,GAAG,IAAA,mCAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,IAAI,WAAW,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,IAAA,0CAAqB,EAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YACrF,OAAO,YAAY,CAAC;SACrB;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC;AAVD,gDAUC","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 { getTabLocation, isHorizontalPanelSide, TabIdContext, useLayout } from \"@itwin/appui-layout-react\";\r\nimport { assert } from \"@itwin/core-bentley\";\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 tabId = React.useContext(TabIdContext);\r\n  assert(!!tabId);\r\n  return useLayout((state) => {\r\n    const tabLocation = getTabLocation(state, tabId);\r\n    if (tabLocation && (\"side\" in tabLocation) && isHorizontalPanelSide(tabLocation.side)) {\r\n      return \"horizontal\";\r\n    }\r\n    return \"vertical\";\r\n  });\r\n}\r\n"]}

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

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Widget
- */
-/// <reference types="react" />
-/**
- * Properties for the [[BackstageAppButton]] React component
- * @public
- */
-export interface BackstageAppButtonProps {
-    /** Icon specification for the App button */
-    icon?: string;
-    /** If specified overrides the default label shown in tooltip. */
-    label?: string;
-    /** If specified overrides the default action that displays the backstage. */
-    execute?: () => void;
-}
-/**
- * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
- * @public
- */
-export declare function BackstageAppButton(props: BackstageAppButtonProps): JSX.Element;
+/** @packageDocumentation
+ * @module Widget
+ */
+/// <reference types="react" />
+/**
+ * Properties for the [[BackstageAppButton]] React component
+ * @public
+ */
+export interface BackstageAppButtonProps {
+    /** Icon specification for the App button */
+    icon?: string;
+    /** If specified overrides the default label shown in tooltip. */
+    label?: string;
+    /** If specified overrides the default action that displays the backstage. */
+    execute?: () => void;
+}
+/**
+ * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
+ * @public
+ */
+export declare function BackstageAppButton(props: BackstageAppButtonProps): JSX.Element;
 //# sourceMappingURL=BackstageAppButton.d.ts.map

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

@@ -1,54 +1,54 @@
-"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.BackstageAppButton = void 0;
-const React = require("react");
-const home_svg_1 = require("@bentley/icons-generic/icons/home.svg");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const BackstageManager_1 = require("../backstage/BackstageManager");
-const UiFramework_1 = require("../UiFramework");
-const UiShowHideManager_1 = require("../utils/UiShowHideManager");
-/**
- * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
- * @public
- */
-function BackstageAppButton(props) {
-    const backstageToggleCommand = React.useMemo(() => BackstageManager_1.BackstageManager.getBackstageToggleCommand(props.icon), [props.icon]);
-    const backstageLabel = React.useMemo(() => props.label || backstageToggleCommand.tooltip, [backstageToggleCommand.tooltip, props.label]);
-    const [icon, setIcon] = React.useState(props.icon ? props.icon : appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(home_svg_1.default));
-    const isInitialMount = React.useRef(true);
-    const divClassName = "uifw-app-button-small";
-    const { onElementRef, proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
-    const ref = React.useRef(null);
-    const handleClick = React.useCallback(() => {
-        if (props.execute)
-            props.execute();
-        else
-            backstageToggleCommand.execute();
-    }, [backstageToggleCommand, props]);
-    React.useEffect(() => {
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            onElementRef(ref);
-        }
-        else {
-            setIcon(props.icon ? props.icon : appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(home_svg_1.default));
-        }
-    }, [props.icon, onElementRef]);
-    let buttonProximityScale;
-    if (UiShowHideManager_1.UiShowHideManager.useProximityOpacity && !UiFramework_1.UiFramework.isMobile()) {
-        buttonProximityScale = proximityScale;
-    }
-    return (React.createElement("div", { ref: ref, className: divClassName },
-        React.createElement(appui_layout_react_1.AppButton, { small: true, mouseProximity: buttonProximityScale, onClick: handleClick, icon: React.createElement(core_react_1.Icon, { iconSpec: icon }), title: backstageLabel })));
-}
-exports.BackstageAppButton = BackstageAppButton;
+"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.BackstageAppButton = void 0;
+const React = require("react");
+const home_svg_1 = require("@bentley/icons-generic/icons/home.svg");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const BackstageManager_1 = require("../backstage/BackstageManager");
+const UiFramework_1 = require("../UiFramework");
+const UiShowHideManager_1 = require("../utils/UiShowHideManager");
+/**
+ * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
+ * @public
+ */
+function BackstageAppButton(props) {
+    const backstageToggleCommand = React.useMemo(() => BackstageManager_1.BackstageManager.getBackstageToggleCommand(props.icon), [props.icon]);
+    const backstageLabel = React.useMemo(() => props.label || backstageToggleCommand.tooltip, [backstageToggleCommand.tooltip, props.label]);
+    const [icon, setIcon] = React.useState(props.icon ? props.icon : appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(home_svg_1.default));
+    const isInitialMount = React.useRef(true);
+    const divClassName = "uifw-app-button-small";
+    const { onElementRef, proximityScale } = (0, core_react_1.useWidgetOpacityContext)();
+    const ref = React.useRef(null);
+    const handleClick = React.useCallback(() => {
+        if (props.execute)
+            props.execute();
+        else
+            backstageToggleCommand.execute();
+    }, [backstageToggleCommand, props]);
+    React.useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            onElementRef(ref);
+        }
+        else {
+            setIcon(props.icon ? props.icon : appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(home_svg_1.default));
+        }
+    }, [props.icon, onElementRef]);
+    let buttonProximityScale;
+    if (UiShowHideManager_1.UiShowHideManager.useProximityOpacity && !UiFramework_1.UiFramework.isMobile()) {
+        buttonProximityScale = proximityScale;
+    }
+    return (React.createElement("div", { ref: ref, className: divClassName },
+        React.createElement(appui_layout_react_1.AppButton, { small: true, mouseProximity: buttonProximityScale, onClick: handleClick, icon: React.createElement(core_react_1.Icon, { iconSpec: icon }), title: backstageLabel })));
+}
+exports.BackstageAppButton = BackstageAppButton;
 //# sourceMappingURL=BackstageAppButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackstageAppButton.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BackstageAppButton.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,oEAAkE;AAClE,0DAA0D;AAC1D,kDAAkE;AAClE,kEAAsD;AACtD,oEAAiE;AACjE,gDAA6C;AAC7C,kEAA+D;AAe/D;;;GAGG;AACH,SAAgB,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,mCAAgB,CAAC,yBAAyB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACzH,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,sBAAsB,CAAC,OAAO,EAAE,CAAC,sBAAsB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IACzI,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAiB,CAAC,0BAA0B,CAAC,kBAAa,CAAC,CAAC,CAAC;IAC9H,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,uBAAuB,CAAC;IAC7C,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IACnE,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,KAAK,CAAC,OAAO;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;;YAGhB,sBAAsB,CAAC,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;SACnB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAiB,CAAC,0BAA0B,CAAC,kBAAa,CAAC,CAAC,CAAC;SAChG;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,IAAI,oBAAwC,CAAC;IAE7C,IAAI,qCAAiB,CAAC,mBAAmB,IAAI,CAAC,yBAAW,CAAC,QAAQ,EAAE,EAAE;QACpE,oBAAoB,GAAG,cAAc,CAAC;KACvC;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY;QACpC,oBAAC,8BAAS,IACR,KAAK,EAAE,IAAI,EACX,cAAc,EAAE,oBAAoB,EACpC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,GAAI,EAC9B,KAAK,EAAE,cAAc,GAAI,CACvB,CACP,CAAC;AACJ,CAAC;AA1CD,gDA0CC","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 Widget\n */\n\nimport * as React from \"react\";\nimport widgetIconSvg from \"@bentley/icons-generic/icons/home.svg\";\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\nimport { Icon, useWidgetOpacityContext } from \"@itwin/core-react\";\nimport { AppButton } from \"@itwin/appui-layout-react\";\nimport { BackstageManager } from \"../backstage/BackstageManager\";\nimport { UiFramework } from \"../UiFramework\";\nimport { UiShowHideManager } from \"../utils/UiShowHideManager\";\n\n/**\n * Properties for the [[BackstageAppButton]] React component\n * @public\n */\nexport interface BackstageAppButtonProps {\n  /** Icon specification for the App button */\n  icon?: string;\n  /** If specified overrides the default label shown in tooltip. */\n  label?: string;\n  /** If specified overrides the default action that displays the backstage. */\n  execute?: () => void;\n}\n\n/**\n * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.\n * @public\n */\nexport function BackstageAppButton(props: BackstageAppButtonProps) {\n  const backstageToggleCommand = React.useMemo(() => BackstageManager.getBackstageToggleCommand(props.icon), [props.icon]);\n  const backstageLabel = React.useMemo(() => props.label || backstageToggleCommand.tooltip, [backstageToggleCommand.tooltip, props.label]);\n  const [icon, setIcon] = React.useState(props.icon ? props.icon : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));\n  const isInitialMount = React.useRef(true);\n  const divClassName = \"uifw-app-button-small\";\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  const handleClick = React.useCallback(() => {\n    if (props.execute)\n      props.execute();\n\n    else\n      backstageToggleCommand.execute();\n  }, [backstageToggleCommand, props]);\n\n  React.useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      onElementRef(ref);\n    } else {\n      setIcon(props.icon ? props.icon : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));\n    }\n  }, [props.icon, onElementRef]);\n\n  let buttonProximityScale: number | undefined;\n\n  if (UiShowHideManager.useProximityOpacity && !UiFramework.isMobile()) {\n    buttonProximityScale = proximityScale;\n  }\n\n  return (\n    <div ref={ref} className={divClassName}>\n      <AppButton\n        small={true}\n        mouseProximity={buttonProximityScale}\n        onClick={handleClick}\n        icon={<Icon iconSpec={icon} />}\n        title={backstageLabel} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"BackstageAppButton.js","sourceRoot":"","sources":["../../../../src/appui-react/widgets/BackstageAppButton.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,oEAAkE;AAClE,0DAA0D;AAC1D,kDAAkE;AAClE,kEAAsD;AACtD,oEAAiE;AACjE,gDAA6C;AAC7C,kEAA+D;AAe/D;;;GAGG;AACH,SAAgB,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,mCAAgB,CAAC,yBAAyB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACzH,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,sBAAsB,CAAC,OAAO,EAAE,CAAC,sBAAsB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IACzI,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAiB,CAAC,0BAA0B,CAAC,kBAAa,CAAC,CAAC,CAAC;IAC9H,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,uBAAuB,CAAC;IAC7C,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,oCAAuB,GAAE,CAAC;IACnE,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,KAAK,CAAC,OAAO;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;;YAGhB,sBAAsB,CAAC,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;SACnB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAiB,CAAC,0BAA0B,CAAC,kBAAa,CAAC,CAAC,CAAC;SAChG;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,IAAI,oBAAwC,CAAC;IAE7C,IAAI,qCAAiB,CAAC,mBAAmB,IAAI,CAAC,yBAAW,CAAC,QAAQ,EAAE,EAAE;QACpE,oBAAoB,GAAG,cAAc,CAAC;KACvC;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY;QACpC,oBAAC,8BAAS,IACR,KAAK,EAAE,IAAI,EACX,cAAc,EAAE,oBAAoB,EACpC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,GAAI,EAC9B,KAAK,EAAE,cAAc,GAAI,CACvB,CACP,CAAC;AACJ,CAAC;AA1CD,gDA0CC","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 widgetIconSvg from \"@bentley/icons-generic/icons/home.svg\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { Icon, useWidgetOpacityContext } from \"@itwin/core-react\";\r\nimport { AppButton } from \"@itwin/appui-layout-react\";\r\nimport { BackstageManager } from \"../backstage/BackstageManager\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { UiShowHideManager } from \"../utils/UiShowHideManager\";\r\n\r\n/**\r\n * Properties for the [[BackstageAppButton]] React component\r\n * @public\r\n */\r\nexport interface BackstageAppButtonProps {\r\n  /** Icon specification for the App button */\r\n  icon?: string;\r\n  /** If specified overrides the default label shown in tooltip. */\r\n  label?: string;\r\n  /** If specified overrides the default action that displays the backstage. */\r\n  execute?: () => void;\r\n}\r\n\r\n/**\r\n * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.\r\n * @public\r\n */\r\nexport function BackstageAppButton(props: BackstageAppButtonProps) {\r\n  const backstageToggleCommand = React.useMemo(() => BackstageManager.getBackstageToggleCommand(props.icon), [props.icon]);\r\n  const backstageLabel = React.useMemo(() => props.label || backstageToggleCommand.tooltip, [backstageToggleCommand.tooltip, props.label]);\r\n  const [icon, setIcon] = React.useState(props.icon ? props.icon : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));\r\n  const isInitialMount = React.useRef(true);\r\n  const divClassName = \"uifw-app-button-small\";\r\n  const { onElementRef, proximityScale } = useWidgetOpacityContext();\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n\r\n  const handleClick = React.useCallback(() => {\r\n    if (props.execute)\r\n      props.execute();\r\n\r\n    else\r\n      backstageToggleCommand.execute();\r\n  }, [backstageToggleCommand, props]);\r\n\r\n  React.useEffect(() => {\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n      onElementRef(ref);\r\n    } else {\r\n      setIcon(props.icon ? props.icon : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));\r\n    }\r\n  }, [props.icon, onElementRef]);\r\n\r\n  let buttonProximityScale: number | undefined;\r\n\r\n  if (UiShowHideManager.useProximityOpacity && !UiFramework.isMobile()) {\r\n    buttonProximityScale = proximityScale;\r\n  }\r\n\r\n  return (\r\n    <div ref={ref} className={divClassName}>\r\n      <AppButton\r\n        small={true}\r\n        mouseProximity={buttonProximityScale}\r\n        onClick={handleClick}\r\n        icon={<Icon iconSpec={icon} />}\r\n        title={backstageLabel} />\r\n    </div>\r\n  );\r\n}\r\n"]}

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

@@ -1,20 +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;
+/** @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.js

@@ -1,61 +1,61 @@
-"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 useUiVisibility_1 = require("../hooks/useUiVisibility");
-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, useUiVisibility_1.useUiVisibility)();
-    // istanbul ignore next
-    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;
+"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 useUiVisibility_1 = require("../hooks/useUiVisibility");
+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, useUiVisibility_1.useUiVisibility)();
+    // istanbul ignore next
+    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

@@ -1 +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,8DAA2D;AAC3D,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,uBAAuB;IACvB,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;AAtDD,sDAsDC","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 Widget\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonToolbarItem, ToolbarOrientation, ToolbarUsage } from \"@itwin/appui-abstract\";\nimport { CoreTools } from \"../tools/CoreToolDefinitions\";\nimport { ToolbarComposer } from \"../toolbar/ToolbarComposer\";\nimport { ToolbarHelper } from \"../toolbar/ToolbarHelper\";\nimport { useUiVisibility } from \"../hooks/useUiVisibility\";\nimport { NavigationWidgetComposer } from \"./NavigationWidgetComposer\";\n\n/** Properties that can be used to append items to the default set of toolbar items of [[DefaultNavigationWidget]].\n * @public\n */\nexport interface BasicNavigationWidgetProps {\n  /** optional set of additional items to include in horizontal toolbar */\n  additionalHorizontalItems?: CommonToolbarItem[];\n  /** optional set of additional items to include in vertical toolbar */\n  additionalVerticalItems?: CommonToolbarItem[];\n}\n\n/** Basic Navigation Widget that provides standard tools to manipulate views containing element data.\n * Supports the specification of additional horizontal and vertical toolbar items through props.\n * @public\n */\nexport function BasicNavigationWidget(props: BasicNavigationWidgetProps) {\n\n  const getHorizontalToolbarItems = React.useCallback(\n    (): CommonToolbarItem[] => {\n      const items: CommonToolbarItem[] = ToolbarHelper.createToolbarItemsFromItemDefs([\n        CoreTools.rotateViewCommand,\n        CoreTools.panViewCommand,\n        CoreTools.fitViewCommand,\n        CoreTools.windowAreaCommand,\n        CoreTools.viewUndoCommand,\n        CoreTools.viewRedoCommand,\n      ]);\n      if (props.additionalHorizontalItems)\n        items.push(...props.additionalHorizontalItems);\n      return items;\n    }, [props.additionalHorizontalItems]);\n\n  const getVerticalToolbarItems = React.useCallback(\n    (): CommonToolbarItem[] => {\n      const items: CommonToolbarItem[] = [];\n      items.push(\n        ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.walkViewCommand),\n        ToolbarHelper.createToolbarItemFromItemDef(20, CoreTools.toggleCameraViewCommand),\n      );\n      if (props.additionalVerticalItems)\n        items.push(...props.additionalVerticalItems);\n      return items;\n    }, [props.additionalVerticalItems]);\n\n  const [horizontalItems, setHorizontalItems] = React.useState(() => getHorizontalToolbarItems());\n  const [verticalItems, setVerticalItems] = React.useState(() => getVerticalToolbarItems());\n\n  const isInitialMount = React.useRef(true);\n  React.useEffect(() => {\n    if (isInitialMount.current)\n      isInitialMount.current = false;\n    else {\n      setHorizontalItems(getHorizontalToolbarItems());\n      setVerticalItems(getVerticalToolbarItems());\n    }\n  }, [props.additionalHorizontalItems, props.additionalVerticalItems, getHorizontalToolbarItems, getVerticalToolbarItems]);\n\n  const uiIsVisible = useUiVisibility();\n  // istanbul ignore next\n  const className = classnames(\n    !uiIsVisible && \"nz-hidden\",\n  );\n\n  return (\n    <NavigationWidgetComposer className={className}\n      horizontalToolbar={<ToolbarComposer items={horizontalItems} usage={ToolbarUsage.ViewNavigation} orientation={ToolbarOrientation.Horizontal} />}\n      verticalToolbar={<ToolbarComposer items={verticalItems} usage={ToolbarUsage.ViewNavigation} orientation={ToolbarOrientation.Vertical} />}\n    />\n  );\n}\n"]}
+{"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,8DAA2D;AAC3D,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,uBAAuB;IACvB,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;AAtDD,sDAsDC","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 \"../hooks/useUiVisibility\";\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  // istanbul ignore next\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

@@ -1,24 +1,24 @@
-/** @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 imported SVG symbol use "webSvg:" 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[];
-}
-/** 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;
+/** @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 imported SVG symbol use "webSvg:" 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[];
+}
+/** 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