@itwin/appui-react 4.5.1 → 4.6.0

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.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;
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.expandWidget = exports.showWidget = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.stateVersion = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelSectionWidgets = exports.getWidgetId = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
 // cSpell:ignore popout
 require("./Frontstage.scss");
 const immer_1 = require("immer");
@@ -17,6 +17,7 @@ const core_bentley_1 = require("@itwin/core-bentley");
 const core_react_1 = require("@itwin/core-react");
 const components_react_1 = require("@itwin/components-react");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const FrontstageDef_1 = require("../frontstage/FrontstageDef");
 const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
 const UiFramework_1 = require("../UiFramework");
 const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
@@ -53,30 +54,19 @@ const widgetContent = React.createElement(Content_1.WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
 /** @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?.nineZoneState));
-    React.useEffect(() => {
-        return UiFramework_1.UiFramework.frontstages.onFrontstageActivatedEvent.addListener((args) => {
-            (0, react_dom_1.unstable_batchedUpdates)(() => {
-                setDef(args.activatedFrontstageDef);
-                setLayout((0, appui_layout_react_1.createLayoutStore)(args.activatedFrontstageDef.nineZoneState));
-            });
-        });
-    }, []);
+function useLayoutStore(frontstageDef) {
+    const layoutStore = React.useMemo(() => (0, appui_layout_react_1.createLayoutStore)(frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.nineZoneState), [frontstageDef]);
     React.useEffect(() => {
         return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
-            if (args.frontstageDef !== def ||
-                def.isStageClosing ||
-                def.isApplicationClosing)
+            if (args.frontstageDef !== frontstageDef)
                 return;
             (0, react_dom_1.unstable_batchedUpdates)(() => {
                 // https://github.com/pmndrs/zustand/blob/main/docs/guides/event-handler-in-pre-react-18.md
-                layout.setState(args.state || defaultNineZone);
+                layoutStore.setState(args.state || defaultNineZone);
             });
         });
-    }, [def, layout]);
-    return [layout, def];
+    }, [frontstageDef, layoutStore]);
+    return layoutStore;
 }
 exports.useLayoutStore = useLayoutStore;
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
@@ -85,68 +75,32 @@ exports.useLayoutStore = useLayoutStore;
 function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
         const size = InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize;
-        let state = frontstageDef.nineZoneState;
+        const state = frontstageDef.nineZoneState;
         if (!size || !state)
             return;
-        state = FrameworkStateReducer(state, {
+        frontstageDef.dispatch({
             type: "RESIZE",
             size: {
                 height: size.height,
                 width: size.width,
             },
-        }, frontstageDef);
-        frontstageDef.nineZoneState = state;
+        });
     }, [frontstageDef]);
 }
 exports.useUpdateNineZoneSize = useUpdateNineZoneSize;
 /** @internal */
-function FrameworkStateReducer(state, action, frontstageDef) {
-    state = (0, appui_layout_react_1.NineZoneStateReducer)(state, action);
-    if (action.type === "RESIZE") {
-        state = (0, immer_1.default)(state, (draft) => {
-            for (const panelSide of appui_layout_react_1.panelSides) {
-                const panel = draft.panels[panelSide];
-                const location = toStagePanelLocation(panelSide);
-                const panelDef = frontstageDef.getStagePanelDef(location);
-                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);
-                    }
-                }
-            }
-        });
-    }
-    return state;
-}
-exports.FrameworkStateReducer = FrameworkStateReducer;
-/** @internal */
 function useNineZoneDispatch(frontstageDef) {
-    const dispatch = React.useCallback((action) => {
-        if (action.type === "RESIZE") {
-            InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
-        }
-        if (action.type === "WIDGET_TAB_POPOUT") {
-            const tabId = action.id;
-            frontstageDef.popoutWidget(tabId);
-            return;
-        }
-        const state = frontstageDef.nineZoneState;
-        if (!state)
-            return;
-        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
-    }, [frontstageDef]);
-    return dispatch;
+    return React.useMemo(() => frontstageDef.dispatch, [frontstageDef]);
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
 function WidgetPanelsFrontstage() {
-    const [layout, frontstageDef] = useLayoutStore();
+    const frontstageDef = (0, FrontstageDef_1.useActiveFrontstageDef)();
+    const layout = useLayoutStore(frontstageDef);
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
         };
-        frontstageDef && frontstageDef.setIsApplicationClosing(false);
         window.addEventListener("unload", triggerWidowCloseProcessing);
         return () => {
             window.removeEventListener("unload", triggerWidowCloseProcessing);
@@ -207,17 +161,19 @@ function useLabels() {
 }
 exports.useLabels = useLabels;
 function toTabArgs(widget) {
+    var _a;
     const label = getWidgetLabel(widget.label);
-    return {
-        allowedPanelTargets: widget.allowedPanelTargets?.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
+    const args = {
+        allowedPanelTargets: (_a = widget.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
         hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
         canPopout: widget.canPopout,
         iconSpec: widget.iconSpec,
-        isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+        isFloatingWidgetResizable: widget.isFloatingStateWindowResizable,
         label,
         preferredFloatingWidgetSize: widget.defaultFloatingSize,
         preferredPanelWidgetSize: widget.preferredPanelSize,
     };
+    return args;
 }
 /** @internal */
 function addWidgets(state, widgets, side, widgetId) {
@@ -232,7 +188,7 @@ function addWidgets(state, widgets, side, widgetId) {
     const activeWidget = visibleWidgets.find((widget) => widget.isActive);
     const minimized = false;
     // istanbul ignore else
-    if (activeWidget?.defaultState !== WidgetState_1.WidgetState.Floating) {
+    if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== WidgetState_1.WidgetState.Floating) {
         state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
             activeTabId: activeWidget ? activeWidget.id : tabs[0],
             minimized,
@@ -266,9 +222,15 @@ function appendWidgets(state, widgetDefs, location, section) {
             preferredPanelWidgetSize,
             userSized,
         });
-        if (widgetDef.isFloatingStateSupported &&
+        const savedTab = state.savedTabs.byId[widgetDef.id];
+        if (savedTab) {
+            state = (0, appui_layout_react_1.addRemovedTab)(state, widgetDef.id);
+        }
+        else if (widgetDef.isFloatingStateSupported &&
             widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
-            const floatingContainerId = widgetDef.floatingContainerId ?? (0, appui_layout_react_1.getUniqueId)();
+            const floatingContainerId = widgetDef.floatingContainerId
+                ? widgetDef.floatingContainerId
+                : (0, appui_layout_react_1.getUniqueId)();
             const widgetContainerId = getWidgetId(location, section);
             const home = {
                 side,
@@ -286,7 +248,7 @@ function appendWidgets(state, widgetDefs, location, section) {
                     width: 300,
                     ...tab.preferredFloatingWidgetSize,
                 };
-                const preferredPoint = preferredPosition ?? {
+                const preferredPoint = preferredPosition !== null && preferredPosition !== void 0 ? preferredPosition : {
                     x: (state.size.width - size.width) / 2,
                     y: (state.size.height - size.height) / 2,
                 };
@@ -297,8 +259,6 @@ function appendWidgets(state, widgetDefs, location, section) {
                     bounds: containedBounds.toProps(),
                     home,
                     userSized,
-                }, {
-                    isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
                 });
             }
         }
@@ -322,47 +282,45 @@ function appendWidgets(state, widgetDefs, location, section) {
                 }
             }
         }
+        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
+            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+                type: "WIDGET_TAB_HIDE",
+                id: widgetDef.id,
+            });
+        }
     }
     return state;
 }
 exports.appendWidgets = appendWidgets;
