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

package/lib/esm/appui-react/stagepanels/FrameworkStagePanel.d.ts

@@ -0,0 +1,62 @@
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./FrameworkStagePanel.scss";
+import * as React from "react";
+import { StagePanelLocation } from "@itwin/appui-abstract";
+import { NineZoneStagePanelManagerProps, WidgetZoneId, ZonesManagerWidgetsProps } from "@itwin/appui-layout-react";
+import { StagePanelChangeHandler, WidgetChangeHandler } from "../frontstage/FrontstageComposer";
+import { WidgetTabs } from "../widgets/WidgetStack";
+import { ZoneLocation } from "../zones/Zone";
+import { StagePanelState } from "./StagePanelDef";
+import { WidgetDef } from "../widgets/WidgetDef";
+/** Properties of a [[FrameworkStagePanel]] component
+ * @internal
+ */
+export interface FrameworkStagePanelProps {
+    allowedZones?: ZoneLocation[];
+    changeHandler: StagePanelChangeHandler;
+    draggedWidgetId: WidgetZoneId | undefined;
+    getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>;
+    header?: React.ReactNode;
+    initialSize?: number;
+    isInFooterMode: boolean;
+    isTargeted: boolean;
+    maxSize?: number;
+    minSize?: number;
+    location: StagePanelLocation;
+    panel: NineZoneStagePanelManagerProps;
+    panelState: StagePanelState;
+    renderPane: (widgetDefId: WidgetDef["id"]) => React.ReactNode;
+    resizable: boolean;
+    widgetChangeHandler: WidgetChangeHandler;
+    stagePanelWidgets: ReadonlyArray<WidgetDef["id"]>;
+    widgets: ZonesManagerWidgetsProps;
+    widgetTabs: WidgetTabs;
+}
+/** Stage Panel React component.
+ * @internal
+ */
+export declare class FrameworkStagePanel extends React.PureComponent<FrameworkStagePanelProps> {
+    private _measurer;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.ReactNode;
+    private setMinMaxSize;
+    private _handleResize;
+    private _handleTargetChanged;
+    private _handleToggleCollapse;
+    private _handlePaneTargetChanged;
+    private initializeSize;
+}
+/** @internal */
+export interface SplitterPaneTargetProps {
+    onTargetChanged: (paneIndex: number | undefined) => void;
+    paneIndex: number;
+}
+/** @internal */
+export declare class SplitterPaneTarget extends React.PureComponent<SplitterPaneTargetProps> {
+    render(): JSX.Element;
+    private _handleTargetChanged;
+}
+//# sourceMappingURL=FrameworkStagePanel.d.ts.map

package/lib/esm/appui-react/stagepanels/FrameworkStagePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameworkStagePanel.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/FrameworkStagePanel.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,8BAA8B,EACW,YAAY,EAAE,wBAAwB,EAChF,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGhG,OAAO,EAAe,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,aAAa,EAAE,uBAAuB,CAAC;IACvC,eAAe,EAAE,YAAY,GAAG,SAAS,CAAC;IAC1C,mBAAmB,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,KAAK,EAAE,8BAA8B,CAAC;IACtC,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,iBAAiB,EAAE,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAClD,OAAO,EAAE,wBAAwB,CAAC;IAClC,UAAU,EAAE,UAAU,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC;IACpF,OAAO,CAAC,SAAS,CAAqC;IAEtC,iBAAiB,IAAI,IAAI;IAKzB,kBAAkB,IAAI,IAAI;IAK1B,MAAM,IAAI,KAAK,CAAC,SAAS;IA2GzC,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,wBAAwB,CAE9B;IAEF,OAAO,CAAC,cAAc;CAcvB;AAED,gBAAgB;AAChB,MAAM,WAAW,uBAAuB;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,gBAAgB;AAChB,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC;IAClE,MAAM;IAQtB,OAAO,CAAC,oBAAoB,CAG1B;CACH"}

