@itwin/appui-react 4.8.1 → 4.9.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.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;
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.stateVersion = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.getPanelSectionWidgets = exports.getPanelSectionId = exports.addFrontstageWidgetDefs = exports.addPanelSectionWidgetDefs = 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");
@@ -40,6 +40,7 @@ const StagePanelLocation_1 = require("../stagepanels/StagePanelLocation");
 const UiItemsManager_1 = require("../ui-items-provider/UiItemsManager");
 const PreviewFeatures_1 = require("../preview/PreviewFeatures");
 const classnames_1 = require("classnames");
+const StagePanelState_1 = require("../stagepanels/StagePanelState");
 function WidgetPanelsFrontstageComponent() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -87,8 +88,7 @@ exports.useLayoutStore = useLayoutStore;
 function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
         const size = InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize;
-        const state = frontstageDef.nineZoneState;
-        if (!size || !state)
+        if (!size)
             return;
         frontstageDef.dispatch({
             type: "RESIZE",
@@ -100,15 +100,30 @@ function useUpdateNineZoneSize(frontstageDef) {
     }, [frontstageDef]);
 }
 exports.useUpdateNineZoneSize = useUpdateNineZoneSize;
+const log = (reducer) => (state, action) => {
+    core_bentley_1.Logger.logTrace("appui-react:reducer", `action ${action.type}`, () => ({
+        action,
+        state,
+    }));
+    return reducer(state, action);
+};
 /** @internal */
 function useNineZoneDispatch(frontstageDef) {
-    return React.useMemo(() => frontstageDef.dispatch, [frontstageDef]);
+    const reducer = React.useMemo(() => log(appui_layout_react_1.NineZoneStateReducer), []);
+    return React.useCallback((action) => {
+        if (action.type === "RESIZE") {
+            InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
+        }
+        const state = frontstageDef.nineZoneState;
+        if (!state)
+            return;
+        frontstageDef.nineZoneState = reducer(state, action);
+    }, [frontstageDef, reducer]);
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
 function WidgetPanelsFrontstage() {
     const frontstageDef = (0, FrontstageDef_1.useActiveFrontstageDef)();
-    const layout = useLayoutStore(frontstageDef);
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -120,15 +135,17 @@ function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+    return React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef });
 }
 exports.WidgetPanelsFrontstage = WidgetPanelsFrontstage;
 const defaultNineZone = (0, appui_layout_react_1.createNineZoneState)();
 const tabElement = React.createElement(Tab_1.WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget_1.FloatingWidget, null);
 /** @internal */