-function processPopoutWidgets(initialState, frontstageDef) {
-    // istanbul ignore next
-    if (!initialState.popoutWidgets)
-        return initialState;
-    // istanbul ignore next - not unit testing electron case that reopens popout windows
-    if (initialState.popoutWidgets && core_bentley_1.ProcessDetector.isElectronAppFrontend) {
-        if (initialState.popoutWidgets.allIds.length &&
-            core_bentley_1.ProcessDetector.isElectronAppFrontend) {
-            for (const widgetContainerId of initialState.popoutWidgets.allIds) {
-                frontstageDef.openPopoutWidgetContainer(initialState, widgetContainerId);
-            }
-        }
-        return initialState;
+function processPopoutWidgets(state) {
+    // Electron reopens popout windows
+    if (core_bentley_1.ProcessDetector.isElectronAppFrontend) {
+        return state;
     }
-    return (0, appui_layout_react_1.convertAllPopupWidgetContainersToFloating)(initialState);
+    for (const popoutWidgetId of state.popoutWidgets.allIds) {
+        const widget = state.widgets[popoutWidgetId];
+        const id = widget.tabs[0];
+        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+            type: "WIDGET_TAB_FLOAT",
+            id,
+        });
+    }
+    return state;
 }
 /** Adds frontstageDef widgets that are missing in NineZoneState.
  * @internal
  */
 function addMissingWidgets(frontstageDef, initialState) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let state = initialState;
