@itwin/appui-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/esm/appui-react/frontstage/FrontstageDef.js

@@ -2,39 +2,34 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Frontstage
  */
 // cSpell:ignore popout
 import * as React from "react";
 import { IModelApp } from "@itwin/core-frontend";
-import { StagePanelLocation, StageUsage, UiError, WidgetState } from "@itwin/appui-abstract";
+import { UiError } from "@itwin/appui-abstract";
 import { Rectangle } from "@itwin/core-react";
 import { dockWidgetContainer, floatWidget, getTabLocation, getWidgetLocation, isFloatingTabLocation, isPanelTabLocation, isPopoutTabLocation, isPopoutWidgetLocation, panelSides, popoutWidgetToChildWindow, } from "@itwin/appui-layout-react";
 import { ContentGroupProvider } from "../content/ContentGroup";
-import { ContentLayoutManager } from "../content/ContentLayoutManager";
-import { ContentViewManager } from "../content/ContentViewManager";
-import { StagePanelState, toPanelSide } from "../stagepanels/StagePanelDef";
+import { StagePanelDef, StagePanelState, toPanelSide } from "../stagepanels/StagePanelDef";
 import { UiFramework } from "../UiFramework";
-import { Zone, ZoneLocation } from "../zones/Zone";
-import { Frontstage } from "./Frontstage";
-import { FrontstageManager } from "./FrontstageManager";
+import { WidgetDef, WidgetType } from "../widgets/WidgetDef";
 import { TimeTracker } from "../configurableui/TimeTracker";
 import { PopoutWidget } from "../childwindow/PopoutWidget";
 import { FrameworkStateReducer } from "../widget-panels/Frontstage";
 import { assert, BentleyStatus, ProcessDetector } from "@itwin/core-bentley";
-import { ContentDialogManager } from "../dialog/ContentDialogManager";
-import { Widget } from "../widgets/Widget";
-import { StagePanel } from "../stagepanels/StagePanel";
+import { StageUsage } from "./StageUsage";
+import { StagePanelLocation } from "../stagepanels/StagePanelLocation";
+import { WidgetState } from "../widgets/WidgetState";
+import { InternalFrontstageManager } from "./InternalFrontstageManager";
+import { InternalContentDialogManager } from "../dialog/InternalContentDialogManager";
 /** FrontstageDef class provides an API for a Frontstage.
  * @public
  */
 export class FrontstageDef {
     constructor() {
         this._id = "";
-        this._defaultContentId = "";
-        this._isInFooterMode = true;
         this._isStageClosing = false;
         this._isReady = false;
         this._isApplicationClosing = false;
@@ -42,61 +37,21 @@ export class FrontstageDef {
         this._timeTracker = new TimeTracker();
     }
     get id() { return this._id; }
-    /** @deprecated in 3.6. */
-    get defaultTool() { return this._defaultTool; }
-    /** @deprecated in 3.6. */
-    get defaultContentId() { return this._defaultContentId; }
-    get isInFooterMode() { return this._isInFooterMode; }
-    /** @deprecated in 3.6. */
-    get applicationData() { return this._applicationData; }
     get usage() { return this._usage !== undefined ? this._usage : StageUsage.General; }
     get version() { return this._version; }
     get contentGroupProvider() { return this._contentGroupProvider; }
     get floatingContentControls() { return this._floatingContentControls; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.contentManipulation]] instead. */
-    get topLeft() { return this._topLeft; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.toolSettings]] instead. */
-    get topCenter() { return this._topCenter; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.viewNavigation]] instead. */
-    get topRight() { return this._topRight; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.leftPanel]] instead. */
-    get centerLeft() { return this._centerLeft; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.rightPanel]] instead. */
-    get centerRight() { return this._centerRight; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.leftPanel]] instead. */
-    get bottomLeft() { return this._bottomLeft; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.statusBar]] instead. */
-    get bottomCenter() { return this._bottomCenter; }
-    /** @deprecated in 3.6. Use [[FrontstageDef.rightPanel]] instead. */
-    get bottomRight() { return this._bottomRight; }
-    /** @beta */
-    get toolSettings() { var _a; return (_a = this.topCenter) === null || _a === void 0 ? void 0 : _a.getSingleWidgetDef(); }
-    /** @beta */
-    get statusBar() { var _a; return (_a = this.bottomCenter) === null || _a === void 0 ? void 0 : _a.getSingleWidgetDef(); }
-    /** @beta */
-    get contentManipulation() { var _a; return (_a = this.topLeft) === null || _a === void 0 ? void 0 : _a.getSingleWidgetDef(); }
-    /** @beta */
-    get viewNavigation() { var _a; return (_a = this.topRight) === null || _a === void 0 ? void 0 : _a.getSingleWidgetDef(); }
-    /** @beta */
+    get toolSettings() { return this._toolSettings; }
+    get statusBar() { return this._statusBar; }
+    get contentManipulation() { return this._contentManipulation; }
+    get viewNavigation() { return this._viewNavigation; }
     get topPanel() { return this._topPanel; }
