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

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

@@ -3,27 +3,23 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelZoneWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.FrameworkStateReducer = exports.useUpdateNineZoneSize = exports.useNineZoneState = void 0;
 /** @packageDocumentation
  * @module Frontstage
  */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelSectionWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.FrameworkStateReducer = exports.useUpdateNineZoneSize = exports.useLayoutStore = void 0;
 // cSpell:ignore popout
 require("./Frontstage.scss");
 const immer_1 = require("immer");
 const React = require("react");
+const react_dom_1 = require("react-dom");
 const core_bentley_1 = require("@itwin/core-bentley");
-const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
 const components_react_1 = require("@itwin/components-react");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const Frontstage_1 = require("../frontstage/Frontstage");
-const FrontstageManager_1 = require("../frontstage/FrontstageManager");
 const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
 const UiFramework_1 = require("../UiFramework");
 const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
-const ZoneDef_1 = require("../zones/ZoneDef");
 const Content_1 = require("./Content");
 const FrontstageContent_1 = require("./FrontstageContent");
 const ModalFrontstageComposer_1 = require("./ModalFrontstageComposer");
@@ -36,63 +32,56 @@ const react_redux_1 = require("react-redux");
 const useUiVisibility_1 = require("../hooks/useUiVisibility");
 const core_frontend_1 = require("@itwin/core-frontend");
 const FloatingWidget_1 = require("./FloatingWidget");
-const panelZoneKeys = ["start", "end"];
-const WidgetInternals = React.memo(function WidgetInternals() {
+const InternalFrontstageManager_1 = require("../frontstage/InternalFrontstageManager");
+const WidgetState_1 = require("../widgets/WidgetState");
+const StagePanelSection_1 = require("../stagepanels/StagePanelSection");
+const StagePanelLocation_1 = require("../stagepanels/StagePanelLocation");
+const UiItemsManager_1 = require("../ui-items-provider/UiItemsManager");
+function WidgetPanelsFrontstageComponent() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
     return (React.createElement(React.Fragment, null,
+        React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
         React.createElement(components_react_1.ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
             React.createElement(ModalFrontstageComposer_1.ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
             React.createElement(appui_layout_react_1.WidgetPanels, { className: "uifw-widgetPanels", centerContent: React.createElement(Toolbars_1.WidgetPanelsToolbars, null) },
                 React.createElement(FrontstageContent_1.WidgetPanelsFrontstageContent, null)),
             React.createElement(StatusBar_1.WidgetPanelsStatusBar, null),
             React.createElement(appui_layout_react_1.FloatingWidgets, null))));
-});
-// istanbul ignore next
-const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
-        React.createElement(WidgetInternals, null)));
-});
+}
 const widgetContent = React.createElement(Content_1.WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
 /** @internal */
-function useNineZoneState(frontstageDef) {
-    const lastFrontstageDef = React.useRef(frontstageDef);
-    const [nineZone, setNineZone] = React.useState(frontstageDef.nineZoneState);
+function useLayoutStore() {
+    const [def, setDef] = React.useState(UiFramework_1.UiFramework.frontstages.activeFrontstageDef);
+    const [layout, setLayout] = React.useState(() => (0, appui_layout_react_1.createLayoutStore)(def === null || def === void 0 ? void 0 : def.nineZoneState));
     React.useEffect(() => {
-        setNineZone(frontstageDef.nineZoneState);
-        lastFrontstageDef.current = frontstageDef;
-    }, [frontstageDef]);
+        return UiFramework_1.UiFramework.frontstages.onFrontstageActivatedEvent.addListener((args) => {
+            (0, react_dom_1.unstable_batchedUpdates)(() => {
+                setDef(args.activatedFrontstageDef);
+                setLayout((0, appui_layout_react_1.createLayoutStore)(args.activatedFrontstageDef.nineZoneState));
+            });
+        });
+    }, []);
     React.useEffect(() => {
-        const listener = (args) => {
-            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
+        return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
+            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
                 return;
-            setNineZone(args.state);
-        };
-        return FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(listener);
-    }, [frontstageDef]);
-    return lastFrontstageDef.current === frontstageDef ? nineZone : frontstageDef.nineZoneState;
-}
-exports.useNineZoneState = useNineZoneState;
-/** @returns Defined NineZoneState with fallback to last defined and default NineZoneState.
- * @internal
- */
-function useCachedNineZoneState(nineZone) {
-    const cached = React.useRef(nineZone || defaultNineZone);
-    React.useEffect(() => {
-        if (nineZone)
-            cached.current = nineZone;
-    }, [nineZone]);
-    return nineZone || cached.current;
+            (0, react_dom_1.unstable_batchedUpdates)(() => {
+                layout.setState(args.state || defaultNineZone);
+            });
+        });
+    }, [def, layout]);
+    return [layout, def];
 }