package/lib/esm/appui-react/stagepanels/FrameworkStagePanel.js

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "./FrameworkStagePanel.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SplitterPaneTarget as NZ_SplitterPaneTarget, StagePanel as NZ_StagePanel, SafeAreaInsets, Splitter, SplitterTarget, StagePanelTarget, StagePanelTypeHelpers, } from "@itwin/appui-layout-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { SafeAreaContext } from "../safearea/SafeAreaContext";
+import { WidgetStack } from "../widgets/WidgetStack";
+import { getNestedStagePanelKey, getStagePanelType } from "./StagePanel";
+import { StagePanelState } from "./StagePanelDef";
+/** Stage Panel React component.
+ * @internal
+ */
+export class FrameworkStagePanel extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._measurer = React.createRef();
+        this._handleResize = (resizeBy) => {
+            this.props.changeHandler.handlePanelResize(this.props.location, resizeBy);
+        };
+        this._handleTargetChanged = (isTargeted) => {
+            this.props.changeHandler.handlePanelTargetChange(isTargeted ? this.props.location : undefined);
+        };
+        this._handleToggleCollapse = () => {
+            this.props.changeHandler.handleTogglePanelCollapse(this.props.location);
+        };
+        this._handlePaneTargetChanged = (paneIndex) => {
+            this.props.changeHandler.handlePanelPaneTargetChange(this.props.location, paneIndex);
+        };
+    }
+    componentDidMount() {
+        this.initializeSize();
+        this.setMinMaxSize();
+    }
+    componentDidUpdate() {
+        this.initializeSize();
+        this.setMinMaxSize();
+    }
+    render() {
+        const panelStateClassName = classnames(this.props.panelState === StagePanelState.Off && /* istanbul ignore next */ "uifw-stagepanel-off");
+        const className = classnames("uifw-stagepanel", panelStateClassName);
+        const paneCount = this.props.stagePanelWidgets.length + this.props.panel.panes.length;
+        const type = getStagePanelType(this.props.location);
+        const isTargetVisible = !!this.props.draggedWidgetId && this.props.allowedZones && this.props.allowedZones.some((z) => this.props.draggedWidgetId === z);
+        if (paneCount === 0) {
+            if (!isTargetVisible)
+                return null;
+            return (React.createElement(SafeAreaContext.Consumer, null, (safeAreaInsets) => (React.createElement(StagePanelTarget, { className: panelStateClassName, onTargetChanged: this._handleTargetChanged, safeAreaInsets: safeAreaInsets, type: type }))));
+        }
+        const isSplitterTargetVisible = isTargetVisible && !this.props.isTargeted;
+        const isVertical = StagePanelTypeHelpers.isVertical(type);
+        return (React.createElement(SafeAreaContext.Consumer, null, (safeAreaInsets) => {
+            if (this.props.isInFooterMode)
+                safeAreaInsets &= ~SafeAreaInsets.Bottom;
+            return (React.createElement(NZ_StagePanel, { className: className, onResize: this.props.resizable ? this._handleResize : undefined, onToggleCollapse: this._handleToggleCollapse, safeAreaInsets: safeAreaInsets, size: this.props.panel.isCollapsed ? undefined : this.props.panel.size, type: type },
+                React.createElement("div", { ref: this._measurer, style: { width: "100%", height: "100%", position: "absolute", zIndex: -1 } }),
+                React.createElement("div", { className: "uifw-content" },
+                    this.props.panel.isCollapsed ? undefined : this.props.header,
+                    React.createElement("div", { className: "uifw-widgets" },
+                        React.createElement(SplitterTarget, { isVertical: isVertical, onTargetChanged: this._handleTargetChanged, paneCount: paneCount, style: {
+                                ...isTargetVisible ? {} : { display: "none" },
+                            } }),
+                        React.createElement(Splitter, { isGripHidden: this.props.panel.isCollapsed, isVertical: isVertical },
+                            this.props.stagePanelWidgets.map((widgetId) => {
+                                return (React.createElement(React.Fragment, { key: `wd-${widgetId}` }, this.props.renderPane(widgetId)));
+                            }),
+                            this.props.panel.panes.map((pane, index) => {
+                                const openWidgetId = pane.widgets.find((wId) => this.props.widgets[wId].tabIndex >= 0);
+                                const activeTabIndex = openWidgetId ? this.props.widgets[openWidgetId].tabIndex : 0;
+                                const firstWidget = this.props.widgets[pane.widgets[0]];
+                                return (React.createElement("div", { key: `w-${index}`, style: { height: "100%", position: "relative" } },
+                                    React.createElement(WidgetStack, { activeTabIndex: activeTabIndex, disabledResizeHandles: undefined, draggedWidget: undefined, fillZone: true, getWidgetContentRef: this.props.getWidgetContentRef, horizontalAnchor: firstWidget.horizontalAnchor, isCollapsed: this.props.panel.isCollapsed, isFloating: false, isInStagePanel: true, openWidgetId: openWidgetId, verticalAnchor: firstWidget.verticalAnchor, widgets: pane.widgets, widgetTabs: this.props.widgetTabs, widgetChangeHandler: this.props.widgetChangeHandler }),
+                                    isSplitterTargetVisible && React.createElement(SplitterPaneTarget, { onTargetChanged: this._handlePaneTargetChanged, paneIndex: index })));
+                            }))))));
+        }));
+    }
+    setMinMaxSize() {
+        const panel = getNestedStagePanelKey(this.props.location);
+        const nestedPanelsManager = FrontstageManager.NineZoneManager.getNestedPanelsManager();
+        this.props.minSize && ( /* istanbul ignore next */nestedPanelsManager.getPanelsManager(panel.id).getPanelManager(panel.type).minSize = this.props.minSize);
+        this.props.maxSize && ( /* istanbul ignore next */nestedPanelsManager.getPanelsManager(panel.id).getPanelManager(panel.type).maxSize = this.props.maxSize);
+    }
+    initializeSize() {
+        if (this.props.panel.size !== undefined || !this._measurer.current)
+            return;
+        const location = this.props.location;
+        if (this.props.initialSize) {
+            this.props.changeHandler.handlePanelInitialize(location, this.props.initialSize);
+            return;
+        }
+        const clientRect = this._measurer.current.getBoundingClientRect();
+        const type = getStagePanelType(location);
+        const size = StagePanelTypeHelpers.isVertical(type) ? clientRect.width : clientRect.height;
+        this.props.changeHandler.handlePanelInitialize(location, size);
+    }
+}
+/** @internal */
+export class SplitterPaneTarget extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._handleTargetChanged = (isTargeted) => {
+            const target = isTargeted ? this.props.paneIndex : undefined;
+            this.props.onTargetChanged(target);
+        };
+    }
+    render() {
+        return (React.createElement(NZ_SplitterPaneTarget, { onTargetChanged: this._handleTargetChanged }));
+    }
+}
+//# sourceMappingURL=FrameworkStagePanel.js.map

