@itwin/appui-react 4.9.0-dev.1 → 4.9.0

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

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+import "./Backstage.scss";
+/** Backstage component of 9-Zone UI app.
+ * @internal
+ */
+class Backstage extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onClose = () => {
+            this.props.onClose && this.props.onClose();
+        };
+        this._onEsc = (event) => {
+            if (this.props.isOpen && event.key === Key.Escape) {
+                this._onClose();
+            }
+        };
+    }
+    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)))));
+    }
+}
+Backstage.defaultProps = {
+    showOverlay: true,
+};
+export { Backstage };
+//# sourceMappingURL=Backstage.js.map

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

@@ -0,0 +1 @@
+{"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,wBAAwB,CAAC;AAC/D,OAAO,kBAAkB,CAAC;AA2B1B;;GAEG;AACH,MAAa,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAAlE;;QA8CU,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC7C,CAAC,CAAC;QAEM,WAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC9C,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,EAAE;gBACjD,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;QACH,CAAC,CAAC;IACJ,CAAC;IAlDiB,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;;AA3CsB,sBAAY,GAA0B;IAC3D,WAAW,EAAE,IAAI;CAClB,AAFkC,CAEjC;SAHS,SAAS","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\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets\";\nimport \"./Backstage.scss\";\n\n/** Properties of [[Backstage]] component.\n * @internal\n */\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) {\n      this._onClose();\n    }\n  };\n}\n"]}

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

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@import "../prefix";
+@import "../safearea";
+@import "../scrollbar";
+@import "variables";
+
+.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/esm/appui-react/layout/backstage/Item.d.ts

@@ -0,0 +1,38 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+import type { CommonProps } from "@itwin/core-react";
+import * as React from "react";
+import type { SafeAreaInsets } from "../../safearea/SafeAreaInsets";
+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/esm/appui-react/layout/backstage/Item.d.ts.map

@@ -0,0 +1 @@
+{"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,+BAA+B,CAAC;AAEpE,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,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/esm/appui-react/layout/backstage/Item.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+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/esm/appui-react/layout/backstage/Item.js.map

@@ -0,0 +1 @@
+{"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,wBAAwB,CAAC;AAC/D,OAAO,aAAa,CAAC;AA4BrB;;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\";\nimport { SafeAreaInsetsHelpers } from \"../base/SafeAreaInsets\";\nimport \"./Item.scss\";\n\n/** Properties of [[BackstageItem]] component.\n * @internal\n */\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"]}

