npm - @itwin/appui-react - Versions diffs - 3.7.0-dev.1 → 4.0.0-dev.10 - Mend

@itwin/appui-react 3.7.0-dev.1 → 4.0.0-dev.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1381) hide show

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

@@ -2,7 +2,6 @@
 * 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
  */
@@ -10,16 +9,14 @@
 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, 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, 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 { StagePanelState } from "../stagepanels/StagePanelDef";
+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 { StagePanelState, toPanelSide } 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";
@@ -33,55 +30,47 @@ import { useUiVisibility } from "../hooks/useUiVisibility";
 import { IModelApp } from "@itwin/core-frontend";
 import { FloatingWidget } from "./FloatingWidget";
 import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
-const panelZoneKeys = ["start", "end"];
-const WidgetInternals = React.memo(function WidgetInternals() {
+import { WidgetState } from "../widgets/WidgetState";
+import { StagePanelSection } from "../stagepanels/StagePanelSection";
+import { StagePanelLocation } from "../stagepanels/StagePanelLocation";
+import { UiItemsManager } from "../ui-items-provider/UiItemsManager";
+function WidgetPanelsFrontstageComponent() {
     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 useNineZoneState(frontstageDef) {
-    const lastFrontstageDef = React.useRef(frontstageDef);
-    const [nineZone, setNineZone] = React.useState(frontstageDef.nineZoneState);
+export function useLayoutStore() {
+    const [def, setDef] = React.useState(UiFramework.frontstages.activeFrontstageDef);
+    const [layout, setLayout] = React.useState(() => createLayoutStore(def === null || def === void 0 ? void 0 : def.nineZoneState));
     React.useEffect(() => {
-        setNineZone(frontstageDef.nineZoneState);
-        lastFrontstageDef.current = frontstageDef;
-    }, [frontstageDef]);
+        return UiFramework.frontstages.onFrontstageActivatedEvent.addListener((args) => {
+            unstable_batchedUpdates(() => {
+                setDef(args.activatedFrontstageDef);
+                setLayout(createLayoutStore(args.activatedFrontstageDef.nineZoneState));
+            });
+        });
+    }, []);
     React.useEffect(() => {
-        const listener = (args) => {
-            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
+        return InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
+            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
                 return;
-            setNineZone(args.state);
-        };
-        return InternalFrontstageManager.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;
+            unstable_batchedUpdates(() => {
+                layout.setState(args.state || defaultNineZone);
+            });
+        });
+    }, [def, layout]);
+    return [layout, def];
 }
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
  * @internal
@@ -143,16 +132,16 @@ export 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;
 }
 /** @internal */
-export const WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
-    const frontstageDef = useActiveFrontstageDef();
+export function WidgetPanelsFrontstage() {
+    const [layout, frontstageDef] = useLayoutStore();
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -165,19 +154,17 @@ export const WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
-});
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+}
 const defaultNineZone = createNineZoneState();
 const tabElement = React.createElement(WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget, null);
 /** @internal */
-export function ActiveFrontstageDefProvider({ frontstageDef }) {
-    let nineZone = useNineZoneState(frontstageDef);
-    nineZone = useCachedNineZoneState(nineZone);
+export function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
-    useSaveFrontstageSettings(frontstageDef);
+    useSaveFrontstageSettings(frontstageDef, layout);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = useUiVisibility();
@@ -200,7 +187,7 @@ export function ActiveFrontstageDefProvider({ frontstageDef }) {
     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, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        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)));
 }
 /** @internal */
 export function useLabels() {
@@ -249,10 +236,11 @@ export function addWidgets(state, widgets, side, widgetId) {
 }
 /** @internal */
 // istanbul ignore next
-export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
+export function appendWidgets(state, widgetDefs, location, section) {
     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);
@@ -275,7 +263,7 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : 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) {
@@ -298,6 +286,7 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             }
         }
         else {
+            const preferredWidgetIndex = section;
             const widgetPanelSectionId = getWidgetPanelSectionId(side, preferredWidgetIndex);
             if (widgetPanelSectionId in state.widgets) {
                 state = addTabToWidget(state, widgetDef.id, widgetPanelSectionId);
@@ -336,26 +325,16 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 export 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(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);
     return state;
 }
 /** Hide widgets with Hidden defaultState. */
@@ -402,128 +381,44 @@ function toStagePanelLocation(side) {
     }
 }
 /** @internal */
