@itwin/appui-react 5.30.1 → 5.32.0

package/lib/cjs/appui-react/backstage/Backstage.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as zIndex;
+
+.uifw-backstage-backstage_wrapper {
+  @include zIndex.uicore-z-index(backstage);
+}
+
+.uifw-backstage-backstage {
+  inset-block-end: 0;
+  border-radius: 0;
+  margin-block-start: 0;
+  margin-inline-start: 0;
+}
+
+.uifw-backstage-backstage_backdrop {
+  &:where(.uifw-transparent) {
+    background-color: transparent;
+  }
+}
+
+.uifw-backstage-backstage_content {
+  padding-inline: var(--iui-size-xs);
+}
+
+.uifw-backstage-backstage_divider {
+  $margin-block: var(--iui-size-2xs);
+  $margin-inline: calc(-1 * var(--iui-size-xs));
+
+  margin-block-start: $margin-block;
+  margin-block-end: $margin-block;
+  margin-inline-start: $margin-inline;
+  margin-inline-end: $margin-inline;
+}
+
+.uifw-backstage-backstage_badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}

package/lib/cjs/appui-react/frontstage/ModalFrontstage.scss

@@ -13,15 +13,21 @@
   pointer-events: none;
   visibility: hidden;
   overflow: hidden;
-  background: transparent;
+  background: color-mix(
+    in srgb,
+    var(--iui-color-background-backdrop),
+    transparent 5%
+  );
   transition: background 0.25s ease, visibility 0s ease 0.275s;
 
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
   @include uicore-z-index(modal-frontstage);
 
+  &:not(.uifw-no-header) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .uifw-modal-app-bar {
     transition: transform 0.125s;
     padding: 10px;
@@ -62,15 +68,3 @@
     }
   }
 }
-
-.uifw-modal-frontstage-overlay {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  top: 0px;
-  height: 100%;
-  opacity: 0.95;
-  background: var(--iui-color-background-backdrop);
-
-  @include uicore-z-index(modal-frontstage-overlay);
-}

package/lib/esm/appui-react/backstage/Backstage.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as zIndex;
+
+.uifw-backstage-backstage_wrapper {
+  @include zIndex.uicore-z-index(backstage);
+}
+
+.uifw-backstage-backstage {
+  inset-block-end: 0;
+  border-radius: 0;
+  margin-block-start: 0;
+  margin-inline-start: 0;
+}
+
+.uifw-backstage-backstage_backdrop {
+  &:where(.uifw-transparent) {
+    background-color: transparent;
+  }
+}
+
+.uifw-backstage-backstage_content {
+  padding-inline: var(--iui-size-xs);
+}
+
+.uifw-backstage-backstage_divider {
+  $margin-block: var(--iui-size-2xs);
+  $margin-inline: calc(-1 * var(--iui-size-xs));
+
+  margin-block-start: $margin-block;
+  margin-block-end: $margin-block;
+  margin-inline-start: $margin-inline;
+  margin-inline-end: $margin-inline;
+}
+
+.uifw-backstage-backstage_badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}

package/lib/esm/appui-react/frontstage/ModalFrontstage.scss

@@ -13,15 +13,21 @@
   pointer-events: none;
   visibility: hidden;
   overflow: hidden;
-  background: transparent;
+  background: color-mix(
+    in srgb,
+    var(--iui-color-background-backdrop),
+    transparent 5%
+  );
   transition: background 0.25s ease, visibility 0s ease 0.275s;
 
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
   @include uicore-z-index(modal-frontstage);
 
+  &:not(.uifw-no-header) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .uifw-modal-app-bar {
     transition: transform 0.125s;
     padding: 10px;
@@ -62,15 +68,3 @@
     }
   }
 }
-
-.uifw-modal-frontstage-overlay {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  top: 0px;
-  height: 100%;
-  opacity: 0.95;
-  background: var(--iui-color-background-backdrop);
-
-  @include uicore-z-index(modal-frontstage-overlay);
-}

package/lib/public/locales/en/UiFramework.json

