@itwin/appui-react 4.0.0-dev.3 → 4.0.0-dev.6

package/lib/esm/appui-react/feedback/ValidationTextbox.scss

@@ -37,9 +37,9 @@
   .ValidationTextbox-icon {
     position: absolute;
     padding: $uicore-bordered-padding;
-    width: var(--iui-size-l);
-    height: var(--iui-size-l);
-    line-height: var(--iui-size-l);
+    width: $uicore-line-height;
+    height: $uicore-line-height;
+    line-height: $uicore-line-height;
     font-size: $uicore-icons-small;
     cursor: pointer;
     top: 0px;
@@ -51,4 +51,4 @@
       color: $buic-foreground-primary;
     }
   }
-}
+}

package/lib/esm/appui-react/frontstage/Frontstage.d.ts

@@ -0,0 +1,159 @@
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import * as React from "react";
+import { StagePanelLocation } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+import { WidgetZoneId, ZoneManagerProps, ZonesManagerProps } from "@itwin/appui-layout-react";
+import { ContentGroup, ContentGroupProvider } from "../content/ContentGroup";
+import { ToolItemDef } from "../shared/ToolItemDef";
+import { StagePanelProps } from "../stagepanels/StagePanel";
+import { StagePanelDef } from "../stagepanels/StagePanelDef";
+import { WidgetDef } from "../widgets/WidgetDef";
+import { ZoneLocation, ZoneProps } from "../zones/Zone";
+import { ZoneDef } from "../zones/ZoneDef";
+import { FrontstageRuntimeProps, ZoneDefProvider } from "./FrontstageComposer";
+/** Properties for a [[Frontstage]] component.
+ * @deprecated in 3.5. Props of a deprecated component.
+ * @public
+ */
+export interface FrontstageProps extends CommonProps {
+    /** Id for the Frontstage */
+    id: string;
+    /** Tool that is started once the Frontstage is activated.
+     * Use [FrontstageManager.onFrontstageReadyEvent] instead.
+     */
+    defaultTool: ToolItemDef;
+    /** The Content Group providing the Content Views */
+    contentGroup: ContentGroup | ContentGroupProvider;
+    /** Id of the Content View to be activated initially */
+    defaultContentId?: string;
+    /** Indicated whether the StatusBar is in footer mode or widget mode. Defaults to true.
+     * @deprecated in 3.3. In upcoming version, widget mode will be removed and footer mode will always be true.
+    */
+    isInFooterMode?: boolean;
+    /** Any application data to attach to this Frontstage. */
+    applicationData?: any;
+    /** Usage type for this Frontstage. */
+    usage?: string;
+    /** Frontstage version. Used to force saved layout reinitialization after changes to frontstage.
+     * @note This value should be increased when changes are made to Frontstage.
+     * Increasing the value will make sure to reinitialize App layout instead of restoring to old layout.
+     * Version increase is required when widgets are added/removed.
+     */
+    version?: number;
+    /** if isIModelIndependent then frontstage is independent from any iModel. */
+    isIModelIndependent?: boolean;
+    /** The Zone in the top-left corner.
+     * @deprecated in 3.0. Use 'contentManipulationTools' property. */
+    topLeft?: React.ReactElement<ZoneProps>;
+    /** The Zone along the top-center edge.
+     * @deprecated in 3.0. Use 'toolSettings' property. */
+    topCenter?: React.ReactElement<ZoneProps>;
+    /** The Zone in the top-right corner.
+     * @deprecated in 3.0. Use 'viewNavigationTools' property. */
+    topRight?: React.ReactElement<ZoneProps>;
+    /** The Zone along the center-left edge.
+     * @deprecated in 3.0. Place widgets in appropriate stage panel zone. */
+    centerLeft?: React.ReactElement<ZoneProps>;
+    /** The Zone along the center-right edge.
+     * @deprecated in 3.0. Place widgets in appropriate stage panel zone. */
+    centerRight?: React.ReactElement<ZoneProps>;
+    /** The Zone in the bottom-left corner.
+     * @deprecated in 3.0. Place widgets in appropriate stage panel zone.  */
+    bottomLeft?: React.ReactElement<ZoneProps>;
+    /** The Zone along the bottom-center edge.
+     * @deprecated in 3.0. use statusBar property */
+    bottomCenter?: React.ReactElement<ZoneProps>;
+    /** The Zone in the bottom-right corner.
+     * @deprecated in 3.0. Place widgets in appropriate stage panel zone. */
+    bottomRight?: React.ReactElement<ZoneProps>;
+    /** The Zone in the top-left corner that shows tools typically used to query and modify content. To be used in place of deprecated topLeft zone definition. */
+    contentManipulationTools?: React.ReactElement<ZoneProps>;
+    /** The Zone the that shows settings for the active tool. To be used in place of deprecated topCenter zone definition. */
+    toolSettings?: React.ReactElement<ZoneProps>;
+    /** The Zone in the top-right corner that shows view navigation tools. To be used in place of deprecated topRight zone definition */
+    viewNavigationTools?: React.ReactElement<ZoneProps>;
+    /** The status bar Zone shown as the application footer. To be used in place of deprecated bottomCenter zone definition. */
+    statusBar?: React.ReactElement<ZoneProps>;
+    /** The StagePanel on the top of the AppUi container. */
+    topPanel?: React.ReactElement<StagePanelProps>;
+    /** The StagePanel on the very top across the full width.
+     * @deprecated in 3.0. Only topPanel is supported in UI 2.0 */
+    topMostPanel?: React.ReactElement<StagePanelProps>;
+    /** The StagePanel on the left.  */
+    leftPanel?: React.ReactElement<StagePanelProps>;
+    /** The StagePanel on the right.  */
+    rightPanel?: React.ReactElement<StagePanelProps>;
+    /** The StagePanel on the bottom of the AppUi container.  */
+    bottomPanel?: React.ReactElement<StagePanelProps>;
+    /** The StagePanel on the very bottom across the full width.
+     * @deprecated in 3.0. Only bottomPanel is supported in UI 2.0  */
+    bottomMostPanel?: React.ReactElement<StagePanelProps>;
+    /** @internal */
+    runtimeProps?: FrontstageRuntimeProps;
+}
+interface FrontstageState {
+    isUiVisible: boolean;
+    widgetIdToContent: Partial<{
+        [id in WidgetZoneId]: HTMLDivElement | undefined;
+    }>;
+}
+/** Frontstage React component.
+ * A Frontstage is a full-screen configuration designed to enable the user to accomplish a task.
+ * @deprecated in 3.6. Use [[FrontstageConfig]] instead.
+ * @public
+ */
+export declare class Frontstage extends React.Component<FrontstageProps, FrontstageState> {
+    private _isMounted;
+    private static _zoneIds;
+    private _contentRefs;
+    private _zonesMeasurer;
+    private _floatingZonesMeasurer;
+    private _zonesStyle;
+    private _zonesFooterModeStyle;
+    /** @internal */
+    constructor(props: FrontstageProps);
+    /** React lifecycle method.
+     * @internal
+     */
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(): void;
+    /** React lifecycle method.
+     * @internal
+     */
+    componentWillUnmount(): void;
+    private _uiVisibilityChanged;
+    private _handleWidgetsChanged;
+    private _handleUiProviderRegisteredEvent;
+    private updateWidgetDefs;
+    /** @internal */
+    static createZoneDef(zoneNode: React.ReactElement<ZoneProps> | undefined, zoneLocation: ZoneLocation, props: FrontstageProps): ZoneDef | undefined;
+    private static getZoneElement;
+    /** @internal */
+    static createStagePanelDef(panelLocation: StagePanelLocation, props: FrontstageProps): StagePanelDef | undefined;
+    private static getStagePanelElement;
+    private _getContentRef;
+    private doContentLayoutRender;
+    private cloneStagePanelElement;
+    private cloneZoneElements;
+    private cloneWidgetContentElements;
+    /** React render method
+     * @internal
+     */
+    render(): React.ReactNode;
+}
+/** @internal */
+export declare const getExtendedZone: (zoneId: WidgetZoneId, zones: ZonesManagerProps, defProvider: ZoneDefProvider) => ZoneManagerProps;
+/** Hook that returns active frontstage id.
+ * @public
+ */
+export declare const useActiveFrontstageId: () => string;
+/** @internal */
+export declare function useActiveFrontstageDef(): import("./FrontstageDef").FrontstageDef | undefined;
+/** Hook that returns the widgetDef for a specific widgetId within the active frontstage.
+ * @public
+ */
+export declare function useSpecificWidgetDef(widgetId: string): WidgetDef | undefined;
+export {};
+//# sourceMappingURL=Frontstage.d.ts.map