-    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);
+    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);
     if (frontstageDef.toolSettings) {
         const newToolSettingsWidgets = determineNewWidgets([frontstageDef.toolSettings], state);
         for (const newToolSettingsWidget of newToolSettingsWidgets) {
@@ -380,7 +338,10 @@ function hideWidgets(state, frontstageDef) {
         if (!widgetDef)
             continue;
         if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
-            state = hideWidget(state, widgetDef);
+            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+                type: "WIDGET_TAB_HIDE",
+                id: widgetDef.id,
+            });
         }
     }
     return state;
@@ -389,33 +350,25 @@ function hideWidgets(state, frontstageDef) {
  * @internal
  */
 function removeMissingWidgets(frontstageDef, state) {
-    const toolSettingsTabId = state.toolSettings?.tabId;
+    var _a;
+    const toolSettingsTabId = (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId;
     for (const [, tab] of Object.entries(state.tabs)) {
         if (tab.id === toolSettingsTabId)
             continue;
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (widgetDef)
             continue;
+        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+            type: "WIDGET_TAB_HIDE",
+            id: tab.id,
+        });
         state = (0, appui_layout_react_1.removeTab)(state, tab.id);
     }
     return state;
 }
-exports.removeMissingWidgets = removeMissingWidgets;
 function getWidgetLabel(label) {
     return label === "" ? "Widget" : label;
 }
