@itwin/appui-react 4.0.0-dev.8 → 4.0.0

package/lib/esm/appui-react/frontstage/ModalFrontstage.d.ts

@@ -1,33 +1,35 @@
-/** @packageDocumentation
- * @module Frontstage
- */
-import "./ModalFrontstage.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/**
- * Properties for the [[ModalFrontstage]] React component
- * @public
- */
-export interface ModalFrontstageProps extends CommonProps {
-    /** Title displayed at the top of the modal Frontstage */
-    title: string;
-    /** Indicates whether the modal Frontstage is open */
-    isOpen?: boolean;
-    /** Callback for navigating back from the modal Frontstage. This is normally connected to Redux. */
-    navigateBack?: () => any;
-    /** Callback for closing the modal Frontstage. This is normally connected to Redux. */
-    closeModal: () => any;
-    /** An optional React node displayed in the upper right of the modal Frontstage. */
-    appBarRight?: React.ReactNode;
-}
-/**
- * ModalFrontstage React component
- * @public
- */
-export declare class ModalFrontstage extends React.Component<ModalFrontstageProps> {
-    private _backButtonTitle;
-    constructor(props: ModalFrontstageProps);
-    private _onGoBack;
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./ModalFrontstage.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/**
+ * Properties for the [[ModalFrontstage]] React component
+ * @public
+ */
+export interface ModalFrontstageProps extends CommonProps {
+    /** Title displayed at the top of the modal Frontstage */
+    title: string;
+    /** Indicates whether the modal Frontstage is open */
+    isOpen?: boolean;
+    /** Callback for navigating back from the modal Frontstage. This is normally connected to Redux. */
+    navigateBack?: () => any;
+    /** Callback for closing the modal Frontstage. This is normally connected to Redux. */
+    closeModal: () => any;
+    /** An optional React node displayed in the upper right of the modal Frontstage. */
+    appBarRight?: React.ReactNode;
+    /** Content */
+    children?: React.ReactNode;
+}
+/**
+ * ModalFrontstage React component
+ * @public
+ */
+export declare class ModalFrontstage extends React.Component<ModalFrontstageProps> {
+    private _backButtonTitle;
+    constructor(props: ModalFrontstageProps);
+    private _onGoBack;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=ModalFrontstage.d.ts.map

package/lib/esm/appui-react/frontstage/ModalFrontstage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFrontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mGAAmG;IACnG,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;IACzB,sFAAsF;IACtF,UAAU,EAAE,MAAM,GAAG,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAO,CAAC,gBAAgB,CAA4D;gBAExE,KAAK,EAAE,oBAAoB;IAIvC,OAAO,CAAC,SAAS,CAIf;IAEc,MAAM;CA+BvB"}
+{"version":3,"file":"ModalFrontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAMtD;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mGAAmG;IACnG,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;IACzB,sFAAsF;IACtF,UAAU,EAAE,MAAM,GAAG,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAO,CAAC,gBAAgB,CAA4D;gBAExE,KAAK,EAAE,oBAAoB;IAIvC,OAAO,CAAC,SAAS,CAIf;IAEc,MAAM;CA+BvB"}

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

@@ -1,40 +1,43 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Frontstage
- */
-import "./ModalFrontstage.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { BackButton } from "@itwin/appui-layout-react";
-import { UiFramework } from "../UiFramework";
-/**
- * ModalFrontstage React component
- * @public
- */
-export class ModalFrontstage extends React.Component {
-    constructor(props) {
-        super(props);
-        this._backButtonTitle = UiFramework.translate("modalFrontstage.backButtonTitle");
-        this._onGoBack = () => {
-            if (this.props.navigateBack)
-                this.props.navigateBack();
-            this.props.closeModal();
-        };
-    }
-    render() {
-        const classNames = classnames("uifw-modal-frontstage", this.props.isOpen && "uifw-modal-open", this.props.className);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classNames, style: this.props.style },
-                React.createElement("div", { className: "uifw-modal-app-bar" },
-                    React.createElement(BackButton, { className: "nz-toolbar-button-app", onClick: this._onGoBack, icon: React.createElement("i", { className: "icon icon-progress-backward" }), title: this._backButtonTitle }),
-                    React.createElement("span", { className: "uicore-text-headline" }, this.props.title),
-                    this.props.appBarRight &&
-                        React.createElement("span", { className: "uifw-modal-app-bar-right" }, this.props.appBarRight)),
-                React.createElement("div", { className: "uifw-modal-stage-content" }, this.props.children)),
-            React.createElement("div", { className: "uifw-modal-frontstage-overlay" })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./ModalFrontstage.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+import { BackButton } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+import { Text } from "@itwin/itwinui-react";
+import { SvgProgressBackwardCircular } from "@itwin/itwinui-icons-react";
+/**
+ * ModalFrontstage React component
+ * @public
+ */
+export class ModalFrontstage extends React.Component {
+    constructor(props) {
+        super(props);
+        this._backButtonTitle = UiFramework.translate("modalFrontstage.backButtonTitle");
+        this._onGoBack = () => {
+            if (this.props.navigateBack)
+                this.props.navigateBack();
+            this.props.closeModal();
+        };
+    }
+    render() {
+        const classNames = classnames("uifw-modal-frontstage", this.props.isOpen && "uifw-modal-open", this.props.className);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: classNames, style: this.props.style },
+                React.createElement("div", { className: "uifw-modal-app-bar" },
+                    React.createElement(BackButton, { className: "nz-toolbar-button-app", onClick: this._onGoBack, icon: React.createElement(Icon, { iconSpec: React.createElement(SvgProgressBackwardCircular, null) }), title: this._backButtonTitle }),
+                    React.createElement(Text, { variant: "headline" }, this.props.title),
+                    this.props.appBarRight &&
+                        React.createElement("span", { className: "uifw-modal-app-bar-right" }, this.props.appBarRight)),
+                React.createElement("div", { className: "uifw-modal-stage-content" }, this.props.children)),
+            React.createElement("div", { className: "uifw-modal-frontstage-overlay" })));
+    }
+}
 //# sourceMappingURL=ModalFrontstage.js.map

