@itwin/appui-react 3.4.0-dev.8 → 3.5.0-dev.11

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

@@ -8,13 +8,13 @@
  */
 // cSpell:ignore popout
 import "./Frontstage.scss";
-import produce, { castDraft } from "immer";
+import produce from "immer";
 import * as React from "react";
 import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
 import { StagePanelLocation, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
-import { Size, UiStateStorageStatus } from "@itwin/core-react";
+import { Rectangle, Size, UiStateStorageStatus } from "@itwin/core-react";
 import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addPanelWidget, addTab, addWidgetTabToDraftFloatingPanel, addWidgetTabToFloatingPanel, addWidgetTabToPanelSection, convertAllPopupWidgetContainersToFloating, createNineZoneState, createTabsState, createTabState, createWidgetState, findTab, findWidget, floatingWidgetBringToFront, FloatingWidgets, getUniqueId, getWidgetPanelSectionId, isFloatingLocation, isHorizontalPanelSide, isPopoutLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { addFloatingWidget, addPanelWidget, addTab, addTabToWidget, convertAllPopupWidgetContainersToFloating, createNineZoneState, floatingWidgetBringToFront, FloatingWidgets, getTabLocation, getUniqueId, getWidgetPanelSectionId, insertPanelWidget, insertTabToWidget, isFloatingTabLocation, isHorizontalPanelSide, isPanelTabLocation, isPopoutTabLocation, NineZone, NineZoneStateReducer, panelSides, removeTab, removeTabFromWidget, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
 import { useActiveFrontstageDef } from "../frontstage/Frontstage";
 import { FrontstageManager } from "../frontstage/FrontstageManager";
 import { StagePanelState } from "../stagepanels/StagePanelDef";
@@ -32,6 +32,7 @@ import { useEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
 import { useSelector } from "react-redux";
 import { useUiVisibility } from "../hooks/useUiVisibility";
 import { IModelApp } from "@itwin/core-frontend";
+import { FloatingWidget } from "./FloatingWidget";
 const panelZoneKeys = ["start", "end"];
 const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
@@ -171,6 +172,7 @@ export const WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage
 });
 const defaultNineZone = createNineZoneState();
 const tabElement = React.createElement(WidgetPanelsTab, null);
+const floatingWidgetElement = React.createElement(FloatingWidget, null);
 /** @internal */
 export function ActiveFrontstageDefProvider({ frontstageDef }) {
     let nineZone = useNineZoneState(frontstageDef);
@@ -201,7 +203,7 @@ export function ActiveFrontstageDefProvider({ frontstageDef }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = useEscapeSetFocusToHome();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        React.createElement(NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 /** @internal */
 export function useLabels() {
@@ -233,6 +235,7 @@ export function addWidgets(state, widgets, side, widgetId) {
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
             hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
+            allowedPanelTargets: widget.allowedPanelTargets,
         });
         tabs.push(widget.id);
     }
@@ -259,7 +262,6 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
         const saveTab = state.tabs[widgetDef.id];
         const preferredPanelWidgetSize = saveTab ? saveTab.preferredPanelWidgetSize : widgetDef.preferredPanelSize;
         const preferredFloatingWidgetSize = saveTab ? saveTab.preferredFloatingWidgetSize : widgetDef.defaultFloatingSize;
-        const preferredPopoutWidgetSize = saveTab ? saveTab.preferredPopoutWidgetSize : undefined;
         // 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;
@@ -269,21 +271,51 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             canPopout: widgetDef.canPopout,
             preferredPanelWidgetSize,
             preferredFloatingWidgetSize,
-            preferredPopoutWidgetSize,
             userSized,
             isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
             hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
+            allowedPanelTargets: widgetDef.allowedPanelTargets,
         });
         if (widgetDef.isFloatingStateSupported && widgetDef.defaultState === WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : getUniqueId();
             const widgetContainerId = getWidgetId(side, panelZoneKeys[preferredWidgetIndex]);
-            const homePanelInfo = { side, widgetId: widgetContainerId, widgetIndex: 0 };
+            const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
-            state = addWidgetTabToFloatingPanel(state, floatingContainerId, widgetDef.id, homePanelInfo, preferredFloatingWidgetSize, preferredPosition, userSized, widgetDef.isFloatingStateWindowResizable);
+            if (floatingContainerId in state.widgets) {
+                state = 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 = Rectangle.createFromSize(state.size);
+                const bounds = Rectangle.createFromSize(size).offset(preferredPoint);
+                const containedBounds = bounds.containIn(nzBounds);
+                state = addFloatingWidget(state, floatingContainerId, [widgetDef.id], {
+                    bounds: containedBounds.toProps(),
+                    home,
+                    userSized,
+                }, {
+                    isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+                });
+            }
         }
         else {
             const widgetPanelSectionId = getWidgetPanelSectionId(side, preferredWidgetIndex);
-            state = addWidgetTabToPanelSection(state, side, widgetPanelSectionId, widgetDef.id);
+            if (widgetPanelSectionId in state.widgets) {
+                state = addTabToWidget(state, widgetDef.id, widgetPanelSectionId);
+            }
+            else {
+                const panel = state.panels[side];
+                if (panel.widgets.length < panel.maxWidgetCount) {
+                    state = addPanelWidget(state, side, widgetPanelSectionId, [widgetDef.id]);
+                }
+                else {
+                    const widgetIndex = Math.min(preferredWidgetIndex, panel.widgets.length - 1);
+                    const widgetId = panel.widgets[widgetIndex];
+                    state = addTabToWidget(state, widgetDef.id, widgetId);
+                }
+            }
         }
     }
     return state;