package/lib/esm/appui-react/frontstage/Frontstage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/Frontstage.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAkE,MAAM,uBAAuB,CAAC;AAC3H,OAAO,EAAE,WAAW,EAAa,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EACyF,YAAY,EAAiB,gBAAgB,EAC3I,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAA0B,eAAe,EAA0B,MAAM,2BAA2B,CAAC;AAC5G,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAI7D,OAAO,EAAE,SAAS,EAA+B,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAA0C,YAAY,EAAE,SAAS,EAAoB,MAAM,eAAe,CAAC;AAClH,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB,oDAAoD;IACpD,YAAY,EAAE,YAAY,GAAG,oBAAoB,CAAC;IAClD,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;MAEE;IACF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;sEACkE;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC;0DACsD;IACtD,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C;iEAC6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACzC;4EACwE;IACxE,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC3C;4EACwE;IACxE,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC5C;6EACyE;IACzE,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC3C;oDACgD;IAChD,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC7C;4EACwE;IACxE,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAE5C,8JAA8J;IAC9J,wBAAwB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACzD,yHAAyH;IACzH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC7C,oIAAoI;IACpI,mBAAmB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACpD,2HAA2H;IAC3H,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IAC/C;kEAC8D;IAC9D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IACnD,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IAChD,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IACjD,4DAA4D;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IAClD;sEACkE;IAClE,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IAEtD,gBAAgB;IAChB,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC;AAED,UAAU,eAAe;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;SAAG,EAAE,IAAI,YAAY,GAAG,cAAc,GAAG,SAAS;KAAE,CAAC,CAAC;CAClF;AAED;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAqE;IAC5F,OAAO,CAAC,YAAY,CAAsD;IAC1E,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,sBAAsB,CAAqC;IACnE,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,gBAAgB;gBACJ,KAAK,EAAE,eAAe;IASlC;;OAEG;IACmB,iBAAiB;IAOvB,kBAAkB;IAWlC;;OAEG;IACa,oBAAoB;IAMpC,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,gCAAgC,CAEtC;IAEF,OAAO,CAAC,gBAAgB;IAexB,gBAAgB;WACF,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IAiBzJ,OAAO,CAAC,MAAM,CAAC,cAAc;IAyB7B,gBAAgB;WACF,mBAAmB,CAAC,aAAa,EAAE,kBAAkB,EAAE,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,SAAS;IASvH,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAgCnC,OAAO,CAAC,cAAc,CAgBpB;IAGF,OAAO,CAAC,qBAAqB;IAsB7B,OAAO,CAAC,sBAAsB;IAsC9B,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,0BAA0B;IAwClC;;OAEG;IACa,MAAM,IAAI,KAAK,CAAC,SAAS;CAuD1C;AAsGD,gBAAgB;AAEhB,eAAO,MAAM,eAAe,WAAY,YAAY,SAAS,iBAAiB,eAAe,eAAe,KAAG,gBA2B9G,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,cAIjC,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,sBAAsB,wDAarC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,yBAGpD"}

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