-function toStagePanelLocation(side) {
-    switch (side) {
-        case "bottom":
-            return StagePanelLocation_1.StagePanelLocation.Bottom;
-        case "left":
-            return StagePanelLocation_1.StagePanelLocation.Left;
-        case "right":
-            return StagePanelLocation_1.StagePanelLocation.Right;
-        case "top":
-            return StagePanelLocation_1.StagePanelLocation.Top;
-    }
-}
 /** @internal */
 function getWidgetId(location, section) {
     switch (location) {
@@ -445,8 +398,8 @@ exports.getWidgetId = getWidgetId;
 /** @internal */
 function getPanelSectionWidgets(frontstageDef, location, section) {
     const stagePanel = frontstageDef.getStagePanelDef(location);
-    const panelSection = stagePanel?.getPanelSectionDef(section);
-    return panelSection?.widgetDefs || [];
+    const panelSection = stagePanel === null || stagePanel === void 0 ? void 0 : stagePanel.getPanelSectionDef(section);
+    return (panelSection === null || panelSection === void 0 ? void 0 : panelSection.widgetDefs) || [];
 }
 exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
@@ -470,37 +423,29 @@ function isFrontstageStateSettingResult(settingsResult) {
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
 function initializePanel(state, frontstageDef, location) {
-    const panelSide = (0, StagePanelDef_1.toPanelSide)(location);
+    const side = (0, StagePanelDef_1.toPanelSide)(location);
     state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = (0, immer_1.default)(state, (draft) => {
-        const panel = draft.panels[panelSide];
-        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?.size;
-        panel.size =
-            size === undefined
-                ? size
-                : Math.min(Math.max(size, panel.minSize), panel.maxSize);
+        var _a, _b, _c, _d, _e, _f;
+        const panel = draft.panels[side];
+        panel.minSize = (_b = (_a = panelDef === null || panelDef === void 0 ? void 0 : panelDef.initialConfig) === null || _a === void 0 ? void 0 : _a.minSize) !== null && _b !== void 0 ? _b : panel.minSize;
+        panel.pinned = (_c = panelDef === null || panelDef === void 0 ? void 0 : panelDef.pinned) !== null && _c !== void 0 ? _c : panel.pinned;
+        panel.resizable = (_d = panelDef === null || panelDef === void 0 ? void 0 : panelDef.resizable) !== null && _d !== void 0 ? _d : panel.resizable;
+        panel.maxSize = (_f = (_e = panelDef === null || panelDef === void 0 ? void 0 : panelDef.initialConfig) === null || _e === void 0 ? void 0 : _e.maxSize) !== null && _f !== void 0 ? _f : panel.maxSize;
     });
+    if ((panelDef === null || panelDef === void 0 ? void 0 : panelDef.size) !== undefined) {
+        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+            type: "PANEL_SET_SIZE",
+            side,
+            size: panelDef.size,
+        });
+    }
     return state;
 }
 exports.initializePanel = initializePanel;
-function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
-    if (typeof maxSizeSpec === "number") {
-        return maxSizeSpec;
-    }
-    const size = (0, appui_layout_react_1.isHorizontalPanelSide)(panel)
-        ? nineZoneSize.height
-        : nineZoneSize.width;
-    return (maxSizeSpec.percentage / 100) * size;
-}
 /** @internal */
-exports.stateVersion = 14; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
+exports.stateVersion = 16; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -518,6 +463,7 @@ function initializeNineZoneState(frontstageDef) {
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
     nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
     nineZone = (0, immer_1.default)(nineZone, (draft) => {
+        var _a, _b, _c, _d;
         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;
@@ -526,10 +472,10 @@ function initializeNineZoneState(frontstageDef) {
                 firstWidget.minimized = false;
             }
         }
-        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);
+        draft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
+        draft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
+        draft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
+        draft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
     });
     nineZone = addMissingWidgets(frontstageDef, nineZone);
     const toolSettingsWidgetDef = frontstageDef.toolSettings;
@@ -538,7 +484,7 @@ function initializeNineZoneState(frontstageDef) {
         nineZone = (0, appui_layout_react_1.addDockedToolSettings)(nineZone, toolSettingsTabId);
     }
     nineZone = hideWidgets(nineZone, frontstageDef);
-    nineZone = processPopoutWidgets(nineZone, frontstageDef);
+    nineZone = processPopoutWidgets(nineZone);
     return nineZone;
 }
 exports.initializeNineZoneState = initializeNineZoneState;
