@itwin/appui-react 4.2.1 → 4.3.0-dev.1

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

@@ -7,7 +7,7 @@
  * @module Frontstage
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelSectionWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.FrameworkStateReducer = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.stateVersion = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelSectionWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.FrameworkStateReducer = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
 // cSpell:ignore popout
 require("./Frontstage.scss");
 const immer_1 = require("immer");
@@ -55,7 +55,7 @@ const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageCompone
 /** @internal */
 function useLayoutStore() {
     const [def, setDef] = React.useState(UiFramework_1.UiFramework.frontstages.activeFrontstageDef);
-    const [layout, setLayout] = React.useState(() => (0, appui_layout_react_1.createLayoutStore)(def === null || def === void 0 ? void 0 : def.nineZoneState));
+    const [layout, setLayout] = React.useState(() => (0, appui_layout_react_1.createLayoutStore)(def?.nineZoneState));
     React.useEffect(() => {
         return UiFramework_1.UiFramework.frontstages.onFrontstageActivatedEvent.addListener((args) => {
             (0, react_dom_1.unstable_batchedUpdates)(() => {
@@ -108,7 +108,7 @@ function FrameworkStateReducer(state, action, frontstageDef) {
                 const panel = draft.panels[panelSide];
                 const location = toStagePanelLocation(panelSide);
                 const panelDef = frontstageDef.getStagePanelDef(location);
-                if (panelDef === null || panelDef === void 0 ? void 0 : panelDef.maxSizeSpec) {
+                if (panelDef?.maxSizeSpec) {
                     panel.maxSize = getPanelMaxSize(panelDef.maxSizeSpec, panelSide, action.size);
                     if (panel.size) {
                         panel.size = Math.min(Math.max(panel.size, panel.minSize), panel.maxSize);
@@ -126,14 +126,6 @@ function useNineZoneDispatch(frontstageDef) {
         if (action.type === "RESIZE") {
             InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
         }
-        // istanbul ignore if
-        if (action.type === "TOOL_SETTINGS_DRAG_START") {
-            void UiFramework_1.UiFramework.postTelemetry("Tool Settings Undocking", "28B04E07-AE73-4533-A0BA-8E2A8DC99ADF");
-        }
-        // istanbul ignore if
-        if (action.type === "TOOL_SETTINGS_DOCK") {
-            void UiFramework_1.UiFramework.postTelemetry("Tool Settings Docking to Settings Bar", "BEDE684B-B3DB-4637-B3AF-DC3CBA223F94");
-        }
         if (action.type === "WIDGET_TAB_POPOUT") {
             const tabId = action.id;
             frontstageDef.popoutWidget(tabId);
@@ -214,31 +206,33 @@ function useLabels() {
     }), []);
 }
 exports.useLabels = useLabels;
+function toTabArgs(widget) {
+    const label = getWidgetLabel(widget.label);
+    return {
+        allowedPanelTargets: widget.allowedPanelTargets?.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
+        hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
+        canPopout: widget.canPopout,
+        iconSpec: widget.iconSpec,
+        isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+        label,
+        preferredFloatingWidgetSize: widget.defaultFloatingSize,
+        preferredPanelWidgetSize: widget.preferredPanelSize,
+    };
+}
 /** @internal */
 function addWidgets(state, widgets, side, widgetId) {
-    var _a;
     const visibleWidgets = widgets.filter((w) => w.isVisible && w.defaultState !== WidgetState_1.WidgetState.Floating);
     if (visibleWidgets.length === 0)
         return state;
     const tabs = new Array();
     for (const widget of visibleWidgets) {
-        const label = getWidgetLabel(widget.label);
-        state = (0, appui_layout_react_1.addTab)(state, widget.id, {
-            label,
-            iconSpec: widget.iconSpec,
-            preferredPanelWidgetSize: widget.preferredPanelSize,
-            preferredFloatingWidgetSize: widget.defaultFloatingSize,
-            canPopout: widget.canPopout,
-            isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
-            allowedPanelTargets: (_a = widget.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
-        });
+        state = (0, appui_layout_react_1.addTab)(state, widget.id, toTabArgs(widget));
         tabs.push(widget.id);
     }
     const activeWidget = visibleWidgets.find((widget) => widget.isActive);
     const minimized = false;
     // istanbul ignore else
-    if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== WidgetState_1.WidgetState.Floating) {
+    if (activeWidget?.defaultState !== WidgetState_1.WidgetState.Floating) {
         state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
             activeTabId: activeWidget ? activeWidget.id : tabs[0],
             minimized,
@@ -250,13 +244,9 @@ exports.addWidgets = addWidgets;
 /** @internal */
 // istanbul ignore next
 function appendWidgets(state, widgetDefs, location, section) {
-    var _a, _b;
-    if (widgetDefs.length === 0)
-        return state;
     const side = (0, StagePanelDef_1.toPanelSide)(location);
     // Add missing widget tabs.
     for (const widgetDef of widgetDefs) {
-        const label = getWidgetLabel(widgetDef.label);
         const saveTab = state.tabs[widgetDef.id];
         const preferredPanelWidgetSize = saveTab
             ? saveTab.preferredPanelWidgetSize
@@ -271,19 +261,14 @@ function appendWidgets(state, widgetDefs, location, section) {
                     !!saveTab.preferredFloatingWidgetSize)
             : !!widgetDef.defaultFloatingSize;
         state = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
-            label,
-            iconSpec: widgetDef.iconSpec,
-            canPopout: widgetDef.canPopout,
-            preferredPanelWidgetSize,
+            ...toTabArgs(widgetDef),
             preferredFloatingWidgetSize,
+            preferredPanelWidgetSize,
             userSized,
-            isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
-            allowedPanelTargets: (_a = widgetDef.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((l) => (0, StagePanelDef_1.toPanelSide)(l)),
         });
         if (widgetDef.isFloatingStateSupported &&
             widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
-            const floatingContainerId = (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : (0, appui_layout_react_1.getUniqueId)();
+            const floatingContainerId = widgetDef.floatingContainerId ?? (0, appui_layout_react_1.getUniqueId)();
             const widgetContainerId = getWidgetId(location, section);
             const home = {
                 side,
@@ -301,7 +286,7 @@ function appendWidgets(state, widgetDefs, location, section) {
                     width: 300,
                     ...tab.preferredFloatingWidgetSize,
                 };
-                const preferredPoint = preferredPosition !== null && preferredPosition !== void 0 ? preferredPosition : {
+                const preferredPoint = preferredPosition ?? {
                     x: (state.size.width - size.width) / 2,
                     y: (state.size.height - size.height) / 2,
                 };
@@ -361,16 +346,29 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     let state = initialState;
-    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.leftPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.leftPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.rightPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.rightPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.topPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.topPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.bottomPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.bottomPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End)
+        .widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.End);
+    if (frontstageDef.toolSettings) {
+        const newToolSettingsWidgets = determineNewWidgets([frontstageDef.toolSettings], state);
+        for (const newToolSettingsWidget of newToolSettingsWidgets) {
+            state = (0, appui_layout_react_1.addTab)(state, newToolSettingsWidget.id, toTabArgs(newToolSettingsWidget));
+        }
+    }
     return state;
 }
 exports.addMissingWidgets = addMissingWidgets;
@@ -390,10 +388,10 @@ function hideWidgets(state, frontstageDef) {
 /** Removes NineZoneState widgets that are missing in frontstageDef.
  * @internal
  */
-function removeMissingWidgets(frontstageDef, initialState) {
-    let state = initialState;
+function removeMissingWidgets(frontstageDef, state) {
+    const toolSettingsTabId = state.toolSettings?.tabId;
     for (const [, tab] of Object.entries(state.tabs)) {
-        if (tab.id === appui_layout_react_1.toolSettingsTabId)
+        if (tab.id === toolSettingsTabId)
             continue;
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (widgetDef)
@@ -447,8 +445,8 @@ exports.getWidgetId = getWidgetId;
 /** @internal */
 function getPanelSectionWidgets(frontstageDef, location, section) {
     const stagePanel = frontstageDef.getStagePanelDef(location);
-    const panelSection = stagePanel === null || stagePanel === void 0 ? void 0 : stagePanel.getPanelSectionDef(section);
-    return (panelSection === null || panelSection === void 0 ? void 0 : panelSection.widgetDefs) || [];
+    const panelSection = stagePanel?.getPanelSectionDef(section);
+    return panelSection?.widgetDefs || [];
 }
 exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
@@ -476,15 +474,14 @@ function initializePanel(state, frontstageDef, location) {
     state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = (0, immer_1.default)(state, (draft) => {
-        var _a, _b, _c;
         const panel = draft.panels[panelSide];
-        panel.minSize = (_a = panelDef === null || panelDef === void 0 ? void 0 : panelDef.minSize) !== null && _a !== void 0 ? _a : panel.minSize;
-        panel.pinned = (_b = panelDef === null || panelDef === void 0 ? void 0 : panelDef.pinned) !== null && _b !== void 0 ? _b : panel.pinned;
-        panel.resizable = (_c = panelDef === null || panelDef === void 0 ? void 0 : panelDef.resizable) !== null && _c !== void 0 ? _c : panel.resizable;
-        if (panelDef === null || panelDef === void 0 ? void 0 : panelDef.maxSizeSpec) {
+        panel.minSize = panelDef?.minSize ?? panel.minSize;
+        panel.pinned = panelDef?.pinned ?? panel.pinned;
+        panel.resizable = panelDef?.resizable ?? panel.resizable;
+        if (panelDef?.maxSizeSpec) {
             panel.maxSize = getPanelMaxSize(panelDef.maxSizeSpec, panelSide, state.size);
         }
-        const size = panelDef === null || panelDef === void 0 ? void 0 : panelDef.size;
+        const size = panelDef?.size;
         panel.size =
             size === undefined
                 ? size
@@ -502,7 +499,8 @@ function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
         : nineZoneSize.width;
     return (maxSizeSpec.percentage / 100) * size;
 }
-const stateVersion = 13; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
+/** @internal */
+exports.stateVersion = 14; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -519,30 +517,26 @@ function initializeNineZoneState(frontstageDef) {
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Right);
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
-    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        var _a, _b, _c, _d;
-        for (const [, panel] of Object.entries(stateDraft.panels)) {
-            const expanded = panel.widgets.find((widgetId) => stateDraft.widgets[widgetId].minimized === false);
-            const firstWidget = panel.widgets.length > 0
-                ? stateDraft.widgets[panel.widgets[0]]
-                : undefined;
+    nineZone = (0, immer_1.default)(nineZone, (draft) => {
+        for (const [, panel] of Object.entries(draft.panels)) {
+            const expanded = panel.widgets.find((widgetId) => draft.widgets[widgetId].minimized === false);
+            const firstWidget = panel.widgets.length > 0 ? draft.widgets[panel.widgets[0]] : undefined;
             // istanbul ignore next
             if (!expanded && firstWidget) {
                 firstWidget.minimized = false;
             }
         }
-        stateDraft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
-        stateDraft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
-        stateDraft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
-        const toolSettingsWidgetDef = frontstageDef.toolSettings;
-        if (toolSettingsWidgetDef) {
-            const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
-            toolSettingsTab.preferredPanelWidgetSize =
-                toolSettingsWidgetDef.preferredPanelSize;
-        }
+        draft.panels.left.collapsed = isPanelCollapsed(frontstageDef.leftPanel?.panelState);
+        draft.panels.right.collapsed = isPanelCollapsed(frontstageDef.rightPanel?.panelState);
+        draft.panels.top.collapsed = isPanelCollapsed(frontstageDef.topPanel?.panelState);
+        draft.panels.bottom.collapsed = isPanelCollapsed(frontstageDef.bottomPanel?.panelState);
     });
     nineZone = addMissingWidgets(frontstageDef, nineZone);
+    const toolSettingsWidgetDef = frontstageDef.toolSettings;
+    if (toolSettingsWidgetDef) {
+        const toolSettingsTabId = toolSettingsWidgetDef.id;
+        nineZone = (0, appui_layout_react_1.addDockedToolSettings)(nineZone, toolSettingsTabId);
+    }
     nineZone = hideWidgets(nineZone, frontstageDef);
     nineZone = processPopoutWidgets(nineZone, frontstageDef);
     return nineZone;
@@ -556,7 +550,7 @@ exports.initializeNineZoneState = initializeNineZoneState;
 function restoreNineZoneState(frontstageDef, saved) {
     let restored = {
         ...saved,
-        tabs: defaultNineZone.tabs,
+        tabs: {},
     };
     for (const [, tab] of Object.entries(saved.tabs)) {
         // Re-add the placeholder tab in order to correctly remove it from the state if WidgetDef is not found.
@@ -571,15 +565,11 @@ function restoreNineZoneState(frontstageDef, saved) {
             continue;
         }
         restored = (0, immer_1.default)(restored, (draft) => {
-            var _a;
             draft.tabs[tab.id] = {
                 ...tab,
-                label: getWidgetLabel(widgetDef.label),
-                hideWithUiWhenFloating: widgetDef.hideWithUiWhenFloating,
-                iconSpec: widgetDef.iconSpec,
-                canPopout: widgetDef.canPopout,
-                isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-                allowedPanelTargets: (_a = widgetDef.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
+                ...toTabArgs(widgetDef),
+                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
+                preferredPanelWidgetSize: tab.preferredPanelWidgetSize,
             };
         });
     }
@@ -637,12 +627,9 @@ function packNineZoneState(state) {
     };
     packed = (0, immer_1.default)(packed, (draft) => {
         for (const [, tab] of Object.entries(state.tabs)) {
-            if (tab.id === appui_layout_react_1.toolSettingsTabId)
-                continue;
             draft.tabs[tab.id] = {
                 id: tab.id,
                 preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                allowedPanelTargets: tab.allowedPanelTargets,
                 userSized: tab.userSized,
             };
         }
@@ -737,19 +724,27 @@ function addHiddenWidget(state, widgetDef) {
 }
 /** @internal */
 function setWidgetState(state, widgetDef, widgetState) {
-    var _a, _b;
     if (widgetState === WidgetState_1.WidgetState.Hidden) {
         return hideWidget(state, widgetDef);
     }
     else if (widgetState === WidgetState_1.WidgetState.Open) {
         const id = widgetDef.id;
+        if (widgetDef.isToolSettings) {
+            if (!state.toolSettings && !widgetDef.tabLocation) {
+                state = (0, appui_layout_react_1.addDockedToolSettings)(state, id);
+            }
+            if (state.toolSettings?.type === "docked")
+                return state;
+        }
         let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
             state = addHiddenWidget(state, widgetDef);
             location = (0, appui_layout_react_1.getTabLocation)(state, id);
+            if (widgetDef.isToolSettings) {
+                state = (0, appui_layout_react_1.addWidgetToolSettings)(state, id);
+            }
         }
         return (0, immer_1.default)(state, (draft) => {
-            var _a;
             (0, core_bentley_1.assert)(!!location);
             const widget = draft.widgets[location.widgetId];
             widget.minimized = false;
@@ -764,13 +759,16 @@ function setWidgetState(state, widgetDef, widgetState) {
                 panel.collapsed = false;
                 if (undefined === panel.size || 0 === panel.size) {
                     // istanbul ignore next
-                    panel.size = (_a = panel.minSize) !== null && _a !== void 0 ? _a : 200;
+                    panel.size = panel.minSize ?? 200;
                 }
             }
         });
     }
     else if (widgetState === WidgetState_1.WidgetState.Closed) {
         const id = widgetDef.id;
+        if (widgetDef.isToolSettings && state.toolSettings?.type !== "widget") {
+            return state;
+        }
         let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
             state = addHiddenWidget(state, widgetDef);
@@ -799,14 +797,31 @@ function setWidgetState(state, widgetDef, widgetState) {
             return state;
         // Widget is not floating.
         state = (0, appui_layout_react_1.removeTabFromWidget)(state, id);
-        const bounds = (_b = (_a = widgetDef.tabLocation) === null || _a === void 0 ? void 0 : _a.floatingWidget) === null || _b === void 0 ? void 0 : _b.bounds;
+        const bounds = widgetDef.tabLocation?.floatingWidget?.bounds;
         state = (0, appui_layout_react_1.addFloatingWidget)(state, (0, appui_layout_react_1.getUniqueId)(), [id], { bounds });
+        if (widgetDef.isToolSettings) {
+            if (state.toolSettings?.type === "docked") {
+                state = (0, appui_layout_react_1.removeToolSettings)(state);
+            }
+            if (!state.toolSettings) {
+                state = (0, appui_layout_react_1.addWidgetToolSettings)(state, id);
+            }
+        }
     }
     return state;
 }
 exports.setWidgetState = setWidgetState;
 /** Stores widget location and hides it in the UI. */
 function hideWidget(state, widgetDef) {
+    const toolSettingsTabId = state.toolSettings?.tabId;
+    if (widgetDef.id === toolSettingsTabId) {
+        widgetDef.tabLocation = undefined;
+        state = (0, immer_1.default)(state, (draft) => {
+            draft.toolSettings = undefined;
+        });
+        if (state.toolSettings?.type === "docked")
+            return state;
+    }
     const location = (0, appui_layout_react_1.getTabLocation)(state, widgetDef.id);
     if (!location)
         return state;
@@ -913,8 +928,8 @@ function useSavedFrontstageState(frontstageDef) {
                 return;
             if (isFrontstageStateSettingResult(settingResult)) {
                 const setting = settingResult.setting;
-                if (setting.version >= version &&
-                    setting.stateVersion >= stateVersion) {
+                if (setting.version === version &&
+                    setting.stateVersion === exports.stateVersion) {
                     const restored = restoreNineZoneState(frontstageDef, setting.nineZone);
                     frontstageDef.savedWidgetDefs = setting.widgets;
                     restoreSavedWidgets(frontstageDef);
@@ -942,7 +957,7 @@ function useSaveFrontstageSettings(frontstageDef, store) {
             const setting = {
                 id,
                 version: frontstage.version,
-                stateVersion,
+                stateVersion: exports.stateVersion,
                 nineZone: packNineZoneState(state),
                 widgets,
             };
@@ -1004,14 +1019,11 @@ const createListener = (frontstageDef, listener) => {
 /** @internal */
 function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+        return UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(({ widgetDef, widgetState }) => {
+            if (!frontstageDef.nineZoneState)
+                return;
             frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
         });
-        UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
-        return () => {
-            UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
-        };
     }, [frontstageDef]);
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef }) => {
@@ -1069,13 +1081,15 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
     React.useEffect(() => {
         const updateLabel = createListener(frontstageDef, () => {
-            var _a;
             const toolId = UiFramework_1.UiFramework.frontstages.activeToolId;
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             const label = useToolAsToolSettingsLabel
-                ? ((_a = core_frontend_1.IModelApp.tools.find(toolId)) === null || _a === void 0 ? void 0 : _a.flyover) || defaultLabel
+                ? core_frontend_1.IModelApp.tools.find(toolId)?.flyover || defaultLabel
                 : defaultLabel;
-            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, appui_layout_react_1.toolSettingsTabId, label);
+            const toolSettingsTabId = frontstageDef.nineZoneState.toolSettings?.tabId;
+            if (!toolSettingsTabId)
+                return;
+            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, toolSettingsTabId, label);
         });
         // Whenever the frontstageDef or the useTool... changes, keep the label up to date.
         updateLabel();