@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,21 +1,20 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Toolbars.scss";
-import * as React from "react";
-import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
-/** @internal */
-export function WidgetPanelsToolbars() {
-    var _a, _b;
-    const frontstageDef = useActiveFrontstageDef();
-    const tools = (_a = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.contentManipulation) === null || _a === void 0 ? void 0 : _a.reactNode;
-    const navigation = (_b = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.viewNavigation) === null || _b === void 0 ? void 0 : _b.reactNode;
-    return (React.createElement("div", { className: "uifw-widgetPanels-toolbars" },
-        tools,
-        navigation));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Toolbars.scss";
+import * as React from "react";
+import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
+/** @internal */
+export function WidgetPanelsToolbars() {
+    const frontstageDef = useActiveFrontstageDef();
+    const tools = frontstageDef?.contentManipulation?.reactNode;
+    const navigation = frontstageDef?.viewNavigation?.reactNode;
+    return (React.createElement("div", { className: "uifw-widgetPanels-toolbars" },
+        tools,
+        navigation));
+}
 //# sourceMappingURL=Toolbars.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbars.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Toolbars.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;;IAClC,MAAM,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,mBAAmB,0CAAE,SAAS,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,cAAc,0CAAE,SAAS,CAAC;IAC5D,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACxC,KAAK;QACL,UAAU,CACP,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Item\r\n */\r\n\r\nimport \"./Toolbars.scss\";\r\nimport * as React from \"react\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef\";\r\n\r\n/** @internal */\r\nexport function WidgetPanelsToolbars() {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const tools = frontstageDef?.contentManipulation?.reactNode;\r\n  const navigation = frontstageDef?.viewNavigation?.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"]}
+{"version":3,"file":"Toolbars.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/Toolbars.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC/C,MAAM,KAAK,GAAG,aAAa,EAAE,mBAAmB,EAAE,SAAS,CAAC;IAC5D,MAAM,UAAU,GAAG,aAAa,EAAE,cAAc,EAAE,SAAS,CAAC;IAC5D,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;QACxC,KAAK;QACL,UAAU,CACP,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Item\r\n */\r\n\r\nimport \"./Toolbars.scss\";\r\nimport * as React from \"react\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef\";\r\n\r\n/** @internal */\r\nexport function WidgetPanelsToolbars() {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const tools = frontstageDef?.contentManipulation?.reactNode;\r\n  const navigation = frontstageDef?.viewNavigation?.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/esm/appui-react/widget-panels/useTransientState.d.ts

@@ -1,8 +1,8 @@
-/** @packageDocumentation
- * @module Widget
- */
-/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.
- * @beta
- */
-export declare function useTransientState(onSave?: () => void, onRestore?: () => void): void;
+/** @packageDocumentation
+ * @module Widget
+ */
+/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.
+ * @beta
+ */
+export declare function useTransientState(onSave?: () => void, onRestore?: () => void): void;
 //# sourceMappingURL=useTransientState.d.ts.map

package/lib/esm/appui-react/widget-panels/useTransientState.js

@@ -1,15 +1,15 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import { useTransientState as useTransientStateImpl } from "@itwin/appui-layout-react";
-/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.
- * @beta
- */
-export function useTransientState(onSave, onRestore) {
-    useTransientStateImpl(onSave, onRestore);
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import { useTransientState as useTransientStateImpl } from "@itwin/appui-layout-react";
+/** Hook that allows to save and restore transient DOM state (i.e. scroll offset) of a widget.
+ * @beta
+ */
+export function useTransientState(onSave, onRestore) {
+    useTransientStateImpl(onSave, onRestore);
+}
 //# sourceMappingURL=useTransientState.js.map

package/lib/esm/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/esm/appui-react/widget-panels/useWidgetDirection.js

@@ -1,26 +1,26 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import { getTabLocation, isHorizontalPanelSide, TabIdContext, useLayout } from "@itwin/appui-layout-react";
-import { assert } from "@itwin/core-bentley";
-/** Returns widget direction.
- * I.e. "horizontal" when widget is in bottom/top stage panel.
- * @alpha
- */
-export function useWidgetDirection() {
-    const tabId = React.useContext(TabIdContext);
-    assert(!!tabId);
-    return useLayout((state) => {
-        const tabLocation = getTabLocation(state, tabId);
-        if (tabLocation && ("side" in tabLocation) && isHorizontalPanelSide(tabLocation.side)) {
-            return "horizontal";
-        }
-        return "vertical";
-    });
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import { getTabLocation, isHorizontalPanelSide, TabIdContext, useLayout } from "@itwin/appui-layout-react";
+import { assert } from "@itwin/core-bentley";
+/** Returns widget direction.
+ * I.e. "horizontal" when widget is in bottom/top stage panel.
+ * @alpha
+ */
+export function useWidgetDirection() {
+    const tabId = React.useContext(TabIdContext);
+    assert(!!tabId);
+    return useLayout((state) => {
+        const tabLocation = getTabLocation(state, tabId);
+        if (tabLocation && ("side" in tabLocation) && isHorizontalPanelSide(tabLocation.side)) {
+            return "horizontal";
+        }
+        return "vertical";
+    });
+}
 //# sourceMappingURL=useWidgetDirection.js.map

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

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Widget
- */
-/// <reference types="react" />
-import { IconSpec } from "@itwin/core-react";
-/**
- * Properties for the [[BackstageAppButton]] React component
- * @public
- */
-export interface BackstageAppButtonProps {
-    /** Icon specification for the App button */
-    icon?: IconSpec;
-    /** 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" />
+import { IconSpec } from "@itwin/core-react";
+/**
+ * Properties for the [[BackstageAppButton]] React component
+ * @public
+ */
+export interface BackstageAppButtonProps {
+    /** Icon specification for the App button */
+    icon?: IconSpec;
+    /** 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/esm/appui-react/widgets/BackstageAppButton.js

@@ -1,48 +1,48 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import widgetIconSvg from "@bentley/icons-generic/icons/home.svg";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import { Icon, useWidgetOpacityContext } from "@itwin/core-react";
-import { AppButton } from "@itwin/appui-layout-react";
-import { UiFramework } from "../UiFramework";
-/**
- * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
- * @public
- */
-export function BackstageAppButton(props) {
-    const backstageToggleCommand = React.useMemo(() => UiFramework.backstage.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 : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));
-    const isInitialMount = React.useRef(true);
-    const divClassName = "uifw-app-button-small";
-    const { onElementRef, proximityScale } = 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 : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));
-        }
-    }, [props.icon, onElementRef]);
-    let buttonProximityScale;
-    if (UiFramework.visibility.useProximityOpacity && !UiFramework.isMobile()) {
-        buttonProximityScale = proximityScale;
-    }
-    return (React.createElement("div", { ref: ref, className: divClassName },
-        React.createElement(AppButton, { small: true, mouseProximity: buttonProximityScale, onClick: handleClick, icon: React.createElement(Icon, { iconSpec: icon }), title: backstageLabel })));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import widgetIconSvg from "@bentley/icons-generic/icons/home.svg";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import { Icon, useWidgetOpacityContext } from "@itwin/core-react";
+import { AppButton } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+/**
+ * BackstageAppButton used to toggle display of Backstage and is shown in the corner of the ToolWidget.
+ * @public
+ */
+export function BackstageAppButton(props) {
+    const backstageToggleCommand = React.useMemo(() => UiFramework.backstage.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 : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));
+    const isInitialMount = React.useRef(true);
+    const divClassName = "uifw-app-button-small";
+    const { onElementRef, proximityScale } = 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 : IconSpecUtilities.createWebComponentIconSpec(widgetIconSvg));
+        }
+    }, [props.icon, onElementRef]);
+    let buttonProximityScale;
+    if (UiFramework.visibility.useProximityOpacity && !UiFramework.isMobile()) {
+        buttonProximityScale = proximityScale;
+    }
+    return (React.createElement("div", { ref: ref, className: divClassName },
+        React.createElement(AppButton, { small: true, mouseProximity: buttonProximityScale, onClick: handleClick, icon: React.createElement(Icon, { iconSpec: icon }), title: backstageLabel })));
+}
 //# sourceMappingURL=BackstageAppButton.js.map

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

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module Widget
- */
-/// <reference types="react" />
-import { ToolbarItem } from "../toolbar/ToolbarItem";
-/** Properties that can be used to append items to the default set of toolbar items.
- * @public
- */
-export interface BasicNavigationWidgetProps {
-    /** optional set of additional items to include in horizontal toolbar */
-    additionalHorizontalItems?: ToolbarItem[];
-    /** optional set of additional items to include in vertical toolbar */
-    additionalVerticalItems?: ToolbarItem[];
-}
-/** 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 { ToolbarItem } from "../toolbar/ToolbarItem";
+/** Properties that can be used to append items to the default set of toolbar items.
+ * @public
+ */
+export interface BasicNavigationWidgetProps {
+    /** optional set of additional items to include in horizontal toolbar */
+    additionalHorizontalItems?: ToolbarItem[];
+    /** optional set of additional items to include in vertical toolbar */
+    additionalVerticalItems?: ToolbarItem[];
+}
+/** 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/esm/appui-react/widgets/BasicNavigationWidget.js

@@ -1,57 +1,57 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import classnames from "classnames";
-import * as React from "react";
-import { CoreTools } from "../tools/CoreToolDefinitions";
-import { ToolbarComposer } from "../toolbar/ToolbarComposer";
-import { ToolbarHelper } from "../toolbar/ToolbarHelper";
-import { useUiVisibility } from "../hooks/useUiVisibility";
-import { NavigationWidgetComposer } from "./NavigationWidgetComposer";
-import { ToolbarOrientation, ToolbarUsage } from "../toolbar/ToolbarItem";
-/** 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 function BasicNavigationWidget(props) {
-    const getHorizontalToolbarItems = React.useCallback(() => {
-        const items = ToolbarHelper.createToolbarItemsFromItemDefs([
-            CoreTools.rotateViewCommand,
-            CoreTools.panViewCommand,
-            CoreTools.fitViewCommand,
-            CoreTools.windowAreaCommand,
-            CoreTools.viewUndoCommand,
-            CoreTools.viewRedoCommand,
-        ]);
-        if (props.additionalHorizontalItems)
-            items.push(...props.additionalHorizontalItems);
-        return items;
-    }, [props.additionalHorizontalItems]);
-    const getVerticalToolbarItems = React.useCallback(() => {
-        const items = [];
-        items.push(ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.walkViewCommand), ToolbarHelper.createToolbarItemFromItemDef(20, 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 = useUiVisibility();
-    // istanbul ignore next
-    const className = classnames(!uiIsVisible && "nz-hidden");
-    return (React.createElement(NavigationWidgetComposer, { className: className, horizontalToolbar: React.createElement(ToolbarComposer, { items: horizontalItems, usage: ToolbarUsage.ViewNavigation, orientation: ToolbarOrientation.Horizontal }), verticalToolbar: React.createElement(ToolbarComposer, { items: verticalItems, usage: ToolbarUsage.ViewNavigation, orientation: ToolbarOrientation.Vertical }) }));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import classnames from "classnames";
+import * as React from "react";
+import { CoreTools } from "../tools/CoreToolDefinitions";
+import { ToolbarComposer } from "../toolbar/ToolbarComposer";
+import { ToolbarHelper } from "../toolbar/ToolbarHelper";
+import { useUiVisibility } from "../hooks/useUiVisibility";
+import { NavigationWidgetComposer } from "./NavigationWidgetComposer";
+import { ToolbarOrientation, ToolbarUsage } from "../toolbar/ToolbarItem";
+/** 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 function BasicNavigationWidget(props) {
+    const getHorizontalToolbarItems = React.useCallback(() => {
+        const items = ToolbarHelper.createToolbarItemsFromItemDefs([
+            CoreTools.rotateViewCommand,
+            CoreTools.panViewCommand,
+            CoreTools.fitViewCommand,
+            CoreTools.windowAreaCommand,
+            CoreTools.viewUndoCommand,
+            CoreTools.viewRedoCommand,
+        ]);
+        if (props.additionalHorizontalItems)
+            items.push(...props.additionalHorizontalItems);
+        return items;
+    }, [props.additionalHorizontalItems]);
+    const getVerticalToolbarItems = React.useCallback(() => {
+        const items = [];
+        items.push(ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.walkViewCommand), ToolbarHelper.createToolbarItemFromItemDef(20, 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 = useUiVisibility();
+    // istanbul ignore next
+    const className = classnames(!uiIsVisible && "nz-hidden");
+    return (React.createElement(NavigationWidgetComposer, { className: className, horizontalToolbar: React.createElement(ToolbarComposer, { items: horizontalItems, usage: ToolbarUsage.ViewNavigation, orientation: ToolbarOrientation.Horizontal }), verticalToolbar: React.createElement(ToolbarComposer, { items: verticalItems, usage: ToolbarUsage.ViewNavigation, orientation: ToolbarOrientation.Vertical }) }));
+}
 //# sourceMappingURL=BasicNavigationWidget.js.map

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

@@ -1,24 +1,24 @@
-/** @packageDocumentation
- * @module Widget
- */
-/// <reference types="react" />
-import { ToolbarItem } from "../toolbar/ToolbarItem";
-/** Properties that can be used to append items to the default set of toolbar items.
- * @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?: ToolbarItem[];
-    /** optional set of additional items to include in vertical toolbar */
-    additionalVerticalItems?: ToolbarItem[];
-}
-/** 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 { ToolbarItem } from "../toolbar/ToolbarItem";
+/** Properties that can be used to append items to the default set of toolbar items.
+ * @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?: ToolbarItem[];
+    /** optional set of additional items to include in vertical toolbar */
+    additionalVerticalItems?: ToolbarItem[];
+}
+/** 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