@itwin/appui-react 3.0.0-dev.100

package/lib/esm/appui-react/accudraw/MenuButtonPopup.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import * as React from "react";
+import { Size } from "@itwin/core-react";
+import { PopupManager } from "../popup/PopupManager";
+import { MenuButton } from "./MenuButton";
+/** Popup component for Menu Buttons
+ * @alpha
+ */
+export class MenuButtonPopup extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.state = {
+            size: new Size(-1, -1),
+        };
+        this._onSizeKnown = (newSize) => {
+            // istanbul ignore else
+            if (!this.state.size.equals(newSize))
+                this.setState({ size: Size.create(newSize) });
+        };
+    }
+    /** @internal */
+    render() {
+        const point = PopupManager.getPopupPosition(this.props.el, this.props.pt, this.props.offset, this.state.size);
+        return (React.createElement(MenuButton, { key: this.props.id, point: point, onSizeKnown: this._onSizeKnown }, this.props.content));
+    }
+}
+//# sourceMappingURL=MenuButtonPopup.js.map

package/lib/esm/appui-react/accudraw/MenuButtonPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/MenuButtonPopup.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAa,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAkB,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAyD;IAApG;;QACE,gBAAgB;QACS,UAAK,GAAG;YAC/B,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACvB,CAAC;QAEM,iBAAY,GAAG,CAAC,OAAkB,EAAE,EAAE;YAC5C,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;gBAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;IAeJ,CAAC;IAbC,gBAAgB;IACA,MAAM;QACpB,MAAM,KAAK,GAAG,YAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAE9G,OAAO,CACL,oBAAC,UAAU,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAC5B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,IAAI,CAAC,YAAY,IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CACR,CACd,CAAC;IACJ,CAAC;CACF","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/** @packageDocumentation\r\n * @module AccuDraw\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Size, SizeProps } from \"@itwin/core-react\";\r\nimport { PopupManager, PopupPropsBase } from \"../popup/PopupManager\";\r\nimport { MenuButton } from \"./MenuButton\";\r\n\r\n/** @alpha */\r\nexport interface MenuButtonPopupProps extends PopupPropsBase {\r\n  content: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface MenuButtonPopupState {\r\n  size: Size;\r\n}\r\n\r\n/** Popup component for Menu Buttons\r\n * @alpha\r\n */\r\nexport class MenuButtonPopup extends React.PureComponent<MenuButtonPopupProps, MenuButtonPopupState> {\r\n  /** @internal */\r\n  public override readonly state = {\r\n    size: new Size(-1, -1),\r\n  };\r\n\r\n  private _onSizeKnown = (newSize: SizeProps) => {\r\n    // istanbul ignore else\r\n    if (!this.state.size.equals(newSize))\r\n      this.setState({ size: Size.create(newSize) });\r\n  };\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const point = PopupManager.getPopupPosition(this.props.el, this.props.pt, this.props.offset, this.state.size);\r\n\r\n    return (\r\n      <MenuButton key={this.props.id}\r\n        point={point}\r\n        onSizeKnown={this._onSizeKnown}\r\n      >\r\n        {this.props.content}\r\n      </MenuButton>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/accudraw/SquareButton.d.ts

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import "./SquareButton.scss";
+import * as React from "react";
+import { Omit } from "@itwin/core-react";
+import { ButtonProps } from "@itwin/itwinui-react";
+/** @alpha */
+export interface SquareButtonProps extends Omit<ButtonProps, "size" | "styleType"> {
+}
+/** @alpha */
+export declare class SquareButton extends React.PureComponent<SquareButtonProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=SquareButton.d.ts.map

package/lib/esm/appui-react/accudraw/SquareButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SquareButton.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/SquareButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE3D,aAAa;AACb,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAC;CAAI;AAEtF,aAAa;AACb,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;IACtD,MAAM;CAevB"}

package/lib/esm/appui-react/accudraw/SquareButton.js

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import "./SquareButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Button } from "@itwin/itwinui-react";
+/** @alpha */
+export class SquareButton extends React.PureComponent {
+    render() {
+        const { className, style, ...buttonProps } = this.props;
+        const buttonClassNames = classnames("uifw-square-button", className);
+        const buttonStyle = {
+            ...style,
+        };
+        return (React.createElement(Button, { ...buttonProps, size: "small", className: buttonClassNames, style: buttonStyle }));
+    }
+}
+//# sourceMappingURL=SquareButton.js.map

package/lib/esm/appui-react/accudraw/SquareButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SquareButton.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/SquareButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAe,MAAM,sBAAsB,CAAC;AAK3D,aAAa;AACb,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,aAAgC;IACtD,MAAM;QACpB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAExD,MAAM,gBAAgB,GAAG,UAAU,CACjC,oBAAoB,EACpB,SAAS,CACV,CAAC;QACF,MAAM,WAAW,GAAwB;YACvC,GAAG,KAAK;SACT,CAAC;QAEF,OAAO,CACL,oBAAC,MAAM,OAAK,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,GAAI,CAC1F,CAAC;IACJ,CAAC;CACF","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/** @packageDocumentation\r\n * @module AccuDraw\r\n */\r\n\r\nimport \"./SquareButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Omit } from \"@itwin/core-react\";\r\nimport { Button, ButtonProps } from \"@itwin/itwinui-react\";\r\n\r\n/** @alpha */\r\nexport interface SquareButtonProps extends Omit<ButtonProps, \"size\" | \"styleType\"> { } // eslint-disable-line @typescript-eslint/no-empty-interface\r\n\r\n/** @alpha */\r\nexport class SquareButton extends React.PureComponent<SquareButtonProps> {\r\n  public override render() {\r\n    const { className, style, ...buttonProps } = this.props;\r\n\r\n    const buttonClassNames = classnames(\r\n      \"uifw-square-button\",\r\n      className,\r\n    );\r\n    const buttonStyle: React.CSSProperties = {\r\n      ...style,\r\n    };\r\n\r\n    return (\r\n      <Button {...buttonProps} size=\"small\" className={buttonClassNames} style={buttonStyle} />\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/accudraw/SquareButton.scss

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$button-size: 32px;
+
+.uifw-square-button {
+  display: flex;
+  justify-content: center;
+  background-color: $buic-background-tab-inactive;
+  color: $buic-foreground-body;
+  border-color: $buic-background-toolbutton-stroke;
+  border-radius: 5px;
+  border-width: 1px;
+  border-style: solid;
+  opacity: 0.95;
+  pointer-events: auto;
+  margin: 0;
+  width: $button-size;
+  height: $button-size;
+
+  &:focus {
+    background-color: $buic-background-tab-active;
+    color: $buic-foreground-body;
+    border-color: $buic-background-toolbutton-stroke;
+    opacity: 1.0;
+  }
+
+  &:hover {
+    background-color: $buic-background-tab-active;
+    color: $buic-foreground-primary;
+    border-color: $buic-background-toolbutton-stroke;
+    opacity: 1.0;
+  }
+
+  &:active {
+    background-color: $buic-background-4;
+    color: $buic-foreground-primary;
+    border-color: $buic-background-toolbutton-stroke;
+    opacity: 1.0;
+  }
+
+}

package/lib/esm/appui-react/accudraw/angle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>angle</title><path d="M16,10H14a4.9509,4.9509,0,0,0-1.2325-3.2723L14.23,5.2655l-3.4651-.8,2.0773-2.1153-.7139-.7012L0,14H15.9971V13H14.125ZM2.3838,13,9.8974,5.3488l.7967,3.4522,1.3621-1.362A3.95363,3.95363,0,0,1,13,10H11l1.875,3Z"/></svg>

package/lib/esm/appui-react/accudraw/backspace.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path d="M5,2L0,7.5L5,13h11V2H5z M12.21,8.79c0.39,0.39,0.39,1.03,0,1.42c-0.19,0.19-0.44,0.29-0.71,0.29
+	c-0.27,0-0.52-0.1-0.71-0.29L9.5,8.91l-1.29,1.3c-0.38,0.37-1.04,0.37-1.42,0c-0.39-0.39-0.39-1.03,0-1.42l1.3-1.29l-1.3-1.29
+	c-0.39-0.39-0.39-1.03,0-1.42c0.39-0.39,1.03-0.39,1.42,0l1.29,1.3l1.29-1.3c0.39-0.39,1.03-0.39,1.42,0c0.39,0.39,0.39,1.03,0,1.42
+	l-1.3,1.29L12.21,8.79z"/>
+</svg>

package/lib/esm/appui-react/accudraw/constraint-2d.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<polygon points="7,15 7,1 0,15 	"/>
+	<g>
+		<path d="M10,5.2361L14.382,14H10V5.2361 M9,1v14h7L9,1L9,1z"/>
+	</g>
+</g>
+</svg>

package/lib/esm/appui-react/accudraw/distance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>distance</title><rect y="11" width="16" height="1"/><polygon points="15 4 15 5.875 12 4 12 6 4 6 4 4 1 5.875 1 4 0 4 0 9 1 9 1 7.125 4 9 4 7 12 7 12 9 15 7.125 15 9 16 9 16 4 15 4"/></svg>

package/lib/esm/appui-react/accudraw/height-2.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<title>distance</title>
+<g>
+	<polygon points="16,15 14.125,15 16,12 14,12 14,4 16,4 14.125,1 16,1 16,0 11,0 11,1 12.875,1 11,4 13,4 13,12 11,12 12.875,15
+		0,15 0,16 16,16 	"/>
+</g>
+</svg>

package/lib/esm/appui-react/accudraw/height.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<title>distance</title>
+<g>
+	<rect x="4" width="1" height="16"/>
+	<polygon points="12,15 10.125,15 12,12 10,12 10,4 12,4 10.125,1 12,1 12,0 7,0 7,1 8.875,1 7,4 9,4 9,12 7,12 8.875,15 7,15 7,16 
+		12,16 	"/>
+</g>
+</svg>

package/lib/esm/appui-react/backstage/Backstage.d.ts

@@ -0,0 +1,63 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+import * as React from "react";
+import { CommonProps, IconSpec, UiEvent } from "@itwin/core-react";
+import { UserInfo } from "../UserInfo";
+/** [[BackstageEvent]] arguments.
+ * @public
+ * @deprecated use [BackstageComposer]($appui-react) instead.
+ */
+export interface BackstageEventArgs {
+    isVisible: boolean;
+}
+/** Backstage Event class.
+ * @public
+ */
+export declare class BackstageEvent extends UiEvent<BackstageEventArgs> {
+}
+/** Properties for the [[Backstage]] React component.
+ * @public
+ * @deprecated use [BackstageComposer]($appui-react) instead.
+ */
+export interface BackstageProps extends CommonProps {
+    userInfo?: UserInfo;
+    isVisible?: boolean;
+    showOverlay?: boolean;
+    onClose?: () => void;
+    header?: React.ReactNode;
+}
+/** State for the [[Backstage]] React component.
+ * @internal
+ */
+interface BackstageState {
+    isVisible: boolean;
+}
+/** Backstage React component.
+ * @public
+ * @deprecated use [BackstageComposer]($appui-react) instead.
+ */
+export declare class Backstage extends React.Component<BackstageProps, BackstageState> {
+    static readonly onBackstageEvent: BackstageEvent;
+    static isBackstageVisible: boolean;
+    /** Shows the Backstage */
+    static show(): void;
+    /** Hides the Backstage */
+    static hide(): void;
+    /** Get CommandItemDef that will toggle display of Backstage and allow iconSpec to be overridden */
+    static getBackstageToggleCommand(overrideIconSpec?: IconSpec): import("../shared/CommandItemDef").CommandItemDef;
+    /** Command that toggles the Backstage */
+    static get backstageToggleCommand(): import("../shared/CommandItemDef").CommandItemDef;
+    /** @internal */
+    readonly state: BackstageState;
+    constructor(props: BackstageProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _handleBackstageEvent;
+    componentDidUpdate(prevProps: BackstageProps): void;
+    private setIsOpen;
+    private _onClose;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=Backstage.d.ts.map

package/lib/esm/appui-react/backstage/Backstage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/backstage/Backstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAInE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKvC;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,OAAO,CAAC,kBAAkB,CAAC;CAAI;AAEnE;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,UAAU,cAAc;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAE5E,gBAAuB,gBAAgB,iBAAwB;IAC/D,OAAc,kBAAkB,EAAE,OAAO,CAAC;IAE1C,0BAA0B;WACZ,IAAI,IAAI,IAAI;IAI1B,0BAA0B;WACZ,IAAI,IAAI,IAAI;IAI1B,mGAAmG;WACrF,yBAAyB,CAAC,gBAAgB,CAAC,EAAE,QAAQ;IAInE,yCAAyC;IACzC,WAAkB,sBAAsB,sDAEvC;IAED,gBAAgB;IAChB,SAAyB,KAAK,EAAE,cAAc,CAAC;gBAEnC,KAAK,EAAE,cAAc;IASjB,iBAAiB;IAIjB,oBAAoB;IAIpC,OAAO,CAAC,qBAAqB,CAE3B;IAEc,kBAAkB,CAAC,SAAS,EAAE,cAAc;IAK5D,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAMd;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CA0B1C"}

package/lib/esm/appui-react/backstage/Backstage.js

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Backstage
+ */
+import * as React from "react";
+import { UiEvent } from "@itwin/core-react";
+import { Backstage as NZ_Backstage } from "@itwin/appui-layout-react";
+import { SafeAreaContext } from "../safearea/SafeAreaContext";
+import { UiFramework } from "../UiFramework";
+import { BackstageManager } from "./BackstageManager";
+/** Backstage Event class.
+ * @public
+ */
+export class BackstageEvent extends UiEvent {
+} // eslint-disable-line deprecation/deprecation
+/** Backstage React component.
+ * @public
+ * @deprecated use [BackstageComposer]($appui-react) instead.
+ */
+export class Backstage extends React.Component {
+    constructor(props) {
+        super(props);
+        this._handleBackstageEvent = (args) => {
+            this.setState({ isVisible: args.isVisible });
+        };
+        this._onClose = () => {
+            Backstage.hide(); // eslint-disable-line deprecation/deprecation
+            /* istanbul ignore else */
+            if (this.props.onClose)
+                this.props.onClose();
+        };
+        this.setIsOpen(!!this.props.isVisible);
+        this.state = {
+            isVisible: UiFramework.backstageManager.isOpen,
+        };
+    }
+    /** Shows the Backstage */
+    static show() {
+        UiFramework.backstageManager.open();
+    }
+    /** Hides the Backstage */
+    static hide() {
+        UiFramework.backstageManager.close();
+    }
+    /** Get CommandItemDef that will toggle display of Backstage and allow iconSpec to be overridden */
+    static getBackstageToggleCommand(overrideIconSpec) {
+        return BackstageManager.getBackstageToggleCommand(overrideIconSpec);
+    }
+    /** Command that toggles the Backstage */
+    static get backstageToggleCommand() {
+        return this.getBackstageToggleCommand();
+    }
+    componentDidMount() {
+        Backstage.onBackstageEvent.addListener(this._handleBackstageEvent); // eslint-disable-line deprecation/deprecation
+    }
+    componentWillUnmount() {
+        Backstage.onBackstageEvent.removeListener(this._handleBackstageEvent); // eslint-disable-line deprecation/deprecation
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.isVisible !== prevProps.isVisible)
+            this.setIsOpen(!!this.props.isVisible);
+    }
+    setIsOpen(isOpen) {
+        if (isOpen) {
+            UiFramework.backstageManager.open();
+        }
+        else {
+            UiFramework.backstageManager.close();
+        }
+    }
+    render() {
+        Backstage.isBackstageVisible = this.state.isVisible; // eslint-disable-line deprecation/deprecation
+        let header = null;
+        if (this.props.header)
+            header = this.props.header;
+        return (React.createElement(SafeAreaContext.Consumer, null, (safeAreaInsets) => (React.createElement(NZ_Backstage, { className: this.props.className, header: header, isOpen: this.state.isVisible, onClose: this._onClose, safeAreaInsets: safeAreaInsets, showOverlay: this.props.showOverlay, style: this.props.style }, this.props.children))));
+    }
+}
+Backstage.onBackstageEvent = new BackstageEvent();
+//# sourceMappingURL=Backstage.js.map

package/lib/esm/appui-react/backstage/Backstage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backstage.js","sourceRoot":"","sources":["../../../../src/appui-react/backstage/Backstage.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/** @packageDocumentation\r\n * @module Backstage\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonProps, IconSpec, UiEvent } from \"@itwin/core-react\";\r\nimport { Backstage as NZ_Backstage } from \"@itwin/appui-layout-react\";\r\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { UserInfo } from \"../UserInfo\";\r\nimport { BackstageManager } from \"./BackstageManager\";\r\n\r\n// cSpell:ignore safearea\r\n\r\n/** [[BackstageEvent]] arguments.\r\n * @public\r\n * @deprecated use [BackstageComposer]($appui-react) instead.\r\n */\r\nexport interface BackstageEventArgs {\r\n  isVisible: boolean;\r\n}\r\n\r\n/** Backstage Event class.\r\n * @public\r\n */\r\nexport class BackstageEvent extends UiEvent<BackstageEventArgs> { } // eslint-disable-line deprecation/deprecation\r\n\r\n/** Properties for the [[Backstage]] React component.\r\n * @public\r\n * @deprecated use [BackstageComposer]($appui-react) instead.\r\n */\r\nexport interface BackstageProps extends CommonProps {\r\n  userInfo?: UserInfo;\r\n  isVisible?: boolean;\r\n  showOverlay?: boolean;\r\n  onClose?: () => void;\r\n  header?: React.ReactNode;\r\n}\r\n\r\n/** State for the [[Backstage]] React component.\r\n * @internal\r\n */\r\ninterface BackstageState {\r\n  isVisible: boolean;\r\n}\r\n\r\n/** Backstage React component.\r\n * @public\r\n * @deprecated use [BackstageComposer]($appui-react) instead.\r\n */\r\nexport class Backstage extends React.Component<BackstageProps, BackstageState> { // eslint-disable-line deprecation/deprecation\r\n\r\n  public static readonly onBackstageEvent = new BackstageEvent();\r\n  public static isBackstageVisible: boolean;\r\n\r\n  /** Shows the Backstage */\r\n  public static show(): void {\r\n    UiFramework.backstageManager.open();\r\n  }\r\n\r\n  /** Hides the Backstage */\r\n  public static hide(): void {\r\n    UiFramework.backstageManager.close();\r\n  }\r\n\r\n  /** Get CommandItemDef that will toggle display of Backstage and allow iconSpec to be overridden */\r\n  public static getBackstageToggleCommand(overrideIconSpec?: IconSpec) {\r\n    return BackstageManager.getBackstageToggleCommand(overrideIconSpec);\r\n  }\r\n\r\n  /** Command that toggles the Backstage */\r\n  public static get backstageToggleCommand() {\r\n    return this.getBackstageToggleCommand();\r\n  }\r\n\r\n  /** @internal */\r\n  public override readonly state: BackstageState;\r\n\r\n  constructor(props: BackstageProps) { // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n\r\n    this.setIsOpen(!!this.props.isVisible);\r\n    this.state = {\r\n      isVisible: UiFramework.backstageManager.isOpen,\r\n    };\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    Backstage.onBackstageEvent.addListener(this._handleBackstageEvent); // eslint-disable-line deprecation/deprecation\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    Backstage.onBackstageEvent.removeListener(this._handleBackstageEvent); // eslint-disable-line deprecation/deprecation\r\n  }\r\n\r\n  private _handleBackstageEvent = (args: BackstageEventArgs) => { // eslint-disable-line deprecation/deprecation\r\n    this.setState({ isVisible: args.isVisible });\r\n  };\r\n\r\n  public override componentDidUpdate(prevProps: BackstageProps) { // eslint-disable-line deprecation/deprecation\r\n    if (this.props.isVisible !== prevProps.isVisible)\r\n      this.setIsOpen(!!this.props.isVisible);\r\n  }\r\n\r\n  private setIsOpen(isOpen: boolean) {\r\n    if (isOpen) {\r\n      UiFramework.backstageManager.open();\r\n    } else {\r\n      UiFramework.backstageManager.close();\r\n    }\r\n  }\r\n\r\n  private _onClose = () => {\r\n    Backstage.hide(); // eslint-disable-line deprecation/deprecation\r\n\r\n    /* istanbul ignore else */\r\n    if (this.props.onClose)\r\n      this.props.onClose();\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    Backstage.isBackstageVisible = this.state.isVisible; // eslint-disable-line deprecation/deprecation\r\n\r\n    let header: React.ReactNode = null;\r\n\r\n    if (this.props.header)\r\n      header = this.props.header;\r\n\r\n    return (\r\n      <SafeAreaContext.Consumer>\r\n        {(safeAreaInsets) => (\r\n          <NZ_Backstage\r\n            className={this.props.className}\r\n            header={header}\r\n            isOpen={this.state.isVisible}\r\n            onClose={this._onClose}\r\n            safeAreaInsets={safeAreaInsets}\r\n            showOverlay={this.props.showOverlay}\r\n            style={this.props.style}\r\n          >\r\n            {this.props.children}\r\n          </NZ_Backstage>\r\n        )}\r\n      </SafeAreaContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/backstage/BackstageComposer.d.ts

@@ -0,0 +1,26 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+import * as React from "react";
+import { BackstageItem } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** @internal */
+export declare type GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;
+/** @internal */
+export declare const useGroupedItems: (items: ReadonlyArray<BackstageItem>) => GroupedItems;
+/** Props of [[BackstageComposer]] component.
+ * @public
+ */
+export interface BackstageComposerProps extends CommonProps {
+    /** React node for an optional header item */
+    readonly header?: React.ReactNode;
+    /** Indicates whether to place an overlay over the frontstage when the backstage is displayed */
+    readonly showOverlay?: boolean;
+    /** List of backstage items to show */
+    readonly items: BackstageItem[];
+}
+/** Backstage component composed from [[BackstageManager]] items.
+ * @public
+ */
+export declare function BackstageComposer(props: BackstageComposerProps): JSX.Element;
+//# sourceMappingURL=BackstageComposer.d.ts.map

package/lib/esm/appui-react/backstage/BackstageComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackstageComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/backstage/BackstageComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAkD,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAkDhD,gBAAgB;AAChB,oBAAY,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvE,gBAAgB;AAChB,eAAO,MAAM,eAAe,UAAW,cAAc,aAAa,CAAC,iBA+BlE,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,gGAAgG;IAChG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA0D9D"}

package/lib/esm/appui-react/backstage/BackstageComposer.js

@@ -0,0 +1,118 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Backstage
+ */
+import * as React from "react";
+import { BackstageItemsManager, ConditionalBooleanValue } from "@itwin/appui-abstract";
+import { Backstage as NZ_Backstage, BackstageSeparator } from "@itwin/appui-layout-react"; // eslint-disable-line sort-imports
+import { SafeAreaContext } from "../safearea/SafeAreaContext";
+import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher";
+import { BackstageComposerItem } from "./BackstageComposerItem";
+import { useBackstageManager, useIsBackstageOpen } from "./BackstageManager";
+import { useDefaultBackstageItems } from "./useDefaultBackstageItems";
+import { useUiItemsProviderBackstageItems } from "./useUiItemsProviderBackstageItems";
+// cSpell:ignore safearea
+/** Private function to set up sync event monitoring of backstage items */
+function useBackstageItemSyncEffect(itemsManager, syncIdsOfInterest) {
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        const handleSyncUiEvent = (args) => {
+            if (0 === syncIdsOfInterest.length)
+                return;
+            // istanbul ignore else
+            if (syncIdsOfInterest.some((value) => args.eventIds.has(value.toLowerCase()))) {
+                // process each item that has interest
+                itemsManager.refreshAffectedItems(args.eventIds);
+            }
+        };
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            // initialize the display state of any items with syncIds/condition defined
+            itemsManager.refreshAffectedItems(new Set(syncIdsOfInterest));
+        }
+        SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
+        return () => {
+            SyncUiEventDispatcher.onSyncUiEvent.removeListener(handleSyncUiEvent);
+        };
+    }, [itemsManager, itemsManager.items, syncIdsOfInterest]);
+}
+/** local function to combine items from Stage and from Extensions */
+function combineItems(stageItems, addonItems) {
+    const items = [];
+    if (stageItems.length)
+        items.push(...stageItems);
+    if (addonItems.length)
+        items.push(...addonItems);
+    return items;
+}
+/** @internal */
+export const useGroupedItems = (items) => {
+    return React.useMemo(() => {
+        const grouped = items.reduce((acc, item) => {
+            if (ConditionalBooleanValue.getValue(item.isHidden))
+                return acc;
+            const groupIndex = acc.findIndex((group) => group[0].groupPriority === item.groupPriority);
+            if (groupIndex >= 0)
+                return [
+                    ...acc.slice(0, groupIndex),
+                    [
+                        ...acc[groupIndex],
+                        item,
+                    ],
+                    ...acc.slice(groupIndex + 1),
+                ];
+            return [
+                ...acc,
+                [
+                    item,
+                ],
+            ];
+        }, []);
+        const sortedGroups = grouped.reduce((acc, group) => {
+            const sortedGroup = [...group].sort((a, b) => a.itemPriority - b.itemPriority);
+            return [
+                ...acc,
+                sortedGroup,
+            ];
+        }, []);
+        return [...sortedGroups].sort((a, b) => a[0].groupPriority - b[0].groupPriority);
+    }, [items]);
+};
+/** Backstage component composed from [[BackstageManager]] items.
+ * @public
+ */
+export function BackstageComposer(props) {
+    const [defaultItemsManager, setDefaultItemsManager] = React.useState(new BackstageItemsManager(props.items));
+    const initialItems = React.useRef(props.items);
+    React.useEffect(() => {
+        if (initialItems.current !== props.items) {
+            initialItems.current = props.items;
+            setDefaultItemsManager(new BackstageItemsManager(props.items));
+        }
+    }, [props.items]);
+    const manager = useBackstageManager();
+    const isOpen = useIsBackstageOpen(manager);
+    const safeAreaInsets = React.useContext(SafeAreaContext);
+    const handleClose = React.useCallback(() => {
+        manager.close();
+    }, [manager]);
+    const defaultItems = useDefaultBackstageItems(defaultItemsManager);
+    const syncIdsOfInterest = React.useMemo(() => BackstageItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);
+    useBackstageItemSyncEffect(defaultItemsManager, syncIdsOfInterest);
+    const [addonItemsManager] = React.useState(new BackstageItemsManager());
+    const addonItems = useUiItemsProviderBackstageItems(addonItemsManager);
+    const addonSyncIdsOfInterest = React.useMemo(() => BackstageItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
+    useBackstageItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
+    const combinedBackstageItems = React.useMemo(() => combineItems(defaultItems, addonItems), [defaultItems, addonItems]);
+    const groups = useGroupedItems(combinedBackstageItems);
+    return (React.createElement(NZ_Backstage, { className: props.className, header: props.header, isOpen: isOpen, onClose: handleClose, safeAreaInsets: safeAreaInsets, showOverlay: props.showOverlay, style: props.style }, groups.map((group, groupIndex) => (group.map((item, itemIndex) => {
+        const composerItem = (React.createElement(BackstageComposerItem, { item: item, key: item.id }));
+        return itemIndex === 0 && groupIndex > 0 ? (React.createElement(React.Fragment, { key: groupIndex },
+            React.createElement(BackstageSeparator, null),
+            composerItem)) : composerItem;
+    })))));
+}
+//# sourceMappingURL=BackstageComposer.js.map

package/lib/esm/appui-react/backstage/BackstageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackstageComposer.js","sourceRoot":"","sources":["../../../../src/appui-react/backstage/BackstageComposer.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/** @packageDocumentation\r\n * @module Backstage\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { BackstageItem, BackstageItemsManager, ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Backstage as NZ_Backstage, BackstageSeparator } from \"@itwin/appui-layout-react\"; // eslint-disable-line sort-imports\r\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\r\nimport { SyncUiEventArgs, SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher\";\r\nimport { BackstageComposerItem } from \"./BackstageComposerItem\";\r\nimport { useBackstageManager, useIsBackstageOpen } from \"./BackstageManager\";\r\nimport { useDefaultBackstageItems } from \"./useDefaultBackstageItems\";\r\nimport { useUiItemsProviderBackstageItems } from \"./useUiItemsProviderBackstageItems\";\r\n\r\n// cSpell:ignore safearea\r\n\r\n/** Private function to set up sync event monitoring of backstage items */\r\nfunction useBackstageItemSyncEffect(itemsManager: BackstageItemsManager, syncIdsOfInterest: string[]) {\r\n  const isInitialMount = React.useRef(true);\r\n\r\n  React.useEffect(() => {\r\n    const handleSyncUiEvent = (args: SyncUiEventArgs) => {\r\n      if (0 === syncIdsOfInterest.length)\r\n        return;\r\n\r\n      // istanbul ignore else\r\n      if (syncIdsOfInterest.some((value: string): boolean => args.eventIds.has(value.toLowerCase()))) {\r\n        // process each item that has interest\r\n        itemsManager.refreshAffectedItems(args.eventIds);\r\n      }\r\n    };\r\n\r\n    if (isInitialMount.current) {\r\n      isInitialMount.current = false;\r\n      // initialize the display state of any items with syncIds/condition defined\r\n      itemsManager.refreshAffectedItems(new Set(syncIdsOfInterest));\r\n    }\r\n\r\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);\r\n    return () => {\r\n      SyncUiEventDispatcher.onSyncUiEvent.removeListener(handleSyncUiEvent);\r\n    };\r\n  }, [itemsManager, itemsManager.items, syncIdsOfInterest]);\r\n}\r\n\r\n/** local function to combine items from Stage and from Extensions */\r\nfunction combineItems(stageItems: ReadonlyArray<BackstageItem>, addonItems: ReadonlyArray<BackstageItem>) {\r\n  const items: BackstageItem[] = [];\r\n  if (stageItems.length)\r\n    items.push(...stageItems);\r\n  if (addonItems.length)\r\n    items.push(...addonItems);\r\n  return items;\r\n}\r\n\r\n/** @internal */\r\nexport type GroupedItems = ReadonlyArray<ReadonlyArray<BackstageItem>>;\r\n\r\n/** @internal */\r\nexport const useGroupedItems = (items: ReadonlyArray<BackstageItem>): GroupedItems => {\r\n  return React.useMemo(() => {\r\n    const grouped = items.reduce<GroupedItems>((acc, item) => {\r\n      if (ConditionalBooleanValue.getValue(item.isHidden))\r\n        return acc;\r\n      const groupIndex = acc.findIndex((group) => group[0].groupPriority === item.groupPriority);\r\n      if (groupIndex >= 0)\r\n        return [\r\n          ...acc.slice(0, groupIndex),\r\n          [\r\n            ...acc[groupIndex],\r\n            item,\r\n          ],\r\n          ...acc.slice(groupIndex + 1),\r\n        ];\r\n      return [\r\n        ...acc,\r\n        [\r\n          item,\r\n        ],\r\n      ];\r\n    }, []);\r\n    const sortedGroups = grouped.reduce<GroupedItems>((acc, group) => {\r\n      const sortedGroup = [...group].sort((a, b) => a.itemPriority - b.itemPriority);\r\n      return [\r\n        ...acc,\r\n        sortedGroup,\r\n      ];\r\n    }, []);\r\n    return [...sortedGroups].sort((a, b) => a[0].groupPriority - b[0].groupPriority);\r\n  }, [items]);\r\n};\r\n\r\n/** Props of [[BackstageComposer]] component.\r\n * @public\r\n */\r\nexport interface BackstageComposerProps extends CommonProps {\r\n  /** React node for an optional header item */\r\n  readonly header?: React.ReactNode;\r\n  /** Indicates whether to place an overlay over the frontstage when the backstage is displayed */\r\n  readonly showOverlay?: boolean;\r\n  /** List of backstage items to show */\r\n  readonly items: BackstageItem[];\r\n}\r\n\r\n/** Backstage component composed from [[BackstageManager]] items.\r\n * @public\r\n */\r\nexport function BackstageComposer(props: BackstageComposerProps) {\r\n  const [defaultItemsManager, setDefaultItemsManager] = React.useState(new BackstageItemsManager(props.items));\r\n  const initialItems = React.useRef(props.items);\r\n\r\n  React.useEffect(() => {\r\n    if (initialItems.current !== props.items) {\r\n      initialItems.current = props.items;\r\n      setDefaultItemsManager(new BackstageItemsManager(props.items));\r\n    }\r\n  }, [props.items]);\r\n\r\n  const manager = useBackstageManager();\r\n  const isOpen = useIsBackstageOpen(manager);\r\n  const safeAreaInsets = React.useContext(SafeAreaContext);\r\n  const handleClose = React.useCallback(() => {\r\n    manager.close();\r\n  }, [manager]);\r\n\r\n  const defaultItems = useDefaultBackstageItems(defaultItemsManager);\r\n  const syncIdsOfInterest = React.useMemo(() => BackstageItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);\r\n  useBackstageItemSyncEffect(defaultItemsManager, syncIdsOfInterest);\r\n\r\n  const [addonItemsManager] = React.useState(new BackstageItemsManager());\r\n  const addonItems = useUiItemsProviderBackstageItems(addonItemsManager);\r\n  const addonSyncIdsOfInterest = React.useMemo(() => BackstageItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);\r\n  useBackstageItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);\r\n\r\n  const combinedBackstageItems = React.useMemo(() => combineItems(defaultItems, addonItems), [defaultItems, addonItems]);\r\n  const groups = useGroupedItems(combinedBackstageItems);\r\n\r\n  return (\r\n    <NZ_Backstage\r\n      className={props.className}\r\n      header={props.header}\r\n      isOpen={isOpen}\r\n      onClose={handleClose}\r\n      safeAreaInsets={safeAreaInsets}\r\n      showOverlay={props.showOverlay}\r\n      style={props.style}\r\n    >\r\n      {groups.map((group, groupIndex) => (\r\n        group.map((item, itemIndex) => {\r\n          const composerItem = (\r\n            <BackstageComposerItem\r\n              item={item}\r\n              key={item.id}\r\n            />\r\n          );\r\n          return itemIndex === 0 && groupIndex > 0 ? (\r\n            <React.Fragment key={groupIndex}>\r\n              <BackstageSeparator />\r\n              {composerItem}\r\n            </React.Fragment>\r\n          ) : composerItem;\r\n        })\r\n      ))}\r\n    </NZ_Backstage>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/backstage/BackstageComposerItem.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+/// <reference types="react" />
+import { BackstageActionItem, BackstageItem, BackstageStageLauncher } from "@itwin/appui-abstract";
+/** @internal */
+export interface BackstageComposerActionItemProps {
+    readonly item: BackstageActionItem;
+}
+/** @internal */
+export declare function BackstageComposerActionItem({ item }: BackstageComposerActionItemProps): JSX.Element;
+/** @internal */
+export interface BackstageComposerStageLauncherProps {
+    readonly item: BackstageStageLauncher;
+}
+/** @internal */
+export declare function BackstageComposerStageLauncher({ item }: BackstageComposerStageLauncherProps): JSX.Element;
+/** Props of [[BackstageComposerItem]] component.
+ * @beta
+ */
+export interface BackstageComposerItemProps {
+    /** Backstage item to render */
+    readonly item: BackstageItem;
+}
+/** Item of [[BackstageComposer]].
+ * @beta
+ */
+export declare function BackstageComposerItem({ item }: BackstageComposerItemProps): JSX.Element;
+//# sourceMappingURL=BackstageComposerItem.d.ts.map

package/lib/esm/appui-react/backstage/BackstageComposerItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackstageComposerItem.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/backstage/BackstageComposerItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EACL,mBAAmB,EAAE,aAAa,EAAE,sBAAsB,EAC3D,MAAM,uBAAuB,CAAC;AAO/B,gBAAgB;AAChB,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;CACpC;AAED,gBAAgB;AAChB,wBAAgB,2BAA2B,CAAC,EAAE,IAAI,EAAE,EAAE,gCAAgC,eAmBrF;AAED,gBAAgB;AAChB,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,IAAI,EAAE,sBAAsB,CAAC;CACvC;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAAC,EAAE,IAAI,EAAE,EAAE,mCAAmC,eAuB3F;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,0BAA0B,eAazE"}

package/lib/esm/appui-react/backstage/BackstageComposerItem.js

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Backstage
+ */
+import * as React from "react";
+import { Logger } from "@itwin/core-bentley";
+import { ConditionalBooleanValue, ConditionalStringValue, isStageLauncher, } from "@itwin/appui-abstract";
+import { BadgeUtilities, Icon } from "@itwin/core-react";
+import { BackstageItem as NZ_BackstageItem } from "@itwin/appui-layout-react";
+import { useActiveFrontstageId } from "../frontstage/Frontstage";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { useBackstageManager } from "./BackstageManager";
+/** @internal */
+export function BackstageComposerActionItem({ item }) {
+    const manager = useBackstageManager();
+    const handleClick = React.useCallback(() => {
+        manager.close();
+        item.execute();
+    }, [manager, item]);
+    return (React.createElement(NZ_BackstageItem, { itemId: item.id, icon: React.createElement(Icon, { iconSpec: ConditionalStringValue.getValue(item.icon) }), isActive: ConditionalBooleanValue.getValue(item.isActive), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), onClick: handleClick, subtitle: ConditionalStringValue.getValue(item.subtitle), badge: BadgeUtilities.getComponentForBadgeType(item.badgeType) }, ConditionalStringValue.getValue(item.label)));
+}
+/** @internal */
+export function BackstageComposerStageLauncher({ item }) {
+    var _a;
+    const manager = useBackstageManager();
+    const handleClick = React.useCallback(() => {
+        manager.close();
+        if (!FrontstageManager.hasFrontstage(item.stageId))
+            return Logger.logError("BackstageComposerStageLauncher", `Frontstage with id '${item.stageId}' not found`);
+        void FrontstageManager.setActiveFrontstage(item.stageId);
+    }, [manager, item.stageId]);
+    const activeFrontstageId = useActiveFrontstageId();
+    const isActive = ConditionalBooleanValue.getValue((_a = item.isActive) !== null && _a !== void 0 ? _a : item.stageId === activeFrontstageId);
+    return (React.createElement(NZ_BackstageItem, { itemId: item.id, icon: React.createElement(Icon, { iconSpec: ConditionalStringValue.getValue(item.icon) }), isActive: isActive, isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), onClick: handleClick, subtitle: ConditionalStringValue.getValue(item.subtitle), badge: BadgeUtilities.getComponentForBadgeType(item.badgeType) }, ConditionalStringValue.getValue(item.label)));
+}
+/** Item of [[BackstageComposer]].
+ * @beta
+ */
+export function BackstageComposerItem({ item }) {
+    if (isStageLauncher(item)) {
+        return (React.createElement(BackstageComposerStageLauncher, { item: item }));
+    }
+    return (React.createElement(BackstageComposerActionItem, { item: item }));
+}
+//# sourceMappingURL=BackstageComposerItem.js.map