@@ -0,0 +1,462 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Logger } from "@itwin/core-bentley";
+import { StagePanelLocation, UiItemsManager, WidgetState } from "@itwin/appui-abstract";
+import { Rectangle } from "@itwin/core-react";
+import { Zones as NZ_Zones, StagePanels, StagePanelsManager, widgetZoneIds, } from "@itwin/appui-layout-react";
+import { ContentLayout } from "../content/ContentLayout";
+import { getNestedStagePanelKey } from "../stagepanels/StagePanel";
+import { StagePanelDef } from "../stagepanels/StagePanelDef";
+import { UiFramework } from "../UiFramework";
+import { UiShowHideManager } from "../utils/UiShowHideManager";
+import { ToolSettingsContent } from "../widgets/ToolSettingsContent";
+import { isToolSettingsWidgetManagerProps, Zone, ZoneLocation } from "../zones/Zone";
+import { ZoneDef } from "../zones/ZoneDef";
+import { FrontstageManager } from "./FrontstageManager";
+/** Frontstage React component.
+ * A Frontstage is a full-screen configuration designed to enable the user to accomplish a task.
+ * @deprecated in 3.6. Use [[FrontstageConfig]] instead.
+ * @public
+ */
+export class Frontstage extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this._contentRefs = new Map(); // eslint-disable-line deprecation/deprecation
+        this._zonesMeasurer = React.createRef();
+        this._floatingZonesMeasurer = React.createRef();
+        this._zonesStyle = {
+            pointerEvents: "none",
+        };
+        this._zonesFooterModeStyle = {
+            ...this._zonesStyle,
+            display: "flex",
+            flexFlow: "column",
+        };
+        this._uiVisibilityChanged = (args) => {
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({ isUiVisible: args.visible });
+        };
+        this._handleWidgetsChanged = (_args) => {
+            this.updateWidgetDefs();
+        };
+        this._handleUiProviderRegisteredEvent = (_args) => {
+            this.updateWidgetDefs();
+        };
+        this._getContentRef = (widget) => {
+            const ref = this._contentRefs.get(widget);
+            if (ref)
+                return ref;
+            const newRef = (el) => {
+                if (this._isMounted) {
+                    this.setState((prevState) => ({
+                        widgetIdToContent: {
+                            ...prevState.widgetIdToContent,
+                            [widget]: el === null ? undefined : el,
+                        },
+                    }));
+                }
+            };
+            this._contentRefs.set(widget, newRef);
+            return newRef;
+        };
+        this.state = {
+            isUiVisible: UiFramework.getIsUiVisible(),
+            widgetIdToContent: {},
+        };
+    }
+    /** React lifecycle method.
+     * @internal
+     */
+    async componentDidMount() {
+        this._isMounted = true;
+        UiFramework.onUiVisibilityChanged.addListener(this._uiVisibilityChanged);
+        UiFramework.widgetManager.onWidgetsChanged.addListener(this._handleWidgetsChanged);
+        UiItemsManager.onUiProviderRegisteredEvent.addListener(this._handleUiProviderRegisteredEvent);
+    }
+    componentDidUpdate() {
+        if (!this._zonesMeasurer.current || !this._floatingZonesMeasurer.current || !this.props.runtimeProps)
+            return;
+        let floatingBounds = Rectangle.create(this._floatingZonesMeasurer.current.getBoundingClientRect());
+        const bounds = Rectangle.create(this._zonesMeasurer.current.getBoundingClientRect());
+        const offset = bounds.topLeft().getOffsetTo(floatingBounds.topLeft());
+        floatingBounds = floatingBounds.setPosition(offset);
+        this.props.runtimeProps.nineZoneChangeHandler.handleZonesBoundsChange(bounds);
+        this.props.runtimeProps.nineZoneChangeHandler.handleFloatingZonesBoundsChange(floatingBounds);
+    }
+    /** React lifecycle method.
+     * @internal
+     */
+    componentWillUnmount() {
+        this._isMounted = false;
+        UiFramework.onUiVisibilityChanged.removeListener(this._uiVisibilityChanged);
+        UiItemsManager.onUiProviderRegisteredEvent.removeListener(this._handleUiProviderRegisteredEvent);
+    }
+    updateWidgetDefs() {
+        // istanbul ignore else
+        if (!this.props.runtimeProps)
+            return;
+        // istanbul ignore next
+        {
+            const frontstageDef = this.props.runtimeProps.frontstageDef;
+            frontstageDef.updateWidgetDefs();
+            FrontstageManager.onWidgetDefsUpdatedEvent.emit();
+            if (this._isMounted)
+                this.forceUpdate();
+        }
+    }
+    /** @internal */
+    static createZoneDef(zoneNode, zoneLocation, props) {
+        if (zoneNode) {
+            const zoneDef = new ZoneDef();
+            const zoneElement = Frontstage.getZoneElement(zoneLocation, props);
+            zoneDef.zoneLocation = zoneLocation;
+            // istanbul ignore else
+            if (zoneElement && React.isValidElement(zoneElement)) {
+                Zone.initializeZoneDef(zoneDef, zoneElement.props);
+                return zoneDef;
+            }
+        }
+        return undefined;
+    }
+    static getZoneElement(zoneId, props) {
+        switch (zoneId) {
+            case ZoneLocation.TopLeft:
+                return props.contentManipulationTools ? props.contentManipulationTools : props.topLeft; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.TopCenter:
+                return props.toolSettings ? props.toolSettings : props.topCenter; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.TopRight:
+                return props.viewNavigationTools ? /* istanbul ignore next */ props.viewNavigationTools : props.topRight; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.CenterLeft:
+                return props.centerLeft; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.CenterRight:
+                return props.centerRight; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.BottomLeft:
+                return props.bottomLeft; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.BottomCenter:
+                return props.statusBar ? props.statusBar : props.bottomCenter; // eslint-disable-line deprecation/deprecation
+            case ZoneLocation.BottomRight:
+                return props.bottomRight; // eslint-disable-line deprecation/deprecation
+        }
+        // Zones can be undefined in a Frontstage
+        // istanbul ignore next
+        return undefined;
+    }
+    /** @internal */
+    static createStagePanelDef(panelLocation, props) {
+        const panelDef = new StagePanelDef();
+        const panelElement = Frontstage.getStagePanelElement(panelLocation, props);
+        panelDef.initializeFromProps(panelElement === null || panelElement === void 0 ? void 0 : panelElement.props, panelLocation);
+        return panelDef;
+    }
+    static getStagePanelElement(location, props) {
+        let panelElement;
+        switch (location) {
+            case StagePanelLocation.Top:
+                panelElement = props.topPanel;
+                break;
+            case StagePanelLocation.TopMost:
+                panelElement = props.topMostPanel; // eslint-disable-line deprecation/deprecation
+                break;
+            case StagePanelLocation.Left:
+                panelElement = props.leftPanel;
+                break;
+            case StagePanelLocation.Right:
+                panelElement = props.rightPanel;
+                break;
+            case StagePanelLocation.Bottom:
+                panelElement = props.bottomPanel;
+                break;
+            case StagePanelLocation.BottomMost:
+                panelElement = props.bottomMostPanel; // eslint-disable-line deprecation/deprecation
+                break;
+            // istanbul ignore next
+            default:
+                throw new RangeError();
+        }
+        // Panels can be undefined in a Frontstage
+        return panelElement;
+    }
+    // This uses ConfigurableUi to render the content
+    doContentLayoutRender() {
+        let contentLayout;
+        // istanbul ignore else
+        if (this.props.runtimeProps && this.props.runtimeProps.frontstageDef) {
+            const frontstageDef = this.props.runtimeProps.frontstageDef;
+            // istanbul ignore else
+            if (frontstageDef.contentLayoutDef && frontstageDef.contentGroup)
+                contentLayout = (React.createElement(ContentLayout, { contentLayout: frontstageDef.contentLayoutDef, contentGroup: frontstageDef.contentGroup }));
+            else
+                Logger.logError(UiFramework.loggerCategory(this), `FrontstageDef.contentLayoutDef and FrontstageDef.contentGroup are required for <ContentLayout> component`);
+        }
+        return contentLayout;
+    }
+    cloneStagePanelElement(panelDef, runtimeProps) {
+        if (!this.state.isUiVisible && UiShowHideManager.showHidePanels)
+            return null;
+        // istanbul ignore else
+        if (panelDef) {
+            const { location } = panelDef;
+            const panelElement = Frontstage.getStagePanelElement(location, this.props);
+            // istanbul ignore else
+            if (panelElement && React.isValidElement(panelElement)) {
+                const panelKey = getNestedStagePanelKey(panelDef.location);
+                const panels = runtimeProps.nineZone.nested.panels[panelKey.id];
+                const panel = StagePanelsManager.getPanel(panelKey.type, panels);
+                const draggedWidget = runtimeProps.nineZone.zones.draggedWidget;
+                const panelRuntimeProps = {
+                    draggedWidgetId: draggedWidget ? /* istanbul ignore next */ draggedWidget.id : undefined,
+                    getWidgetContentRef: this._getContentRef,
+                    isInFooterMode: runtimeProps.nineZone.zones.isInFooterMode,
+                    isTargeted: !!runtimeProps.nineZone.zones.target,
+                    panel,
+                    panelDef,
+                    stagePanelChangeHandler: runtimeProps.stagePanelChangeHandler,
+                    widgetChangeHandler: runtimeProps.widgetChangeHandler,
+                    widgets: runtimeProps.nineZone.zones.widgets,
+                    widgetTabs: runtimeProps.widgetTabs,
+                    zoneDefProvider: runtimeProps.zoneDefProvider,
+                };
+                return React.cloneElement(panelElement, { runtimeProps: panelRuntimeProps });
+            }
+        }
+        return null;
+    }
+    // eslint-disable-next-line deprecation/deprecation
+    cloneZoneElements(zoneIds, runtimeProps) {
+        return zoneIds.map((zoneId) => {
+            const zoneElement = Frontstage.getZoneElement(zoneId, this.props);
+            if (!zoneElement || !React.isValidElement(zoneElement))
+                return null;
+            const zoneDef = runtimeProps.zoneDefProvider.getZoneDef(zoneId);
+            // istanbul ignore if
+            if (!zoneDef)
+                return null;
+            const nestedPanelsManager = FrontstageManager.NineZoneManager.getNestedPanelsManager();
+            const panelsManager = nestedPanelsManager.getPanelsManager("inner");
+            const type = panelsManager.findWidget(zoneId, runtimeProps.nineZone.nested.panels.inner);
+            // istanbul ignore if
+            if (type !== undefined)
+                return null;
+            const zonesManager = FrontstageManager.NineZoneManager.getZonesManager();
+            const zones = runtimeProps.nineZone.zones;
+            const ghostOutline = zonesManager.getGhostOutlineBounds(zoneId, zones);
+            const dropTarget = zonesManager.getDropTarget(zoneId, zones);
+            const zone = getExtendedZone(zoneId, zones, runtimeProps.zoneDefProvider);
+            const widget = zone.widgets.length > 0 ? zones.widgets[zone.widgets[0]] : undefined;
+            const openWidgetId = zone.widgets.find((wId) => zones.widgets[wId].tabIndex >= 0);
+            const activeTabIndex = openWidgetId ? zones.widgets[openWidgetId].tabIndex : 0;
+            const draggedWidget = runtimeProps.nineZone.zones.draggedWidget;
+            const disabledResizeHandles = zonesManager.getDisabledResizeHandles(zoneId, zones);
+            // istanbul ignore next
+            const zoneRuntimeProps = {
+                activeTabIndex,
+                disabledResizeHandles,
+                draggedWidget: draggedWidget && /* istanbul ignore next */ draggedWidget.id === zoneId ? /* istanbul ignore next */ draggedWidget : undefined,
+                dropTarget,
+                getWidgetContentRef: this._getContentRef,
+                ghostOutline,
+                isHidden: (zoneDef.isStatusBar && this.props.isInFooterMode && ( /* istanbul ignore next */this.state.isUiVisible || /* istanbul ignore next */ !UiShowHideManager.showHideFooter)) ?
+                    /* istanbul ignore next */ false : !this.state.isUiVisible,
+                isInFooterMode: runtimeProps.nineZone.zones.isInFooterMode,
+                openWidgetId,
+                targetChangeHandler: runtimeProps.targetChangeHandler,
+                widgetChangeHandler: runtimeProps.widgetChangeHandler,
+                widgetTabs: runtimeProps.widgetTabs,
+                widget,
+                zoneDef,
+                zoneDefProvider: runtimeProps.zoneDefProvider,
+                zone,
+            };
+            return React.cloneElement(zoneElement, { key: zoneId, runtimeProps: zoneRuntimeProps });
+        });
+    }
+    // eslint-disable-next-line deprecation/deprecation
+    cloneWidgetContentElements(zones, runtimeProps) {
+        // eslint-disable-next-line deprecation/deprecation
+        const widgets = zones.reduce((prev, zoneId) => {
+            const zoneDef = runtimeProps.zoneDefProvider.getZoneDef(zoneId);
+            // istanbul ignore if
+            if (!zoneDef)
+                return prev;
+            const widgetDefs = zoneDef.widgetDefs.filter((widgetDef) => {
+                if (zoneId === 2)
+                    return widgetDef.isVisible;
+                return widgetDef.isVisible && !widgetDef.isFloating;
+            });
+            for (let i = 0; i < widgetDefs.length; i++) {
+                prev.push({
+                    id: zoneId,
+                    def: widgetDefs[i],
+                    tabIndex: i,
+                });
+            }
+            return prev;
+        }, []);
+        return widgets.map((widget) => {
+            const nzWidget = runtimeProps.nineZone.zones.widgets[widget.id];
+            return (React.createElement(WidgetContentRenderer, { anchor: nzWidget.horizontalAnchor, isHidden: nzWidget.tabIndex !== widget.tabIndex, key: `${widget.id}_${widget.tabIndex}`, renderTo: this.state.widgetIdToContent[widget.id], toolSettingsMode: isToolSettingsWidgetManagerProps(nzWidget) ? nzWidget.mode : undefined, widgetDef: widget.def }));
+        });
+    }
+    /** React render method
+     * @internal
+     */
+    render() {
+        const { runtimeProps } = this.props;
+        if (runtimeProps === undefined)
+            return null;
+        /** For Nine-zone area; includes ContentLayout */
+        const ninezoneStyle = {
+            position: "relative",
+            height: "100%",
+        };
+        const frontstageDef = runtimeProps.frontstageDef;
+        return (React.createElement("div", { style: ninezoneStyle, id: "uifw-ninezone-area", className: this.props.className },
+            React.createElement(NZ_Zones, { style: runtimeProps.nineZone.zones.isInFooterMode ? this._zonesFooterModeStyle : this._zonesStyle },
+                React.createElement(StagePanels, { bottomPanel: this.cloneStagePanelElement(frontstageDef.bottomMostPanel, runtimeProps), topPanel: this.cloneStagePanelElement(frontstageDef.topMostPanel, runtimeProps) },
+                    React.createElement(StagePanels, { bottomPanel: this.cloneStagePanelElement(frontstageDef.bottomPanel, runtimeProps), leftPanel: this.cloneStagePanelElement(frontstageDef.leftPanel, runtimeProps), rightPanel: this.cloneStagePanelElement(frontstageDef.rightPanel, runtimeProps), topPanel: this.cloneStagePanelElement(frontstageDef.topPanel, runtimeProps) },
+                        React.createElement("div", { id: "uifw-ninezone-zones-area", ref: this._zonesMeasurer, style: {
+                                height: "100%",
+                                position: "relative",
+                            } },
+                            this.doContentLayoutRender(),
+                            this.cloneZoneElements(Frontstage._zoneIds, runtimeProps)))),
+                this.cloneZoneElements([8], runtimeProps),
+                React.createElement("div", { id: "uifw-ninezone-floating-zones-area", ref: this._floatingZonesMeasurer, style: {
+                        height: "100%",
+                        width: "100%",
+                        position: "absolute",
+                    } })),
+            this.cloneWidgetContentElements(Frontstage._zoneIds, runtimeProps)));
+    }
+}
+Frontstage._zoneIds = widgetZoneIds.filter((z) => z !== 8); // eslint-disable-line deprecation/deprecation
+class WidgetContentRenderer extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this._content = document.createElement("span");
+        this._handleWidgetStateChangedEvent = (args) => {
+            if (this.props.widgetDef !== args.widgetDef || !this._isMounted)
+                return;
+            this.forceUpdate();
+        };
+        this._handleToolActivatedEvent = () => {
+            if (this.props.toolSettingsMode === undefined || !this._isMounted)
+                return;
+            // force update when tool is activated
+            this.setState((prevState) => ({ widgetKey: prevState.widgetKey + 1 }));
+        };
+        this.state = {
+            widgetKey: 0,
+        };
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        FrontstageManager.onWidgetStateChangedEvent.addListener(this._handleWidgetStateChangedEvent);
+        FrontstageManager.onToolActivatedEvent.addListener(this._handleToolActivatedEvent);
+        this._content.style.display = this.props.isHidden ? "none" : "flex";
+        this._content.style.flexDirection = "column";
+        this._content.style.height = "100%";
+        if (!this.props.renderTo)
+            return;
+        this.props.renderTo.appendChild(this._content);
+    }
+    componentDidUpdate(prevProps) {
+        // istanbul ignore next
+        if (!this._isMounted)
+            return;
+        if (this.props.isHidden !== prevProps.isHidden) {
+            this._content.style.display = this.props.isHidden ? "none" : "flex";
+        }
+        if (!this.props.renderTo || prevProps.renderTo === this.props.renderTo)
+            return;
+        this.props.widgetDef.saveTransientState();
+        this.props.renderTo.appendChild(this._content);
+        const shouldRemount = this.props.widgetDef.restoreTransientState() || this.props.widgetDef.isToolSettings;
+        shouldRemount && this.setState((prevState) => ({ widgetKey: prevState.widgetKey + 1 }));
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        this._content.parentNode && this._content.parentNode.removeChild(this._content);
+        FrontstageManager.onWidgetStateChangedEvent.removeListener(this._handleWidgetStateChangedEvent);
+        FrontstageManager.onToolActivatedEvent.removeListener(this._handleToolActivatedEvent);
+    }
+    render() {
+        if (this.props.toolSettingsMode !== undefined) {
+            return ReactDOM.createPortal((React.createElement(ToolSettingsContent, { anchor: this.props.anchor, key: this.state.widgetKey, mode: this.props.toolSettingsMode }, FrontstageManager.activeToolSettingsProvider && FrontstageManager.activeToolSettingsProvider.toolSettingsNode)), this._content);
+        }
+        if (this.props.widgetDef.state === WidgetState.Unloaded)
+            return null;
+        return ReactDOM.createPortal((React.createElement(React.Fragment, { key: this.state.widgetKey }, this.props.widgetDef.reactNode)), this._content);
+    }
+}
+/** @internal */
+// eslint-disable-next-line deprecation/deprecation
+export const getExtendedZone = (zoneId, zones, defProvider) => {
+    const zone = zones.zones[zoneId];
+    if (zoneId === 1 || zoneId === 3) {
+        let extendOverId = zoneId; // eslint-disable-line deprecation/deprecation
+        const zonesManager = FrontstageManager.NineZoneManager.getZonesManager();
+        let bottomZoneId = zonesManager.bottomZones.getInitial(extendOverId);
+        while (bottomZoneId !== undefined) {
+            const bottomZoneDef = defProvider.getZoneDef(bottomZoneId);
+            if (bottomZoneDef && bottomZoneDef.widgetDefs.length !== 0)
+                break;
+            extendOverId = bottomZoneId;
+            bottomZoneId = zonesManager.bottomZones.getInitial(bottomZoneId);
+        }
+        const bottom = zones.zones[extendOverId].bounds.bottom;
+        if (bottom === zone.bounds.bottom)
+            return zone;
+        return {
+            ...zone,
+            bounds: {
+                ...zone.bounds,
+                bottom,
+            },
+        };
+    }
+    return zone;
+};
+/** 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(FrontstageManager.activeFrontstageDef);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const handleActivated = (args) => {
+            setDef(args.activatedFrontstageDef);
+        };
+        FrontstageManager.onFrontstageActivatedEvent.addListener(handleActivated);
+        return () => {
+            FrontstageManager.onFrontstageActivatedEvent.removeListener(handleActivated);
+        };
+    }, []);
+    return def;
+}
+/** 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=Frontstage.js.map