package/lib/esm/appui-react/stagepanels/FrameworkStagePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameworkStagePanel.js","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/FrameworkStagePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Frontstage\r\n */\r\n\r\nimport \"./FrameworkStagePanel.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { StagePanelLocation } from \"@itwin/appui-abstract\";\r\nimport {\r\n  NineZoneStagePanelManagerProps, SplitterPaneTarget as NZ_SplitterPaneTarget, StagePanel as NZ_StagePanel, SafeAreaInsets, Splitter, SplitterTarget,\r\n  StagePanelTarget, StagePanelTypeHelpers, WidgetZoneId, ZonesManagerWidgetsProps,\r\n} from \"@itwin/appui-layout-react\";\r\nimport { StagePanelChangeHandler, WidgetChangeHandler } from \"../frontstage/FrontstageComposer\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\r\nimport { WidgetStack, WidgetTabs } from \"../widgets/WidgetStack\";\r\nimport { ZoneLocation } from \"../zones/Zone\";\r\nimport { getNestedStagePanelKey, getStagePanelType } from \"./StagePanel\";\r\nimport { StagePanelState } from \"./StagePanelDef\";\r\nimport { WidgetDef } from \"../widgets/WidgetDef\";\r\n\r\n/** Properties of a [[FrameworkStagePanel]] component\r\n * @internal\r\n */\r\nexport interface FrameworkStagePanelProps {\r\n  allowedZones?: ZoneLocation[];\r\n  changeHandler: StagePanelChangeHandler;\r\n  draggedWidgetId: WidgetZoneId | undefined; // eslint-disable-line deprecation/deprecation\r\n  getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>; // eslint-disable-line deprecation/deprecation\r\n  header?: React.ReactNode;\r\n  initialSize?: number;\r\n  isInFooterMode: boolean;\r\n  isTargeted: boolean;\r\n  maxSize?: number;\r\n  minSize?: number;\r\n  location: StagePanelLocation;\r\n  panel: NineZoneStagePanelManagerProps;\r\n  panelState: StagePanelState;\r\n  renderPane: (widgetDefId: WidgetDef[\"id\"]) => React.ReactNode;\r\n  resizable: boolean;\r\n  widgetChangeHandler: WidgetChangeHandler; // eslint-disable-line deprecation/deprecation\r\n  stagePanelWidgets: ReadonlyArray<WidgetDef[\"id\"]>; // widgets defined in StagePanel\r\n  widgets: ZonesManagerWidgetsProps; // zone widgets\r\n  widgetTabs: WidgetTabs;\r\n}\r\n\r\n/** Stage Panel React component.\r\n * @internal\r\n */\r\nexport class FrameworkStagePanel extends React.PureComponent<FrameworkStagePanelProps> {\r\n  private _measurer = React.createRef<HTMLDivElement>();\r\n\r\n  public override componentDidMount(): void {\r\n    this.initializeSize();\r\n    this.setMinMaxSize();\r\n  }\r\n\r\n  public override componentDidUpdate(): void {\r\n    this.initializeSize();\r\n    this.setMinMaxSize();\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    const panelStateClassName = classnames(this.props.panelState === StagePanelState.Off && /* istanbul ignore next */ \"uifw-stagepanel-off\");\r\n    const className = classnames(\"uifw-stagepanel\", panelStateClassName);\r\n    const paneCount = this.props.stagePanelWidgets.length + this.props.panel.panes.length;\r\n    const type = getStagePanelType(this.props.location);\r\n    const isTargetVisible = !!this.props.draggedWidgetId && this.props.allowedZones && this.props.allowedZones.some((z) => this.props.draggedWidgetId === z);\r\n    if (paneCount === 0) {\r\n      if (!isTargetVisible)\r\n        return null;\r\n      return (\r\n        <SafeAreaContext.Consumer>\r\n          {(safeAreaInsets) => (\r\n            <StagePanelTarget\r\n              className={panelStateClassName}\r\n              onTargetChanged={this._handleTargetChanged}\r\n              safeAreaInsets={safeAreaInsets}\r\n              type={type}\r\n            />\r\n          )}\r\n        </SafeAreaContext.Consumer>\r\n      );\r\n    }\r\n\r\n    const isSplitterTargetVisible = isTargetVisible && !this.props.isTargeted;\r\n    const isVertical = StagePanelTypeHelpers.isVertical(type);\r\n    return (\r\n      <SafeAreaContext.Consumer>\r\n        {(safeAreaInsets) => {\r\n          if (this.props.isInFooterMode)\r\n            safeAreaInsets &= ~SafeAreaInsets.Bottom;\r\n          return (\r\n            <NZ_StagePanel\r\n              className={className}\r\n              onResize={this.props.resizable ? this._handleResize : undefined}\r\n              onToggleCollapse={this._handleToggleCollapse}\r\n              safeAreaInsets={safeAreaInsets}\r\n              size={this.props.panel.isCollapsed ? undefined : this.props.panel.size}\r\n              type={type}\r\n            >\r\n              <div\r\n                ref={this._measurer}\r\n                style={{ width: \"100%\", height: \"100%\", position: \"absolute\", zIndex: -1 }}\r\n              />\r\n              <div className=\"uifw-content\">\r\n                {this.props.panel.isCollapsed ? undefined : this.props.header}\r\n                <div className=\"uifw-widgets\">\r\n                  <SplitterTarget\r\n                    isVertical={isVertical}\r\n                    onTargetChanged={this._handleTargetChanged}\r\n                    paneCount={paneCount}\r\n                    style={{\r\n                      ...isTargetVisible ? {} : { display: \"none\" },\r\n                    }}\r\n                  />\r\n                  <Splitter\r\n                    isGripHidden={this.props.panel.isCollapsed}\r\n                    isVertical={isVertical}\r\n                  >\r\n                    {this.props.stagePanelWidgets.map((widgetId) => {\r\n                      return (\r\n                        <React.Fragment key={`wd-${widgetId}`}>\r\n                          {this.props.renderPane(widgetId)}\r\n                        </React.Fragment>\r\n                      );\r\n                    })}\r\n                    {this.props.panel.panes.map((pane, index) => {\r\n                      const openWidgetId = pane.widgets.find((wId) => this.props.widgets[wId].tabIndex >= 0);\r\n                      const activeTabIndex = openWidgetId ? this.props.widgets[openWidgetId].tabIndex : 0;\r\n                      const firstWidget = this.props.widgets[pane.widgets[0]];\r\n                      return (\r\n                        <div\r\n                          key={`w-${index}`}\r\n                          style={{ height: \"100%\", position: \"relative\" }}\r\n                        >\r\n                          <WidgetStack\r\n                            activeTabIndex={activeTabIndex}\r\n                            disabledResizeHandles={undefined}\r\n                            draggedWidget={undefined}\r\n                            fillZone={true}\r\n                            getWidgetContentRef={this.props.getWidgetContentRef}\r\n                            horizontalAnchor={firstWidget.horizontalAnchor}\r\n                            isCollapsed={this.props.panel.isCollapsed}\r\n                            isFloating={false}\r\n                            isInStagePanel={true}\r\n                            openWidgetId={openWidgetId}\r\n                            verticalAnchor={firstWidget.verticalAnchor}\r\n                            widgets={pane.widgets}\r\n                            widgetTabs={this.props.widgetTabs}\r\n                            widgetChangeHandler={this.props.widgetChangeHandler}\r\n                          />\r\n                          {isSplitterTargetVisible && <SplitterPaneTarget\r\n                            onTargetChanged={this._handlePaneTargetChanged}\r\n                            paneIndex={index}\r\n                          />}\r\n                        </div>\r\n                      );\r\n                    })}\r\n                  </Splitter>\r\n                </div>\r\n              </div>\r\n            </NZ_StagePanel>\r\n          );\r\n        }}\r\n      </SafeAreaContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private setMinMaxSize() {\r\n    const panel = getNestedStagePanelKey(this.props.location);\r\n    const nestedPanelsManager = FrontstageManager.NineZoneManager.getNestedPanelsManager();\r\n    this.props.minSize && ( /* istanbul ignore next */ nestedPanelsManager.getPanelsManager(panel.id).getPanelManager(panel.type).minSize = this.props.minSize);\r\n    this.props.maxSize && ( /* istanbul ignore next */ nestedPanelsManager.getPanelsManager(panel.id).getPanelManager(panel.type).maxSize = this.props.maxSize);\r\n  }\r\n\r\n  private _handleResize = (resizeBy: number) => {\r\n    this.props.changeHandler.handlePanelResize(this.props.location, resizeBy);\r\n  };\r\n\r\n  private _handleTargetChanged = (isTargeted: boolean) => {\r\n    this.props.changeHandler.handlePanelTargetChange(isTargeted ? this.props.location : undefined);\r\n  };\r\n\r\n  private _handleToggleCollapse = () => {\r\n    this.props.changeHandler.handleTogglePanelCollapse(this.props.location);\r\n  };\r\n\r\n  private _handlePaneTargetChanged = (paneIndex: number | undefined) => {\r\n    this.props.changeHandler.handlePanelPaneTargetChange(this.props.location, paneIndex);\r\n  };\r\n\r\n  private initializeSize() {\r\n    if (this.props.panel.size !== undefined || !this._measurer.current)\r\n      return;\r\n\r\n    const location = this.props.location;\r\n    if (this.props.initialSize) {\r\n      this.props.changeHandler.handlePanelInitialize(location, this.props.initialSize);\r\n      return;\r\n    }\r\n    const clientRect = this._measurer.current.getBoundingClientRect();\r\n    const type = getStagePanelType(location);\r\n    const size = StagePanelTypeHelpers.isVertical(type) ? clientRect.width : clientRect.height;\r\n    this.props.changeHandler.handlePanelInitialize(location, size);\r\n  }\r\n}\r\n\r\n/** @internal */\r\nexport interface SplitterPaneTargetProps {\r\n  onTargetChanged: (paneIndex: number | undefined) => void;\r\n  paneIndex: number;\r\n}\r\n\r\n/** @internal */\r\nexport class SplitterPaneTarget extends React.PureComponent<SplitterPaneTargetProps> {\r\n  public override render() {\r\n    return (\r\n      <NZ_SplitterPaneTarget\r\n        onTargetChanged={this._handleTargetChanged}\r\n      />\r\n    );\r\n  }\r\n\r\n  private _handleTargetChanged = (isTargeted: boolean) => {\r\n    const target = isTargeted ? this.props.paneIndex : undefined;\r\n    this.props.onTargetChanged(target);\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/stagepanels/FrameworkStagePanel.scss

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/dialog/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.uifw-stagepanel {
+  background-color: $buic-background-widget;
+  box-sizing: border-box;
+
+  &.nz-panel-top {
+    border-bottom: 1px solid $buic-background-widget-stroke;
+  }
+
+  &.nz-panel-left {
+    border-right: 1px solid $buic-background-widget-stroke;
+  }
+
+  &.nz-panel-right {
+    border-left: 1px solid $buic-background-widget-stroke;
+  }
+
+  &.nz-panel-bottom {
+    border-top: 1px solid $buic-background-widget-stroke;
+  }
+
+  .uifw-content {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    >.uifw-widgets {
+      flex: 1;
+      position: relative;
+    }
+  }
+}
+
+.uifw-stagepanel-off {
+  display: none;
+}

