@itwin/appui-react 4.0.0-dev.9 → 4.0.1

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

@@ -1,1090 +1,1084 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @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 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 StagePanelDef_1 = require("../stagepanels/StagePanelDef");
-const UiFramework_1 = require("../UiFramework");
-const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
-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 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 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))));
-}
-const widgetContent = React.createElement(Content_1.WidgetContent, null);
-const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
-const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
-/** @internal */
-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(() => {
-        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(() => {
-        return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
-            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
-                return;
-            (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 = InternalFrontstageManager_1.InternalFrontstageManager.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;
-/** @internal */
-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;
-}
-exports.FrameworkStateReducer = FrameworkStateReducer;
-/** @internal */
-function useNineZoneDispatch(frontstageDef) {
-    const dispatch = React.useCallback((action) => {
-        if (action.type === "RESIZE") {
-            InternalFrontstageManager_1.InternalFrontstageManager.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;
-        }
-        const state = frontstageDef.nineZoneState;
-        if (!state)
-            return;
-        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
-    }, [frontstageDef]);
-    return dispatch;
-}
-exports.useNineZoneDispatch = useNineZoneDispatch;
-/** @internal */
-function WidgetPanelsFrontstage() {
-    const [layout, frontstageDef] = useLayoutStore();
-    React.useEffect(() => {
-        const triggerWidowCloseProcessing = () => {
-            frontstageDef && frontstageDef.setIsApplicationClosing(true);
-        };
-        frontstageDef && frontstageDef.setIsApplicationClosing(false);
-        window.addEventListener("unload", triggerWidowCloseProcessing);
-        return () => {
-            window.removeEventListener("unload", triggerWidowCloseProcessing);
-        };
-    }, [frontstageDef]);
-    if (!frontstageDef)
-        return null;
-    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, layout }) {
-    const dispatch = useNineZoneDispatch(frontstageDef);
-    useUpdateNineZoneSize(frontstageDef);
-    useSavedFrontstageState(frontstageDef);
-    useSaveFrontstageSettings(frontstageDef, layout);
-    useItemsManager(frontstageDef);
-    const labels = useLabels();
-    const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
-    const showWidgetIcon = (0, react_redux_1.useSelector)((state) => {
-        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
-        return !!frameworkState.configurableUiState.showWidgetIcon;
-    });
-    const autoCollapseUnpinnedPanels = (0, react_redux_1.useSelector)((state) => {
-        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
-        return !!frameworkState.configurableUiState.autoCollapseUnpinnedPanels;
-    });
-    const animateToolSettings = (0, react_redux_1.useSelector)((state) => {
-        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
-        return !!frameworkState.configurableUiState.animateToolSettings;
-    });
-    const useToolAsToolSettingsLabel = (0, react_redux_1.useSelector)((state) => {
-        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
-        return !!frameworkState.configurableUiState.useToolAsToolSettingsLabel;
-    });
-    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, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, 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) {
-    const visibleWidgets = widgets.filter((w) => w.isVisible && (w.defaultState !== WidgetState_1.WidgetState.Floating));
-    if (visibleWidgets.length === 0)
-        return state;
-    const tabs = new Array();
-    for (const widget of visibleWidgets) {
-        const label = getWidgetLabel(widget.label);
-        state = (0, appui_layout_react_1.addTab)(state, widget.id, {
-            label,
-            iconSpec: widget.iconSpec,
-            preferredPanelWidgetSize: widget.preferredPanelSize,
-            preferredFloatingWidgetSize: widget.defaultFloatingSize,
-            canPopout: widget.canPopout,
-            isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
-            allowedPanelTargets: widget.allowedPanelTargets,
-        });
-        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) !== WidgetState_1.WidgetState.Floating) {
-        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, location, section) {
-    var _a;
-    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);
-        const saveTab = state.tabs[widgetDef.id];
-        const preferredPanelWidgetSize = saveTab ? saveTab.preferredPanelWidgetSize : widgetDef.preferredPanelSize;
-        const preferredFloatingWidgetSize = saveTab ? saveTab.preferredFloatingWidgetSize : widgetDef.defaultFloatingSize;
-        // if a defaultFloatingSize is specified then this mean the widget can't determine its intrinsic size and must be explicitly sized
-        const userSized = saveTab ? (saveTab.userSized || !!widgetDef.defaultFloatingSize && !!saveTab.preferredFloatingWidgetSize)
-            : !!widgetDef.defaultFloatingSize;
-        state = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
-            label,
-            iconSpec: widgetDef.iconSpec,
-            canPopout: widgetDef.canPopout,
-            preferredPanelWidgetSize,
-            preferredFloatingWidgetSize,
-            userSized,
-            isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
-            allowedPanelTargets: widgetDef.allowedPanelTargets,
-        });
-        if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
-            const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : (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) {
-                state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, floatingContainerId);
-            }
-            else {
-                const tab = state.tabs[widgetDef.id];
-                const size = { height: 200, width: 300, ...tab.preferredFloatingWidgetSize };
-                const preferredPoint = preferredPosition !== null && preferredPosition !== void 0 ? preferredPosition : { x: (state.size.width - size.width) / 2, y: (state.size.height - size.height) / 2 };
-                const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
-                const bounds = core_react_1.Rectangle.createFromSize(size).offset(preferredPoint);
-                const containedBounds = bounds.containIn(nzBounds);
-                state = (0, appui_layout_react_1.addFloatingWidget)(state, floatingContainerId, [widgetDef.id], {
-                    bounds: containedBounds.toProps(),
-                    home,
-                    userSized,
-                }, {
-                    isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-                });
-            }
-        }
-        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);
-            }
-            else {
-                const panel = state.panels[side];
-                if (panel.widgets.length < panel.maxWidgetCount) {
-                    state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetPanelSectionId, [widgetDef.id]);
-                }
-                else {
-                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
-                    const widgetId = panel.widgets[widgetIndex];
-                    state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetId);
-                }
-            }
-        }
-    }
-    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;
-    let state = initialState;
-    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;
-/** Hide widgets with Hidden defaultState. */
-function hideWidgets(state, frontstageDef) {
-    const tabs = Object.values(state.tabs);
-    for (const tab of tabs) {
-        const widgetDef = frontstageDef.findWidgetDef(tab.id);
-        if (!widgetDef)
-            continue;
-        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
-            state = hideWidget(state, widgetDef);
-        }
-    }
-    return state;
-}
-/** Removes NineZoneState widgets that are missing in frontstageDef.
- * @internal
- */
-function removeMissingWidgets(frontstageDef, initialState) {
-    let state = initialState;
-    for (const [, tab] of Object.entries(state.tabs)) {
-        if (tab.id === appui_layout_react_1.toolSettingsTabId)
-            continue;
-        const widgetDef = frontstageDef.findWidgetDef(tab.id);
-        if (widgetDef)
-            continue;
-        state = (0, appui_layout_react_1.removeTab)(state, tab.id);
-    }
-    return state;
-}
-exports.removeMissingWidgets = removeMissingWidgets;
-function getWidgetLabel(label) {
-    return label === "" ? "Widget" : label;
-}
-function toStagePanelLocation(side) {
-    switch (side) {
-        case "bottom":
-            return StagePanelLocation_1.StagePanelLocation.Bottom;
-        case "left":
-            return StagePanelLocation_1.StagePanelLocation.Left;
-        case "right":
-            return StagePanelLocation_1.StagePanelLocation.Right;
-        case "top":
-            return StagePanelLocation_1.StagePanelLocation.Top;
-    }
-}
-/** @internal */
-function getWidgetId(location, section) {
-    switch (location) {
-        case StagePanelLocation_1.StagePanelLocation.Left: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "leftStart";
-            return "leftEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Right: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "rightStart";
-            return "rightEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Top: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "topStart";
-            return "topEnd";
-        }
-        case StagePanelLocation_1.StagePanelLocation.Bottom: {
-            if (section === StagePanelSection_1.StagePanelSection.Start)
-                return "bottomStart";
-            return "bottomEnd";
-        }
-    }
-}
-exports.getWidgetId = getWidgetId;
-/** @internal */
-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.getPanelSectionWidgets = getPanelSectionWidgets;
-/** @internal */
-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(location, StagePanelSection_1.StagePanelSection.End);
-    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.End);
-    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
-    return state;
-}
-exports.addPanelWidgets = addPanelWidgets;
-/** @internal */
-function isFrontstageStateSettingResult(settingsResult) {
-    if (settingsResult.status === core_react_1.UiStateStorageStatus.Success)
-        return true;
-    return false;
-}
-exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
-/** @internal */
-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;
-        const panel = draft.panels[panelSide];
-        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, state.size);
-        }
-        const size = panelDef === null || panelDef === void 0 ? void 0 : panelDef.size;
-        panel.size = size === undefined ? size : Math.min(Math.max(size, panel.minSize), panel.maxSize);
-    });
-    return state;
-}
-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 = 13; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
-/** @internal */
-function initializeNineZoneState(frontstageDef) {
-    let nineZone = defaultNineZone;
-    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
-        // istanbul ignore next
-        if (!InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize)
-            return;
-        stateDraft.size = {
-            height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-            width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-        };
-    });
-    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;
-        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;
-            // istanbul ignore next
-            if (!expanded && firstWidget) {
-                firstWidget.minimized = false;
-            }
-        }
-        stateDraft.panels.left.collapsed = isPanelCollapsed((_a = frontstageDef.leftPanel) === null || _a === void 0 ? void 0 : _a.panelState);
-        stateDraft.panels.right.collapsed = isPanelCollapsed((_b = frontstageDef.rightPanel) === null || _b === void 0 ? void 0 : _b.panelState);
-        stateDraft.panels.top.collapsed = isPanelCollapsed((_c = frontstageDef.topPanel) === null || _c === void 0 ? void 0 : _c.panelState);
-        stateDraft.panels.bottom.collapsed = isPanelCollapsed((_d = frontstageDef.bottomPanel) === null || _d === void 0 ? void 0 : _d.panelState);
-        const toolSettingsWidgetDef = frontstageDef.toolSettings;
-        if (toolSettingsWidgetDef) {
-            const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
-            toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
-        }
-    });
-    nineZone = addMissingWidgets(frontstageDef, nineZone);
-    nineZone = hideWidgets(nineZone, frontstageDef);
-    nineZone = processPopoutWidgets(nineZone, frontstageDef);
-    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: defaultNineZone.tabs,
-    };
-    for (const [, tab] of Object.entries(saved.tabs)) {
-        // Re-add the placeholder tab in order to correctly remove it from the state if WidgetDef is not found.
-        restored = (0, appui_layout_react_1.addTab)(restored, tab.id);
-        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,
-            }));
-            restored = (0, appui_layout_react_1.removeTab)(restored, tab.id);
-            continue;
-        }
-        restored = (0, immer_1.default)(restored, (draft) => {
-            draft.tabs[tab.id] = {
-                ...tab,
-                label: getWidgetLabel(widgetDef.label),
-                hideWithUiWhenFloating: widgetDef.hideWithUiWhenFloating,
-                iconSpec: widgetDef.iconSpec,
-                canPopout: widgetDef.canPopout,
-                isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-                allowedPanelTargets: widgetDef.allowedPanelTargets,
-            };
-        });
-    }
-    restored = (0, immer_1.default)(restored, (draft) => {
-        // remove center panel section if one is found in left or right panels
-        const oldLeftMiddleIndex = saved.panels.left.widgets.findIndex((value) => value === "leftMiddle");
-        // istanbul ignore next
-        if (-1 !== oldLeftMiddleIndex) {
-            draft.panels.left.widgets = saved.panels.left.widgets.filter((value) => value !== "leftMiddle");
-            if ("leftEnd" in draft.widgets) {
-                draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
-            }
-            else {
-                draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
-                delete draft.widgets.leftMiddle;
-            }
-        }
-        const oldRightMiddleIndex = saved.panels.right.widgets.findIndex((value) => value === "rightMiddle");
-        // istanbul ignore next
-        if (-1 !== oldRightMiddleIndex) {
-            draft.panels.right.widgets = saved.panels.right.widgets.filter((value) => value !== "rightMiddle");
-            if ("rightEnd" in draft.widgets) {
-                draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
-            }
-            else {
-                draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
-                delete draft.widgets.rightMiddle;
-            }
-        }
-        return;
-    });
-    if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize && (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height || 0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
-        restored = FrameworkStateReducer(restored, {
-            type: "RESIZE",
-            size: {
-                height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
-                width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
-            },
-        }, frontstageDef);
-    }
-    return restored;
-}
-exports.restoreNineZoneState = restoreNineZoneState;
-/** Prepares NineZoneState to be saved.
- * @note Removes toolSettings tab.
- * @note Removes tab labels and iconSpec.
- * @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,
-                allowedPanelTargets: tab.allowedPanelTargets,
-                userSized: tab.userSized,
-            };
-        }
-    });
-    return packed;
-}
-exports.packNineZoneState = packNineZoneState;
-// istanbul ignore next
-function packSavedWidgets(frontstageDef) {
-    let savedWidgets = [];
-    for (const widgetDef of frontstageDef.widgetDefs) {
-        const id = widgetDef.id;
-        const initialWidget = {
-            id,
-        };
-        const widget = (0, immer_1.default)(initialWidget, (draft) => {
-            if (widgetDef.tabLocation) {
-                draft.tabLocation = { ...widgetDef.tabLocation };
-            }
-            if (widgetDef.popoutBounds) {
-                draft.popoutBounds = widgetDef.popoutBounds.toProps();
-            }
-        });
-        if (widget === initialWidget)
-            continue;
-        savedWidgets.push(widget);
-    }
-    // Add previously saved widgets.
-    const prevSavedWidgets = frontstageDef.savedWidgetDefs || [];
-    for (const prevWidget of prevSavedWidgets) {
-        if (savedWidgets.find((w) => w.id === prevWidget.id))
-            continue;
-        savedWidgets.push(prevWidget);
-    }
-    // Limit number of saved widgets.
-    const maxWidgets = 100;
-    if (savedWidgets.length > maxWidgets)
-        savedWidgets = savedWidgets.slice(0, maxWidgets);
-    return savedWidgets;
-}
-// istanbul ignore next
-function restoreSavedWidgets(frontstage) {
-    const savedWidgets = frontstage.savedWidgetDefs || [];
-    for (const savedWidget of savedWidgets) {
-        const widgetId = savedWidget.id;
-        const widgetDef = frontstage.findWidgetDef(widgetId);
-        if (!widgetDef)
-            continue;
-        if (savedWidget.tabLocation) {
-            widgetDef.tabLocation = { ...savedWidget.tabLocation };
-        }
-        if (savedWidget.popoutBounds) {
-            widgetDef.popoutBounds = core_react_1.Rectangle.create(savedWidget.popoutBounds);
-        }
-    }
-}
-/** @internal */
-function isPanelCollapsed(panelState) {
-    return panelState !== StagePanelDef_1.StagePanelState.Open;
-}
-exports.isPanelCollapsed = isPanelCollapsed;
-function addHiddenWidget(state, widgetDef) {
-    const tabLocation = widgetDef.tabLocation || widgetDef.defaultTabLocation;
-    const tabId = widgetDef.id;
-    const { widgetId, tabIndex } = tabLocation;
-    if (widgetId in state.widgets) {
-        // Add to an existing widget (by widget id).
-        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, widgetId, tabIndex);
-    }
-    else if (tabLocation.floatingWidget) {
-        const floatingWidget = tabLocation.floatingWidget;
-        (0, core_bentley_1.assert)(widgetId === floatingWidget.id);
-        // Add to a new floating widget.
-        const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
-        const bounds = core_react_1.Rectangle.create(floatingWidget.bounds).containIn(nzBounds);
-        return (0, appui_layout_react_1.addFloatingWidget)(state, floatingWidget.id, [tabId], {
-            ...floatingWidget,
-            bounds: bounds.toProps(),
-        });
-    }
-    // Add to a panel section.
-    const panel = state.panels[tabLocation.side];
-    // Add to existing panel section.
-    if (panel.widgets.length >= panel.maxWidgetCount) {
-        const sectionIndex = Math.min(panel.maxWidgetCount - 1, tabLocation.widgetIndex);
-        const sectionId = panel.widgets[sectionIndex];
-        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, sectionId, tabLocation.tabIndex);
-    }
-    // Create a new panel section.
-    const newSectionId = (0, appui_layout_react_1.getUniqueId)();
-    return (0, appui_layout_react_1.insertPanelWidget)(state, panel.side, newSectionId, [tabId], tabLocation.widgetIndex);
-}
-/** @internal */
-function setWidgetState(state, widgetDef, widgetState) {
-    var _a, _b;
-    if (widgetState === WidgetState_1.WidgetState.Hidden) {
-        return hideWidget(state, widgetDef);
-    }
-    else if (widgetState === WidgetState_1.WidgetState.Open) {
-        const id = widgetDef.id;
-        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        if (!location) {
-            state = addHiddenWidget(state, widgetDef);
-            location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        }
-        return (0, immer_1.default)(state, (draft) => {
-            var _a;
-            (0, core_bentley_1.assert)(!!location);
-            const widget = draft.widgets[location.widgetId];
-            widget.minimized = false;
-            widget.activeTabId = id;
-            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-                const floatingWidget = draft.floatingWidgets.byId[location.floatingWidgetId];
-                floatingWidget.hidden = false;
-                // istanbul ignore else
-            }
-            else if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-                const panel = draft.panels[location.side];
-                panel.collapsed = false;
-                if (undefined === panel.size || 0 === panel.size) {
-                    // istanbul ignore next
-                    panel.size = (_a = panel.minSize) !== null && _a !== void 0 ? _a : 200;
-                }
-            }
-        });
-    }
-    else if (widgetState === WidgetState_1.WidgetState.Closed) {
-        const id = widgetDef.id;
-        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        if (!location) {
-            state = addHiddenWidget(state, widgetDef);
-            location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        }
-        // TODO: should change activeTabId of a widget with multiple tabs.
-        return (0, immer_1.default)(state, (draft) => {
-            (0, core_bentley_1.assert)(!!location);
-            const widget = draft.widgets[location.widgetId];
-            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-                if (id === widget.activeTabId) {
-                    widget.minimized = true;
-                }
-            }
-        });
-    }
-    else if (widgetState === WidgetState_1.WidgetState.Floating) {
-        const id = widgetDef.id;
-        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        if (!location) {
-            state = addHiddenWidget(state, widgetDef);
-            location = (0, appui_layout_react_1.getTabLocation)(state, id);
-        }
-        (0, core_bentley_1.assert)(!!location);
-        if ((0, appui_layout_react_1.isFloatingTabLocation)(location))
-            return state;
-        // Widget is not floating.
-        state = (0, appui_layout_react_1.removeTabFromWidget)(state, id);
-        const bounds = (_b = (_a = widgetDef.tabLocation) === null || _a === void 0 ? void 0 : _a.floatingWidget) === null || _b === void 0 ? void 0 : _b.bounds;
-        state = (0, appui_layout_react_1.addFloatingWidget)(state, (0, appui_layout_react_1.getUniqueId)(), [id], { bounds });
-    }
-    return state;
-}
-exports.setWidgetState = setWidgetState;
-/** Stores widget location and hides it in the UI. */
-function hideWidget(state, widgetDef) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, widgetDef.id);
-    if (!location)
-        return state;
-    // istanbul ignore else
-    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-        const floatingWidget = state.floatingWidgets.byId[location.widgetId];
-        widgetDef.setFloatingContainerId(location.floatingWidgetId);
-        widgetDef.tabLocation = {
-            side: floatingWidget.home.side,
-            tabIndex: floatingWidget.home.widgetIndex,
-            widgetId: floatingWidget.id,
-            widgetIndex: floatingWidget.home.widgetIndex,
-            floatingWidget,
-        };
-    }
-    else if (!(0, appui_layout_react_1.isPopoutTabLocation)(location)) {
-        const widgetId = location.widgetId;
-        const side = (0, appui_layout_react_1.isPanelTabLocation)(location) ? location.side : "left";
-        const widgetIndex = (0, appui_layout_react_1.isPanelTabLocation)(location) ? state.panels[side].widgets.indexOf(widgetId) : 0;
-        const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
-        widgetDef.tabLocation = {
-            side,
-            tabIndex,
-            widgetId,
-            widgetIndex,
-        };
-    }
-    return (0, appui_layout_react_1.removeTabFromWidget)(state, widgetDef.id);
-}
-/** @internal */
-function showWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    state = (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        widget.activeTabId = id;
-        widget.minimized = false;
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.collapsed = false;
-        }
-    });
-    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
-        state = (0, appui_layout_react_1.floatingWidgetBringToFront)(state, location.floatingWidgetId);
-    }
-    return state;
-}
-exports.showWidget = showWidget;
-/** @internal */
-function expandWidget(state, id) {
-    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
-    if (!location)
-        return state;
-    return (0, immer_1.default)(state, (draft) => {
-        const widget = draft.widgets[location.widgetId];
-        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
-            const panel = draft.panels[location.side];
-            panel.widgets.forEach((wId) => {
-                const w = draft.widgets[wId];
-                w.minimized = true;
-            });
-        }
-        widget.minimized = false;
-    });
-}
-exports.expandWidget = expandWidget;
-/** @internal */
-function setWidgetLabel(state, id, label) {
-    if (!(id in state.tabs))
-        return state;
-    return (0, immer_1.default)(state, (draft) => {
-        const tab = draft.tabs[id];
-        tab.label = label;
-    });
-}
-exports.setWidgetLabel = setWidgetLabel;
-/** @internal */
-function useSavedFrontstageState(frontstageDef) {
-    const uiStateStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
-    const uiStateStorageRef = React.useRef(uiStateStorage);
-    const isMountedRef = React.useRef(false);
-    React.useEffect(() => {
-        isMountedRef.current = true;
-        return () => { isMountedRef.current = false; };
-    }, []);
-    React.useEffect(() => {
-        uiStateStorageRef.current = uiStateStorage;
-    }, [uiStateStorage]);
-    React.useEffect(() => {
-        async function fetchFrontstageState() {
-            if (frontstageDef.nineZoneState) {
-                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState, frontstageDef);
-                return;
-            }
-            const id = frontstageDef.id;
-            const version = frontstageDef.version;
-            const settingResult = await uiStateStorageRef.current.getSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id));
-            if (!isMountedRef.current)
-                return;
-            if (isFrontstageStateSettingResult(settingResult)) {
-                const setting = settingResult.setting;
-                if (setting.version >= version && setting.stateVersion >= stateVersion) {
-                    const restored = restoreNineZoneState(frontstageDef, setting.nineZone);
-                    frontstageDef.savedWidgetDefs = setting.widgets;
-                    restoreSavedWidgets(frontstageDef);
-                    let state = addMissingWidgets(frontstageDef, restored);
-                    state = hideWidgets(state, frontstageDef);
-                    state = processPopoutWidgets(state, frontstageDef);
-                    frontstageDef.nineZoneState = state;
-                    return;
-                }
-            }
-            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
-        }
-        void fetchFrontstageState();
-    }, [frontstageDef]);
-}
-exports.useSavedFrontstageState = useSavedFrontstageState;
-/** @internal */
-function useSaveFrontstageSettings(frontstageDef, store) {
-    const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
-    const saveSetting = React.useMemo(() => {
-        const debounced = debounce(async (frontstage, state) => {
-            const id = frontstage.id;
-            const widgets = packSavedWidgets(frontstage);
-            frontstage.savedWidgetDefs = widgets;
-            const setting = {
-                id,
-                version: frontstage.version,
-                stateVersion,
-                nineZone: packNineZoneState(state),
-                widgets,
-            };
-            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 () => {
-            saveSetting.cancel();
-        };
-    }, [saveSetting]);
-    React.useEffect(() => {
-        saveSetting(frontstageDef, store.getState());
-    }, [saveSetting, frontstageDef, store]);
-    React.useEffect(() => {
-        return store.subscribe(() => {
-            saveSetting(frontstageDef, store.getState());
-        });
-    }, [saveSetting, frontstageDef, store]);
-}
-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, useToolAsToolSettingsLabel) {
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
-        });
-        UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
-        return () => {
-            UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
-        };
-    }, [frontstageDef]);
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            frontstageDef.nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
-        });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.removeListener(listener);
-        };
-    }, [frontstageDef]);
-    React.useEffect(() => {
-        const listener = createListener(frontstageDef, ({ widgetDef }) => {
-            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            let nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
-            nineZoneState = expandWidget(nineZoneState, widgetDef.id);
-            frontstageDef.nineZoneState = nineZoneState;
-        });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.addListener(listener);
-        return () => {
-            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
-            void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
-            if (frontstageDef.id === args.frontstageDef.id) {
-                args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
-            }
-            else {
-                args.frontstageDef.nineZoneState = undefined;
-            }
-        };
-        InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
-        return () => {
-            InternalFrontstageManager_1.InternalFrontstageManager.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 = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
-        });
-        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
-        return () => {
-            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 = 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;
-            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, appui_layout_react_1.toolSettingsTabId, label);
-        });
-        // Whenever the frontstageDef or the useTool... changes, keep the label up to date.
-        updateLabel();
-        // If useTool... is true, listen for events to keep up the label up to date.
-        if (useToolAsToolSettingsLabel) {
-            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) {
-                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]);
-}
-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();
-        restoreSavedWidgets(def);
-        let state = def.nineZoneState;
-        if (!state)
-            return;
-        state = addMissingWidgets(def, state);
-        state = removeMissingWidgets(def, state);
-        state = hideWidgets(state, def); // TODO: should only apply to widgets provided by registered provider in onUiProviderRegisteredEvent.
-        def.nineZoneState = state;
-    };
-    React.useEffect(() => {
-        const remove = UiItemsManager_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;
-// istanbul ignore next
-function determineNewWidgets(defs, state) {
-    defs = defs || [];
-    const uniqueDefs = defs.filter((def, index, array) => {
-        return index === array.findIndex((def1) => def.id === def1.id);
-    });
-    return uniqueDefs.filter((def) => !(def.id in state.tabs));
-}
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @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 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 StagePanelDef_1 = require("../stagepanels/StagePanelDef");
+const UiFramework_1 = require("../UiFramework");
+const useUiStateStorage_1 = require("../uistate/useUiStateStorage");
+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 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 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))));
+}
+const widgetContent = React.createElement(Content_1.WidgetContent, null);
+const toolSettingsContent = React.createElement(ToolSettings_1.ToolSettingsContent, null);
+const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
+/** @internal */
+function useLayoutStore() {
+    const [def, setDef] = React.useState(UiFramework_1.UiFramework.frontstages.activeFrontstageDef);
+    const [layout, setLayout] = React.useState(() => (0, appui_layout_react_1.createLayoutStore)(def?.nineZoneState));
+    React.useEffect(() => {
+        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(() => {
+        return InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.addListener((args) => {
+            if (args.frontstageDef !== def || def.isStageClosing || def.isApplicationClosing)
+                return;
+            (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 = InternalFrontstageManager_1.InternalFrontstageManager.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;
+/** @internal */
+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?.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;
+}
+exports.FrameworkStateReducer = FrameworkStateReducer;
+/** @internal */
+function useNineZoneDispatch(frontstageDef) {
+    const dispatch = React.useCallback((action) => {
+        if (action.type === "RESIZE") {
+            InternalFrontstageManager_1.InternalFrontstageManager.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;
+        }
+        const state = frontstageDef.nineZoneState;
+        if (!state)
+            return;
+        frontstageDef.nineZoneState = FrameworkStateReducer(state, action, frontstageDef);
+    }, [frontstageDef]);
+    return dispatch;
+}
+exports.useNineZoneDispatch = useNineZoneDispatch;
+/** @internal */
+function WidgetPanelsFrontstage() {
+    const [layout, frontstageDef] = useLayoutStore();
+    React.useEffect(() => {
+        const triggerWidowCloseProcessing = () => {
+            frontstageDef && frontstageDef.setIsApplicationClosing(true);
+        };
+        frontstageDef && frontstageDef.setIsApplicationClosing(false);
+        window.addEventListener("unload", triggerWidowCloseProcessing);
+        return () => {
+            window.removeEventListener("unload", triggerWidowCloseProcessing);
+        };
+    }, [frontstageDef]);
+    if (!frontstageDef)
+        return null;
+    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, layout }) {
+    const dispatch = useNineZoneDispatch(frontstageDef);
+    useUpdateNineZoneSize(frontstageDef);
+    useSavedFrontstageState(frontstageDef);
+    useSaveFrontstageSettings(frontstageDef, layout);
+    useItemsManager(frontstageDef);
+    const labels = useLabels();
+    const uiIsVisible = (0, useUiVisibility_1.useUiVisibility)();
+    const showWidgetIcon = (0, react_redux_1.useSelector)((state) => {
+        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.showWidgetIcon;
+    });
+    const autoCollapseUnpinnedPanels = (0, react_redux_1.useSelector)((state) => {
+        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.autoCollapseUnpinnedPanels;
+    });
+    const animateToolSettings = (0, react_redux_1.useSelector)((state) => {
+        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.animateToolSettings;
+    });
+    const useToolAsToolSettingsLabel = (0, react_redux_1.useSelector)((state) => {
+        const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.useToolAsToolSettingsLabel;
+    });
+    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, layout: layout, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, 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) {
+    const visibleWidgets = widgets.filter((w) => w.isVisible && (w.defaultState !== WidgetState_1.WidgetState.Floating));
+    if (visibleWidgets.length === 0)
+        return state;
+    const tabs = new Array();
+    for (const widget of visibleWidgets) {
+        const label = getWidgetLabel(widget.label);
+        state = (0, appui_layout_react_1.addTab)(state, widget.id, {
+            label,
+            iconSpec: widget.iconSpec,
+            preferredPanelWidgetSize: widget.preferredPanelSize,
+            preferredFloatingWidgetSize: widget.defaultFloatingSize,
+            canPopout: widget.canPopout,
+            isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
+            allowedPanelTargets: widget.allowedPanelTargets?.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?.defaultState !== WidgetState_1.WidgetState.Floating) {
+        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, location, section) {
+    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);
+        const saveTab = state.tabs[widgetDef.id];
+        const preferredPanelWidgetSize = saveTab ? saveTab.preferredPanelWidgetSize : widgetDef.preferredPanelSize;
+        const preferredFloatingWidgetSize = saveTab ? saveTab.preferredFloatingWidgetSize : widgetDef.defaultFloatingSize;
+        // if a defaultFloatingSize is specified then this mean the widget can't determine its intrinsic size and must be explicitly sized
+        const userSized = saveTab ? (saveTab.userSized || !!widgetDef.defaultFloatingSize && !!saveTab.preferredFloatingWidgetSize)
+            : !!widgetDef.defaultFloatingSize;
+        state = (0, appui_layout_react_1.addTab)(state, widgetDef.id, {
+            label,
+            iconSpec: widgetDef.iconSpec,
+            canPopout: widgetDef.canPopout,
+            preferredPanelWidgetSize,
+            preferredFloatingWidgetSize,
+            userSized,
+            isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+            hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
+            allowedPanelTargets: widgetDef.allowedPanelTargets?.map((l) => (0, StagePanelDef_1.toPanelSide)(l)),
+        });
+        if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState_1.WidgetState.Floating) {
+            const floatingContainerId = widgetDef.floatingContainerId ?? (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) {
+                state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, floatingContainerId);
+            }
+            else {
+                const tab = state.tabs[widgetDef.id];
+                const size = { height: 200, width: 300, ...tab.preferredFloatingWidgetSize };
+                const preferredPoint = preferredPosition ?? { x: (state.size.width - size.width) / 2, y: (state.size.height - size.height) / 2 };
+                const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
+                const bounds = core_react_1.Rectangle.createFromSize(size).offset(preferredPoint);
+                const containedBounds = bounds.containIn(nzBounds);
+                state = (0, appui_layout_react_1.addFloatingWidget)(state, floatingContainerId, [widgetDef.id], {
+                    bounds: containedBounds.toProps(),
+                    home,
+                    userSized,
+                }, {
+                    isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+                });
+            }
+        }
+        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);
+            }
+            else {
+                const panel = state.panels[side];
+                if (panel.widgets.length < panel.maxWidgetCount) {
+                    state = (0, appui_layout_react_1.addPanelWidget)(state, side, widgetPanelSectionId, [widgetDef.id]);
+                }
+                else {
+                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
+                    const widgetId = panel.widgets[widgetIndex];
+                    state = (0, appui_layout_react_1.addTabToWidget)(state, widgetDef.id, widgetId);
+                }
+            }
+        }
+    }
+    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) {
+    let state = initialState;
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.leftPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.leftPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Left, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.rightPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.rightPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Right, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.topPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.topPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Top, StagePanelSection_1.StagePanelSection.End);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.bottomPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.Start).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.Start);
+    state = appendWidgets(state, determineNewWidgets(frontstageDef.bottomPanel?.getPanelSectionDef(StagePanelSection_1.StagePanelSection.End).widgetDefs, state), StagePanelLocation_1.StagePanelLocation.Bottom, StagePanelSection_1.StagePanelSection.End);
+    return state;
+}
+exports.addMissingWidgets = addMissingWidgets;
+/** Hide widgets with Hidden defaultState. */
+function hideWidgets(state, frontstageDef) {
+    const tabs = Object.values(state.tabs);
+    for (const tab of tabs) {
+        const widgetDef = frontstageDef.findWidgetDef(tab.id);
+        if (!widgetDef)
+            continue;
+        if (widgetDef.defaultState === WidgetState_1.WidgetState.Hidden) {
+            state = hideWidget(state, widgetDef);
+        }
+    }
+    return state;
+}
+/** Removes NineZoneState widgets that are missing in frontstageDef.
+ * @internal
+ */
+function removeMissingWidgets(frontstageDef, initialState) {
+    let state = initialState;
+    for (const [, tab] of Object.entries(state.tabs)) {
+        if (tab.id === appui_layout_react_1.toolSettingsTabId)
+            continue;
+        const widgetDef = frontstageDef.findWidgetDef(tab.id);
+        if (widgetDef)
+            continue;
+        state = (0, appui_layout_react_1.removeTab)(state, tab.id);
+    }
+    return state;
+}
+exports.removeMissingWidgets = removeMissingWidgets;
+function getWidgetLabel(label) {
+    return label === "" ? "Widget" : label;
+}
+function toStagePanelLocation(side) {
+    switch (side) {
+        case "bottom":
+            return StagePanelLocation_1.StagePanelLocation.Bottom;
+        case "left":
+            return StagePanelLocation_1.StagePanelLocation.Left;
+        case "right":
+            return StagePanelLocation_1.StagePanelLocation.Right;
+        case "top":
+            return StagePanelLocation_1.StagePanelLocation.Top;
+    }
+}
+/** @internal */
+function getWidgetId(location, section) {
+    switch (location) {
+        case StagePanelLocation_1.StagePanelLocation.Left: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
+                return "leftStart";
+            return "leftEnd";
+        }
+        case StagePanelLocation_1.StagePanelLocation.Right: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
+                return "rightStart";
+            return "rightEnd";
+        }
+        case StagePanelLocation_1.StagePanelLocation.Top: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
+                return "topStart";
+            return "topEnd";
+        }
+        case StagePanelLocation_1.StagePanelLocation.Bottom: {
+            if (section === StagePanelSection_1.StagePanelSection.Start)
+                return "bottomStart";
+            return "bottomEnd";
+        }
+    }
+}
+exports.getWidgetId = getWidgetId;
+/** @internal */
+function getPanelSectionWidgets(frontstageDef, location, section) {
+    const stagePanel = frontstageDef.getStagePanelDef(location);
+    const panelSection = stagePanel?.getPanelSectionDef(section);
+    return panelSection?.widgetDefs || [];
+}
+exports.getPanelSectionWidgets = getPanelSectionWidgets;
+/** @internal */
+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(location, StagePanelSection_1.StagePanelSection.End);
+    const endWidgets = getPanelSectionWidgets(frontstageDef, location, StagePanelSection_1.StagePanelSection.End);
+    state = addWidgets(state, determineNewWidgets(endWidgets, state), side, end);
+    return state;
+}
+exports.addPanelWidgets = addPanelWidgets;
+/** @internal */
+function isFrontstageStateSettingResult(settingsResult) {
+    if (settingsResult.status === core_react_1.UiStateStorageStatus.Success)
+        return true;
+    return false;
+}
+exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
+/** @internal */
+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) => {
+        const panel = draft.panels[panelSide];
+        panel.minSize = panelDef?.minSize ?? panel.minSize;
+        panel.pinned = panelDef?.pinned ?? panel.pinned;
+        panel.resizable = panelDef?.resizable ?? panel.resizable;
+        if (panelDef?.maxSizeSpec) {
+            panel.maxSize = getPanelMaxSize(panelDef.maxSizeSpec, panelSide, state.size);
+        }
+        const size = panelDef?.size;
+        panel.size = size === undefined ? size : Math.min(Math.max(size, panel.minSize), panel.maxSize);
+    });
+    return state;
+}
+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 = 13; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
+/** @internal */
+function initializeNineZoneState(frontstageDef) {
+    let nineZone = defaultNineZone;
+    nineZone = (0, immer_1.default)(nineZone, (stateDraft) => {
+        // istanbul ignore next
+        if (!InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize)
+            return;
+        stateDraft.size = {
+            height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+            width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
+        };
+    });
+    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) => {
+        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;
+            // istanbul ignore next
+            if (!expanded && firstWidget) {
+                firstWidget.minimized = false;
+            }
+        }
+        stateDraft.panels.left.collapsed = isPanelCollapsed(frontstageDef.leftPanel?.panelState);
+        stateDraft.panels.right.collapsed = isPanelCollapsed(frontstageDef.rightPanel?.panelState);
+        stateDraft.panels.top.collapsed = isPanelCollapsed(frontstageDef.topPanel?.panelState);
+        stateDraft.panels.bottom.collapsed = isPanelCollapsed(frontstageDef.bottomPanel?.panelState);
+        const toolSettingsWidgetDef = frontstageDef.toolSettings;
+        if (toolSettingsWidgetDef) {
+            const toolSettingsTab = stateDraft.tabs[appui_layout_react_1.toolSettingsTabId];
+            toolSettingsTab.preferredPanelWidgetSize = toolSettingsWidgetDef.preferredPanelSize;
+        }
+    });
+    nineZone = addMissingWidgets(frontstageDef, nineZone);
+    nineZone = hideWidgets(nineZone, frontstageDef);
+    nineZone = processPopoutWidgets(nineZone, frontstageDef);
+    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: defaultNineZone.tabs,
+    };
+    for (const [, tab] of Object.entries(saved.tabs)) {
+        // Re-add the placeholder tab in order to correctly remove it from the state if WidgetDef is not found.
+        restored = (0, appui_layout_react_1.addTab)(restored, tab.id);
+        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,
+            }));
+            restored = (0, appui_layout_react_1.removeTab)(restored, tab.id);
+            continue;
+        }
+        restored = (0, immer_1.default)(restored, (draft) => {
+            draft.tabs[tab.id] = {
+                ...tab,
+                label: getWidgetLabel(widgetDef.label),
+                hideWithUiWhenFloating: widgetDef.hideWithUiWhenFloating,
+                iconSpec: widgetDef.iconSpec,
+                canPopout: widgetDef.canPopout,
+                isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+                allowedPanelTargets: widgetDef.allowedPanelTargets?.map((location) => (0, StagePanelDef_1.toPanelSide)(location)),
+            };
+        });
+    }
+    restored = (0, immer_1.default)(restored, (draft) => {
+        // remove center panel section if one is found in left or right panels
+        const oldLeftMiddleIndex = saved.panels.left.widgets.findIndex((value) => value === "leftMiddle");
+        // istanbul ignore next
+        if (-1 !== oldLeftMiddleIndex) {
+            draft.panels.left.widgets = saved.panels.left.widgets.filter((value) => value !== "leftMiddle");
+            if ("leftEnd" in draft.widgets) {
+                draft.widgets.leftMiddle.tabs.forEach((tab) => draft.widgets.leftEnd.tabs.push(tab));
+            }
+            else {
+                draft.widgets.leftEnd = { ...draft.widgets.leftMiddle };
+                delete draft.widgets.leftMiddle;
+            }
+        }
+        const oldRightMiddleIndex = saved.panels.right.widgets.findIndex((value) => value === "rightMiddle");
+        // istanbul ignore next
+        if (-1 !== oldRightMiddleIndex) {
+            draft.panels.right.widgets = saved.panels.right.widgets.filter((value) => value !== "rightMiddle");
+            if ("rightEnd" in draft.widgets) {
+                draft.widgets.rightMiddle.tabs.forEach((tab) => draft.widgets.rightEnd.tabs.push(tab));
+            }
+            else {
+                draft.widgets.rightEnd = { ...draft.widgets.rightMiddle };
+                delete draft.widgets.rightMiddle;
+            }
+        }
+        return;
+    });
+    if (InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize && (0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height || 0 !== InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width)) {
+        restored = FrameworkStateReducer(restored, {
+            type: "RESIZE",
+            size: {
+                height: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.height,
+                width: InternalFrontstageManager_1.InternalFrontstageManager.nineZoneSize.width,
+            },
+        }, frontstageDef);
+    }
+    return restored;
+}
+exports.restoreNineZoneState = restoreNineZoneState;
+/** Prepares NineZoneState to be saved.
+ * @note Removes toolSettings tab.
+ * @note Removes tab labels and iconSpec.
+ * @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,
+                allowedPanelTargets: tab.allowedPanelTargets,
+                userSized: tab.userSized,
+            };
+        }
+    });
+    return packed;
+}
+exports.packNineZoneState = packNineZoneState;
+// istanbul ignore next
+function packSavedWidgets(frontstageDef) {
+    let savedWidgets = [];
+    for (const widgetDef of frontstageDef.widgetDefs) {
+        const id = widgetDef.id;
+        const initialWidget = {
+            id,
+        };
+        const widget = (0, immer_1.default)(initialWidget, (draft) => {
+            if (widgetDef.tabLocation) {
+                draft.tabLocation = { ...widgetDef.tabLocation };
+            }
+            if (widgetDef.popoutBounds) {
+                draft.popoutBounds = widgetDef.popoutBounds.toProps();
+            }
+        });
+        if (widget === initialWidget)
+            continue;
+        savedWidgets.push(widget);
+    }
+    // Add previously saved widgets.
+    const prevSavedWidgets = frontstageDef.savedWidgetDefs || [];
+    for (const prevWidget of prevSavedWidgets) {
+        if (savedWidgets.find((w) => w.id === prevWidget.id))
+            continue;
+        savedWidgets.push(prevWidget);
+    }
+    // Limit number of saved widgets.
+    const maxWidgets = 100;
+    if (savedWidgets.length > maxWidgets)
+        savedWidgets = savedWidgets.slice(0, maxWidgets);
+    return savedWidgets;
+}
+// istanbul ignore next
+function restoreSavedWidgets(frontstage) {
+    const savedWidgets = frontstage.savedWidgetDefs || [];
+    for (const savedWidget of savedWidgets) {
+        const widgetId = savedWidget.id;
+        const widgetDef = frontstage.findWidgetDef(widgetId);
+        if (!widgetDef)
+            continue;
+        if (savedWidget.tabLocation) {
+            widgetDef.tabLocation = { ...savedWidget.tabLocation };
+        }
+        if (savedWidget.popoutBounds) {
+            widgetDef.popoutBounds = core_react_1.Rectangle.create(savedWidget.popoutBounds);
+        }
+    }
+}
+/** @internal */
+function isPanelCollapsed(panelState) {
+    return panelState !== StagePanelDef_1.StagePanelState.Open;
+}
+exports.isPanelCollapsed = isPanelCollapsed;
+function addHiddenWidget(state, widgetDef) {
+    const tabLocation = widgetDef.tabLocation || widgetDef.defaultTabLocation;
+    const tabId = widgetDef.id;
+    const { widgetId, tabIndex } = tabLocation;
+    if (widgetId in state.widgets) {
+        // Add to an existing widget (by widget id).
+        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, widgetId, tabIndex);
+    }
+    else if (tabLocation.floatingWidget) {
+        const floatingWidget = tabLocation.floatingWidget;
+        (0, core_bentley_1.assert)(widgetId === floatingWidget.id);
+        // Add to a new floating widget.
+        const nzBounds = core_react_1.Rectangle.createFromSize(state.size);
+        const bounds = core_react_1.Rectangle.create(floatingWidget.bounds).containIn(nzBounds);
+        return (0, appui_layout_react_1.addFloatingWidget)(state, floatingWidget.id, [tabId], {
+            ...floatingWidget,
+            bounds: bounds.toProps(),
+        });
+    }
+    // Add to a panel section.
+    const panel = state.panels[tabLocation.side];
+    // Add to existing panel section.
+    if (panel.widgets.length >= panel.maxWidgetCount) {
+        const sectionIndex = Math.min(panel.maxWidgetCount - 1, tabLocation.widgetIndex);
+        const sectionId = panel.widgets[sectionIndex];
+        return (0, appui_layout_react_1.insertTabToWidget)(state, tabId, sectionId, tabLocation.tabIndex);
+    }
+    // Create a new panel section.
+    const newSectionId = (0, appui_layout_react_1.getUniqueId)();
+    return (0, appui_layout_react_1.insertPanelWidget)(state, panel.side, newSectionId, [tabId], tabLocation.widgetIndex);
+}
+/** @internal */
+function setWidgetState(state, widgetDef, widgetState) {
+    if (widgetState === WidgetState_1.WidgetState.Hidden) {
+        return hideWidget(state, widgetDef);
+    }
+    else if (widgetState === WidgetState_1.WidgetState.Open) {
+        const id = widgetDef.id;
+        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        if (!location) {
+            state = addHiddenWidget(state, widgetDef);
+            location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        }
+        return (0, immer_1.default)(state, (draft) => {
+            (0, core_bentley_1.assert)(!!location);
+            const widget = draft.widgets[location.widgetId];
+            widget.minimized = false;
+            widget.activeTabId = id;
+            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
+                const floatingWidget = draft.floatingWidgets.byId[location.floatingWidgetId];
+                floatingWidget.hidden = false;
+                // istanbul ignore else
+            }
+            else if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
+                const panel = draft.panels[location.side];
+                panel.collapsed = false;
+                if (undefined === panel.size || 0 === panel.size) {
+                    // istanbul ignore next
+                    panel.size = panel.minSize ?? 200;
+                }
+            }
+        });
+    }
+    else if (widgetState === WidgetState_1.WidgetState.Closed) {
+        const id = widgetDef.id;
+        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        if (!location) {
+            state = addHiddenWidget(state, widgetDef);
+            location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        }
+        // TODO: should change activeTabId of a widget with multiple tabs.
+        return (0, immer_1.default)(state, (draft) => {
+            (0, core_bentley_1.assert)(!!location);
+            const widget = draft.widgets[location.widgetId];
+            if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
+                if (id === widget.activeTabId) {
+                    widget.minimized = true;
+                }
+            }
+        });
+    }
+    else if (widgetState === WidgetState_1.WidgetState.Floating) {
+        const id = widgetDef.id;
+        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        if (!location) {
+            state = addHiddenWidget(state, widgetDef);
+            location = (0, appui_layout_react_1.getTabLocation)(state, id);
+        }
+        (0, core_bentley_1.assert)(!!location);
+        if ((0, appui_layout_react_1.isFloatingTabLocation)(location))
+            return state;
+        // Widget is not floating.
+        state = (0, appui_layout_react_1.removeTabFromWidget)(state, id);
+        const bounds = widgetDef.tabLocation?.floatingWidget?.bounds;
+        state = (0, appui_layout_react_1.addFloatingWidget)(state, (0, appui_layout_react_1.getUniqueId)(), [id], { bounds });
+    }
+    return state;
+}
+exports.setWidgetState = setWidgetState;
+/** Stores widget location and hides it in the UI. */
+function hideWidget(state, widgetDef) {
+    const location = (0, appui_layout_react_1.getTabLocation)(state, widgetDef.id);
+    if (!location)
+        return state;
+    // istanbul ignore else
+    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
+        const floatingWidget = state.floatingWidgets.byId[location.widgetId];
+        widgetDef.setFloatingContainerId(location.floatingWidgetId);
+        widgetDef.tabLocation = {
+            side: floatingWidget.home.side,
+            tabIndex: floatingWidget.home.widgetIndex,
+            widgetId: floatingWidget.id,
+            widgetIndex: floatingWidget.home.widgetIndex,
+            floatingWidget,
+        };
+    }
+    else if (!(0, appui_layout_react_1.isPopoutTabLocation)(location)) {
+        const widgetId = location.widgetId;
+        const side = (0, appui_layout_react_1.isPanelTabLocation)(location) ? location.side : "left";
+        const widgetIndex = (0, appui_layout_react_1.isPanelTabLocation)(location) ? state.panels[side].widgets.indexOf(widgetId) : 0;
+        const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
+        widgetDef.tabLocation = {
+            side,
+            tabIndex,
+            widgetId,
+            widgetIndex,
+        };
+    }
+    return (0, appui_layout_react_1.removeTabFromWidget)(state, widgetDef.id);
+}
+/** @internal */
+function showWidget(state, id) {
+    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
+    if (!location)
+        return state;
+    state = (0, immer_1.default)(state, (draft) => {
+        const widget = draft.widgets[location.widgetId];
+        widget.activeTabId = id;
+        widget.minimized = false;
+        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
+            const panel = draft.panels[location.side];
+            panel.collapsed = false;
+        }
+    });
+    if ((0, appui_layout_react_1.isFloatingTabLocation)(location)) {
+        state = (0, appui_layout_react_1.floatingWidgetBringToFront)(state, location.floatingWidgetId);
+    }
+    return state;
+}
+exports.showWidget = showWidget;
+/** @internal */
+function expandWidget(state, id) {
+    const location = (0, appui_layout_react_1.getTabLocation)(state, id);
+    if (!location)
+        return state;
+    return (0, immer_1.default)(state, (draft) => {
+        const widget = draft.widgets[location.widgetId];
+        if ((0, appui_layout_react_1.isPanelTabLocation)(location)) {
+            const panel = draft.panels[location.side];
+            panel.splitterPercent =
+                panel.widgets.findIndex((wId) => wId === location.widgetId) === 0 ?
+                    100 : 0;
+        }
+        widget.minimized = false;
+    });
+}
+exports.expandWidget = expandWidget;
+/** @internal */
+function setWidgetLabel(state, id, label) {
+    if (!(id in state.tabs))
+        return state;
+    return (0, immer_1.default)(state, (draft) => {
+        const tab = draft.tabs[id];
+        tab.label = label;
+    });
+}
+exports.setWidgetLabel = setWidgetLabel;
+/** @internal */
+function useSavedFrontstageState(frontstageDef) {
+    const uiStateStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
+    const uiStateStorageRef = React.useRef(uiStateStorage);
+    const isMountedRef = React.useRef(false);
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => { isMountedRef.current = false; };
+    }, []);
+    React.useEffect(() => {
+        uiStateStorageRef.current = uiStateStorage;
+    }, [uiStateStorage]);
+    React.useEffect(() => {
+        async function fetchFrontstageState() {
+            if (frontstageDef.nineZoneState) {
+                frontstageDef.nineZoneState = processPopoutWidgets(frontstageDef.nineZoneState, frontstageDef);
+                return;
+            }
+            const id = frontstageDef.id;
+            const version = frontstageDef.version;
+            const settingResult = await uiStateStorageRef.current.getSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id));
+            if (!isMountedRef.current)
+                return;
+            if (isFrontstageStateSettingResult(settingResult)) {
+                const setting = settingResult.setting;
+                if (setting.version >= version && setting.stateVersion >= stateVersion) {
+                    const restored = restoreNineZoneState(frontstageDef, setting.nineZone);
+                    frontstageDef.savedWidgetDefs = setting.widgets;
+                    restoreSavedWidgets(frontstageDef);
+                    let state = addMissingWidgets(frontstageDef, restored);
+                    state = hideWidgets(state, frontstageDef);
+                    state = processPopoutWidgets(state, frontstageDef);
+                    frontstageDef.nineZoneState = state;
+                    return;
+                }
+            }
+            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+        }
+        void fetchFrontstageState();
+    }, [frontstageDef]);
+}
+exports.useSavedFrontstageState = useSavedFrontstageState;
+/** @internal */
+function useSaveFrontstageSettings(frontstageDef, store) {
+    const uiSettingsStorage = (0, useUiStateStorage_1.useUiStateStorageHandler)();
+    const saveSetting = React.useMemo(() => {
+        const debounced = debounce(async (frontstage, state) => {
+            const id = frontstage.id;
+            const widgets = packSavedWidgets(frontstage);
+            frontstage.savedWidgetDefs = widgets;
+            const setting = {
+                id,
+                version: frontstage.version,
+                stateVersion,
+                nineZone: packNineZoneState(state),
+                widgets,
+            };
+            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 () => {
+            saveSetting.cancel();
+        };
+    }, [saveSetting]);
+    React.useEffect(() => {
+        saveSetting(frontstageDef, store.getState());
+    }, [saveSetting, frontstageDef, store]);
+    React.useEffect(() => {
+        return store.subscribe(() => {
+            saveSetting(frontstageDef, store.getState());
+        });
+    }, [saveSetting, frontstageDef, store]);
+}
+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, useToolAsToolSettingsLabel) {
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
+        });
+        UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.addListener(listener);
+        return () => {
+            UiFramework_1.UiFramework.frontstages.onWidgetStateChangedEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            const nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, WidgetState_1.WidgetState.Open);
+            frontstageDef.nineZoneState = showWidget(nineZoneState, widgetDef.id);
+        });
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.addListener(listener);
+        return () => {
+            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetShowEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    React.useEffect(() => {
+        const listener = createListener(frontstageDef, ({ widgetDef }) => {
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            let nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, WidgetState_1.WidgetState.Open);
+            nineZoneState = showWidget(nineZoneState, widgetDef.id);
+            nineZoneState = expandWidget(nineZoneState, widgetDef.id);
+            frontstageDef.nineZoneState = nineZoneState;
+        });
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetExpandEvent.addListener(listener);
+        return () => {
+            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
+            void uiSettingsStorage.deleteSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(args.frontstageDef.id));
+            if (frontstageDef.id === args.frontstageDef.id) {
+                args.frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
+            }
+            else {
+                args.frontstageDef.nineZoneState = undefined;
+            }
+        };
+        InternalFrontstageManager_1.InternalFrontstageManager.onFrontstageRestoreLayoutEvent.addListener(listener);
+        return () => {
+            InternalFrontstageManager_1.InternalFrontstageManager.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 = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
+        });
+        InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
+        return () => {
+            InternalFrontstageManager_1.InternalFrontstageManager.onWidgetLabelChangedEvent.removeListener(listener);
+        };
+    }, [frontstageDef]);
+    const defaultLabel = React.useMemo(() => UiFramework_1.UiFramework.translate("widget.labels.toolSettings"), []);
+    React.useEffect(() => {
+        const updateLabel = createListener(frontstageDef, () => {
+            const toolId = UiFramework_1.UiFramework.frontstages.activeToolId;
+            (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
+            const label = useToolAsToolSettingsLabel ?
+                core_frontend_1.IModelApp.tools.find(toolId)?.flyover || defaultLabel : defaultLabel;
+            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, appui_layout_react_1.toolSettingsTabId, label);
+        });
+        // Whenever the frontstageDef or the useTool... changes, keep the label up to date.
+        updateLabel();
+        // If useTool... is true, listen for events to keep up the label up to date.
+        if (useToolAsToolSettingsLabel) {
+            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) {
+                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]);
+}
+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();
+        restoreSavedWidgets(def);
+        let state = def.nineZoneState;
+        if (!state)
+            return;
+        state = addMissingWidgets(def, state);
+        state = removeMissingWidgets(def, state);
+        state = hideWidgets(state, def); // TODO: should only apply to widgets provided by registered provider in onUiProviderRegisteredEvent.
+        def.nineZoneState = state;
+    };
+    React.useEffect(() => {
+        const remove = UiItemsManager_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;
+// istanbul ignore next
+function determineNewWidgets(defs, state) {
+    defs = defs || [];
+    const uniqueDefs = defs.filter((def, index, array) => {
+        return index === array.findIndex((def1) => def.id === def1.id);
+    });
+    return uniqueDefs.filter((def) => !(def.id in state.tabs));
+}
 //# sourceMappingURL=Frontstage.js.map