@@ -548,23 +494,23 @@ exports.initializeNineZoneState = initializeNineZoneState;
  * @internal
  */
 function restoreNineZoneState(frontstageDef, saved) {
-    let restored = {
+    let state = {
         ...saved,
         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.
-        restored = (0, appui_layout_react_1.addTab)(restored, tab.id);
+        state = (0, appui_layout_react_1.addTab)(state, tab.id);
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (!widgetDef) {
             core_bentley_1.Logger.logInfo(UiFramework_1.UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
                 frontstageId: frontstageDef.id,
                 tabId: tab.id,
             }));
-            restored = (0, appui_layout_react_1.removeTab)(restored, tab.id);
+            state = (0, appui_layout_react_1.removeTab)(state, tab.id);
             continue;
         }
-        restored = (0, immer_1.default)(restored, (draft) => {
+        state = (0, immer_1.default)(state, (draft) => {
             draft.tabs[tab.id] = {
                 ...tab,
                 ...toTabArgs(widgetDef),
@@ -573,7 +519,7 @@ function restoreNineZoneState(frontstageDef, saved) {
             };
         });
     }
-    restored = (0, immer_1.default)(restored, (draft) => {
+    state = (0, immer_1.default)(state, (draft) => {
         // remove center panel section if one is found in left or right panels
         const oldLeftMiddleIndex = saved.panels.left.widgets.findIndex((value) => value === "leftMiddle");
         // istanbul ignore next
@@ -604,15 +550,18 @@ function restoreNineZoneState(frontstageDef, saved) {
     if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize &&
         (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height ||
             0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
-        restored = FrameworkStateReducer(restored, {
+        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
             type: "RESIZE",
             size: {
                 height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
                 width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
             },
-        }, frontstageDef);
+        });
     }
-    return restored;
+    state = addMissingWidgets(frontstageDef, state);
+    state = hideWidgets(state, frontstageDef);
+    state = processPopoutWidgets(state);
+    return state;
 }
 exports.restoreNineZoneState = restoreNineZoneState;
 /** Prepares NineZoneState to be saved.
@@ -637,222 +586,11 @@ function packNineZoneState(state) {
     return packed;
 }
 exports.packNineZoneState = packNineZoneState;
-// istanbul ignore next
-function packSavedWidgets(frontstageDef) {
-    let savedWidgets = [];
-    for (const widgetDef of frontstageDef.widgetDefs) {
-        const id = widgetDef.id;
-        const initialWidget = {
-            id,
-        };
-        const widget = (0, immer_1.default)(initialWidget, (draft) => {
-            if (widgetDef.tabLocation) {
-                draft.tabLocation = { ...widgetDef.tabLocation };
-            }
-            if (widgetDef.popoutBounds) {
-                draft.popoutBounds = widgetDef.popoutBounds.toProps();
-            }
-        });
-        if (widget === initialWidget)
-            continue;
-        savedWidgets.push(widget);
-    }
-    // Add previously saved widgets.
-    const prevSavedWidgets = frontstageDef.savedWidgetDefs || [];
-    for (const prevWidget of prevSavedWidgets) {
-        if (savedWidgets.find((w) => w.id === prevWidget.id))
-            continue;
-        savedWidgets.push(prevWidget);
-    }
-    // Limit number of saved widgets.
-    const maxWidgets = 100;
-    if (savedWidgets.length > maxWidgets)
-        savedWidgets = savedWidgets.slice(0, maxWidgets);
-    return savedWidgets;
-}
-// istanbul ignore next
-function restoreSavedWidgets(frontstage) {
-    const savedWidgets = frontstage.savedWidgetDefs || [];
-    for (const savedWidget of savedWidgets) {
-        const widgetId = savedWidget.id;
-        const widgetDef = frontstage.findWidgetDef(widgetId);
-        if (!widgetDef)
-            continue;
-        if (savedWidget.tabLocation) {
-            widgetDef.tabLocation = { ...savedWidget.tabLocation };
-        }
-        if (savedWidget.popoutBounds) {
-            widgetDef.popoutBounds = core_react_1.Rectangle.create(savedWidget.popoutBounds);
-        }
-    }
-}
 /** @internal */
 function isPanelCollapsed(panelState) {
     return panelState !== StagePanelDef_1.StagePanelState.Open;
 }
 exports.isPanelCollapsed = isPanelCollapsed;
-function addHiddenWidget(state, widgetDef) {
-    const tabLocation = widgetDef.tabLocation || widgetDef.defaultTabLocation;
-    const tabId = widgetDef.id;
-    const { widgetId, tabIndex } = tabLocation;
-    if (widgetId in state.widgets) {
-        // Add to an existing widget (by widget id).
-        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, widgetId, tabIndex);
-    }
-    else if (tabLocation.floatingWidget) {
-        const floatingWidget = tabLocation.floatingWidget;
-        (0, core_bentley_1.assert)(widgetId === floatingWidget.id);
-        // Add to a new floating widget.
-        const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
-        const bounds = core_react_1.Rectangle.create(floatingWidget.bounds).containIn(nzBounds);
-        return (0, appui_layout_react_1.addFloatingWidget)(state, floatingWidget.id, [tabId], {
-            ...floatingWidget,
-            bounds: bounds.toProps(),
-        });
-    }
-    // Add to a panel section.
-    const panel = state.panels[tabLocation.side];
-    // Add to existing panel section.
-    if (panel.widgets.length >= panel.maxWidgetCount) {
-        const sectionIndex = Math.min(panel.maxWidgetCount - 1, tabLocation.widgetIndex);
-        const sectionId = panel.widgets[sectionIndex];
-        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, sectionId, tabLocation.tabIndex);
-    }
-    // Create a new panel section.
-    const newSectionId = (0, appui_layout_react_1.getUniqueId)();
-    return (0, appui_layout_react_1.insertPanelWidget)(state, panel.side, newSectionId, [tabId], tabLocation.widgetIndex);
-}
-/** @internal */
-function setWidgetState(state, widgetDef, widgetState) {
-    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) => {
-            (0, core_bentley_1.assert)(!!location);
-            const widget = draft.widgets[location.widgetId];
-            widget.minimized = false;
-            widget.activeTabId = id;
-            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-                const floatingWidget = draft.floatingWidgets.byId[location.floatingWidgetId];
-                floatingWidget.hidden = false;
-                // istanbul ignore else
-            }
-            else if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-                const panel = draft.panels[location.side];
-                panel.collapsed = false;
-                if (undefined === panel.size || 0 === panel.size) {
-                    // istanbul ignore next
-                    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);
-            location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        }
-        // TODO: should change activeTabId of a widget with multiple tabs.
-        return (0, immer_1.default)(state, (draft) => {
-            (0, core_bentley_1.assert)(!!location);
-            const widget = draft.widgets[location.widgetId];
-            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-                if (id === widget.activeTabId) {
-                    widget.minimized = true;
-                }
-            }
-        });
-    }
-    else if (widgetState === WidgetState_1.WidgetState.Floating) {
-        const id = widgetDef.id;
-        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);
-        }
-        (0, core_bentley_1.assert)(!!location);
-        if ((0, appui_layout_react_1.isFloatingTabLocation)(location))
-            return state;
-        // Widget is not floating.
-        state = (0, appui_layout_react_1.removeTabFromWidget)(state, id);
-        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;
-    // istanbul ignore else
-    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-        const floatingWidget = state.floatingWidgets.byId[location.widgetId];
-        widgetDef.setFloatingContainerId(location.floatingWidgetId);
-        widgetDef.tabLocation = {
-            side: floatingWidget.home.side,
-            tabIndex: floatingWidget.home.widgetIndex,
-            widgetId: floatingWidget.id,
-            widgetIndex: floatingWidget.home.widgetIndex,
-            floatingWidget,
-        };
-    }
-    else if (!(0, appui_layout_react_1.isPopoutTabLocation)(location)) {
-        const widgetId = location.widgetId;
-        const side = (0, appui_layout_react_1.isPanelTabLocation)(location) ? location.side : "left";
-        const widgetIndex = (0, appui_layout_react_1.isPanelTabLocation)(location)
-            ? state.panels[side].widgets.indexOf(widgetId)
-            : 0;
-        const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
-        widgetDef.tabLocation = {
-            side,
-            tabIndex,
-            widgetId,
-            widgetIndex,
-        };
-    }
-    return (0, appui_layout_react_1.removeTabFromWidget)(state, widgetDef.id);
-}
 /** @internal */
 function showWidget(state, id) {
     const location = (0, appui_layout_react_1.getTabLocation)(state, id);
@@ -892,16 +630,6 @@ function expandWidget(state, id) {
 }
 exports.expandWidget = expandWidget;
 /** @internal */
-function setWidgetLabel(state, id, label) {
-    if (!(id in state.tabs))
-        return state;
-    return (0, immer_1.default)(state, (draft) => {
-        const tab = draft.tabs[id];
-        tab.label = label;
-    });
-}
-exports.setWidgetLabel = setWidgetLabel;
-/** @internal */
 function useSavedFrontstageState(frontstageDef) {
     const uiStateStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const uiStateStorageRef = React.useRef(uiStateStorage);
@@ -918,7 +646,7 @@ function useSavedFrontstageState(frontstageDef) {
     React.useEffect(() => {
         async function fetchFrontstageState() {
             if (frontstageDef.nineZoneState) {
-                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState, frontstageDef);
+                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState);
                 return;
             }
             const id = frontstageDef.id;
@@ -930,13 +658,7 @@ function useSavedFrontstageState(frontstageDef) {
                 const setting = settingResult.setting;
                 if (setting.version === version &&
                     setting.stateVersion === exports.stateVersion) {
-                    const restored = restoreNineZoneState(frontstageDef, setting.nineZone);
-                    frontstageDef.savedWidgetDefs = setting.widgets;
-                    restoreSavedWidgets(frontstageDef);
-                    let state = addMissingWidgets(frontstageDef, restored);
-                    state = hideWidgets(state, frontstageDef);
-                    state = processPopoutWidgets(state, frontstageDef);
-                    frontstageDef.nineZoneState = state;
+                    frontstageDef.nineZoneState = restoreNineZoneState(frontstageDef, setting.nineZone);
                     return;
                 }
             }
@@ -952,14 +674,11 @@ function useSaveFrontstageSettings(frontstageDef, store) {
     const saveSetting = React.useMemo(() => {
         const debounced = debounce(async (frontstage, state) => {
             const id = frontstage.id;
-            const widgets = packSavedWidgets(frontstage);
-            frontstage.savedWidgetDefs = widgets;
             const setting = {
                 id,
                 version: frontstage.version,
                 stateVersion: exports.stateVersion,
                 nineZone: packNineZoneState(state),
-                widgets,
             };
             await uiSettingsStorage.saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
         }, 1000);
@@ -1009,49 +728,11 @@ function debounce(func, duration) {
     };
     return debounced;
 }
-const createListener = (frontstageDef, listener) => {
-    return (...args) => {
-        if (!frontstageDef.nineZoneState)
-            return;
-        listener(...args);
-    };
-};
 /** @internal */
 function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
-    React.useEffect(() => {
-        return UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(({ widgetDef, widgetState }) => {
-            if (!frontstageDef.nineZoneState)
-                return;
-            frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
-        });
-    }, [frontstageDef]);
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            const nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, WidgetState_1.WidgetState.Open);
-            frontstageDef.nineZoneState = showWidget(nineZoneState, widgetDef.id);
-        });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.removeListener(listener);
-        };
-    }, [frontstageDef]);
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            let nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, WidgetState_1.WidgetState.Open);
-            nineZoneState = showWidget(nineZoneState, widgetDef.id);
-            nineZoneState = expandWidget(nineZoneState, widgetDef.id);
-            frontstageDef.nineZoneState = nineZoneState;
-        });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.removeListener(listener);
-        };
-    }, [frontstageDef]);
     const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     React.useEffect(() => {
-        const listener = (args) => {
+        return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener((args) => {
             // TODO: track restoring frontstages to support workflows:  i.e. prevent loading frontstage OR saving layout when delete is pending
             void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
             if (frontstageDef.id === args.frontstageDef.id) {
@@ -1061,52 +742,37 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             else {
                 args.frontstageDef.nineZoneState = undefined;
             }
-        };
-        InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
-        };
-    }, [uiSettingsStorage, frontstageDef]);
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            const label = widgetDef.label;
-            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
         });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
