@itwin/appui-react 3.2.0-dev.5 → 3.2.0-dev.50

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

@@ -14,7 +14,7 @@ import { assert, Logger, ProcessDetector } from "@itwin/core-bentley";
 import { StagePanelLocation, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
 import { Size, UiStateStorageStatus } from "@itwin/core-react";
 import { ToolbarPopupAutoHideContext } from "@itwin/components-react";
-import { addPanelWidget, addTab, addWidgetTabToFloatingPanel, convertAllPopupWidgetContainersToFloating, createNineZoneState, createTabsState, createTabState, createWidgetState, findTab, findWidget, floatingWidgetBringToFront, FloatingWidgets, getUniqueId, isFloatingLocation, isHorizontalPanelSide, NineZone, NineZoneStateReducer, panelSides, removeTab, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
+import { addPanelWidget, addTab, addWidgetTabToFloatingPanel, addWidgetTabToPanelSection, convertAllPopupWidgetContainersToFloating, createNineZoneState, createTabsState, createTabState, createWidgetState, findTab, findWidget, floatingWidgetBringToFront, FloatingWidgets, getUniqueId, getWidgetPanelSectionId, isFloatingLocation, isHorizontalPanelSide, NineZone, NineZoneStateReducer, panelSides, removeTab, toolSettingsTabId, WidgetPanels, } from "@itwin/appui-layout-react";
 import { useActiveFrontstageDef } from "../frontstage/Frontstage";
 import { FrontstageManager } from "../frontstage/FrontstageManager";
 import { StagePanelState } from "../stagepanels/StagePanelDef";
@@ -31,20 +31,24 @@ import { ToolSettingsContent, WidgetPanelsToolSettings } from "./ToolSettings";
 import { useEscapeSetFocusToHome } from "../hooks/useEscapeSetFocusToHome";
 import { useSelector } from "react-redux";
 import { useUiVisibility } from "../hooks/useUiVisibility";
-const panelZoneKeys = ["start", "middle", "end"];
-// istanbul ignore next
-const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
+const panelZoneKeys = ["start", "end"];
+const WidgetInternals = React.memo(function WidgetInternals() {
     const activeModalFrontstageInfo = useActiveModalFrontstageInfo();
     const uiIsVisible = useUiVisibility();
     return (React.createElement(React.Fragment, null,
         React.createElement(ToolbarPopupAutoHideContext.Provider, { value: !uiIsVisible },
             React.createElement(ModalFrontstageComposer, { stageInfo: activeModalFrontstageInfo }),
-            React.createElement(WidgetPanelsToolSettings, null),
             React.createElement(WidgetPanels, { className: "uifw-widgetPanels", centerContent: React.createElement(WidgetPanelsToolbars, null) },
                 React.createElement(WidgetPanelsFrontstageContent, null)),
             React.createElement(WidgetPanelsStatusBar, null),
             React.createElement(FloatingWidgets, null))));
 });
+// istanbul ignore next
+const WidgetPanelsFrontstageComponent = React.memo(function WidgetPanelsFrontstageComponent() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(WidgetPanelsToolSettings, null),
+        React.createElement(WidgetInternals, null)));
+});
 const widgetContent = React.createElement(WidgetContent, null);
 const toolSettingsContent = React.createElement(ToolSettingsContent, null);
 const widgetPanelsFrontstage = React.createElement(WidgetPanelsFrontstageComponent, null);
@@ -177,13 +181,22 @@ export function ActiveFrontstageDefProvider({ frontstageDef }) {
     useFrontstageManager(frontstageDef);
     useItemsManager(frontstageDef);
     const labels = useLabels();
+    const uiIsVisible = useUiVisibility();
     const showWidgetIcon = useSelector((state) => {
         const frameworkState = state[UiFramework.frameworkStateKey];
         return !!frameworkState.configurableUiState.showWidgetIcon;
     });
+    const autoCollapseUnpinnedPanels = useSelector((state) => {
+        const frameworkState = state[UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.autoCollapseUnpinnedPanels;
+    });
+    const animateToolSettings = useSelector((state) => {
+        const frameworkState = state[UiFramework.frameworkStateKey];
+        return !!frameworkState.configurableUiState.animateToolSettings;
+    });
     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, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent }, widgetPanelsFrontstage)));