package/lib/esm/appui-react/stagepanels/StagePanel.d.ts

@@ -0,0 +1,142 @@
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import * as React from "react";
+import { StagePanelLocation } from "@itwin/appui-abstract";
+import { NestedStagePanelKey, NestedStagePanelsManagerProps, NineZoneStagePanelManagerProps, StagePanelType as NZ_StagePanelType, WidgetZoneId, ZonesManagerWidgetsProps } from "@itwin/appui-layout-react";
+import { StagePanelChangeHandler, WidgetChangeHandler, ZoneDefProvider } from "../frontstage/FrontstageComposer";
+import { WidgetProps } from "../widgets/WidgetProps";
+import { WidgetTabs } from "../widgets/WidgetStack";
+import { ZoneLocation } from "../zones/Zone";
+import { StagePanelDef, StagePanelState as StagePanelState } from "./StagePanelDef";
+import { WidgetDef } from "../widgets/WidgetDef";
+/** Available StagePanel locations.
+ * ------------------------------------------------------------------------------------
+ * TopMost
+ * ------------------------------------------------------------------------------------
+ * Left     | Top                                                           | Right
+ *          |---------------------------------------------------------------|
+ *          | Nine-zone                                                     |
+ *          |                                                               |
+ *          |                                                               |
+ *          |                                                               |
+ *          |                                                               |
+ *          |                                                               |
+ *          |---------------------------------------------------------------|
+ *          | Bottom                                                        |
+ * ------------------------------------------------------------------------------------
+ * BottomMost
+ * ------------------------------------------------------------------------------------
+ */
+/** Properties of a Stage Panel Zone
+ * @public @deprecated in 3.0.
+ */
+export interface StagePanelZoneProps {
+    /** Properties for the Widgets in this Zone.
+     * @note Stable `WidgetProps["id"]` is generated if id is not provided to correctly save and restore App layout.
+     * [[Frontstage]] version must be increased when Widget location is changed or new widgets are added/removed.
+     */
+    widgets: Array<React.ReactElement<WidgetProps>>;
+    /** Any application data to attach to this Zone. */
+    applicationData?: any;
+}
+/** Properties of the Stage Panel Zones
+ * @public @deprecated in 3.0.
+ */
+export interface StagePanelZonesProps {
+    /** Properties for the Widgets in the Start section. */
+    start?: StagePanelZoneProps;
+    /** Properties for the Widgets in the Middle section. Deprecated - all widgets originally targeted for "middle" will now go to "end". */
+    middle?: StagePanelZoneProps;
+    /** Properties for the Widgets in the End section. */
+    end?: StagePanelZoneProps;
+}
+/** Available units of panel maximum size. Pixels or percentage of 9-Zone App size.
+ * @note Percentage of 9-Zone `height` is used for top/bottom panel and percentage of 9-Zone `width` is used for left/right panel.
+ * @public
+ */
+export declare type StagePanelMaxSizeSpec = number | {
+    percentage: number;
+};
+/** Properties of a [[StagePanel]] component
+ * @deprecated in 3.5. Props of a deprecated component.
+ * @public
+ */
+export interface StagePanelProps {
+    /** Describes which zones are allowed in this stage panel. */
+    allowedZones?: ZoneLocation[];
+    /** Any application data to attach to this Panel. */
+    applicationData?: any;
+    /** Default Panel state. Controls how the panel is initially displayed. Defaults to StagePanelState.Open. */
+    defaultState?: StagePanelState;
+    /** Stage panel header. */
+    header?: React.ReactNode;
+    /** Maximum size of the panel. */
+    maxSize?: StagePanelMaxSizeSpec;
+    /** Minimum size of the panel. */
+    minSize?: number;
+    /** Indicates whether the panel is pinned. Defaults to true. */
+    pinned?: boolean;
+    /** Indicates whether the panel is resizable. Defaults to true. */
+    resizable: boolean;
+    /** Default size of the panel. */
+    size?: number;
+    /** Properties for the Widgets in this Panel.
+     * @note Stable `WidgetProps["id"]` is generated if id is not provided to correctly save and restore App layout.
+     * [[Frontstage]] version must be increased when Widget location is changed or new widgets are added/removed.
+     */
+    widgets?: Array<React.ReactElement<WidgetProps>>;
+    /** Properties for the Panel Zones in this Panel.
+     * @beta */
+    panelZones?: StagePanelZonesProps;
+    /** @internal */
+    runtimeProps?: StagePanelRuntimeProps;
+}
+/** Default properties of [[StagePanel]] component.
+ * @deprecated in 3.5. Default props of a deprecated component.
+ * @public
+ */
+export declare type StagePanelDefaultProps = Pick<StagePanelProps, "resizable">;
+/** Runtime Properties for the [[StagePanel]] component.
+ * @internal
+ */
+export interface StagePanelRuntimeProps {
+    draggedWidgetId: WidgetZoneId | undefined;
+    getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>;
+    isInFooterMode: boolean;
+    isTargeted: boolean;
+    panel: NineZoneStagePanelManagerProps;
+    panelDef: StagePanelDef;
+    stagePanelChangeHandler: StagePanelChangeHandler;
+    widgetChangeHandler: WidgetChangeHandler;
+    widgets: ZonesManagerWidgetsProps;
+    widgetTabs: WidgetTabs;
+    zoneDefProvider: ZoneDefProvider;
+}
+interface StagePanelComponentState {
+    panelState: StagePanelState;
+    stagePanelWidgets: ReadonlyArray<WidgetDef["id"]>;
+}
+/** Frontstage Panel React component.
+ * @deprecated in 3.6. Use [[StagePanelConfig]] instead.
+ * @public
+ */
+export declare class StagePanel extends React.Component<StagePanelProps, StagePanelComponentState> {
+    static readonly defaultProps: StagePanelDefaultProps;
+    constructor(props: StagePanelProps);
+    static initializeStagePanelDef(panelDef: StagePanelDef, props: StagePanelProps, panelLocation: StagePanelLocation): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: StagePanelProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+    private _handleRenderPane;
+    private _handlePanelStateChangedEvent;
+    private _handleWidgetStateChangedEvent;
+    private _getVisibleStagePanelWidgets;
+}
+/** @internal */
+export declare const getStagePanelType: (location: StagePanelLocation) => NZ_StagePanelType;
+/** @internal */
+export declare const getNestedStagePanelKey: (location: StagePanelLocation) => NestedStagePanelKey<NestedStagePanelsManagerProps>;
+export {};
+//# sourceMappingURL=StagePanel.d.ts.map

