@itwin/appui-react 3.4.0-dev.9 → 3.5.0-dev.12

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

@@ -5,7 +5,7 @@
 *--------------------------------------------------------------------------------------------*/
 /* eslint-disable deprecation/deprecation */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveFrontstagePopoutWidgetSizeAndPosition = exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelZoneWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.useUpdateNineZoneSize = exports.useNineZoneState = void 0;
+exports.useItemsManager = exports.useFrontstageManager = exports.getFrontstageStateSettingName = exports.FRONTSTAGE_SETTINGS_NAMESPACE = exports.useSaveFrontstageSettings = exports.useSavedFrontstageState = exports.setWidgetLabel = exports.expandWidget = exports.showWidget = exports.setWidgetState = exports.isPanelCollapsed = exports.packNineZoneState = exports.restoreNineZoneState = exports.initializeNineZoneState = exports.initializePanel = exports.isFrontstageStateSettingResult = exports.addPanelWidgets = exports.getPanelZoneWidgets = exports.getWidgetId = exports.removeMissingWidgets = exports.addMissingWidgets = exports.appendWidgets = exports.addWidgets = exports.useLabels = exports.ActiveFrontstageDefProvider = exports.WidgetPanelsFrontstage = exports.useNineZoneDispatch = exports.useUpdateNineZoneSize = exports.useNineZoneState = void 0;
 /** @packageDocumentation
  * @module Frontstage
  */
@@ -35,6 +35,7 @@ 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 panelZoneKeys = ["start", "end"];
 const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = (0, ModalFrontstageComposer_1.useActiveModalFrontstageInfo)();
@@ -177,6 +178,7 @@ exports.WidgetPanelsFrontstage = React.memo(function WidgetPanelsFrontstage() {
 });
 const defaultNineZone = (0, appui_layout_react_1.createNineZoneState)();
 const tabElement = React.createElement(Tab_1.WidgetPanelsTab, null);
