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

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

@@ -1,24 +1,25 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./StatusBar.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ConfigurableUiControlType } from "../configurableui/ConfigurableUiControl";
-import { StatusBar } from "../statusbar/StatusBar";
-import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
-/** @internal */
-export function WidgetPanelsStatusBar(props) {
-    const frontstageDef = useActiveFrontstageDef();
-    const widgetDef = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.statusBar;
-    if (!widgetDef)
-        return null;
-    const widgetControl = widgetDef.getWidgetControl(ConfigurableUiControlType.StatusBarWidget);
-    const className = classnames("uifw-widgetPanels-statusBar", props.className);
-    return (React.createElement(StatusBar, { className: className, style: props.style, widgetControl: widgetControl }));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./StatusBar.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ConfigurableUiControlType } from "../configurableui/ConfigurableUiControl";
+import { StatusBar } from "../statusbar/StatusBar";
+import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
+/** @internal */
+export function WidgetPanelsStatusBar(props) {
+    const frontstageDef = useActiveFrontstageDef();
+    const widgetDef = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.statusBar;
+    if (!widgetDef)
+        return null;
+    const content = widgetDef.reactNode;
+    const widgetControl = content === undefined ? widgetDef.getWidgetControl(ConfigurableUiControlType.StatusBarWidget) : undefined;
+    const className = classnames("uifw-widgetPanels-statusBar", props.className);
+    return (React.createElement(StatusBar, { className: className, style: props.style, widgetControl: widgetControl }, widgetDef.reactNode));
+}
 //# sourceMappingURL=StatusBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,gBAAgB;AAChB,MAAM,UAAU,qBAAqB,CAAC,KAAkB;IACtD,MAAM,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC/C,MAAM,SAAS,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC;IAC3C,IAAI,CAAC,SAAS;QACZ,OAAO,IAAI,CAAC;IACd,MAAM,aAAa,GAAG,SAAS,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,eAAe,CAA2B,CAAC;IACtH,MAAM,SAAS,GAAG,UAAU,CAC1B,6BAA6B,EAC7B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,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 StatusBar\r\n */\r\n\r\nimport \"./StatusBar.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\nimport { StatusBar } from \"../statusbar/StatusBar\";\r\nimport { StatusBarWidgetControl } from \"../statusbar/StatusBarWidgetControl\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef\";\r\n\r\n/** @internal */\r\nexport function WidgetPanelsStatusBar(props: CommonProps) {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const widgetDef = frontstageDef?.statusBar;\r\n  if (!widgetDef)\r\n    return null;\r\n  const widgetControl = widgetDef.getWidgetControl(ConfigurableUiControlType.StatusBarWidget) as StatusBarWidgetControl;\r\n  const className = classnames(\r\n    \"uifw-widgetPanels-statusBar\",\r\n    props.className,\r\n  );\r\n  return (\r\n    <StatusBar\r\n      className={className}\r\n      style={props.style}\r\n      widgetControl={widgetControl}\r\n    />\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/widget-panels/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,gBAAgB;AAChB,MAAM,UAAU,qBAAqB,CAAC,KAAkB;IACtD,MAAM,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC/C,MAAM,SAAS,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC;IAC3C,IAAI,CAAC,SAAS;QACZ,OAAO,IAAI,CAAC;IACd,MAAM,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC;IACpC,MAAM,aAAa,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,eAAe,CAAuC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtK,MAAM,SAAS,GAAG,UAAU,CAC1B,6BAA6B,EAC7B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,aAAa,IAE3B,SAAS,CAAC,SAAS,CACV,CACb,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 StatusBar\r\n */\r\n\r\nimport \"./StatusBar.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\r\nimport { StatusBar } from \"../statusbar/StatusBar\";\r\nimport { StatusBarWidgetControl } from \"../statusbar/StatusBarWidgetControl\";\r\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef\";\r\n\r\n/** @internal */\r\nexport function WidgetPanelsStatusBar(props: CommonProps) {\r\n  const frontstageDef = useActiveFrontstageDef();\r\n  const widgetDef = frontstageDef?.statusBar;\r\n  if (!widgetDef)\r\n    return null;\r\n  const content = widgetDef.reactNode;\r\n  const widgetControl = content === undefined ? widgetDef.getWidgetControl(ConfigurableUiControlType.StatusBarWidget) as StatusBarWidgetControl | undefined : undefined;\r\n  const className = classnames(\r\n    \"uifw-widgetPanels-statusBar\",\r\n    props.className,\r\n  );\r\n  return (\r\n    <StatusBar\r\n      className={className}\r\n      style={props.style}\r\n      widgetControl={widgetControl}\r\n    >\r\n      {widgetDef.reactNode}\r\n    </StatusBar>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/widget-panels/Tab.d.ts