-    /** @beta
-     * @deprecated in 3.0. Only topPanel is supported in UI 2.0 */
-    get topMostPanel() { return this._topMostPanel; }
-    /** @beta */
     get leftPanel() { return this._leftPanel; }
-    /** @beta */
     get rightPanel() { return this._rightPanel; }
-    /** @beta */
     get bottomPanel() { return this._bottomPanel; }
-    /** @beta
-     * @deprecated in 3.0. Only bottomPanel is supported in UI 2.0  */
-    get bottomMostPanel() { return this._bottomMostPanel; }
     get contentLayoutDef() { return this._contentLayoutDef; }
     get contentGroup() { return this._contentGroup; }
     get frontstageProvider() { return this._frontstageProvider; }
-    /** @internal */
-    get nineZone() { return this._nineZone; } // istanbul ignore next
-    set nineZone(props) { this._nineZone = props; }
     toStagePanelLocation(side) {
         switch (side) {
             case "bottom":
@@ -166,14 +121,14 @@ export class FrontstageDef {
                 newWidgetStateMap.forEach((stateValue, widgetDef) => {
                     const originalState = originalWidgetStateMap.get(widgetDef);
                     if (originalState !== stateValue) {
-                        FrontstageManager.onWidgetStateChangedEvent.emit({ widgetDef, widgetState: stateValue });
+                        UiFramework.frontstages.onWidgetStateChangedEvent.emit({ widgetDef, widgetState: stateValue });
                         widgetDef.onWidgetStateChanged();
                     }
                 });
                 newPanelStateMap.forEach((stateValue, panelDef) => {
                     const originalState = originalPanelStateMap.get(panelDef);
                     if (originalState !== stateValue) {
-                        FrontstageManager.onPanelStateChangedEvent.emit({
+                        UiFramework.frontstages.onPanelStateChangedEvent.emit({
                             panelDef,
                             panelState: stateValue,
                         });
@@ -190,7 +145,7 @@ export class FrontstageDef {
     set nineZoneState(state) {
         if (this._nineZoneState === state)
             return;
-        if ("1" === UiFramework.uiVersion || !this._nineZoneState) {
+        if (!this._nineZoneState) {
             this._nineZoneState = state;
         }
         else {
@@ -198,7 +153,7 @@ export class FrontstageDef {
         }
         // istanbul ignore next - don't trigger any side effects until stage "isReady"
         if (!(this._isStageClosing || this._isApplicationClosing) || this.isReady) {
-            FrontstageManager.onFrontstageNineZoneStateChangedEvent.emit({
+            InternalFrontstageManager.onFrontstageNineZoneStateChangedEvent.emit({
                 frontstageDef: this,
                 state,
             });
@@ -215,14 +170,8 @@ export class FrontstageDef {
     static async create(provider) {
         const def = new FrontstageDef();
         def._frontstageProvider = provider;
-        if (provider.frontstageConfig) {
-            const config = provider.frontstageConfig();
-            const props = toFrontstageProps(config);
-            await def.initializeFromProps(props);
-        }
-        else {
-            await def.initializeFromProps(provider.frontstage.props);
-        }
+        const config = provider.frontstageConfig();
+        await def.initializeFromConfig(config);
         return def;
     }
     /** Handles when the Frontstage becomes activated */
@@ -231,20 +180,14 @@ export class FrontstageDef {
     async onActivated() {
         this.updateWidgetDefs();
         const provider = this._contentGroupProvider;
-        if (provider && this._initialProps) {
-            if (provider.contentGroup) {
-                const config = toFrontstageConfig(this._initialProps);
-                this._contentGroup = await provider.contentGroup(config);
-            }
-            else {
-                this._contentGroup = await provider.provideContentGroup(this._initialProps);
-            }
+        if (provider && this._initialConfig) {
+            this._contentGroup = await provider.contentGroup(this._initialConfig);
         }
         // istanbul ignore next
         if (!this._contentGroup)
             throw new UiError(UiFramework.loggerCategory(this), `onActivated: Content Group not defined`);
-        this._contentLayoutDef = ContentLayoutManager.getLayoutForGroup(this._contentGroup);
-        FrontstageManager.onContentLayoutActivatedEvent.emit({ contentLayout: this._contentLayoutDef, contentGroup: this._contentGroup });
+        this._contentLayoutDef = UiFramework.content.layouts.getForGroup(this._contentGroup);
+        UiFramework.frontstages.onContentLayoutActivatedEvent.emit({ contentLayout: this._contentLayoutDef, contentGroup: this._contentGroup });
         this._timeTracker.startTiming();
         await this._onActivated();
     }
@@ -266,9 +209,9 @@ export class FrontstageDef {
             await this.contentGroupProvider.onFrontstageDeactivated();
         this._timeTracker.stopTiming();
         this._isStageClosing = true; // this keeps widgets in child windows from automatically re-docking
-        UiFramework.childWindowManager.closeAllChildWindows();
+        UiFramework.childWindows.closeAll();
         if (this._floatingContentControls) {
-            ContentDialogManager.closeAll();
+            InternalContentDialogManager.closeAll();
             this._floatingContentControls = undefined;
         }
         await this._onDeactivated();
@@ -314,22 +257,6 @@ export class FrontstageDef {
             this.contentGroup.onFrontstageReady();
         this._onFrontstageReady();
     }
-    /** Starts the default tool for the Frontstage.
-     * @deprecated in 3.6.
-     */
-    startDefaultTool() {
-        // Start the default tool
-        // istanbul ignore next
-        if (IModelApp.toolAdmin && IModelApp.viewManager) {
-            if (this.defaultTool) {
-                IModelApp.toolAdmin.defaultToolId = this.defaultTool.toolId;
-                this.defaultTool.execute();
-            }
-            else {
-                IModelApp.toolAdmin.startDefaultTool(); // eslint-disable-line @typescript-eslint/no-floating-promises
-            }
-        }
-    }
     /** Sets the Content Layout and Content Group */
     setContentLayoutAndGroup(contentLayoutDef, contentGroup) {
         this._contentLayoutDef = contentLayoutDef;
@@ -339,15 +266,12 @@ export class FrontstageDef {
     async setActiveContent() {
         let contentControl;
         let activated = false;
-        if (this.contentGroup && this.defaultContentId) {
-            contentControl = this.contentGroup.getContentControlById(this.defaultContentId);
-        }
         // istanbul ignore else
         if (!contentControl && this.contentControls.length >= 0) {
             contentControl = this.contentControls[0];
         }
         if (contentControl) {
-            ContentViewManager.setActiveContent(contentControl.reactNode, true);
+            UiFramework.content.setActive(contentControl.reactNode, true);
             if (contentControl.viewport) {
                 const status = await IModelApp.viewManager.setSelectedView(contentControl.viewport);
                 activated = status === BentleyStatus.SUCCESS;
@@ -360,69 +284,19 @@ export class FrontstageDef {
         if (oldContent)
             oldContent.onDeactivated();
         newContent.onActivated();
-        FrontstageManager.onContentControlActivatedEvent.emit({ activeContentControl: newContent, oldContentControl: oldContent });
+        UiFramework.frontstages.onContentControlActivatedEvent.emit({ activeContentControl: newContent, oldContentControl: oldContent });
     }
     /** Sets the active view content control based on the selected viewport. */
     setActiveViewFromViewport(viewport) {
         const contentControl = this.contentControls.find((control) => control.viewport === viewport);
         // istanbul ignore else
         if (contentControl) {
-            ContentViewManager.setActiveContent(contentControl.reactNode, true);
+            UiFramework.content.setActive(contentControl.reactNode, true);
             return true;
         }
         // istanbul ignore next
         return false;
     }
-    /** Gets a [[ZoneDef]] based on a given zone id.
-     * @deprecated in 3.6. UI1.0 is deprecated.
-     */
-    getZoneDef(zoneId) {
-        let zoneDef;
-        switch (zoneId) {
-            case 1:
-                zoneDef = this.topLeft;
-                break;
-            case 2:
-                zoneDef = this.topCenter;
-                break;
-            case 3:
-                zoneDef = this.topRight;
-                break;
-            case 4:
-                zoneDef = this.centerLeft;
-                break;
-            case 6:
-                zoneDef = this.centerRight;
-                break;
-            case 7:
-                zoneDef = this.bottomLeft;
-                break;
-            case 8:
-                zoneDef = this.bottomCenter;
-                break;
-            case 9:
-                zoneDef = this.bottomRight;
-                break;
-            // istanbul ignore next
-            default:
-                throw new RangeError();
-        }
-        // Zones can be undefined in a Frontstage
-        return zoneDef;
-    }
-    /** Gets a list of [[ZoneDef]]s.
-     * @deprecated in 3.6. UI1.0 is deprecated.
-     */
-    get zoneDefs() {
-        const zones = [1, 2, 3, 4, 6, 7, 8, 9];
-        const zoneDefs = [];
-        zones.forEach((zoneId) => {
-            const zoneDef = this.getZoneDef(zoneId);
-            if (zoneDef)
-                zoneDefs.push(zoneDef);
-        });
-        return zoneDefs;
-    }
     /** Gets a [[StagePanelDef]] based on a given panel location
      * @beta
      */
@@ -432,9 +306,6 @@ export class FrontstageDef {
             case StagePanelLocation.Top:
                 panelDef = this.topPanel;
                 break;
-            case StagePanelLocation.TopMost:
-                panelDef = this.topMostPanel; // eslint-disable-line deprecation/deprecation
-                break;
             case StagePanelLocation.Left:
                 panelDef = this.leftPanel;
                 break;
@@ -444,12 +315,6 @@ export class FrontstageDef {
             case StagePanelLocation.Bottom:
                 panelDef = this.bottomPanel;
                 break;
-            case StagePanelLocation.BottomMost:
-                panelDef = this.bottomMostPanel; // eslint-disable-line deprecation/deprecation
-                break;
-            // istanbul ignore next
-            default:
-                throw new RangeError();
         }
         // Panels can be undefined in a Frontstage
         return panelDef;
@@ -458,44 +323,29 @@ export class FrontstageDef {
      * @beta
      */
     get panelDefs() {
-        const panels = [
+        const locations = [
             StagePanelLocation.Left, StagePanelLocation.Right,
-            StagePanelLocation.Top, StagePanelLocation.TopMost,
-            StagePanelLocation.Bottom, StagePanelLocation.BottomMost,
+            StagePanelLocation.Top, StagePanelLocation.Bottom,
         ];
-        const panelDefs = [];
-        panels.forEach((location) => {
-            const panelDef = this.getStagePanelDef(location);
-            if (panelDef)
-                panelDefs.push(panelDef);
+        const panels = [];
+        locations.forEach((location) => {
+            const panel = this.getStagePanelDef(location);
+            if (panel)
+                panels.push(panel);
         });
-        return panelDefs;
+        return panels;
     }
     /** Finds a [[WidgetDef]] based on a given id */
     findWidgetDef(id) {
-        for (const zoneDef of this.zoneDefs) {
-            const widgetDef = zoneDef.findWidgetDef(id);
-            if (widgetDef)
-                return widgetDef;
-        }
-        for (const panelDef of this.panelDefs) {
-            const widgetDef = panelDef.findWidgetDef(id);
-            if (widgetDef)
+        for (const widgetDef of this.widgetDefs) {
+            if (widgetDef.id === id)
                 return widgetDef;
         }
-        // istanbul ignore next
         return undefined;
     }
     /** Gets the list of [[WidgetControl]]s */
     get _widgetControls() {
         const widgetControls = new Array();
-        this.zoneDefs.forEach((zoneDef) => {
-            zoneDef.widgetDefs.forEach((widgetDef) => {
-                const widgetControl = widgetDef.widgetControl;
-                if (widgetControl)
-                    widgetControls.push(widgetControl);
-            });
-        });
         this.panelDefs.forEach((panelDef) => {
             panelDef.widgetDefs.forEach((widgetDef) => {
                 const widgetControl = widgetDef.widgetControl;
@@ -513,7 +363,7 @@ export class FrontstageDef {
         if (!this._floatingContentControls)
             this._floatingContentControls = new Array();
         this._floatingContentControls.push(contentControl);
-        ContentViewManager.onAvailableContentChangedEvent.emit({ contentId: contentControl.uniqueId });
+        UiFramework.content.onAvailableContentChangedEvent.emit({ contentId: contentControl.uniqueId });
     }
     dropFloatingContentControl(contentControl) {
         // istanbul ignore next
@@ -523,7 +373,7 @@ export class FrontstageDef {
         // istanbul ignore else
         if (index > -1) {
             this._floatingContentControls.splice(index, 1);
-            ContentViewManager.onAvailableContentChangedEvent.emit({ contentId: contentControl.uniqueId });
+            UiFramework.content.onAvailableContentChangedEvent.emit({ contentId: contentControl.uniqueId });
         }
     }
     /** Gets the list of [[ContentControl]]s */
@@ -538,60 +388,36 @@ export class FrontstageDef {
         }
         return contentControls;
     }
-    /** Initializes a FrontstageDef from FrontstageProps
+    /** Initializes a FrontstageDef from FrontstageConfig.
      * @internal
      */
-    async initializeFromProps(props) {
-        this._id = props.id;
-        this._initialProps = props;
-        this._defaultTool = props.defaultTool; // Might be `undefined`, see `toFrontstageProps`.
-        if (props.defaultContentId !== undefined)
-            this._defaultContentId = props.defaultContentId;
-        if (props.contentGroup instanceof ContentGroupProvider) {
-            this._contentGroupProvider = props.contentGroup;
+    async initializeFromConfig(config) {
+        this._id = config.id;
+        this._initialConfig = config;
+        if (config.contentGroup instanceof ContentGroupProvider) {
+            this._contentGroupProvider = config.contentGroup;
         }
         else {
-            this._contentGroup = props.contentGroup;
-        }
-        if (props.isInFooterMode !== undefined)
-            this._isInFooterMode = props.isInFooterMode;
-        this._applicationData = props.applicationData;
-        this._usage = props.usage;
-        this._version = props.version || 0;
-        // eslint-disable-next-line deprecation/deprecation
-        this._topLeft = Frontstage.createZoneDef(props.contentManipulationTools ? props.contentManipulationTools : props.topLeft, ZoneLocation.TopLeft, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._topCenter = Frontstage.createZoneDef(props.toolSettings ? props.toolSettings : props.topCenter, ZoneLocation.TopCenter, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._topRight = Frontstage.createZoneDef(props.viewNavigationTools ? /* istanbul ignore next */ props.viewNavigationTools : props.topRight, ZoneLocation.TopRight, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._centerLeft = Frontstage.createZoneDef(props.centerLeft, ZoneLocation.CenterLeft, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._centerRight = Frontstage.createZoneDef(props.centerRight, ZoneLocation.CenterRight, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._bottomLeft = Frontstage.createZoneDef(props.bottomLeft, ZoneLocation.BottomLeft, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._bottomCenter = Frontstage.createZoneDef(props.statusBar ? props.statusBar : props.bottomCenter, ZoneLocation.BottomCenter, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._bottomRight = Frontstage.createZoneDef(props.bottomRight, ZoneLocation.BottomRight, props);
-        // eslint-disable-next-line deprecation/deprecation
-        this._topPanel = Frontstage.createStagePanelDef(StagePanelLocation.Top, props);
-        this._topMostPanel = Frontstage.createStagePanelDef(StagePanelLocation.TopMost, props);
-        this._leftPanel = Frontstage.createStagePanelDef(StagePanelLocation.Left, props);
-        this._rightPanel = Frontstage.createStagePanelDef(StagePanelLocation.Right, props);
-        this._bottomPanel = Frontstage.createStagePanelDef(StagePanelLocation.Bottom, props);
-        this._bottomMostPanel = Frontstage.createStagePanelDef(StagePanelLocation.BottomMost, props);
+            this._contentGroup = config.contentGroup;
+        }
+        this._usage = config.usage;
+        this._version = config.version;
+        this._toolSettings = createWidgetDef(config.toolSettings, WidgetType.ToolSettings);
+        this._statusBar = createWidgetDef(config.statusBar, WidgetType.StatusBar);
+        this._contentManipulation = createWidgetDef(config.contentManipulation, WidgetType.Tool);
+        this._viewNavigation = createWidgetDef(config.viewNavigation, WidgetType.Navigation);
+        this._topPanel = createStagePanelDef(config, StagePanelLocation.Top);
+        this._leftPanel = createStagePanelDef(config, StagePanelLocation.Left);
+        this._rightPanel = createStagePanelDef(config, StagePanelLocation.Right);
+        this._bottomPanel = createStagePanelDef(config, StagePanelLocation.Bottom);
     }
     /** @internal */
     updateWidgetDefs() {
         // Tracks provided widgets to prevent duplicates.
         const allStageWidgetDefs = [];
-        // Process panels before zones so in uiVersion="2" extension can explicitly target a widget for a StagePanelSection
+        // Process panels before zones so extension can explicitly target a widget for a StagePanelSection
         this.panelDefs.forEach((stagePanelDef) => {
-            stagePanelDef.updateDynamicWidgetDefs(this.id, this.usage, stagePanelDef.location, undefined, allStageWidgetDefs, this.applicationData);
-        });
-        this.zoneDefs.forEach((zoneDef) => {
-            zoneDef.updateDynamicWidgetDefs(this.id, this.usage, zoneDef.zoneLocation, undefined, allStageWidgetDefs, this.applicationData);
+            stagePanelDef.updateDynamicWidgetDefs(this.id, this.usage, stagePanelDef.location, undefined, allStageWidgetDefs);
         });
     }
     /** @beta */
@@ -603,7 +429,7 @@ export class FrontstageDef {
         for (const widgetDef of this.widgetDefs) {
             widgetDef.setWidgetState(widgetDef.defaultState);
         }
-        FrontstageManager.onFrontstageRestoreLayoutEvent.emit({ frontstageDef: this });
+        InternalFrontstageManager.onFrontstageRestoreLayoutEvent.emit({ frontstageDef: this });
     }
     /** Used only in UI 2.0 to determine WidgetState from NinezoneState
      *  @internal
@@ -693,7 +519,7 @@ export class FrontstageDef {
                 if (state) {
                     this.nineZoneState = state;
                     setTimeout(() => {
-                        popoutWidgetContainerId && UiFramework.childWindowManager.closeChildWindow(popoutWidgetContainerId, true);
+                        popoutWidgetContainerId && UiFramework.childWindows.close(popoutWidgetContainerId, true);
                     }, 600);
                 }
             }
@@ -761,7 +587,7 @@ export class FrontstageDef {
             left: bounds.left,
             top: bounds.top,
         };
-        UiFramework.childWindowManager.openChildWindow(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework.useDefaultPopoutUrl);
+        UiFramework.childWindows.open(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework.useDefaultPopoutUrl);
     }
     /** Create a new popout/child window that contains the widget specified by its Id. Supported only when in
      *  UI 2.0 or higher.
@@ -807,7 +633,7 @@ export class FrontstageDef {
                 left: bounds.left,
                 top: bounds.top,
             };
-            UiFramework.childWindowManager.openChildWindow(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework.useDefaultPopoutUrl);
+            UiFramework.childWindows.open(widgetContainerId, widgetDef.label, popoutContent, position, UiFramework.useDefaultPopoutUrl);
         });
     }
     get isStageClosing() {
@@ -839,7 +665,7 @@ export class FrontstageDef {
         widgetDef.popoutBounds = bounds;
     }
     /** Method used to possibly change a Popout Widget back to a docked widget if the user was the one closing the popout's child
-     * window (i.e. UiFramework.childWindowManager.isClosingChildWindow === false).
+     * window.
      *  @internal
      */
     dockPopoutWidgetContainer(widgetContainerId) {
@@ -869,7 +695,7 @@ export class FrontstageDef {
                 const state = dockWidgetContainer(this.nineZoneState, widgetContainerId, true);
                 state && (this.nineZoneState = state);
                 if (isPopoutTabLocation(location)) {
-                    UiFramework.childWindowManager.closeChildWindow(location.widgetId, true);
+                    UiFramework.childWindows.close(location.widgetId, true);
                 }
             }
         }
@@ -922,11 +748,6 @@ export class FrontstageDef {
         return undefined;
     }
     *_widgetDefs() {
-        for (const zoneDef of this.zoneDefs) {
-            for (const widgetDef of zoneDef.widgetDefs) {
-                yield widgetDef;
-            }
-        }
         for (const panelDef of this.panelDefs) {
             for (const widgetDef of panelDef.widgetDefs) {
                 yield widgetDef;
@@ -946,90 +767,53 @@ export class FrontstageDef {
         };
     }
 }
-function toFrontstageProps(config) {
-    const { contentManipulation, viewNavigation, toolSettings, statusBar, topPanel, leftPanel, bottomPanel, rightPanel, ...other } = config;
-    const props = {
-        ...other,
-        defaultTool: undefined,
-        toolSettings: toolSettings ? toZoneElement(toolSettings) : undefined,
-        statusBar: statusBar ? toZoneElement(statusBar) : undefined,
-        contentManipulationTools: contentManipulation ? toZoneElement(contentManipulation) : undefined,
-        viewNavigationTools: viewNavigation ? toZoneElement(viewNavigation) : undefined,
-        topPanel: topPanel ? toStagePanelElement(topPanel) : undefined,
-        leftPanel: leftPanel ? toStagePanelElement(leftPanel) : undefined,
-        bottomPanel: bottomPanel ? toStagePanelElement(bottomPanel) : undefined,
-        rightPanel: rightPanel ? toStagePanelElement(rightPanel) : undefined,
-    };
-    return props;
-}
-function toWidgetElement(config) {
-    return (React.createElement(Widget, { key: config.id, ...config }));
-}
-function toZoneElement(config) {
-    return (React.createElement(Zone, { widgets: [
-            toWidgetElement(config),
-        ] }));
-}
-function toStagePanelElement(config) {
-    var _a, _b;
-    const { sections, ...other } = config;
-    const startWidgets = (_a = sections === null || sections === void 0 ? void 0 : sections.start) === null || _a === void 0 ? void 0 : _a.map((widget) => toWidgetElement(widget));
-    const endWidgets = (_b = sections === null || sections === void 0 ? void 0 : sections.end) === null || _b === void 0 ? void 0 : _b.map((widget) => toWidgetElement(widget));
-    const panelZones = {};
-    if (startWidgets)
-        panelZones.start = {
-            widgets: startWidgets,
-        };
-    if (endWidgets)
-        panelZones.end = {
-            widgets: endWidgets,
-        };
-    return (React.createElement(StagePanel, { panelZones: panelZones, ...other }));
+function createWidgetDef(config, type) {
+    if (!config)
+        return undefined;
+    const widgetDef = WidgetDef.create(config, type);
+    return widgetDef;
 }
-let widgetConfigId = 0;
-function toWidgetConfig(widget) {
-    const props = widget.props;
-    return {
-        ...props,
-        id: props.id ? props.id : `widget-config-${++widgetConfigId}`,
-    };
+function createStagePanelDef(frontstageConfig, location) {
+    const config = getStagePanel(location, frontstageConfig);
+    const panelDef = new StagePanelDef();
+    panelDef.initializeFromConfig(config, location);
+    return panelDef;
 }
-function toWidgetConfigFromZone(zone) {
-    const widgets = zone.props.widgets;
-    if (!widgets || widgets.length === 0)
-        return undefined;
-    const widget = widgets[0];
-    return toWidgetConfig(widget);
+function getStagePanel(location, config) {
+    switch (location) {
+        case StagePanelLocation.Top:
+            return config.topPanel;
+        case StagePanelLocation.Left:
+            return config.leftPanel;
+        case StagePanelLocation.Right:
+            return config.rightPanel;
+        case StagePanelLocation.Bottom:
+            return config.bottomPanel;
+    }
 }
-function toPanelConfig(panel) {
-    var _a, _b, _c, _d;
-    const props = panel.props;
-    const { panelZones, ...other } = props;
-    const start = (_b = (_a = panelZones === null || panelZones === void 0 ? void 0 : panelZones.start) === null || _a === void 0 ? void 0 : _a.widgets) === null || _b === void 0 ? void 0 : _b.map((w) => toWidgetConfig(w));
-    const end = (_d = (_c = panelZones === null || panelZones === void 0 ? void 0 : panelZones.end) === null || _c === void 0 ? void 0 : _c.widgets) === null || _d === void 0 ? void 0 : _d.map((w) => toWidgetConfig(w));
-    const config = {
-        ...other,
-        sections: {
-            start,
-            end,
-        },
-    };
-    return config;
+/** Hook that returns active frontstage id.
+ * @public
+ */
+export const useActiveFrontstageId = () => {
+    const def = useActiveFrontstageDef();
+    const id = React.useMemo(() => def ? /* istanbul ignore next */ def.id : "", [def]);
+    return id;
+};
+/** @internal */
+export function useActiveFrontstageDef() {
+    const [def, setDef] = React.useState(UiFramework.frontstages.activeFrontstageDef);
+    React.useEffect(() => {
+        return UiFramework.frontstages.onFrontstageActivatedEvent.addListener((args) => {
+            setDef(args.activatedFrontstageDef);
+        });
+    }, []);
+    return def;
 }
-function toFrontstageConfig(props) {
-    const { contentManipulationTools, viewNavigationTools, toolSettings, statusBar, topPanel, leftPanel, bottomPanel, rightPanel, ...other } = props;
-    const config = {
-        ...other,
-        version: props.version || 0,
-        contentManipulation: contentManipulationTools ? toWidgetConfigFromZone(contentManipulationTools) : undefined,
-        viewNavigation: viewNavigationTools ? toWidgetConfigFromZone(viewNavigationTools) : undefined,
-        toolSettings: toolSettings ? toWidgetConfigFromZone(toolSettings) : undefined,
-        statusBar: statusBar ? toWidgetConfigFromZone(statusBar) : undefined,
-        topPanel: topPanel ? toPanelConfig(topPanel) : undefined,
-        leftPanel: leftPanel ? toPanelConfig(leftPanel) : undefined,
-        bottomPanel: bottomPanel ? toPanelConfig(bottomPanel) : undefined,
-        rightPanel: rightPanel ? toPanelConfig(rightPanel) : undefined,
-    };
-    return config;
+/** Hook that returns the widgetDef for a specific widgetId within the active frontstage.
+ * @public
+ */
+export function useSpecificWidgetDef(widgetId) {
+    const frontstageDef = useActiveFrontstageDef();
+    return frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.findWidgetDef(widgetId);
 }
 //# sourceMappingURL=FrontstageDef.js.map