-function ActiveFrontstageDefProvider({ frontstageDef, layout, }) {
+function ActiveFrontstageDefProvider({ frontstageDef, }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
+    frontstageDef.dispatch = dispatch;
+    const layout = useLayoutStore(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
     useSaveFrontstageSettings(frontstageDef, layout);
@@ -187,186 +204,118 @@ function toTabArgs(widget) {
     };
     return args;
 }
-/** @internal */
-function addWidgets(state, widgets, side, widgetId) {
-    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) {
-        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) {
-        state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
-            activeTabId: activeWidget ? activeWidget.id : tabs[0],
-            minimized,
-        });
-    }
-    return state;
-}
-exports.addWidgets = addWidgets;
-/** @internal */
-// istanbul ignore next
-function appendWidgets(state, widgetDefs, location, section) {
+function addWidgetDef(frontstageDef, widgetDef, location, section) {
     const side = (0, StagePanelDef_1.toPanelSide)(location);
-    // Add missing widget tabs.
-    for (const widgetDef of widgetDefs) {
-        const saveTab = state.tabs[widgetDef.id];
-        const preferredPanelWidgetSize = saveTab
-            ? saveTab.preferredPanelWidgetSize
-            : widgetDef.preferredPanelSize;
-        const preferredFloatingWidgetSize = saveTab
-            ? saveTab.preferredFloatingWidgetSize
-            : widgetDef.defaultFloatingSize;
-        // if a defaultFloatingSize is specified then this mean the widget can't determine its intrinsic size and must be explicitly sized
-        const userSized = saveTab
-            ? saveTab.userSized ||
-                (!!widgetDef.defaultFloatingSize &&
-                    !!saveTab.preferredFloatingWidgetSize)
-            : !!widgetDef.defaultFloatingSize;
-        state = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
+    const isFloatingWidget = widgetDef.isFloatingStateSupported &&
+        widgetDef.defaultState === WidgetState_1.WidgetState.Floating;
+    const floatingWidgetId = widgetDef.floatingContainerId
+        ? widgetDef.floatingContainerId
+        : (0, appui_layout_react_1.getUniqueId)();
+    const userSized = !!widgetDef.defaultFloatingSize;
+    frontstageDef.dispatch({
+        type: "WIDGET_DEF_ADD",
+        id: widgetDef.id,
+        overrides: {
             ...toTabArgs(widgetDef),
-            preferredFloatingWidgetSize,
-            preferredPanelWidgetSize,
             userSized,
-        });
-        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
-                ? widgetDef.floatingContainerId
-                : (0, appui_layout_react_1.getUniqueId)();
-            const widgetContainerId = getWidgetId(location, section);
-            const preferredPosition = widgetDef.defaultFloatingPosition;
-            if (floatingContainerId in state.widgets) {
-                state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, floatingContainerId);
-            }
-            else {
-                const tab = state.tabs[widgetDef.id];
-                const size = {
-                    height: 200,
-                    width: 300,
-                    ...tab.preferredFloatingWidgetSize,
-                };
-                const preferredPoint = preferredPosition !== null && preferredPosition !== void 0 ? preferredPosition : {
-                    x: (state.size.width - size.width) / 2,
-                    y: (state.size.height - size.height) / 2,
-                };
-                const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
-                const bounds = core_react_1.Rectangle.createFromSize(size).offset(preferredPoint);
-                const containedBounds = bounds.containIn(nzBounds);
-                state = (0, appui_layout_react_1.addFloatingWidget)(state, floatingContainerId, [widgetDef.id], {
-                    bounds: containedBounds.toProps(),
-                    home: {
-                        widgetId: widgetContainerId,
-                        side,
-                        widgetIndex: 0,
-                    },
-                    userSized,
-                });
-            }
-        }
-        else {
-            const preferredWidgetIndex = section;
-            const widgetPanelSectionId = (0, appui_layout_react_1.getWidgetPanelSectionId)(side, preferredWidgetIndex);
-            if (widgetPanelSectionId in state.widgets) {
-                state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetPanelSectionId);
-            }
-            else {
-                const panel = state.panels[side];
-                if (panel.widgets.length < panel.maxWidgetCount) {
-                    state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetPanelSectionId, [
-                        widgetDef.id,
-                    ]);
-                }
-                else {
-                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
-                    const widgetId = panel.widgets[widgetIndex];
-                    state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetId);
-                }
-            }
-        }
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
-            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
+        },
+        location: isFloatingWidget ? "floating" : "panel",
+        floatingWidget: {
+            id: floatingWidgetId,
+            preferredPosition: widgetDef.defaultFloatingPosition,
+        },
+        panelSection: {
+            id: (0, appui_layout_react_1.getWidgetPanelSectionId)(side, section),
+            side,
+            index: section,
+        },
+    });
+    // Hide widget if `defaultState` is `Hidden` or `Unloaded`.
+    hideWidgetDef(frontstageDef, widgetDef);
+}
+/** Adds missing widgets to the layout.
+ * @internal
+ */
+function addPanelSectionWidgetDefs(frontstageDef, location, section) {
+    const panelDef = frontstageDef.getStagePanelDef(location);
+    if (!panelDef)
+        return;
+    const sectionDef = panelDef.getPanelSectionDef(section);
+    const widgetDefs = determineNewWidgets(frontstageDef, sectionDef.widgetDefs);
+    for (const widgetDef of widgetDefs) {
+        addWidgetDef(frontstageDef, widgetDef, location, section);
     }
-    return state;
 }
