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

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

@@ -2,6 +2,7 @@
 * 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 */
 /** @packageDocumentation
  * @module Frontstage
  */
@@ -9,16 +10,17 @@
 import "./Frontstage.scss";
 import produce from "immer";
 import * as React from "react";
-import { unstable_batchedUpdates } from "react-dom";
 import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
-import { StagePanelLocation, StagePanelSection, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
+import { StagePanelLocation, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
 import { Rectangle, Size, UiStateStorageStatus } from "@itwin/core-react";
 import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addFloatingWidget, addPanelWidget, addTab, addTabToWidget, convertAllPopupWidgetContainersToFloating, createLayoutStore, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, insertPanelWidget, insertTabToWidget, isFloatingTabLocation, isHorizontalPanelSide, isPanelTabLocation, isPopoutTabLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, removeTabFromWidget, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { addFloatingWidget, addPanelWidget, addTab, addTabToWidget, convertAllPopupWidgetContainersToFloating, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, insertPanelWidget, insertTabToWidget, isFloatingTabLocation, isHorizontalPanelSide, isPanelTabLocation, isPopoutTabLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, removeTabFromWidget, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { useActiveFrontstageDef } from "../frontstage/Frontstage";
 import { FrontstageManager } from "../frontstage/FrontstageManager";
-import { StagePanelState, toPanelSide } from "../stagepanels/StagePanelDef";
+import { StagePanelState } from "../stagepanels/StagePanelDef";
 import { UiFramework } from "../UiFramework";
 import { useUiStateStorageHandler } from "../uistate/useUiStateStorage";
+import { ZoneState } from "../zones/ZoneDef";
 import { WidgetContent } from "./Content";
 import { WidgetPanelsFrontstageContent } from "./FrontstageContent";
 import { ModalFrontstageComposer, useActiveModalFrontstageInfo } from "./ModalFrontstageComposer";
@@ -31,43 +33,55 @@ import { useSelector } from "react-redux";
 import { useUiVisibility } from "../hooks/useUiVisibility";
 import { IModelApp } from "@itwin/core-frontend";
 import { FloatingWidget } from "./FloatingWidget";
-function WidgetPanelsFrontstageComponent() {
+const panelZoneKeys = ["start", "end"];
+const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
     const uiIsVisible = useUiVisibility();
     return (React.createElement(React.Fragment, null,
-        React.createElement(WidgetPanelsToolSettings, null),
         React.createElement(ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
             React.createElement(ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
             React.createElement(WidgetPanels, { className: "uifw-widgetPanels", centerContent: React.createElement(WidgetPanelsToolbars, null) },
                 React.createElement(WidgetPanelsFrontstageContent, null)),
             React.createElement(WidgetPanelsStatusBar, null),
             React.createElement(FloatingWidgets, null))));
-}
+});
+// istanbul ignore next
+const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(WidgetPanelsToolSettings, null),
+        React.createElement(WidgetInternals, null)));
+});
 const widgetContent = React.createElement(WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
 /** @internal */
-export function useLayoutStore() {
-    const [def, setDef] = React.useState(FrontstageManager.activeFrontstageDef);
-    const [layout, setLayout] = React.useState(() => createLayoutStore(def === null || def === void 0 ? void 0 : def.nineZoneState));
+export function useNineZoneState(frontstageDef) {
+    const lastFrontstageDef = React.useRef(frontstageDef);
+    const [nineZone, setNineZone] = React.useState(frontstageDef.nineZoneState);
     React.useEffect(() => {
-        return FrontstageManager.onFrontstageActivatedEvent.addListener((args) => {
-            unstable_batchedUpdates(() => {
-                setDef(args.activatedFrontstageDef);
-                setLayout(createLayoutStore(args.activatedFrontstageDef.nineZoneState));
-            });
-        });
-    }, []);
+        setNineZone(frontstageDef.nineZoneState);
+        lastFrontstageDef.current = frontstageDef;
+    }, [frontstageDef]);
     React.useEffect(() => {
-        return FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
-            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
+        const listener = (args) => {
+            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
                 return;
-            unstable_batchedUpdates(() => {
-                layout.setState(args.state || defaultNineZone);
-            });
-        });
-    }, [def, layout]);
-    return [layout, def];
+            setNineZone(args.state);
+        };
+        return FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(listener);
+    }, [frontstageDef]);
+    return lastFrontstageDef.current === frontstageDef ? nineZone : frontstageDef.nineZoneState;
+}
+/** @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;
 }
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
  * @internal
@@ -129,16 +143,16 @@ export 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;
 }
 /** @internal */
-export function WidgetPanelsFrontstage() {
-    const [layout, frontstageDef] = useLayoutStore();
+export const WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
+    const frontstageDef = useActiveFrontstageDef();
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -151,17 +165,19 @@ export function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
-}
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
+});
 const defaultNineZone = createNineZoneState();
 const tabElement = React.createElement(WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget, null);
 /** @internal */