+        React.createElement(NineZone, { dispatch: dispatch, labels: labels, state: nineZone, tab: tabElement, showWidgetIcon: showWidgetIcon, autoCollapseUnpinnedPanels: autoCollapseUnpinnedPanels, toolSettingsContent: toolSettingsContent, widgetContent: widgetContent, animateDockedToolSettings: animateToolSettings, uiIsVisible: uiIsVisible }, widgetPanelsFrontstage)));
 }
 /** @internal */
 export function useLabels() {
@@ -211,6 +224,7 @@ export function addWidgets(state, widgets, side, widgetId) {
             label,
             iconSpec: widget.iconSpec,
             preferredPanelWidgetSize: widget.preferredPanelSize,
+            preferredFloatingWidgetSize: widget.defaultFloatingSize,
             canPopout: widget.canPopout,
             isFloatingStateWindowResizable: widget.isFloatingStateWindowResizable,
         });
@@ -233,15 +247,16 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
     var _a;
     if (widgetDefs.length === 0)
         return state;
-    // Add new tabs.
-    const tabs = new Array();
+    // 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 : undefined;
+        const preferredFloatingWidgetSize = saveTab ? saveTab.preferredFloatingWidgetSize : widgetDef.defaultFloatingSize;
         const preferredPopoutWidgetSize = saveTab ? saveTab.preferredPopoutWidgetSize : undefined;