-exports.appendWidgets = appendWidgets;
-function processPopoutWidgets(state) {
+exports.addPanelSectionWidgetDefs = addPanelSectionWidgetDefs;
+function processPopoutWidgets(frontstageDef) {
     // Electron reopens popout windows w/o user interaction.
     if (core_bentley_1.ProcessDetector.isElectronAppFrontend) {
-        return state;
+        return;
     }
-    // Restore popout widgets to main window.
+    (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
     for (const id of state.popoutWidgets.allIds) {
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
+        frontstageDef.dispatch({
             type: "POPOUT_WIDGET_SEND_BACK",
             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((_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) {
-            state = (0, appui_layout_react_1.addTab)(state, newToolSettingsWidget.id, toTabArgs(newToolSettingsWidget));
-        }
+function addFrontstageWidgetDefs(frontstageDef) {
+    [
+        StagePanelLocation_1.StagePanelLocation.Left,
+        StagePanelLocation_1.StagePanelLocation.Right,
+        StagePanelLocation_1.StagePanelLocation.Top,
+        StagePanelLocation_1.StagePanelLocation.Bottom,
+    ].forEach((location) => [StagePanelSection_1.StagePanelSection.Start, StagePanelSection_1.StagePanelSection.End].forEach((section) => addPanelSectionWidgetDefs(frontstageDef, location, section)));
+    const toolSettingsWidgetDefs = determineNewWidgets(frontstageDef, frontstageDef.toolSettings ? [frontstageDef.toolSettings] : undefined);
+    for (const toolSettingsWidgetDef of toolSettingsWidgetDefs) {
+        frontstageDef.dispatch({
+            type: "WIDGET_DEF_ADD_TOOL_SETTINGS",
+            id: toolSettingsWidgetDef.id,
+            overrides: toTabArgs(toolSettingsWidgetDef),
+        });
     }
-    return state;
 }
-exports.addMissingWidgets = addMissingWidgets;
-/** Hide widgets with Hidden defaultState. */
-function hideWidgets(state, frontstageDef) {
+exports.addFrontstageWidgetDefs = addFrontstageWidgetDefs;
+/** Hide widgets with `Hidden` or `Unloaded` defaultState. */
+function hideWidgetDefs(frontstageDef) {
+    (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+    const state = frontstageDef.nineZoneState;
     const tabs = Object.values(state.tabs);
     for (const tab of tabs) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (!widgetDef)
             continue;
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
-            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-                type: "WIDGET_TAB_HIDE",
-                id: widgetDef.id,
-            });
-        }
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Unloaded) {
-            state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-                type: "WIDGET_TAB_UNLOAD",
-                id: widgetDef.id,
-            });
-        }
+        hideWidgetDef(frontstageDef, widgetDef);
+    }
+}
+/** Hide widget with `Hidden` or `Unloaded` defaultState. */
+function hideWidgetDef(frontstageDef, widgetDef) {
+    if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_HIDE",
+            id: widgetDef.id,
+        });
+    }
+    if (widgetDef.defaultState === WidgetState_1.WidgetState.Unloaded) {
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_UNLOAD",
+            id: widgetDef.id,
+        });
     }
-    return state;
 }
 /** Removes NineZoneState widgets that are missing in frontstageDef.
  * @internal
  */
-function removeMissingWidgets(frontstageDef, state) {
+function removeMissingWidgets(frontstageDef) {
     var _a;
+    const state = frontstageDef.nineZoneState;
+    if (!state)
+        return;
     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)
@@ -374,43 +323,20 @@ function removeMissingWidgets(frontstageDef, state) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (widgetDef)
             continue;
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-            type: "WIDGET_TAB_HIDE",
+        frontstageDef.dispatch({
+            type: "WIDGET_TAB_REMOVE",
             id: tab.id,
         });
-        state = (0, appui_layout_react_1.removeTab)(state, tab.id);
     }
-    return state;
 }
 function getWidgetLabel(label) {
     return label === "" ? "Widget" : label;
 }
 /** @internal */
-function getWidgetId(location, section) {
-    switch (location) {
-        case StagePanelLocation_1.StagePanelLocation.Left: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "leftStart";
-            return "leftEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Right: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "rightStart";
-            return "rightEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Top: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "topStart";
-            return "topEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Bottom: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "bottomStart";
-            return "bottomEnd";
-        }
-    }
+function getPanelSectionId(location, section) {
+    return `${StagePanelLocation_1.StagePanelLocation[location].toLowerCase()}${StagePanelSection_1.StagePanelSection[section]}`;
 }