@@ -1,4 +1,7 @@
 {
+  "backstage": {
+    "label": "Backstage"
+  },
   "iModelPanelHeader": {
     "projects": "Projects"
   },
@@ -124,7 +127,7 @@
     "yes": "Yes",
     "no": "No",
     "clearSelection": "Clear Selection",
-    "openBackstageMenu": "Open backstage menu"
+    "openBackstageMenu": "Open backstage"
   },
   "navigationAid": {
     "sheetsModalFrontstage": "Sheet Views"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.30.1",
+  "version": "5.32.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,9 +45,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.30.1",
-    "@itwin/core-react": "5.30.1",
-    "@itwin/imodel-components-react": "5.30.1"
+    "@itwin/components-react": "5.32.0",
+    "@itwin/core-react": "5.32.0",
+    "@itwin/imodel-components-react": "5.32.0"
   },
   "devDependencies": {
     "@itwin/appui-abstract": "^5.8.1",
@@ -89,9 +89,9 @@
     "typescript": "~5.6.3",
     "upath": "^2.0.1",
     "vitest": "^3.2.4",
-    "@itwin/components-react": "5.30.1",
-    "@itwin/core-react": "5.30.1",
-    "@itwin/imodel-components-react": "5.30.1"
+    "@itwin/components-react": "5.32.0",
+    "@itwin/core-react": "5.32.0",
+    "@itwin/imodel-components-react": "5.32.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.11.0",

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"BackstageComposerItem.d.ts","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposerItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AASH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EACb,sBAAsB,EAEvB,MAAM,oBAAoB,CAAC;AAK5B,gBAAgB;AAChB,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;CACpC;AAED,gBAAgB;AAChB,wBAAgB,2BAA2B,CAAC,EAC1C,IAAI,GACL,EAAE,gCAAgC,qBAwBlC;AAED,gBAAgB;AAChB,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,IAAI,EAAE,sBAAsB,CAAC;CACvC;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B,CAAC,EAC7C,IAAI,GACL,EAAE,mCAAmC,qBAiCrC;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,qBAKzE"}

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