package/lib/esm/appui-react/layout/backstage/Item.scss

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/breakpoints";
+@import "../prefix";
+@import "../safearea";
+@import "variables";
+
+.nz-backstage-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-bottom: $nz-backstage-item-spacing;
+  padding-top: $nz-backstage-item-spacing;
+  cursor: pointer;
+
+  @include nz-transition(0.2s ease);
+
+  @include for-tablet-landscape-down {
+    padding-bottom: $nz-backstage-item-spacing-medium;
+    padding-top: $nz-backstage-item-spacing-medium;
+  }
+
+  @include for-phone-only {
+    padding-bottom: $nz-backstage-item-spacing-small;
+    padding-top: $nz-backstage-item-spacing-small;
+  }
+
+  &:hover {
+    background: var(--iui-color-background-hover);
+    color: var(--iui-color-text-hover);
+  }
+
+  &.nz-active {
+    background: var(--iui-color-background-accent-muted);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      margin-left: $nz-backstage-highlight-bar-spacing-left;
+      width: $nz-backstage-highlight-bar-spacing-left;
+      background: var(--iui-color-border-accent);
+    }
+  }
+
+  &.nz-disabled {
+    color: var(--iui-color-text-disabled);
+    pointer-events: none;
+  }
+
+  div.nz-icon {
+    display: flex;
+    padding-left: $nz-backstage-icon-spacing-left;
+    padding-right: $nz-backstage-icon-spacing-right;
+  }
+
+  > div:last-child {
+    display: flex;
+    flex-direction: column;
+    padding-right: var(--iui-size-s);
+    overflow: hidden;
+
+    > span {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    > span:nth-child(2) {
+      margin-top: var(--iui-size-xs);
+      font-size: $nz-backstage-subtitle-font-size;
+      color: var(--iui-color-text-muted);
+
+      @include for-tablet-landscape-down {
+        font-size: var(--iui-font-size-0);
+      }
+
+      @include for-phone-only {
+        font-size: var(--iui-font-size-0) - 1px;
+      }
+    }
+  }
+
+  div.nz-badge {
+    position: absolute;
+    top: 1px;
+    left: 5px;
+  }
+
+  &.nz-safe-area-left {
+    @include nz-safe-area-left;
+
+    &.nz-active {
+      &:before {
+        @include nz-safe-area-left(left);
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/backstage/Separator.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module Backstage
+ */
+import "./Separator.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Item separator in the [[Backstage]] component.
+ * @internal
+ */
+export declare class BackstageSeparator extends React.PureComponent<CommonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/backstage/Separator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IACtD,MAAM;CAUvB"}

package/lib/esm/appui-react/layout/backstage/Separator.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Separator.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Item separator in the [[Backstage]] component.
+ * @internal
+ */
+export class BackstageSeparator extends React.PureComponent {
+    render() {
+        const className = classnames("nz-backstage-separator", this.props.className);
+        return (React.createElement("li", { className: className, style: this.props.style, role: "separator" }));
+    }
+}
+//# sourceMappingURL=Separator.js.map

package/lib/esm/appui-react/layout/backstage/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/backstage/Separator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,aAA0B;IACtD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,wBAAwB,EACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,WAAW,GAAG,CACvE,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 \"./Separator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Item separator in the [[Backstage]] component.\n * @internal\n */\nexport class BackstageSeparator extends React.PureComponent<CommonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-backstage-separator\",\n      this.props.className\n    );\n\n    return (\n      <li className={className} style={this.props.style} role=\"separator\" />\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/layout/backstage/Separator.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-backstage-separator {
+  height: $nz-backstage-divider-height;
+  background-color: var(--iui-color-border-subtle);
+}

package/lib/esm/appui-react/layout/backstage/_variables.scss

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+// backstage common values
+$nz-backstage-width: 300px;
+$nz-backstage-overlay-background: rgba(0, 0, 0, var(--iui-opacity-4));
+
+$nz-backstage-item-font-size: var(--iui-font-size-2);
+$nz-backstage-subtitle-font-size: var(--iui-font-size-1);
+
+$nz-backstage-item-spacing: 24px;
+$nz-backstage-item-spacing-medium: 20px;
+$nz-backstage-item-spacing-small: 16px;
+
+$nz-backstage-icon-spacing-left: 24px;
+$nz-backstage-icon-spacing-right: 16px;
+
+$nz-backstage-highlight-bar-width: 2px;
+$nz-backstage-highlight-bar-spacing-left: 2px;
+$nz-backstage-divider-height: 1px;
+$nz-backstage-header-divider-width: 2px;
+
+$nz-backstage-background: $buic-background-window;
+$nz-backstage-item-color: var(--iui-color-text);
+$nz-backstage-item-color-disabled: var(--iui-color-text-disabled);
+$nz-backstage-item-active-background: $buic-background-tab-inactive;
+$nz-backstage-item-hover-background: $buic-row-hover;
+$nz-backstage-highlight-bar-background: $buic-foreground-primary;
+$nz-backstage-divider-color: $buic-background-divider;

package/lib/esm/appui-react/layout/base/DragManager.d.ts

@@ -0,0 +1,183 @@
+/** @packageDocumentation
+ * @module Base
+ */
+import * as React from "react";
+import { BeEvent } from "@itwin/core-bentley";
+import type { SizeProps } from "@itwin/core-react";
+import { Point } from "@itwin/core-react";
+import type { PanelSide } from "../widget-panels/PanelTypes";
+import type { FloatingWidgetResizeHandle } from "../widget/FloatingWidget";
+import type { WidgetState } from "../state/WidgetState";
+import type { TabState } from "../state/TabState";
+import type { XAndY } from "../state/internal/NineZoneStateHelpers";
+import type { DropTargetState, TabDragDropTargetState, WidgetDragDropTargetState } from "../state/DropTargetState";
+/** @internal */
+export interface DragStartArgs {
+    initialPointerPosition: Point;
+    pointerPosition: Point;
+}
+/** @internal */
+export interface TabDragStartArgs extends DragStartArgs {
+    widgetSize: SizeProps;
+}
+/** @internal */
+export interface UseDragTabArgs {
+    tabId: TabState["id"];
+    onDrag?: (dragBy: XAndY) => void;
+    onDragEnd?: (target: TabDragDropTargetState) => void;
+}
+/** @internal */
+export declare function useDragTab(args: UseDragTabArgs): ({ initialPointerPosition, pointerPosition, widgetSize, }: TabDragStartArgs) => void;
+type UpdateWidgetDragItemFn = (id: WidgetDragItem["id"]) => void;
+/** @internal */
+export interface UseDragWidgetArgs {
+    widgetId: WidgetState["id"];
+    onDragStart?: (updateWidget: UpdateWidgetDragItemFn, initialPointerPosition: Point, pointerPosition: Point) => void;
+    onDrag?: (dragBy: Point) => void;
+    onDragEnd?: (target: WidgetDragDropTargetState) => void;
+}
+/** @internal */
+export declare function useDragWidget(args: UseDragWidgetArgs): ({ initialPointerPosition, pointerPosition }: DragStartArgs) => void;
+/** @internal */
+export interface UseDragPanelGripArgs {
+    side: PanelSide;
+    onDrag?: (pointerPosition: Point, lastPointerPosition: Point) => void;
+    onDragEnd?: () => void;
+}
+/** @internal */
+export declare function useDragPanelGrip(args: UseDragPanelGripArgs): ({ initialPointerPosition }: DragStartArgs) => void;
+/** @internal */
+export interface UseDragResizeHandleArgs {
+    widgetId: WidgetState["id"];
+    handle: FloatingWidgetResizeHandle;
+    onDrag?: (pointerPosition: Point) => void;
+}
+/** @internal */
+export declare function useDragResizeHandle(args: UseDragResizeHandleArgs): ({ initialPointerPosition }: DragStartArgs) => void;
+/** @internal */
+export interface UseDragToolSettingsArgs {
+    newFloatingWidgetId: WidgetDragItem["id"];
+}
+/** @internal */
+export declare function useDragToolSettings(args: UseDragToolSettingsArgs): ({ initialPointerPosition }: DragStartArgs) => void;
+/** @internal */
+export declare function useTarget<T extends Element>(target: DropTargetState): [
+    React.Ref<T>,
+    boolean
+];
+/** @internal */
+export interface UseTabTargetArgs {
+    widgetId: WidgetState["id"];
+    tabIndex: number;
+}
+/** @internal */
+export declare function useTabTarget<T extends Element>(args: UseTabTargetArgs): [
+    React.Ref<T>,
+    boolean
+];
+/** @internal */
+export interface UsePanelTargetArgs {
+    side: PanelSide;
+    newWidgetId: WidgetState["id"];
+}
+/** @internal */
+export declare function usePanelTarget<T extends Element>(args: UsePanelTargetArgs): [
+    React.Ref<T>,
+    boolean
+];
+/** @internal */
+export interface UseDragItemArgs<T extends DragItem> {
+    item: T;
+    isDragItem?: (item: T | undefined, dragged: DragItem) => boolean;
+    onDragStart?: DragEventHandler;
+    onDrag?: DragEventHandler;
+    onDragEnd?: DragEventHandler;
+}
+/** @internal */
+export declare function useDragItem<T extends DragItem>(args: UseDragItemArgs<T>): (info: DragInfo) => void;
+/** @internal */
+export declare function useDraggedItem(): DragItem | undefined;
+/** @internal */
+export declare function useIsDraggedItem(item: DragItem): boolean;
+/** @internal */
+export declare function useIsDraggedType(type: DragItem["type"]): boolean;
+/** @internal */
+export declare function useDraggedItemId<T extends DragItem>(type: T["type"]): T["id"] | undefined;
+/** @internal */
+export interface DragProviderProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function DragProvider(props: DragProviderProps): React.JSX.Element;
+interface TabDragItem {
+    type: "tab";
+    id: TabState["id"];
+}
+interface WidgetDragItem {
+    type: "widget";
+    id: WidgetState["id"];
+}
+interface PanelGripDragItem {
+    type: "panelGrip";
+    id: PanelSide;
+}
+interface ResizeHandleDragItem {
+    type: "resizeHandle";
+    id: FloatingWidgetResizeHandle;
+    widgetId: WidgetState["id"];
+}
+/** @internal */
+export type DragItem = TabDragItem | WidgetDragItem | PanelGripDragItem | ResizeHandleDragItem;
+interface BaseDragInfo {
+    initialPointerPosition: Point;
+    lastPointerPosition: Point;
+    pointerPosition: Point;
+}
+interface TabDragInfo extends BaseDragInfo {
+    widgetSize: SizeProps;
+}
+type DragInfo = BaseDragInfo | TabDragInfo;
+interface HandleDragStartArgs {
+    item: DragItem;
+    info: DragInfo;
+}
+interface Dragged {
+    item: DragItem;
+    info: DragInfo;
+    target: DropTargetState | undefined;
+}
+type DragEventHandler = (item: DragItem, info: DragInfo, target: DropTargetState | undefined) => void;
+type DropTargetChangedEventHandler = (target: DropTargetState | undefined) => void;
+/** @internal */
+export declare class DragManager {
+    private _dragged;
+    private _onDragStartEmitter;
+    private _onDragUpdateEmitter;
+    private _onDragEmitter;
+    private _onDragEndEmitter;
+    private _onTargetChangedEmitter;
+    get draggedItem(): Dragged | undefined;
+    isTargeted(target: DropTargetState): boolean;
+    get onDragStart(): BeEvent<DragEventHandler>;
+    get onDragUpdate(): BeEvent<DragEventHandler>;
+    get onDrag(): BeEvent<DragEventHandler>;
+    get onDragEnd(): BeEvent<DragEventHandler>;
+    get onTargetChanged(): BeEvent<DropTargetChangedEventHandler>;
+    handleDragStart({ item, info }: HandleDragStartArgs): void;
+    handleDragUpdate(item: DragItem): void;
+    handleDrag(x: number, y: number): void;
+    handleDragEnd(): void;
+    handleTargetChanged(target: DropTargetState | undefined): void;
+}
+/** @internal */
+export declare const DragManagerContext: React.Context<DragManager>;
+/** @internal */
+export declare const DraggedWidgetIdContext: React.Context<string | undefined>;
+/** @internal */
+export declare const DraggedPanelSideContext: React.Context<PanelSide | undefined>;
+/** @internal */
+export declare const DraggedResizeHandleContext: React.Context<FloatingWidgetResizeHandle | undefined>;
+/** @internal */
+export declare function useTargeted(): DropTargetState | undefined;
+export {};
+//# sourceMappingURL=DragManager.d.ts.map

package/lib/esm/appui-react/layout/base/DragManager.d.ts.map

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