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

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

@@ -3,25 +3,27 @@
 * 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");
@@ -34,45 +36,57 @@ 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");
-function WidgetPanelsFrontstageComponent() {
+const panelZoneKeys = ["start", "end"];
+const WidgetInternals = React.memo(function WidgetInternals() {
     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 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));
+function useNineZoneState(frontstageDef) {
+    const lastFrontstageDef = React.useRef(frontstageDef);
+    const [nineZone, setNineZone] = React.useState(frontstageDef.nineZoneState);
     React.useEffect(() => {
-        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));
-            });
-        });
-    }, []);
+        setNineZone(frontstageDef.nineZoneState);
+        lastFrontstageDef.current = frontstageDef;
+    }, [frontstageDef]);
     React.useEffect(() => {
-        return FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
-            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
+        const listener = (args) => {
+            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
                 return;
-            (0, react_dom_1.unstable_batchedUpdates)(() => {
-                layout.setState(args.state || defaultNineZone);
-            });
-        });
-    }, [def, layout]);
-    return [layout, def];
+            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;
 }
-exports.useLayoutStore = useLayoutStore;
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
  * @internal
  */
@@ -135,17 +149,17 @@ function useNineZoneDispatch(frontstageDef) {
             frontstageDef.popoutWidget(tabId);
             return;
         }
-        const state = frontstageDef.nineZoneState;
-        if (!state)
+        const nineZoneState = frontstageDef.nineZoneState;
+        if (!nineZoneState)
             return;
-        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
+        frontstageDef.nineZoneState = FrameworkStateReducer(nineZoneState, action, frontstageDef);
     }, [frontstageDef]);
     return dispatch;
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
-function WidgetPanelsFrontstage() {
-    const [layout, frontstageDef] = useLayoutStore();
+exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
+    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -158,18 +172,19 @@ function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
-}
-exports.WidgetPanelsFrontstage = WidgetPanelsFrontstage;
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
+});
 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 }) {
+    let nineZone = useNineZoneState(frontstageDef);
+    nineZone = useCachedNineZoneState(nineZone);
     const dispatch = useNineZoneDispatch(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
-    useSaveFrontstageSettings(frontstageDef, layout);
+    useSaveFrontstageSettings(frontstageDef);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -192,7 +207,7 @@ function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
     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, layout: layout, 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, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
 /** @internal */
@@ -244,11 +259,10 @@ function addWidgets(state, widgets, side, widgetId) {
 exports.addWidgets = addWidgets;
 /** @internal */
 // istanbul ignore next
-function appendWidgets(state, widgetDefs, location, section) {
+function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
     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);
@@ -271,7 +285,7 @@ function appendWidgets(state, widgetDefs, location, section) {
         });
         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(location, section);
+            const widgetContainerId = getWidgetId(side, panelZoneKeys[preferredWidgetIndex]);
             const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
             if (floatingContainerId in state.widgets) {
@@ -294,7 +308,6 @@ function appendWidgets(state, widgetDefs, location, section) {
             }
         }
         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);
@@ -334,16 +347,26 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     let state = initialState;
-    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);
+    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);
     return state;
 }
 exports.addMissingWidgets = addMissingWidgets;
@@ -392,25 +415,28 @@ function toStagePanelLocation(side) {
     }
 }
 /** @internal */
