@itwin/appui-react 4.0.0-dev.10 → 4.0.0-dev.11

package/lib/esm/appui-react/cursor/cursorprompt/CursorPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorPrompt.js","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorprompt/CursorPrompt.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 Notification\r\n */\r\n\r\nimport \"./CursorPrompt.scss\";\r\nimport * as React from \"react\";\r\nimport { ToolAssistanceInstruction } from \"@itwin/core-frontend\";\r\nimport { PointProps, RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { BodyText, Icon, Point, Timer } from \"@itwin/core-react\";\r\nimport { CursorInformation, CursorUpdatedEventArgs } from \"../CursorInformation\";\r\nimport { CursorPopupManager } from \"../cursorpopup/CursorPopupManager\";\r\n\r\n/** @internal */\r\nexport class CursorPrompt {\r\n  private _timeOut: number;\r\n  private _fadeOut: boolean;\r\n  private _timer: Timer;\r\n  private _relativePosition = RelativePosition.BottomRight;\r\n  private _offset: Point = new Point(20, 20);\r\n  private _popupId = \"cursor-prompt\";\r\n\r\n  constructor(timeOut: number, fadeOut: boolean) {\r\n    this._timeOut = timeOut;\r\n    this._fadeOut = fadeOut;\r\n    this._timer = new Timer(timeOut);\r\n  }\r\n\r\n  public display(toolIconSpec: string, instruction: ToolAssistanceInstruction, offset: PointProps = { x: 20, y: 20 }, relativePosition: RelativePosition = RelativePosition.BottomRight) {\r\n    if (!instruction.text) {\r\n      // istanbul ignore else\r\n      if (this._timer.isRunning)\r\n        this.close(false);\r\n      return;\r\n    }\r\n\r\n    this._relativePosition = relativePosition;\r\n    this._offset = Point.create(offset);\r\n\r\n    const promptElement = (\r\n      <div className=\"uifw-cursor-prompt\">\r\n        {toolIconSpec && <span className=\"uifw-cursor-prompt-icon\"><Icon iconSpec={toolIconSpec} /></span>}\r\n        <BodyText className=\"uifw-cursor-prompt-text\">{instruction.text}</BodyText>\r\n      </div >\r\n    );\r\n\r\n    this._startCursorPopup(promptElement);\r\n\r\n    this._timer.setOnExecute(() => this._endCursorPopup(this._fadeOut));\r\n    this._timer.delay = this._timeOut;\r\n    this._timer.start();\r\n  }\r\n\r\n  /** @internal - unit testing */\r\n  public close(fadeOut: boolean) {\r\n    this._timer.stop();\r\n    this._endCursorPopup(fadeOut);\r\n  }\r\n\r\n  private _startCursorPopup = (promptElement: React.ReactElement) => {\r\n    CursorPopupManager.open(this._popupId, promptElement, CursorInformation.cursorPosition, this._offset, this._relativePosition, 0, { shadow: true });\r\n\r\n    if (!CursorInformation.onCursorUpdatedEvent.has(this._handleCursorUpdated))\r\n      CursorInformation.onCursorUpdatedEvent.addListener(this._handleCursorUpdated);\r\n  };\r\n\r\n  private _endCursorPopup = (fadeOut?: boolean) => {\r\n    CursorPopupManager.close(this._popupId, false, fadeOut);\r\n    CursorInformation.onCursorUpdatedEvent.removeListener(this._handleCursorUpdated);\r\n  };\r\n\r\n  private _handleCursorUpdated = (args: CursorUpdatedEventArgs) => {\r\n    CursorPopupManager.updatePosition(args.newPt);\r\n  };\r\n\r\n}\r\n"]}
+{"version":3,"file":"CursorPrompt.js","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorprompt/CursorPrompt.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 Notification\r\n */\r\n\r\nimport \"./CursorPrompt.scss\";\r\nimport * as React from \"react\";\r\nimport { ToolAssistanceInstruction } from \"@itwin/core-frontend\";\r\nimport { PointProps, RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Icon, Point, Timer } from \"@itwin/core-react\";\r\nimport { Text } from \"@itwin/itwinui-react\";\r\nimport { CursorInformation, CursorUpdatedEventArgs } from \"../CursorInformation\";\r\nimport { CursorPopupManager } from \"../cursorpopup/CursorPopupManager\";\r\n\r\n/** @internal */\r\nexport class CursorPrompt {\r\n  private _timeOut: number;\r\n  private _fadeOut: boolean;\r\n  private _timer: Timer;\r\n  private _relativePosition = RelativePosition.BottomRight;\r\n  private _offset: Point = new Point(20, 20);\r\n  private _popupId = \"cursor-prompt\";\r\n\r\n  constructor(timeOut: number, fadeOut: boolean) {\r\n    this._timeOut = timeOut;\r\n    this._fadeOut = fadeOut;\r\n    this._timer = new Timer(timeOut);\r\n  }\r\n\r\n  public display(toolIconSpec: string, instruction: ToolAssistanceInstruction, offset: PointProps = { x: 20, y: 20 }, relativePosition: RelativePosition = RelativePosition.BottomRight) {\r\n    if (!instruction.text) {\r\n      // istanbul ignore else\r\n      if (this._timer.isRunning)\r\n        this.close(false);\r\n      return;\r\n    }\r\n\r\n    this._relativePosition = relativePosition;\r\n    this._offset = Point.create(offset);\r\n\r\n    const promptElement = (\r\n      <div className=\"uifw-cursor-prompt\">\r\n        {toolIconSpec && <span className=\"uifw-cursor-prompt-icon\"><Icon iconSpec={toolIconSpec} /></span>}\r\n        <Text variant=\"body\" className=\"uifw-cursor-prompt-text\">{instruction.text}</Text>\r\n      </div >\r\n    );\r\n\r\n    this._startCursorPopup(promptElement);\r\n\r\n    this._timer.setOnExecute(() => this._endCursorPopup(this._fadeOut));\r\n    this._timer.delay = this._timeOut;\r\n    this._timer.start();\r\n  }\r\n\r\n  /** @internal - unit testing */\r\n  public close(fadeOut: boolean) {\r\n    this._timer.stop();\r\n    this._endCursorPopup(fadeOut);\r\n  }\r\n\r\n  private _startCursorPopup = (promptElement: React.ReactElement) => {\r\n    CursorPopupManager.open(this._popupId, promptElement, CursorInformation.cursorPosition, this._offset, this._relativePosition, 0, { shadow: true });\r\n\r\n    if (!CursorInformation.onCursorUpdatedEvent.has(this._handleCursorUpdated))\r\n      CursorInformation.onCursorUpdatedEvent.addListener(this._handleCursorUpdated);\r\n  };\r\n\r\n  private _endCursorPopup = (fadeOut?: boolean) => {\r\n    CursorPopupManager.close(this._popupId, false, fadeOut);\r\n    CursorInformation.onCursorUpdatedEvent.removeListener(this._handleCursorUpdated);\r\n  };\r\n\r\n  private _handleCursorUpdated = (args: CursorUpdatedEventArgs) => {\r\n    CursorPopupManager.updatePosition(args.newPt);\r\n  };\r\n\r\n}\r\n"]}

