@itwin/appui-react 3.4.4 → 3.4.5

package/lib/cjs/appui-react/frontstage/FrontstageComposer.js

@@ -1,665 +1,665 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolGroupPanelContext = exports.isCollapsedToPanelState = exports.panelStateToIsCollapsed = exports.FrontstageComposer = void 0;
-const React = require("react");
-const core_bentley_1 = require("@itwin/core-bentley");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const StagePanel_1 = require("../stagepanels/StagePanel");
-const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
-const UiFramework_1 = require("../UiFramework");
-const ZoneDef_1 = require("../zones/ZoneDef");
-const FrontstageManager_1 = require("./FrontstageManager");
-const ModalFrontstage_1 = require("./ModalFrontstage");
-const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
-const getDefaultWidgetTabs = () => ({
-    [1]: [],
-    [2]: [],
-    [3]: [],
-    [4]: [],
-    [6]: [],
-    [7]: [],
-    [8]: [],
-    [9]: [],
-});
-const stagePanelLocations = [
-    appui_abstract_1.StagePanelLocation.Top,
-    appui_abstract_1.StagePanelLocation.TopMost,
-    appui_abstract_1.StagePanelLocation.Left,
-    appui_abstract_1.StagePanelLocation.Right,
-    appui_abstract_1.StagePanelLocation.Bottom,
-    appui_abstract_1.StagePanelLocation.BottomMost,
-];
-/** FrontstageComposer React component.
- * @deprecated
- * @public
- */
-class FrontstageComposer extends React.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this._isMounted = false;
-        this._handleFrontstageActivatedEvent = (args) => {
-            // istanbul ignore next - Save the nineZoneProps into the former FrontstageDef
-            if (this._frontstageDef)
-                this._frontstageDef.nineZone = { ...this.state.nineZone };
-            this._frontstageDef = args.activatedFrontstageDef;
-            // Get the id and nineZoneProps for the current FrontstageDef
-            const nineZone = this.determineNineZoneProps(this._frontstageDef);
-            const needInitialLayout = (this._frontstageDef && this._frontstageDef.nineZone) ? /* istanbul ignore next */ false : true;
-            const widgetTabs = this.determineWidgetTabs();
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({
-                    nineZone,
-                    widgetTabs,
-                }, () => {
-                    needInitialLayout && this.initializeFrontstageLayout(nineZone);
-                    this.layout();
-                    needInitialLayout && this.initializeZoneBounds();
-                });
-        };
-        this._handleModalFrontstageChangedEvent = (_args) => {
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({ modalFrontstageCount: FrontstageManager_1.FrontstageManager.modalFrontstageCount });
-        };
-        this._closeModalStage = () => {
-            FrontstageManager_1.FrontstageManager.closeModalFrontstage();
-        };
-        // istanbul ignore next
-        this._handleWindowResize = () => {
-            this.layout();
-        };
-        // istanbul ignore next
-        this.handleResize = (zoneId, resizeBy, handle, filledHeightDiff) => {
-            if (this._isMounted)
-                this.setState((prevState) => {
-                    const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleWidgetResize({ zoneId, resizeBy, handle, filledHeightDiff }, prevState.nineZone.zones);
-                    if (zones === prevState.nineZone.zones)
-                        return null;
-                    return {
-                        nineZone: {
-                            ...prevState.nineZone,
-                            zones,
-                        },
-                    };
-                });
-        };
-        this.handleTabClick = (widgetId, tabIndex) => {
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState((prevState) => {
-                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabClick(widgetId, tabIndex, prevState.nineZone);
-                    // istanbul ignore next
-                    if (nineZone === prevState.nineZone)
-                        return null;
-                    return {
-                        nineZone,
-                    };
-                }, () => {
-                    // TODO: use NineZoneManager notifications once available
-                    const manager = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager();
-                    const props = this.state.nineZone.zones;
-                    const zone = manager.findZoneWithWidget(widgetId, props);
-                    const widgets = zone ? zone.widgets : /* istanbul ignore next */ [widgetId];
-                    widgets.forEach((wId) => {
-                        const zoneDef = this.getZoneDef(wId);
-                        if (!zoneDef)
-                            return;
-                        const w = props.widgets[wId];
-                        const visibleWidgets = zoneDef.widgetDefs.filter((wd) => wd.isVisible);
-                        for (let i = 0; i < visibleWidgets.length; i++) {
-                            const widgetDef = visibleWidgets[i];
-                            let state = widgetDef.state;
-                            if (w.tabIndex === i)
-                                state = appui_abstract_1.WidgetState.Open;
-                            else if (state === appui_abstract_1.WidgetState.Open)
-                                state = appui_abstract_1.WidgetState.Closed;
-                            widgetDef.setWidgetState(state);
-                        }
-                    });
-                });
-        };
-        // istanbul ignore next
-        // eslint-disable-next-line deprecation/deprecation
-        this.handleTabDragStart = (widgetId, tabIndex, initialPosition, widgetBounds) => {
-            if (this._isMounted)
-                this.setState((prevState) => {
-                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabDragStart({ widgetId, tabIndex, initialPosition, widgetBounds }, prevState.nineZone);
-                    if (nineZone === prevState.nineZone)
-                        return null;
-                    return {
-                        nineZone,
-                    };
-                });
-        };
-        // istanbul ignore next
-        this.handleTabDragEnd = () => {
-            if (this._isMounted)
-                this.setState((prevState) => {
-                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabDragEnd(prevState.nineZone);
-                    if (nineZone === prevState.nineZone)
-                        return null;
-                    return {
-                        nineZone,
-                    };
-                });
-        };
-        // istanbul ignore next
-        this.handleTabDrag = (dragged) => {
-            if (this._isMounted)
-                this.setState((prevState) => {
-                    const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleWidgetTabDrag(dragged, prevState.nineZone.zones);
-                    if (zones === prevState.nineZone.zones)
-                        return null;
-                    return {
-                        nineZone: {
-                            ...prevState.nineZone,
-                            zones,
-                        },
-                    };
-                });
-        };
-        this._handleWidgetStateChangedEvent = () => {
-            const widgetTabs = this.determineWidgetTabs();
-            // istanbul ignore else
-            if (this._isMounted)
-                this.setState({
-                    widgetTabs,
-                });
-        };
-        this._handlePanelStateChangedEvent = ({ panelDef, panelState }) => {
-            this.setPanelState(panelDef.location, panelState);
-        };
-        // istanbul ignore next
-        this._handlePanelSizeChangedEvent = ({ panelDef, size }) => {
-            (size !== undefined) && this.handlePanelInitialize(panelDef.location, size);
-        };
-        this._handleToolActivatedEvent = () => {
-            // istanbul ignore next
-            if (!this._isMounted)
-                return;
-            this.setState((prevState) => {
-                const activeToolSettingsProvider = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider;
-                const manager = FrontstageManager_1.FrontstageManager.NineZoneManager;
-                const nineZone = activeToolSettingsProvider ? manager.showWidget(2, prevState.nineZone) : manager.hideWidget(2, prevState.nineZone);
-                if (nineZone === prevState.nineZone)
-                    return null;
-                return {
-                    nineZone,
-                };
-            });
-        };
-        // istanbul ignore next
-        this._handleToolPanelOpenedEvent = () => {
-            this.setAllowPointerUpSelection(true);
-        };
-        this._handlePointerDown = () => {
-            this.setAllowPointerUpSelection(false);
-        };
-        this._handlePointerUp = () => {
-            this.setAllowPointerUpSelection(false);
-        };
-        (_a = FrontstageManager_1.FrontstageManager.activeFrontstageDef) === null || _a === void 0 ? void 0 : _a.updateWidgetDefs();
-        this._frontstageDef = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
-        // Get the id and nineZoneProps for the current FrontstageDef
-        const nineZone = this.determineNineZoneProps(this._frontstageDef);
-        const widgetTabs = this._frontstageDef ? this.determineWidgetTabs() : getDefaultWidgetTabs();
-        this.state = {
-            allowPointerUpSelection: false,
-            nineZone,
-            modalFrontstageCount: FrontstageManager_1.FrontstageManager.modalFrontstageCount,
-            widgetTabs,
-        };
-    }
-    determineNineZoneProps(frontstageDef) {
-        let nineZone;
-        // istanbul ignore if
-        if (frontstageDef && frontstageDef.nineZone)
-            nineZone = { ...frontstageDef.nineZone };
-        else {
-            const isInFooterMode = frontstageDef ? frontstageDef.isInFooterMode : false;
-            nineZone = {
-                zones: FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setIsInFooterMode(isInFooterMode, (0, appui_layout_react_1.getDefaultZonesManagerProps)()),
-                nested: {
-                    panels: {
-                        inner: (0, appui_layout_react_1.getDefaultNineZoneStagePanelsManagerProps)(),
-                        outer: (0, appui_layout_react_1.getDefaultNineZoneStagePanelsManagerProps)(),
-                    },
-                },
-            };
-            for (const location of stagePanelLocations) {
-                const stagePanel = frontstageDef && frontstageDef.getStagePanelDef(location);
-                if (!stagePanel)
-                    continue;
-                const isCollapsed = (0, exports.panelStateToIsCollapsed)(stagePanel.panelState);
-                const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(location);
-                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setIsCollapsed(panelKey, isCollapsed, nineZone.nested);
-                nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.setNested(nested, nineZone);
-            }
-        }
-        return nineZone;
-    }
-    initializeZoneBounds() {
-        // istanbul ignore next
-        if (!this._isMounted)
-            return;
-        this.setState((prevState) => {
-            const frontstageDef = this._frontstageDef;
-            if (!frontstageDef)
-                return null;
-            const manager = FrontstageManager_1.FrontstageManager.NineZoneManager;
-            const zonesManager = manager.getZonesManager();
-            let zones = prevState.nineZone.zones;
-            for (const zoneId of appui_layout_react_1.widgetZoneIds) {
-                const zoneDef = frontstageDef.getZoneDef(zoneId);
-                if (!zoneDef)
-                    continue;
-                // istanbul ignore next
-                if (zoneDef.initialWidth)
-                    zones = zonesManager.setZoneWidth(zoneId, zoneDef.initialWidth, zones);
-            }
-            // istanbul ignore else
-            if (zones === prevState.nineZone.zones)
-                return null;
-            return {
-                nineZone: {
-                    ...prevState.nineZone,
-                    zones,
-                },
-            };
-        });
-    }
-    determineWidgetTabs() {
-        const defaultWidgetTabs = getDefaultWidgetTabs();
-        const widgetTabs = appui_layout_react_1.widgetZoneIds.reduce((acc, zoneId) => {
-            const zoneDef = this.getZoneDef(zoneId);
-            if (!zoneDef)
-                return acc;
-            const visibleWidgetDefs = zoneDef.widgetDefs.filter((widgetDef) => {
-                return widgetDef.isVisible && !widgetDef.isFloating;
-            });
-            const tabs = visibleWidgetDefs.map((widgetDef) => ({
-                badgeType: widgetDef.badgeType,
-                iconSpec: widgetDef.iconSpec,
-                title: widgetDef.label,
-                widgetName: widgetDef.id,
-            }));
-            return {
-                ...acc,
-                [zoneId]: tabs,
-            };
-        }, defaultWidgetTabs);
-        return widgetTabs;
-    }
-    initializeFrontstageLayout(nineZone) {
-        const nestedPanelsManager = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager();
-        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Top).minSize = 20;
-        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Top).collapseOffset = 0;
-        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).minSize = 20;
-        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).collapseOffset = 0;
-        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Top).minSize = 20;
-        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Top).collapseOffset = 0;
-        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).minSize = 20;
-        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).collapseOffset = 0;
-        appui_layout_react_1.widgetZoneIds.forEach((zoneId) => {
-            const zoneDef = this.getZoneDef(zoneId);
-            if (!zoneDef || zoneDef.zoneState === ZoneDef_1.ZoneState.Off)
-                return;
-            if (!zoneDef.allowsMerging)
-                this.setZoneAllowsMerging(zoneId, false);
-            if (zoneDef.mergeWithZone)
-                this.mergeZones(zoneId, zoneDef.mergeWithZone);
-            const zoneProps = nineZone.zones.zones[zoneId];
-            // istanbul ignore else
-            if (zoneProps.widgets.length >= 1) {
-                zoneProps.widgets.forEach((widgetId) => {
-                    zoneDef.widgetDefs
-                        .filter((widgetDef) => {
-                        return widgetDef.isVisible && !widgetDef.isToolSettings && !widgetDef.isStatusBar && !widgetDef.isFreeform;
-                    })
-                        .forEach((widgetDef, tabIndex) => {
-                        if (widgetDef.canOpen()) {
-                            this.handleWidgetStateChange(widgetId, tabIndex, true);
-                        }
-                    });
-                });
-            }
-        });
-    }
-    renderModalFrontstage() {
-        if (this.state.modalFrontstageCount === 0)
-            return null;
-        const activeModalFrontstage = FrontstageManager_1.FrontstageManager.activeModalFrontstage;
-        // istanbul ignore next
-        if (!activeModalFrontstage)
-            return null;
-        const { title, content, appBarRight } = activeModalFrontstage;
-        return (React.createElement(ModalFrontstage_1.ModalFrontstage, { isOpen: true, title: title, closeModal: this._closeModalStage, appBarRight: appBarRight }, content));
-    }
-    render() {
-        let content;
-        // istanbul ignore else
-        if (this._frontstageDef) {
-            // istanbul ignore else
-            if (this._frontstageDef.frontstageProvider) {
-                const frontstageRuntimeProps = {
-                    frontstageDef: this._frontstageDef,
-                    nineZone: this.state.nineZone,
-                    nineZoneChangeHandler: this,
-                    stagePanelChangeHandler: this,
-                    widgetChangeHandler: this,
-                    widgetTabs: this.state.widgetTabs,
-                    targetChangeHandler: this,
-                    zoneDefProvider: this,
-                };
-                content = React.cloneElement(this._frontstageDef.frontstageProvider.frontstage, { runtimeProps: frontstageRuntimeProps });
-            }
-            else {
-                core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), "FrontstageDef has no FrontstageProvider");
-                content = null;
-            }
-        }
-        return (React.createElement(exports.ToolGroupPanelContext.Provider, { value: this.state.allowPointerUpSelection },
-            React.createElement("div", { className: this.props.className, id: "uifw-frontstage-composer", onPointerDown: this._handlePointerDown, onPointerUp: this._handlePointerUp, style: this.props.style, onKeyDown: useEscapeSetFocusToHome_1.onEscapeSetFocusToHome, role: "presentation" },
-                this.renderModalFrontstage(),
-                content)));
-    }
-    componentDidMount() {
-        this._isMounted = true;
-        const needInitialLayout = (this._frontstageDef && this._frontstageDef.nineZone) ? /* istanbul ignore next */ false : true;
-        if (this._frontstageDef && needInitialLayout)
-            this.initializeFrontstageLayout(this.state.nineZone);
-        this.layout();
-        this.initializeZoneBounds();
-        window.addEventListener("resize", this._handleWindowResize, true);
-        FrontstageManager_1.FrontstageManager.onFrontstageActivatedEvent.addListener(this._handleFrontstageActivatedEvent);
-        FrontstageManager_1.FrontstageManager.onModalFrontstageChangedEvent.addListener(this._handleModalFrontstageChangedEvent);
-        FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.addListener(this._handleWidgetStateChangedEvent);
-        FrontstageManager_1.FrontstageManager.onPanelStateChangedEvent.addListener(this._handlePanelStateChangedEvent);
-        FrontstageManager_1.FrontstageManager.onPanelSizeChangedEvent.addListener(this._handlePanelSizeChangedEvent);
-        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(this._handleToolActivatedEvent);
-        FrontstageManager_1.FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);
-        FrontstageManager_1.FrontstageManager.onWidgetDefsUpdatedEvent.addListener(this._handleWidgetStateChangedEvent);
-    }
-    componentWillUnmount() {
-        this._isMounted = false;
-        window.removeEventListener("resize", this._handleWindowResize, true);
-        FrontstageManager_1.FrontstageManager.onFrontstageActivatedEvent.removeListener(this._handleFrontstageActivatedEvent);
-        FrontstageManager_1.FrontstageManager.onModalFrontstageChangedEvent.removeListener(this._handleModalFrontstageChangedEvent);
-        FrontstageManager_1.FrontstageManager.onPanelStateChangedEvent.removeListener(this._handlePanelStateChangedEvent);
-        FrontstageManager_1.FrontstageManager.onPanelSizeChangedEvent.removeListener(this._handlePanelSizeChangedEvent);
-        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(this._handleToolActivatedEvent);
-        FrontstageManager_1.FrontstageManager.onToolPanelOpenedEvent.removeListener(this._handleToolPanelOpenedEvent);
-        FrontstageManager_1.FrontstageManager.onWidgetDefsUpdatedEvent.removeListener(this._handleWidgetStateChangedEvent);
-    }
-    // istanbul ignore next
-    handleTargetChanged(zoneId, type, isTargeted) {
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const zones = isTargeted ? FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleTargetChanged({ zoneId, type }, prevState.nineZone.zones) :
-                    FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleTargetChanged(undefined, prevState.nineZone.zones);
-                if (zones === prevState.nineZone.zones)
-                    return null;
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        zones,
-                    },
-                };
-            });
-    }
-    /** @alpha */
-    handlePanelInitialize(panelLocation, size) {
-        const panel = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setSize(panel, size, prevState.nineZone.nested);
-                // istanbul ignore if
-                if (nested === prevState.nineZone.nested)
-                    return null;
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        nested,
-                    },
-                };
-            });
-    }
-    /** @alpha */
-    // istanbul ignore next
-    handlePanelResize(panelLocation, resizeBy) {
-        const nestedPanelKey = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().resize(nestedPanelKey, resizeBy, prevState.nineZone.nested);
-                if (nested === prevState.nineZone.nested)
-                    return null;
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        nested,
-                    },
-                };
-            }, () => {
-                const frontstage = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
-                const stagePanel = frontstage && frontstage.getStagePanelDef(panelLocation);
-                if (stagePanel) {
-                    const panels = this.state.nineZone.nested.panels[nestedPanelKey.id];
-                    const panel = appui_layout_react_1.StagePanelsManager.getPanel(nestedPanelKey.type, panels);
-                    const panelState = (0, exports.isCollapsedToPanelState)(panel.isCollapsed);
-                    stagePanel.panelState = panelState;
-                }
-            });
-    }
-    /** @alpha */
-    // istanbul ignore next
-    handlePanelPaneTargetChange(panelLocation, paneIndex) {
-        const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
-        FrontstageManager_1.FrontstageManager.NineZoneManager.setPaneTarget(paneIndex === undefined ? undefined : {
-            panelId: panelKey.id,
-            panelType: panelKey.type,
-            paneIndex,
-        });
-    }
-    /** @alpha */
-    // istanbul ignore next
-    handlePanelTargetChange(panelLocation) {
-        const panelKey = panelLocation === undefined ? undefined : (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
-        FrontstageManager_1.FrontstageManager.NineZoneManager.setPanelTarget(panelKey ? {
-            panelId: panelKey.id,
-            panelType: panelKey.type,
-        } : undefined);
-    }
-    /** @alpha */
-    handleTogglePanelCollapse(panelLocation) {
-        const frontstage = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
-        // istanbul ignore if
-        if (!frontstage)
-            return;
-        const stagePanel = frontstage.getStagePanelDef(panelLocation);
-        // istanbul ignore if
-        if (!stagePanel)
-            return;
-        const isCollapsed = (0, exports.panelStateToIsCollapsed)(stagePanel.panelState);
-        const panelState = isCollapsed ? /* istanbul ignore next */ StagePanelDef_1.StagePanelState.Open : StagePanelDef_1.StagePanelState.Minimized;
-        stagePanel.panelState = panelState;
-    }
-    handleFloatingZonesBoundsChange(bounds) {
-        // istanbul ignore next
-        if (!this._isMounted)
-            return;
-        this.setState((prevState) => {
-            const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setFloatingZonesBounds(bounds, prevState.nineZone.zones);
-            if (zones === prevState.nineZone.zones)
-                return null;
-            return {
-                nineZone: {
-                    ...prevState.nineZone,
-                    zones,
-                },
-            };
-        });
-    }
-    handleZonesBoundsChange(bounds) {
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setZonesBounds(bounds, prevState.nineZone.zones);
-                // istanbul ignore else
-                if (zones === prevState.nineZone.zones)
-                    return null;
-                // istanbul ignore next
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        zones,
-                    },
-                };
-            });
-    }
-    // eslint-disable-next-line deprecation/deprecation
-    handleWidgetStateChange(widgetId, tabIndex, isOpening) {
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const widget = prevState.nineZone.zones.widgets[widgetId];
-                if (isOpening && widget.tabIndex === tabIndex)
-                    return null;
-                if (!isOpening && widget.tabIndex !== tabIndex)
-                    return null;
-                const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabClick(widgetId, tabIndex, prevState.nineZone);
-                // istanbul ignore if
-                if (nineZone === prevState.nineZone)
-                    return null;
-                return {
-                    nineZone,
-                };
-            });
-    }
-    getZoneDef(zoneId) {
-        if (!this._frontstageDef) {
-            core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), "getZoneDef: There is no active frontstage");
-            return undefined;
-        }
-        const zoneDef = this._frontstageDef.getZoneDef(zoneId);
-        // Zones can be undefined in a Frontstage
-        return zoneDef;
-    }
-    // istanbul ignore next
-    getGhostOutlineBounds(zoneId) {
-        const manager = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager();
-        return manager.getGhostOutlineBounds(zoneId, this.state.nineZone.zones);
-    }
-    setZoneAllowsMerging(zoneId, allowsMerging) {
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setAllowsMerging(zoneId, allowsMerging, prevState.nineZone.zones);
-                if (zones === prevState.nineZone.zones)
-                    return null;
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        zones,
-                    },
-                };
-            });
-    }
-    mergeZones(toMergeId, targetId) {
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().mergeZone(toMergeId, targetId, prevState.nineZone.zones);
-                // istanbul ignore else
-                if (zones === prevState.nineZone.zones)
-                    return null;
-                // istanbul ignore next
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        zones,
-                    },
-                };
-            });
-    }
-    layout() {
-        const zones = document.getElementById("uifw-ninezone-zones-area");
-        const floatingZones = document.getElementById("uifw-ninezone-floating-zones-area");
-        if (!zones || !floatingZones)
-            return;
-        let floatingBounds = core_react_1.Rectangle.create(floatingZones.getBoundingClientRect());
-        const bounds = core_react_1.Rectangle.create(zones.getBoundingClientRect());
-        const offset = bounds.topLeft().getOffsetTo(floatingBounds.topLeft());
-        floatingBounds = floatingBounds.setPosition(offset);
-        this.handleZonesBoundsChange(bounds);
-        this.handleFloatingZonesBoundsChange(floatingBounds);
-    }
-    setAllowPointerUpSelection(allowPointerUpSelection) {
-        // istanbul ignore if
-        if (!this._isMounted)
-            return;
-        this.setState((prevState) => {
-            // istanbul ignore if
-            if (prevState.allowPointerUpSelection === allowPointerUpSelection)
-                return null;
-            return {
-                allowPointerUpSelection,
-            };
-        });
-    }
-    setPanelState(location, panelState) {
-        const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(location);
-        const isCollapsed = (0, exports.panelStateToIsCollapsed)(panelState);
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState((prevState) => {
-                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setIsCollapsed(panelKey, isCollapsed, prevState.nineZone.nested);
-                // istanbul ignore if
-                if (nested === prevState.nineZone.nested)
-                    return null;
-                return {
-                    nineZone: {
-                        ...prevState.nineZone,
-                        nested,
-                    },
-                };
-            });
-    }
-}
-exports.FrontstageComposer = FrontstageComposer;
-/** @internal */
-const panelStateToIsCollapsed = (panelState) => {
-    switch (panelState) {
-        case StagePanelDef_1.StagePanelState.Minimized:
-        case StagePanelDef_1.StagePanelState.Off:
-            return true;
-        default:
-            return false;
-    }
-};
-exports.panelStateToIsCollapsed = panelStateToIsCollapsed;
-/** @internal */
-const isCollapsedToPanelState = (isCollapsed) => {
-    switch (isCollapsed) {
-        case true:
-            return StagePanelDef_1.StagePanelState.Minimized;
-        default:
-            return StagePanelDef_1.StagePanelState.Open;
-    }
-};
-exports.isCollapsedToPanelState = isCollapsedToPanelState;
-/** @internal */
-exports.ToolGroupPanelContext = React.createContext(false); // eslint-disable-line @typescript-eslint/naming-convention
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolGroupPanelContext = exports.isCollapsedToPanelState = exports.panelStateToIsCollapsed = exports.FrontstageComposer = void 0;
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const StagePanel_1 = require("../stagepanels/StagePanel");
+const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
+const UiFramework_1 = require("../UiFramework");
+const ZoneDef_1 = require("../zones/ZoneDef");
+const FrontstageManager_1 = require("./FrontstageManager");
+const ModalFrontstage_1 = require("./ModalFrontstage");
+const useEscapeSetFocusToHome_1 = require("../hooks/useEscapeSetFocusToHome");
+const getDefaultWidgetTabs = () => ({
+    [1]: [],
+    [2]: [],
+    [3]: [],
+    [4]: [],
+    [6]: [],
+    [7]: [],
+    [8]: [],
+    [9]: [],
+});
+const stagePanelLocations = [
+    appui_abstract_1.StagePanelLocation.Top,
+    appui_abstract_1.StagePanelLocation.TopMost,
+    appui_abstract_1.StagePanelLocation.Left,
+    appui_abstract_1.StagePanelLocation.Right,
+    appui_abstract_1.StagePanelLocation.Bottom,
+    appui_abstract_1.StagePanelLocation.BottomMost,
+];
+/** FrontstageComposer React component.
+ * @deprecated
+ * @public
+ */
+class FrontstageComposer extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this._isMounted = false;
+        this._handleFrontstageActivatedEvent = (args) => {
+            // istanbul ignore next - Save the nineZoneProps into the former FrontstageDef
+            if (this._frontstageDef)
+                this._frontstageDef.nineZone = { ...this.state.nineZone };
+            this._frontstageDef = args.activatedFrontstageDef;
+            // Get the id and nineZoneProps for the current FrontstageDef
+            const nineZone = this.determineNineZoneProps(this._frontstageDef);
+            const needInitialLayout = (this._frontstageDef && this._frontstageDef.nineZone) ? /* istanbul ignore next */ false : true;
+            const widgetTabs = this.determineWidgetTabs();
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({
+                    nineZone,
+                    widgetTabs,
+                }, () => {
+                    needInitialLayout && this.initializeFrontstageLayout(nineZone);
+                    this.layout();
+                    needInitialLayout && this.initializeZoneBounds();
+                });
+        };
+        this._handleModalFrontstageChangedEvent = (_args) => {
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({ modalFrontstageCount: FrontstageManager_1.FrontstageManager.modalFrontstageCount });
+        };
+        this._closeModalStage = () => {
+            FrontstageManager_1.FrontstageManager.closeModalFrontstage();
+        };
+        // istanbul ignore next
+        this._handleWindowResize = () => {
+            this.layout();
+        };
+        // istanbul ignore next
+        this.handleResize = (zoneId, resizeBy, handle, filledHeightDiff) => {
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleWidgetResize({ zoneId, resizeBy, handle, filledHeightDiff }, prevState.nineZone.zones);
+                    if (zones === prevState.nineZone.zones)
+                        return null;
+                    return {
+                        nineZone: {
+                            ...prevState.nineZone,
+                            zones,
+                        },
+                    };
+                });
+        };
+        this.handleTabClick = (widgetId, tabIndex) => {
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabClick(widgetId, tabIndex, prevState.nineZone);
+                    // istanbul ignore next
+                    if (nineZone === prevState.nineZone)
+                        return null;
+                    return {
+                        nineZone,
+                    };
+                }, () => {
+                    // TODO: use NineZoneManager notifications once available
+                    const manager = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager();
+                    const props = this.state.nineZone.zones;
+                    const zone = manager.findZoneWithWidget(widgetId, props);
+                    const widgets = zone ? zone.widgets : /* istanbul ignore next */ [widgetId];
+                    widgets.forEach((wId) => {
+                        const zoneDef = this.getZoneDef(wId);
+                        if (!zoneDef)
+                            return;
+                        const w = props.widgets[wId];
+                        const visibleWidgets = zoneDef.widgetDefs.filter((wd) => wd.isVisible);
+                        for (let i = 0; i < visibleWidgets.length; i++) {
+                            const widgetDef = visibleWidgets[i];
+                            let state = widgetDef.state;
+                            if (w.tabIndex === i)
+                                state = appui_abstract_1.WidgetState.Open;
+                            else if (state === appui_abstract_1.WidgetState.Open)
+                                state = appui_abstract_1.WidgetState.Closed;
+                            widgetDef.setWidgetState(state);
+                        }
+                    });
+                });
+        };
+        // istanbul ignore next
+        // eslint-disable-next-line deprecation/deprecation
+        this.handleTabDragStart = (widgetId, tabIndex, initialPosition, widgetBounds) => {
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabDragStart({ widgetId, tabIndex, initialPosition, widgetBounds }, prevState.nineZone);
+                    if (nineZone === prevState.nineZone)
+                        return null;
+                    return {
+                        nineZone,
+                    };
+                });
+        };
+        // istanbul ignore next
+        this.handleTabDragEnd = () => {
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabDragEnd(prevState.nineZone);
+                    if (nineZone === prevState.nineZone)
+                        return null;
+                    return {
+                        nineZone,
+                    };
+                });
+        };
+        // istanbul ignore next
+        this.handleTabDrag = (dragged) => {
+            if (this._isMounted)
+                this.setState((prevState) => {
+                    const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleWidgetTabDrag(dragged, prevState.nineZone.zones);
+                    if (zones === prevState.nineZone.zones)
+                        return null;
+                    return {
+                        nineZone: {
+                            ...prevState.nineZone,
+                            zones,
+                        },
+                    };
+                });
+        };
+        this._handleWidgetStateChangedEvent = () => {
+            const widgetTabs = this.determineWidgetTabs();
+            // istanbul ignore else
+            if (this._isMounted)
+                this.setState({
+                    widgetTabs,
+                });
+        };
+        this._handlePanelStateChangedEvent = ({ panelDef, panelState }) => {
+            this.setPanelState(panelDef.location, panelState);
+        };
+        // istanbul ignore next
+        this._handlePanelSizeChangedEvent = ({ panelDef, size }) => {
+            (size !== undefined) && this.handlePanelInitialize(panelDef.location, size);
+        };
+        this._handleToolActivatedEvent = () => {
+            // istanbul ignore next
+            if (!this._isMounted)
+                return;
+            this.setState((prevState) => {
+                const activeToolSettingsProvider = FrontstageManager_1.FrontstageManager.activeToolSettingsProvider;
+                const manager = FrontstageManager_1.FrontstageManager.NineZoneManager;
+                const nineZone = activeToolSettingsProvider ? manager.showWidget(2, prevState.nineZone) : manager.hideWidget(2, prevState.nineZone);
+                if (nineZone === prevState.nineZone)
+                    return null;
+                return {
+                    nineZone,
+                };
+            });
+        };
+        // istanbul ignore next
+        this._handleToolPanelOpenedEvent = () => {
+            this.setAllowPointerUpSelection(true);
+        };
+        this._handlePointerDown = () => {
+            this.setAllowPointerUpSelection(false);
+        };
+        this._handlePointerUp = () => {
+            this.setAllowPointerUpSelection(false);
+        };
+        (_a = FrontstageManager_1.FrontstageManager.activeFrontstageDef) === null || _a === void 0 ? void 0 : _a.updateWidgetDefs();
+        this._frontstageDef = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
+        // Get the id and nineZoneProps for the current FrontstageDef
+        const nineZone = this.determineNineZoneProps(this._frontstageDef);
+        const widgetTabs = this._frontstageDef ? this.determineWidgetTabs() : getDefaultWidgetTabs();
+        this.state = {
+            allowPointerUpSelection: false,
+            nineZone,
+            modalFrontstageCount: FrontstageManager_1.FrontstageManager.modalFrontstageCount,
+            widgetTabs,
+        };
+    }
+    determineNineZoneProps(frontstageDef) {
+        let nineZone;
+        // istanbul ignore if
+        if (frontstageDef && frontstageDef.nineZone)
+            nineZone = { ...frontstageDef.nineZone };
+        else {
+            const isInFooterMode = frontstageDef ? frontstageDef.isInFooterMode : false;
+            nineZone = {
+                zones: FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setIsInFooterMode(isInFooterMode, (0, appui_layout_react_1.getDefaultZonesManagerProps)()),
+                nested: {
+                    panels: {
+                        inner: (0, appui_layout_react_1.getDefaultNineZoneStagePanelsManagerProps)(),
+                        outer: (0, appui_layout_react_1.getDefaultNineZoneStagePanelsManagerProps)(),
+                    },
+                },
+            };
+            for (const location of stagePanelLocations) {
+                const stagePanel = frontstageDef && frontstageDef.getStagePanelDef(location);
+                if (!stagePanel)
+                    continue;
+                const isCollapsed = (0, exports.panelStateToIsCollapsed)(stagePanel.panelState);
+                const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(location);
+                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setIsCollapsed(panelKey, isCollapsed, nineZone.nested);
+                nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.setNested(nested, nineZone);
+            }
+        }
+        return nineZone;
+    }
+    initializeZoneBounds() {
+        // istanbul ignore next
+        if (!this._isMounted)
+            return;
+        this.setState((prevState) => {
+            const frontstageDef = this._frontstageDef;
+            if (!frontstageDef)
+                return null;
+            const manager = FrontstageManager_1.FrontstageManager.NineZoneManager;
+            const zonesManager = manager.getZonesManager();
+            let zones = prevState.nineZone.zones;
+            for (const zoneId of appui_layout_react_1.widgetZoneIds) {
+                const zoneDef = frontstageDef.getZoneDef(zoneId);
+                if (!zoneDef)
+                    continue;
+                // istanbul ignore next
+                if (zoneDef.initialWidth)
+                    zones = zonesManager.setZoneWidth(zoneId, zoneDef.initialWidth, zones);
+            }
+            // istanbul ignore else
+            if (zones === prevState.nineZone.zones)
+                return null;
+            return {
+                nineZone: {
+                    ...prevState.nineZone,
+                    zones,
+                },
+            };
+        });
+    }
+    determineWidgetTabs() {
+        const defaultWidgetTabs = getDefaultWidgetTabs();
+        const widgetTabs = appui_layout_react_1.widgetZoneIds.reduce((acc, zoneId) => {
+            const zoneDef = this.getZoneDef(zoneId);
+            if (!zoneDef)
+                return acc;
+            const visibleWidgetDefs = zoneDef.widgetDefs.filter((widgetDef) => {
+                return widgetDef.isVisible && !widgetDef.isFloating;
+            });
+            const tabs = visibleWidgetDefs.map((widgetDef) => ({
+                badgeType: widgetDef.badgeType,
+                iconSpec: widgetDef.iconSpec,
+                title: widgetDef.label,
+                widgetName: widgetDef.id,
+            }));
+            return {
+                ...acc,
+                [zoneId]: tabs,
+            };
+        }, defaultWidgetTabs);
+        return widgetTabs;
+    }
+    initializeFrontstageLayout(nineZone) {
+        const nestedPanelsManager = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager();
+        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Top).minSize = 20;
+        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Top).collapseOffset = 0;
+        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).minSize = 20;
+        nestedPanelsManager.getPanelsManager("inner").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).collapseOffset = 0;
+        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Top).minSize = 20;
+        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Top).collapseOffset = 0;
+        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).minSize = 20;
+        nestedPanelsManager.getPanelsManager("outer").getPanelManager(appui_layout_react_1.StagePanelType.Bottom).collapseOffset = 0;
+        appui_layout_react_1.widgetZoneIds.forEach((zoneId) => {
+            const zoneDef = this.getZoneDef(zoneId);
+            if (!zoneDef || zoneDef.zoneState === ZoneDef_1.ZoneState.Off)
+                return;
+            if (!zoneDef.allowsMerging)
+                this.setZoneAllowsMerging(zoneId, false);
+            if (zoneDef.mergeWithZone)
+                this.mergeZones(zoneId, zoneDef.mergeWithZone);
+            const zoneProps = nineZone.zones.zones[zoneId];
+            // istanbul ignore else
+            if (zoneProps.widgets.length >= 1) {
+                zoneProps.widgets.forEach((widgetId) => {
+                    zoneDef.widgetDefs
+                        .filter((widgetDef) => {
+                        return widgetDef.isVisible && !widgetDef.isToolSettings && !widgetDef.isStatusBar && !widgetDef.isFreeform;
+                    })
+                        .forEach((widgetDef, tabIndex) => {
+                        if (widgetDef.canOpen()) {
+                            this.handleWidgetStateChange(widgetId, tabIndex, true);
+                        }
+                    });
+                });
+            }
+        });
+    }
+    renderModalFrontstage() {
+        if (this.state.modalFrontstageCount === 0)
+            return null;
+        const activeModalFrontstage = FrontstageManager_1.FrontstageManager.activeModalFrontstage;
+        // istanbul ignore next
+        if (!activeModalFrontstage)
+            return null;
+        const { title, content, appBarRight } = activeModalFrontstage;
+        return (React.createElement(ModalFrontstage_1.ModalFrontstage, { isOpen: true, title: title, closeModal: this._closeModalStage, appBarRight: appBarRight }, content));
+    }
+    render() {
+        let content;
+        // istanbul ignore else
+        if (this._frontstageDef) {
+            // istanbul ignore else
+            if (this._frontstageDef.frontstageProvider) {
+                const frontstageRuntimeProps = {
+                    frontstageDef: this._frontstageDef,
+                    nineZone: this.state.nineZone,
+                    nineZoneChangeHandler: this,
+                    stagePanelChangeHandler: this,
+                    widgetChangeHandler: this,
+                    widgetTabs: this.state.widgetTabs,
+                    targetChangeHandler: this,
+                    zoneDefProvider: this,
+                };
+                content = React.cloneElement(this._frontstageDef.frontstageProvider.frontstage, { runtimeProps: frontstageRuntimeProps });
+            }
+            else {
+                core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), "FrontstageDef has no FrontstageProvider");
+                content = null;
+            }
+        }
+        return (React.createElement(exports.ToolGroupPanelContext.Provider, { value: this.state.allowPointerUpSelection },
+            React.createElement("div", { className: this.props.className, id: "uifw-frontstage-composer", onPointerDown: this._handlePointerDown, onPointerUp: this._handlePointerUp, style: this.props.style, onKeyDown: useEscapeSetFocusToHome_1.onEscapeSetFocusToHome, role: "presentation" },
+                this.renderModalFrontstage(),
+                content)));
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        const needInitialLayout = (this._frontstageDef && this._frontstageDef.nineZone) ? /* istanbul ignore next */ false : true;
+        if (this._frontstageDef && needInitialLayout)
+            this.initializeFrontstageLayout(this.state.nineZone);
+        this.layout();
+        this.initializeZoneBounds();
+        window.addEventListener("resize", this._handleWindowResize, true);
+        FrontstageManager_1.FrontstageManager.onFrontstageActivatedEvent.addListener(this._handleFrontstageActivatedEvent);
+        FrontstageManager_1.FrontstageManager.onModalFrontstageChangedEvent.addListener(this._handleModalFrontstageChangedEvent);
+        FrontstageManager_1.FrontstageManager.onWidgetStateChangedEvent.addListener(this._handleWidgetStateChangedEvent);
+        FrontstageManager_1.FrontstageManager.onPanelStateChangedEvent.addListener(this._handlePanelStateChangedEvent);
+        FrontstageManager_1.FrontstageManager.onPanelSizeChangedEvent.addListener(this._handlePanelSizeChangedEvent);
+        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.addListener(this._handleToolActivatedEvent);
+        FrontstageManager_1.FrontstageManager.onToolPanelOpenedEvent.addListener(this._handleToolPanelOpenedEvent);
+        FrontstageManager_1.FrontstageManager.onWidgetDefsUpdatedEvent.addListener(this._handleWidgetStateChangedEvent);
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        window.removeEventListener("resize", this._handleWindowResize, true);
+        FrontstageManager_1.FrontstageManager.onFrontstageActivatedEvent.removeListener(this._handleFrontstageActivatedEvent);
+        FrontstageManager_1.FrontstageManager.onModalFrontstageChangedEvent.removeListener(this._handleModalFrontstageChangedEvent);
+        FrontstageManager_1.FrontstageManager.onPanelStateChangedEvent.removeListener(this._handlePanelStateChangedEvent);
+        FrontstageManager_1.FrontstageManager.onPanelSizeChangedEvent.removeListener(this._handlePanelSizeChangedEvent);
+        FrontstageManager_1.FrontstageManager.onToolActivatedEvent.removeListener(this._handleToolActivatedEvent);
+        FrontstageManager_1.FrontstageManager.onToolPanelOpenedEvent.removeListener(this._handleToolPanelOpenedEvent);
+        FrontstageManager_1.FrontstageManager.onWidgetDefsUpdatedEvent.removeListener(this._handleWidgetStateChangedEvent);
+    }
+    // istanbul ignore next
+    handleTargetChanged(zoneId, type, isTargeted) {
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const zones = isTargeted ? FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleTargetChanged({ zoneId, type }, prevState.nineZone.zones) :
+                    FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().handleTargetChanged(undefined, prevState.nineZone.zones);
+                if (zones === prevState.nineZone.zones)
+                    return null;
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        zones,
+                    },
+                };
+            });
+    }
+    /** @alpha */
+    handlePanelInitialize(panelLocation, size) {
+        const panel = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setSize(panel, size, prevState.nineZone.nested);
+                // istanbul ignore if
+                if (nested === prevState.nineZone.nested)
+                    return null;
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        nested,
+                    },
+                };
+            });
+    }
+    /** @alpha */
+    // istanbul ignore next
+    handlePanelResize(panelLocation, resizeBy) {
+        const nestedPanelKey = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().resize(nestedPanelKey, resizeBy, prevState.nineZone.nested);
+                if (nested === prevState.nineZone.nested)
+                    return null;
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        nested,
+                    },
+                };
+            }, () => {
+                const frontstage = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
+                const stagePanel = frontstage && frontstage.getStagePanelDef(panelLocation);
+                if (stagePanel) {
+                    const panels = this.state.nineZone.nested.panels[nestedPanelKey.id];
+                    const panel = appui_layout_react_1.StagePanelsManager.getPanel(nestedPanelKey.type, panels);
+                    const panelState = (0, exports.isCollapsedToPanelState)(panel.isCollapsed);
+                    stagePanel.panelState = panelState;
+                }
+            });
+    }
+    /** @alpha */
+    // istanbul ignore next
+    handlePanelPaneTargetChange(panelLocation, paneIndex) {
+        const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
+        FrontstageManager_1.FrontstageManager.NineZoneManager.setPaneTarget(paneIndex === undefined ? undefined : {
+            panelId: panelKey.id,
+            panelType: panelKey.type,
+            paneIndex,
+        });
+    }
+    /** @alpha */
+    // istanbul ignore next
+    handlePanelTargetChange(panelLocation) {
+        const panelKey = panelLocation === undefined ? undefined : (0, StagePanel_1.getNestedStagePanelKey)(panelLocation);
+        FrontstageManager_1.FrontstageManager.NineZoneManager.setPanelTarget(panelKey ? {
+            panelId: panelKey.id,
+            panelType: panelKey.type,
+        } : undefined);
+    }
+    /** @alpha */
+    handleTogglePanelCollapse(panelLocation) {
+        const frontstage = FrontstageManager_1.FrontstageManager.activeFrontstageDef;
+        // istanbul ignore if
+        if (!frontstage)
+            return;
+        const stagePanel = frontstage.getStagePanelDef(panelLocation);
+        // istanbul ignore if
+        if (!stagePanel)
+            return;
+        const isCollapsed = (0, exports.panelStateToIsCollapsed)(stagePanel.panelState);
+        const panelState = isCollapsed ? /* istanbul ignore next */ StagePanelDef_1.StagePanelState.Open : StagePanelDef_1.StagePanelState.Minimized;
+        stagePanel.panelState = panelState;
+    }
+    handleFloatingZonesBoundsChange(bounds) {
+        // istanbul ignore next
+        if (!this._isMounted)
+            return;
+        this.setState((prevState) => {
+            const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setFloatingZonesBounds(bounds, prevState.nineZone.zones);
+            if (zones === prevState.nineZone.zones)
+                return null;
+            return {
+                nineZone: {
+                    ...prevState.nineZone,
+                    zones,
+                },
+            };
+        });
+    }
+    handleZonesBoundsChange(bounds) {
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setZonesBounds(bounds, prevState.nineZone.zones);
+                // istanbul ignore else
+                if (zones === prevState.nineZone.zones)
+                    return null;
+                // istanbul ignore next
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        zones,
+                    },
+                };
+            });
+    }
+    // eslint-disable-next-line deprecation/deprecation
+    handleWidgetStateChange(widgetId, tabIndex, isOpening) {
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const widget = prevState.nineZone.zones.widgets[widgetId];
+                if (isOpening && widget.tabIndex === tabIndex)
+                    return null;
+                if (!isOpening && widget.tabIndex !== tabIndex)
+                    return null;
+                const nineZone = FrontstageManager_1.FrontstageManager.NineZoneManager.handleWidgetTabClick(widgetId, tabIndex, prevState.nineZone);
+                // istanbul ignore if
+                if (nineZone === prevState.nineZone)
+                    return null;
+                return {
+                    nineZone,
+                };
+            });
+    }
+    getZoneDef(zoneId) {
+        if (!this._frontstageDef) {
+            core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), "getZoneDef: There is no active frontstage");
+            return undefined;
+        }
+        const zoneDef = this._frontstageDef.getZoneDef(zoneId);
+        // Zones can be undefined in a Frontstage
+        return zoneDef;
+    }
+    // istanbul ignore next
+    getGhostOutlineBounds(zoneId) {
+        const manager = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager();
+        return manager.getGhostOutlineBounds(zoneId, this.state.nineZone.zones);
+    }
+    setZoneAllowsMerging(zoneId, allowsMerging) {
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().setAllowsMerging(zoneId, allowsMerging, prevState.nineZone.zones);
+                if (zones === prevState.nineZone.zones)
+                    return null;
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        zones,
+                    },
+                };
+            });
+    }
+    mergeZones(toMergeId, targetId) {
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const zones = FrontstageManager_1.FrontstageManager.NineZoneManager.getZonesManager().mergeZone(toMergeId, targetId, prevState.nineZone.zones);
+                // istanbul ignore else
+                if (zones === prevState.nineZone.zones)
+                    return null;
+                // istanbul ignore next
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        zones,
+                    },
+                };
+            });
+    }
+    layout() {
+        const zones = document.getElementById("uifw-ninezone-zones-area");
+        const floatingZones = document.getElementById("uifw-ninezone-floating-zones-area");
+        if (!zones || !floatingZones)
+            return;
+        let floatingBounds = core_react_1.Rectangle.create(floatingZones.getBoundingClientRect());
+        const bounds = core_react_1.Rectangle.create(zones.getBoundingClientRect());
+        const offset = bounds.topLeft().getOffsetTo(floatingBounds.topLeft());
+        floatingBounds = floatingBounds.setPosition(offset);
+        this.handleZonesBoundsChange(bounds);
+        this.handleFloatingZonesBoundsChange(floatingBounds);
+    }
+    setAllowPointerUpSelection(allowPointerUpSelection) {
+        // istanbul ignore if
+        if (!this._isMounted)
+            return;
+        this.setState((prevState) => {
+            // istanbul ignore if
+            if (prevState.allowPointerUpSelection === allowPointerUpSelection)
+                return null;
+            return {
+                allowPointerUpSelection,
+            };
+        });
+    }
+    setPanelState(location, panelState) {
+        const panelKey = (0, StagePanel_1.getNestedStagePanelKey)(location);
+        const isCollapsed = (0, exports.panelStateToIsCollapsed)(panelState);
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState((prevState) => {
+                const nested = FrontstageManager_1.FrontstageManager.NineZoneManager.getNestedPanelsManager().setIsCollapsed(panelKey, isCollapsed, prevState.nineZone.nested);
+                // istanbul ignore if
+                if (nested === prevState.nineZone.nested)
+                    return null;
+                return {
+                    nineZone: {
+                        ...prevState.nineZone,
+                        nested,
+                    },
+                };
+            });
+    }
+}
+exports.FrontstageComposer = FrontstageComposer;
+/** @internal */
+const panelStateToIsCollapsed = (panelState) => {
+    switch (panelState) {
+        case StagePanelDef_1.StagePanelState.Minimized:
+        case StagePanelDef_1.StagePanelState.Off:
+            return true;
+        default:
+            return false;
+    }
+};
+exports.panelStateToIsCollapsed = panelStateToIsCollapsed;
+/** @internal */
+const isCollapsedToPanelState = (isCollapsed) => {
+    switch (isCollapsed) {
+        case true:
+            return StagePanelDef_1.StagePanelState.Minimized;
+        default:
+            return StagePanelDef_1.StagePanelState.Open;
+    }
+};
+exports.isCollapsedToPanelState = isCollapsedToPanelState;
+/** @internal */
+exports.ToolGroupPanelContext = React.createContext(false); // eslint-disable-line @typescript-eslint/naming-convention
 //# sourceMappingURL=FrontstageComposer.js.map