+const floatingWidgetElement = React.createElement(FloatingWidget_1.FloatingWidget, null);
 /** @internal */
 function ActiveFrontstageDefProvider({ frontstageDef }) {
     let nineZone = useNineZoneState(frontstageDef);
@@ -207,7 +209,7 @@ function ActiveFrontstageDefProvider({ frontstageDef }) {
     useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel);
     const handleKeyDown = (0, useEscapeSetFocusToHome_1.useEscapeSetFocusToHome)();
     return (React.createElement("div", { className: "uifw-widgetPanels-frontstage", onKeyDown: handleKeyDown, role: "presentation" },
-        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
+        React.createElement(appui_layout_react_1.NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, floatingWidget: floatingWidgetElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 exports.ActiveFrontstageDefProvider = ActiveFrontstageDefProvider;
 /** @internal */
@@ -241,6 +243,7 @@ function addWidgets(state, widgets, side, widgetId) {
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
             hideWithUiWhenFloating: !!widget.hideWithUiWhenFloating,
+            allowedPanelTargets: widget.allowedPanelTargets,
         });
         tabs.push(widget.id);
     }
@@ -268,7 +271,6 @@ 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;
@@ -278,21 +280,51 @@ 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 === appui_abstract_1.WidgetState.Floating) {
             const floatingContainerId = (_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : (0, appui_layout_react_1.getUniqueId)();
             const widgetContainerId = getWidgetId(side, panelZoneKeys[preferredWidgetIndex]);
-            const homePanelInfo = { side, widgetId: widgetContainerId, widgetIndex: 0 };
+            const home = { side, widgetId: widgetContainerId, widgetIndex: 0 };
             const preferredPosition = widgetDef.defaultFloatingPosition;
-            state = (0, appui_layout_react_1.addWidgetTabToFloatingPanel)(state, floatingContainerId, widgetDef.id, homePanelInfo, preferredFloatingWidgetSize, preferredPosition, userSized, widgetDef.isFloatingStateWindowResizable);
+            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 widgetPanelSectionId = (0, appui_layout_react_1.getWidgetPanelSectionId)(side, preferredWidgetIndex);
-            state = (0, appui_layout_react_1.addWidgetTabToPanelSection)(state, side, widgetPanelSectionId, widgetDef.id);
+            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;
@@ -340,17 +372,15 @@ function addMissingWidgets(frontstageDef, initialState) {
     return state;
 }
 exports.addMissingWidgets = addMissingWidgets;
-/** 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 === appui_abstract_1.WidgetState.Hidden) {
-            state = (0, immer_1.default)(state, (draft) => {
-                hideWidget(draft, widgetDef);
-            });
+            state = hideWidget(state, widgetDef);
         }
     }
     return state;
@@ -359,16 +389,15 @@ function removeHiddenWidgets(state, frontstageDef) {
  * @internal
  */
 function removeMissingWidgets(frontstageDef, initialState) {
-    const state = (0, immer_1.default)(initialState, (draft) => {
-        for (const [, tab] of Object.entries(draft.tabs)) {
-            if (tab.id === appui_layout_react_1.toolSettingsTabId)
-                continue;
-            const widgetDef = frontstageDef.findWidgetDef(tab.id);
-            if (widgetDef)
-                continue;
-            (0, appui_layout_react_1.removeTab)(draft, tab.id);
-        }
-    });
+    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;
@@ -524,23 +553,23 @@ function isFrontstageStateSettingResult(settingsResult) {
 }
 exports.isFrontstageStateSettingResult = isFrontstageStateSettingResult;
 /** @internal */
-function initializePanel(nineZone, frontstageDef, panelSide) {
-    nineZone = addPanelWidgets(nineZone, frontstageDef, panelSide);
+function initializePanel(state, frontstageDef, panelSide) {
+    state = addPanelWidgets(state, frontstageDef, panelSide);
     const location = toStagePanelLocation(panelSide);
     const panelDef = frontstageDef.getStagePanelDef(location);
-    nineZone = (0, immer_1.default)(nineZone, (draft) => {
+    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, 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;
 }
 exports.initializePanel = initializePanel;
 function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
@@ -550,7 +579,7 @@ function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
     const size = (0, appui_layout_react_1.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 */
 function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -572,6 +601,7 @@ 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;
             }
@@ -600,7 +630,7 @@ function initializeNineZoneState(frontstageDef) {
         }
     });
     nineZone = addMissingWidgets(frontstageDef, nineZone);
-    nineZone = removeHiddenWidgets(nineZone, frontstageDef);
+    nineZone = hideWidgets(nineZone, frontstageDef);
     nineZone = processPopoutWidgets(nineZone, frontstageDef);
     return nineZone;
 }
@@ -613,29 +643,33 @@ exports.initializeNineZoneState = initializeNineZoneState;
 function restoreNineZoneState(frontstageDef, saved) {
     let restored = {
         ...saved,
-        tabs: (0, appui_layout_react_1.createTabsState)(),
+        tabs: defaultNineZone.tabs,
     };
-    restored = (0, immer_1.default)(restored, (draft) => {
-        var _a;
-        for (const [, tab] of Object.entries(saved.tabs)) {
-            const widgetDef = frontstageDef.findWidgetDef(tab.id);
-            if (!widgetDef) {
-                core_bentley_1.Logger.logInfo(UiFramework_1.UiFramework.loggerCategory(restoreNineZoneState), "WidgetDef is not found for saved tab.", () => ({
-                    frontstageId: frontstageDef.id,
-                    tabId: tab.id,
-                }));
-                (0, appui_layout_react_1.removeTab)(draft, tab.id);
-                // let fall through so we preserve preferred sizes of widgets load via UiItemsProvider
-            }
+    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((_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 = (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
@@ -675,20 +709,6 @@ function restoreNineZoneState(frontstageDef, saved) {
     return restored;
 }
 exports.restoreNineZoneState = restoreNineZoneState;
-/**
- * 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.
@@ -703,33 +723,62 @@ function packNineZoneState(state) {
         for (const [, tab] of Object.entries(state.tabs)) {
             if (tab.id === appui_layout_react_1.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 = (0, immer_1.default)(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;
 }
 exports.packNineZoneState = packNineZoneState;
+// 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 = (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 = (0, immer_1.default)(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 };
+        }
+        if (savedWidget.popoutBounds) {
+            widgetDef.popoutBounds = core_react_1.Rectangle.create(savedWidget.popoutBounds);
+        }
+        savedWidgets = (0, immer_1.default)(savedWidgets, (draft) => {
+            draft.splice(i, 1);
+        });
+    }
+    return savedWidgets;
+}
 /** @internal */
 function isPanelCollapsed(zoneStates, panelStates) {
     const openZone = zoneStates.find((zoneState) => zoneState === ZoneDef_1.ZoneState.Open);
@@ -737,121 +786,128 @@ function isPanelCollapsed(zoneStates, panelStates) {
     return !openZone && !openPanel;
 }
 exports.isPanelCollapsed = isPanelCollapsed;
-function addRemovedTab(nineZone, widgetDef) {
-    var _a, _b;
-    const newTab = (0, appui_layout_react_1.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 (0, appui_layout_react_1.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;
-            (0, appui_layout_react_1.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 };
-            (0, appui_layout_react_1.addWidgetTabToDraftFloatingPanel)(nineZone, (_b = widgetDef.floatingContainerId) !== null && _b !== void 0 ? _b : widgetDef.id, widgetDef.id, home, newTab);
-        }
+    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(),
+        });
     }
-    else {
-        const newTabPanel = nineZone.panels[widgetDef.tabLocation.side];
-        if (newTabPanel.maxWidgetCount === newTabPanel.widgets.length) {
-            // Add to existing panel widget.
-            const widgetIndex = Math.min(newTabPanel.maxWidgetCount - 1, widgetDef.tabLocation.widgetIndex);
-            const newTabWidgetId = newTabPanel.widgets[widgetIndex];
-            const newTabWidget = nineZone.widgets[newTabWidgetId];
-            newTabWidget.tabs.splice(widgetDef.tabLocation.tabIndex, 0, newTab.id);
-        }
-        else {
-            // Create a new panel widget.
-            const newWidget = (0, appui_layout_react_1.createWidgetState)((0, appui_layout_react_1.getUniqueId)(), [newTab.id]);
-            nineZone.widgets[newWidget.id] = (0, immer_1.castDraft)(newWidget);
-            newTabPanel.widgets.splice(widgetDef.tabLocation.widgetIndex, 0, newWidget.id);
-        }
+    // 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 */
-exports.setWidgetState = (0, immer_1.default)((nineZone, widgetDef, state) => {
+function setWidgetState(state, widgetDef, widgetState) {
     var _a, _b;
-    if (state === appui_abstract_1.WidgetState.Open) {
+    if (widgetState === appui_abstract_1.WidgetState.Hidden) {
+        return hideWidget(state, widgetDef);
+    }
+    else if (widgetState === appui_abstract_1.WidgetState.Open) {
         const id = widgetDef.id;
-        let location = (0, appui_layout_react_1.findTab)(nineZone, id);
+        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
-            addRemovedTab(nineZone, widgetDef);
-            location = (0, appui_layout_react_1.findTab)(nineZone, id);
-            (0, core_bentley_1.assert)(!!location);
+            state = addHiddenWidget(state, widgetDef);
+            location = (0, appui_layout_react_1.getTabLocation)(state, id);
         }
-        if (!!widgetDef.tabLocation.floating) {
-            nineZone.floatingWidgets.byId[(_a = widgetDef.floatingContainerId) !== null && _a !== void 0 ? _a : widgetDef.id].hidden = false;
-        }
-        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 (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 (state === appui_abstract_1.WidgetState.Closed) {
+    else if (widgetState === appui_abstract_1.WidgetState.Closed) {
         const id = widgetDef.id;
-        let location = (0, appui_layout_react_1.findTab)(nineZone, id);
+        let location = (0, appui_layout_react_1.getTabLocation)(state, id);
         if (!location) {
-            addRemovedTab(nineZone, widgetDef);
-            location = (0, appui_layout_react_1.findTab)(nineZone, id);
-            (0, core_bentley_1.assert)(!!location);
-        }
-        if ((0, appui_layout_react_1.isFloatingLocation)(location)) {
-            const widget = nineZone.widgets[location.widgetId];
-            if (id !== widget.activeTabId)
-                return;
-            widget.minimized = true;
+            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 (state === appui_abstract_1.WidgetState.Hidden) {
-        hideWidget(nineZone, widgetDef);
+    else if (widgetState === appui_abstract_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.findTab)(state, widgetDef.id);
+    const location = (0, appui_layout_react_1.getTabLocation)(state, widgetDef.id);
     if (!location)
-        return;
-    if ((0, appui_layout_react_1.isFloatingLocation)(location)) {
-        const widget = state.floatingWidgets.byId[location.widgetId];
+        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: 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 (!(0, appui_layout_react_1.isPopoutLocation)(location)) {
+    else if (!(0, appui_layout_react_1.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 = (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,
@@ -860,50 +916,56 @@ function hideWidget(state, widgetDef) {
             widgetIndex,
         };
     }
-    (0, appui_layout_react_1.removeTab)(state, widgetDef.id);
+    return (0, appui_layout_react_1.removeTabFromWidget)(state, widgetDef.id);
 }
 /** @internal */
-exports.showWidget = (0, immer_1.default)((nineZone, id) => {
-    const location = (0, appui_layout_react_1.findTab)(nineZone, id);
+function showWidget(state, id) {
+    const location = (0, appui_layout_react_1.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 = (0, immer_1.default)(state, (draft) => {
+        const widget = draft.widgets[location.widgetId];
         widget.activeTabId = id;
-        return;
+        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);
     }
-    widget.activeTabId = id;
-    widget.minimized = false;
-    (0, appui_layout_react_1.isFloatingLocation)(location) && (0, appui_layout_react_1.floatingWidgetBringToFront)(nineZone, location.floatingWidgetId);
-});
+    return state;
+}
+exports.showWidget = showWidget;
 /** @internal */
-exports.expandWidget = (0, immer_1.default)((nineZone, id) => {
-    const location = (0, appui_layout_react_1.findTab)(nineZone, id);
+function expandWidget(state, id) {
+    const location = (0, appui_layout_react_1.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 (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;
-        return;
-    }
-    widget.minimized = false;
-    return;
-});
+    });
+}
+exports.expandWidget = expandWidget;
 /** @internal */
-exports.setWidgetLabel = (0, immer_1.default)((nineZone, id, label) => {
-    if (!(id in nineZone.tabs))
-        return;
-    const tab = nineZone.tabs[id];
-    tab.label = label;
-});
+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)();
@@ -924,20 +986,23 @@ function useSavedFrontstageState(frontstageDef) {
             }
             const id = frontstageDef.id;
             const version = frontstageDef.version;
-            const settingsResult = await uiStateStorageRef.current.getSetting(exports.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(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);
+                    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]);
@@ -947,16 +1012,19 @@ exports.useSavedFrontstageState = useSavedFrontstageState;
 function useSaveFrontstageSettings(frontstageDef) {
     const nineZone = useNineZoneState(frontstageDef);
     const uiSettingsStorage = (0, useUiStateStorage_1.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(exports.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(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(id), setting);
+        }, 1000);
+    }, [uiSettingsStorage]);
     React.useEffect(() => {
         return () => {
             saveSetting.cancel();
@@ -965,7 +1033,8 @@ 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]);
 }
 exports.useSaveFrontstageSettings = useSaveFrontstageSettings;
@@ -1004,7 +1073,7 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef, widgetState }) => {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            frontstageDef.nineZoneState = (0, exports.setWidgetState)(frontstageDef.nineZoneState, widgetDef, widgetState);
+            frontstageDef.nineZoneState = setWidgetState(frontstageDef.nineZoneState, widgetDef, widgetState);
         });
         FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.addListener(listener);
         return () => {
@@ -1014,7 +1083,7 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef }) => {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            frontstageDef.nineZoneState = (0, exports.showWidget)(frontstageDef.nineZoneState, widgetDef.id);
+            frontstageDef.nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
         });
         FrontstageManager_1.FrontstageManager.onWidgetShowEvent.addListener(listener);
         return () => {
@@ -1024,8 +1093,8 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
     React.useEffect(() => {
         const listener = createListener(frontstageDef, ({ widgetDef }) => {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
-            let nineZoneState = (0, exports.showWidget)(frontstageDef.nineZoneState, widgetDef.id);
-            nineZoneState = (0, exports.expandWidget)(nineZoneState, widgetDef.id);
+            let nineZoneState = showWidget(frontstageDef.nineZoneState, widgetDef.id);
+            nineZoneState = expandWidget(nineZoneState, widgetDef.id);
             frontstageDef.nineZoneState = nineZoneState;
         });
         FrontstageManager_1.FrontstageManager.onWidgetExpandEvent.addListener(listener);
@@ -1054,7 +1123,7 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
         const listener = createListener(frontstageDef, ({ widgetDef }) => {
             (0, core_bentley_1.assert)(!!frontstageDef.nineZoneState);
             const label = widgetDef.label;
-            frontstageDef.nineZoneState = (0, exports.setWidgetLabel)(frontstageDef.nineZoneState, widgetDef.id, label);
+            frontstageDef.nineZoneState = setWidgetLabel(frontstageDef.nineZoneState, widgetDef.id, label);
         });
         FrontstageManager_1.FrontstageManager.onWidgetLabelChangedEvent.addListener(listener);
         return () => {
@@ -1069,7 +1138,7 @@ function useFrontstageManager(frontstageDef, useToolAsToolSettingsLabel) {
             (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 = (0, exports.setWidgetLabel)(frontstageDef.nineZoneState, appui_layout_react_1.toolSettingsTabId, label);
+            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();
@@ -1102,7 +1171,7 @@ 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(() => {
@@ -1116,48 +1185,8 @@ function useItemsManager(frontstageDef) {
     }, [frontstageDef]);
 }
 exports.useItemsManager = useItemsManager;
-function tabShownInCurrentWidget(def, state) {
-    for (const [, widget] of Object.entries(state.widgets)) {
-        const foundTab = widget.tabs.find((tabId) => tabId === def.id);
-        // istanbul ignore else
-        if (foundTab)
-            return true;
-    }
-    return false;
-}
 // istanbul ignore next
 function determineNewWidgets(defs, state) {
-    // if tab for widget.id is not found or the label does not match widget label (label is set to "undefined" when widgetDef is not initially available)
-    return (defs || []).filter((def) => !(def.id in state.tabs) || !tabShownInCurrentWidget(def, state));
-}
-/** @internal */
-async function saveFrontstagePopoutWidgetSizeAndPosition(state, stageId, stageVersion, childWindowId, childWindow) {
-    const location = (0, appui_layout_react_1.findWidget)(state, childWindowId);
-    // istanbul ignore else
-    if (location) {
-        const adjustmentWidth = core_bentley_1.ProcessDetector.isElectronAppFrontend ? 16 : 0;
-        const adjustmentHeight = core_bentley_1.ProcessDetector.isElectronAppFrontend ? 39 : 0;
-        const newState = (0, immer_1.default)(state, (draft) => {
-            const widget = draft.widgets[childWindowId];
-            const tab = draft.tabs[widget.activeTabId];
-            tab.preferredPopoutWidgetSize = {
-                x: childWindow.screenX,
-                y: childWindow.screenY,
-                width: childWindow.innerWidth + adjustmentWidth,
-                height: childWindow.innerHeight + adjustmentHeight,
-            };
-        });
-        const setting = {
-            id: stageId,
-            nineZone: packNineZoneState(newState),
-            stateVersion,
-            version: stageVersion,
-        };
-        await UiFramework_1.UiFramework.getUiStateStorage().saveSetting(exports.FRONTSTAGE_SETTINGS_NAMESPACE, getFrontstageStateSettingName(stageId), setting);
-        return newState;
-    }
-    // istanbul ignore next
-    return state;
+    return (defs || []).filter((def) => !(def.id in state.tabs));
 }
-exports.saveFrontstagePopoutWidgetSizeAndPosition = saveFrontstagePopoutWidgetSizeAndPosition;
 //# sourceMappingURL=Frontstage.js.map