+exports.useLayoutStore = useLayoutStore;
 /** Update in-memory NineZoneState of newly activated frontstage with up to date size.
  * @internal
  */
 function useUpdateNineZoneSize(frontstageDef) {
     React.useEffect(() => {
-        const size = FrontstageManager_1.FrontstageManager.nineZoneSize;
+        const size = InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize;
         let state = frontstageDef.nineZoneState;
         if (!size || !state)
             return;
@@ -132,7 +121,7 @@ exports.FrameworkStateReducer = FrameworkStateReducer;
 function useNineZoneDispatch(frontstageDef) {
     const dispatch = React.useCallback((action) => {
         if (action.type === "RESIZE") {
-            FrontstageManager_1.FrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
+            InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
         }
         // istanbul ignore if
         if (action.type === "TOOL_SETTINGS_DRAG_START") {
@@ -149,17 +138,17 @@ function useNineZoneDispatch(frontstageDef) {
             frontstageDef.popoutWidget(tabId);
             return;
         }
-        const nineZoneState = frontstageDef.nineZoneState;
-        if (!nineZoneState)
+        const state = frontstageDef.nineZoneState;
+        if (!state)
             return;
-        frontstageDef.nineZoneState = FrameworkStateReducer(nineZoneState, action, frontstageDef);
+        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
     }, [frontstageDef]);
     return dispatch;
 }
 exports.useNineZoneDispatch = useNineZoneDispatch;
 /** @internal */
-exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
-    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
+function WidgetPanelsFrontstage() {
+    const [layout, frontstageDef] = useLayoutStore();
     React.useEffect(() => {
         const triggerWidowCloseProcessing = () => {
             frontstageDef && frontstageDef.setIsApplicationClosing(true);
@@ -172,19 +161,18 @@ exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
     }, [frontstageDef]);
     if (!frontstageDef)
         return null;
-    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
-});
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef, layout: layout }));
+}
+exports.WidgetPanelsFrontstage = WidgetPanelsFrontstage;
 const defaultNineZone = (0, appui_layout_react_1.createNineZoneState)();
 const tabElement = React.createElement(Tab_1.WidgetPanelsTab, null);
 const floatingWidgetElement = React.createElement(FloatingWidget_1.FloatingWidget, null);
 /** @internal */
-function ActiveFrontstageDefProvider({ frontstageDef }) {
-    let nineZone = useNineZoneState(frontstageDef);
-    nineZone = useCachedNineZoneState(nineZone);
+function ActiveFrontstageDefProvider({ frontstageDef, layout }) {
     const dispatch = useNineZoneDispatch(frontstageDef);
     useUpdateNineZoneSize(frontstageDef);
     useSavedFrontstageState(frontstageDef);
-    useSaveFrontstageSettings(frontstageDef);
+    useSaveFrontstageSettings(frontstageDef, layout);
     useItemsManager(frontstageDef);
     const labels = useLabels();
     const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
@@ -207,7 +195,7 @@ function ActiveFrontstageDefProvider({ frontstageDef }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = (0, useEscapeSetFocusToHome_1.useEscapeSetFocusToHome)();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
 /** @internal */
@@ -227,7 +215,8 @@ function useLabels() {
 exports.useLabels = useLabels;
 /** @internal */
 function addWidgets(state, widgets, side, widgetId) {
-    const visibleWidgets = widgets.filter((w) => w.isVisible && (w.defaultState !== appui_abstract_1.WidgetState.Floating));
+    var _a;
+    const visibleWidgets = widgets.filter((w) => w.isVisible && (w.defaultState !== WidgetState_1.WidgetState.Floating));
     if (visibleWidgets.length === 0)
         return state;
     const tabs = new Array();
@@ -241,14 +230,14 @@ 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) => (0, StagePanelDef_1.toPanelSide)(location)),
         });
         tabs.push(widget.id);
     }
     const activeWidget = visibleWidgets.find((widget) => widget.isActive);
     const minimized = false;
     // istanbul ignore else
