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

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

@@ -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,17 +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 { FrontstageManager } from "../frontstage/FrontstageManager";
-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,62 +29,55 @@ import { useSelector } from "react-redux";
 import { useUiVisibility } from "../hooks/useUiVisibility";
 import { IModelApp } from "@itwin/core-frontend";
 import { FloatingWidget } from "./FloatingWidget";
-const panelZoneKeys = ["start", "end"];
-const WidgetInternals = React.memo(function WidgetInternals() {
+import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
+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 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;
+            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
  */
 export function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
-        const size = FrontstageManager.nineZoneSize;
+        const size = InternalFrontstageManager.nineZoneSize;
         let state = frontstageDef.nineZoneState;
         if (!size || !state)
             return;
@@ -126,7 +115,7 @@ export function FrameworkStateReducer(state, action, frontstageDef) {
 export function useNineZoneDispatch(frontstageDef) {
     const dispatch = React.useCallback((action) => {
         if (action.type === "RESIZE") {
-            FrontstageManager.nineZoneSize = Size.create(action.size);
+            InternalFrontstageManager.nineZoneSize = Size.create(action.size);
         }
         // istanbul ignore if
         if (action.type === "TOOL_SETTINGS_DRAG_START") {
@@ -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() {
@@ -218,6 +205,7 @@ export function useLabels() {
 }
 /** @internal */
 export function addWidgets(state, widgets, side, widgetId) {
+    var _a;
     const visibleWidgets = widgets.filter((w) => w.isVisible && (w.defaultState !== WidgetState.Floating));
     if (visibleWidgets.length === 0)
         return state;
@@ -232,7 +220,7 @@ export function addWidgets(state, widgets, side, widgetId) {
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
             hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
-            allowedPanelTargets: widget.allowedPanelTargets,
+            allowedPanelTargets: (_a = widget.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((location) => toPanelSide(location)),
         });
         tabs.push(widget.id);
     }
@@ -249,10 +237,11 @@ export function addWidgets(state, widgets, side, widgetId) {
 }
 /** @internal */
 // istanbul ignore next
-export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
-    var _a;
+export function appendWidgets(state, widgetDefs, location, section) {
+    var _a, _b;
     if (widgetDefs.length === 0)
         return state;
+    const side = toPanelSide(location);
     // Add missing widget tabs.
     for (const widgetDef of widgetDefs) {
         const label = getWidgetLabel(widgetDef.label);
@@ -271,11 +260,11 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             userSized,
             isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
             hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
-            allowedPanelTargets: widgetDef.allowedPanelTargets,
+            allowedPanelTargets: (_a = widgetDef.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((l) => toPanelSide(l)),
         });
         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 floatingContainerId = (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : getUniqueId();
+            const widgetContainerId = getWidgetId(location, section);
             const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
             if (floatingContainerId in state.widgets) {
@@ -298,6 +287,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 +326,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 +382,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 +430,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;
@@ -565,19 +461,19 @@ export function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
     nineZone = produce(nineZone, (stateDraft) => {
         // istanbul ignore next
-        if (!FrontstageManager.nineZoneSize)
+        if (!InternalFrontstageManager.nineZoneSize)
             return;
         stateDraft.size = {
-            height: FrontstageManager.nineZoneSize.height,
-            width: FrontstageManager.nineZoneSize.width,
+            height: InternalFrontstageManager.nineZoneSize.height,
+            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 +482,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;
@@ -637,6 +520,7 @@ export function restoreNineZoneState(frontstageDef, saved) {
             continue;
         }
         restored = produce(restored, (draft) => {
+            var _a;
             draft.tabs[tab.id] = {
                 ...tab,
                 label: getWidgetLabel(widgetDef.label),
@@ -644,7 +528,7 @@ export function restoreNineZoneState(frontstageDef, saved) {
                 iconSpec: widgetDef.iconSpec,
                 canPopout: widgetDef.canPopout,
                 isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-                allowedPanelTargets: widgetDef.allowedPanelTargets,
+                allowedPanelTargets: (_a = widgetDef.allowedPanelTargets) === null || _a === void 0 ? void 0 : _a.map((location) => toPanelSide(location)),
             };
         });
     }
@@ -676,12 +560,12 @@ export function restoreNineZoneState(frontstageDef, saved) {
         }
         return;
     });
-    if (FrontstageManager.nineZoneSize && (0 !== FrontstageManager.nineZoneSize.height || 0 !== FrontstageManager.nineZoneSize.width)) {
+    if (InternalFrontstageManager.nineZoneSize && (0 !== InternalFrontstageManager.nineZoneSize.height || 0 !== InternalFrontstageManager.nineZoneSize.width)) {
         restored = FrameworkStateReducer(restored, {
             type: "RESIZE",
             size: {
-                height: FrontstageManager.nineZoneSize.height,
-                width: FrontstageManager.nineZoneSize.width,
+                height: InternalFrontstageManager.nineZoneSize.height,
+                width: InternalFrontstageManager.nineZoneSize.width,
             },
         }, frontstageDef);
     }
@@ -761,10 +645,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 +862,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 +882,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 +896,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";
@@ -1049,9 +940,9 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             assert(!!frontstageDef.nineZoneState);
             frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
         });
-        FrontstageManager.onWidgetStateChangedEvent.addListener(listener);
+        UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
         return () => {
-            FrontstageManager.onWidgetStateChangedEvent.removeListener(listener);
+            UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     React.useEffect(() => {
@@ -1059,9 +950,9 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             assert(!!frontstageDef.nineZoneState);
             frontstageDef.nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
         });
-        FrontstageManager.onWidgetShowEvent.addListener(listener);
+        InternalFrontstageManager.onWidgetShowEvent.addListener(listener);
         return () => {
-            FrontstageManager.onWidgetShowEvent.removeListener(listener);
+            InternalFrontstageManager.onWidgetShowEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     React.useEffect(() => {
@@ -1071,16 +962,16 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             nineZoneState = expandWidget(nineZoneState, widgetDef.id);
             frontstageDef.nineZoneState = nineZoneState;
         });
-        FrontstageManager.onWidgetExpandEvent.addListener(listener);
+        InternalFrontstageManager.onWidgetExpandEvent.addListener(listener);
         return () => {
-            FrontstageManager.onWidgetExpandEvent.removeListener(listener);
+            InternalFrontstageManager.onWidgetExpandEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     const uiSettingsStorage = useUiStateStorageHandler();
     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);
             }
@@ -1088,9 +979,9 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
                 args.frontstageDef.nineZoneState = undefined;
             }
         };
-        FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
+        InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
         return () => {
-            FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
+            InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
         };
     }, [uiSettingsStorage, frontstageDef]);
     React.useEffect(() => {
@@ -1099,16 +990,16 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
             const label = widgetDef.label;
             frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
         });
-        FrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
+        InternalFrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
         return () => {
-            FrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
+            InternalFrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     const defaultLabel = React.useMemo(() => UiFramework.translate("widget.labels.toolSettings"), []);
     React.useEffect(() => {
         const updateLabel = createListener(frontstageDef, () => {
             var _a;
-            const toolId = FrontstageManager.activeToolId;
+            const toolId = UiFramework.frontstages.activeToolId;
             assert(!!frontstageDef.nineZoneState);
             const label = useToolAsToolSettingsLabel ?
                 ((_a = IModelApp.tools.find(toolId)) === null || _a === void 0 ? void 0 : _a.flyover) || defaultLabel : defaultLabel;
@@ -1118,17 +1009,17 @@ export function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel)
         updateLabel();
         // If useTool... is true, listen for events to keep up the label up to date.
         if (useToolAsToolSettingsLabel) {
-            FrontstageManager.onFrontstageReadyEvent.addListener(updateLabel);
-            FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
-            FrontstageManager.onToolActivatedEvent.addListener(updateLabel);
-            FrontstageManager.onToolSettingsReloadEvent.addListener(updateLabel);
+            UiFramework.frontstages.onFrontstageReadyEvent.addListener(updateLabel);
+            InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
+            UiFramework.frontstages.onToolActivatedEvent.addListener(updateLabel);
+            UiFramework.frontstages.onToolSettingsReloadEvent.addListener(updateLabel);
         }
         return () => {
             if (useToolAsToolSettingsLabel) {
-                FrontstageManager.onFrontstageReadyEvent.removeListener(updateLabel);
-                FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
-                FrontstageManager.onToolActivatedEvent.removeListener(updateLabel);
-                FrontstageManager.onToolSettingsReloadEvent.removeListener(updateLabel);
+                UiFramework.frontstages.onFrontstageReadyEvent.removeListener(updateLabel);
+                InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
+                UiFramework.frontstages.onToolActivatedEvent.removeListener(updateLabel);
+                UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(updateLabel);
             }
         };
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
@@ -1160,6 +1051,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