@@ -1,66 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { ConditionalBooleanValue, ConditionalStringValue, } from "@itwin/appui-abstract";
-import { Logger } from "@itwin/core-bentley";
-import { Icon as CoreIcon } from "@itwin/core-react";
-import { Badge } from "@itwin/core-react/internal";
-import * as React from "react";
-import { UiFramework } from "../UiFramework.js";
-import { useActiveFrontstageId } from "../frontstage/FrontstageDef.js";
-import { BackstageItem as NZ_BackstageItem } from "../layout/backstage/Item.js";
-import { isProviderItem } from "../ui-items-provider/isProviderItem.js";
-import { isBackstageStageLauncher } from "./BackstageItem.js";
-import { useBackstageManager } from "./BackstageManager.js";
-import { Icon } from "@itwin/itwinui-react";
-/** @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, providerId: isProviderItem(item) ? item.providerId : undefined, itemPriority: item.itemPriority, groupPriority: item.groupPriority, 
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        icon: React.createElement(ItemIcon, { iconNode: item.iconNode, icon: item.icon }), isActive: ConditionalBooleanValue.getValue(item.isActive), isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), onClick: handleClick, subtitle: ConditionalStringValue.getValue(item.subtitle), 
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        badge: React.createElement(Badge, { type: item.badgeKind || item.badge }) }, ConditionalStringValue.getValue(item.label)));
-}
-/** @internal */
-export function BackstageComposerStageLauncher({ item, }) {
-    const manager = useBackstageManager();
-    const handleClick = React.useCallback(() => {
-        manager.close();
-        if (!UiFramework.frontstages.hasFrontstage(item.stageId))
-            return Logger.logError("BackstageComposerStageLauncher", `Frontstage with id '${item.stageId}' not found`);
-        void UiFramework.frontstages.setActiveFrontstage(item.stageId);
-    }, [manager, item.stageId]);
-    const activeFrontstageId = useActiveFrontstageId();
-    const isActive = ConditionalBooleanValue.getValue(item.isActive ?? item.stageId === activeFrontstageId);
-    return (React.createElement(NZ_BackstageItem, { itemId: item.id, providerId: isProviderItem(item) ? item.providerId : undefined, itemPriority: item.itemPriority, groupPriority: item.groupPriority, 
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        icon: React.createElement(ItemIcon, { iconNode: item.iconNode, icon: item.icon }), isActive: isActive, isDisabled: ConditionalBooleanValue.getValue(item.isDisabled), onClick: handleClick, subtitle: ConditionalStringValue.getValue(item.subtitle), 
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        badge: React.createElement(Badge, { type: item.badgeKind || item.badge }) }, ConditionalStringValue.getValue(item.label)));
-}
-/** Item of [[BackstageComposer]].
- * @internal
- */
-export function BackstageComposerItem({ item }) {
-    if (isBackstageStageLauncher(item)) {
-        return React.createElement(BackstageComposerStageLauncher, { item: item });
-    }
-    return React.createElement(BackstageComposerActionItem, { item: item });
-}
-function ItemIcon({ icon, iconNode, }) {
-    if (iconNode) {
-        return React.createElement(Icon, null, iconNode);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    return React.createElement(CoreIcon, { iconSpec: icon });
-}
-//# sourceMappingURL=BackstageComposerItem.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BackstageComposerItem.js","sourceRoot":"","sources":["../../../src/appui-react/backstage/BackstageComposerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Backstage\n */\n\nimport {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { Icon as CoreIcon } from \"@itwin/core-react\";\nimport { Badge } from \"@itwin/core-react/internal\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport { useActiveFrontstageId } from \"../frontstage/FrontstageDef.js\";\nimport { BackstageItem as NZ_BackstageItem } from \"../layout/backstage/Item.js\";\nimport { isProviderItem } from \"../ui-items-provider/isProviderItem.js\";\nimport type {\n  BackstageActionItem,\n  BackstageItem,\n  BackstageStageLauncher,\n  CommonBackstageItem,\n} from \"./BackstageItem.js\";\nimport { isBackstageStageLauncher } from \"./BackstageItem.js\";\nimport { useBackstageManager } from \"./BackstageManager.js\";\nimport { Icon } from \"@itwin/itwinui-react\";\n\n/** @internal */\nexport interface BackstageComposerActionItemProps {\n  readonly item: BackstageActionItem;\n}\n\n/** @internal */\nexport function BackstageComposerActionItem({\n  item,\n}: BackstageComposerActionItemProps) {\n  const manager = useBackstageManager();\n  const handleClick = React.useCallback(() => {\n    manager.close();\n    item.execute();\n  }, [manager, item]);\n  return (\n    <NZ_BackstageItem\n      itemId={item.id}\n      providerId={isProviderItem(item) ? item.providerId : undefined}\n      itemPriority={item.itemPriority}\n      groupPriority={item.groupPriority}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      icon={<ItemIcon iconNode={item.iconNode} icon={item.icon} />}\n      isActive={ConditionalBooleanValue.getValue(item.isActive)}\n      isDisabled={ConditionalBooleanValue.getValue(item.isDisabled)}\n      onClick={handleClick}\n      subtitle={ConditionalStringValue.getValue(item.subtitle)}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      badge={<Badge type={item.badgeKind || item.badge} />}\n    >\n      {ConditionalStringValue.getValue(item.label)}\n    </NZ_BackstageItem>\n  );\n}\n\n/** @internal */\nexport interface BackstageComposerStageLauncherProps {\n  readonly item: BackstageStageLauncher;\n}\n\n/** @internal */\nexport function BackstageComposerStageLauncher({\n  item,\n}: BackstageComposerStageLauncherProps) {\n  const manager = useBackstageManager();\n  const handleClick = React.useCallback(() => {\n    manager.close();\n    if (!UiFramework.frontstages.hasFrontstage(item.stageId))\n      return Logger.logError(\n        \"BackstageComposerStageLauncher\",\n        `Frontstage with id '${item.stageId}' not found`\n      );\n    void UiFramework.frontstages.setActiveFrontstage(item.stageId);\n  }, [manager, item.stageId]);\n  const activeFrontstageId = useActiveFrontstageId();\n  const isActive = ConditionalBooleanValue.getValue(\n    item.isActive ?? item.stageId === activeFrontstageId\n  );\n  return (\n    <NZ_BackstageItem\n      itemId={item.id}\n      providerId={isProviderItem(item) ? item.providerId : undefined}\n      itemPriority={item.itemPriority}\n      groupPriority={item.groupPriority}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      icon={<ItemIcon iconNode={item.iconNode} icon={item.icon} />}\n      isActive={isActive}\n      isDisabled={ConditionalBooleanValue.getValue(item.isDisabled)}\n      onClick={handleClick}\n      subtitle={ConditionalStringValue.getValue(item.subtitle)}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      badge={<Badge type={item.badgeKind || item.badge} />}\n    >\n      {ConditionalStringValue.getValue(item.label)}\n    </NZ_BackstageItem>\n  );\n}\n\n/** Props of [[BackstageComposerItem]] component.\n * @internal\n */\nexport interface BackstageComposerItemProps {\n  /** Backstage item to render */\n  readonly item: BackstageItem;\n}\n\n/** Item of [[BackstageComposer]].\n * @internal\n */\nexport function BackstageComposerItem({ item }: BackstageComposerItemProps) {\n  if (isBackstageStageLauncher(item)) {\n    return <BackstageComposerStageLauncher item={item} />;\n  }\n  return <BackstageComposerActionItem item={item} />;\n}\n\nfunction ItemIcon({\n  icon,\n  iconNode,\n}: {\n  icon: CommonBackstageItem[\"icon\"];\n  iconNode: CommonBackstageItem[\"iconNode\"];\n}) {\n  if (iconNode) {\n    return <Icon>{iconNode}</Icon>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return <CoreIcon iconSpec={icon} />;\n}\n"]}

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

@@ -1,42 +0,0 @@
-/** @packageDocumentation
- * @module Backstage
- */
-import type { CommonProps } from "@itwin/core-react";
-import * as React from "react";
-import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets.js";
-import "./Backstage.scss";
-/** Properties of [[Backstage]] component.
- * @internal
- */
-export interface BackstageProps extends CommonProps {
-    /** Backstage items and separators. I.e. [[BackstageItem]], [[BackstageSeparator]] */
-    children?: React.ReactNode;
-    /** Optional footer content. */
-    footer?: React.ReactNode;
-    /** Optional header content. I.e. [[UserProfile]] */
-    header?: React.ReactNode;
-    /** Describes if the backstage is open. */
-    isOpen?: boolean;
-    /** Function called when backstage is closed. */
-    onClose?: () => void;
-    /** Describes respected safe area insets. */
-    safeAreaInsets?: SafeAreaInsets;
-    /** Describes if a ghosting overlay is shown. */
-    showOverlay: boolean;
-}
-/** Default properties of [[Backstage]] component.
- * @internal
- */
-export type BackstageDefaultProps = Pick<BackstageProps, "showOverlay">;
-/** Backstage component of 9-Zone UI app.
- * @internal
- */
-export declare class Backstage extends React.PureComponent<BackstageProps> {
-    static readonly defaultProps: BackstageDefaultProps;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    private _onClose;
-    private _onEsc;
-}
-//# sourceMappingURL=Backstage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Backstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Backstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oDAAoD;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gDAAgD;IAChD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAExE;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChE,gBAAuB,YAAY,EAAE,qBAAqB,CAExD;IAEc,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB;IAIpB,MAAM;IAiCtB,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,MAAM,CAIZ;CACH"}

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

@@ -1,46 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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 classnames from "classnames";
-import * as React from "react";
-import { Key } from "ts-key-enum";
-import { SafeAreaInsetsHelpers } from "../base/SafeAreaInsets.js";
-import "./Backstage.scss";
-/** Backstage component of 9-Zone UI app.
- * @internal
- */
-export class Backstage extends React.PureComponent {
-    static defaultProps = {
-        showOverlay: true,
-    };
-    componentDidMount() {
-        document.addEventListener("keydown", this._onEsc, false);
-    }
-    componentWillUnmount() {
-        document.removeEventListener("keydown", this._onEsc, false);
-    }
-    render() {
-        const overlayClassName = classnames("nz-backstage-backstage_overlay", this.props.isOpen && "nz-open", this.props.showOverlay && "nz-overlay");
-        const backstageClassName = classnames("nz-backstage-backstage", this.props.isOpen && "nz-open", this.props.safeAreaInsets &&
-            SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets), this.props.className);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: overlayClassName, onClick: this._onClose, role: "presentation" }),
-            React.createElement("div", { className: backstageClassName, style: this.props.style },
-                this.props.header && (React.createElement("div", { className: "nz-header" }, this.props.header)),
-                React.createElement("ul", { role: "menu" }, this.props.children),
-                this.props.footer && (React.createElement("div", { className: "nz-footer" }, this.props.footer)))));
-    }
-    _onClose = () => {
-        this.props.onClose && this.props.onClose();
-    };
-    _onEsc = (event) => {
-        if (this.props.isOpen && event.key === Key.Escape.valueOf()) {
-            this._onClose();
-        }
-    };
-}
-//# sourceMappingURL=Backstage.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Backstage.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Backstage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,kBAAkB,CAAC;AA4B1B;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IACzD,MAAM,CAAU,YAAY,GAA0B;QAC3D,WAAW,EAAE,IAAI;KAClB,CAAC;IAEc,iBAAiB;QAC/B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3D,CAAC;IAEe,oBAAoB;QAClC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEe,MAAM;QACpB,MAAM,gBAAgB,GAAG,UAAU,CACjC,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAC9B,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,YAAY,CACvC,CAAC;QACF,MAAM,kBAAkB,GAAG,UAAU,CACnC,wBAAwB,EACxB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAC9B,IAAI,CAAC,KAAK,CAAC,cAAc;YACvB,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EACnE,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL;YACE,6BACE,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,cAAc,GACnB;YACF,6BAAK,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACxD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CACpB,6BAAK,SAAS,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAO,CACrD;gBACD,4BAAI,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAM;gBACzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CACpB,6BAAK,SAAS,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAO,CACrD,CACG,CACL,CACJ,CAAC;IACJ,CAAC;IAEO,QAAQ,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC7C,CAAC,CAAC;IAEM,MAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;QAC9C,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Backstage\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { SafeAreaInsets } from \"../../safearea/SafeAreaInsets.js\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets.js\";\nimport \"./Backstage.scss\";\n\n/** Properties of [[Backstage]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageProps extends CommonProps {\n  /** Backstage items and separators. I.e. [[BackstageItem]], [[BackstageSeparator]] */\n  children?: React.ReactNode;\n  /** Optional footer content. */\n  footer?: React.ReactNode;\n  /** Optional header content. I.e. [[UserProfile]] */\n  header?: React.ReactNode;\n  /** Describes if the backstage is open. */\n  isOpen?: boolean;\n  /** Function called when backstage is closed. */\n  onClose?: () => void;\n  /** Describes respected safe area insets. */\n  safeAreaInsets?: SafeAreaInsets;\n  /** Describes if a ghosting overlay is shown. */\n  showOverlay: boolean;\n}\n\n/** Default properties of [[Backstage]] component.\n * @internal\n */\nexport type BackstageDefaultProps = Pick<BackstageProps, \"showOverlay\">;\n\n/** Backstage component of 9-Zone UI app.\n * @internal\n */\nexport class Backstage extends React.PureComponent<BackstageProps> {\n  public static readonly defaultProps: BackstageDefaultProps = {\n    showOverlay: true,\n  };\n\n  public override componentDidMount(): void {\n    document.addEventListener(\"keydown\", this._onEsc, false);\n  }\n\n  public override componentWillUnmount() {\n    document.removeEventListener(\"keydown\", this._onEsc, false);\n  }\n\n  public override render() {\n    const overlayClassName = classnames(\n      \"nz-backstage-backstage_overlay\",\n      this.props.isOpen && \"nz-open\",\n      this.props.showOverlay && \"nz-overlay\"\n    );\n    const backstageClassName = classnames(\n      \"nz-backstage-backstage\",\n      this.props.isOpen && \"nz-open\",\n      this.props.safeAreaInsets &&\n        SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets),\n      this.props.className\n    );\n    return (\n      <>\n        <div\n          className={overlayClassName}\n          onClick={this._onClose}\n          role=\"presentation\"\n        />\n        <div className={backstageClassName} style={this.props.style}>\n          {this.props.header && (\n            <div className=\"nz-header\">{this.props.header}</div>\n          )}\n          <ul role=\"menu\">{this.props.children}</ul>\n          {this.props.footer && (\n            <div className=\"nz-footer\">{this.props.footer}</div>\n          )}\n        </div>\n      </>\n    );\n  }\n\n  private _onClose = () => {\n    this.props.onClose && this.props.onClose();\n  };\n\n  private _onEsc = (event: KeyboardEvent): void => {\n    if (this.props.isOpen && event.key === Key.Escape.valueOf()) {\n      this._onClose();\n    }\n  };\n}\n"]}