package/lib/esm/appui-react/frontstage/ModalFrontstage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFrontstage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmB7C;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IAGxE,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,qBAAgB,GAAG,WAAW,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;QAM5E,cAAS,GAAG,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;gBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC,CAAC;IANF,CAAC;IAQe,MAAM;QACpB,MAAM,UAAU,GAAG,UAAU,CAC3B,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACjD,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAC3C,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EACF,2BAAG,SAAS,EAAC,6BAA6B,GAAG,EAE/C,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAC5B;oBACF,8BAAM,SAAS,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;oBAC/D,IAAI,CAAC,KAAK,CAAC,WAAW;wBACrB,8BAAM,SAAS,EAAC,0BAA0B,IAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAQ,CAExE;gBACN,6BAAK,SAAS,EAAC,0BAA0B,IACtC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF;YACN,6BAAK,SAAS,EAAC,+BAA+B,GAAG,CAChD,CACJ,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 Frontstage\r\n */\r\n\r\nimport \"./ModalFrontstage.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { BackButton } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/**\r\n * Properties for the [[ModalFrontstage]] React component\r\n * @public\r\n */\r\nexport interface ModalFrontstageProps extends CommonProps {\r\n  /** Title displayed at the top of the modal Frontstage */\r\n  title: string;\r\n  /** Indicates whether the modal Frontstage is open */\r\n  isOpen?: boolean;\r\n  /** Callback for navigating back from the modal Frontstage. This is normally connected to Redux. */\r\n  navigateBack?: () => any;\r\n  /** Callback for closing the modal Frontstage. This is normally connected to Redux. */\r\n  closeModal: () => any;\r\n  /** An optional React node displayed in the upper right of the modal Frontstage. */\r\n  appBarRight?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * ModalFrontstage React component\r\n * @public\r\n */\r\nexport class ModalFrontstage extends React.Component<ModalFrontstageProps> {\r\n  private _backButtonTitle = UiFramework.translate(\"modalFrontstage.backButtonTitle\");\r\n\r\n  constructor(props: ModalFrontstageProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _onGoBack = () => {\r\n    if (this.props.navigateBack)\r\n      this.props.navigateBack();\r\n    this.props.closeModal();\r\n  };\r\n\r\n  public override render() {\r\n    const classNames = classnames(\r\n      \"uifw-modal-frontstage\",\r\n      this.props.isOpen && \"uifw-modal-open\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <div className={classNames} style={this.props.style}>\r\n          <div className=\"uifw-modal-app-bar\">\r\n            <BackButton className=\"nz-toolbar-button-app\"\r\n              onClick={this._onGoBack}\r\n              icon={\r\n                <i className=\"icon icon-progress-backward\" />\r\n              }\r\n              title={this._backButtonTitle}\r\n            />\r\n            <span className=\"uicore-text-headline\">{this.props.title}</span>\r\n            {this.props.appBarRight &&\r\n              <span className=\"uifw-modal-app-bar-right\">{this.props.appBarRight}</span>\r\n            }\r\n          </div>\r\n          <div className=\"uifw-modal-stage-content\">\r\n            {this.props.children}\r\n          </div>\r\n        </div>\r\n        <div className=\"uifw-modal-frontstage-overlay\" />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ModalFrontstage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalFrontstage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAqBzE;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IAGxE,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,qBAAgB,GAAG,WAAW,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;QAM5E,cAAS,GAAG,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;gBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC,CAAC;IANF,CAAC;IAQe,MAAM;QACpB,MAAM,UAAU,GAAG,UAAU,CAC3B,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;gBACjD,6BAAK,SAAS,EAAC,oBAAoB;oBACjC,oBAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAC3C,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EACF,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,2BAA2B,OAAG,GAAI,EAErD,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAC5B;oBACF,oBAAC,IAAI,IAAC,OAAO,EAAC,UAAU,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;oBACjD,IAAI,CAAC,KAAK,CAAC,WAAW;wBACrB,8BAAM,SAAS,EAAC,0BAA0B,IAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAQ,CAExE;gBACN,6BAAK,SAAS,EAAC,0BAA0B,IACtC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF;YACN,6BAAK,SAAS,EAAC,+BAA+B,GAAG,CAChD,CACJ,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 Frontstage\r\n */\r\n\r\nimport \"./ModalFrontstage.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { BackButton } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { Text } from \"@itwin/itwinui-react\";\r\nimport { SvgProgressBackwardCircular } from \"@itwin/itwinui-icons-react\";\r\n\r\n/**\r\n * Properties for the [[ModalFrontstage]] React component\r\n * @public\r\n */\r\nexport interface ModalFrontstageProps extends CommonProps {\r\n  /** Title displayed at the top of the modal Frontstage */\r\n  title: string;\r\n  /** Indicates whether the modal Frontstage is open */\r\n  isOpen?: boolean;\r\n  /** Callback for navigating back from the modal Frontstage. This is normally connected to Redux. */\r\n  navigateBack?: () => any;\r\n  /** Callback for closing the modal Frontstage. This is normally connected to Redux. */\r\n  closeModal: () => any;\r\n  /** An optional React node displayed in the upper right of the modal Frontstage. */\r\n  appBarRight?: React.ReactNode;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * ModalFrontstage React component\r\n * @public\r\n */\r\nexport class ModalFrontstage extends React.Component<ModalFrontstageProps> {\r\n  private _backButtonTitle = UiFramework.translate(\"modalFrontstage.backButtonTitle\");\r\n\r\n  constructor(props: ModalFrontstageProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _onGoBack = () => {\r\n    if (this.props.navigateBack)\r\n      this.props.navigateBack();\r\n    this.props.closeModal();\r\n  };\r\n\r\n  public override render() {\r\n    const classNames = classnames(\r\n      \"uifw-modal-frontstage\",\r\n      this.props.isOpen && \"uifw-modal-open\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <div className={classNames} style={this.props.style}>\r\n          <div className=\"uifw-modal-app-bar\">\r\n            <BackButton className=\"nz-toolbar-button-app\"\r\n              onClick={this._onGoBack}\r\n              icon={\r\n                <Icon iconSpec={<SvgProgressBackwardCircular />} />\r\n              }\r\n              title={this._backButtonTitle}\r\n            />\r\n            <Text variant=\"headline\">{this.props.title}</Text>\r\n            {this.props.appBarRight &&\r\n              <span className=\"uifw-modal-app-bar-right\">{this.props.appBarRight}</span>\r\n            }\r\n          </div>\r\n          <div className=\"uifw-modal-stage-content\">\r\n            {this.props.children}\r\n          </div>\r\n        </div>\r\n        <div className=\"uifw-modal-frontstage-overlay\" />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -3,19 +3,18 @@
 * 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/themecolors";
 
 .uifw-modal-frontstage {
   height: 100%;
   width: 100%;
   position: absolute;
   box-sizing: border-box;
-  transition: all .5s ease;
+  transition: all 0.5s ease;
   pointer-events: none;
   visibility: hidden;
   overflow: hidden;
   background: transparent;
-  transition: background .25s ease, visibility 0s ease 0.275s;
+  transition: background 0.25s ease, visibility 0s ease 0.275s;
 
   display: flex;
   flex-direction: column;
@@ -24,25 +23,22 @@
   @include uicore-z-index(modal-frontstage);
 
   .uifw-modal-app-bar {
-    transition: transform .125s;
+    transition: transform 0.125s;
     padding: 10px;
-    background: $buic-background-titlebar;
+    background: var(--iui-color-background-backdrop);
     height: 60px;
     transform: translateY(-100%);
+    box-sizing: initial;
 
-
-    .uicore-text-headline {
+    .iui-text-headline {
       display: inline-block;
-      color: $buic-foreground-body;
       line-height: 60px;
       vertical-align: top;
       padding: 0 15px;
-      margin: 0;
-      font-size: 28px;
     }
 
     .uifw-modal-app-bar-right {
-      color: $buic-foreground-body;
+      color: var(--iui-color-text);
       line-height: 60px;
       vertical-align: center;
       float: right;
@@ -53,7 +49,6 @@
       display: inline-block;
       border-radius: 0; // Turn off circular border from Back.scss in ui-ninezone
     }
-
   }
 
   .uifw-modal-stage-content {
@@ -64,14 +59,13 @@
   &.uifw-modal-open {
     visibility: visible;
     pointer-events: unset;
-    transition: background .25s ease;
+    transition: background 0.25s ease;
 
     .uifw-modal-app-bar {
       transform: translateY(0%);
-      transition: transform .125s ease;
+      transition: transform 0.125s ease;
     }
   }
-
 }
 
 .uifw-modal-frontstage-overlay {
@@ -81,7 +75,7 @@
   top: 0px;
   height: 100%;
   opacity: 0.95;
-  background: $buic-background-4;
+  background: var(--iui-color-background-backdrop);
 
   @include uicore-z-index(modal-frontstage-overlay);
 }

package/lib/esm/appui-react/frontstage/ModalSettingsStage.d.ts

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Frontstage
- */
-import "./ModalSettingsStage.scss";
-import * as React from "react";
-import { ModalFrontstageInfo } from "./FrontstageManager";
-/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)
- * and [SettingsContainer]($core-react).
- * @beta
- */
-export declare class SettingsModalFrontstage implements ModalFrontstageInfo {
-    initialSettingsTabId?: string | undefined;
-    static id: string;
-    title: string;
-    constructor(initialSettingsTabId?: string | undefined);
-    notifyCloseRequest: boolean;
-    get content(): React.ReactNode;
-    private static noSettingsAvailable;
-    static getBackstageActionItem(groupPriority: number, itemPriority: number): import("@itwin/appui-abstract").BackstageActionItem;
-    static showSettingsStage(initialSettingsTab?: string): void;
-}
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./ModalSettingsStage.scss";
+import * as React from "react";
+import { ModalFrontstageInfo } from "../framework/FrameworkFrontstages";
+/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)
+ * and [SettingsContainer]($core-react).
+ * @beta
+ */
+export declare class SettingsModalFrontstage implements ModalFrontstageInfo {
+    initialSettingsTabId?: string | undefined;
+    static id: string;
+    title: string;
+    constructor(initialSettingsTabId?: string | undefined);
+    notifyCloseRequest: boolean;
+    get content(): React.ReactNode;
+    private static noSettingsAvailable;
+    static getBackstageActionItem(groupPriority: number, itemPriority: number): import("../backstage/BackstageItem").BackstageActionItem;
+    static showSettingsStage(initialSettingsTab?: string): void;
+}
 //# sourceMappingURL=ModalSettingsStage.d.ts.map