-    if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== appui_abstract_1.WidgetState.Floating) {
+    if ((activeWidget === null || activeWidget === void 0 ? void 0 : activeWidget.defaultState) !== WidgetState_1.WidgetState.Floating) {
         state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
             activeTabId: activeWidget ? activeWidget.id : tabs[0],
             minimized,
@@ -259,10 +248,11 @@ function addWidgets(state, widgets, side, widgetId) {
 exports.addWidgets = addWidgets;
 /** @internal */
 // istanbul ignore next
-function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
-    var _a;
+function appendWidgets(state, widgetDefs, location, section) {
+    var _a, _b;
     if (widgetDefs.length === 0)
         return state;
+    const side = (0, StagePanelDef_1.toPanelSide)(location);
     // Add missing widget tabs.
     for (const widgetDef of widgetDefs) {
         const label = getWidgetLabel(widgetDef.label);
@@ -281,11 +271,11 @@ 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) => (0, StagePanelDef_1.toPanelSide)(l)),
         });
-        if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === appui_abstract_1.WidgetState.Floating) {
-            const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : (0, appui_layout_react_1.getUniqueId)();
-            const widgetContainerId = getWidgetId(side, panelZoneKeys[preferredWidgetIndex]);
+        if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
+            const floatingContainerId = (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : (0, appui_layout_react_1.getUniqueId)();
+            const widgetContainerId = getWidgetId(location, section);
             const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
             if (floatingContainerId in state.widgets) {
@@ -308,6 +298,7 @@ function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             }
         }
         else {
+            const preferredWidgetIndex = section;
             const widgetPanelSectionId = (0, appui_layout_react_1.getWidgetPanelSectionId)(side, preferredWidgetIndex);
             if (widgetPanelSectionId in state.widgets) {
                 state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetPanelSectionId);
@@ -347,26 +338,16 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let state = initialState;
-    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, state), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, state), "left", 0);
-    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelWidgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelZones.end.widgetDefs, state), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs, state), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs, state), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelWidgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.end.widgetDefs, state), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, state), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs, state), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, state), "top", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs, state), "top", 1);
-    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, state), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs, state), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, state), "bottom", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, state), "bottom", 1);
+    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.rightPanel) === null || _c === void 0 ? void 0 : _c.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.rightPanel) === null || _d === void 0 ? void 0 : _d.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.topPanel) === null || _e === void 0 ? void 0 : _e.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.topPanel) === null || _f === void 0 ? void 0 : _f.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.bottomPanel) === null || _g === void 0 ? void 0 : _g.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomPanel) === null || _h === void 0 ? void 0 : _h.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.End);
     return state;
 }
 exports.addMissingWidgets = addMissingWidgets;
@@ -377,7 +358,7 @@ function hideWidgets(state, frontstageDef) {
         const widgetDef = frontstageDef.findWidgetDef(tab.id);
         if (!widgetDef)
             continue;
-        if (widgetDef.defaultState === appui_abstract_1.WidgetState.Hidden) {
+        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
             state = hideWidget(state, widgetDef);
         }
     }