-exports.getWidgetId = getWidgetId;
+exports.getPanelSectionId = getPanelSectionId;
 /** @internal */
 function getPanelSectionWidgets(frontstageDef, location, section) {
     const stagePanel = frontstageDef.getStagePanelDef(location);
@@ -419,18 +345,6 @@ function getPanelSectionWidgets(frontstageDef, location, section) {
 }
 exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
-function addPanelWidgets(state, frontstageDef, location) {
-    const side = (0, StagePanelDef_1.toPanelSide)(location);
-    const start = getWidgetId(location, StagePanelSection_1.StagePanelSection.Start);
-    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.Start);
-    state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(location, StagePanelSection_1.StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.End);
-    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
-    return state;
-}
-exports.addPanelWidgets = addPanelWidgets;
-/** @internal */
 function isFrontstageStateSettingResult(settingsResult) {
     if (settingsResult.status === core_react_1.UiStateStorageStatus.Success)
         return true;
@@ -438,70 +352,70 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(state, frontstageDef, location) {
+function initializePanel(frontstageDef, location) {
+    var _a, _b;
     const side = (0, StagePanelDef_1.toPanelSide)(location);
-    state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
-    state = (0, immer_1.default)(state, (draft) => {
-        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, {
+    if (!panelDef)
+        return;
+    const size = panelDef.defaultSize;
+    size !== undefined &&
+        frontstageDef.dispatch({
             type: "PANEL_SET_SIZE",
             side,
-            size: panelDef.size,
+            size,
         });
-    }
-    return state;
+    frontstageDef.dispatch({
+        type: "PANEL_SET_PINNED",
+        side,
+        pinned: panelDef.defaultPinned,
+    });
+    frontstageDef.dispatch({
+        type: "PANEL_SET_RESIZABLE",
+        side,
+        resizable: panelDef.defaultResizable,
+    });
+    const minSize = (_a = panelDef.initialConfig) === null || _a === void 0 ? void 0 : _a.minSize;
+    minSize !== undefined &&
+        frontstageDef.dispatch({
+            type: "PANEL_SET_MIN_SIZE",
+            side,
+            minSize,
+        });
+    const maxSize = (_b = panelDef.initialConfig) === null || _b === void 0 ? void 0 : _b.maxSize;
+    maxSize !== undefined &&
+        frontstageDef.dispatch({
+            type: "PANEL_SET_MAX_SIZE",
+            side,
+            maxSize,
+        });
+    const collapsed = panelDef.defaultState !== StagePanelState_1.StagePanelState.Open;
+    frontstageDef.dispatch({
+        type: "PANEL_SET_COLLAPSED",
+        side,
+        collapsed,
+    });
 }
 exports.initializePanel = initializePanel;
 /** @internal */
 exports.stateVersion = 17; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 function initializeNineZoneState(frontstageDef) {
-    let nineZone = defaultNineZone;
-    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        // istanbul ignore next
-        if (!InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize)
-            return;
-        stateDraft.size = {
-            height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-            width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-        };
-    });
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Left);
-    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, (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;
-            // istanbul ignore next
-            if (!expanded && firstWidget) {
-                firstWidget.minimized = false;
-            }
-        }
-        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);
+    (0, core_bentley_1.assert)(!frontstageDef.nineZoneState);
+    frontstageDef.batch(() => {
+        frontstageDef.nineZoneState = defaultNineZone;
+        const size = InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize;
+        size &&
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size,
+            });
+        addFrontstageWidgetDefs(frontstageDef);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Left);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Right);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
+        initializePanel(frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
     });
-    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);
-    return nineZone;
 }
 exports.initializeNineZoneState = initializeNineZoneState;
 /** Converts from saved NineZoneState to NineZoneState.
@@ -509,75 +423,68 @@ exports.initializeNineZoneState = initializeNineZoneState;
  * @note Restores tab labels.
  * @internal
  */