package/lib/esm/appui-react/frontstage/ModalSettingsStage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalSettingsStage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalSettingsStage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAqB,mBAAmB,EAA0C,MAAM,qBAAqB,CAAC;AAuCrH;;;GAGG;AACH,qBAAa,uBAAwB,YAAW,mBAAmB;IAG9C,oBAAoB,CAAC;IAFxC,OAAc,EAAE,SAAoC;IAC7C,KAAK,EAAE,MAAM,CAAwD;gBACzD,oBAAoB,CAAC,oBAAQ;IACzC,kBAAkB,UAAQ;IACjC,IAAW,OAAO,IAAI,KAAK,CAAC,SAAS,CAEpC;IACD,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAyI;WAE7J,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;WAMlE,iBAAiB,CAAC,kBAAkB,CAAC,EAAE,MAAM;CAmB5D"}
+{"version":3,"file":"ModalSettingsStage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalSettingsStage.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,mBAAmB,EAA0C,MAAM,mCAAmC,CAAC;AAwChH;;;GAGG;AACH,qBAAa,uBAAwB,YAAW,mBAAmB;IAG9C,oBAAoB,CAAC;IAFxC,OAAc,EAAE,SAAoC;IAC7C,KAAK,EAAE,MAAM,CAAwD;gBACzD,oBAAoB,CAAC,oBAAQ;IACzC,kBAAkB,UAAQ;IACjC,IAAW,OAAO,IAAI,KAAK,CAAC,SAAS,CAEpC;IACD,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAyI;WAE7J,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;WAMlE,iBAAiB,CAAC,kBAAkB,CAAC,EAAE,MAAM;CAmB5D"}