@@ -1,11 +1,11 @@
-/** @packageDocumentation
- * @module Widget
- */
-/// <reference types="react" />
-import "./Tab.scss";
-import { BadgeType } from "@itwin/appui-abstract";
-/** @internal */
-export declare function WidgetPanelsTab(): JSX.Element;
-/** @internal */
-export declare function getBadgeClassName(badgeType: BadgeType | undefined): "uifw-badge-new" | "uifw-badge-tp" | undefined;
+/** @packageDocumentation
+ * @module Widget
+ */
+/// <reference types="react" />
+import "./Tab.scss";
+import { BadgeType } from "@itwin/appui-abstract";
+/** @internal */
+export declare function WidgetPanelsTab(): JSX.Element;
+/** @internal */
+export declare function getBadgeClassName(badgeType: BadgeType | undefined): "uifw-badge-new" | "uifw-badge-tp" | undefined;
 //# sourceMappingURL=Tab.d.ts.map

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

@@ -1,30 +1,30 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Tab.scss";
-import * as React from "react";
-import { WidgetTab } from "@itwin/appui-layout-react";
-import { useWidgetDef } from "./Content";
-import { BadgeUtilities } from "@itwin/core-react";
-import { BadgeType } from "@itwin/appui-abstract";
-/** @internal */
-export function WidgetPanelsTab() {
-    const widgetDef = useWidgetDef();
-    const badgeType = widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.badgeType;
-    const badgeClassName = getBadgeClassName(badgeType);
-    const badge = React.useMemo(() => BadgeUtilities.getComponentForBadgeType(badgeType), [badgeType]);
-    return (React.createElement(WidgetTab, { className: badgeClassName, badge: badge }));
-}
-/** @internal */
-export function getBadgeClassName(badgeType) {
-    if (badgeType === BadgeType.New)
-        return "uifw-badge-new";
-    else if (badgeType === BadgeType.TechnicalPreview)
-        return "uifw-badge-tp";
-    return undefined;
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "./Tab.scss";
+import * as React from "react";
+import { WidgetTab } from "@itwin/appui-layout-react";
+import { useWidgetDef } from "./Content";
+import { BadgeUtilities } from "@itwin/core-react";
+import { BadgeType } from "@itwin/appui-abstract";
+/** @internal */
+export function WidgetPanelsTab() {
+    const widgetDef = useWidgetDef();
+    const badgeType = widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.badgeType;
+    const badgeClassName = getBadgeClassName(badgeType);
+    const badge = React.useMemo(() => BadgeUtilities.getComponentForBadgeType(badgeType), [badgeType]);
+    return (React.createElement(WidgetTab, { className: badgeClassName, badge: badge }));
+}
+/** @internal */
+export function getBadgeClassName(badgeType) {
+    if (badgeType === BadgeType.New)
+        return "uifw-badge-new";
+    else if (badgeType === BadgeType.TechnicalPreview)
+        return "uifw-badge-tp";
+    return undefined;
+}
 //# sourceMappingURL=Tab.js.map

package/lib/esm/appui-react/widget-panels/ToolSettings.d.ts

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./ToolSettings.scss";
-import * as React from "react";
-/** Defines a ToolSettings property entry.
- * @public
- */
-export interface ToolSettingsEntry {
-    labelNode: React.ReactNode;
-    editorNode: React.ReactNode;
-}
-/** @internal */
-export declare function WidgetPanelsToolSettings(): JSX.Element | null;
-/** @internal */
-export declare function ToolSettingsDockedContent(): JSX.Element;
-/** @internal */
-export declare function useHorizontalToolSettingNodes(): ToolSettingsEntry[] | undefined;
-/** Defines the ToolSettingsEntry entries that are used to populate a grid layout of ToolSetting properties.
- * Used only when the "Use UI 2.0" setting is true
- * @internal
- */
-export interface ToolSettingsGridProps {
-    settings?: ToolSettingsEntry[];
-}
-/** 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
- */
-export declare function ToolSettingsGrid({ settings }: ToolSettingsGridProps): JSX.Element;
-/** @internal */
-export declare function useToolSettingsNode(): string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined;
-/** @internal */
-export declare function ToolSettingsContent(): JSX.Element | null;
-/** @internal */
-export declare function ToolSettingsWidgetContent(): JSX.Element;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./ToolSettings.scss";
+import * as React from "react";
+/** Defines a ToolSettings property entry.
+ * @public
+ */
+export interface ToolSettingsEntry {
+    labelNode: React.ReactNode;
+    editorNode: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetPanelsToolSettings(): JSX.Element | null;
+/** @internal */
+export declare function ToolSettingsDockedContent(): JSX.Element;
+/** @internal */
+export declare function useHorizontalToolSettingNodes(): ToolSettingsEntry[] | undefined;
+/** Defines the ToolSettingsEntry entries that are used to populate a grid layout of ToolSetting properties.
+ * Used only when the "Use UI 2.0" setting is true
+ * @internal
+ */
+export interface ToolSettingsGridProps {
+    settings?: ToolSettingsEntry[];
+}
+/** 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
+ */
+export declare function ToolSettingsGrid({ settings }: ToolSettingsGridProps): JSX.Element;
+/** @internal */
+export declare function useToolSettingsNode(): string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined;
+/** @internal */
+export declare function ToolSettingsContent(): JSX.Element | null;
+/** @internal */
+export declare function ToolSettingsWidgetContent(): JSX.Element;
 //# sourceMappingURL=ToolSettings.d.ts.map

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

@@ -1,147 +1,147 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./ToolSettings.scss";
-import * as React from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { DockedToolSetting, DockedToolSettings, ScrollableWidgetContent, useLayout } from "@itwin/appui-layout-react";
-import { UiFramework } from "../UiFramework";
-import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
-import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
-function EmptyToolSettingsEntry() {
-    const labelString = IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettings");
-    const labelNode = React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal-empty" }, labelString);
-    const editorNode = React.createElement("div", null);
-    return { labelNode, editorNode };
-}
-/** @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 */
-export function WidgetPanelsToolSettings() {
-    const frontstageDef = useActiveFrontstageDef();
-    const toolSettingsType = useLayout((state) => state.toolSettings.type);
-    const toolSettings = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.toolSettings;
-    if (!toolSettings || toolSettingsType === "widget")
-        return null;
-    return (React.createElement(ToolSettingsDockedContent, null));
-}
-/** @internal */
-export 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(DockedToolSettings, { itemId: (_b = (_a = InternalFrontstageManager.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(DockedToolSetting, { key: index },
-        React.createElement(TsLabel, null, entry.labelNode),
-        entry.editorNode))));
-}
-/** @internal */
-export function useHorizontalToolSettingNodes() {
-    var _a;
-    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes);
-    React.useEffect(() => {
-        const handleToolActivatedEvent = () => {
-            var _a;
-            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
-            if (!nodes || nodes.length === 0)
-                setSettings([EmptyToolSettingsEntry()]);
-            else
-                setSettings(nodes);
-        };
-        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
-        return () => {
-            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
-        };
-    }, [setSettings]);
-    React.useEffect(() => {
-        const handleToolSettingsReloadEvent = () => {
-            var _a;
-            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
-            if (!nodes || nodes.length === 0)
-                setSettings([EmptyToolSettingsEntry()]);
-            else
-                setSettings(nodes);
-        };
-        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
-        return () => {
-            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
-        };
-    }, [setSettings]);
-    return settings;
-}
-/** 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
- */
-export 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));
-    })));
-}
-/** @internal */
-export function useToolSettingsNode() {
-    var _a;
-    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode);
-    React.useEffect(() => {
-        const handleToolActivatedEvent = () => {
-            var _a;
-            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
-            setSettings(nodes);
-        };
-        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
-        return () => {
-            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
-        };
-    }, [setSettings]);
-    React.useEffect(() => {
-        const handleToolSettingsReloadEvent = () => {
-            var _a;
-            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
-            setSettings(nodes);
-        };
-        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
-        return () => {
-            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
-        };
-    }, [setSettings]);
-    return settings;
-}
-/** @internal */
-export function ToolSettingsContent() {
-    const toolSettingsType = useLayout((state) => state.toolSettings.type);
-    // This is needed to remount underlying components tree when going into widget state.
-    if (toolSettingsType === "docked")
-        return null;
-    return React.createElement(ToolSettingsWidgetContent, null);
-}
-/** @internal */
-export 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 = InternalFrontstageManager.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(ScrollableWidgetContent, null, node)));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./ToolSettings.scss";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { DockedToolSetting, DockedToolSettings, ScrollableWidgetContent, useLayout } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
+import { useActiveFrontstageDef } from "../frontstage/FrontstageDef";
+function EmptyToolSettingsEntry() {
+    const labelString = IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettings");
+    const labelNode = React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal-empty" }, labelString);
+    const editorNode = React.createElement("div", null);
+    return { labelNode, editorNode };
+}
+/** @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 */
+export function WidgetPanelsToolSettings() {
+    const frontstageDef = useActiveFrontstageDef();
+    const toolSettingsType = useLayout((state) => state.toolSettings.type);
+    const toolSettings = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.toolSettings;
+    if (!toolSettings || toolSettingsType === "widget")
+        return null;
+    return (React.createElement(ToolSettingsDockedContent, null));
+}
+/** @internal */
+export 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(DockedToolSettings, { itemId: (_b = (_a = InternalFrontstageManager.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(DockedToolSetting, { key: index },
+        React.createElement(TsLabel, null, entry.labelNode),
+        entry.editorNode))));
+}
+/** @internal */
+export function useHorizontalToolSettingNodes() {
+    var _a;
+    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes);
+    React.useEffect(() => {
+        const handleToolActivatedEvent = () => {
+            var _a;
+            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
+            if (!nodes || nodes.length === 0)
+                setSettings([EmptyToolSettingsEntry()]);
+            else
+                setSettings(nodes);
+        };
+        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
+        return () => {
+            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
+        };
+    }, [setSettings]);
+    React.useEffect(() => {
+        const handleToolSettingsReloadEvent = () => {
+            var _a;
+            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
+            if (!nodes || nodes.length === 0)
+                setSettings([EmptyToolSettingsEntry()]);
+            else
+                setSettings(nodes);
+        };
+        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
+        return () => {
+            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
+        };
+    }, [setSettings]);
+    return settings;
+}
+/** 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
+ */
+export 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));
+    })));
+}
+/** @internal */
+export function useToolSettingsNode() {
+    var _a;
+    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode);
+    React.useEffect(() => {
+        const handleToolActivatedEvent = () => {
+            var _a;
+            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
+            setSettings(nodes);
+        };
+        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
+        return () => {
+            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
+        };
+    }, [setSettings]);
+    React.useEffect(() => {
+        const handleToolSettingsReloadEvent = () => {
+            var _a;
+            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
+            setSettings(nodes);
+        };
+        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
+        return () => {
+            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
+        };
+    }, [setSettings]);
+    return settings;
+}
+/** @internal */
+export function ToolSettingsContent() {
+    const toolSettingsType = useLayout((state) => state.toolSettings.type);
+    // This is needed to remount underlying components tree when going into widget state.
+    if (toolSettingsType === "docked")
+        return null;
+    return React.createElement(ToolSettingsWidgetContent, null);
+}
+/** @internal */
+export 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 = InternalFrontstageManager.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(ScrollableWidgetContent, null, node)));
+}
 //# sourceMappingURL=ToolSettings.js.map

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

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

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

@@ -1,21 +1,21 @@
-/*---------------------------------------------------------------------------------------------
-* 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() {
+    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));
+}
 //# sourceMappingURL=Toolbars.js.map

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