-export function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
+export 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 = useUiVisibility();
@@ -184,7 +200,7 @@ export function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = useEscapeSetFocusToHome();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(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(NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 /** @internal */
 export function useLabels() {
@@ -233,11 +249,10 @@ export function addWidgets(state, widgets, side, widgetId) {
 }
 /** @internal */
 // istanbul ignore next
-export function appendWidgets(state, widgetDefs, location, section) {
+export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
     var _a;
     if (widgetDefs.length === 0)
         return state;
-    const side = toPanelSide(location);
     // Add missing widget tabs.
     for (const widgetDef of widgetDefs) {
         const label = getWidgetLabel(widgetDef.label);
@@ -260,7 +275,7 @@ export function appendWidgets(state, widgetDefs, location, section) {
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : 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) {
@@ -283,7 +298,6 @@ export function appendWidgets(state, widgetDefs, location, section) {
             }
         }
         else {
-            const preferredWidgetIndex = section;
             const widgetPanelSectionId = getWidgetPanelSectionId(side, preferredWidgetIndex);
             if (widgetPanelSectionId in state.widgets) {
                 state = addTabToWidget(state, widgetDef.id, widgetPanelSectionId);
@@ -322,16 +336,26 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 export 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(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Left, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Left, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Right, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Right, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Top, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Top, StagePanelSection.End);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(StagePanelSection.Start).widgetDefs, state), StagePanelLocation.Bottom, StagePanelSection.Start);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(StagePanelSection.End).widgetDefs, state), StagePanelLocation.Bottom, 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;
 }
 /** Hide widgets with Hidden defaultState. */
@@ -378,44 +402,128 @@ function toStagePanelLocation(side) {
     }
 }
 /** @internal */
-export function getWidgetId(location, section) {
-    switch (location) {
-        case StagePanelLocation.Left: {
-            if (section === StagePanelSection.Start)
+export function getWidgetId(side, key) {
+    switch (side) {
+        case "left": {
+            if (key === "start") {
                 return "leftStart";
+            }
             return "leftEnd";
         }
-        case StagePanelLocation.Right: {
-            if (section === StagePanelSection.Start)
+        case "right": {
+            if (key === "start") {
                 return "rightStart";
+            }
             return "rightEnd";
         }
-        case StagePanelLocation.Top: {
-            if (section === StagePanelSection.Start)
+        case "top": {
+            if (key === "start") {
                 return "topStart";
+            }
             return "topEnd";
         }
-        case StagePanelLocation.Bottom: {
-            if (section === StagePanelSection.Start)
+        case "bottom": {
+            if (key === "start")
                 return "bottomStart";
             return "bottomEnd";
         }
     }
 }
 /** @internal */
-export 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) || [];
+export 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;
+        }
+    }
 }
 /** @internal */
-export function addPanelWidgets(state, frontstageDef, location) {
-    const side = toPanelSide(location);
-    const start = getWidgetId(location, StagePanelSection.Start);
-    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.Start);
+export 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, StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.End);
+    const end = getWidgetId(side, "end");
+    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
     state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
@@ -426,9 +534,9 @@ export function isFrontstageStateSettingResult(settingsResult) {
     return false;
 }
 /** @internal */
-export function initializePanel(state, frontstageDef, location) {
-    const panelSide = toPanelSide(location);
-    state = addPanelWidgets(state, frontstageDef, location);
+export function initializePanel(state, frontstageDef, panelSide) {
+    state = addPanelWidgets(state, frontstageDef, panelSide);
+    const location = toStagePanelLocation(panelSide);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = produce(state, (draft) => {
         var _a, _b, _c;
@@ -464,12 +572,12 @@ export function initializeNineZoneState(frontstageDef) {
             width: FrontstageManager.nineZoneSize.width,
         };
     });
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Left);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Right);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Top);
-    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Bottom);
+    nineZone = initializePanel(nineZone, frontstageDef, "left");
+    nineZone = initializePanel(nineZone, frontstageDef, "right");
+    nineZone = initializePanel(nineZone, frontstageDef, "top");
+    nineZone = initializePanel(nineZone, frontstageDef, "bottom");
     nineZone = produce(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;
@@ -478,11 +586,24 @@ export 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[toolSettingsTabId];
             toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
@@ -640,8 +761,10 @@ function restoreSavedWidgets(frontstage) {
     }
 }
 /** @internal */
-export function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelState.Open;
+export function isPanelCollapsed(zoneStates, panelStates) {
+    const openZone = zoneStates.find((zoneState) => zoneState === ZoneState.Open);
+    const openPanel = panelStates.find((panelState) => panelState === StagePanelState.Open);
+    return !openZone && !openPanel;
 }
 function addHiddenWidget(state, widgetDef) {
     const tabLocation = widgetDef.tabLocation || widgetDef.defaultTabLocation;
@@ -857,14 +980,15 @@ export function useSavedFrontstageState(frontstageDef) {
             }
             frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
-        void fetchFrontstageState();
+        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
     }, [frontstageDef]);
 }
 /** @internal */
-export function useSaveFrontstageSettings(frontstageDef, store) {
+export function useSaveFrontstageSettings(frontstageDef) {
+    const nineZone = useNineZoneState(frontstageDef);
     const uiSettingsStorage = 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;
@@ -877,13 +1001,6 @@ export function useSaveFrontstageSettings(frontstageDef, store) {
             };
             await uiSettingsStorage.saveSetting(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 () => {
@@ -891,13 +1008,10 @@ export 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]);
 }
 /** @internal */
 export const FRONTSTAGE_SETTINGS_NAMESPACE = "uifw-frontstageSettings";
@@ -966,7 +1080,7 @@ export 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(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
+            uiSettingsStorage.deleteSetting(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);
             }
@@ -1046,10 +1160,6 @@ export function useItemsManager(frontstageDef) {
 }
 // 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