-        };
-    }, [frontstageDef]);
+    }, [uiSettingsStorage, frontstageDef]);
     const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
     React.useEffect(() => {
-        const updateLabel = createListener(frontstageDef, () => {
+        const updateLabel = () => {
+            var _a, _b;
+            const state = frontstageDef.nineZoneState;
+            if (!state)
+                return;
+            const toolSettingsTabId = (_a = state.toolSettings) === null || _a === void 0 ? void 0 : _a.tabId;
+            if (!toolSettingsTabId)
+                return;
             const toolId = UiFramework_1.UiFramework.frontstages.activeToolId;
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             const label = useToolAsToolSettingsLabel
-                ? core_frontend_1.IModelApp.tools.find(toolId)?.flyover || defaultLabel
+                ? ((_b = core_frontend_1.IModelApp.tools.find(toolId)) === null || _b === void 0 ? void 0 : _b.flyover) || defaultLabel
                 : defaultLabel;
-            const toolSettingsTabId = frontstageDef.nineZoneState.toolSettings?.tabId;
-            if (!toolSettingsTabId)
-                return;
-            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, toolSettingsTabId, label);
-        });
+            frontstageDef.dispatch({
+                type: "WIDGET_TAB_SET_LABEL",
+                id: toolSettingsTabId,
+                label,
+            });
+        };
         // Whenever the frontstageDef or the useTool... changes, keep the label up to date.
         updateLabel();
+        const removeListenerFuncs = [];
         // If useTool... is true, listen for events to keep up the label up to date.
         if (useToolAsToolSettingsLabel) {
-            UiFramework_1.UiFramework.frontstages.onFrontstageReadyEvent.addListener(updateLabel);
-            InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
-            UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(updateLabel);
-            UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.addListener(updateLabel);
+            removeListenerFuncs.push(UiFramework_1.UiFramework.frontstages.onFrontstageReadyEvent.addListener(updateLabel), InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel), UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(updateLabel), UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.addListener(updateLabel));
         }
         return () => {
-            if (useToolAsToolSettingsLabel) {
-                UiFramework_1.UiFramework.frontstages.onFrontstageReadyEvent.removeListener(updateLabel);
-                InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
-                UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.removeListener(updateLabel);
-                UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(updateLabel);
-            }
+            removeListenerFuncs.forEach((removeListener) => removeListener());
         };
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
@@ -1117,23 +783,22 @@ function useItemsManager(frontstageDef) {
     const refreshNineZoneState = (def) => {
         // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
         def.updateWidgetDefs();
-        restoreSavedWidgets(def);
         let state = def.nineZoneState;
         if (!state)
             return;
         state = addMissingWidgets(def, state);
         state = removeMissingWidgets(def, state);
-        state = hideWidgets(state, def); // TODO: should only apply to widgets provided by registered provider in onUiProviderRegisteredEvent.
         def.nineZoneState = state;
     };
     React.useEffect(() => {
-        const remove = UiItemsManager_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
-            refreshNineZoneState(frontstageDef);
-        });
         // Need to refresh anytime frontstageDef changes because uiItemsProvider may have added something to
         // another stage before it was possibly unloaded in this stage.
         refreshNineZoneState(frontstageDef);
-        return remove;
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        return UiItemsManager_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
+            refreshNineZoneState(frontstageDef);
+        });
     }, [frontstageDef]);
 }
 exports.useItemsManager = useItemsManager;