package/lib/appui-react/layout/backstage/Backstage.scss

@@ -1,90 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@use "~@itwin/core-react/lib/core-react/z-index" as *;
-@use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
-@use "../prefix" as *;
-@use "../safearea" as *;
-@use "../scrollbar" as *;
-@use "variables" as *;
-
-.nz-backstage-backstage {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: $nz-backstage-width;
-  height: 100%;
-  font-size: $nz-backstage-item-font-size;
-  color: var(--iui-color-text);
-  background-color: var(--iui-color-background);
-  border-right: 1px solid var(--iui-color-border);
-  transform: translateX(-100%);
-  box-sizing: border-box;
-
-  @include uicore-z-index(backstage);
-  @include nz-transition(transform 0.25s ease);
-
-  &.nz-open {
-    @include nz-transform(translateX(0%));
-  }
-
-  @include for-tablet-landscape-down {
-    font-size: var(--iui-font-size-1);
-  }
-
-  @include for-phone-only {
-    font-size: var(--iui-font-size-0);
-  }
-
-  > ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow: auto;
-
-    @include nz-scrollbar;
-  }
-
-  > .nz-header {
-    border-bottom: $nz-backstage-header-divider-width solid
-      var(--iui-color-border-subtle);
-  }
-
-  > .nz-footer {
-    margin-top: auto;
-  }
-
-  &.nz-safe-area-top {
-    @include nz-safe-area-top;
-  }
-
-  &.nz-safe-area-bottom {
-    @include nz-safe-area-bottom;
-  }
-}
-
-.nz-backstage-backstage_overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
-  background: transparent;
-  @include uicore-z-index(backstage);
-  @include nz-transition(0.25s ease);
-
-  &.nz-open {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  &.nz-overlay {
-    background-color: $nz-backstage-overlay-background;
-  }
-}