package/lib/esm/appui-react/stagepanels/StagePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePanel.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/StagePanel.tsx"],"names":[],"mappings":"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"}

package/lib/esm/appui-react/stagepanels/StagePanel.js

@@ -0,0 +1,149 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { StagePanelLocation } from "@itwin/appui-abstract";
+import { StagePanelType as NZ_StagePanelType, } from "@itwin/appui-layout-react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { FrameworkStagePanel } from "./FrameworkStagePanel";
+import { StagePanelState as StagePanelState } from "./StagePanelDef";
+/** Frontstage Panel React component.
+ * @deprecated in 3.6. Use [[StagePanelConfig]] instead.
+ * @public
+ */
+export class StagePanel extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this._handleRenderPane = (widgetDefId) => {
+            const runtimeProps = this.props.runtimeProps;
+            if (!runtimeProps)
+                return null;
+            const widgetDef = runtimeProps.panelDef.findWidgetDef(widgetDefId);
+            if (!widgetDef || !widgetDef.isVisible)
+                return null;
+            return (React.createElement("div", { style: {
+                    height: "100%",
+                    display: runtimeProps.panel.isCollapsed ? "none" : "block",
+                } }, widgetDef.reactNode));
+        };
+        this._handlePanelStateChangedEvent = ({ panelDef, panelState }) => {
+            var _a;
+            // istanbul ignore else
+            if (panelDef !== ((_a = this.props.runtimeProps) === null || _a === void 0 ? void 0 : _a.panelDef))
+                return;
+            // istanbul ignore next
+            this.setState({
+                panelState,
+            });
+        };
+        this._handleWidgetStateChangedEvent = ({ widgetDef }) => {
+            const runtimeProps = this.props.runtimeProps;
+            if (!runtimeProps)
+                return;
+            if (!runtimeProps.panelDef.findWidgetDef(widgetDef.id))
+                return;
+            this.setState({
+                stagePanelWidgets: this._getVisibleStagePanelWidgets(),
+            });
+        };
+        const panelState = (_a = this.props.runtimeProps) === null || _a === void 0 ? void 0 : _a.panelDef.panelState;
+        this.state = {
+            panelState: panelState === undefined ? StagePanelState.Open : panelState,
+            stagePanelWidgets: this._getVisibleStagePanelWidgets(),
+        };
+    }
+    static initializeStagePanelDef(panelDef, props, panelLocation) {
+        panelDef.initializeFromProps(props, panelLocation);
+    }
+    componentDidMount() {
+        FrontstageManager.onPanelStateChangedEvent.addListener(this._handlePanelStateChangedEvent);
+        FrontstageManager.onWidgetStateChangedEvent.addListener(this._handleWidgetStateChangedEvent);
+    }
+    componentDidUpdate(prevProps) {
+        var _a, _b;
+        if (((_a = prevProps.runtimeProps) === null || _a === void 0 ? void 0 : _a.panelDef) !== ((_b = this.props.runtimeProps) === null || _b === void 0 ? void 0 : _b.panelDef)) {
+            this.setState({
+                stagePanelWidgets: this._getVisibleStagePanelWidgets(),
+            });
+        }
+    }
+    componentWillUnmount() {
+        FrontstageManager.onPanelStateChangedEvent.removeListener(this._handlePanelStateChangedEvent);
+        FrontstageManager.onWidgetStateChangedEvent.removeListener(this._handleWidgetStateChangedEvent);
+    }
+    render() {
+        const { applicationData, defaultState, runtimeProps, maxSize, size, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        if (!runtimeProps)
+            return null;
+        const { stagePanelChangeHandler, panelDef, ...otherRuntimeProps } = runtimeProps;
+        return (React.createElement(FrameworkStagePanel, { changeHandler: stagePanelChangeHandler, initialSize: size, location: panelDef.location, renderPane: this._handleRenderPane, stagePanelWidgets: this.state.stagePanelWidgets, panelState: this.state.panelState, maxSize: typeof maxSize === "number" ? maxSize : undefined, ...props, ...otherRuntimeProps }));
+    }
+    _getVisibleStagePanelWidgets() {
+        var _a;
+        const panelDef = (_a = this.props.runtimeProps) === null || _a === void 0 ? void 0 : _a.panelDef;
+        if (!panelDef)
+            return [];
+        const visibleWidgets = panelDef.widgetDefs.filter((wd) => wd.isVisible);
+        return visibleWidgets.map((widgetDef) => widgetDef.id);
+    }
+}
+StagePanel.defaultProps = {
+    resizable: true,
+};
+/** @internal */
+export const getStagePanelType = (location) => {
+    switch (location) {
+        case StagePanelLocation.Bottom:
+        case StagePanelLocation.BottomMost:
+            return NZ_StagePanelType.Bottom;
+        case StagePanelLocation.Left:
+            return NZ_StagePanelType.Left;
+        case StagePanelLocation.Right:
+            return NZ_StagePanelType.Right;
+        case StagePanelLocation.Top:
+        case StagePanelLocation.TopMost:
+            return NZ_StagePanelType.Top;
+    }
+};
+/** @internal */
+export const getNestedStagePanelKey = (location) => {
+    switch (location) {
+        case StagePanelLocation.Bottom:
+            return {
+                id: "inner",
+                type: NZ_StagePanelType.Bottom,
+            };
+        case StagePanelLocation.BottomMost:
+            return {
+                id: "outer",
+                type: NZ_StagePanelType.Bottom,
+            };
+        case StagePanelLocation.Left:
+            return {
+                id: "inner",
+                type: NZ_StagePanelType.Left,
+            };
+        case StagePanelLocation.Right:
+            return {
+                id: "inner",
+                type: NZ_StagePanelType.Right,
+            };
+        case StagePanelLocation.Top:
+            return {
+                id: "inner",
+                type: NZ_StagePanelType.Top,
+            };
+        case StagePanelLocation.TopMost:
+            return {
+                id: "outer",
+                type: NZ_StagePanelType.Top,
+            };
+    }
+};
+//# sourceMappingURL=StagePanel.js.map