-        const userSized = saveTab ? saveTab.userSized : 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;
         state = addTab(state, widgetDef.id, {
             label,
             iconSpec: widgetDef.iconSpec,
@@ -260,29 +275,8 @@ export function appendWidgets(state, widgetDefs, side, preferredWidgetIndex) {
             state = addWidgetTabToFloatingPanel(state, floatingContainerId, widgetDef.id, homePanelInfo, preferredFloatingWidgetSize, preferredPosition, userSized, widgetDef.isFloatingStateWindowResizable);
         }
         else {
-            tabs.push(widgetDef.id);
-        }
-    }
-    if (tabs.length) {
-        const panel = state.panels[side];
-        preferredWidgetIndex = preferredWidgetIndex >= panel.maxWidgetCount ? panel.maxWidgetCount - 1 : preferredWidgetIndex;
-        if (preferredWidgetIndex < panel.widgets.length) {
-            // Append tabs to existing widget.
-            const widgetId = panel.widgets[preferredWidgetIndex];
-            state = produce(state, (draft) => {
-                const widget = draft.widgets[widgetId];
-                for (const tab of tabs) {
-                    widget.tabs.push(tab);
-                }
-            });
-        }
-        else {
-            const newWidgetId = getNextAvailablePanelWidgetId(panel);
-            const widget = createWidgetState(newWidgetId, tabs);
-            state = produce(state, (draft) => {
-                draft.panels[side].widgets.push(widget.id);
-                draft.widgets[widget.id] = castDraft(widget);
-            });
+            const widgetPanelSectionId = getWidgetPanelSectionId(side, preferredWidgetIndex);
+            state = addWidgetTabToPanelSection(state, side, widgetPanelSectionId, widgetDef.id);
         }
     }
     return state;
@@ -306,28 +300,26 @@ function processPopoutWidgets(initialState, frontstageDef) {
  * @internal
  */
 export function addMissingWidgets(frontstageDef, initialState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     let state = initialState;
     state = appendWidgets(state, determineNewWidgets((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs, initialState), "left", 0);
     state = appendWidgets(state, determineNewWidgets((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs, initialState), "left", 0);
     state = appendWidgets(state, determineNewWidgets((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs, initialState), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.middle.widgetDefs, initialState), "left", 1);
-    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs, initialState), "left", 2);
-    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.leftPanel) === null || _f === void 0 ? void 0 : _f.panelZones.end.widgetDefs, initialState), "left", 2);
-    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.centerRight) === null || _g === void 0 ? void 0 : _g.widgetDefs, initialState), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.rightPanel) === null || _h === void 0 ? void 0 : _h.panelZones.start.widgetDefs, initialState), "right", 0);
-    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.bottomRight) === null || _j === void 0 ? void 0 : _j.widgetDefs, initialState), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.middle.widgetDefs, initialState), "right", 1);
-    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.rightPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, initialState), "right", 2);
-    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.rightPanel) === null || _m === void 0 ? void 0 : _m.panelZones.end.widgetDefs, initialState), "right", 2);
-    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, initialState), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.start.widgetDefs, initialState), "top", 0);
-    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.topMostPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, initialState), "top", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.topPanel) === null || _r === void 0 ? void 0 : _r.panelZones.end.widgetDefs, initialState), "top", 1);
-    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, initialState), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.start.widgetDefs, initialState), "bottom", 0);
-    state = appendWidgets(state, determineNewWidgets((_u = frontstageDef.bottomMostPanel) === null || _u === void 0 ? void 0 : _u.panelWidgetDefs, initialState), "bottom", 1); // eslint-disable-line deprecation/deprecation
-    state = appendWidgets(state, determineNewWidgets((_v = frontstageDef.bottomPanel) === null || _v === void 0 ? void 0 : _v.panelZones.end.widgetDefs, initialState), "bottom", 1);
+    state = appendWidgets(state, determineNewWidgets((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelWidgetDefs, initialState), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelZones.end.widgetDefs, initialState), "left", 1);
+    state = appendWidgets(state, determineNewWidgets((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs, initialState), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs, initialState), "right", 0);
+    state = appendWidgets(state, determineNewWidgets((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs, initialState), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelWidgetDefs, initialState), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.end.widgetDefs, initialState), "right", 1);
+    state = appendWidgets(state, determineNewWidgets((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs, initialState), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs, initialState), "top", 0);
+    state = appendWidgets(state, determineNewWidgets((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs, initialState), "top", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs, initialState), "top", 1);
+    state = appendWidgets(state, determineNewWidgets((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs, initialState), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs, initialState), "bottom", 0);
+    state = appendWidgets(state, determineNewWidgets((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs, initialState), "bottom", 1); // eslint-disable-line deprecation/deprecation
+    state = appendWidgets(state, determineNewWidgets((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs, initialState), "bottom", 1);
     return state;
 }
 /** Removes widgets with Hidden defaultState. */
@@ -383,18 +375,12 @@ export function getWidgetId(side, key) {
             if (key === "start") {
                 return "leftStart";
             }
-            else if (key === "middle") {
-                return "leftMiddle";
-            }
             return "leftEnd";
         }
         case "right": {
             if (key === "start") {
                 return "rightStart";
             }
-            else if (key === "middle") {
-                return "rightMiddle";
-            }
             return "rightEnd";
         }
         case "top": {
@@ -411,74 +397,90 @@ export function getWidgetId(side, key) {
     }
 }
 /** @internal */
-function getNextAvailablePanelWidgetId(panel) {
-    const index = panel.widgets.length;
-    return getWidgetId(panel.side, panelZoneKeys[index]);
-}
-function isVerticalPanelSide(side) { return !isHorizontalPanelSide(side); }
-/** @internal */
 export function getPanelZoneWidgets(frontstageDef, panelZone) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     switch (panelZone) {
         case "leftStart": {
-            return [
-                ...((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs) || [],
-                ...((_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs) || [],
-            ];
-        }
-        case "leftMiddle": {
-            return [
-                ...((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs) || [],
-                ...((_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.middle.widgetDefs) || [],
-            ];
+            const outArray = [...((_a = frontstageDef.centerLeft) === null || _a === void 0 ? void 0 : _a.widgetDefs) || []];
+            (_b = frontstageDef.leftPanel) === null || _b === void 0 ? void 0 : _b.panelZones.start.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "leftEnd": {
-            return [
-                ...((_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs) || [],
-                ...((_f = frontstageDef.leftPanel) === null || _f === void 0 ? void 0 : _f.panelZones.end.widgetDefs) || [],
-            ];
+            const outArray = [...((_c = frontstageDef.bottomLeft) === null || _c === void 0 ? void 0 : _c.widgetDefs) || []];
+            (_d = frontstageDef.leftPanel) === null || _d === void 0 ? void 0 : _d.panelZones.end.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            (_e = frontstageDef.leftPanel) === null || _e === void 0 ? void 0 : _e.panelWidgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "rightStart": {
-            return [
-                ...((_g = frontstageDef.centerRight) === null || _g === void 0 ? void 0 : _g.widgetDefs) || [],
-                ...((_h = frontstageDef.rightPanel) === null || _h === void 0 ? void 0 : _h.panelZones.start.widgetDefs) || [],
-            ];
-        }
-        case "rightMiddle": {
-            return [
-                ...((_j = frontstageDef.bottomRight) === null || _j === void 0 ? void 0 : _j.widgetDefs) || [],
-                ...((_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelZones.middle.widgetDefs) || [],
-            ];
+            const outArray = [...((_f = frontstageDef.centerRight) === null || _f === void 0 ? void 0 : _f.widgetDefs) || []];
+            (_g = frontstageDef.rightPanel) === null || _g === void 0 ? void 0 : _g.panelZones.start.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "rightEnd": {
-            return [
-                ...((_l = frontstageDef.rightPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs) || [],
-                ...((_m = frontstageDef.rightPanel) === null || _m === void 0 ? void 0 : _m.panelZones.end.widgetDefs) || [],
-            ];
+            const outArray = [...((_h = frontstageDef.bottomRight) === null || _h === void 0 ? void 0 : _h.widgetDefs) || []];
+            (_j = frontstageDef.rightPanel) === null || _j === void 0 ? void 0 : _j.panelZones.end.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            (_k = frontstageDef.rightPanel) === null || _k === void 0 ? void 0 : _k.panelWidgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "topStart": {
-            return [
-                ...((_o = frontstageDef.topPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs) || [],
-                ...((_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.start.widgetDefs) || [],
-            ];
+            const outArray = [...((_l = frontstageDef.topPanel) === null || _l === void 0 ? void 0 : _l.panelWidgetDefs) || []];
+            (_m = frontstageDef.topPanel) === null || _m === void 0 ? void 0 : _m.panelZones.start.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "topEnd": {
-            return [
-                ...((_q = frontstageDef.topMostPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs) || [],
-                ...((_r = frontstageDef.topPanel) === null || _r === void 0 ? void 0 : _r.panelZones.end.widgetDefs) || [],
-            ];
+            const outArray = [...((_o = frontstageDef.topMostPanel) === null || _o === void 0 ? void 0 : _o.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
+            (_p = frontstageDef.topPanel) === null || _p === void 0 ? void 0 : _p.panelZones.end.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "bottomStart": {
-            return [
-                ...((_s = frontstageDef.bottomPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs) || [],
-                ...((_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.start.widgetDefs) || [],
-            ];
+            const outArray = [...((_q = frontstageDef.bottomPanel) === null || _q === void 0 ? void 0 : _q.panelWidgetDefs) || []];
+            (_r = frontstageDef.bottomPanel) === null || _r === void 0 ? void 0 : _r.panelZones.start.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
         case "bottomEnd": {
-            return [
-                ...((_u = frontstageDef.bottomMostPanel) === null || _u === void 0 ? void 0 : _u.panelWidgetDefs) || [],
-                ...((_v = frontstageDef.bottomPanel) === null || _v === void 0 ? void 0 : _v.panelZones.end.widgetDefs) || [],
-            ];
+            const outArray = [...((_s = frontstageDef.bottomMostPanel) === null || _s === void 0 ? void 0 : _s.panelWidgetDefs) || []]; // eslint-disable-line deprecation/deprecation
+            (_t = frontstageDef.bottomPanel) === null || _t === void 0 ? void 0 : _t.panelZones.end.widgetDefs.forEach((widgetDef) => {
+                // istanbul ignore else
+                if (undefined === outArray.find((widget) => widget.id === widgetDef.id))
+                    outArray.push(widgetDef);
+            });
+            return outArray;
         }
     }
 }
@@ -487,11 +489,6 @@ export function addPanelWidgets(state, frontstageDef, side) {
     const start = getWidgetId(side, "start");
     const startWidgets = getPanelZoneWidgets(frontstageDef, start);
     state = addWidgets(state, startWidgets, side, start);
-    if (isVerticalPanelSide(side)) {
-        const middle = getWidgetId(side, "middle");
-        const middleWidgets = getPanelZoneWidgets(frontstageDef, middle);
-        state = addWidgets(state, middleWidgets, side, middle);
-    }
     const end = getWidgetId(side, "end");
     const endWidgets = getPanelZoneWidgets(frontstageDef, end);
     state = addWidgets(state, endWidgets, side, end);
@@ -529,7 +526,7 @@ function getPanelMaxSize(maxSizeSpec, panel, nineZoneSize) {
     const size = isHorizontalPanelSide(panel) ? nineZoneSize.height : nineZoneSize.width;
     return maxSizeSpec.percentage / 100 * size;
 }
-const stateVersion = 11; // this needs to be bumped when NineZoneState is changed (to recreate layout).
+const stateVersion = 12; // this needs to be bumped when NineZoneState is changed (to recreate layout).
 /** @internal */
 export function initializeNineZoneState(frontstageDef) {
     let nineZone = defaultNineZone;
@@ -613,6 +610,31 @@ export function restoreNineZoneState(frontstageDef, saved) {
                 isFloatingStateWindowResizable: widgetDef === null || widgetDef === void 0 ? void 0 : widgetDef.isFloatingStateWindowResizable,
             };
         }
+        // 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 (FrontstageManager.nineZoneSize && (0 !== FrontstageManager.nineZoneSize.height || 0 !== FrontstageManager.nineZoneSize.width)) {
@@ -661,6 +683,7 @@ function addRemovedTab(nineZone, widgetDef) {
     const newTab = createTabState(widgetDef.id, {
         label: getWidgetLabel(widgetDef.label),
         canPopout: widgetDef.canPopout,
+        iconSpec: widgetDef.iconSpec,
         preferredPanelWidgetSize: widgetDef.preferredPanelSize,
         isFloatingStateWindowResizable: widgetDef.isFloatingStateWindowResizable,
     });
@@ -721,20 +744,11 @@ export const setWidgetState = produce((nineZone, widgetDef, state) => {
             location = findTab(nineZone, id);
             assert(!!location);
         }
-        const widget = nineZone.widgets[location.widgetId];
-        if (id !== widget.activeTabId)
-            return;
-        const minimized = widget.minimized;
-        widget.minimized = true;
-        if ("side" in location) {
-            const panel = nineZone.panels[location.side];
-            const maximized = panel.widgets.find((wId) => {
-                const w = nineZone.widgets[wId];
-                return !w.minimized;
-            });
-            if (maximized === undefined)
-                widget.minimized = minimized;
-            return;
+        if (isFloatingLocation(location)) {
+            const widget = nineZone.widgets[location.widgetId];
+            if (id !== widget.activeTabId)
+                return;
+            widget.minimized = true;
         }
     }
     else if (state === WidgetState.Hidden) {