-function restoreNineZoneState(frontstageDef, saved) {
-    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.
-        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,
-            }));
-            state = (0, appui_layout_react_1.removeTab)(state, tab.id);
-            continue;
-        }
-        state = (0, immer_1.default)(state, (draft) => {
-            draft.tabs[tab.id] = {
-                ...tab,
-                ...toTabArgs(widgetDef),
-                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                preferredPanelWidgetSize: tab.preferredPanelWidgetSize,
-            };
-        });
-    }
-    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
-        if (-1 !== oldLeftMiddleIndex) {
-            draft.panels.left.widgets = saved.panels.left.widgets.filter((value) => value !== "leftMiddle");
-            if ("leftEnd" in draft.widgets) {
-                draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
-            }
-            else {
-                draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
-                delete draft.widgets.leftMiddle;
+function restoreNineZoneState(frontstageDef, packed) {
+    frontstageDef.batch(() => {
+        frontstageDef.nineZoneState = packed;
+        for (const [, tab] of Object.entries(packed.tabs)) {
+            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,
+                });
+                frontstageDef.dispatch({ type: "WIDGET_TAB_REMOVE", id: tab.id });
+                continue;
             }
+            frontstageDef.dispatch({
+                type: "WIDGET_TAB_UPDATE",
+                id: tab.id,
+                overrides: toTabArgs(widgetDef),
+            });
         }
-        const oldRightMiddleIndex = saved.panels.right.widgets.findIndex((value) => value === "rightMiddle");
-        // istanbul ignore next
-        if (-1 !== oldRightMiddleIndex) {
-            draft.panels.right.widgets = saved.panels.right.widgets.filter((value) => value !== "rightMiddle");
-            if ("rightEnd" in draft.widgets) {
-                draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
+        frontstageDef.nineZoneState = (0, immer_1.default)(frontstageDef.nineZoneState, (draft) => {
+            // remove center panel section if one is found in left or right panels
+            const oldLeftMiddleIndex = packed.panels.left.widgets.findIndex((value) => value === "leftMiddle");
+            // istanbul ignore next
+            if (-1 !== oldLeftMiddleIndex) {
+                draft.panels.left.widgets = packed.panels.left.widgets.filter((value) => value !== "leftMiddle");
+                if ("leftEnd" in draft.widgets) {
+                    draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
+                }
+                else {
+                    draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
+                    delete draft.widgets.leftMiddle;
+                }
             }
-            else {
-                draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
-                delete draft.widgets.rightMiddle;
+            const oldRightMiddleIndex = packed.panels.right.widgets.findIndex((value) => value === "rightMiddle");
+            // istanbul ignore next
+            if (-1 !== oldRightMiddleIndex) {
+                draft.panels.right.widgets = packed.panels.right.widgets.filter((value) => value !== "rightMiddle");
+                if ("rightEnd" in draft.widgets) {
+                    draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
+                }
+                else {
+                    draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
+                    delete draft.widgets.rightMiddle;
+                }
             }
+            return;
+        });
+        if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize &&
+            (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height ||
+                0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
+            frontstageDef.dispatch({
+                type: "RESIZE",
+                size: {
+                    height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+                    width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
+                },
+            });
         }
-        return;
+        addFrontstageWidgetDefs(frontstageDef);
+        hideWidgetDefs(frontstageDef);
+        processPopoutWidgets(frontstageDef);
     });
-    if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize &&
-        (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height ||
-            0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
-        state = (0, appui_layout_react_1.NineZoneStateReducer)(state, {
-            type: "RESIZE",
-            size: {
-                height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-                width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-            },
-        });
-    }
-    state = addMissingWidgets(frontstageDef, state);
-    state = hideWidgets(state, frontstageDef);
-    state = processPopoutWidgets(state);
-    return state;
 }
 exports.restoreNineZoneState = restoreNineZoneState;
 /** Prepares NineZoneState to be saved.
@@ -586,66 +493,17 @@ exports.restoreNineZoneState = restoreNineZoneState;
  * @internal
  */
 function packNineZoneState(state) {
-    let packed = {
-        ...state,
-        tabs: {},
-    };
+    let packed = state;
     packed = (0, immer_1.default)(packed, (draft) => {
-        for (const [, tab] of Object.entries(state.tabs)) {
-            draft.tabs[tab.id] = {
-                id: tab.id,
-                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                userSized: tab.userSized,
-            };
+        for (const [, tab] of Object.entries(draft.tabs)) {
+            tab.label = "";
+            delete tab.iconSpec;
         }
     });
     return packed;
 }
 exports.packNineZoneState = packNineZoneState;
 /** @internal */
-function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelDef_1.StagePanelState.Open;
-}
-exports.isPanelCollapsed = isPanelCollapsed;
-/** @internal */
-function showWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    state = (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        widget.activeTabId = id;
-        widget.minimized = false;
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.collapsed = false;
-        }
-    });
-    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-        state = (0, appui_layout_react_1.floatingWidgetBringToFront)(state, location.floatingWidgetId);
-    }
-    return state;
-}
-exports.showWidget = showWidget;
-/** @internal */
-function expandWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    return (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.splitterPercent =
-                panel.widgets.findIndex((wId) => wId === location.widgetId) === 0
-                    ? 100
-                    : 0;
-        }
-        widget.minimized = false;
-    });
-}
-exports.expandWidget = expandWidget;
-/** @internal */
 function useSavedFrontstageState(frontstageDef) {
     const uiStateStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const uiStateStorageRef = React.useRef(uiStateStorage);
@@ -663,7 +521,7 @@ function useSavedFrontstageState(frontstageDef) {
         async function fetchFrontstageState() {
             // Switching to previously initialized frontstage.
             if (frontstageDef.nineZoneState) {
-                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState);
+                processPopoutWidgets(frontstageDef);
                 return;
             }
             const id = frontstageDef.id;
@@ -675,11 +533,11 @@ function useSavedFrontstageState(frontstageDef) {
                 const setting = settingResult.setting;
                 if (setting.version === version &&
                     setting.stateVersion === exports.stateVersion) {
-                    frontstageDef.nineZoneState = restoreNineZoneState(frontstageDef, setting.nineZone);
+                    restoreNineZoneState(frontstageDef, setting.nineZone);
                     return;
                 }
             }
-            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+            initializeNineZoneState(frontstageDef);
         }
         void fetchFrontstageState();
     }, [frontstageDef]);