package/lib/esm/appui-react/stagepanels/StagePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePanel.js","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/StagePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Frontstage\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { StagePanelLocation } from \"@itwin/appui-abstract\";\r\nimport {\r\n  NestedStagePanelKey, NestedStagePanelsManagerProps, NineZoneStagePanelManagerProps, StagePanelType as NZ_StagePanelType, WidgetZoneId,\r\n  ZonesManagerWidgetsProps,\r\n} from \"@itwin/appui-layout-react\";\r\nimport { StagePanelChangeHandler, WidgetChangeHandler, ZoneDefProvider } from \"../frontstage/FrontstageComposer\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\nimport { WidgetProps } from \"../widgets/WidgetProps\";\r\nimport { WidgetTabs } from \"../widgets/WidgetStack\";\r\nimport { ZoneLocation } from \"../zones/Zone\";\r\nimport { FrameworkStagePanel } from \"./FrameworkStagePanel\";\r\nimport { PanelStateChangedEventArgs, StagePanelDef, StagePanelState as StagePanelState } from \"./StagePanelDef\";\r\nimport { WidgetDef, WidgetStateChangedEventArgs } from \"../widgets/WidgetDef\";\r\n\r\n/** Available StagePanel locations.\r\n * ------------------------------------------------------------------------------------\r\n * TopMost\r\n * ------------------------------------------------------------------------------------\r\n * Left     | Top                                                           | Right\r\n *          |---------------------------------------------------------------|\r\n *          | Nine-zone                                                     |\r\n *          |                                                               |\r\n *          |                                                               |\r\n *          |                                                               |\r\n *          |                                                               |\r\n *          |                                                               |\r\n *          |---------------------------------------------------------------|\r\n *          | Bottom                                                        |\r\n * ------------------------------------------------------------------------------------\r\n * BottomMost\r\n * ------------------------------------------------------------------------------------\r\n */\r\n\r\n/** Properties of a Stage Panel Zone\r\n * @public @deprecated in 3.0.\r\n */\r\nexport interface StagePanelZoneProps {\r\n  /** Properties for the Widgets in this Zone.\r\n   * @note Stable `WidgetProps[\"id\"]` is generated if id is not provided to correctly save and restore App layout.\r\n   * [[Frontstage]] version must be increased when Widget location is changed or new widgets are added/removed.\r\n   */\r\n  widgets: Array<React.ReactElement<WidgetProps>>;\r\n  /** Any application data to attach to this Zone. */\r\n  applicationData?: any;\r\n}\r\n\r\n/** Properties of the Stage Panel Zones\r\n * @public @deprecated in 3.0.\r\n */\r\nexport interface StagePanelZonesProps {\r\n  /** Properties for the Widgets in the Start section. */\r\n  start?: StagePanelZoneProps;\r\n  /** Properties for the Widgets in the Middle section. Deprecated - all widgets originally targeted for \"middle\" will now go to \"end\". */\r\n  middle?: StagePanelZoneProps;\r\n  /** Properties for the Widgets in the End section. */\r\n  end?: StagePanelZoneProps;\r\n}\r\n\r\n/** Available units of panel maximum size. Pixels or percentage of 9-Zone App size.\r\n * @note Percentage of 9-Zone `height` is used for top/bottom panel and percentage of 9-Zone `width` is used for left/right panel.\r\n * @public\r\n */\r\nexport type StagePanelMaxSizeSpec = number | { percentage: number };\r\n\r\n/** Properties of a [[StagePanel]] component\r\n * @deprecated in 3.5. Props of a deprecated component.\r\n * @public\r\n */\r\nexport interface StagePanelProps {\r\n  /** Describes which zones are allowed in this stage panel. */\r\n  allowedZones?: ZoneLocation[];\r\n  /** Any application data to attach to this Panel. */\r\n  applicationData?: any;\r\n  /** Default Panel state. Controls how the panel is initially displayed. Defaults to StagePanelState.Open. */\r\n  defaultState?: StagePanelState;\r\n  /** Stage panel header. */\r\n  header?: React.ReactNode;\r\n  /** Maximum size of the panel. */\r\n  maxSize?: StagePanelMaxSizeSpec;\r\n  /** Minimum size of the panel. */\r\n  minSize?: number;\r\n  /** Indicates whether the panel is pinned. Defaults to true. */\r\n  pinned?: boolean;\r\n  /** Indicates whether the panel is resizable. Defaults to true. */\r\n  resizable: boolean;\r\n  /** Default size of the panel. */\r\n  size?: number;\r\n  /** Properties for the Widgets in this Panel.\r\n   * @note Stable `WidgetProps[\"id\"]` is generated if id is not provided to correctly save and restore App layout.\r\n   * [[Frontstage]] version must be increased when Widget location is changed or new widgets are added/removed.\r\n   */\r\n  widgets?: Array<React.ReactElement<WidgetProps>>;\r\n\r\n  /** Properties for the Panel Zones in this Panel.\r\n   * @beta */\r\n  panelZones?: StagePanelZonesProps;\r\n\r\n  /** @internal */\r\n  runtimeProps?: StagePanelRuntimeProps;\r\n}\r\n\r\n/** Default properties of [[StagePanel]] component.\r\n * @deprecated in 3.5. Default props of a deprecated component.\r\n * @public\r\n */\r\nexport type StagePanelDefaultProps = Pick<StagePanelProps, \"resizable\">;\r\n\r\n/** Runtime Properties for the [[StagePanel]] component.\r\n * @internal\r\n */\r\nexport interface StagePanelRuntimeProps {\r\n  draggedWidgetId: WidgetZoneId | undefined; // eslint-disable-line deprecation/deprecation\r\n  getWidgetContentRef: (id: WidgetZoneId) => React.Ref<HTMLDivElement>; // eslint-disable-line deprecation/deprecation\r\n  isInFooterMode: boolean;\r\n  isTargeted: boolean;\r\n  panel: NineZoneStagePanelManagerProps;\r\n  panelDef: StagePanelDef;\r\n  stagePanelChangeHandler: StagePanelChangeHandler;\r\n  widgetChangeHandler: WidgetChangeHandler; // eslint-disable-line deprecation/deprecation\r\n  widgets: ZonesManagerWidgetsProps;\r\n  widgetTabs: WidgetTabs;\r\n  zoneDefProvider: ZoneDefProvider;\r\n}\r\n\r\ninterface StagePanelComponentState {\r\n  panelState: StagePanelState;\r\n  stagePanelWidgets: ReadonlyArray<WidgetDef[\"id\"]>;\r\n}\r\n\r\n/** Frontstage Panel React component.\r\n * @deprecated in 3.6. Use [[StagePanelConfig]] instead.\r\n * @public\r\n */\r\nexport class StagePanel extends React.Component<StagePanelProps, StagePanelComponentState> {\r\n  public static readonly defaultProps: StagePanelDefaultProps = {\r\n    resizable: true,\r\n  };\r\n\r\n  public constructor(props: StagePanelProps) {\r\n    super(props);\r\n\r\n    const panelState = this.props.runtimeProps?.panelDef.panelState;\r\n    this.state = {\r\n      panelState: panelState === undefined ? StagePanelState.Open : panelState,\r\n      stagePanelWidgets: this._getVisibleStagePanelWidgets(),\r\n    };\r\n  }\r\n\r\n  public static initializeStagePanelDef(panelDef: StagePanelDef, props: StagePanelProps, panelLocation: StagePanelLocation): void {\r\n    panelDef.initializeFromProps(props, panelLocation);\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    FrontstageManager.onPanelStateChangedEvent.addListener(this._handlePanelStateChangedEvent);\r\n    FrontstageManager.onWidgetStateChangedEvent.addListener(this._handleWidgetStateChangedEvent);\r\n  }\r\n\r\n  public override componentDidUpdate(prevProps: StagePanelProps) {\r\n    if (prevProps.runtimeProps?.panelDef !== this.props.runtimeProps?.panelDef) {\r\n      this.setState({\r\n        stagePanelWidgets: this._getVisibleStagePanelWidgets(),\r\n      });\r\n    }\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    FrontstageManager.onPanelStateChangedEvent.removeListener(this._handlePanelStateChangedEvent);\r\n    FrontstageManager.onWidgetStateChangedEvent.removeListener(this._handleWidgetStateChangedEvent);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    const { applicationData, defaultState, runtimeProps, maxSize, size, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    if (!runtimeProps)\r\n      return null;\r\n\r\n    const { stagePanelChangeHandler, panelDef, ...otherRuntimeProps } = runtimeProps;\r\n    return (\r\n      <FrameworkStagePanel\r\n        changeHandler={stagePanelChangeHandler}\r\n        initialSize={size}\r\n        location={panelDef.location}\r\n        renderPane={this._handleRenderPane}\r\n        stagePanelWidgets={this.state.stagePanelWidgets}\r\n        panelState={this.state.panelState}\r\n        maxSize={typeof maxSize === \"number\" ? maxSize : undefined}\r\n        {...props}\r\n        {...otherRuntimeProps}\r\n      />\r\n    );\r\n  }\r\n\r\n  private _handleRenderPane = (widgetDefId: WidgetDef[\"id\"]): React.ReactNode => {\r\n    const runtimeProps = this.props.runtimeProps;\r\n    if (!runtimeProps)\r\n      return null;\r\n    const widgetDef = runtimeProps.panelDef.findWidgetDef(widgetDefId);\r\n    if (!widgetDef || !widgetDef.isVisible)\r\n      return null;\r\n    return (\r\n      <div\r\n        style={{\r\n          height: \"100%\",\r\n          display: runtimeProps.panel.isCollapsed ? \"none\" : \"block\",\r\n        }}\r\n      >\r\n        {widgetDef.reactNode}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  private _handlePanelStateChangedEvent = ({ panelDef, panelState }: PanelStateChangedEventArgs) => {\r\n    // istanbul ignore else\r\n    if (panelDef !== this.props.runtimeProps?.panelDef)\r\n      return;\r\n    // istanbul ignore next\r\n    this.setState({\r\n      panelState,\r\n    });\r\n  };\r\n\r\n  private _handleWidgetStateChangedEvent = ({ widgetDef }: WidgetStateChangedEventArgs) => {\r\n    const runtimeProps = this.props.runtimeProps;\r\n    if (!runtimeProps)\r\n      return;\r\n    if (!runtimeProps.panelDef.findWidgetDef(widgetDef.id))\r\n      return;\r\n    this.setState({\r\n      stagePanelWidgets: this._getVisibleStagePanelWidgets(),\r\n    });\r\n  };\r\n\r\n  private _getVisibleStagePanelWidgets() {\r\n    const panelDef = this.props.runtimeProps?.panelDef;\r\n    if (!panelDef)\r\n      return [];\r\n    const visibleWidgets = panelDef.widgetDefs.filter((wd) => wd.isVisible);\r\n    return visibleWidgets.map((widgetDef) => widgetDef.id);\r\n  }\r\n}\r\n\r\n/** @internal */\r\nexport const getStagePanelType = (location: StagePanelLocation): NZ_StagePanelType => {\r\n  switch (location) {\r\n    case StagePanelLocation.Bottom:\r\n    case StagePanelLocation.BottomMost:\r\n      return NZ_StagePanelType.Bottom;\r\n    case StagePanelLocation.Left:\r\n      return NZ_StagePanelType.Left;\r\n    case StagePanelLocation.Right:\r\n      return NZ_StagePanelType.Right;\r\n    case StagePanelLocation.Top:\r\n    case StagePanelLocation.TopMost:\r\n      return NZ_StagePanelType.Top;\r\n  }\r\n};\r\n\r\n/** @internal */\r\nexport const getNestedStagePanelKey = (location: StagePanelLocation): NestedStagePanelKey<NestedStagePanelsManagerProps> => {\r\n  switch (location) {\r\n    case StagePanelLocation.Bottom:\r\n      return {\r\n        id: \"inner\",\r\n        type: NZ_StagePanelType.Bottom,\r\n      };\r\n    case StagePanelLocation.BottomMost:\r\n      return {\r\n        id: \"outer\",\r\n        type: NZ_StagePanelType.Bottom,\r\n      };\r\n    case StagePanelLocation.Left:\r\n      return {\r\n        id: \"inner\",\r\n        type: NZ_StagePanelType.Left,\r\n      };\r\n    case StagePanelLocation.Right:\r\n      return {\r\n        id: \"inner\",\r\n        type: NZ_StagePanelType.Right,\r\n      };\r\n    case StagePanelLocation.Top:\r\n      return {\r\n        id: \"inner\",\r\n        type: NZ_StagePanelType.Top,\r\n      };\r\n    case StagePanelLocation.TopMost:\r\n      return {\r\n        id: \"outer\",\r\n        type: NZ_StagePanelType.Top,\r\n      };\r\n  }\r\n};\r\n"]}