@@ -329,17 +361,15 @@ export function addMissingWidgets(frontstageDef, initialState) {
     state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, state), "bottom", 1);
     return state;
 }
-/** Removes widgets with Hidden defaultState. */
-function removeHiddenWidgets(state, frontstageDef) {
+/** 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.Hidden) {
-            state = produce(state, (draft) => {
-                hideWidget(draft, widgetDef);
-            });
+            state = hideWidget(state, widgetDef);
         }
     }
     return state;
@@ -348,16 +378,15 @@ function removeHiddenWidgets(state, frontstageDef) {
  * @internal
  */
 export function removeMissingWidgets(frontstageDef, initialState) {
-    const state = produce(initialState, (draft) => {
-        for (const [, tab] of Object.entries(draft.tabs)) {
-            if (tab.id === toolSettingsTabId)
-                continue;
-            const widgetDef = frontstageDef.findWidgetDef(tab.id);
-            if (widgetDef)
-                continue;
-            removeTab(draft, tab.id);
-        }
-    });
+    let state = initialState;
+    for (const [, tab] of Object.entries(state.tabs)) {
+        if (tab.id === toolSettingsTabId)
+            continue;
+        const widgetDef = frontstageDef.findWidgetDef(tab.id);
+        if (widgetDef)
+            continue;
+        state = removeTab(state, tab.id);
+    }
     return state;
 }
 function getWidgetLabel(label) {
@@ -508,23 +537,23 @@ export function isFrontstageStateSettingResult(settingsResult) {
     return false;
 }
 /** @internal */
-export function initializePanel(nineZone, frontstageDef, panelSide) {
-    nineZone = addPanelWidgets(nineZone, frontstageDef, panelSide);
+export function initializePanel(state, frontstageDef, panelSide) {
+    state = addPanelWidgets(state, frontstageDef, panelSide);
     const location = toStagePanelLocation(panelSide);
     const panelDef = frontstageDef.getStagePanelDef(location);
-    nineZone = produce(nineZone, (draft) => {
+    state = produce(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, nineZone.size);
+            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 nineZone;
+    return state;
 }
 function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
     if (typeof maxSizeSpec === "number") {
@@ -533,7 +562,7 @@ function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
     const size = isHorizontalPanelSide(panel) ? nineZoneSize.height : nineZoneSize.width;
     return maxSizeSpec.percentage / 100 * size;
 }
-const stateVersion = 12; // this needs to be bumped when NineZoneState is changed (to recreate layout).
+const stateVersion = 13; // this needs to be bumped when NineZoneState is changed (to recreate the layout).
 /** @internal */
 export function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -555,6 +584,7 @@ export function initializeNineZoneState(frontstageDef) {
         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;
             }
@@ -583,7 +613,7 @@ export function initializeNineZoneState(frontstageDef) {
         }
     });
     nineZone = addMissingWidgets(frontstageDef, nineZone);
-    nineZone = removeHiddenWidgets(nineZone, frontstageDef);
+    nineZone = hideWidgets(nineZone, frontstageDef);
     nineZone = processPopoutWidgets(nineZone, frontstageDef);
     return nineZone;
 }
@@ -595,29 +625,33 @@ export function initializeNineZoneState(frontstageDef) {
 export function restoreNineZoneState(frontstageDef, saved) {
     let restored = {
         ...saved,
-        tabs: createTabsState(),
+        tabs: defaultNineZone.tabs,
     };
-    restored = produce(restored, (draft) => {
-        var _a;
-        for (const [, tab] of Object.entries(saved.tabs)) {
-            const widgetDef = frontstageDef.findWidgetDef(tab.id);
-            if (!widgetDef) {
-                Logger.logInfo(UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
-                    frontstageId: frontstageDef.id,
-                    tabId: tab.id,
-                }));
-                removeTab(draft, tab.id);
-                // let fall through so we preserve preferred sizes of widgets load via UiItemsProvider
-            }
+    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 = addTab(restored, tab.id);
+        const widgetDef = frontstageDef.findWidgetDef(tab.id);
+        if (!widgetDef) {
+            Logger.logInfo(UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
+                frontstageId: frontstageDef.id,
+                tabId: tab.id,
+            }));
+            restored = removeTab(restored, tab.id);
+            continue;
+        }
+        restored = produce(restored, (draft) => {
             draft.tabs[tab.id] = {
                 ...tab,
-                label: getWidgetLabel((_a = widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.label) !== null && _a !== void 0 ? _a : "undefined"),
-                hideWithUiWhenFloating: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.hideWithUiWhenFloating,
-                iconSpec: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.iconSpec,
-                canPopout: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.canPopout,
-                isFloatingStateWindowResizable: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.isFloatingStateWindowResizable,
+                label: getWidgetLabel(widgetDef.label),
+                hideWithUiWhenFloating: widgetDef.hideWithUiWhenFloating,
+                iconSpec: widgetDef.iconSpec,
+                canPopout: widgetDef.canPopout,
+                isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
+                allowedPanelTargets: widgetDef.allowedPanelTargets,
             };
-        }
+        });
+    }
+    restored = produce(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
@@ -656,20 +690,6 @@ export function restoreNineZoneState(frontstageDef, saved) {
     }
     return restored;
 }
-/**
- * Checks to see whether a widget id is one of our generated uuids
- * @param uuid the string value to test
- * @returns boolean
- */
-function isUUID(uuid) {
-    const s = `${uuid}`;
-    const result = s.match("^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$");
-    // istanbul ignore else
-    if (result === null) {
-        return false;
-    }
-    return true;
-}
 /** Prepares NineZoneState to be saved.
  * @note Removes toolSettings tab.
  * @note Removes tab labels and iconSpec.
@@ -684,31 +704,60 @@ export function packNineZoneState(state) {
         for (const [, tab] of Object.entries(state.tabs)) {
             if (tab.id === toolSettingsTabId)
                 continue;
-            // istanbul ignore else
-            if (isUUID(tab.id))
-                continue;
             draft.tabs[tab.id] = {
                 id: tab.id,
                 preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
-                preferredPopoutWidgetSize: tab.preferredPopoutWidgetSize,
                 allowedPanelTargets: tab.allowedPanelTargets,
                 userSized: tab.userSized,
             };
         }
     });
-    packed = produce(packed, (draft) => {
-        for (const [, floatingWidget] of Object.entries(state.floatingWidgets.byId)) {
-            const widgetId = floatingWidget.id;
-            // istanbul ignore else
-            if (isUUID(widgetId)) {
-                const idIndex = draft.floatingWidgets.allIds.indexOf(widgetId);
-                draft.floatingWidgets.allIds.splice(idIndex, 1);
-                delete draft.floatingWidgets.byId[widgetId];
-                delete draft.widgets[widgetId];
+    return packed;
+}
+// TODO: clean-up of saved widgets.
+// istanbul ignore next
+function packSavedWidgets(savedWidgets, frontstageDef) {
+    for (const widgetDef of frontstageDef.widgetDefs) {
+        const id = widgetDef.id;
+        const initialWidget = {
+            id,
+        };
+        const widget = produce(initialWidget, (draft) => {
+            if (widgetDef.tabLocation) {
+                draft.tabLocation = { ...widgetDef.tabLocation };
+            }
+            if (widgetDef.popoutBounds) {
+                draft.popoutBounds = widgetDef.popoutBounds.toProps();
             }
+        });
+        if (widget === initialWidget)
+            continue;
+        savedWidgets = produce(savedWidgets, (draft) => {
+            draft.push(widget);
+        });
+    }
+    return savedWidgets;
+}
+// istanbul ignore next
+function restoreSavedWidgets(savedWidgets, frontstage) {
+    let i = savedWidgets.length;
+    while (i--) {
+        const savedWidget = savedWidgets[i];
+        const widgetId = savedWidget.id;
+        const widgetDef = frontstage.findWidgetDef(widgetId);
+        if (!widgetDef)
+            continue;
+        if (savedWidget.tabLocation) {
+            widgetDef.tabLocation = { ...savedWidget.tabLocation };
         }
-    });
-    return packed;
+        if (savedWidget.popoutBounds) {
+            widgetDef.popoutBounds = Rectangle.create(savedWidget.popoutBounds);
+        }
+        savedWidgets = produce(savedWidgets, (draft) => {
+            draft.splice(i, 1);
+        });
+    }
+    return savedWidgets;
 }
 /** @internal */
 export function isPanelCollapsed(zoneStates, panelStates) {
@@ -716,121 +765,127 @@ export function isPanelCollapsed(zoneStates, panelStates) {
     const openPanel = panelStates.find((panelState) => panelState === StagePanelState.Open);
     return !openZone && !openPanel;
 }
-function addRemovedTab(nineZone, widgetDef) {
-    var _a, _b;
-    const newTab = createTabState(widgetDef.id, {
-        label: getWidgetLabel(widgetDef.label),
-        canPopout: widgetDef.canPopout,
-        iconSpec: widgetDef.iconSpec,
-        preferredPanelWidgetSize: widgetDef.preferredPanelSize,
-        isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
-        hideWithUiWhenFloating: !!widgetDef.hideWithUiWhenFloating,
-    });
-    nineZone.tabs[newTab.id] = newTab;
-    if (widgetDef.tabLocation.widgetId in nineZone.widgets) {
-        // Add to existing widget (by widget id).
-        const widgetId = widgetDef.tabLocation.widgetId;
-        const newTabWidget = nineZone.widgets[widgetId];
-        newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
+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 insertTabToWidget(state, tabId, widgetId, tabIndex);
     }
-    else if (widgetDef.tabLocation.floating) {
-        const id = widgetDef.tabLocation.widgetId;
-        if (id in nineZone.floatingWidgets.byId) {
-            nineZone.floatingWidgets.allIds.push(id);
-            nineZone.floatingWidgets.byId[id].hidden = false;
-            addWidgetTabToDraftFloatingPanel(nineZone, (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : widgetDef.id, widgetDef.id, nineZone.floatingWidgets.byId[id].home, newTab);
-        }
-        else {
-            const home = { side: widgetDef.tabLocation.side, widgetId: widgetDef.floatingContainerId, widgetIndex: 0 };
-            addWidgetTabToDraftFloatingPanel(nineZone, (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : widgetDef.id, widgetDef.id, home, newTab);
-        }
+    else if (tabLocation.floatingWidget) {
+        const floatingWidget = tabLocation.floatingWidget;
+        assert(widgetId === floatingWidget.id);
+        // Add to a new floating widget.
+        const nzBounds = Rectangle.createFromSize(state.size);
+        const bounds = Rectangle.create(floatingWidget.bounds).containIn(nzBounds);
+        return addFloatingWidget(state, floatingWidget.id, [tabId], {
+            ...floatingWidget,
+            bounds: bounds.toProps(),
+        });
     }
-    else {
-        const newTabPanel = nineZone.panels[widgetDef.tabLocation.side];
-        if (newTabPanel.maxWidgetCount === newTabPanel.widgets.length) {
-            // Add to existing panel widget.
-            const widgetIndex = Math.min(newTabPanel.maxWidgetCount - 1, widgetDef.tabLocation.widgetIndex);
-            const newTabWidgetId = newTabPanel.widgets[widgetIndex];
-            const newTabWidget = nineZone.widgets[newTabWidgetId];
-            newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
-        }
-        else {
-            // Create a new panel widget.
-            const newWidget = createWidgetState(getUniqueId(), [newTab.id]);
-            nineZone.widgets[newWidget.id] = castDraft(newWidget);
-            newTabPanel.widgets.splice(widgetDef.tabLocation.widgetIndex, 0, newWidget.id);
-        }
+    // 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 insertTabToWidget(state, tabId, sectionId, tabLocation.tabIndex);
     }
+    // Create a new panel section.
+    const newSectionId = getUniqueId();
+    return insertPanelWidget(state, panel.side, newSectionId, [tabId], tabLocation.widgetIndex);
 }
 /** @internal */
-export const setWidgetState = produce((nineZone, widgetDef, state) => {
+export function setWidgetState(state, widgetDef, widgetState) {
     var _a, _b;
-    if (state === WidgetState.Open) {
+    if (widgetState === WidgetState.Hidden) {
+        return hideWidget(state, widgetDef);
+    }
+    else if (widgetState === WidgetState.Open) {
         const id = widgetDef.id;
-        let location = findTab(nineZone, id);
+        let location = getTabLocation(state, id);
         if (!location) {
-            addRemovedTab(nineZone, widgetDef);
-            location = findTab(nineZone, id);
-            assert(!!location);
-        }
-        if (!!widgetDef.tabLocation.floating) {
-            nineZone.floatingWidgets.byId[(_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : widgetDef.id].hidden = false;
+            state = addHiddenWidget(state, widgetDef);
+            location = getTabLocation(state, id);
         }
-        const widget = nineZone.widgets[location.widgetId];
-        widget.minimized = false;
-        widget.activeTabId = id;
-        // ensure panel containing widget is not collapsed
-        // istanbul ignore else
-        if ("side" in location) {
-            const panel = nineZone.panels[location.side];
-            panel.collapsed && (panel.collapsed = false);
-            // istanbul ignore next
-            if (undefined === panel.size || 0 === panel.size) {
-                panel.size = (_b = panel.minSize) !== null && _b !== void 0 ? _b : 200;
+        return produce(state, (draft) => {
+            var _a;
+            assert(!!location);
+            const widget = draft.widgets[location.widgetId];
+            widget.minimized = false;
+            widget.activeTabId = id;
+            if (isFloatingTabLocation(location)) {
+                const floatingWidget = draft.floatingWidgets.byId[location.floatingWidgetId];
+                floatingWidget.hidden = false;
+                // istanbul ignore else
             }
-        }
+            else if (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 (state === WidgetState.Closed) {
+    else if (widgetState === WidgetState.Closed) {
         const id = widgetDef.id;
-        let location = findTab(nineZone, id);
+        let location = getTabLocation(state, id);
         if (!location) {
-            addRemovedTab(nineZone, widgetDef);
-            location = findTab(nineZone, id);
-            assert(!!location);
-        }
-        if (isFloatingLocation(location)) {
-            const widget = nineZone.widgets[location.widgetId];
-            if (id !== widget.activeTabId)
-                return;
-            widget.minimized = true;
+            state = addHiddenWidget(state, widgetDef);
+            location = getTabLocation(state, id);
         }
+        // TODO: should change activeTabId of a widget with multiple tabs.
+        return produce(state, (draft) => {
+            assert(!!location);
+            const widget = draft.widgets[location.widgetId];
+            if (isFloatingTabLocation(location)) {
+                if (id === widget.activeTabId) {
+                    widget.minimized = true;
+                }
+            }
+        });
     }
-    else if (state === WidgetState.Hidden) {
-        hideWidget(nineZone, widgetDef);
+    else if (widgetState === WidgetState.Floating) {
+        const id = widgetDef.id;
+        let location = getTabLocation(state, id);
+        if (!location) {
+            state = addHiddenWidget(state, widgetDef);
+            location = getTabLocation(state, id);
+        }
+        assert(!!location);
+        if (isFloatingTabLocation(location))
+            return state;
+        // Widget is not floating.
+        state = 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 = addFloatingWidget(state, getUniqueId(), [id], { bounds });
     }
-});
+    return state;
+}
 /** Stores widget location and hides it in the UI. */
 function hideWidget(state, widgetDef) {
-    const location = findTab(state, widgetDef.id);
+    const location = getTabLocation(state, widgetDef.id);
     if (!location)
-        return;
-    if (isFloatingLocation(location)) {
-        const widget = state.floatingWidgets.byId[location.widgetId];
+        return state;
+    // istanbul ignore else
+    if (isFloatingTabLocation(location)) {
+        const floatingWidget = state.floatingWidgets.byId[location.widgetId];
         widgetDef.setFloatingContainerId(location.floatingWidgetId);
         widgetDef.tabLocation = {
-            side: widget.home.side,
-            tabIndex: widget.home.widgetIndex,
-            widgetId: widgetDef.id,
-            widgetIndex: widget.home.widgetIndex,
-            floating: true,
+            side: floatingWidget.home.side,
+            tabIndex: floatingWidget.home.widgetIndex,
+            widgetId: floatingWidget.id,
+            widgetIndex: floatingWidget.home.widgetIndex,
+            floatingWidget,
         };
     }
-    else 
-    // istanbul ignore else
-    if (!isPopoutLocation(location)) {
+    else if (!isPopoutTabLocation(location)) {
         const widgetId = location.widgetId;
-        const side = "side" in location ? location.side : "left";
-        const widgetIndex = "side" in location ? state.panels[side].widgets.indexOf(widgetId) : 0;
+        const side = isPanelTabLocation(location) ? location.side : "left";
+        const widgetIndex = isPanelTabLocation(location) ? state.panels[side].widgets.indexOf(widgetId) : 0;
         const tabIndex = state.widgets[location.widgetId].tabs.indexOf(widgetDef.id);
         widgetDef.tabLocation = {
             side,
@@ -839,50 +894,53 @@ function hideWidget(state, widgetDef) {
             widgetIndex,
         };
     }
-    removeTab(state, widgetDef.id);
+    return removeTabFromWidget(state, widgetDef.id);
 }
 /** @internal */
-export const showWidget = produce((nineZone, id) => {
-    const location = findTab(nineZone, id);
+export function showWidget(state, id) {
+    const location = getTabLocation(state, id);
     if (!location)
-        return;
-    const widget = nineZone.widgets[location.widgetId];
-    if ("side" in location) {
-        const panel = nineZone.panels[location.side];
-        panel.collapsed = false;
-        widget.minimized = false;
+        return state;
+    state = produce(state, (draft) => {
+        const widget = draft.widgets[location.widgetId];
         widget.activeTabId = id;
-        return;
+        widget.minimized = false;
+        if (isPanelTabLocation(location)) {
+            const panel = draft.panels[location.side];
+            panel.collapsed = false;
+        }
+    });
+    if (isFloatingTabLocation(location)) {
+        state = floatingWidgetBringToFront(state, location.floatingWidgetId);
     }
-    widget.activeTabId = id;
-    widget.minimized = false;
-    isFloatingLocation(location) && floatingWidgetBringToFront(nineZone, location.floatingWidgetId);
-});
+    return state;
+}
 /** @internal */
-export const expandWidget = produce((nineZone, id) => {
-    const location = findTab(nineZone, id);
+export function expandWidget(state, id) {
+    const location = getTabLocation(state, id);
     if (!location)
-        return;
-    const widget = nineZone.widgets[location.widgetId];
-    if ("side" in location) {
-        const panel = nineZone.panels[location.side];
-        panel.widgets.forEach((wId) => {
-            const w = nineZone.widgets[wId];
-            w.minimized = true;
-        });
+        return state;
+    return produce(state, (draft) => {
+        const widget = draft.widgets[location.widgetId];
+        if (isPanelTabLocation(location)) {
+            const panel = draft.panels[location.side];
+            panel.widgets.forEach((wId) => {
+                const w = draft.widgets[wId];
+                w.minimized = true;
+            });
+        }
         widget.minimized = false;
-        return;
-    }
-    widget.minimized = false;
-    return;
-});
+    });
+}
 /** @internal */
-export const setWidgetLabel = produce((nineZone, id, label) => {
-    if (!(id in nineZone.tabs))
-        return;
-    const tab = nineZone.tabs[id];
-    tab.label = label;
-});
+export function setWidgetLabel(state, id, label) {
+    if (!(id in state.tabs))
+        return state;
+    return produce(state, (draft) => {
+        const tab = draft.tabs[id];
+        tab.label = label;
+    });
+}
 /** @internal */
 export function useSavedFrontstageState(frontstageDef) {
     const uiStateStorage = useUiStateStorageHandler();
@@ -903,20 +961,23 @@ export function useSavedFrontstageState(frontstageDef) {
             }
             const id = frontstageDef.id;
             const version = frontstageDef.version;
-            const settingsResult = await uiStateStorageRef.current.getSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id));
-            if (isMountedRef.current) {
-                if (isFrontstageStateSettingResult(settingsResult) &&
-                    settingsResult.setting.version >= version &&
-                    settingsResult.setting.stateVersion >= stateVersion) {
-                    const restored = restoreNineZoneState(frontstageDef, settingsResult.setting.nineZone);
+            const settingResult = await uiStateStorageRef.current.getSetting(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);
+                    const savedWidgets = restoreSavedWidgets(setting.widgets, frontstageDef);
                     let state = addMissingWidgets(frontstageDef, restored);
-                    state = removeHiddenWidgets(state, frontstageDef);
+                    state = hideWidgets(state, frontstageDef);
                     state = processPopoutWidgets(state, frontstageDef);
                     frontstageDef.nineZoneState = state;
+                    frontstageDef.savedWidgetDefs = savedWidgets;
                     return;
                 }
-                frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
             }
+            frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
         }
         fetchFrontstageState(); // eslint-disable-line @typescript-eslint/no-floating-promises
     }, [frontstageDef]);
@@ -925,16 +986,19 @@ export function useSavedFrontstageState(frontstageDef) {
 export function useSaveFrontstageSettings(frontstageDef) {
     const nineZone = useNineZoneState(frontstageDef);
     const uiSettingsStorage = useUiStateStorageHandler();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const saveSetting = React.useCallback(debounce(async (id, version, state) => {
-        const setting = {
-            id,
-            nineZone: packNineZoneState(state),
-            stateVersion,
-            version,
-        };
-        await uiSettingsStorage.saveSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
-    }, 1000), [uiSettingsStorage]);
+    const saveSetting = React.useMemo(() => {
+        return debounce(async (frontstage, state, savedWidgets) => {
+            const id = frontstage.id;
+            const setting = {
+                id,
+                version: frontstage.version,
+                stateVersion,
+                nineZone: packNineZoneState(state),
+                widgets: packSavedWidgets(savedWidgets, frontstage),
+            };
+            await uiSettingsStorage.saveSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
+        }, 1000);
+    }, [uiSettingsStorage]);
     React.useEffect(() => {
         return () => {
             saveSetting.cancel();
@@ -943,7 +1007,8 @@ export function useSaveFrontstageSettings(frontstageDef) {
     React.useEffect(() => {
         if (!nineZone || nineZone.draggedTab)
             return;
-        saveSetting(frontstageDef.id, frontstageDef.version, nineZone);
+        const savedWidgets = frontstageDef.savedWidgetDefs || [];
+        saveSetting(frontstageDef, nineZone, savedWidgets);
     }, [frontstageDef, nineZone, saveSetting]);
 }
 /** @internal */
@@ -1077,7 +1142,7 @@ export function useItemsManager(frontstageDef) {
             return;
         state = addMissingWidgets(def, state);
         state = removeMissingWidgets(def, state);
-        state = removeHiddenWidgets(state, def); // TODO: should only apply to widgets provided by registered provider in onUiProviderRegisteredEvent.
+        state = hideWidgets(state, def); // TODO: should only apply to widgets provided by registered provider in onUiProviderRegisteredEvent.
         def.nineZoneState = state;
     };
     React.useEffect(() => {
@@ -1090,47 +1155,8 @@ export function useItemsManager(frontstageDef) {
         return remove;
     }, [frontstageDef]);
 }
-function tabShownInCurrentWidget(def, state) {
-    for (const [, widget] of Object.entries(state.widgets)) {
-        const foundTab = widget.tabs.find((tabId) => tabId === def.id);
-        // istanbul ignore else
-        if (foundTab)
-            return true;
-    }
-    return false;
-}
 // istanbul ignore next
 function determineNewWidgets(defs, state) {
-    // if tab for widget.id is not found or the label does not match widget label (label is set to "undefined" when widgetDef is not initially available)
-    return (defs || []).filter((def) => !(def.id in state.tabs) || !tabShownInCurrentWidget(def, state));
-}
-/** @internal */
-export async function saveFrontstagePopoutWidgetSizeAndPosition(state, stageId, stageVersion, childWindowId, childWindow) {
-    const location = findWidget(state, childWindowId);
-    // istanbul ignore else
-    if (location) {
-        const adjustmentWidth = ProcessDetector.isElectronAppFrontend ? 16 : 0;
-        const adjustmentHeight = ProcessDetector.isElectronAppFrontend ? 39 : 0;
-        const newState = produce(state, (draft) => {
-            const widget = draft.widgets[childWindowId];
-            const tab = draft.tabs[widget.activeTabId];
-            tab.preferredPopoutWidgetSize = {
-                x: childWindow.screenX,
-                y: childWindow.screenY,
-                width: childWindow.innerWidth + adjustmentWidth,
-                height: childWindow.innerHeight + adjustmentHeight,
-            };
-        });
-        const setting = {
-            id: stageId,
-            nineZone: packNineZoneState(newState),
-            stateVersion,
-            version: stageVersion,
-        };
-        await UiFramework.getUiStateStorage().saveSetting(FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(stageId), setting);
-        return newState;
-    }
-    // istanbul ignore next
-    return state;
+    return (defs || []).filter((def) => !(def.id in state.tabs));
 }
 //# sourceMappingURL=Frontstage.js.map