package/lib/esm/appui-react/frontstage/ModalSettingsStage.js

@@ -1,85 +1,85 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Frontstage
- */
-import "./ModalSettingsStage.scss";
-import * as React from "react";
-import { BackstageItemUtilities, ConditionalBooleanValue, IconSpecUtilities } from "@itwin/appui-abstract";
-import settingsIconSvg from "@bentley/icons-generic/icons/settings.svg";
-import { IModelApp, NotifyMessageDetails, OutputMessagePriority, OutputMessageType } from "@itwin/core-frontend";
-import { Logger } from "@itwin/core-bentley";
-import { Centered, SettingsContainer } from "@itwin/core-react";
-import { FrontstageManager } from "./FrontstageManager";
-import { UiFramework } from "../UiFramework";
-import { SyncUiEventId } from "../syncui/SyncUiEventDispatcher";
-import { StageUsage } from "./StageUsage";
-function ModalSettingsStage({ initialSettingsTabId }) {
-    var _a, _b, _c, _d;
-    const id = (_b = (_a = FrontstageManager.activeFrontstageDef) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "none";
-    const stageUsage = (_d = (_c = FrontstageManager.activeFrontstageDef) === null || _c === void 0 ? void 0 : _c.usage) !== null && _d !== void 0 ? _d : StageUsage.General;
-    const tabEntries = UiFramework.settingsManager.getSettingEntries(id, stageUsage);
-    const noSettingsAvailableLabel = React.useRef(UiFramework.translate("settings.noSettingsAvailable"));
-    const currentSettingsTab = React.useCallback(() => {
-        const categoryToFind = initialSettingsTabId ? initialSettingsTabId.toLowerCase() : tabEntries[0].tabId.toLowerCase();
-        let foundTab = tabEntries.find((entry) => entry.tabId.toLowerCase() === categoryToFind);
-        if (!foundTab)
-            foundTab = tabEntries.find((entry) => entry.label.toLowerCase() === categoryToFind);
-        return foundTab;
-    }, [initialSettingsTabId, tabEntries]);
-    React.useEffect(() => {
-        const handleFrontstageCloseRequested = ({ modalFrontstage, stageCloseFunc }) => {
-            // istanbul ignore else
-            if (modalFrontstage instanceof SettingsModalFrontstage && stageCloseFunc) {
-                UiFramework.settingsManager.closeSettingsContainer(stageCloseFunc);
-            }
-        };
-        return FrontstageManager.onCloseModalFrontstageRequestedEvent.addListener(handleFrontstageCloseRequested);
-    }, [tabEntries]);
-    return (React.createElement("div", { className: "uifw-settings-container" }, tabEntries.length ?
-        React.createElement(SettingsContainer, { tabs: tabEntries, currentSettingsTab: currentSettingsTab(), settingsManager: UiFramework.settingsManager }) :
-        React.createElement(Centered, null, noSettingsAvailableLabel.current)));
-}
-/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)
- * and [SettingsContainer]($core-react).
- * @beta
- */
-export class SettingsModalFrontstage {
-    constructor(initialSettingsTabId) {
-        this.initialSettingsTabId = initialSettingsTabId;
-        this.title = UiFramework.translate("settings.settingsStageLabel");
-        this.notifyCloseRequest = true;
-    }
-    get content() {
-        return (React.createElement(ModalSettingsStage, { initialSettingsTabId: this.initialSettingsTabId }));
-    }
-    static getBackstageActionItem(groupPriority, itemPriority) {
-        return BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => FrontstageManager.openModalFrontstage(new SettingsModalFrontstage()), // eslint-disable-line deprecation/deprecation
-        UiFramework.translate("settings.settingsStageLabel"), undefined, IconSpecUtilities.createWebComponentIconSpec(settingsIconSvg), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });
-    }
-    static showSettingsStage(initialSettingsTab) {
-        if (UiFramework.settingsManager.providers.length) {
-            // Check to see if it is already open
-            // istanbul ignore else
-            if (FrontstageManager.activeModalFrontstage && FrontstageManager.activeModalFrontstage instanceof SettingsModalFrontstage) {
-                if (initialSettingsTab) {
-                    UiFramework.settingsManager.activateSettingsTab(initialSettingsTab);
-                    return;
-                }
-            }
-            FrontstageManager.openModalFrontstage(new SettingsModalFrontstage(initialSettingsTab));
-        }
-        else {
-            const briefMessage = UiFramework.translate("settings.noSettingsAvailable");
-            const detailedMessage = UiFramework.translate("settings.noSettingsProvidersRegistered");
-            const info = new NotifyMessageDetails(OutputMessagePriority.Info, briefMessage, detailedMessage, OutputMessageType.Toast);
-            IModelApp.notifications.outputMessage(info);
-            Logger.logInfo(UiFramework.loggerCategory(this), detailedMessage);
-        }
-    }
-}
-SettingsModalFrontstage.id = "appui-react.modalSettingsStage";
-SettingsModalFrontstage.noSettingsAvailable = () => new ConditionalBooleanValue(() => 0 === UiFramework.settingsManager.providers.length, [SyncUiEventId.SettingsProvidersChanged]);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./ModalSettingsStage.scss";
+import * as React from "react";
+import { ConditionalBooleanValue, IconSpecUtilities } from "@itwin/appui-abstract";
+import settingsIconSvg from "@bentley/icons-generic/icons/settings.svg";
+import { IModelApp, NotifyMessageDetails, OutputMessagePriority, OutputMessageType } from "@itwin/core-frontend";
+import { Logger } from "@itwin/core-bentley";
+import { Centered, SettingsContainer } from "@itwin/core-react";
+import { UiFramework } from "../UiFramework";
+import { SyncUiEventId } from "../syncui/SyncUiEventDispatcher";
+import { StageUsage } from "./StageUsage";
+import { BackstageItemUtilities } from "../backstage/BackstageItemUtilities";
+function ModalSettingsStage({ initialSettingsTabId }) {
+    var _a, _b, _c, _d;
+    const id = (_b = (_a = UiFramework.frontstages.activeFrontstageDef) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "none";
+    const stageUsage = (_d = (_c = UiFramework.frontstages.activeFrontstageDef) === null || _c === void 0 ? void 0 : _c.usage) !== null && _d !== void 0 ? _d : StageUsage.General;
+    const tabEntries = UiFramework.settingsManager.getSettingEntries(id, stageUsage);
+    const noSettingsAvailableLabel = React.useRef(UiFramework.translate("settings.noSettingsAvailable"));
+    const currentSettingsTab = React.useCallback(() => {
+        const categoryToFind = initialSettingsTabId ? initialSettingsTabId.toLowerCase() : tabEntries[0].tabId.toLowerCase();
+        let foundTab = tabEntries.find((entry) => entry.tabId.toLowerCase() === categoryToFind);
+        if (!foundTab)
+            foundTab = tabEntries.find((entry) => entry.label.toLowerCase() === categoryToFind);
+        return foundTab;
+    }, [initialSettingsTabId, tabEntries]);
+    React.useEffect(() => {
+        const handleFrontstageCloseRequested = ({ modalFrontstage, stageCloseFunc }) => {
+            // istanbul ignore else
+            if (modalFrontstage instanceof SettingsModalFrontstage && stageCloseFunc) {
+                UiFramework.settingsManager.closeSettingsContainer(stageCloseFunc);
+            }
+        };
+        return UiFramework.frontstages.onCloseModalFrontstageRequestedEvent.addListener(handleFrontstageCloseRequested);
+    }, [tabEntries]);
+    return (React.createElement("div", { className: "uifw-settings-container" }, tabEntries.length ?
+        React.createElement(SettingsContainer, { tabs: tabEntries, currentSettingsTab: currentSettingsTab(), settingsManager: UiFramework.settingsManager }) :
+        React.createElement(Centered, null, noSettingsAvailableLabel.current)));
+}
+/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)
+ * and [SettingsContainer]($core-react).
+ * @beta
+ */
+class SettingsModalFrontstage {
+    constructor(initialSettingsTabId) {
+        this.initialSettingsTabId = initialSettingsTabId;
+        this.title = UiFramework.translate("settings.settingsStageLabel");
+        this.notifyCloseRequest = true;
+    }
+    get content() {
+        return (React.createElement(ModalSettingsStage, { initialSettingsTabId: this.initialSettingsTabId }));
+    }
+    static getBackstageActionItem(groupPriority, itemPriority) {
+        return BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage()), UiFramework.translate("settings.settingsStageLabel"), undefined, IconSpecUtilities.createWebComponentIconSpec(settingsIconSvg), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });
+    }
+    static showSettingsStage(initialSettingsTab) {
+        if (UiFramework.settingsManager.providers.length) {
+            // Check to see if it is already open
+            // istanbul ignore else
+            if (UiFramework.frontstages.activeModalFrontstage && UiFramework.frontstages.activeModalFrontstage instanceof SettingsModalFrontstage) {
+                if (initialSettingsTab) {
+                    UiFramework.settingsManager.activateSettingsTab(initialSettingsTab);
+                    return;
+                }
+            }
+            UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage(initialSettingsTab));
+        }
+        else {
+            const briefMessage = UiFramework.translate("settings.noSettingsAvailable");
+            const detailedMessage = UiFramework.translate("settings.noSettingsProvidersRegistered");
+            const info = new NotifyMessageDetails(OutputMessagePriority.Info, briefMessage, detailedMessage, OutputMessageType.Toast);
+            IModelApp.notifications.outputMessage(info);
+            Logger.logInfo(UiFramework.loggerCategory(this), detailedMessage);
+        }
+    }
+}
+SettingsModalFrontstage.id = "appui-react.modalSettingsStage";
+SettingsModalFrontstage.noSettingsAvailable = () => new ConditionalBooleanValue(() => 0 === UiFramework.settingsManager.providers.length, [SyncUiEventId.SettingsProvidersChanged]);
+export { SettingsModalFrontstage };
 //# sourceMappingURL=ModalSettingsStage.js.map

