@itwin/appui-react 4.0.0-dev.1 → 4.0.0-dev.3

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

@@ -3,27 +3,25 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
-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.getPanelZoneWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.FrameworkStateReducer = exports.useUpdateNineZoneSize = exports.useNineZoneState = void 0;
 /** @packageDocumentation
  * @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;
 // cSpell:ignore popout
 require("./Frontstage.scss");
 const immer_1 = require("immer");
 const React = require("react");
+const react_dom_1 = require("react-dom");
 const core_bentley_1 = require("@itwin/core-bentley");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 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 Frontstage_1 = require("../frontstage/Frontstage");
 const FrontstageManager_1 = require("../frontstage/FrontstageManager");
 const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
 const UiFramework_1 = require("../UiFramework");
 const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
-const ZoneDef_1 = require("../zones/ZoneDef");
 const Content_1 = require("./Content");
 const FrontstageContent_1 = require("./FrontstageContent");
 const ModalFrontstageComposer_1 = require("./ModalFrontstageComposer");
@@ -36,57 +34,45 @@ const react_redux_1 = require("react-redux");
 const useUiVisibility_1 = require("../hooks/useUiVisibility");
 const core_frontend_1 = require("@itwin/core-frontend");
 const FloatingWidget_1 = require("./FloatingWidget");
-const panelZoneKeys = ["start", "end"];
-const WidgetInternals = React.memo(function WidgetInternals() {
+function WidgetPanelsFrontstageComponent() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
     return (React.createElement(React.Fragment, null,
+        React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
         React.createElement(components_react_1.ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
             React.createElement(ModalFrontstageComposer_1.ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
             React.createElement(appui_layout_react_1.WidgetPanels, { className: "uifw-widgetPanels", centerContent: React.createElement(Toolbars_1.WidgetPanelsToolbars, null) },
                 React.createElement(FrontstageContent_1.WidgetPanelsFrontstageContent, null)),
             React.createElement(StatusBar_1.WidgetPanelsStatusBar, null),
             React.createElement(appui_layout_react_1.FloatingWidgets, null))));
-});
-// istanbul ignore next
-const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
-        React.createElement(WidgetInternals, null)));
-});
+}
 const widgetContent = React.createElement(Content_1.WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
 /** @internal */
-function useNineZoneState(frontstageDef) {
-    const lastFrontstageDef = React.useRef(frontstageDef);
-    const [nineZone, setNineZone] = React.useState(frontstageDef.nineZoneState);
+function useLayoutStore() {
+    const [def, setDef] = React.useState(FrontstageManager_1.FrontstageManager.activeFrontstageDef);
+    const [layout, setLayout] = React.useState(() => (0, appui_layout_react_1.createLayoutStore)(def === null || def === void 0 ? void 0 : def.nineZoneState));
     React.useEffect(() => {
-        setNineZone(frontstageDef.nineZoneState);
-        lastFrontstageDef.current = frontstageDef;
-    }, [frontstageDef]);
+        return FrontstageManager_1.FrontstageManager.onFrontstageActivatedEvent.addListener((args) => {
+            (0, react_dom_1.unstable_batchedUpdates)(() => {
+                setDef(args.activatedFrontstageDef);
+                setLayout((0, appui_layout_react_1.createLayoutStore)(args.activatedFrontstageDef.nineZoneState));
+            });
+        });
+    }, []);
     React.useEffect(() => {
-        const listener = (args) => {
-            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
+        return FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
+            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
                 return;
-            setNineZone(args.state);
-        };
-        return FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(listener);
-    }, [frontstageDef]);
-    return lastFrontstageDef.current === frontstageDef ? nineZone : frontstageDef.nineZoneState;
-}
-exports.useNineZoneState = useNineZoneState;
-/** @returns Defined NineZoneState with fallback to last defined and default NineZoneState.
- * @internal
- */
-function useCachedNineZoneState(nineZone) {
-    const cached = React.useRef(nineZone || defaultNineZone);
-    React.useEffect(() => {
-        if (nineZone)
-            cached.current = nineZone;
-    }, [nineZone]);
-    return nineZone || cached.current;
+            (0, react_dom_1.unstable_batchedUpdates)(() => {
+                layout.setState(args.state || defaultNineZone);
+            });
+        });
+    }, [def, layout]);
+    return [layout, def];
 }
+exports.useLayoutStore = useLayoutStore;
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
  * @internal
  */