package/lib/appui-react/layout/backstage/Item.d.ts

@@ -1,38 +0,0 @@
-/** @packageDocumentation
- * @module Backstage
- */
-import type { CommonProps } from "@itwin/core-react";
-import * as React from "react";
-import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets.js";
-import "./Item.scss";
-/** Properties of [[BackstageItem]] component.
- * @internal
- */
-export interface BackstageItemProps extends CommonProps {
-    /** Backstage item label. */
-    children?: string;
-    /** Backstage item icon. */
-    icon?: React.ReactNode;
-    /** Describes if the item is active. */
-    isActive?: boolean;
-    /** Describes if the item is disabled. */
-    isDisabled?: boolean;
-    /** Function called when item is clicked. */
-    onClick?: () => void;
-    /** Describes respected safe area insets. */
-    safeAreaInsets?: SafeAreaInsets;
-    /** Backstage item subtitle. */
-    subtitle?: string;
-    /** A badge to draw. */
-    badge?: React.ReactNode;
-    providerId?: string;
-    itemPriority?: number;
-    groupPriority?: number;
-}
-/** Item in the [[Backstage]].
- * @internal
- */
-export declare class BackstageItem extends React.PureComponent<BackstageItemProps> {
-    render(): React.JSX.Element;
-}
-//# sourceMappingURL=Item.d.ts.map