package/lib/esm/appui-react/frontstage/ModalSettingsStage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalSettingsStage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalSettingsStage.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 Frontstage\r\n */\r\n\r\nimport \"./ModalSettingsStage.scss\";\r\nimport * as React from \"react\";\r\nimport { BackstageItemUtilities, ConditionalBooleanValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport settingsIconSvg from \"@bentley/icons-generic/icons/settings.svg\";\r\nimport { IModelApp, NotifyMessageDetails, OutputMessagePriority, OutputMessageType } from \"@itwin/core-frontend\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { Centered, SettingsContainer } from \"@itwin/core-react\";\r\nimport { FrontstageManager, ModalFrontstageInfo, ModalFrontstageRequestedCloseEventArgs } from \"./FrontstageManager\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { SyncUiEventId } from \"../syncui/SyncUiEventDispatcher\";\r\nimport { StageUsage } from \"./StageUsage\";\r\n\r\nfunction ModalSettingsStage({ initialSettingsTabId }: { initialSettingsTabId?: string }) {\r\n  const id = FrontstageManager.activeFrontstageDef?.id ?? \"none\";\r\n  const stageUsage = FrontstageManager.activeFrontstageDef?.usage ?? StageUsage.General;\r\n  const tabEntries = UiFramework.settingsManager.getSettingEntries(id, stageUsage);\r\n  const noSettingsAvailableLabel = React.useRef(UiFramework.translate(\"settings.noSettingsAvailable\"));\r\n\r\n  const currentSettingsTab = React.useCallback(() => {\r\n    const categoryToFind = initialSettingsTabId ? initialSettingsTabId.toLowerCase() : tabEntries[0].tabId.toLowerCase();\r\n    let foundTab = tabEntries.find((entry) => entry.tabId.toLowerCase() === categoryToFind);\r\n    if (!foundTab)\r\n      foundTab = tabEntries.find((entry) => entry.label.toLowerCase() === categoryToFind);\r\n    return foundTab;\r\n  }, [initialSettingsTabId, tabEntries]);\r\n\r\n  React.useEffect(() => {\r\n    const handleFrontstageCloseRequested = ({ modalFrontstage, stageCloseFunc }: ModalFrontstageRequestedCloseEventArgs) => {\r\n      // istanbul ignore else\r\n      if (modalFrontstage instanceof SettingsModalFrontstage && stageCloseFunc) {\r\n        UiFramework.settingsManager.closeSettingsContainer(stageCloseFunc);\r\n      }\r\n    };\r\n    return FrontstageManager.onCloseModalFrontstageRequestedEvent.addListener(handleFrontstageCloseRequested);\r\n  }, [tabEntries]);\r\n\r\n  return (\r\n    <div className=\"uifw-settings-container\">\r\n      {tabEntries.length ?\r\n        <SettingsContainer tabs={tabEntries} currentSettingsTab={currentSettingsTab()} settingsManager={UiFramework.settingsManager} /> :\r\n        <Centered>{noSettingsAvailableLabel.current}</Centered>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)\r\n * and [SettingsContainer]($core-react).\r\n * @beta\r\n */\r\nexport class SettingsModalFrontstage implements ModalFrontstageInfo {\r\n  public static id = \"appui-react.modalSettingsStage\";\r\n  public title: string = UiFramework.translate(\"settings.settingsStageLabel\");\r\n  constructor(public initialSettingsTabId?: string) { }\r\n  public notifyCloseRequest = true;\r\n  public get content(): React.ReactNode {\r\n    return (<ModalSettingsStage initialSettingsTabId={this.initialSettingsTabId} />);\r\n  }\r\n  private static noSettingsAvailable = () => new ConditionalBooleanValue(() => 0 === UiFramework.settingsManager.providers.length, [SyncUiEventId.SettingsProvidersChanged]);\r\n\r\n  public static getBackstageActionItem(groupPriority: number, itemPriority: number) {\r\n    return BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => FrontstageManager.openModalFrontstage(new SettingsModalFrontstage()), // eslint-disable-line deprecation/deprecation\r\n      UiFramework.translate(\"settings.settingsStageLabel\"),\r\n      undefined, IconSpecUtilities.createWebComponentIconSpec(settingsIconSvg), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });\r\n  }\r\n\r\n  public static showSettingsStage(initialSettingsTab?: string) {\r\n    if (UiFramework.settingsManager.providers.length) {\r\n      // Check to see if it is already open\r\n      // istanbul ignore else\r\n      if (FrontstageManager.activeModalFrontstage && FrontstageManager.activeModalFrontstage instanceof SettingsModalFrontstage) {\r\n        if (initialSettingsTab) {\r\n          UiFramework.settingsManager.activateSettingsTab(initialSettingsTab);\r\n          return;\r\n        }\r\n      }\r\n      FrontstageManager.openModalFrontstage(new SettingsModalFrontstage(initialSettingsTab));\r\n    } else {\r\n      const briefMessage = UiFramework.translate(\"settings.noSettingsAvailable\");\r\n      const detailedMessage = UiFramework.translate(\"settings.noSettingsProvidersRegistered\");\r\n      const info = new NotifyMessageDetails(OutputMessagePriority.Info, briefMessage, detailedMessage, OutputMessageType.Toast);\r\n      IModelApp.notifications.outputMessage(info);\r\n      Logger.logInfo(UiFramework.loggerCategory(this), detailedMessage);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ModalSettingsStage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalSettingsStage.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 Frontstage\r\n */\r\n\r\nimport \"./ModalSettingsStage.scss\";\r\nimport * as React from \"react\";\r\nimport { ConditionalBooleanValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport settingsIconSvg from \"@bentley/icons-generic/icons/settings.svg\";\r\nimport { IModelApp, NotifyMessageDetails, OutputMessagePriority, OutputMessageType } from \"@itwin/core-frontend\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { Centered, SettingsContainer } from \"@itwin/core-react\";\r\nimport { ModalFrontstageInfo, ModalFrontstageRequestedCloseEventArgs } from \"../framework/FrameworkFrontstages\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { SyncUiEventId } from \"../syncui/SyncUiEventDispatcher\";\r\nimport { StageUsage } from \"./StageUsage\";\r\nimport { BackstageItemUtilities } from \"../backstage/BackstageItemUtilities\";\r\n\r\nfunction ModalSettingsStage({ initialSettingsTabId }: { initialSettingsTabId?: string }) {\r\n  const id = UiFramework.frontstages.activeFrontstageDef?.id ?? \"none\";\r\n  const stageUsage = UiFramework.frontstages.activeFrontstageDef?.usage ?? StageUsage.General;\r\n  const tabEntries = UiFramework.settingsManager.getSettingEntries(id, stageUsage);\r\n  const noSettingsAvailableLabel = React.useRef(UiFramework.translate(\"settings.noSettingsAvailable\"));\r\n\r\n  const currentSettingsTab = React.useCallback(() => {\r\n    const categoryToFind = initialSettingsTabId ? initialSettingsTabId.toLowerCase() : tabEntries[0].tabId.toLowerCase();\r\n    let foundTab = tabEntries.find((entry) => entry.tabId.toLowerCase() === categoryToFind);\r\n    if (!foundTab)\r\n      foundTab = tabEntries.find((entry) => entry.label.toLowerCase() === categoryToFind);\r\n    return foundTab;\r\n  }, [initialSettingsTabId, tabEntries]);\r\n\r\n  React.useEffect(() => {\r\n    const handleFrontstageCloseRequested = ({ modalFrontstage, stageCloseFunc }: ModalFrontstageRequestedCloseEventArgs) => {\r\n      // istanbul ignore else\r\n      if (modalFrontstage instanceof SettingsModalFrontstage && stageCloseFunc) {\r\n        UiFramework.settingsManager.closeSettingsContainer(stageCloseFunc);\r\n      }\r\n    };\r\n    return UiFramework.frontstages.onCloseModalFrontstageRequestedEvent.addListener(handleFrontstageCloseRequested);\r\n  }, [tabEntries]);\r\n\r\n  return (\r\n    <div className=\"uifw-settings-container\">\r\n      {tabEntries.length ?\r\n        <SettingsContainer tabs={tabEntries} currentSettingsTab={currentSettingsTab()} settingsManager={UiFramework.settingsManager} /> :\r\n        <Centered>{noSettingsAvailableLabel.current}</Centered>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Modal frontstage displaying and editing settings from registered settings providers. See [SettingsManager]($core-react)\r\n * and [SettingsContainer]($core-react).\r\n * @beta\r\n */\r\nexport class SettingsModalFrontstage implements ModalFrontstageInfo {\r\n  public static id = \"appui-react.modalSettingsStage\";\r\n  public title: string = UiFramework.translate(\"settings.settingsStageLabel\");\r\n  constructor(public initialSettingsTabId?: string) { }\r\n  public notifyCloseRequest = true;\r\n  public get content(): React.ReactNode {\r\n    return (<ModalSettingsStage initialSettingsTabId={this.initialSettingsTabId} />);\r\n  }\r\n  private static noSettingsAvailable = () => new ConditionalBooleanValue(() => 0 === UiFramework.settingsManager.providers.length, [SyncUiEventId.SettingsProvidersChanged]);\r\n\r\n  public static getBackstageActionItem(groupPriority: number, itemPriority: number) {\r\n    return BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage()),\r\n      UiFramework.translate(\"settings.settingsStageLabel\"),\r\n      undefined, IconSpecUtilities.createWebComponentIconSpec(settingsIconSvg), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });\r\n  }\r\n\r\n  public static showSettingsStage(initialSettingsTab?: string) {\r\n    if (UiFramework.settingsManager.providers.length) {\r\n      // Check to see if it is already open\r\n      // istanbul ignore else\r\n      if (UiFramework.frontstages.activeModalFrontstage && UiFramework.frontstages.activeModalFrontstage instanceof SettingsModalFrontstage) {\r\n        if (initialSettingsTab) {\r\n          UiFramework.settingsManager.activateSettingsTab(initialSettingsTab);\r\n          return;\r\n        }\r\n      }\r\n      UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage(initialSettingsTab));\r\n    } else {\r\n      const briefMessage = UiFramework.translate(\"settings.noSettingsAvailable\");\r\n      const detailedMessage = UiFramework.translate(\"settings.noSettingsProvidersRegistered\");\r\n      const info = new NotifyMessageDetails(OutputMessagePriority.Info, briefMessage, detailedMessage, OutputMessageType.Toast);\r\n      IModelApp.notifications.outputMessage(info);\r\n      Logger.logInfo(UiFramework.loggerCategory(this), detailedMessage);\r\n    }\r\n  }\r\n}\r\n"]}

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

