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

package/lib/cjs/appui-react/configurableui/ConfigurableUiControl.d.ts

@@ -70,7 +70,7 @@ export declare abstract class ConfigurableUiControl extends ConfigurableBase {
      * @param info         An object that the subclass must pass to this base class.
      * @param options      Options provided to the control
      * @note Subclasses must pass all arguments to the base class and not add themselves
-     * to any container - the control is added automatically by the [[FrontstageComposer]].
+     * to any container - the control is added automatically.
      * @protected
      */
     constructor(info: ConfigurableCreateInfo, options: any);

package/lib/cjs/appui-react/configurableui/ConfigurableUiControl.js

@@ -69,7 +69,7 @@ class ConfigurableUiControl extends ConfigurableBase {
      * @param info         An object that the subclass must pass to this base class.
      * @param options      Options provided to the control
      * @note Subclasses must pass all arguments to the base class and not add themselves
-     * to any container - the control is added automatically by the [[FrontstageComposer]].
+     * to any container - the control is added automatically.
      * @protected
      */
     constructor(info, options) {

package/lib/cjs/appui-react/configurableui/ConfigurableUiControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiControl.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/ConfigurableUiControl.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAWH;;GAEG;AACH,MAAa,sBAAsB;IACjC,YAA4B,OAAe,EACzB,QAAgB,EAChB,EAAU;QAFA,YAAO,GAAP,OAAO,CAAQ;QACzB,aAAQ,GAAR,QAAQ,CAAQ;QAChB,OAAE,GAAF,EAAE,CAAQ;IAC5B,CAAC;CACF;AALD,wDAKC;AAED;;GAEG;AACH,MAAa,gBAAgB;IAM3B,YAAY,IAA4B,EAAE,OAAY;QACpD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxF,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IACjC,CAAC;IAED,gBAAgB;IAChB,IAAW,QAAQ,KAAa,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAExD,4DAA4D;IAC5D,IAAW,eAAe,KAAU,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,gDAAgD;IAChD,IAAW,OAAO,KAAa,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD;;OAEG;IACH,IAAW,IAAI,KAAa,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;CACjD;AA1BD,4CA0BC;AAED;;GAEG;AACH,IAAY,yBAOX;AAPD,WAAY,yBAAyB;IACnC,uDAA0B,CAAA;IAC1B,mEAAsC,CAAA;IACtC,uEAA0C,CAAA;IAC1C,8DAAiC,CAAA;IACjC,gEAAmC,CAAA;IACnC,qDAAwB,CAAA;AAC1B,CAAC,EAPW,yBAAyB,GAAzB,iCAAyB,KAAzB,iCAAyB,QAOpC;AAOD;;;;;;;;;;GAUG;AACH,MAAsB,qBAAsB,SAAQ,gBAAgB;IAGlE;;;;;;OAMG;IACH,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC;IAED;OACG;IACI,UAAU,KAAW,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IAElD,sDAAsD;IAC/C,YAAY,KAAW,CAAC;IAE/B,6CAA6C;IACtC,uBAAuB,KAAW,CAAC;IAE1C,uCAAuC;IAChC,iBAAiB,KAAW,CAAC;IAEpC;OACG;IACH,IAAW,SAAS,KAAa,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAMpD;OACG;IACH,IAAW,OAAO,KAAoB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;CAClE;AAvCD,sDAuCC","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 ConfigurableUi\r\n */\r\n\r\n/** Interface for a ConfigurableUi element\r\n * @public\r\n */\r\nexport interface ConfigurableUiElement {\r\n  uniqueId: string;\r\n  classId: string;\r\n  name: string;\r\n}\r\n\r\n/** Information for creating a ConfigurableUi element\r\n * @public\r\n */\r\nexport class ConfigurableCreateInfo {\r\n  constructor(public readonly classId: string,\r\n    public readonly uniqueId: string,\r\n    public readonly id: string) {\r\n  }\r\n}\r\n\r\n/** The base class for all ConfigurableUi elements\r\n * @public\r\n */\r\nexport class ConfigurableBase implements ConfigurableUiElement {\r\n  private _uniqueId: string;\r\n  private _classId: string;\r\n  private _name: string;\r\n  protected _appDataOptions: any;\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    this._uniqueId = info.uniqueId;\r\n    this._classId = info.classId;\r\n    this._name = (options && options.hasOwnProperty(\"name\")) ? options.name : info.uniqueId;\r\n    this._appDataOptions = options;\r\n  }\r\n\r\n  /** @internal */\r\n  public get uniqueId(): string { return this._uniqueId; }\r\n\r\n  /** allow options set via appData to be seen by API calls */\r\n  public get applicationData(): any { return this._appDataOptions; }\r\n\r\n  /** Gets the class Id of configurable element */\r\n  public get classId(): string { return this._classId; }\r\n\r\n  /** Get internal name of configurable element. If no name is defined in configuration\r\n   * then the name will match the UniqueId.\r\n   */\r\n  public get name(): string { return this._name; }\r\n}\r\n\r\n/** The type of the ConfigurableUiControl.\r\n * @public\r\n */\r\nexport enum ConfigurableUiControlType {\r\n  Content = \"ContentControl\",\r\n  NavigationAid = \"NavigationAidControl\",\r\n  StatusBarWidget = \"StatusBarWidgetControl\",\r\n  ToolUiProvider = \"ToolUiProvider\",\r\n  Viewport = \"ViewportContentControl\",\r\n  Widget = \"WidgetControl\",\r\n}\r\n\r\n/** Prototype for ConfigurableUiControl constructor\r\n * @public\r\n */\r\nexport type ConfigurableUiControlConstructor = new (info: ConfigurableCreateInfo, options: any) => ConfigurableUiElement;\r\n\r\n/** The abstract base class for all Frontstage controls.\r\n * @public\r\n *\r\n * @note This is an abstract class which should not be derived from by the applications.\r\n * Instead, applications should derive from one of\r\n * [[ContentControl]],\r\n * [[ViewportContentControl]],\r\n * [[WidgetControl]],\r\n * [[StatusBarWidgetControl]] or\r\n * [[NavigationAidControl]].\r\n */\r\nexport abstract class ConfigurableUiControl extends ConfigurableBase {\r\n  private _cid: string;\r\n\r\n  /** Creates an instance of ConfigurableUiControl.\r\n   * @param info         An object that the subclass must pass to this base class.\r\n   * @param options      Options provided to the control\r\n   * @note Subclasses must pass all arguments to the base class and not add themselves\r\n   * to any container - the control is added automatically by the [[FrontstageComposer]].\r\n   * @protected\r\n   */\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this._cid = info.id;\r\n  }\r\n\r\n  /** @internal\r\n   */\r\n  public initialize(): void { this.onInitialize(); }\r\n\r\n  /** Called to initialize the ConfigurableUiControl. */\r\n  public onInitialize(): void { }\r\n\r\n  /** Called when Frontstage is deactivated. */\r\n  public onFrontstageDeactivated(): void { }\r\n\r\n  /** Called when Frontstage is ready. */\r\n  public onFrontstageReady(): void { }\r\n\r\n  /** Returns the ID of this ConfigurableUiControl.\r\n   */\r\n  public get controlId(): string { return this._cid; }\r\n\r\n  /** Get the type of this control.\r\n   */\r\n  public abstract getType(): ConfigurableUiControlType;\r\n\r\n  /** Returns a promise that resolves when the control is ready for usage.\r\n   */\r\n  public get isReady(): Promise<void> { return Promise.resolve(); }\r\n}\r\n"]}
+{"version":3,"file":"ConfigurableUiControl.js","sourceRoot":"","sources":["../../../../src/appui-react/configurableui/ConfigurableUiControl.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAWH;;GAEG;AACH,MAAa,sBAAsB;IACjC,YAA4B,OAAe,EACzB,QAAgB,EAChB,EAAU;QAFA,YAAO,GAAP,OAAO,CAAQ;QACzB,aAAQ,GAAR,QAAQ,CAAQ;QAChB,OAAE,GAAF,EAAE,CAAQ;IAC5B,CAAC;CACF;AALD,wDAKC;AAED;;GAEG;AACH,MAAa,gBAAgB;IAM3B,YAAY,IAA4B,EAAE,OAAY;QACpD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxF,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IACjC,CAAC;IAED,gBAAgB;IAChB,IAAW,QAAQ,KAAa,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAExD,4DAA4D;IAC5D,IAAW,eAAe,KAAU,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,gDAAgD;IAChD,IAAW,OAAO,KAAa,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtD;;OAEG;IACH,IAAW,IAAI,KAAa,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;CACjD;AA1BD,4CA0BC;AAED;;GAEG;AACH,IAAY,yBAOX;AAPD,WAAY,yBAAyB;IACnC,uDAA0B,CAAA;IAC1B,mEAAsC,CAAA;IACtC,uEAA0C,CAAA;IAC1C,8DAAiC,CAAA;IACjC,gEAAmC,CAAA;IACnC,qDAAwB,CAAA;AAC1B,CAAC,EAPW,yBAAyB,GAAzB,iCAAyB,KAAzB,iCAAyB,QAOpC;AAOD;;;;;;;;;;GAUG;AACH,MAAsB,qBAAsB,SAAQ,gBAAgB;IAGlE;;;;;;OAMG;IACH,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC;IAED;OACG;IACI,UAAU,KAAW,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IAElD,sDAAsD;IAC/C,YAAY,KAAW,CAAC;IAE/B,6CAA6C;IACtC,uBAAuB,KAAW,CAAC;IAE1C,uCAAuC;IAChC,iBAAiB,KAAW,CAAC;IAEpC;OACG;IACH,IAAW,SAAS,KAAa,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAMpD;OACG;IACH,IAAW,OAAO,KAAoB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;CAClE;AAvCD,sDAuCC","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 ConfigurableUi\r\n */\r\n\r\n/** Interface for a ConfigurableUi element\r\n * @public\r\n */\r\nexport interface ConfigurableUiElement {\r\n  uniqueId: string;\r\n  classId: string;\r\n  name: string;\r\n}\r\n\r\n/** Information for creating a ConfigurableUi element\r\n * @public\r\n */\r\nexport class ConfigurableCreateInfo {\r\n  constructor(public readonly classId: string,\r\n    public readonly uniqueId: string,\r\n    public readonly id: string) {\r\n  }\r\n}\r\n\r\n/** The base class for all ConfigurableUi elements\r\n * @public\r\n */\r\nexport class ConfigurableBase implements ConfigurableUiElement {\r\n  private _uniqueId: string;\r\n  private _classId: string;\r\n  private _name: string;\r\n  protected _appDataOptions: any;\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    this._uniqueId = info.uniqueId;\r\n    this._classId = info.classId;\r\n    this._name = (options && options.hasOwnProperty(\"name\")) ? options.name : info.uniqueId;\r\n    this._appDataOptions = options;\r\n  }\r\n\r\n  /** @internal */\r\n  public get uniqueId(): string { return this._uniqueId; }\r\n\r\n  /** allow options set via appData to be seen by API calls */\r\n  public get applicationData(): any { return this._appDataOptions; }\r\n\r\n  /** Gets the class Id of configurable element */\r\n  public get classId(): string { return this._classId; }\r\n\r\n  /** Get internal name of configurable element. If no name is defined in configuration\r\n   * then the name will match the UniqueId.\r\n   */\r\n  public get name(): string { return this._name; }\r\n}\r\n\r\n/** The type of the ConfigurableUiControl.\r\n * @public\r\n */\r\nexport enum ConfigurableUiControlType {\r\n  Content = \"ContentControl\",\r\n  NavigationAid = \"NavigationAidControl\",\r\n  StatusBarWidget = \"StatusBarWidgetControl\",\r\n  ToolUiProvider = \"ToolUiProvider\",\r\n  Viewport = \"ViewportContentControl\",\r\n  Widget = \"WidgetControl\",\r\n}\r\n\r\n/** Prototype for ConfigurableUiControl constructor\r\n * @public\r\n */\r\nexport type ConfigurableUiControlConstructor = new (info: ConfigurableCreateInfo, options: any) => ConfigurableUiElement;\r\n\r\n/** The abstract base class for all Frontstage controls.\r\n * @public\r\n *\r\n * @note This is an abstract class which should not be derived from by the applications.\r\n * Instead, applications should derive from one of\r\n * [[ContentControl]],\r\n * [[ViewportContentControl]],\r\n * [[WidgetControl]],\r\n * [[StatusBarWidgetControl]] or\r\n * [[NavigationAidControl]].\r\n */\r\nexport abstract class ConfigurableUiControl extends ConfigurableBase {\r\n  private _cid: string;\r\n\r\n  /** Creates an instance of ConfigurableUiControl.\r\n   * @param info         An object that the subclass must pass to this base class.\r\n   * @param options      Options provided to the control\r\n   * @note Subclasses must pass all arguments to the base class and not add themselves\r\n   * to any container - the control is added automatically.\r\n   * @protected\r\n   */\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this._cid = info.id;\r\n  }\r\n\r\n  /** @internal\r\n   */\r\n  public initialize(): void { this.onInitialize(); }\r\n\r\n  /** Called to initialize the ConfigurableUiControl. */\r\n  public onInitialize(): void { }\r\n\r\n  /** Called when Frontstage is deactivated. */\r\n  public onFrontstageDeactivated(): void { }\r\n\r\n  /** Called when Frontstage is ready. */\r\n  public onFrontstageReady(): void { }\r\n\r\n  /** Returns the ID of this ConfigurableUiControl.\r\n   */\r\n  public get controlId(): string { return this._cid; }\r\n\r\n  /** Get the type of this control.\r\n   */\r\n  public abstract getType(): ConfigurableUiControlType;\r\n\r\n  /** Returns a promise that resolves when the control is ready for usage.\r\n   */\r\n  public get isReady(): Promise<void> { return Promise.resolve(); }\r\n}\r\n"]}

package/lib/cjs/appui-react/configurableui/configurableui.scss

@@ -5,7 +5,6 @@
 @import "~@itwin/core-react/lib/cjs/core-react/base/base";
 @import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/itwinui-overrides";
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 @import "~@itwin/core-react/lib/cjs/core-react/style/variables";
 @import "~@itwin/core-react/lib/cjs/core-react/z-index";
@@ -74,5 +73,3 @@
 .uifw-app-button-small {
   margin-bottom: 6px;
 }
-
-@include itwinui-style-overrides;

package/lib/cjs/appui-react/content/ContentLayout.scss

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/base/base";
 @import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
 
 $resizer-size: 6px;
 $resizer-size-large: 14px;
@@ -22,13 +21,14 @@ $resizer-size-large: 14px;
   }
 
   .Resizer {
-    background: rgb(180, 180, 180);
+    background-color: var(--iui-color-border);
     box-sizing: border-box;
     background-clip: padding-box;
     margin: 0;
+    transition: all var(--iui-duration-1) ease;
 
     &:hover {
-      transition: all 2s ease;
+      background-color: var(--iui-color-border-accent);
     }
 
     &.horizontal {
@@ -89,7 +89,7 @@ div.uifw-contentlayout-full-size div.SplitPane div.Pane {
     pointer-events: none;
 
     &.uifw-contentlayout-overlay-active {
-      border-color: $uicore-orange;
+      border-color: var(--iui-color-border-warning);
     }
 
     &.uifw-contentlayout-overlay-inactive {

package/lib/cjs/appui-react/content/DefaultViewOverlay.scss

@@ -2,21 +2,23 @@
 * 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/z-index";
 
 // 40px is used to ensure scrubber is not drawn behind a widget tab
+
+$uifw-view-overlay-indent: calc(var(--iui-size-l) * 2);
+
 .uifw-view-overlay {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: calc(100% - 80px);
+  width: calc(100% - #{$uifw-view-overlay-indent} * 2);
   height: auto;
   position: absolute;
-  bottom: 10px;
-  left: 40px;
-  right: 40px;
+  bottom: var(--iui-size-s);
+  left: $uifw-view-overlay-indent;
+  right: $uifw-view-overlay-indent;
   pointer-events: none;
   @include uicore-z-index(view-overlay);
 }
@@ -30,11 +32,12 @@ $widget-transparency: 0.9;
   width: 80%;
   max-width: 1000px;
   height: auto;
-  background: $buic-background-dialog;
-  border: 1px solid $buic-background-dialog-stroke;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border);
   border-radius: var(--iui-border-radius-1);
   // overflow: hidden;
   opacity: $widget-transparency;
+  transition: opacity var(--iui-duration-1) ease;
   pointer-events: auto;
 
   &:hover {

package/lib/cjs/appui-react/content/FloatingViewportContent.d.ts

@@ -26,15 +26,7 @@ export interface FloatingViewportContentWrapperProps {
 /** @alpha */
 export declare function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps): JSX.Element;
 /** @alpha */
-export interface UseFloatingViewportArgs {
-    /** viewport/content control uniqueId */
-    contentId: string;
-    /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */
-    initialViewState: ViewStateProp;
-}
-/** @alpha */
-export declare function useFloatingViewport(args: UseFloatingViewportArgs): {
-    viewportRef: (v: ScreenViewport) => void;
-    viewState: import("@itwin/core-frontend").ViewState;
+export declare function useFloatingViewport(args: FloatingViewportContentProps): {
+    viewportControl: JSX.Element;
 };
 //# sourceMappingURL=FloatingViewportContent.d.ts.map

package/lib/cjs/appui-react/content/FloatingViewportContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAqB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAMlF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,YAAY;AACZ,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eAmB1E;AAED,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,mCAAmC,eAM/F;AAED,aAAa;AACb,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;CACjC;AAED,aAAa;AACb,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB;qBAMrB,cAAc;;EAsCzD"}
+{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAqB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAMlF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,YAAY;AACZ,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eAO1E;AAED,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,mCAAmC,eAM/F;AAED,aAAa;AACb,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,4BAA4B;;EA2DrE"}

package/lib/cjs/appui-react/content/FloatingViewportContent.js

@@ -13,18 +13,12 @@ const core_frontend_1 = require("@itwin/core-frontend");
 const imodel_components_react_1 = require("@itwin/imodel-components-react");
 const ViewportContentControl_1 = require("./ViewportContentControl");
 const ContentLayout_1 = require("./ContentLayout");
-const core_react_1 = require("@itwin/core-react");
 const UiFramework_1 = require("../UiFramework");
+const core_react_1 = require("@itwin/core-react");
 /** @beta */
 function FloatingViewportContent(props) {
-    const { contentId, initialViewState, viewportRef, onContextMenu } = props;
-    const { viewState, viewportRef: floatingViewportRef } = useFloatingViewport({
-        contentId,
-        initialViewState,
-    });
-    const refs = (0, core_react_1.useRefs)(viewportRef, floatingViewportRef);
-    return (React.createElement(FloatingViewportContentWrapper, null,
-        React.createElement(imodel_components_react_1.ViewportComponent, { key: contentId, imodel: viewState.iModel, viewState: viewState, controlId: contentId, onContextMenu: onContextMenu, viewportRef: refs })));
+    const { viewportControl } = useFloatingViewport(props);
+    return (React.createElement(FloatingViewportContentWrapper, null, viewportControl));
 }
 exports.FloatingViewportContent = FloatingViewportContent;
 /** @alpha */
@@ -35,13 +29,18 @@ function FloatingViewportContentWrapper({ children }) {
 exports.FloatingViewportContentWrapper = FloatingViewportContentWrapper;
 /** @alpha */
 function useFloatingViewport(args) {
-    const { contentId, initialViewState } = args;
+    const { contentId, initialViewState, onContextMenu, viewportRef } = args;
     const [viewport, setViewport] = React.useState();
     const contentControl = React.useRef();
     const viewState = React.useMemo(() => typeof initialViewState === "function" ? initialViewState() : initialViewState, [initialViewState]);
-    const viewportRef = React.useCallback((v) => {
+    const ref = React.useCallback((v) => {
         setViewport(v);
     }, []);
+    const refs = (0, core_react_1.useRefs)(ref, viewportRef);
+    const viewportControl = React.useMemo(() => {
+        const node = React.createElement(imodel_components_react_1.ViewportComponent, { key: contentId, imodel: viewState.iModel, viewState: viewState, controlId: contentId, onContextMenu: onContextMenu, viewportRef: refs });
+        return node;
+    }, [refs, onContextMenu, viewState, contentId]);
     React.useEffect(() => {
         if (!contentControl.current) {
             contentControl.current = new ViewportContentControl_1.FloatingViewportContentControl(contentId, contentId, null);
@@ -57,9 +56,12 @@ function useFloatingViewport(args) {
     React.useEffect(() => {
         if (viewport && contentControl.current) {
             contentControl.current.viewport = viewport;
+            if (null === contentControl.current.reactNode) {
+                contentControl.current.reactNode = viewportControl;
+            }
             void contentControl.current.viewport.changeView(viewState);
         }
-    }, [viewState, viewport]);
+    }, [viewState, viewport, viewportControl]);
     React.useEffect(() => {
         const onViewClose = (vp) => {
             var _a;
@@ -71,8 +73,7 @@ function useFloatingViewport(args) {
         return core_frontend_1.IModelApp.viewManager.onViewClose.addListener(onViewClose);
     }, []);
     return {
-        viewportRef,
-        viewState,
+        viewportControl,
     };
 }
 exports.useFloatingViewport = useFloatingViewport;

package/lib/cjs/appui-react/content/FloatingViewportContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAiE;AACjE,4EAAkF;AAClF,qEAA0E;AAC1E,mDAAiD;AACjD,kDAA4C;AAC5C,gDAA6C;AAgB7C,YAAY;AACZ,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,CAAC;QAC1E,SAAS;QACT,gBAAgB;KACjB,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;IACvD,OAAO,CACL,oBAAC,8BAA8B;QAC7B,oBAAC,2CAAiB,IAChB,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,IAAI,GACjB,CAC6B,CAClC,CAAC;AACJ,CAAC;AAnBD,0DAmBC;AAOD,aAAa;AACb,SAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAuC;IAC9F,OAAO,CACL,6BAAK,WAAW,EAAE,yBAAW,CAAC,UAAU,CAAC,sBAAsB,EAAE,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE;QACrJ,oBAAC,8BAAc,IAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAI,CAClF,CACP,CAAC;AACJ,CAAC;AAND,wEAMC;AAUD,aAAa;AACb,SAAgB,mBAAmB,CAAC,IAA6B;IAC/D,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,EAA8B,CAAC;IAC7E,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,EAA8C,CAAC;IAElF,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC1I,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAiB,EAAE,EAAE;QAC1D,WAAW,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC3B,cAAc,CAAC,OAAO,GAAG,IAAI,uDAA8B,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;YACxF,yBAAW,CAAC,OAAO,CAAC,yBAAyB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;SACvE;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,CAAC,OAAO,EAAE;gBAC1B,yBAAW,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;gBACvE,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;aACpC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,IAAI,cAAc,CAAC,OAAO,EAAE;YACtC,cAAc,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAC3C,KAAK,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;SAC5D;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,WAAW,GAAG,CAAC,EAAkB,EAAE,EAAE;;YACzC,IAAI,CAAA,MAAA,cAAc,CAAC,OAAO,0CAAE,QAAQ,MAAK,EAAE,EAAE;gBAC3C,yBAAW,CAAC,OAAO,CAAC,0BAA0B,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;gBACvE,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;aACpC;QACH,CAAC,CAAC;QACF,OAAO,yBAAS,CAAC,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC;AA5CD,kDA4CC","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 ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelApp, ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ViewportComponent, ViewStateProp } from \"@itwin/imodel-components-react\";\r\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\r\nimport { ContentWrapper } from \"./ContentLayout\";\r\nimport { useRefs } from \"@itwin/core-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/**\r\n * @beta\r\n */\r\nexport interface FloatingViewportContentProps {\r\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\r\n  onContextMenu?: (e: React.MouseEvent) => boolean;\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n  /** Function to get a reference to the ScreenViewport */\r\n  viewportRef?: React.Ref<ScreenViewport>;\r\n}\r\n\r\n/** @beta */\r\nexport function FloatingViewportContent(props: FloatingViewportContentProps) {\r\n  const { contentId, initialViewState, viewportRef, onContextMenu } = props;\r\n  const { viewState, viewportRef: floatingViewportRef } = useFloatingViewport({\r\n    contentId,\r\n    initialViewState,\r\n  });\r\n  const refs = useRefs(viewportRef, floatingViewportRef);\r\n  return (\r\n    <FloatingViewportContentWrapper>\r\n      <ViewportComponent\r\n        key={contentId}\r\n        imodel={viewState.iModel}\r\n        viewState={viewState}\r\n        controlId={contentId}\r\n        onContextMenu={onContextMenu}\r\n        viewportRef={refs}\r\n      />\r\n    </FloatingViewportContentWrapper>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport interface FloatingViewportContentWrapperProps {\r\n  readonly children?: React.ReactNode;\r\n}\r\n\r\n/** @alpha */\r\nexport function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps) {\r\n  return (\r\n    <div onMouseMove={UiFramework.visibility.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\r\n      <ContentWrapper content={children} style={{ height: \"100%\", position: \"relative\" }} />\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport interface UseFloatingViewportArgs {\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n}\r\n\r\n/** @alpha */\r\nexport function useFloatingViewport(args: UseFloatingViewportArgs) {\r\n  const { contentId, initialViewState } = args;\r\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\r\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\r\n\r\n  const viewState = React.useMemo(() => typeof initialViewState === \"function\" ? initialViewState() : initialViewState, [initialViewState]);\r\n  const viewportRef = React.useCallback((v: ScreenViewport) => {\r\n    setViewport(v);\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    if (!contentControl.current) {\r\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\r\n      UiFramework.content.addFloatingContentControl(contentControl.current);\r\n    }\r\n    return () => {\r\n      if (contentControl.current) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n  }, [contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (viewport && contentControl.current) {\r\n      contentControl.current.viewport = viewport;\r\n      void contentControl.current.viewport.changeView(viewState);\r\n    }\r\n  }, [viewState, viewport]);\r\n\r\n  React.useEffect(() => {\r\n    const onViewClose = (vp: ScreenViewport) => {\r\n      if (contentControl.current?.viewport === vp) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\r\n  }, []);\r\n\r\n  return {\r\n    viewportRef,\r\n    viewState,\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.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 ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelApp, ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ViewportComponent, ViewStateProp } from \"@itwin/imodel-components-react\";\r\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\r\nimport { ContentWrapper } from \"./ContentLayout\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { useRefs } from \"@itwin/core-react\";\r\n\r\n/**\r\n * @beta\r\n */\r\nexport interface FloatingViewportContentProps {\r\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\r\n  onContextMenu?: (e: React.MouseEvent) => boolean;\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n  /** Function to get a reference to the ScreenViewport */\r\n  viewportRef?: React.Ref<ScreenViewport>;\r\n}\r\n\r\n/** @beta */\r\nexport function FloatingViewportContent(props: FloatingViewportContentProps) {\r\n  const { viewportControl } = useFloatingViewport(props);\r\n  return (\r\n    <FloatingViewportContentWrapper>\r\n      {viewportControl}\r\n    </FloatingViewportContentWrapper>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport interface FloatingViewportContentWrapperProps {\r\n  readonly children?: React.ReactNode;\r\n}\r\n\r\n/** @alpha */\r\nexport function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps) {\r\n  return (\r\n    <div onMouseMove={UiFramework.visibility.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\r\n      <ContentWrapper content={children} style={{ height: \"100%\", position: \"relative\" }} />\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport function useFloatingViewport(args: FloatingViewportContentProps) {\r\n  const { contentId, initialViewState, onContextMenu, viewportRef } = args;\r\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\r\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\r\n\r\n  const viewState = React.useMemo(() => typeof initialViewState === \"function\" ? initialViewState() : initialViewState, [initialViewState]);\r\n  const ref = React.useCallback((v: ScreenViewport) => {\r\n    setViewport(v);\r\n  }, []);\r\n\r\n  const refs = useRefs(ref, viewportRef);\r\n  const viewportControl = React.useMemo(() => {\r\n    const node = <ViewportComponent\r\n      key={contentId}\r\n      imodel={viewState.iModel}\r\n      viewState={viewState}\r\n      controlId={contentId}\r\n      onContextMenu={onContextMenu}\r\n      viewportRef={refs}\r\n    />;\r\n    return node;\r\n  }, [refs, onContextMenu, viewState, contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (!contentControl.current) {\r\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\r\n      UiFramework.content.addFloatingContentControl(contentControl.current);\r\n    }\r\n    return () => {\r\n      if (contentControl.current) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n  }, [contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (viewport && contentControl.current) {\r\n      contentControl.current.viewport = viewport;\r\n      if (null === contentControl.current.reactNode) {\r\n        contentControl.current.reactNode = viewportControl;\r\n      }\r\n      void contentControl.current.viewport.changeView(viewState);\r\n    }\r\n  }, [viewState, viewport, viewportControl]);\r\n\r\n  React.useEffect(() => {\r\n    const onViewClose = (vp: ScreenViewport) => {\r\n      if (contentControl.current?.viewport === vp) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\r\n  }, []);\r\n\r\n  return {\r\n    viewportControl,\r\n  };\r\n}\r\n"]}

package/lib/cjs/appui-react/cursor/cursorpopup/CursorPopup.scss

@@ -12,18 +12,18 @@
     width: $uifw-popup-border-width;
   }
 
-  background-color: rgba($buic-background-2-rgb, $uifw-popup-opacity);
+  background-color: hsl(var(--iui-color-background-hsl) / $uifw-popup-opacity);
   position: fixed;
   height: fit-content;
   width: fit-content;
   transition: opacity 500ms;
 
-  >.uifw-cursorpopup-title {
+  > .uifw-cursorpopup-title {
     min-height: $uifw-popup-title-bar-min-height;
     opacity: $uifw-popup-opacity;
   }
 
-  >.uifw-cursorpopup-content {
+  > .uifw-cursorpopup-content {
     padding: $uifw-popup-content-padding;
   }
 

package/lib/cjs/appui-react/cursor/cursorprompt/CursorPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CursorPrompt.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorprompt/CursorPrompt.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKrE,gBAAgB;AAChB,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAAmB;gBAEvB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;IAMtC,OAAO,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,GAAE,UAA6B,EAAE,gBAAgB,GAAE,gBAA+C;IAyBrL,+BAA+B;IACxB,KAAK,CAAC,OAAO,EAAE,OAAO;IAK7B,OAAO,CAAC,iBAAiB,CAKvB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;CAEH"}
+{"version":3,"file":"CursorPrompt.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorprompt/CursorPrompt.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMrE,gBAAgB;AAChB,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,QAAQ,CAAmB;gBAEvB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;IAMtC,OAAO,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,GAAE,UAA6B,EAAE,gBAAgB,GAAE,gBAA+C;IAyBrL,+BAA+B;IACxB,KAAK,CAAC,OAAO,EAAE,OAAO;IAK7B,OAAO,CAAC,iBAAiB,CAKvB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;CAEH"}

package/lib/cjs/appui-react/cursor/cursorprompt/CursorPrompt.js

@@ -12,6 +12,7 @@ require("./CursorPrompt.scss");
 const React = require("react");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 const CursorInformation_1 = require("../CursorInformation");
 const CursorPopupManager_1 = require("../cursorpopup/CursorPopupManager");
 /** @internal */
@@ -48,7 +49,7 @@ class CursorPrompt {
         const promptElement = (React.createElement("div", { className: "uifw-cursor-prompt" },
             toolIconSpec && React.createElement("span", { className: "uifw-cursor-prompt-icon" },
                 React.createElement(core_react_1.Icon, { iconSpec: toolIconSpec })),
-            React.createElement(core_react_1.BodyText, { className: "uifw-cursor-prompt-text" }, instruction.text)));
+            React.createElement(itwinui_react_1.Text, { variant: "body", className: "uifw-cursor-prompt-text" }, instruction.text)));
         this._startCursorPopup(promptElement);
         this._timer.setOnExecute(() => this._endCursorPopup(this._fadeOut));
         this._timer.delay = this._timeOut;

package/lib/cjs/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/cjs/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/cjs/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/cjs/appui-react/feedback/ValidationTextbox.js

@@ -13,6 +13,7 @@ const classnames_1 = require("classnames");
 const React = require("react");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const MessageManager_1 = require("../messages/MessageManager");
+const itwinui_react_1 = require("@itwin/itwinui-react");
 /** Enum for Input Status used in [[ValidationTextbox]]
  * @alpha
  */
@@ -70,7 +71,7 @@ class ValidationTextbox extends React.PureComponent {
         const validClassNames = (0, classnames_1.default)("ValidationTextbox-input");
         const invalidClassNames = (0, classnames_1.default)("ValidationTextbox-input", "ValidationTextbox-invalid");
         return (React.createElement("div", { className: (0, classnames_1.default)("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(itwinui_react_1.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/cjs/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":"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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\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/cjs/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/cjs/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/cjs/appui-react/frontstage/ModalFrontstage.js

@@ -11,9 +11,11 @@ exports.ModalFrontstage = void 0;
 require("./ModalFrontstage.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
+const core_react_1 = require("@itwin/core-react");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
 const UiFramework_1 = require("../UiFramework");
 const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /**
  * ModalFrontstage React component
  * @public
@@ -33,8 +35,8 @@ 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(appui_layout_react_1.BackButton, { className: "nz-toolbar-button-app", onClick: this._onGoBack, icon: React.createElement("i", { className: "icon icon-progress-backward" }), title: this._backButtonTitle }),
-                    React.createElement(itwinui_react_1.Headline, null, this.props.title),
+                    React.createElement(appui_layout_react_1.BackButton, { className: "nz-toolbar-button-app", onClick: this._onGoBack, icon: React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgProgressBackwardCircular, null) }), title: this._backButtonTitle }),
+                    React.createElement(itwinui_react_1.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/cjs/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,kCAAgC;AAChC,2CAAoC;AACpC,+BAA+B;AAE/B,kEAAuD;AACvD,gDAA6C;AAC7C,wDAAgD;AAqBhD;;;GAGG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IAGxE,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,qBAAgB,GAAG,yBAAW,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,IAAA,oBAAU,EAC3B,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,+BAAU,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,wBAAQ,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;AA5CD,0CA4CC","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,kCAAgC;AAChC,2CAAoC;AACpC,+BAA+B;AAC/B,kDAAsD;AACtD,kEAAuD;AACvD,gDAA6C;AAC7C,wDAA4C;AAC5C,oEAAyE;AAqBzE;;;GAGG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,SAA+B;IAGxE,YAAY,KAA2B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,qBAAgB,GAAG,yBAAW,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,IAAA,oBAAU,EAC3B,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,+BAAU,IAAC,SAAS,EAAC,uBAAuB,EAC3C,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EACF,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,iDAA2B,OAAG,GAAI,EAErD,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAC5B;oBACF,oBAAC,oBAAI,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;AA5CD,0CA4CC","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/cjs/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);
 }