@itwin/appui-react 3.0.0-dev.100

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

@@ -0,0 +1,1039 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveFrontstagePopoutWidgetSizeAndPosition = exports.useSyncDefinitions = 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.useUpdateNineZoneSize = exports.useNineZoneState = void 0;
+/** @packageDocumentation
+ * @module Frontstage
+ */
+// cSpell:ignore popout
+require("./Frontstage.scss");
+const immer_1 = require("immer");
+const React = require("react");
+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 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 useUiSettings_1 = require("../uisettings/useUiSettings");
+const ZoneDef_1 = require("../zones/ZoneDef");
+const Content_1 = require("./Content");
+const FrontstageContent_1 = require("./FrontstageContent");
+const ModalFrontstageComposer_1 = require("./ModalFrontstageComposer");
+const StatusBar_1 = require("./StatusBar");
+const Tab_1 = require("./Tab");
+const Toolbars_1 = require("./Toolbars");
+const ToolSettings_1 = require("./ToolSettings");
+const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
+const panelZoneKeys = ["start", "middle", "end"];
+// istanbul ignore next
+const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
+    const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ModalFrontstageComposer_1.ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
+        React.createElement(ToolSettings_1.WidgetPanelsToolSettings, null),
+        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)));
+});
+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);
+    React.useEffect(() => {
+        setNineZone(frontstageDef.nineZoneState);
+        lastFrontstageDef.current = frontstageDef;
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        const listener = (args) => {
+            if (args.frontstageDef !== frontstageDef || frontstageDef.isStageClosing || frontstageDef.isApplicationClosing)
+                return;
+            setNineZone(args.state);
+        };
+        FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onFrontstageNineZoneStateChangedEvent.removeListener(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;
+}
+/** 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;
+        let state = frontstageDef.nineZoneState;
+        if (!size || !state)
+            return;
+        state = FrameworkStateReducer(state, {
+            type: "RESIZE",
+            size: {
+                height: size.height,
+                width: size.width,
+            },
+        }, frontstageDef);
+        frontstageDef.nineZoneState = state;
+    }, [frontstageDef]);
+}
+exports.useUpdateNineZoneSize = useUpdateNineZoneSize;
+function FrameworkStateReducer(state, action, frontstageDef) {
+    state = (0, appui_layout_react_1.NineZoneStateReducer)(state, action);
+    if (action.type === "RESIZE") {
+        state = (0, immer_1.default)(state, (draft) => {
+            for (const panelSide of appui_layout_react_1.panelSides) {
+                const panel = draft.panels[panelSide];
+                const location = toStagePanelLocation(panelSide);
+                const panelDef = frontstageDef.getStagePanelDef(location);
+                if (panelDef === null || panelDef === void 0 ? void 0 : panelDef.maxSizeSpec) {
+                    panel.maxSize = getPanelMaxSize(panelDef.maxSizeSpec, panelSide, action.size);
+                    if (panel.size) {
+                        panel.size = Math.min(Math.max(panel.size, panel.minSize), panel.maxSize);
+                    }
+                }
+            }
+        });
+    }
+    return state;
+}
+/** @internal */
+function useNineZoneDispatch(frontstageDef) {
+    const dispatch = React.useCallback((action) => {
+        if (action.type === "RESIZE") {
+            FrontstageManager_1.FrontstageManager.nineZoneSize = core_react_1.Size.create(action.size);
+        }
+        // istanbul ignore if
+        if (action.type === "TOOL_SETTINGS_DRAG_START") {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            UiFramework_1.UiFramework.postTelemetry("Tool Settings Undocking", "28B04E07-AE73-4533-A0BA-8E2A8DC99ADF");
+        }
+        // istanbul ignore if
+        if (action.type === "TOOL_SETTINGS_DOCK") {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            UiFramework_1.UiFramework.postTelemetry("Tool Settings Docking to Settings Bar", "BEDE684B-B3DB-4637-B3AF-DC3CBA223F94");
+        }
+        if (action.type === "WIDGET_TAB_POPOUT") {
+            const tabId = action.id;
+            frontstageDef.popoutWidget(tabId);
+            return;
+        }
+        if (action.type === "FLOATING_WIDGET_SET_BOUNDS") {
+            frontstageDef.setFloatingWidgetBoundsInternal(action.id, action.bounds, true);
+            return;
+        }
+        const nineZoneState = frontstageDef.nineZoneState;
+        if (!nineZoneState)
+            return;
+        frontstageDef.nineZoneState = FrameworkStateReducer(nineZoneState, action, frontstageDef);
+    }, [frontstageDef]);
+    return dispatch;
+}
+exports.useNineZoneDispatch = useNineZoneDispatch;
+/** @internal */
+exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
+    const frontstageDef = (0, Frontstage_1.useActiveFrontstageDef)();
+    React.useEffect(() => {
+        const triggerWidowCloseProcessing = () => {
+            frontstageDef && frontstageDef.setIsApplicationClosing(true);
+        };
+        frontstageDef && frontstageDef.setIsApplicationClosing(false);
+        window.addEventListener("beforeunload", triggerWidowCloseProcessing);
+        return () => {
+            window.removeEventListener("beforeunload", triggerWidowCloseProcessing);
+        };
+    }, [frontstageDef]);
+    if (!frontstageDef)
+        return null;
+    return (React.createElement(ActiveFrontstageDefProvider, { frontstageDef: frontstageDef }));
+});
+const defaultNineZone = (0, appui_layout_react_1.createNineZoneState)();
+const tabElement = React.createElement(Tab_1.WidgetPanelsTab, null);
+/** @internal */
+function ActiveFrontstageDefProvider({ frontstageDef }) {
+    let nineZone = useNineZoneState(frontstageDef);
+    nineZone = useCachedNineZoneState(nineZone);
+    const dispatch = useNineZoneDispatch(frontstageDef);
+    useUpdateNineZoneSize(frontstageDef);
+    useSavedFrontstageState(frontstageDef);
+    useSaveFrontstageSettings(frontstageDef);
+    useFrontstageManager(frontstageDef);
+    useItemsManager(frontstageDef);
+    useSyncDefinitions(frontstageDef);
+    const labels = useLabels();
+    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, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent }, widgetPanelsFrontstage)));
+}
+exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
+/** @internal */
+function useLabels() {
+    return React.useMemo(() => ({
+        dockToolSettingsTitle: UiFramework_1.UiFramework.translate("widget.tooltips.dockToolSettings"),
+        moreWidgetsTitle: UiFramework_1.UiFramework.translate("widget.tooltips.moreWidgets"),
+        moreToolSettingsTitle: UiFramework_1.UiFramework.translate("widget.tooltips.moreToolSettings"),
+        pinPanelTitle: UiFramework_1.UiFramework.translate("widget.tooltips.pinPanel"),
+        resizeGripTitle: UiFramework_1.UiFramework.translate("widget.tooltips.resizeGrip"),
+        sendWidgetHomeTitle: UiFramework_1.UiFramework.translate("widget.tooltips.sendHome"),
+        toolSettingsHandleTitle: UiFramework_1.UiFramework.translate("widget.tooltips.toolSettingsHandle"),
+        unpinPanelTitle: UiFramework_1.UiFramework.translate("widget.tooltips.unpinPanel"),
+        popoutActiveTab: UiFramework_1.UiFramework.translate("widget.tooltips.popoutActiveTab"),
+    }), []);
+}
+exports.useLabels = useLabels;
+/** @internal */
+function addWidgets(state, widgets, side, widgetId) {
+    if (widgets.length === 0)
+        return state;
+    const tabs = new Array();
+    for (const widget of widgets) {
+        const label = getWidgetLabel(widget.label);
+        state = (0, appui_layout_react_1.addTab)(state, widget.id, {
+            label,
+            preferredPanelWidgetSize: widget.preferredPanelSize,
+            canPopout: widget.canPopout,
+            isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+        });
+        tabs.push(widget.id);
+    }
+    const activeWidget = widgets.find((widget) => widget.isActive);
+    const minimized = !activeWidget;
+    state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetId, tabs, {
+        activeTabId: activeWidget ? activeWidget.id : tabs[0],
+        minimized,
+    });
+    return state;
+}
+exports.addWidgets = addWidgets;
+/** @internal */
+// istanbul ignore next
+function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
+    var _a;
+    if (widgetDefs.length === 0)
+        return state;
+    // Add new tabs.
+    const tabs = new Array();
+    for (const widgetDef of widgetDefs) {
+        const label = getWidgetLabel(widgetDef.label);
+        const saveTab = state.tabs[widgetDef.id];
+        const preferredPanelWidgetSize = saveTab ? saveTab.preferredPanelWidgetSize : widgetDef.preferredPanelSize;
+        const preferredFloatingWidgetSize = saveTab ? saveTab.preferredFloatingWidgetSize : undefined;
+        const preferredPopoutWidgetSize = saveTab ? saveTab.preferredPopoutWidgetSize : undefined;
+        const userSized = saveTab ? saveTab.userSized : undefined;
+        state = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
+            label,
+            canPopout: widgetDef.canPopout,
+            preferredPanelWidgetSize,
+            preferredFloatingWidgetSize,
+            preferredPopoutWidgetSize,
+            userSized,
+            isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+        });
+        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]);
+            const homePanelInfo = { side, widgetId: widgetContainerId, widgetIndex: 0 };
+            const preferredPosition = widgetDef.defaultFloatingPosition;
+            state = (0, appui_layout_react_1.addWidgetTabToFloatingPanel)(state, floatingContainerId, widgetDef.id, homePanelInfo, preferredFloatingWidgetSize, preferredPosition, userSized, widgetDef.isFloatingStateWindowResizable);
+        }
+        else {
+            tabs.push(widgetDef.id);
+        }
+    }
+    if (tabs.length) {
+        const panel = state.panels[side];
+        preferredWidgetIndex = preferredWidgetIndex >= panel.maxWidgetCount ? panel.maxWidgetCount - 1 : preferredWidgetIndex;
+        if (preferredWidgetIndex < panel.widgets.length) {
+            // Append tabs to existing widget.
+            const widgetId = panel.widgets[preferredWidgetIndex];
+            state = (0, immer_1.default)(state, (draft) => {
+                const widget = draft.widgets[widgetId];
+                for (const tab of tabs) {
+                    widget.tabs.push(tab);
+                }
+            });
+        }
+        else {
+            const newWidgetId = getNextAvailablePanelWidgetId(panel);
+            const widget = (0, appui_layout_react_1.createWidgetState)(newWidgetId, tabs);
+            state = (0, immer_1.default)(state, (draft) => {
+                draft.panels[side].widgets.push(widget.id);
+                draft.widgets[widget.id] = (0, immer_1.castDraft)(widget);
+            });
+        }
+    }
+    return state;
+}
+exports.appendWidgets = appendWidgets;
+function processPopoutWidgets(initialState, frontstageDef) {
+    // istanbul ignore next
+    if (!initialState.popoutWidgets)
+        return initialState;
+    // istanbul ignore next - not unit testing electron case that reopens popout windows
+    if (initialState.popoutWidgets && core_bentley_1.ProcessDetector.isElectronAppFrontend) {
+        if (initialState.popoutWidgets.allIds.length && core_bentley_1.ProcessDetector.isElectronAppFrontend) {
+            for (const widgetContainerId of initialState.popoutWidgets.allIds) {
+                frontstageDef.openPopoutWidgetContainer(initialState, widgetContainerId);
+            }
+        }
+        return initialState;
+    }
+    return (0, appui_layout_react_1.convertAllPopupWidgetContainersToFloating)(initialState);
+}
+/** Adds frontstageDef widgets that are missing in NineZoneState.
+ * @internal
+ */
+function addMissingWidgets(frontstageDef, initialState) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    let state = initialState;
+    state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, initialState), "left", 0);
+    state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, initialState), "left", 0);
+    state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, initialState), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.middle.widgetDefs, initialState), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs, initialState), "left", 2);
+    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.leftPanel) === null || _f === void 0 ? void 0 : _f.panelZones.end.widgetDefs, initialState), "left", 2);
+    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.centerRight) === null || _g === void 0 ? void 0 : _g.widgetDefs, initialState), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.rightPanel) === null || _h === void 0 ? void 0 : _h.panelZones.start.widgetDefs, initialState), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.bottomRight) === null || _j === void 0 ? void 0 : _j.widgetDefs, initialState), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.middle.widgetDefs, initialState), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.rightPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, initialState), "right", 2);
+    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.rightPanel) === null || _m === void 0 ? void 0 : _m.panelZones.end.widgetDefs, initialState), "right", 2);
+    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, initialState), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.start.widgetDefs, initialState), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.topMostPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, initialState), "top", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.topPanel) === null || _r === void 0 ? void 0 : _r.panelZones.end.widgetDefs, initialState), "top", 1);
+    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, initialState), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.start.widgetDefs, initialState), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_u = frontstageDef.bottomMostPanel) === null || _u === void 0 ? void 0 : _u.panelWidgetDefs, initialState), "bottom", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_v = frontstageDef.bottomPanel) === null || _v === void 0 ? void 0 : _v.panelZones.end.widgetDefs, initialState), "bottom", 1);
+    return state;
+}
+exports.addMissingWidgets = addMissingWidgets;
+/** Removes NineZoneState widgets that are missing in frontstageDef.
+ * @internal
+ */
+function removeMissingWidgets(frontstageDef, initialState) {
+    const state = (0, immer_1.default)(initialState, (draft) => {
+        for (const [, tab] of Object.entries(draft.tabs)) {
+            if (tab.id === appui_layout_react_1.toolSettingsTabId)
+                continue;
+            const widgetDef = frontstageDef.findWidgetDef(tab.id);
+            if (widgetDef)
+                continue;
+            (0, appui_layout_react_1.removeTab)(draft, tab.id);
+        }
+    });
+    return state;
+}
+exports.removeMissingWidgets = removeMissingWidgets;
+function getWidgetLabel(label) {
+    return label === "" ? "Widget" : label;
+}
+function toStagePanelLocation(side) {
+    switch (side) {
+        case "bottom":
+            return appui_abstract_1.StagePanelLocation.Bottom;
+        case "left":
+            return appui_abstract_1.StagePanelLocation.Left;
+        case "right":
+            return appui_abstract_1.StagePanelLocation.Right;
+        case "top":
+            return appui_abstract_1.StagePanelLocation.Top;
+    }
+}
+/** @internal */
+function getWidgetId(side, key) {
+    switch (side) {
+        case "left": {
+            if (key === "start") {
+                return "leftStart";
+            }
+            else if (key === "middle") {
+                return "leftMiddle";
+            }
+            return "leftEnd";
+        }
+        case "right": {
+            if (key === "start") {
+                return "rightStart";
+            }
+            else if (key === "middle") {
+                return "rightMiddle";
+            }
+            return "rightEnd";
+        }
+        case "top": {
+            if (key === "start") {
+                return "topStart";
+            }
+            return "topEnd";
+        }
+        case "bottom": {
+            if (key === "start")
+                return "bottomStart";
+            return "bottomEnd";
+        }
+    }
+}
+exports.getWidgetId = getWidgetId;
+/** @internal */
+function getNextAvailablePanelWidgetId(panel) {
+    const index = panel.widgets.length;
+    return getWidgetId(panel.side, panelZoneKeys[index]);
+}
+function isVerticalPanelSide(side) { return !(0, appui_layout_react_1.isHorizontalPanelSide)(side); }
+/** @internal */
+function getPanelZoneWidgets(frontstageDef, panelZone) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    switch (panelZone) {
+        case "leftStart": {
+            return [
+                ...((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs) || [],
+                ...((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs) || [],
+            ];
+        }
+        case "leftMiddle": {
+            return [
+                ...((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs) || [],
+                ...((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.middle.widgetDefs) || [],
+            ];
+        }
+        case "leftEnd": {
+            return [
+                ...((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs) || [],
+                ...((_f = frontstageDef.leftPanel) === null || _f === void 0 ? void 0 : _f.panelZones.end.widgetDefs) || [],
+            ];
+        }
+        case "rightStart": {
+            return [
+                ...((_g = frontstageDef.centerRight) === null || _g === void 0 ? void 0 : _g.widgetDefs) || [],
+                ...((_h = frontstageDef.rightPanel) === null || _h === void 0 ? void 0 : _h.panelZones.start.widgetDefs) || [],
+            ];
+        }
+        case "rightMiddle": {
+            return [
+                ...((_j = frontstageDef.bottomRight) === null || _j === void 0 ? void 0 : _j.widgetDefs) || [],
+                ...((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.middle.widgetDefs) || [],
+            ];
+        }
+        case "rightEnd": {
+            return [
+                ...((_l = frontstageDef.rightPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs) || [],
+                ...((_m = frontstageDef.rightPanel) === null || _m === void 0 ? void 0 : _m.panelZones.end.widgetDefs) || [],
+            ];
+        }
+        case "topStart": {
+            return [
+                ...((_o = frontstageDef.topPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs) || [],
+                ...((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.start.widgetDefs) || [],
+            ];
+        }
+        case "topEnd": {
+            return [
+                ...((_q = frontstageDef.topMostPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs) || [],
+                ...((_r = frontstageDef.topPanel) === null || _r === void 0 ? void 0 : _r.panelZones.end.widgetDefs) || [],
+            ];
+        }
+        case "bottomStart": {
+            return [
+                ...((_s = frontstageDef.bottomPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs) || [],
+                ...((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.start.widgetDefs) || [],
+            ];
+        }
+        case "bottomEnd": {
+            return [
+                ...((_u = frontstageDef.bottomMostPanel) === null || _u === void 0 ? void 0 : _u.panelWidgetDefs) || [],
+                ...((_v = frontstageDef.bottomPanel) === null || _v === void 0 ? void 0 : _v.panelZones.end.widgetDefs) || [],
+            ];
+        }
+    }
+}
+exports.getPanelZoneWidgets = getPanelZoneWidgets;
+/** @internal */
+function addPanelWidgets(state, frontstageDef, side) {
+    const start = getWidgetId(side, "start");
+    const startWidgets = getPanelZoneWidgets(frontstageDef, start);
+    state = addWidgets(state, startWidgets, side, start);
+    if (isVerticalPanelSide(side)) {
+        const middle = getWidgetId(side, "middle");
+        const middleWidgets = getPanelZoneWidgets(frontstageDef, middle);
+        state = addWidgets(state, middleWidgets, side, middle);
+    }
+    const end = getWidgetId(side, "end");
+    const endWidgets = getPanelZoneWidgets(frontstageDef, end);
+    state = addWidgets(state, endWidgets, side, end);
+    return state;
+}
+exports.addPanelWidgets = addPanelWidgets;
+/** @internal */
+function isFrontstageStateSettingResult(settingsResult) {
+    if (settingsResult.status === core_react_1.UiSettingsStatus.Success)
+        return true;
+    return false;
+}
+exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
+/** @internal */
+function initializePanel(nineZone, frontstageDef, panelSide) {
+    nineZone = addPanelWidgets(nineZone, frontstageDef, panelSide);
+    const location = toStagePanelLocation(panelSide);
+    const panelDef = frontstageDef.getStagePanelDef(location);
+    nineZone = (0, immer_1.default)(nineZone, (draft) => {
+        var _a, _b, _c;
+        const panel = draft.panels[panelSide];
+        panel.size = panelDef === null || panelDef === void 0 ? void 0 : panelDef.size;
+        panel.minSize = (_a = panelDef === null || panelDef === void 0 ? void 0 : panelDef.minSize) !== null && _a !== void 0 ? _a : panel.minSize;
+        panel.pinned = (_b = panelDef === null || panelDef === void 0 ? void 0 : panelDef.pinned) !== null && _b !== void 0 ? _b : panel.pinned;
+        panel.resizable = (_c = panelDef === null || panelDef === void 0 ? void 0 : panelDef.resizable) !== null && _c !== void 0 ? _c : panel.resizable;
+        if (panelDef === null || panelDef === void 0 ? void 0 : panelDef.maxSizeSpec) {
+            panel.maxSize = getPanelMaxSize(panelDef.maxSizeSpec, panelSide, nineZone.size);
+        }
+    });
+    return nineZone;
+}
+exports.initializePanel = initializePanel;
+function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
+    if (typeof maxSizeSpec === "number") {
+        return maxSizeSpec;
+    }
+    const size = (0, appui_layout_react_1.isHorizontalPanelSide)(panel) ? nineZoneSize.height : nineZoneSize.width;
+    return maxSizeSpec.percentage / 100 * size;
+}
+const stateVersion = 11; // this needs to be bumped when NineZoneState is changed (to recreate layout).
+/** @internal */
+function initializeNineZoneState(frontstageDef) {
+    let nineZone = defaultNineZone;
+    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
+        if (!FrontstageManager_1.FrontstageManager.nineZoneSize)
+            return;
+        stateDraft.size = {
+            height: FrontstageManager_1.FrontstageManager.nineZoneSize.height,
+            width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
+        };
+    });
+    nineZone = initializePanel(nineZone, frontstageDef, "left");
+    nineZone = initializePanel(nineZone, frontstageDef, "right");
+    nineZone = initializePanel(nineZone, frontstageDef, "top");
+    nineZone = initializePanel(nineZone, frontstageDef, "bottom");
+    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        for (const [, panel] of Object.entries(stateDraft.panels)) {
+            const expanded = panel.widgets.find((widgetId) => stateDraft.widgets[widgetId].minimized === false);
+            const firstWidget = panel.widgets.length > 0 ? stateDraft.widgets[panel.widgets[0]] : undefined;
+            if (!expanded && firstWidget) {
+                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();
+        if (toolSettingsWidgetDef) {
+            const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
+            toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
+        }
+    });
+    return nineZone;
+}
+exports.initializeNineZoneState = initializeNineZoneState;
+/** Converts from saved NineZoneState to NineZoneState.
+ * @note Restores toolSettings tab.
+ * @note Restores tab labels.
+ * @internal
+ */
+function restoreNineZoneState(frontstageDef, saved) {
+    let restored = {
+        ...saved,
+        tabs: (0, appui_layout_react_1.createTabsState)(),
+    };
+    restored = (0, immer_1.default)(restored, (draft) => {
+        var _a;
+        for (const [, tab] of Object.entries(saved.tabs)) {
+            const widgetDef = frontstageDef.findWidgetDef(tab.id);
+            if (!widgetDef) {
+                core_bentley_1.Logger.logInfo(UiFramework_1.UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
+                    frontstageId: frontstageDef.id,
+                    tabId: tab.id,
+                }));
+                (0, appui_layout_react_1.removeTab)(draft, tab.id);
+                // let fall through so we preserve preferred sizes of widgets load via UiItemsProvider
+            }
+            draft.tabs[tab.id] = {
+                ...tab,
+                label: getWidgetLabel((_a = widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.label) !== null && _a !== void 0 ? _a : "undefined"),
+                canPopout: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.canPopout,
+                isFloatingStateWindowResizable: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.isFloatingStateWindowResizable,
+            };
+        }
+        return;
+    });
+    if (FrontstageManager_1.FrontstageManager.nineZoneSize && (0 !== FrontstageManager_1.FrontstageManager.nineZoneSize.height || 0 !== FrontstageManager_1.FrontstageManager.nineZoneSize.width)) {
+        restored = FrameworkStateReducer(restored, {
+            type: "RESIZE",
+            size: {
+                height: FrontstageManager_1.FrontstageManager.nineZoneSize.height,
+                width: FrontstageManager_1.FrontstageManager.nineZoneSize.width,
+            },
+        }, frontstageDef);
+    }
+    return restored;
+}
+exports.restoreNineZoneState = restoreNineZoneState;
+/** Prepares NineZoneState to be saved.
+ * @note Removes toolSettings tab.
+ * @note Removes tab labels.
+ * @internal
+ */
+function packNineZoneState(state) {
+    let packed = {
+        ...state,
+        tabs: {},
+    };
+    packed = (0, immer_1.default)(packed, (draft) => {
+        for (const [, tab] of Object.entries(state.tabs)) {
+            if (tab.id === appui_layout_react_1.toolSettingsTabId)
+                continue;
+            draft.tabs[tab.id] = {
+                id: tab.id,
+                preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
+                preferredPopoutWidgetSize: tab.preferredPopoutWidgetSize,
+                allowedPanelTargets: tab.allowedPanelTargets,
+                userSized: tab.userSized,
+            };
+        }
+    });
+    return packed;
+}
+exports.packNineZoneState = packNineZoneState;
+/** @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;
+}
+exports.isPanelCollapsed = isPanelCollapsed;
+function addRemovedTab(nineZone, widgetDef) {
+    const newTab = (0, appui_layout_react_1.createTabState)(widgetDef.id, {
+        label: getWidgetLabel(widgetDef.label),
+        canPopout: widgetDef.canPopout,
+        preferredPanelWidgetSize: widgetDef.preferredPanelSize,
+        isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+    });
+    nineZone.tabs[newTab.id] = newTab;
+    if (widgetDef.tabLocation.widgetId in nineZone.widgets) {
+        // Add to existing widget (by widget id).
+        const widgetId = widgetDef.tabLocation.widgetId;
+        const newTabWidget = nineZone.widgets[widgetId];
+        newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
+    }
+    else {
+        const newTabPanel = nineZone.panels[widgetDef.tabLocation.side];
+        if (newTabPanel.maxWidgetCount === newTabPanel.widgets.length) {
+            // Add to existing panel widget.
+            const widgetIndex = Math.min(newTabPanel.maxWidgetCount - 1, widgetDef.tabLocation.widgetIndex);
+            const newTabWidgetId = newTabPanel.widgets[widgetIndex];
+            const newTabWidget = nineZone.widgets[newTabWidgetId];
+            newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
+        }
+        else {
+            // Create a new panel widget.
+            const newWidget = (0, appui_layout_react_1.createWidgetState)((0, appui_layout_react_1.getUniqueId)(), [newTab.id]);
+            nineZone.widgets[newWidget.id] = (0, immer_1.castDraft)(newWidget);
+            newTabPanel.widgets.splice(widgetDef.tabLocation.widgetIndex, 0, newWidget.id);
+        }
+    }
+}
+/** @internal */
+exports.setWidgetState = (0, immer_1.default)((nineZone, widgetDef, state) => {
+    const id = widgetDef.id;
+    let location = (0, appui_layout_react_1.findTab)(nineZone, id);
+    if (state === appui_abstract_1.WidgetState.Open) {
+        if (!location) {
+            addRemovedTab(nineZone, widgetDef);
+            location = (0, appui_layout_react_1.findTab)(nineZone, id);
+            (0, core_bentley_1.assert)(!!location);
+        }
+        const widget = nineZone.widgets[location.widgetId];
+        widget.minimized = false;
+        widget.activeTabId = id;
+    }
+    else if (state === appui_abstract_1.WidgetState.Closed) {
+        if (!location) {
+            addRemovedTab(nineZone, widgetDef);
+            location = (0, appui_layout_react_1.findTab)(nineZone, id);
+            (0, core_bentley_1.assert)(!!location);
+        }
+        const widget = nineZone.widgets[location.widgetId];
+        if (id !== widget.activeTabId)
+            return;
+        const minimized = widget.minimized;
+        widget.minimized = true;
+        if ("side" in location) {
+            const panel = nineZone.panels[location.side];
+            const maximized = panel.widgets.find((wId) => {
+                const w = nineZone.widgets[wId];
+                return !w.minimized;
+            });
+            if (maximized === undefined)
+                widget.minimized = minimized;
+            return;
+        }
+    }
+    else if (state === appui_abstract_1.WidgetState.Hidden) {
+        if (!location)
+            return;
+        const widgetId = location.widgetId;
+        const side = "side" in location ? location.side : "left";
+        const widgetIndex = "side" in location ? nineZone.panels[side].widgets.indexOf(widgetId) : 0;
+        const tabIndex = nineZone.widgets[location.widgetId].tabs.indexOf(id);
+        widgetDef.tabLocation = {
+            side,
+            tabIndex,
+            widgetId,
+            widgetIndex,
+        };
+        (0, appui_layout_react_1.removeTab)(nineZone, id);
+    }
+});
+/** @internal */
+exports.showWidget = (0, immer_1.default)((nineZone, id) => {
+    const location = (0, appui_layout_react_1.findTab)(nineZone, id);
+    if (!location)
+        return;
+    const widget = nineZone.widgets[location.widgetId];
+    if ("side" in location) {
+        const panel = nineZone.panels[location.side];
+        panel.collapsed = false;
+        widget.minimized = false;
+        widget.activeTabId = id;
+        return;
+    }
+    widget.activeTabId = id;
+    widget.minimized = false;
+    (0, appui_layout_react_1.isFloatingLocation)(location) && (0, appui_layout_react_1.floatingWidgetBringToFront)(nineZone, location.floatingWidgetId);
+});
+/** @internal */
+exports.expandWidget = (0, immer_1.default)((nineZone, id) => {
+    const location = (0, appui_layout_react_1.findTab)(nineZone, id);
+    if (!location)
+        return;
+    const widget = nineZone.widgets[location.widgetId];
+    if ("side" in location) {
+        const panel = nineZone.panels[location.side];
+        panel.widgets.forEach((wId) => {
+            const w = nineZone.widgets[wId];
+            w.minimized = true;
+        });
+        widget.minimized = false;
+        return;
+    }
+    widget.minimized = false;
+    return;
+});
+/** @internal */
+exports.setWidgetLabel = (0, immer_1.default)((nineZone, id, label) => {
+    if (!(id in nineZone.tabs))
+        return;
+    const tab = nineZone.tabs[id];
+    tab.label = label;
+});
+/** @internal */
+function useSavedFrontstageState(frontstageDef) {
+    const uiSettingsStorage = (0, useUiSettings_1.useUiSettingsStorageContext)();
+    const uiSettingsRef = React.useRef(uiSettingsStorage);
+    React.useEffect(() => {
+        uiSettingsRef.current = uiSettingsStorage;
+    }, [uiSettingsStorage]);
+    React.useEffect(() => {
+        async function fetchFrontstageState() {
+            if (frontstageDef.nineZoneState) {
+                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState, frontstageDef);
+                return;
+            }
+            const id = frontstageDef.id;
+            const version = frontstageDef.version;
+            const settingsResult = await uiSettingsRef.current.getSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id));
+            if (isFrontstageStateSettingResult(settingsResult) &&
+                settingsResult.setting.version >= version &&
+                settingsResult.setting.stateVersion >= stateVersion) {
+                const restored = restoreNineZoneState(frontstageDef, settingsResult.setting.nineZone);
+                let state = addMissingWidgets(frontstageDef, restored);
+                state = processPopoutWidgets(state, frontstageDef);
+                frontstageDef.nineZoneState = state;
+                return;
+            }
+            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+        }
+        fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [frontstageDef]);
+}
+exports.useSavedFrontstageState = useSavedFrontstageState;
+/** @internal */
+function useSaveFrontstageSettings(frontstageDef) {
+    const nineZone = useNineZoneState(frontstageDef);
+    const uiSettingsStorage = (0, useUiSettings_1.useUiSettingsStorageContext)();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const saveSetting = React.useCallback(debounce(async (id, version, state) => {
+        const setting = {
+            id,
+            nineZone: packNineZoneState(state),
+            stateVersion,
+            version,
+        };
+        await uiSettingsStorage.saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
+    }, 1000), [uiSettingsStorage]);
+    React.useEffect(() => {
+        return () => {
+            saveSetting.cancel();
+        };
+    }, [saveSetting]);
+    React.useEffect(() => {
+        if (!nineZone || nineZone.draggedTab)
+            return;
+        saveSetting(frontstageDef.id, frontstageDef.version, nineZone);
+    }, [frontstageDef, nineZone, saveSetting]);
+}
+exports.useSaveFrontstageSettings = useSaveFrontstageSettings;
+/** @internal */
+exports.FRONTSTAGE_SETTINGS_NAMESPACE = "uifw-frontstageSettings";
+/** @internal */
+function getFrontstageStateSettingName(frontstageId) {
+    return `frontstageState[${frontstageId}]`;
+}
+exports.getFrontstageStateSettingName = getFrontstageStateSettingName;
+// istanbul ignore next
+function debounce(func, duration) {
+    let timeout;
+    const debounced = (...args) => {
+        const handler = () => {
+            timeout = undefined;
+            return func(...args);
+        };
+        window.clearTimeout(timeout);
+        timeout = window.setTimeout(handler, duration);
+    };
+    debounced.cancel = () => {
+        window.clearTimeout(timeout);
+    };
+    return debounced;
+}
+const createListener = (frontstageDef, listener) => {
+    return (...args) => {
+        if (!frontstageDef.nineZoneState)
+            return;
+        listener(...args);
+    };
+};
+/** @internal */
+function useFrontstageManager(frontstageDef) {
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            frontstageDef.nineZoneState = (0, exports.setWidgetState)(frontstageDef.nineZoneState, widgetDef, widgetState);
+        });
+        FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            frontstageDef.nineZoneState = (0, exports.showWidget)(frontstageDef.nineZoneState, widgetDef.id);
+        });
+        FrontstageManager_1.FrontstageManager.onWidgetShowEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onWidgetShowEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            let nineZoneState = (0, exports.showWidget)(frontstageDef.nineZoneState, widgetDef.id);
+            nineZoneState = (0, exports.expandWidget)(nineZoneState, widgetDef.id);
+            frontstageDef.nineZoneState = nineZoneState;
+        });
+        FrontstageManager_1.FrontstageManager.onWidgetExpandEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onWidgetExpandEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    const uiSettingsStorage = (0, useUiSettings_1.useUiSettingsStorageContext)();
+    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
+            if (frontstageDef.id === args.frontstageDef.id) {
+                args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+            }
+            else {
+                args.frontstageDef.nineZoneState = undefined;
+            }
+        };
+        FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onFrontstageRestoreLayoutEvent.removeListener(listener);
+        };
+    }, [uiSettingsStorage, frontstageDef]);
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            const label = widgetDef.label;
+            frontstageDef.nineZoneState = (0, exports.setWidgetLabel)(frontstageDef.nineZoneState, widgetDef.id, label);
+        });
+        FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
+        return () => {
+            FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+}
+exports.useFrontstageManager = useFrontstageManager;
+/** @internal */
+// istanbul ignore next
+function useItemsManager(frontstageDef) {
+    const refreshNineZoneState = (def) => {
+        // Fired for both registered/unregistered. Update definitions and remove/add missing widgets.
+        def.updateWidgetDefs();
+        let state = def.nineZoneState;
+        if (!state)
+            return;
+        state = addMissingWidgets(def, state);
+        state = removeMissingWidgets(def, state);
+        def.nineZoneState = state;
+    };
+    React.useEffect(() => {
+        const remove = appui_abstract_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
+            refreshNineZoneState(frontstageDef);
+        });
+        // Need to refresh anytime frontstageDef changes because uiItemsProvider may have added something to
+        // another stage before it was possibly unloaded in this stage.
+        refreshNineZoneState(frontstageDef);
+        return remove;
+    }, [frontstageDef]);
+}
+exports.useItemsManager = useItemsManager;
+function tabShownInCurrentWidget(def, state) {
+    for (const [, widget] of Object.entries(state.widgets)) {
+        const foundTab = widget.tabs.find((tabId) => tabId === def.id);
+        // istanbul ignore else
+        if (foundTab)
+            return true;
+    }
+    return false;
+}
+// istanbul ignore next
+function determineNewWidgets(defs, state) {
+    // if tab for widget.id is not found or the label does not match widget label (label is set to "undefined" when widgetDef is not initially available)
+    return (defs || []).filter((def) => !(def.id in state.tabs) || !tabShownInCurrentWidget(def, state));
+}
+/** @internal */
+function useSyncDefinitions(frontstageDef) {
+    const nineZone = useNineZoneState(frontstageDef);
+    React.useEffect(() => {
+        if (!nineZone)
+            return;
+        for (const panelSide of appui_layout_react_1.panelSides) {
+            const panel = nineZone.panels[panelSide];
+            const location = toStagePanelLocation(panelSide);
+            const panelDef = frontstageDef.getStagePanelDef(location);
+            if (panelDef) {
+                panelDef.size = panel.size;
+                let newState = panel.collapsed ? StagePanelDef_1.StagePanelState.Minimized : StagePanelDef_1.StagePanelState.Open;
+                if (panelDef.panelState === StagePanelDef_1.StagePanelState.Off && newState === StagePanelDef_1.StagePanelState.Minimized)
+                    newState = StagePanelDef_1.StagePanelState.Off;
+                panelDef.panelState = newState;
+            }
+            for (const widgetId of panel.widgets) {
+                const widget = nineZone.widgets[widgetId];
+                // istanbul ignore else
+                if (widget) {
+                    for (const tabId of widget.tabs) {
+                        const widgetDef = frontstageDef.findWidgetDef(tabId);
+                        let widgetState = appui_abstract_1.WidgetState.Open;
+                        if (widget.minimized || tabId !== widget.activeTabId)
+                            widgetState = appui_abstract_1.WidgetState.Closed;
+                        widgetDef && widgetDef.setWidgetState(widgetState);
+                    }
+                }
+            }
+        }
+        for (const widgetId of nineZone.floatingWidgets.allIds) {
+            const widget = nineZone.widgets[widgetId];
+            // istanbul ignore else
+            if (widget) {
+                for (const tabId of widget.tabs) {
+                    const widgetDef = frontstageDef.findWidgetDef(tabId);
+                    let widgetState = appui_abstract_1.WidgetState.Open;
+                    if (widget.minimized || tabId !== widget.activeTabId)
+                        widgetState = appui_abstract_1.WidgetState.Closed;
+                    widgetDef && widgetDef.setWidgetState(widgetState);
+                }
+            }
+        }
+    }, [nineZone, frontstageDef]);
+}
+exports.useSyncDefinitions = useSyncDefinitions;
+/** @internal */
+async function saveFrontstagePopoutWidgetSizeAndPosition(state, stageId, stageVersion, childWindowId, childWindow) {
+    const location = (0, appui_layout_react_1.findWidget)(state, childWindowId);
+    // istanbul ignore else
+    if (location) {
+        const adjustmentWidth = core_bentley_1.ProcessDetector.isElectronAppFrontend ? 16 : 0;
+        const adjustmentHeight = core_bentley_1.ProcessDetector.isElectronAppFrontend ? 39 : 0;
+        const newState = (0, immer_1.default)(state, (draft) => {
+            const widget = draft.widgets[childWindowId];
+            const tab = draft.tabs[widget.activeTabId];
+            tab.preferredPopoutWidgetSize = {
+                x: childWindow.screenX,
+                y: childWindow.screenY,
+                width: childWindow.innerWidth + adjustmentWidth,
+                height: childWindow.innerHeight + adjustmentHeight,
+            };
+        });
+        const setting = {
+            id: stageId,
+            nineZone: packNineZoneState(newState),
+            stateVersion,
+            version: stageVersion,
+        };
+        await UiFramework_1.UiFramework.getUiSettingsStorage().saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(stageId), setting);
+        return newState;
+    }
+    // istanbul ignore next
+    return state;
+}
+exports.saveFrontstagePopoutWidgetSizeAndPosition = saveFrontstagePopoutWidgetSizeAndPosition;
+//# sourceMappingURL=Frontstage.js.map