@@ -2,13 +2,11 @@
 * 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";
-@import "~@itwin/core-react/lib/cjs/core-react/base/base";
 
 .uifw-settings-container {
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   overflow: hidden;
-  background-color: $buic-background-3;
+  background-color: var(--iui-color-background);
 }

package/lib/esm/appui-react/frontstage/NestedFrontstage.d.ts

@@ -1,13 +1,14 @@
-/** @packageDocumentation
- * @module Frontstage
- */
-import { CommandItemDef } from "../shared/CommandItemDef";
-/**
- * Nested Frontstage related classes and commands
- * @public
- */
-export declare class NestedFrontstage {
-    /** Command that returns to the previous Frontstage */
-    static get backToPreviousFrontstageCommand(): CommandItemDef;
-}
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import { CommandItemDef } from "../shared/CommandItemDef";
+/**
+ * Nested Frontstage related classes and commands
+ * @public
+ */
+export declare class NestedFrontstage {
+    private static iconSpec;
+    /** Command that returns to the previous Frontstage */
+    static get backToPreviousFrontstageCommand(): CommandItemDef;
+}
 //# sourceMappingURL=NestedFrontstage.d.ts.map

package/lib/esm/appui-react/frontstage/NestedFrontstage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedFrontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/NestedFrontstage.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D;;;GAGG;AACH,qBAAa,gBAAgB;IAC3B,sDAAsD;IACtD,WAAkB,+BAA+B,mBAShD;CACF"}
+{"version":3,"file":"NestedFrontstage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/NestedFrontstage.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK1D;;;GAGG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA6E;IACpG,sDAAsD;IACtD,WAAkB,+BAA+B,mBAShD;CACF"}