@@ -774,12 +632,10 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             // 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) {
-                args.frontstageDef.nineZoneState =
-                    initializeNineZoneState(frontstageDef);
-            }
-            else {
-                args.frontstageDef.nineZoneState = undefined;
+                initializeNineZoneState(frontstageDef);
+                return;
             }
+            args.frontstageDef.nineZoneState = undefined;
         });
     }, [uiSettingsStorage, frontstageDef]);
     const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
@@ -815,20 +671,20 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
 }
 exports.useFrontstageManager = useFrontstageManager;
+function refreshNineZoneState(frontstageDef) {
+    // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
+    frontstageDef.updateWidgetDefs();
+    frontstageDef.batch(() => {
+        addFrontstageWidgetDefs(frontstageDef);
+        removeMissingWidgets(frontstageDef);
+    });
+}
 /** @internal */
-// istanbul ignore next
 function useItemsManager(frontstageDef) {
-    const refreshNineZoneState = (def) => {
-        // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
-        def.updateWidgetDefs();
-        let state = def.nineZoneState;
-        if (!state)
-            return;
-        state = addMissingWidgets(def, state);
-        state = removeMissingWidgets(def, state);
-        def.nineZoneState = state;
-    };
     React.useEffect(() => {
+        // Not initialized yet.
+        if (!frontstageDef.nineZoneState)
+            return;
         // 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);
@@ -840,8 +696,9 @@ function useItemsManager(frontstageDef) {
     }, [frontstageDef]);
 }
 exports.useItemsManager = useItemsManager;
-// istanbul ignore next
-function determineNewWidgets(defs, state) {
+function determineNewWidgets(frontstageDef, defs) {
+    const state = frontstageDef.nineZoneState;
+    (0, core_bentley_1.assert)(!!state);
     defs = defs || [];
     const uniqueDefs = defs.filter((def, index, array) => {
         return index === array.findIndex((def1) => def.id === def1.id);