@@ -149,17 +135,17 @@ function useNineZoneDispatch(frontstageDef) {
             frontstageDef.popoutWidget(tabId);
             return;
         }
-        const nineZoneState = frontstageDef.nineZoneState;
-        if (!nineZoneState)
+        const state = frontstageDef.nineZoneState;
+        if (!state)
             return;
-        frontstageDef.nineZoneState = FrameworkStateReducer(nineZoneState, action, frontstageDef);
+        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
     }, [frontstageDef]);
     return dispatch;
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
-exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
-    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
+function WidgetPanelsFrontstage() {
+    const [layout, frontstageDef] = useLayoutStore();
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -172,19 +158,18 @@ exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
-});
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+}
+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 }) {
-    let nineZone = useNineZoneState(frontstageDef);
-    nineZone = useCachedNineZoneState(nineZone);
+function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
-    useSaveFrontstageSettings(frontstageDef);
+    useSaveFrontstageSettings(frontstageDef, layout);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -207,7 +192,7 @@ function ActiveFrontstageDefProvider({ frontstageDef }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = (0, useEscapeSetFocusToHome_1.useEscapeSetFocusToHome)();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
 /** @internal */
@@ -259,10 +244,11 @@ function addWidgets(state, widgets, side, widgetId) {
 exports.addWidgets = addWidgets;
 /** @internal */
 // istanbul ignore next
-function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
+function appendWidgets(state, widgetDefs, location, section) {
     var _a;
     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);
@@ -285,7 +271,7 @@ function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === appui_abstract_1.WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : (0, appui_layout_react_1.getUniqueId)();
-            const widgetContainerId = getWidgetId(side, panelZoneKeys[preferredWidgetIndex]);
+            const widgetContainerId = getWidgetId(location, section);
             const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
             if (floatingContainerId in state.widgets) {
@@ -308,6 +294,7 @@ function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             }
         }
         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);
@@ -347,26 +334,16 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let state = initialState;
-    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, state), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, state), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelWidgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelZones.end.widgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs, state), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs, state), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelWidgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.end.widgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, state), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs, state), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, state), "top", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs, state), "top", 1);
-    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, state), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs, state), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, state), "bottom", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, state), "bottom", 1);
+    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.getPanelSectionDef(appui_abstract_1.StagePanelSection.Start).widgetDefs, state), appui_abstract_1.StagePanelLocation.Left, appui_abstract_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(appui_abstract_1.StagePanelSection.End).widgetDefs, state), appui_abstract_1.StagePanelLocation.Left, appui_abstract_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(appui_abstract_1.StagePanelSection.Start).widgetDefs, state), appui_abstract_1.StagePanelLocation.Right, appui_abstract_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(appui_abstract_1.StagePanelSection.End).widgetDefs, state), appui_abstract_1.StagePanelLocation.Right, appui_abstract_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(appui_abstract_1.StagePanelSection.Start).widgetDefs, state), appui_abstract_1.StagePanelLocation.Top, appui_abstract_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(appui_abstract_1.StagePanelSection.End).widgetDefs, state), appui_abstract_1.StagePanelLocation.Top, appui_abstract_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(appui_abstract_1.StagePanelSection.Start).widgetDefs, state), appui_abstract_1.StagePanelLocation.Bottom, appui_abstract_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(appui_abstract_1.StagePanelSection.End).widgetDefs, state), appui_abstract_1.StagePanelLocation.Bottom, appui_abstract_1.StagePanelSection.End);
     return state;
 }
 exports.addMissingWidgets = addMissingWidgets;
@@ -415,28 +392,25 @@ function toStagePanelLocation(side) {
     }
 }
 /** @internal */