package/lib/esm/appui-react/cursor/cursorprompt/CursorPrompt.scss

@@ -8,7 +8,7 @@
 .uifw-cursor-prompt {
   padding: 5px;
 
-  color: $buic-text-color;
+  color: var(--iui-color-text);
   min-width: 100px;
   max-width: 340px;
 

package/lib/esm/appui-react/feedback/ValidationTextbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationTextbox.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ValidationTextbox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,oBAAY,WAAW;IACrB,KAAK,IAAI;IACT,OAAO,IAAI;CACZ;AAED;;GAEG;AACH,UAAU,sBAAuB,SAAQ,WAAW;IAClD,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,CAAC;IAChD,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;gBAC5F,KAAK,EAAE,sBAAsB;IAMzC,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IAqCzC,OAAO,CAAC,mBAAmB;IAmB3B;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAEnB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAMzB,0BAA0B;IAC1B,OAAO,CAAC,iBAAiB;IAIzB,8BAA8B;IAC9B,OAAO,CAAC,iBAAiB;IAKzB;;;OAGG;IACH,OAAO,CAAC,YAAY,CAelB;CACH"}
+{"version":3,"file":"ValidationTextbox.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ValidationTextbox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;GAEG;AACH,oBAAY,WAAW;IACrB,KAAK,IAAI;IACT,OAAO,IAAI;CACZ;AAED;;GAEG;AACH,UAAU,sBAAuB,SAAQ,WAAW;IAClD,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,CAAC;IAChD,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;gBAC5F,KAAK,EAAE,sBAAsB;IAMzC,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;IAqCzC,OAAO,CAAC,mBAAmB;IAmB3B;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAEnB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAMzB,0BAA0B;IAC1B,OAAO,CAAC,iBAAiB;IAIzB,8BAA8B;IAC9B,OAAO,CAAC,iBAAiB;IAKzB;;;OAGG;IACH,OAAO,CAAC,YAAY,CAelB;CACH"}

package/lib/esm/appui-react/feedback/ValidationTextbox.js

@@ -10,6 +10,7 @@ import classnames from "classnames";
 import * as React from "react";
 import { SpecialKey } from "@itwin/appui-abstract";
 import { MessageManager } from "../messages/MessageManager";
+import { Input } from "@itwin/itwinui-react";
 /** Enum for Input Status used in [[ValidationTextbox]]
  * @alpha
  */
@@ -67,7 +68,7 @@ export class ValidationTextbox extends React.PureComponent {
         const validClassNames = classnames("ValidationTextbox-input");
         const invalidClassNames = classnames("ValidationTextbox-input", "ValidationTextbox-invalid");
         return (React.createElement("div", { className: classnames("uifw-ValidationTextbox", this.props.className), style: divStyle },
-            React.createElement("input", { className: this.state.isValid ? validClassNames : invalidClassNames, onChange: this._validateText, onKeyUp: this._handleKeyUp, onPaste: this._validateText, onCut: this._validateText, onBlur: this._validateText, placeholder: this.props.placeholder ? this.props.placeholder : "", style: sizeStyle }),
+            React.createElement(Input, { className: this.state.isValid ? validClassNames : invalidClassNames, onChange: this._validateText, onKeyUp: this._handleKeyUp, onPaste: this._validateText, onCut: this._validateText, onBlur: this._validateText, placeholder: this.props.placeholder ? this.props.placeholder : "", style: sizeStyle }),
             this.props.children));
     }
     processValidateText(target) {

package/lib/esm/appui-react/feedback/ValidationTextbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationTextbox.js","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ValidationTextbox.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 Notification\r\n */\r\n\r\nimport \"./ValidationTextbox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { MessageManager } from \"../messages/MessageManager\";\r\n\r\n/** Enum for Input Status used in [[ValidationTextbox]]\r\n * @alpha\r\n */\r\nexport enum InputStatus {\r\n  Valid = 0,\r\n  Invalid = 1,\r\n}\r\n\r\n/** Property interface for ValidationTextbox\r\n * @alpha\r\n */\r\ninterface ValidationTextboxProps extends CommonProps {\r\n  /** value to set ValidationTextbox to initially */\r\n  initialValue?: string;\r\n  /** placeholder value to show in gray before anything is entered in */\r\n  placeholder?: string;\r\n  /** triggered when the content of ValidationTextbox is changed. Return true if valid */\r\n  onValueChanged?: (value: string) => InputStatus;\r\n  /** listens for <Enter> key presses */\r\n  onEnterPressed?: () => void;\r\n  /** listens for <Esc> key presses */\r\n  onEscPressed?: () => void;\r\n  /** width of ValidationTextbox, measured in em */\r\n  size?: number;\r\n  /** Error message to display */\r\n  errorText?: string;\r\n  /** Detailed error message to display */\r\n  detailedErrorText?: string;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ValidationTextboxState {\r\n  isValid: boolean;\r\n}\r\n\r\n/**\r\n * Input box that validates text based on provided criteria. Defaults to checking\r\n * for empty if no method for onValueChanged is provided.\r\n * @alpha\r\n */\r\nexport class ValidationTextbox extends React.PureComponent<ValidationTextboxProps, ValidationTextboxState> {\r\n  constructor(props: ValidationTextboxProps) {\r\n    super(props);\r\n\r\n    this.state = { isValid: true };\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const sizeStyle: React.CSSProperties = {\r\n      width: this.props.size ? `${this.props.size.toString()}em` : \"12em\",\r\n    };\r\n    const divStyle: React.CSSProperties = {\r\n      ...sizeStyle,\r\n      ...this.props.style,\r\n    };\r\n\r\n    const validClassNames = classnames(\r\n      \"ValidationTextbox-input\",\r\n    );\r\n\r\n    const invalidClassNames = classnames(\r\n      \"ValidationTextbox-input\",\r\n      \"ValidationTextbox-invalid\",\r\n    );\r\n\r\n    return (\r\n      <div\r\n        className={classnames(\"uifw-ValidationTextbox\", this.props.className)}\r\n        style={divStyle}>\r\n        <input\r\n          className={this.state.isValid ? validClassNames : invalidClassNames}\r\n          onChange={this._validateText}\r\n          onKeyUp={this._handleKeyUp}\r\n          onPaste={this._validateText}\r\n          onCut={this._validateText}\r\n          onBlur={this._validateText}\r\n          placeholder={this.props.placeholder ? this.props.placeholder : \"\"}\r\n          style={sizeStyle}\r\n        />\r\n        {this.props.children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private processValidateText(target: HTMLInputElement | undefined): void {\r\n    // istanbul ignore next\r\n    if (undefined === target)\r\n      return;\r\n\r\n    const value = target.value;\r\n    const isValid = this._calculateIsValid(value);\r\n\r\n    this.setState({ isValid }, () => {\r\n      if (this.state.isValid) {\r\n        this._hideErrorMessage();\r\n      } else {\r\n        // istanbul ignore else\r\n        if (this.props.errorText && !this.state.isValid)\r\n          this._showErrorMessage(target);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Determines if value is valid and resolves any defined functions.\r\n   * Also will show or hide error message if defined.\r\n   * @param event   Button press event that triggers validation\r\n   */\r\n  private _validateText = (event?: any): void => {\r\n    this.processValidateText(event.target as HTMLInputElement);\r\n  };\r\n\r\n  /**\r\n   * Determines if value provided is valid by calling user defined\r\n   * function. If no function is provided, the default criteria for\r\n   * validity is if the value has been defined.\r\n   * @param value   The value provided in textbox\r\n   */\r\n  private _calculateIsValid(value: string): boolean {\r\n    if (this.props.onValueChanged)\r\n      return (this.props.onValueChanged(value) === InputStatus.Valid) ? /* istanbul ignore next */ true : false;\r\n    return value.length > 0;\r\n  }\r\n\r\n  /** Hides error message */\r\n  private _hideErrorMessage() {\r\n    MessageManager.hideInputFieldMessage();\r\n  }\r\n\r\n  /** Displays error message. */\r\n  private _showErrorMessage(target: Element) {\r\n    MessageManager.displayInputFieldMessage(target as HTMLElement, this.props.errorText!, this.props.detailedErrorText);\r\n    return;\r\n  }\r\n\r\n  /**\r\n   * Manages special key codes by calling user defined functions\r\n   * @param event   Keyup event\r\n   */\r\n  private _handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    this.processValidateText(event.target as HTMLInputElement);\r\n\r\n    switch (event.key) {\r\n      case SpecialKey.Escape:\r\n        // istanbul ignore else\r\n        if (this.props.onEscPressed)\r\n          this.props.onEscPressed();\r\n        break;\r\n      case SpecialKey.Enter:\r\n        // istanbul ignore else\r\n        if (this.props.onEnterPressed)\r\n          this.props.onEnterPressed();\r\n        break;\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"ValidationTextbox.js","sourceRoot":"","sources":["../../../../src/appui-react/feedback/ValidationTextbox.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,+CAAS,CAAA;IACT,mDAAW,CAAA;AACb,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AA8BD;;;;GAIG;AACH,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,aAA6D;IACxG,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QA8Df;;;;WAIG;QACK,kBAAa,GAAG,CAAC,KAAW,EAAQ,EAAE;YAC5C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAA0B,CAAC,CAAC;QAC7D,CAAC,CAAC;QAyBF;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAA4C,EAAE,EAAE;YACtE,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAA0B,CAAC,CAAC;YAE3D,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,UAAU,CAAC,MAAM;oBACpB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;wBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,KAAK;oBACnB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;wBAC3B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC9B,MAAM;aACT;QACH,CAAC,CAAC;QA/GA,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,SAAS,GAAwB;YACrC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM;SACpE,CAAC;QACF,MAAM,QAAQ,GAAwB;YACpC,GAAG,SAAS;YACZ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;SACpB,CAAC;QAEF,MAAM,eAAe,GAAG,UAAU,CAChC,yBAAyB,CAC1B,CAAC;QAEF,MAAM,iBAAiB,GAAG,UAAU,CAClC,yBAAyB,EACzB,2BAA2B,CAC5B,CAAC;QAEF,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EACrE,KAAK,EAAE,QAAQ;YACf,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EACnE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EACjE,KAAK,EAAE,SAAS,GAChB;YACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,MAAoC;QAC9D,uBAAuB;QACvB,IAAI,SAAS,KAAK,MAAM;YACtB,OAAO;QAET,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE9C,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;oBAC7C,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAWD;;;;;OAKG;IACK,iBAAiB,CAAC,KAAa;QACrC,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc;YAC3B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5G,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,0BAA0B;IAClB,iBAAiB;QACvB,cAAc,CAAC,qBAAqB,EAAE,CAAC;IACzC,CAAC;IAED,8BAA8B;IACtB,iBAAiB,CAAC,MAAe;QACvC,cAAc,CAAC,wBAAwB,CAAC,MAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAU,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACpH,OAAO;IACT,CAAC;CAsBF","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 Notification\r\n */\r\n\r\nimport \"./ValidationTextbox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { MessageManager } from \"../messages/MessageManager\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\n\r\n/** Enum for Input Status used in [[ValidationTextbox]]\r\n * @alpha\r\n */\r\nexport enum InputStatus {\r\n  Valid = 0,\r\n  Invalid = 1,\r\n}\r\n\r\n/** Property interface for ValidationTextbox\r\n * @alpha\r\n */\r\ninterface ValidationTextboxProps extends CommonProps {\r\n  /** value to set ValidationTextbox to initially */\r\n  initialValue?: string;\r\n  /** placeholder value to show in gray before anything is entered in */\r\n  placeholder?: string;\r\n  /** triggered when the content of ValidationTextbox is changed. Return true if valid */\r\n  onValueChanged?: (value: string) => InputStatus;\r\n  /** listens for <Enter> key presses */\r\n  onEnterPressed?: () => void;\r\n  /** listens for <Esc> key presses */\r\n  onEscPressed?: () => void;\r\n  /** width of ValidationTextbox, measured in em */\r\n  size?: number;\r\n  /** Error message to display */\r\n  errorText?: string;\r\n  /** Detailed error message to display */\r\n  detailedErrorText?: string;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ValidationTextboxState {\r\n  isValid: boolean;\r\n}\r\n\r\n/**\r\n * Input box that validates text based on provided criteria. Defaults to checking\r\n * for empty if no method for onValueChanged is provided.\r\n * @alpha\r\n */\r\nexport class ValidationTextbox extends React.PureComponent<ValidationTextboxProps, ValidationTextboxState> {\r\n  constructor(props: ValidationTextboxProps) {\r\n    super(props);\r\n\r\n    this.state = { isValid: true };\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const sizeStyle: React.CSSProperties = {\r\n      width: this.props.size ? `${this.props.size.toString()}em` : \"12em\",\r\n    };\r\n    const divStyle: React.CSSProperties = {\r\n      ...sizeStyle,\r\n      ...this.props.style,\r\n    };\r\n\r\n    const validClassNames = classnames(\r\n      \"ValidationTextbox-input\",\r\n    );\r\n\r\n    const invalidClassNames = classnames(\r\n      \"ValidationTextbox-input\",\r\n      \"ValidationTextbox-invalid\",\r\n    );\r\n\r\n    return (\r\n      <div\r\n        className={classnames(\"uifw-ValidationTextbox\", this.props.className)}\r\n        style={divStyle}>\r\n        <Input\r\n          className={this.state.isValid ? validClassNames : invalidClassNames}\r\n          onChange={this._validateText}\r\n          onKeyUp={this._handleKeyUp}\r\n          onPaste={this._validateText}\r\n          onCut={this._validateText}\r\n          onBlur={this._validateText}\r\n          placeholder={this.props.placeholder ? this.props.placeholder : \"\"}\r\n          style={sizeStyle}\r\n        />\r\n        {this.props.children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private processValidateText(target: HTMLInputElement | undefined): void {\r\n    // istanbul ignore next\r\n    if (undefined === target)\r\n      return;\r\n\r\n    const value = target.value;\r\n    const isValid = this._calculateIsValid(value);\r\n\r\n    this.setState({ isValid }, () => {\r\n      if (this.state.isValid) {\r\n        this._hideErrorMessage();\r\n      } else {\r\n        // istanbul ignore else\r\n        if (this.props.errorText && !this.state.isValid)\r\n          this._showErrorMessage(target);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Determines if value is valid and resolves any defined functions.\r\n   * Also will show or hide error message if defined.\r\n   * @param event   Button press event that triggers validation\r\n   */\r\n  private _validateText = (event?: any): void => {\r\n    this.processValidateText(event.target as HTMLInputElement);\r\n  };\r\n\r\n  /**\r\n   * Determines if value provided is valid by calling user defined\r\n   * function. If no function is provided, the default criteria for\r\n   * validity is if the value has been defined.\r\n   * @param value   The value provided in textbox\r\n   */\r\n  private _calculateIsValid(value: string): boolean {\r\n    if (this.props.onValueChanged)\r\n      return (this.props.onValueChanged(value) === InputStatus.Valid) ? /* istanbul ignore next */ true : false;\r\n    return value.length > 0;\r\n  }\r\n\r\n  /** Hides error message */\r\n  private _hideErrorMessage() {\r\n    MessageManager.hideInputFieldMessage();\r\n  }\r\n\r\n  /** Displays error message. */\r\n  private _showErrorMessage(target: Element) {\r\n    MessageManager.displayInputFieldMessage(target as HTMLElement, this.props.errorText!, this.props.detailedErrorText);\r\n    return;\r\n  }\r\n\r\n  /**\r\n   * Manages special key codes by calling user defined functions\r\n   * @param event   Keyup event\r\n   */\r\n  private _handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    this.processValidateText(event.target as HTMLInputElement);\r\n\r\n    switch (event.key) {\r\n      case SpecialKey.Escape:\r\n        // istanbul ignore else\r\n        if (this.props.onEscPressed)\r\n          this.props.onEscPressed();\r\n        break;\r\n      case SpecialKey.Enter:\r\n        // istanbul ignore else\r\n        if (this.props.onEnterPressed)\r\n          this.props.onEnterPressed();\r\n        break;\r\n    }\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/feedback/ValidationTextbox.scss

@@ -6,11 +6,9 @@
 @import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/style/variables";
-@import "~@itwin/itwinui-css/scss/inputs/input";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .uifw-ValidationTextbox {
-  @include iui-font-family;
+  font-family: var(--iui-font-sans);
   position: relative;
   padding: $uicore-unbordered-padding;
   width: 12em;
@@ -18,7 +16,6 @@
 
   .ValidationTextbox-input {
     position: absolute;
-    @include iui-input;
     min-height: $uicore-component-height-normal;
     padding: $uicore-iui-input-padding;
     width: 12em;
@@ -40,7 +37,7 @@
     width: var(--iui-size-l);
     height: var(--iui-size-l);
     line-height: var(--iui-size-l);
-    font-size: $uicore-icons-small;
+    font-size: var(--iui-font-size-2);
     cursor: pointer;
     top: 0px;
     right: 0px;
@@ -48,7 +45,7 @@
     color: $buic-icon-color;
 
     &:hover {
-      color: $buic-foreground-primary;
+      color: var(--iui-color-text-accent);
     }
   }
 }

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;AAKhD;;;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"}
+{"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

@@ -8,9 +8,11 @@
 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 { Headline } from "@itwin/itwinui-react";
+import { Text } from "@itwin/itwinui-react";
+import { SvgProgressBackwardCircular } from "@itwin/itwinui-icons-react";
 /**
  * ModalFrontstage React component
  * @public
@@ -30,8 +32,8 @@ export class ModalFrontstage extends React.Component {
         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(Headline, null, this.props.title),
+                    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)),

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;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAqBhD;;;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,oBAAC,QAAQ,QAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAY;oBACtC,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\nimport { Headline } from \"@itwin/itwinui-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                <i className=\"icon icon-progress-backward\" />\r\n              }\r\n              title={this._backButtonTitle}\r\n            />\r\n            <Headline>{this.props.title}</Headline>\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,12 +23,12 @@
   @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;
 
     .iui-text-headline {
       display: inline-block;
@@ -39,7 +38,7 @@
     }
 
     .uifw-modal-app-bar-right {
-      color: $buic-foreground-body;
+      color: var(--iui-color-text);
       line-height: 60px;
       vertical-align: center;
       float: right;
@@ -50,7 +49,6 @@
       display: inline-block;
       border-radius: 0; // Turn off circular border from Back.scss in ui-ninezone
     }
-
   }
 
   .uifw-modal-stage-content {
@@ -61,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 {
@@ -78,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

@@ -16,7 +16,7 @@ export declare class SettingsModalFrontstage implements ModalFrontstageInfo {
     notifyCloseRequest: boolean;
     get content(): React.ReactNode;
     private static noSettingsAvailable;
-    static getBackstageActionItem(groupPriority: number, itemPriority: number): import("@itwin/appui-abstract").BackstageActionItem;
+    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,EAAE,mBAAmB,EAA0C,MAAM,mCAAmC,CAAC;AAuChH;;;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

@@ -7,7 +7,7 @@
  */
 import "./ModalSettingsStage.scss";
 import * as React from "react";
-import { BackstageItemUtilities, ConditionalBooleanValue, IconSpecUtilities } from "@itwin/appui-abstract";
+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";
@@ -15,6 +15,7 @@ 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";
@@ -55,8 +56,7 @@ export class SettingsModalFrontstage {
         return (React.createElement(ModalSettingsStage, { initialSettingsTabId: this.initialSettingsTabId }));
     }
     static getBackstageActionItem(groupPriority, itemPriority) {
-        return BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage()), // eslint-disable-line deprecation/deprecation
-        UiFramework.translate("settings.settingsStageLabel"), undefined, IconSpecUtilities.createWebComponentIconSpec(settingsIconSvg), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });
+        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) {

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 { ModalFrontstageInfo, ModalFrontstageRequestedCloseEventArgs } from \"../framework/FrameworkFrontstages\";\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 = 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()), // 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 (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"]}
+{"version":3,"file":"ModalSettingsStage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/ModalSettingsStage.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,eAAe,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACjH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,SAAS,kBAAkB,CAAC,EAAE,oBAAoB,EAAqC;;IACrF,MAAM,EAAE,GAAG,MAAA,MAAA,WAAW,CAAC,WAAW,CAAC,mBAAmB,0CAAE,EAAE,mCAAI,MAAM,CAAC;IACrE,MAAM,UAAU,GAAG,MAAA,MAAA,WAAW,CAAC,WAAW,CAAC,mBAAmB,0CAAE,KAAK,mCAAI,UAAU,CAAC,OAAO,CAAC;IAC5F,MAAM,UAAU,GAAG,WAAW,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IACjF,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC,CAAC;IAErG,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,MAAM,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACrH,IAAI,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,cAAc,CAAC,CAAC;QACxF,IAAI,CAAC,QAAQ;YACX,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,cAAc,CAAC,CAAC;QACtF,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,8BAA8B,GAAG,CAAC,EAAE,eAAe,EAAE,cAAc,EAA0C,EAAE,EAAE;YACrH,uBAAuB;YACvB,IAAI,eAAe,YAAY,uBAAuB,IAAI,cAAc,EAAE;gBACxE,WAAW,CAAC,eAAe,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAC;aACpE;QACH,CAAC,CAAC;QACF,OAAO,WAAW,CAAC,WAAW,CAAC,oCAAoC,CAAC,WAAW,CAAC,8BAA8B,CAAC,CAAC;IAClH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB,IACrC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClB,oBAAC,iBAAiB,IAAC,IAAI,EAAE,UAAU,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,EAAE,eAAe,EAAE,WAAW,CAAC,eAAe,GAAI,CAAC,CAAC;QACjI,oBAAC,QAAQ,QAAE,wBAAwB,CAAC,OAAO,CAAY,CAErD,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,OAAO,uBAAuB;IAGlC,YAAmB,oBAA6B;QAA7B,yBAAoB,GAApB,oBAAoB,CAAS;QADzC,UAAK,GAAW,WAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;QAErE,uBAAkB,GAAG,IAAI,CAAC;IADmB,CAAC;IAErD,IAAW,OAAO;QAChB,OAAO,CAAC,oBAAC,kBAAkB,IAAC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,GAAI,CAAC,CAAC;IACnF,CAAC;IAGM,MAAM,CAAC,sBAAsB,CAAC,aAAqB,EAAE,YAAoB;QAC9E,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,mBAAmB,CAAC,IAAI,uBAAuB,EAAE,CAAC,EACtL,WAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,EACpD,SAAS,EAAE,iBAAiB,CAAC,0BAA0B,CAAC,eAAe,CAAC,EAAE,EAAE,QAAQ,EAAE,uBAAuB,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IAC3I,CAAC;IAEM,MAAM,CAAC,iBAAiB,CAAC,kBAA2B;QACzD,IAAI,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE;YAChD,qCAAqC;YACrC,uBAAuB;YACvB,IAAI,WAAW,CAAC,WAAW,CAAC,qBAAqB,IAAI,WAAW,CAAC,WAAW,CAAC,qBAAqB,YAAY,uBAAuB,EAAE;gBACrI,IAAI,kBAAkB,EAAE;oBACtB,WAAW,CAAC,eAAe,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;oBACpE,OAAO;iBACR;aACF;YACD,WAAW,CAAC,WAAW,CAAC,mBAAmB,CAAC,IAAI,uBAAuB,CAAC,kBAAkB,CAAC,CAAC,CAAC;SAC9F;aAAM;YACL,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC;YAC3E,MAAM,eAAe,GAAG,WAAW,CAAC,SAAS,CAAC,wCAAwC,CAAC,CAAC;YACxF,MAAM,IAAI,GAAG,IAAI,oBAAoB,CAAC,qBAAqB,CAAC,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC1H,SAAS,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAC5C,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC,CAAC;SACnE;IACH,CAAC;;AAjCa,0BAAE,GAAG,gCAAgC,CAAC;AAOrC,2CAAmB,GAAG,GAAG,EAAE,CAAC,IAAI,uBAAuB,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC,CAAC","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

@@ -7,6 +7,7 @@ import { CommandItemDef } from "../shared/CommandItemDef";
  * @public
  */
 export declare class NestedFrontstage {
+    private static iconSpec;
     /** Command that returns to the previous Frontstage */
     static get backToPreviousFrontstageCommand(): CommandItemDef;
 }

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"}

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

@@ -7,6 +7,8 @@
  */
 import { CommandItemDef } from "../shared/CommandItemDef";
 import { UiFramework } from "../UiFramework";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import svgProgressBackwardCircular from "@bentley/icons-generic/icons/progress-backward.svg";
 /**
  * Nested Frontstage related classes and commands
  * @public
@@ -16,7 +18,7 @@ export class NestedFrontstage {
     static get backToPreviousFrontstageCommand() {
         return new CommandItemDef({
             commandId: "backToPreviousFrontstage",
-            iconSpec: "icon-progress-backward",
+            iconSpec: NestedFrontstage.iconSpec,
             labelKey: "UiFramework:commands.backToPreviousFrontstage",
             execute: async () => {
                 await UiFramework.frontstages.closeNestedFrontstage();
@@ -24,4 +26,5 @@ export class NestedFrontstage {
         });
     }
 }
+NestedFrontstage.iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgProgressBackwardCircular);
 //# sourceMappingURL=NestedFrontstage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NestedFrontstage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/NestedFrontstage.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,gBAAgB;IAC3B,sDAAsD;IAC/C,MAAM,KAAK,+BAA+B;QAC/C,OAAO,IAAI,cAAc,CAAC;YACxB,SAAS,EAAE,0BAA0B;YACrC,QAAQ,EAAE,wBAAwB;YAClC,QAAQ,EAAE,+CAA+C;YACzD,OAAO,EAAE,KAAK,IAAI,EAAE;gBAClB,MAAM,WAAW,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACxD,CAAC;SACF,CAAC,CAAC;IACL,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 { CommandItemDef } from \"../shared/CommandItemDef\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/**\r\n * Nested Frontstage related classes and commands\r\n * @public\r\n */\r\nexport class NestedFrontstage {\r\n  /** Command that returns to the previous Frontstage */\r\n  public static get backToPreviousFrontstageCommand() {\r\n    return new CommandItemDef({\r\n      commandId: \"backToPreviousFrontstage\",\r\n      iconSpec: \"icon-progress-backward\",\r\n      labelKey: \"UiFramework:commands.backToPreviousFrontstage\",\r\n      execute: async () => {\r\n        await UiFramework.frontstages.closeNestedFrontstage();\r\n      },\r\n    });\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"NestedFrontstage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/NestedFrontstage.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,2BAA2B,MAAM,oDAAoD,CAAC;AAE7F;;;GAGG;AACH,MAAM,OAAO,gBAAgB;IAE3B,sDAAsD;IAC/C,MAAM,KAAK,+BAA+B;QAC/C,OAAO,IAAI,cAAc,CAAC;YACxB,SAAS,EAAE,0BAA0B;YACrC,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;YACnC,QAAQ,EAAE,+CAA+C;YACzD,OAAO,EAAE,KAAK,IAAI,EAAE;gBAClB,MAAM,WAAW,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACxD,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AAXc,yBAAQ,GAAG,iBAAiB,CAAC,0BAA0B,CAAC,2BAA2B,CAAC,CAAC","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 { CommandItemDef } from \"../shared/CommandItemDef\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport svgProgressBackwardCircular from \"@bentley/icons-generic/icons/progress-backward.svg\";\r\n\r\n/**\r\n * Nested Frontstage related classes and commands\r\n * @public\r\n */\r\nexport class NestedFrontstage {\r\n  private static iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgProgressBackwardCircular);\r\n  /** Command that returns to the previous Frontstage */\r\n  public static get backToPreviousFrontstageCommand() {\r\n    return new CommandItemDef({\r\n      commandId: \"backToPreviousFrontstage\",\r\n      iconSpec: NestedFrontstage.iconSpec,\r\n      labelKey: \"UiFramework:commands.backToPreviousFrontstage\",\r\n      execute: async () => {\r\n        await UiFramework.frontstages.closeNestedFrontstage();\r\n      },\r\n    });\r\n  }\r\n}\r\n"]}

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

@@ -1,15 +1,16 @@
 /** @packageDocumentation
  * @module Item
  */
-import { StageUsage as UIA_StageUsage } from "@itwin/appui-abstract";
 /** Standard stage uses. Allows extension to target ui item to include on a stage without
  * knowing the stage name defined in the host application.
- * @beta
+ * @public
  */
-export declare type StageUsage = UIA_StageUsage;
-/** Standard stage uses. Allows extension to target ui item to include on a stage without
- * knowing the stage name defined in the host application.
- * @beta
- */
-export declare const StageUsage: typeof UIA_StageUsage;
+export declare enum StageUsage {
+    Private = "Private",
+    General = "General",
+    Redline = "Redline",
+    ViewOnly = "ViewOnly",
+    Edit = "Edit",
+    Settings = "Settings"
+}
 //# sourceMappingURL=StageUsage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageUsage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StageUsage.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;GAGG;AACH,oBAAY,UAAU,GAAG,cAAc,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,UAAU,uBAAiB,CAAC"}
+{"version":3,"file":"StageUsage.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StageUsage.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB"}

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

@@ -5,10 +5,17 @@
 /** @packageDocumentation
  * @module Item
  */
-import { StageUsage as UIA_StageUsage } from "@itwin/appui-abstract";
 /** Standard stage uses. Allows extension to target ui item to include on a stage without
  * knowing the stage name defined in the host application.
- * @beta
+ * @public
  */
-export const StageUsage = UIA_StageUsage; // eslint-disable-line @typescript-eslint/no-redeclare, deprecation/deprecation
+export var StageUsage;
+(function (StageUsage) {
+    StageUsage["Private"] = "Private";
+    StageUsage["General"] = "General";
+    StageUsage["Redline"] = "Redline";
+    StageUsage["ViewOnly"] = "ViewOnly";
+    StageUsage["Edit"] = "Edit";
+    StageUsage["Settings"] = "Settings";
+})(StageUsage || (StageUsage = {}));
 //# sourceMappingURL=StageUsage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StageUsage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StageUsage.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAQrE;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,+EAA+E","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 Item\r\n */\r\n\r\nimport { StageUsage as UIA_StageUsage } from \"@itwin/appui-abstract\";\r\n\r\n/** Standard stage uses. Allows extension to target ui item to include on a stage without\r\n * knowing the stage name defined in the host application.\r\n * @beta\r\n */\r\nexport type StageUsage = UIA_StageUsage; // eslint-disable-line deprecation/deprecation\r\n\r\n/** Standard stage uses. Allows extension to target ui item to include on a stage without\r\n * knowing the stage name defined in the host application.\r\n * @beta\r\n */\r\nexport const StageUsage = UIA_StageUsage; // eslint-disable-line @typescript-eslint/no-redeclare, deprecation/deprecation\r\n"]}
+{"version":3,"file":"StageUsage.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StageUsage.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;;GAGG;AACH,MAAM,CAAN,IAAY,UAOX;AAPD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,iCAAmB,CAAA;IACnB,iCAAmB,CAAA;IACnB,mCAAqB,CAAA;IACrB,2BAAa,CAAA;IACb,mCAAqB,CAAA;AACvB,CAAC,EAPW,UAAU,KAAV,UAAU,QAOrB","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 Item\r\n */\r\n\r\n/** Standard stage uses. Allows extension to target ui item to include on a stage without\r\n * knowing the stage name defined in the host application.\r\n * @public\r\n */\r\nexport enum StageUsage {\r\n  Private = \"Private\",\r\n  General = \"General\",\r\n  Redline = \"Redline\",\r\n  ViewOnly = \"ViewOnly\",\r\n  Edit = \"Edit\",\r\n  Settings = \"Settings\",\r\n}\r\n"]}

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

@@ -2,11 +2,11 @@
  * @module Frontstage
  */
 import * as React from "react";
-import { StageUsage } from "@itwin/appui-abstract";
 import { ContentGroupProps, ContentGroupProvider } from "../content/ContentGroup";
 import { FrontstageProvider } from "./FrontstageProvider";
 import { FrontstageConfig } from "./FrontstageConfig";
 import { StagePanelConfig } from "../stagepanels/StagePanelConfig";
+import { StageUsage } from "./StageUsage";
 /** Properties of a [[WidgetPanelProps]] component
  * @public
  */
@@ -23,11 +23,11 @@ export interface StandardFrontstageProps {
     contentGroupProps: ContentGroupProps | ContentGroupProvider;
     /** Specify button to use to open backstage. Leave undefined for no backstage button.
      * ```
-     * <BackstageAppButton icon={"icon-bentley-systems"} />
+     * <BackstageAppButton icon={<SvgBentleySystems />} />
      * ```
      * Custom corner button definition
      * ```
-     * const cornerButton = <BackstageAppButton icon={"icon-bentley-systems"}
+     * const cornerButton = <BackstageAppButton icon={<SvgBentleySystems />}
      *   label="Toggle Backstage display",
      *   execute={() => UiFramework.backstage.getBackstageToggleCommand().execute()} />;
      * ```

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

@@ -1 +1 @@
-{"version":3,"file":"StandardFrontstageProvider.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StandardFrontstageProvider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAgB,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAK1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE;;GAEG;AACH,oBAAY,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC,CAAC;AAE7H;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IAEtC,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B,8EAA8E;IAC9E,iBAAiB,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;IAC5D;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;4EACwE;IACxE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC;2EACuE;IACvE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;sEACkE;IAClE,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC;sEACkE;IAClE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED;;;;GAIG;AACH,qBAAa,0BAA2B,SAAQ,kBAAkB;IACpD,OAAO,CAAC,KAAK;gBAAL,KAAK,EAAE,uBAAuB;IAIlD,IAAoB,EAAE,IAAI,MAAM,CAE/B;IAEe,gBAAgB,IAAI,gBAAgB;CA6CrD"}
+{"version":3,"file":"StandardFrontstageProvider.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StandardFrontstageProvider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgB,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C;;GAEG;AACH,oBAAY,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC,CAAC;AAE7H;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IAEtC,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B,8EAA8E;IAC9E,iBAAiB,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;IAC5D;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;4EACwE;IACxE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC;2EACuE;IACvE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;sEACkE;IAClE,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC;sEACkE;IAClE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED;;;;GAIG;AACH,qBAAa,0BAA2B,SAAQ,kBAAkB;IACpD,OAAO,CAAC,KAAK;gBAAL,KAAK,EAAE,uBAAuB;IAIlD,IAAoB,EAAE,IAAI,MAAM,CAE/B;IAEe,gBAAgB,IAAI,gBAAgB;CA6CrD"}

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

@@ -10,8 +10,8 @@ import { ContentGroup, ContentGroupProvider } from "../content/ContentGroup";
 import { FrontstageProvider } from "./FrontstageProvider";
 import { ContentToolWidgetComposer } from "../widgets/ContentToolWidgetComposer";
 import { ViewToolWidgetComposer } from "../widgets/ViewToolWidgetComposer";
-import { StatusBarWidgetComposerControl } from "../widgets/StatusBarWidgetComposerControl";
 import { StagePanelState } from "../stagepanels/StagePanelDef";
+import { StatusBarComposer } from "../statusbar/StatusBarComposer";
 /**
  * FrontstageProvider that provides an "empty" stage. All tool buttons, statusbar items, and widgets must
  * be provided by one or more item providers, see [UiItemsProvider]($appui-abstract).
@@ -35,18 +35,18 @@ export class StandardFrontstageProvider extends FrontstageProvider {
             usage: this.props.usage,
             contentManipulation: {
                 id: `${this.props.id}-contentManipulationTools`,
-                element: React.createElement(ContentToolWidgetComposer, { cornerButton: this.props.cornerButton }),
+                content: React.createElement(ContentToolWidgetComposer, { cornerButton: this.props.cornerButton }),
             },
             viewNavigation: {
                 id: `${this.props.id}-viewNavigationTools`,
-                element: React.createElement(ViewToolWidgetComposer, { hideNavigationAid: this.props.hideNavigationAid }),
+                content: React.createElement(ViewToolWidgetComposer, { hideNavigationAid: this.props.hideNavigationAid }),
             },
             toolSettings: this.props.hideToolSettings ? undefined : {
                 id: `${this.props.id}-toolSettings`,
             },
             statusBar: this.props.hideStatusBar ? undefined : {
                 id: `${this.props.id}-statusBar`,
-                control: StatusBarWidgetComposerControl,
+                content: React.createElement(StatusBarComposer, { items: [] }),
             },
             leftPanel: {
                 size: 300,