package/lib/appui-react/layout/backstage/Item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,aAAa,CAAC;AAErB;;GAEG;AAEH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CAgCvB"}

package/lib/appui-react/layout/backstage/Item.js

@@ -1,29 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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 classnames from "classnames";
-import * as React from "react";
-import { SafeAreaInsetsHelpers } from "../base/SafeAreaInsets.js";
-import "./Item.scss";
-/** Item in the [[Backstage]].
- * @internal
- */
-export class BackstageItem extends React.PureComponent {
-    render() {
-        const className = classnames("nz-backstage-item", this.props.isActive && "nz-active", this.props.isDisabled && "nz-disabled", this.props.safeAreaInsets &&
-            SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets), this.props.className);
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("li", { "data-item-id": this.props.itemId, "data-item-type": "backstage-item", "data-item-group-priority": this.props.groupPriority, "data-item-priority": this.props.itemPriority, "data-item-provider-id": this.props.providerId, className: className, onClick: this.props.onClick, style: this.props.style, role: "menuitem" },
-            React.createElement("div", { className: "nz-icon" }, this.props.icon),
-            this.props.badge && React.createElement("div", { className: "nz-badge" }, this.props.badge),
-            React.createElement("div", null,
-                React.createElement("span", null, this.props.children),
-                this.props.subtitle && React.createElement("span", null, this.props.subtitle))));
-    }
-}
-//# sourceMappingURL=Item.js.map