package/lib/esm/appui-react/stagepanels/StagePanelConfig.d.ts

@@ -2,9 +2,10 @@
  * @module Frontstage
  */
 import { WidgetConfig } from "../widgets/WidgetConfig";
+import { StagePanelMaxSizeSpec } from "./StagePanel";
 import { StagePanelState as StagePanelState } from "./StagePanelDef";
 /** Configuration from which a stage panel is created.
- * @public
+ * @beta
  */
 export interface StagePanelConfig {
     /** Default Panel state. Controls how the panel is initially displayed. Defaults to StagePanelState.Open. */
@@ -23,11 +24,11 @@ export interface StagePanelConfig {
     readonly sections?: StagePanelSectionsConfig;
 }
 /** Configuration from which a stage panel section is created.
- * @public
+ * @beta
  */
 export declare type StagePanelSectionConfig = ReadonlyArray<WidgetConfig>;
 /** Configuration from which stage panel sections are created.
- * @public
+ * @beta
  */
 export interface StagePanelSectionsConfig {
     /** Configuration of the `start` section. */
@@ -35,11 +36,4 @@ export interface StagePanelSectionsConfig {
     /** Configuration of the `end` section. */
     readonly end?: StagePanelSectionConfig;
 }
-/** Available units of panel max size. Pixels or percentage of App size.
- * @note Percentage of App `height` is used for top/bottom panel and percentage of App `width` is used for left/right panel.
- * @public
- */
-export declare type StagePanelMaxSizeSpec = number | {
-    percentage: number;
-};
 //# sourceMappingURL=StagePanelConfig.d.ts.map