-function getWidgetId(location, section) {
-    switch (location) {
-        case appui_abstract_1.StagePanelLocation.Left: {
-            if (section === appui_abstract_1.StagePanelSection.Start)
+function getWidgetId(side, key) {
+    switch (side) {
+        case "left": {
+            if (key === "start") {
                 return "leftStart";
+            }
             return "leftEnd";
         }
-        case appui_abstract_1.StagePanelLocation.Right: {
-            if (section === appui_abstract_1.StagePanelSection.Start)
+        case "right": {
+            if (key === "start") {
                 return "rightStart";
+            }
             return "rightEnd";
         }
-        case appui_abstract_1.StagePanelLocation.Top: {
-            if (section === appui_abstract_1.StagePanelSection.Start)
+        case "top": {
+            if (key === "start") {
                 return "topStart";
+            }
             return "topEnd";
         }
-        case appui_abstract_1.StagePanelLocation.Bottom: {
-            if (section === appui_abstract_1.StagePanelSection.Start)
+        case "bottom": {
+            if (key === "start")
                 return "bottomStart";
             return "bottomEnd";
         }
@@ -418,20 +444,101 @@ function getWidgetId(location, section) {
 }
 exports.getWidgetId = getWidgetId;
 /** @internal */
-function getPanelSectionWidgets(frontstageDef, location, section) {
-    const stagePanel = frontstageDef.getStagePanelDef(location);
-    const panelSection = stagePanel === null || stagePanel === void 0 ? void 0 : stagePanel.getPanelSectionDef(section);
-    return (panelSection === null || panelSection === void 0 ? void 0 : panelSection.widgetDefs) || [];
+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;
+        }
+    }
 }
-exports.getPanelSectionWidgets = getPanelSectionWidgets;
+exports.getPanelZoneWidgets = getPanelZoneWidgets;
 /** @internal */
-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);
+function addPanelWidgets(state, frontstageDef, side) {
+    const start = getWidgetId(side, "start");
+    const startWidgets = getPanelZoneWidgets(frontstageDef, start);
     state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(location, appui_abstract_1.StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, appui_abstract_1.StagePanelSection.End);
+    const end = getWidgetId(side, "end");
+    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
     state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
@@ -444,9 +551,9 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(state, frontstageDef, location) {
-    const panelSide = (0, StagePanelDef_1.toPanelSide)(location);
-    state = addPanelWidgets(state, frontstageDef, location);
+function initializePanel(state, frontstageDef, panelSide) {
+    state = addPanelWidgets(state, frontstageDef, panelSide);
+    const location = toStagePanelLocation(panelSide);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = (0, immer_1.default)(state, (draft) => {
         var _a, _b, _c;
@@ -483,12 +590,12 @@ function initializeNineZoneState(frontstageDef) {
             width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
         };
     });
-    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 = initializePanel(nineZone, frontstageDef, "left");
+    nineZone = initializePanel(nineZone, frontstageDef, "right");
+    nineZone = initializePanel(nineZone, frontstageDef, "top");
+    nineZone = initializePanel(nineZone, frontstageDef, "bottom");
     nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         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;
@@ -497,11 +604,24 @@ function initializeNineZoneState(frontstageDef) {
                 firstWidget.minimized = false;
             }
         }
-        stateDraft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
-        stateDraft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
-        stateDraft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
-        const toolSettingsWidgetDef = frontstageDef.toolSettings;
+        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();
         if (toolSettingsWidgetDef) {
             const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
             toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
@@ -662,8 +782,10 @@ function restoreSavedWidgets(frontstage) {
     }
 }
 /** @internal */
-function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelDef_1.StagePanelState.Open;
+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;
 }
 exports.isPanelCollapsed = isPanelCollapsed;
 function addHiddenWidget(state, widgetDef) {
@@ -884,15 +1006,16 @@ function useSavedFrontstageState(frontstageDef) {
             }
             frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
-        void fetchFrontstageState();
+        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
     }, [frontstageDef]);
 }
 exports.useSavedFrontstageState = useSavedFrontstageState;
 /** @internal */
-function useSaveFrontstageSettings(frontstageDef, store) {
+function useSaveFrontstageSettings(frontstageDef) {
+    const nineZone = useNineZoneState(frontstageDef);
     const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const saveSetting = React.useMemo(() => {
-        const debounced = debounce(async (frontstage, state) => {
+        return debounce(async (frontstage, state) => {
             const id = frontstage.id;
             const widgets = packSavedWidgets(frontstage);
             frontstage.savedWidgetDefs = widgets;
@@ -905,13 +1028,6 @@ function useSaveFrontstageSettings(frontstageDef, store) {
             };
             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 () => {
@@ -919,13 +1035,10 @@ function useSaveFrontstageSettings(frontstageDef, store) {
         };
     }, [saveSetting]);
     React.useEffect(() => {
-        saveSetting(frontstageDef, store.getState());
-    }, [saveSetting, frontstageDef, store]);
-    React.useEffect(() => {
-        return store.subscribe(() => {
-            saveSetting(frontstageDef, store.getState());
-        });
-    }, [saveSetting, frontstageDef, store]);
+        if (!nineZone || nineZone.draggedTab)
+            return;
+        saveSetting(frontstageDef, nineZone);
+    }, [frontstageDef, nineZone, saveSetting]);
 }
 exports.useSaveFrontstageSettings = useSaveFrontstageSettings;
 /** @internal */
@@ -996,7 +1109,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
-            void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
+            uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id)); // eslint-disable-line @typescript-eslint/no-floating-promises
             if (frontstageDef.id === args.frontstageDef.id) {
                 args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
             }
@@ -1078,10 +1191,6 @@ function useItemsManager(frontstageDef) {
 exports.useItemsManager = useItemsManager;
 // istanbul ignore next
 function determineNewWidgets(defs, state) {
-    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));
+    return (defs || []).filter((def) => !(def.id in state.tabs));
 }
 //# sourceMappingURL=Frontstage.js.map