package/lib/appui-react/layout/backstage/Item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/backstage/Item.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,aAAa,CAAC;AA6BrB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,mBAAmB,EACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,EAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,cAAc;YACvB,qBAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EACnE,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,4CACgB,IAAI,CAAC,KAAK,CAAC,MAAM,oBAChB,gBAAgB,8BACL,IAAI,CAAC,KAAK,CAAC,aAAa,wBAC9B,IAAI,CAAC,KAAK,CAAC,YAAY,2BACpB,IAAI,CAAC,KAAK,CAAC,UAAU,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU;YAEf,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YAC/C,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,UAAU,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAO;YACvE;gBACE,kCAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ;gBACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,kCAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CACtD,CACH,CACN,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Backstage\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { SafeAreaInsets } from \"../../safearea/SafeAreaInsets.js\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets.js\";\nimport \"./Item.scss\";\n\n/** Properties of [[BackstageItem]] component.\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface BackstageItemProps extends CommonProps {\n  /** Backstage item label. */\n  children?: string;\n  /** Backstage item icon. */\n  icon?: React.ReactNode;\n  /** Describes if the item is active. */\n  isActive?: boolean;\n  /** Describes if the item is disabled. */\n  isDisabled?: boolean;\n  /** Function called when item is clicked. */\n  onClick?: () => void;\n  /** Describes respected safe area insets. */\n  safeAreaInsets?: SafeAreaInsets;\n  /** Backstage item subtitle. */\n  subtitle?: string;\n  /** A badge to draw. */\n  badge?: React.ReactNode;\n\n  providerId?: string;\n  itemPriority?: number;\n  groupPriority?: number;\n}\n\n/** Item in the [[Backstage]].\n * @internal\n */\nexport class BackstageItem extends React.PureComponent<BackstageItemProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-backstage-item\",\n      this.props.isActive && \"nz-active\",\n      this.props.isDisabled && \"nz-disabled\",\n      this.props.safeAreaInsets &&\n        SafeAreaInsetsHelpers.getCssClassNames(this.props.safeAreaInsets),\n      this.props.className\n    );\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <li\n        data-item-id={this.props.itemId}\n        data-item-type=\"backstage-item\"\n        data-item-group-priority={this.props.groupPriority}\n        data-item-priority={this.props.itemPriority}\n        data-item-provider-id={this.props.providerId}\n        className={className}\n        onClick={this.props.onClick}\n        style={this.props.style}\n        role=\"menuitem\"\n      >\n        <div className=\"nz-icon\">{this.props.icon}</div>\n        {this.props.badge && <div className=\"nz-badge\">{this.props.badge}</div>}\n        <div>\n          <span>{this.props.children}</span>\n          {this.props.subtitle && <span>{this.props.subtitle}</span>}\n        </div>\n      </li>\n    );\n  }\n}\n"]}