-export function getWidgetId(side, key) {
-    switch (side) {
-        case "left": {
-            if (key === "start") {
+export function getWidgetId(location, section) {
+    switch (location) {
+        case StagePanelLocation.Left: {
+            if (section === StagePanelSection.Start)
                 return "leftStart";
-            }
             return "leftEnd";
         }
-        case "right": {
-            if (key === "start") {
+        case StagePanelLocation.Right: {
+            if (section === StagePanelSection.Start)
                 return "rightStart";
-            }
             return "rightEnd";
         }
-        case "top": {
-            if (key === "start") {
+        case StagePanelLocation.Top: {
+            if (section === StagePanelSection.Start)
                 return "topStart";
-            }
             return "topEnd";
         }
-        case "bottom": {
-            if (key === "start")
+        case StagePanelLocation.Bottom: {
+            if (section === StagePanelSection.Start)
                 return "bottomStart";
             return "bottomEnd";
         }
     }
 }
 /** @internal */
-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;
-        }
-    }
+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) || [];
 }
 /** @internal */
-export function addPanelWidgets(state, frontstageDef, side) {
-    const start = getWidgetId(side, "start");
-    const startWidgets = getPanelZoneWidgets(frontstageDef, start);
+export function addPanelWidgets(state, frontstageDef, location) {
+    const side = toPanelSide(location);
+    const start = getWidgetId(location, StagePanelSection.Start);
+    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.Start);
     state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(side, "end");
-    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
+    const end = getWidgetId(location, StagePanelSection.End);
+    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection.End);
     state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
@@ -534,9 +429,9 @@ export function isFrontstageStateSettingResult(settingsResult) {
     return false;
 }
 /** @internal */
-export function initializePanel(state, frontstageDef, panelSide) {
-    state = addPanelWidgets(state, frontstageDef, panelSide);
-    const location = toStagePanelLocation(panelSide);
+export function initializePanel(state, frontstageDef, location) {
+    const panelSide = toPanelSide(location);
+    state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = produce(state, (draft) => {
         var _a, _b, _c;
@@ -572,12 +467,12 @@ export function initializeNineZoneState(frontstageDef) {
             width: InternalFrontstageManager.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, StagePanelLocation.Left);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Right);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Top);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation.Bottom);
     nineZone = produce(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;
@@ -586,24 +481,11 @@ export 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[toolSettingsTabId];
             toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
@@ -761,10 +643,8 @@ function restoreSavedWidgets(frontstage) {
     }
 }
 /** @internal */
-export function isPanelCollapsed(zoneStates, panelStates) {
-    const openZone = zoneStates.find((zoneState) => zoneState === ZoneState.Open);
-    const openPanel = panelStates.find((panelState) => panelState === StagePanelState.Open);
-    return !openZone && !openPanel;
+export function isPanelCollapsed(panelState) {
+    return panelState !== StagePanelState.Open;
 }
 function addHiddenWidget(state, widgetDef) {
     const tabLocation = widgetDef.tabLocation || widgetDef.defaultTabLocation;
@@ -980,15 +860,14 @@ export function useSavedFrontstageState(frontstageDef) {
             }
             frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
-        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        void fetchFrontstageState();
     }, [frontstageDef]);
 }
 /** @internal */
-export function useSaveFrontstageSettings(frontstageDef) {
-    const nineZone = useNineZoneState(frontstageDef);
+export function useSaveFrontstageSettings(frontstageDef, store) {
     const uiSettingsStorage = 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;
@@ -1001,6 +880,13 @@ export function useSaveFrontstageSettings(frontstageDef) {
             };
             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 () => {
@@ -1008,10 +894,13 @@ export 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]);
 }
 /** @internal */
 export const FRONTSTAGE_SETTINGS_NAMESPACE = "uifw-frontstageSettings";
@@ -1080,7 +969,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
-            uiSettingsStorage.deleteSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id)); // eslint-disable-line @typescript-eslint/no-floating-promises
+            void uiSettingsStorage.deleteSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
             if (frontstageDef.id === args.frontstageDef.id) {
                 args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
             }
@@ -1160,6 +1049,10 @@ export function useItemsManager(frontstageDef) {
 }
 // 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