-function getWidgetId(side, key) {
-    switch (side) {
-        case "left": {
-            if (key === "start") {
+function getWidgetId(location, section) {
+    switch (location) {
+        case appui_abstract_1.StagePanelLocation.Left: {
+            if (section === appui_abstract_1.StagePanelSection.Start)
                 return "leftStart";
-            }
             return "leftEnd";
         }
-        case "right": {
-            if (key === "start") {
+        case appui_abstract_1.StagePanelLocation.Right: {
+            if (section === appui_abstract_1.StagePanelSection.Start)
                 return "rightStart";
-            }
             return "rightEnd";
         }
-        case "top": {
-            if (key === "start") {
+        case appui_abstract_1.StagePanelLocation.Top: {
+            if (section === appui_abstract_1.StagePanelSection.Start)
                 return "topStart";
-            }
             return "topEnd";
         }
-        case "bottom": {
-            if (key === "start")
+        case appui_abstract_1.StagePanelLocation.Bottom: {
+            if (section === appui_abstract_1.StagePanelSection.Start)
                 return "bottomStart";
             return "bottomEnd";
         }
@@ -444,101 +418,20 @@ function getWidgetId(side, key) {
 }
 exports.getWidgetId = getWidgetId;
 /** @internal */
-function getPanelZoneWidgets(frontstageDef, panelZone) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    switch (panelZone) {
-        case "leftStart": {
-            const outArray = [...((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs) || []];
-            (_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "leftEnd": {
-            const outArray = [...((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs) || []];
-            (_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            (_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "rightStart": {
-            const outArray = [...((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs) || []];
-            (_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "rightEnd": {
-            const outArray = [...((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs) || []];
-            (_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            (_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelWidgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "topStart": {
-            const outArray = [...((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs) || []];
-            (_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "topEnd": {
-            const outArray = [...((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
-            (_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "bottomStart": {
-            const outArray = [...((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs) || []];
-            (_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "bottomEnd": {
-            const outArray = [...((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
-            (_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-    }
+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) || [];
 }
-exports.getPanelZoneWidgets = getPanelZoneWidgets;
+exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
-function addPanelWidgets(state, frontstageDef, side) {
-    const start = getWidgetId(side, "start");
-    const startWidgets = getPanelZoneWidgets(frontstageDef, start);
+function addPanelWidgets(state, frontstageDef, location) {
+    const side = (0, StagePanelDef_1.toPanelSide)(location);
+    const start = getWidgetId(location, appui_abstract_1.StagePanelSection.Start);
+    const startWidgets = getPanelSectionWidgets(frontstageDef, location, appui_abstract_1.StagePanelSection.Start);
     state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(side, "end");
-    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
+    const end = getWidgetId(location, appui_abstract_1.StagePanelSection.End);
+    const endWidgets = getPanelSectionWidgets(frontstageDef, location, appui_abstract_1.StagePanelSection.End);
     state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
@@ -551,9 +444,9 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(state, frontstageDef, panelSide) {
-    state = addPanelWidgets(state, frontstageDef, panelSide);
-    const location = toStagePanelLocation(panelSide);
+function initializePanel(state, frontstageDef, location) {
+    const panelSide = (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;
@@ -590,12 +483,12 @@ function initializeNineZoneState(frontstageDef) {
             width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
         };
     });
-    nineZone = initializePanel(nineZone, frontstageDef, "left");
-    nineZone = initializePanel(nineZone, frontstageDef, "right");
-    nineZone = initializePanel(nineZone, frontstageDef, "top");
-    nineZone = initializePanel(nineZone, frontstageDef, "bottom");
+    nineZone = initializePanel(nineZone, frontstageDef, appui_abstract_1.StagePanelLocation.Left);
+    nineZone = initializePanel(nineZone, frontstageDef, appui_abstract_1.StagePanelLocation.Right);
+    nineZone = initializePanel(nineZone, frontstageDef, appui_abstract_1.StagePanelLocation.Top);
+    nineZone = initializePanel(nineZone, frontstageDef, appui_abstract_1.StagePanelLocation.Bottom);
     nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        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;
@@ -604,24 +497,11 @@ function initializeNineZoneState(frontstageDef) {
                 firstWidget.minimized = false;
             }
         }
-        stateDraft.panels.left.collapsed = isPanelCollapsed([
-            (_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.zoneState,
-            (_b = frontstageDef.bottomLeft) === null || _b === void 0 ? void 0 : _b.zoneState,
-        ], [(_c = frontstageDef.leftPanel) === null || _c === void 0 ? void 0 : _c.panelState]);
-        stateDraft.panels.right.collapsed = isPanelCollapsed([
-            (_d = frontstageDef.centerRight) === null || _d === void 0 ? void 0 : _d.zoneState,
-            (_e = frontstageDef.bottomRight) === null || _e === void 0 ? void 0 : _e.zoneState,
-        ], [(_f = frontstageDef.rightPanel) === null || _f === void 0 ? void 0 : _f.panelState]);
-        stateDraft.panels.top.collapsed = isPanelCollapsed([], [
-            // istanbul ignore next - ignore topMostPanel if topPanel is defined
-            frontstageDef.topPanel ? (_g = frontstageDef.topPanel) === null || _g === void 0 ? void 0 : _g.panelState : (_h = frontstageDef.topMostPanel) === null || _h === void 0 ? void 0 : _h.panelState, // eslint-disable-line deprecation/deprecation
-        ]);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed([], [
-            // istanbul ignore next - ignore bottomMostPanel if bottomPanel is defined
-            frontstageDef.bottomPanel ? (_j = frontstageDef.bottomPanel) === null || _j === void 0 ? void 0 : _j.panelState : (_k = frontstageDef.bottomMostPanel) === null || _k === void 0 ? void 0 : _k.panelState, // eslint-disable-line deprecation/deprecation
-        ]);
-        const topCenterDef = frontstageDef.topCenter;
-        const toolSettingsWidgetDef = topCenterDef === null || topCenterDef === void 0 ? void 0 : topCenterDef.getSingleWidgetDef();
+        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;
@@ -782,10 +662,8 @@ function restoreSavedWidgets(frontstage) {
     }
 }
 /** @internal */
-function isPanelCollapsed(zoneStates, panelStates) {
-    const openZone = zoneStates.find((zoneState) => zoneState === ZoneDef_1.ZoneState.Open);
-    const openPanel = panelStates.find((panelState) => panelState === StagePanelDef_1.StagePanelState.Open);
-    return !openZone && !openPanel;
+function isPanelCollapsed(panelState) {
+    return panelState !== StagePanelDef_1.StagePanelState.Open;
 }
 exports.isPanelCollapsed = isPanelCollapsed;
 function addHiddenWidget(state, widgetDef) {
@@ -1006,16 +884,15 @@ function useSavedFrontstageState(frontstageDef) {
             }
             frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
-        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        void fetchFrontstageState();
     }, [frontstageDef]);
 }
 exports.useSavedFrontstageState = useSavedFrontstageState;
 /** @internal */
-function useSaveFrontstageSettings(frontstageDef) {
-    const nineZone = useNineZoneState(frontstageDef);
+function useSaveFrontstageSettings(frontstageDef, store) {
     const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const saveSetting = React.useMemo(() => {
-        return debounce(async (frontstage, state) => {
+        const debounced = debounce(async (frontstage, state) => {
             const id = frontstage.id;
             const widgets = packSavedWidgets(frontstage);
             frontstage.savedWidgetDefs = widgets;
@@ -1028,6 +905,13 @@ function useSaveFrontstageSettings(frontstageDef) {
             };
             await uiSettingsStorage.saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
         }, 1000);
+        const save = (frontstage, state) => {
+            if (state.draggedTab)
+                return;
+            debounced(frontstage, state);
+        };
+        save.cancel = debounced.cancel;
+        return save;
     }, [uiSettingsStorage]);
     React.useEffect(() => {
         return () => {
@@ -1035,10 +919,13 @@ function useSaveFrontstageSettings(frontstageDef) {
         };
     }, [saveSetting]);
     React.useEffect(() => {
-        if (!nineZone || nineZone.draggedTab)
-            return;
-        saveSetting(frontstageDef, nineZone);
-    }, [frontstageDef, nineZone, saveSetting]);
+        saveSetting(frontstageDef, store.getState());
+    }, [saveSetting, frontstageDef, store]);
+    React.useEffect(() => {
+        return store.subscribe(() => {
+            saveSetting(frontstageDef, store.getState());
+        });
+    }, [saveSetting, frontstageDef, store]);
 }
 exports.useSaveFrontstageSettings = useSaveFrontstageSettings;
 /** @internal */
@@ -1109,7 +996,7 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = (args) => {
             // TODO: track restoring frontstages to support workflows:  i.e. prevent loading frontstage OR saving layout when delete is pending
-            uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id)); // eslint-disable-line @typescript-eslint/no-floating-promises
+            void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
             if (frontstageDef.id === args.frontstageDef.id) {
                 args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
             }
@@ -1191,6 +1078,10 @@ function useItemsManager(frontstageDef) {
 exports.useItemsManager = useItemsManager;
 // istanbul ignore next
 function determineNewWidgets(defs, state) {
-    return (defs || []).filter((def) => !(def.id in state.tabs));
+    defs = defs || [];
+    const uniqueDefs = defs.filter((def, index, array) => {
+        return index === array.findIndex((def1) => def.id === def1.id);
+    });
+    return uniqueDefs.filter((def) => !(def.id in state.tabs));
 }
 //# sourceMappingURL=Frontstage.js.map