@@ -405,38 +386,35 @@ function getWidgetLabel(label) {
 function toStagePanelLocation(side) {
     switch (side) {
         case "bottom":
-            return appui_abstract_1.StagePanelLocation.Bottom;
+            return StagePanelLocation_1.StagePanelLocation.Bottom;
         case "left":
-            return appui_abstract_1.StagePanelLocation.Left;
+            return StagePanelLocation_1.StagePanelLocation.Left;
         case "right":
-            return appui_abstract_1.StagePanelLocation.Right;
+            return StagePanelLocation_1.StagePanelLocation.Right;
         case "top":
-            return appui_abstract_1.StagePanelLocation.Top;
+            return StagePanelLocation_1.StagePanelLocation.Top;
     }
 }
 /** @internal */
-function getWidgetId(side, key) {
-    switch (side) {
-        case "left": {
-            if (key === "start") {
+function getWidgetId(location, section) {
+    switch (location) {
+        case StagePanelLocation_1.StagePanelLocation.Left: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
                 return "leftStart";
-            }
             return "leftEnd";
         }
-        case "right": {
-            if (key === "start") {
+        case StagePanelLocation_1.StagePanelLocation.Right: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
                 return "rightStart";
-            }
             return "rightEnd";
         }
-        case "top": {
-            if (key === "start") {
+        case StagePanelLocation_1.StagePanelLocation.Top: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
                 return "topStart";
-            }
             return "topEnd";
         }
-        case "bottom": {
-            if (key === "start")
+        case StagePanelLocation_1.StagePanelLocation.Bottom: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
                 return "bottomStart";
             return "bottomEnd";
         }
@@ -444,101 +422,20 @@ function getWidgetId(side, key) {
 }
 exports.getWidgetId = getWidgetId;
 /** @internal */
-function getPanelZoneWidgets(frontstageDef, panelZone) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    switch (panelZone) {
-        case "leftStart": {
-            const outArray = [...((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs) || []];
-            (_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "leftEnd": {
-            const outArray = [...((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs) || []];
-            (_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            (_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "rightStart": {
-            const outArray = [...((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs) || []];
-            (_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "rightEnd": {
-            const outArray = [...((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs) || []];
-            (_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            (_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelWidgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "topStart": {
-            const outArray = [...((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs) || []];
-            (_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "topEnd": {
-            const outArray = [...((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
-            (_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "bottomStart": {
-            const outArray = [...((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs) || []];
-            (_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-        case "bottomEnd": {
-            const outArray = [...((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
-            (_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs.forEach((widgetDef) => {
-                // istanbul ignore else
-                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
-                    outArray.push(widgetDef);
-            });
-            return outArray;
-        }
-    }
+function getPanelSectionWidgets(frontstageDef, location, section) {
+    const stagePanel = frontstageDef.getStagePanelDef(location);
+    const panelSection = stagePanel === null || stagePanel === void 0 ? void 0 : stagePanel.getPanelSectionDef(section);
+    return (panelSection === null || panelSection === void 0 ? void 0 : panelSection.widgetDefs) || [];
 }
-exports.getPanelZoneWidgets = getPanelZoneWidgets;
+exports.getPanelSectionWidgets = getPanelSectionWidgets;
 /** @internal */
-function addPanelWidgets(state, frontstageDef, side) {
-    const start = getWidgetId(side, "start");
-    const startWidgets = getPanelZoneWidgets(frontstageDef, start);
+function addPanelWidgets(state, frontstageDef, location) {
+    const side = (0, StagePanelDef_1.toPanelSide)(location);
+    const start = getWidgetId(location, StagePanelSection_1.StagePanelSection.Start);
+    const startWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.Start);
     state = addWidgets(state, determineNewWidgets(startWidgets, state), side, start);
-    const end = getWidgetId(side, "end");
-    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
+    const end = getWidgetId(location, StagePanelSection_1.StagePanelSection.End);
+    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.End);
     state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
     return state;
 }
@@ -551,9 +448,9 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(state, frontstageDef, panelSide) {
-    state = addPanelWidgets(state, frontstageDef, panelSide);
-    const location = toStagePanelLocation(panelSide);
+function initializePanel(state, frontstageDef, location) {
+    const panelSide = (0, StagePanelDef_1.toPanelSide)(location);
+    state = addPanelWidgets(state, frontstageDef, location);
     const panelDef = frontstageDef.getStagePanelDef(location);
     state = (0, immer_1.default)(state, (draft) => {
         var _a, _b, _c;
@@ -583,19 +480,19 @@ function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
     nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
         // istanbul ignore next
-        if (!FrontstageManager_1.FrontstageManager.nineZoneSize)
+        if (!InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize)
             return;
         stateDraft.size = {
-            height: FrontstageManager_1.FrontstageManager.nineZoneSize.height,
-            width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
+            height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+            width: InternalFrontstageManager_1.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_1.StagePanelLocation.Left);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Right);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Top);
+    nineZone = initializePanel(nineZone, frontstageDef, StagePanelLocation_1.StagePanelLocation.Bottom);
     nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d;
         for (const [, panel] of Object.entries(stateDraft.panels)) {
             const expanded = panel.widgets.find((widgetId) => stateDraft.widgets[widgetId].minimized === false);
             const firstWidget = panel.widgets.length > 0 ? stateDraft.widgets[panel.widgets[0]] : undefined;
@@ -604,24 +501,11 @@ function initializeNineZoneState(frontstageDef) {
                 firstWidget.minimized = false;
             }
         }
-        stateDraft.panels.left.collapsed = isPanelCollapsed([
-            (_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.zoneState,
-            (_b = frontstageDef.bottomLeft) === null || _b === void 0 ? void 0 : _b.zoneState,
-        ], [(_c = frontstageDef.leftPanel) === null || _c === void 0 ? void 0 : _c.panelState]);
-        stateDraft.panels.right.collapsed = isPanelCollapsed([
-            (_d = frontstageDef.centerRight) === null || _d === void 0 ? void 0 : _d.zoneState,
-            (_e = frontstageDef.bottomRight) === null || _e === void 0 ? void 0 : _e.zoneState,
-        ], [(_f = frontstageDef.rightPanel) === null || _f === void 0 ? void 0 : _f.panelState]);
-        stateDraft.panels.top.collapsed = isPanelCollapsed([], [
-            // istanbul ignore next - ignore topMostPanel if topPanel is defined
-            frontstageDef.topPanel ? (_g = frontstageDef.topPanel) === null || _g === void 0 ? void 0 : _g.panelState : (_h = frontstageDef.topMostPanel) === null || _h === void 0 ? void 0 : _h.panelState, // eslint-disable-line deprecation/deprecation
-        ]);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed([], [
-            // istanbul ignore next - ignore bottomMostPanel if bottomPanel is defined
-            frontstageDef.bottomPanel ? (_j = frontstageDef.bottomPanel) === null || _j === void 0 ? void 0 : _j.panelState : (_k = frontstageDef.bottomMostPanel) === null || _k === void 0 ? void 0 : _k.panelState, // eslint-disable-line deprecation/deprecation
-        ]);
-        const topCenterDef = frontstageDef.topCenter;
-        const toolSettingsWidgetDef = topCenterDef === null || topCenterDef === void 0 ? void 0 : topCenterDef.getSingleWidgetDef();
+        stateDraft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
+        stateDraft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
+        stateDraft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
+        stateDraft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
+        const toolSettingsWidgetDef = frontstageDef.toolSettings;
         if (toolSettingsWidgetDef) {
             const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
             toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
@@ -656,6 +540,7 @@ function restoreNineZoneState(frontstageDef, saved) {
             continue;
         }
         restored = (0, immer_1.default)(restored, (draft) => {
+            var _a;
             draft.tabs[tab.id] = {
                 ...tab,
                 label: getWidgetLabel(widgetDef.label),
@@ -663,7 +548,7 @@ 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) => (0, StagePanelDef_1.toPanelSide)(location)),
             };
         });
     }
@@ -695,12 +580,12 @@ function restoreNineZoneState(frontstageDef, saved) {
         }
         return;
     });
-    if (FrontstageManager_1.FrontstageManager.nineZoneSize && (0 !== FrontstageManager_1.FrontstageManager.nineZoneSize.height || 0 !== FrontstageManager_1.FrontstageManager.nineZoneSize.width)) {
+    if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize && (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height || 0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
         restored = FrameworkStateReducer(restored, {
             type: "RESIZE",
             size: {
-                height: FrontstageManager_1.FrontstageManager.nineZoneSize.height,
-                width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
+                height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+                width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
             },
         }, frontstageDef);
     }
@@ -782,10 +667,8 @@ function restoreSavedWidgets(frontstage) {
     }
 }
 /** @internal */
-function isPanelCollapsed(zoneStates, panelStates) {
-    const openZone = zoneStates.find((zoneState) => zoneState === ZoneDef_1.ZoneState.Open);
-    const openPanel = panelStates.find((panelState) => panelState === StagePanelDef_1.StagePanelState.Open);
-    return !openZone && !openPanel;
+function isPanelCollapsed(panelState) {
+    return panelState !== StagePanelDef_1.StagePanelState.Open;
 }
 exports.isPanelCollapsed = isPanelCollapsed;
 function addHiddenWidget(state, widgetDef) {
@@ -822,10 +705,10 @@ function addHiddenWidget(state, widgetDef) {
 /** @internal */
 function setWidgetState(state, widgetDef, widgetState) {
     var _a, _b;
-    if (widgetState === appui_abstract_1.WidgetState.Hidden) {
+    if (widgetState === WidgetState_1.WidgetState.Hidden) {
         return hideWidget(state, widgetDef);
     }
-    else if (widgetState === appui_abstract_1.WidgetState.Open) {
+    else if (widgetState === WidgetState_1.WidgetState.Open) {
         const id = widgetDef.id;
         let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
@@ -853,7 +736,7 @@ function setWidgetState(state, widgetDef, widgetState) {
             }
         });
     }
-    else if (widgetState === appui_abstract_1.WidgetState.Closed) {
+    else if (widgetState === WidgetState_1.WidgetState.Closed) {
         const id = widgetDef.id;
         let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
@@ -871,7 +754,7 @@ function setWidgetState(state, widgetDef, widgetState) {
             }
         });
     }
-    else if (widgetState === appui_abstract_1.WidgetState.Floating) {
+    else if (widgetState === WidgetState_1.WidgetState.Floating) {
         const id = widgetDef.id;
         let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
@@ -1006,16 +889,15 @@ function useSavedFrontstageState(frontstageDef) {
             }
             frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
-        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        void fetchFrontstageState();
     }, [frontstageDef]);
 }
 exports.useSavedFrontstageState = useSavedFrontstageState;
 /** @internal */
-function useSaveFrontstageSettings(frontstageDef) {
-    const nineZone = useNineZoneState(frontstageDef);
+function useSaveFrontstageSettings(frontstageDef, store) {
     const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
     const saveSetting = React.useMemo(() => {
-        return debounce(async (frontstage, state) => {
+        const debounced = debounce(async (frontstage, state) => {
             const id = frontstage.id;
             const widgets = packSavedWidgets(frontstage);
             frontstage.savedWidgetDefs = widgets;
@@ -1028,6 +910,13 @@ function useSaveFrontstageSettings(frontstageDef) {
             };
             await uiSettingsStorage.saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
         }, 1000);
+        const save = (frontstage, state) => {
+            if (state.draggedTab)
+                return;
+            debounced(frontstage, state);
+        };
+        save.cancel = debounced.cancel;
+        return save;
     }, [uiSettingsStorage]);
     React.useEffect(() => {
         return () => {
@@ -1035,10 +924,13 @@ function useSaveFrontstageSettings(frontstageDef) {
         };
     }, [saveSetting]);
     React.useEffect(() => {
-        if (!nineZone || nineZone.draggedTab)
-            return;
-        saveSetting(frontstageDef, nineZone);
-    }, [frontstageDef, nineZone, saveSetting]);
+        saveSetting(frontstageDef, store.getState());
+    }, [saveSetting, frontstageDef, store]);
+    React.useEffect(() => {
+        return store.subscribe(() => {
+            saveSetting(frontstageDef, store.getState());
+        });
+    }, [saveSetting, frontstageDef, store]);
 }
 exports.useSaveFrontstageSettings = useSaveFrontstageSettings;
 /** @internal */
@@ -1078,9 +970,9 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
         });
-        FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.addListener(listener);
+        UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
         return () => {
-            FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.removeListener(listener);
+            UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     React.useEffect(() => {
@@ -1088,9 +980,9 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             frontstageDef.nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
         });
-        FrontstageManager_1.FrontstageManager.onWidgetShowEvent.addListener(listener);
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.addListener(listener);
         return () => {
-            FrontstageManager_1.FrontstageManager.onWidgetShowEvent.removeListener(listener);
+            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     React.useEffect(() => {
@@ -1100,16 +992,16 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             nineZoneState = expandWidget(nineZoneState, widgetDef.id);
             frontstageDef.nineZoneState = nineZoneState;
         });
-        FrontstageManager_1.FrontstageManager.onWidgetExpandEvent.addListener(listener);
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.addListener(listener);
         return () => {
-            FrontstageManager_1.FrontstageManager.onWidgetExpandEvent.removeListener(listener);
+            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     const uiSettingsStorage = (0, useUiStateStorage_1.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(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id)); // eslint-disable-line @typescript-eslint/no-floating-promises
+            void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
             if (frontstageDef.id === args.frontstageDef.id) {
                 args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
             }
@@ -1117,9 +1009,9 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
                 args.frontstageDef.nineZoneState = undefined;
             }
         };
-        FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
+        InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
         return () => {
-            FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
+            InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
         };
     }, [uiSettingsStorage, frontstageDef]);
     React.useEffect(() => {
@@ -1128,16 +1020,16 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             const label = widgetDef.label;
             frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
         });
-        FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
         return () => {
-            FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
+            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
         };
     }, [frontstageDef]);
     const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
     React.useEffect(() => {
         const updateLabel = createListener(frontstageDef, () => {
             var _a;
-            const toolId = FrontstageManager_1.FrontstageManager.activeToolId;
+            const toolId = UiFramework_1.UiFramework.frontstages.activeToolId;
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             const label = useToolAsToolSettingsLabel ?
                 ((_a = core_frontend_1.IModelApp.tools.find(toolId)) === null || _a === void 0 ? void 0 : _a.flyover) || defaultLabel : defaultLabel;
@@ -1147,17 +1039,17 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
         updateLabel();
         // If useTool... is true, listen for events to keep up the label up to date.
         if (useToolAsToolSettingsLabel) {
-            FrontstageManager_1.FrontstageManager.onFrontstageReadyEvent.addListener(updateLabel);
-            FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
-            FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(updateLabel);
-            FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.addListener(updateLabel);
+            UiFramework_1.UiFramework.frontstages.onFrontstageReadyEvent.addListener(updateLabel);
+            InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(updateLabel);
+            UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(updateLabel);
+            UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.addListener(updateLabel);
         }
         return () => {
             if (useToolAsToolSettingsLabel) {
-                FrontstageManager_1.FrontstageManager.onFrontstageReadyEvent.removeListener(updateLabel);
-                FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
-                FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(updateLabel);
-                FrontstageManager_1.FrontstageManager.onToolSettingsReloadEvent.removeListener(updateLabel);
+                UiFramework_1.UiFramework.frontstages.onFrontstageReadyEvent.removeListener(updateLabel);
+                InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(updateLabel);
+                UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.removeListener(updateLabel);
+                UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(updateLabel);
             }
         };
     }, [frontstageDef, useToolAsToolSettingsLabel, defaultLabel]);
@@ -1179,7 +1071,7 @@ function useItemsManager(frontstageDef) {
         def.nineZoneState = state;
     };
     React.useEffect(() => {
-        const remove = appui_abstract_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
+        const remove = UiItemsManager_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
             refreshNineZoneState(frontstageDef);
         });
         // Need to refresh anytime frontstageDef changes because uiItemsProvider may have added something to
@@ -1191,6 +1083,10 @@ function useItemsManager(frontstageDef) {
 exports.useItemsManager = useItemsManager;
 // istanbul ignore next
 function determineNewWidgets(defs, state) {
-    return (defs || []).filter((def) => !(def.id in state.tabs));
+    defs = defs || [];
+    const uniqueDefs = defs.filter((def, index, array) => {
+        return index === array.findIndex((def1) => def.id === def1.id);
+    });
+    return uniqueDefs.filter((def) => !(def.id in state.tabs));
 }
 //# sourceMappingURL=Frontstage.js.map