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

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

@@ -18,6 +18,7 @@ const core_react_1 = require("@itwin/core-react");
 const UiFramework_1 = require("../UiFramework");
 const SyncUiEventDispatcher_1 = require("../syncui/SyncUiEventDispatcher");
 const StageUsage_1 = require("./StageUsage");
+const BackstageItemUtilities_1 = require("../backstage/BackstageItemUtilities");
 function ModalSettingsStage({ initialSettingsTabId }) {
     var _a, _b, _c, _d;
     const id = (_b = (_a = UiFramework_1.UiFramework.frontstages.activeFrontstageDef) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "none";
@@ -58,8 +59,7 @@ class SettingsModalFrontstage {
         return (React.createElement(ModalSettingsStage, { initialSettingsTabId: this.initialSettingsTabId }));
     }
     static getBackstageActionItem(groupPriority, itemPriority) {
-        return appui_abstract_1.BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => UiFramework_1.UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage()), // eslint-disable-line deprecation/deprecation
-        UiFramework_1.UiFramework.translate("settings.settingsStageLabel"), undefined, appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(settings_svg_1.default), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });
+        return BackstageItemUtilities_1.BackstageItemUtilities.createActionItem(SettingsModalFrontstage.id, groupPriority, itemPriority, () => UiFramework_1.UiFramework.frontstages.openModalFrontstage(new SettingsModalFrontstage()), UiFramework_1.UiFramework.translate("settings.settingsStageLabel"), undefined, appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(settings_svg_1.default), { isHidden: SettingsModalFrontstage.noSettingsAvailable() });
     }
     static showSettingsStage(initialSettingsTab) {
         if (UiFramework_1.UiFramework.settingsManager.providers.length) {

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

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

@@ -10,6 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedFrontstage = void 0;
 const CommandItemDef_1 = require("../shared/CommandItemDef");
 const UiFramework_1 = require("../UiFramework");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const progress_backward_svg_1 = require("@bentley/icons-generic/icons/progress-backward.svg");
 /**
  * Nested Frontstage related classes and commands
  * @public
@@ -19,7 +21,7 @@ class NestedFrontstage {
     static get backToPreviousFrontstageCommand() {
         return new CommandItemDef_1.CommandItemDef({
             commandId: "backToPreviousFrontstage",
-            iconSpec: "icon-progress-backward",
+            iconSpec: NestedFrontstage.iconSpec,
             labelKey: "UiFramework:commands.backToPreviousFrontstage",
             execute: async () => {
                 await UiFramework_1.UiFramework.frontstages.closeNestedFrontstage();
@@ -28,4 +30,5 @@ class NestedFrontstage {
     }
 }
 exports.NestedFrontstage = NestedFrontstage;
+NestedFrontstage.iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(progress_backward_svg_1.default);
 //# sourceMappingURL=NestedFrontstage.js.map

package/lib/cjs/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,6DAA0D;AAC1D,gDAA6C;AAE7C;;;GAGG;AACH,MAAa,gBAAgB;IAC3B,sDAAsD;IAC/C,MAAM,KAAK,+BAA+B;QAC/C,OAAO,IAAI,+BAAc,CAAC;YACxB,SAAS,EAAE,0BAA0B;YACrC,QAAQ,EAAE,wBAAwB;YAClC,QAAQ,EAAE,+CAA+C;YACzD,OAAO,EAAE,KAAK,IAAI,EAAE;gBAClB,MAAM,yBAAW,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACxD,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF;AAZD,4CAYC","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,6DAA0D;AAC1D,gDAA6C;AAC7C,0DAA0D;AAC1D,8FAA6F;AAE7F;;;GAGG;AACH,MAAa,gBAAgB;IAE3B,sDAAsD;IAC/C,MAAM,KAAK,+BAA+B;QAC/C,OAAO,IAAI,+BAAc,CAAC;YACxB,SAAS,EAAE,0BAA0B;YACrC,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;YACnC,QAAQ,EAAE,+CAA+C;YACzD,OAAO,EAAE,KAAK,IAAI,EAAE;gBAClB,MAAM,yBAAW,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;YACxD,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AAZH,4CAaC;AAZgB,yBAAQ,GAAG,kCAAiB,CAAC,0BAA0B,CAAC,+BAA2B,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/cjs/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/cjs/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/cjs/appui-react/frontstage/StageUsage.js

@@ -8,10 +8,17 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StageUsage = void 0;
-const appui_abstract_1 = require("@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
  */
-exports.StageUsage = appui_abstract_1.StageUsage; // eslint-disable-line @typescript-eslint/no-redeclare, deprecation/deprecation
+var StageUsage;
+(function (StageUsage) {
+    StageUsage["Private"] = "Private";
+    StageUsage["General"] = "General";
+    StageUsage["Redline"] = "Redline";
+    StageUsage["ViewOnly"] = "ViewOnly";
+    StageUsage["Edit"] = "Edit";
+    StageUsage["Settings"] = "Settings";
+})(StageUsage = exports.StageUsage || (exports.StageUsage = {}));
 //# sourceMappingURL=StageUsage.js.map

package/lib/cjs/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,0DAAqE;AAQrE;;;GAGG;AACU,QAAA,UAAU,GAAG,2BAAc,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,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,GAAV,kBAAU,KAAV,kBAAU,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/cjs/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/cjs/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/cjs/appui-react/frontstage/StandardFrontstageProvider.js

@@ -13,8 +13,8 @@ const ContentGroup_1 = require("../content/ContentGroup");
 const FrontstageProvider_1 = require("./FrontstageProvider");
 const ContentToolWidgetComposer_1 = require("../widgets/ContentToolWidgetComposer");
 const ViewToolWidgetComposer_1 = require("../widgets/ViewToolWidgetComposer");
-const StatusBarWidgetComposerControl_1 = require("../widgets/StatusBarWidgetComposerControl");
 const StagePanelDef_1 = require("../stagepanels/StagePanelDef");
+const StatusBarComposer_1 = require("../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).
@@ -38,18 +38,18 @@ class StandardFrontstageProvider extends FrontstageProvider_1.FrontstageProvider
             usage: this.props.usage,
             contentManipulation: {
                 id: `${this.props.id}-contentManipulationTools`,
-                element: React.createElement(ContentToolWidgetComposer_1.ContentToolWidgetComposer, { cornerButton: this.props.cornerButton }),
+                content: React.createElement(ContentToolWidgetComposer_1.ContentToolWidgetComposer, { cornerButton: this.props.cornerButton }),
             },
             viewNavigation: {
                 id: `${this.props.id}-viewNavigationTools`,
-                element: React.createElement(ViewToolWidgetComposer_1.ViewToolWidgetComposer, { hideNavigationAid: this.props.hideNavigationAid }),
+                content: React.createElement(ViewToolWidgetComposer_1.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_1.StatusBarWidgetComposerControl,
+                content: React.createElement(StatusBarComposer_1.StatusBarComposer, { items: [] }),
             },
             leftPanel: {
                 size: 300,

package/lib/cjs/appui-react/frontstage/StandardFrontstageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardFrontstageProvider.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StandardFrontstageProvider.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAE/B,0DAAgG;AAChG,6DAA0D;AAC1D,oFAAiF;AACjF,8EAA2E;AAC3E,8FAA2F;AAC3F,gEAA+D;AAsD/D;;;;GAIG;AACH,MAAa,0BAA2B,SAAQ,uCAAkB;IAChE,YAAoB,KAA8B;QAChD,KAAK,EAAE,CAAC;QADU,UAAK,GAAL,KAAK,CAAyB;IAElD,CAAC;IAED,IAAoB,EAAE;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACvB,CAAC;IAEe,gBAAgB;;QAC9B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,YAAY,mCAAoB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,2BAAY,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACpK,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;YACjB,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAAI,GAAG;YAClC,YAAY;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,mBAAmB,EAAE;gBACnB,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,2BAA2B;gBAC/C,OAAO,EAAE,oBAAC,qDAAyB,IAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GAAI;aAC9E;YACD,cAAc,EAAE;gBACd,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,sBAAsB;gBAC1C,OAAO,EAAE,oBAAC,+CAAsB,IAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,GAAI;aACrF;YACD,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;gBACtD,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,eAAe;aACpC;YACD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;gBAChD,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,YAAY;gBAChC,OAAO,EAAE,+DAA8B;aACxC;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,GAAG;gBACT,MAAM,EAAE,KAAK;gBACb,YAAY,EAAE,+BAAe,CAAC,SAAS;gBACvC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc;aAC7B;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,EAAE;gBACR,MAAM,EAAE,KAAK;gBACb,YAAY,EAAE,+BAAe,CAAC,SAAS;gBACvC,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;aAC5B;YACD,UAAU,EAAE;gBACV,YAAY,EAAE,+BAAe,CAAC,IAAI;gBAClC,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe;aAC9B;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,GAAG;gBACT,YAAY,EAAE,+BAAe,CAAC,IAAI;gBAClC,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB;aAC/B;SACF,CAAC;IACJ,CAAC;CACF;AAtDD,gEAsDC","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 * as React from \"react\";\r\nimport { StageUsage } from \"@itwin/appui-abstract\";\r\nimport { ContentGroup, ContentGroupProps, ContentGroupProvider } from \"../content/ContentGroup\";\r\nimport { FrontstageProvider } from \"./FrontstageProvider\";\r\nimport { ContentToolWidgetComposer } from \"../widgets/ContentToolWidgetComposer\";\r\nimport { ViewToolWidgetComposer } from \"../widgets/ViewToolWidgetComposer\";\r\nimport { StatusBarWidgetComposerControl } from \"../widgets/StatusBarWidgetComposerControl\";\r\nimport { StagePanelState } from \"../stagepanels/StagePanelDef\";\r\nimport { FrontstageConfig } from \"./FrontstageConfig\";\r\nimport { StagePanelConfig } from \"../stagepanels/StagePanelConfig\";\r\n\r\n/** Properties of a [[WidgetPanelProps]] component\r\n * @public\r\n */\r\nexport type WidgetPanelProps = Omit<StagePanelConfig, \"widgets\" | \"runtimeProps\" | \"header\" | \"allowedZones\" | \"panelZones\">;\r\n\r\n/**\r\n * Props for [[StandardFrontstageProvider]]\r\n * @public\r\n */\r\nexport interface StandardFrontstageProps {\r\n  /* unique stage id. To ensure uniqueness it is common practice to format id like `appName:stageId` */\r\n  id: string;\r\n  /* version id that is used to store state of stage */\r\n  version?: number;\r\n  // Usage of stage. To allow generic UiItemProvides to populate this stage set to `StageUsage.General`.\r\n  usage: StageUsage | string; // eslint-disable-line deprecation/deprecation\r\n  /** Definition of available content groups or a function that provides them */\r\n  contentGroupProps: ContentGroupProps | ContentGroupProvider;\r\n  /** Specify button to use to open backstage. Leave undefined for no backstage button.\r\n   * ```\r\n   * <BackstageAppButton icon={\"icon-bentley-systems\"} />\r\n   * ```\r\n   * Custom corner button definition\r\n   * ```\r\n   * const cornerButton = <BackstageAppButton icon={\"icon-bentley-systems\"}\r\n   *   label=\"Toggle Backstage display\",\r\n   *   execute={() => UiFramework.backstage.getBackstageToggleCommand().execute()} />;\r\n   * ```\r\n   */\r\n  cornerButton?: React.ReactNode;\r\n  /** Set to true if default Navigation aid is not desired */\r\n  hideNavigationAid?: boolean;\r\n  /** Set to true if no tool setting dock is needed. Typically only used in modal stages. */\r\n  hideToolSettings?: boolean;\r\n  /** Set to true if no status bar is needed in stage */\r\n  hideStatusBar?: boolean;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 300, pinned=false, defaultState:StagePanelState.Minimized} */\r\n  leftPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 90, pinned=false, defaultState:StagePanelState.Minimized} */\r\n  topPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 200, pinned=true, defaultState:StagePanelState.Open} */\r\n  rightPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 180, pinned=true, defaultState:StagePanelState.Open} */\r\n  bottomPanelProps?: WidgetPanelProps;\r\n}\r\n\r\n/**\r\n * FrontstageProvider that provides an \"empty\" stage. All tool buttons, statusbar items, and widgets must\r\n * be provided by one or more item providers, see [UiItemsProvider]($appui-abstract).\r\n * @public\r\n */\r\nexport class StandardFrontstageProvider extends FrontstageProvider {\r\n  constructor(private props: StandardFrontstageProps) {\r\n    super();\r\n  }\r\n\r\n  public override get id(): string {\r\n    return this.props.id;\r\n  }\r\n\r\n  public override frontstageConfig(): FrontstageConfig {\r\n    const contentGroup = (this.props.contentGroupProps instanceof ContentGroupProvider) ? this.props.contentGroupProps : new ContentGroup(this.props.contentGroupProps);\r\n    return {\r\n      id: this.props.id,\r\n      version: this.props.version ?? 1.0,\r\n      contentGroup,\r\n      usage: this.props.usage,\r\n      contentManipulation: {\r\n        id: `${this.props.id}-contentManipulationTools`,\r\n        element: <ContentToolWidgetComposer cornerButton={this.props.cornerButton} />,\r\n      },\r\n      viewNavigation: {\r\n        id: `${this.props.id}-viewNavigationTools`,\r\n        element: <ViewToolWidgetComposer hideNavigationAid={this.props.hideNavigationAid} />,\r\n      },\r\n      toolSettings: this.props.hideToolSettings ? undefined : {\r\n        id: `${this.props.id}-toolSettings`,\r\n      },\r\n      statusBar: this.props.hideStatusBar ? undefined : {\r\n        id: `${this.props.id}-statusBar`,\r\n        control: StatusBarWidgetComposerControl,\r\n      },\r\n      leftPanel: {\r\n        size: 300,\r\n        pinned: false,\r\n        defaultState: StagePanelState.Minimized,\r\n        ...this.props.leftPanelProps,\r\n      },\r\n      topPanel: {\r\n        size: 90,\r\n        pinned: false,\r\n        defaultState: StagePanelState.Minimized,\r\n        ...this.props.topPanelProps,\r\n      },\r\n      rightPanel: {\r\n        defaultState: StagePanelState.Open,\r\n        ...this.props.rightPanelProps,\r\n      },\r\n      bottomPanel: {\r\n        size: 180,\r\n        defaultState: StagePanelState.Open,\r\n        ...this.props.bottomPanelProps,\r\n      },\r\n    };\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"StandardFrontstageProvider.js","sourceRoot":"","sources":["../../../../src/appui-react/frontstage/StandardFrontstageProvider.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,0DAAgG;AAChG,6DAA0D;AAC1D,oFAAiF;AACjF,8EAA2E;AAC3E,gEAA+D;AAI/D,sEAAmE;AAoDnE;;;;GAIG;AACH,MAAa,0BAA2B,SAAQ,uCAAkB;IAChE,YAAoB,KAA8B;QAChD,KAAK,EAAE,CAAC;QADU,UAAK,GAAL,KAAK,CAAyB;IAElD,CAAC;IAED,IAAoB,EAAE;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACvB,CAAC;IAEe,gBAAgB;;QAC9B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,YAAY,mCAAoB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,2BAAY,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACpK,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;YACjB,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAAI,GAAG;YAClC,YAAY;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,mBAAmB,EAAE;gBACnB,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,2BAA2B;gBAC/C,OAAO,EAAE,oBAAC,qDAAyB,IAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GAAI;aAC9E;YACD,cAAc,EAAE;gBACd,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,sBAAsB;gBAC1C,OAAO,EAAE,oBAAC,+CAAsB,IAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,GAAI;aACrF;YACD,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;gBACtD,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,eAAe;aACpC;YACD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;gBAChD,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,YAAY;gBAChC,OAAO,EAAE,oBAAC,qCAAiB,IAAC,KAAK,EAAE,EAAE,GAAI;aAC1C;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,GAAG;gBACT,MAAM,EAAE,KAAK;gBACb,YAAY,EAAE,+BAAe,CAAC,SAAS;gBACvC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc;aAC7B;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,EAAE;gBACR,MAAM,EAAE,KAAK;gBACb,YAAY,EAAE,+BAAe,CAAC,SAAS;gBACvC,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;aAC5B;YACD,UAAU,EAAE;gBACV,YAAY,EAAE,+BAAe,CAAC,IAAI;gBAClC,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe;aAC9B;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,GAAG;gBACT,YAAY,EAAE,+BAAe,CAAC,IAAI;gBAClC,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB;aAC/B;SACF,CAAC;IACJ,CAAC;CACF;AAtDD,gEAsDC","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 * as React from \"react\";\r\nimport { ContentGroup, ContentGroupProps, ContentGroupProvider } from \"../content/ContentGroup\";\r\nimport { FrontstageProvider } from \"./FrontstageProvider\";\r\nimport { ContentToolWidgetComposer } from \"../widgets/ContentToolWidgetComposer\";\r\nimport { ViewToolWidgetComposer } from \"../widgets/ViewToolWidgetComposer\";\r\nimport { StagePanelState } from \"../stagepanels/StagePanelDef\";\r\nimport { FrontstageConfig } from \"./FrontstageConfig\";\r\nimport { StagePanelConfig } from \"../stagepanels/StagePanelConfig\";\r\nimport { StageUsage } from \"./StageUsage\";\r\nimport { StatusBarComposer } from \"../statusbar/StatusBarComposer\";\r\n\r\n/** Properties of a [[WidgetPanelProps]] component\r\n * @public\r\n */\r\nexport type WidgetPanelProps = Omit<StagePanelConfig, \"widgets\" | \"runtimeProps\" | \"header\" | \"allowedZones\" | \"panelZones\">;\r\n\r\n/**\r\n * Props for [[StandardFrontstageProvider]]\r\n * @public\r\n */\r\nexport interface StandardFrontstageProps {\r\n  /* unique stage id. To ensure uniqueness it is common practice to format id like `appName:stageId` */\r\n  id: string;\r\n  /* version id that is used to store state of stage */\r\n  version?: number;\r\n  // Usage of stage. To allow generic UiItemProvides to populate this stage set to `StageUsage.General`.\r\n  usage: StageUsage | string;\r\n  /** Definition of available content groups or a function that provides them */\r\n  contentGroupProps: ContentGroupProps | ContentGroupProvider;\r\n  /** Specify button to use to open backstage. Leave undefined for no backstage button.\r\n   * ```\r\n   * <BackstageAppButton icon={<SvgBentleySystems />} />\r\n   * ```\r\n   * Custom corner button definition\r\n   * ```\r\n   * const cornerButton = <BackstageAppButton icon={<SvgBentleySystems />}\r\n   *   label=\"Toggle Backstage display\",\r\n   *   execute={() => UiFramework.backstage.getBackstageToggleCommand().execute()} />;\r\n   * ```\r\n   */\r\n  cornerButton?: React.ReactNode;\r\n  /** Set to true if default Navigation aid is not desired */\r\n  hideNavigationAid?: boolean;\r\n  /** Set to true if no tool setting dock is needed. Typically only used in modal stages. */\r\n  hideToolSettings?: boolean;\r\n  /** Set to true if no status bar is needed in stage */\r\n  hideStatusBar?: boolean;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 300, pinned=false, defaultState:StagePanelState.Minimized} */\r\n  leftPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 90, pinned=false, defaultState:StagePanelState.Minimized} */\r\n  topPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 200, pinned=true, defaultState:StagePanelState.Open} */\r\n  rightPanelProps?: WidgetPanelProps;\r\n  /** Props used to set initial size and state of panel. Defaults to:\r\n   *  {size: 180, pinned=true, defaultState:StagePanelState.Open} */\r\n  bottomPanelProps?: WidgetPanelProps;\r\n}\r\n\r\n/**\r\n * FrontstageProvider that provides an \"empty\" stage. All tool buttons, statusbar items, and widgets must\r\n * be provided by one or more item providers, see [UiItemsProvider]($appui-abstract).\r\n * @public\r\n */\r\nexport class StandardFrontstageProvider extends FrontstageProvider {\r\n  constructor(private props: StandardFrontstageProps) {\r\n    super();\r\n  }\r\n\r\n  public override get id(): string {\r\n    return this.props.id;\r\n  }\r\n\r\n  public override frontstageConfig(): FrontstageConfig {\r\n    const contentGroup = (this.props.contentGroupProps instanceof ContentGroupProvider) ? this.props.contentGroupProps : new ContentGroup(this.props.contentGroupProps);\r\n    return {\r\n      id: this.props.id,\r\n      version: this.props.version ?? 1.0,\r\n      contentGroup,\r\n      usage: this.props.usage,\r\n      contentManipulation: {\r\n        id: `${this.props.id}-contentManipulationTools`,\r\n        content: <ContentToolWidgetComposer cornerButton={this.props.cornerButton} />,\r\n      },\r\n      viewNavigation: {\r\n        id: `${this.props.id}-viewNavigationTools`,\r\n        content: <ViewToolWidgetComposer hideNavigationAid={this.props.hideNavigationAid} />,\r\n      },\r\n      toolSettings: this.props.hideToolSettings ? undefined : {\r\n        id: `${this.props.id}-toolSettings`,\r\n      },\r\n      statusBar: this.props.hideStatusBar ? undefined : {\r\n        id: `${this.props.id}-statusBar`,\r\n        content: <StatusBarComposer items={[]} />,\r\n      },\r\n      leftPanel: {\r\n        size: 300,\r\n        pinned: false,\r\n        defaultState: StagePanelState.Minimized,\r\n        ...this.props.leftPanelProps,\r\n      },\r\n      topPanel: {\r\n        size: 90,\r\n        pinned: false,\r\n        defaultState: StagePanelState.Minimized,\r\n        ...this.props.topPanelProps,\r\n      },\r\n      rightPanel: {\r\n        defaultState: StagePanelState.Open,\r\n        ...this.props.rightPanelProps,\r\n      },\r\n      bottomPanel: {\r\n        size: 180,\r\n        defaultState: StagePanelState.Open,\r\n        ...this.props.bottomPanelProps,\r\n      },\r\n    };\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/hooks/useAvailableUiItemsProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAvailableUiItemsProviders.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/hooks/useAvailableUiItemsProviders.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,MAAM,EAAE,CAchE"}
+{"version":3,"file":"useAvailableUiItemsProviders.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/hooks/useAvailableUiItemsProviders.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,MAAM,EAAE,CAShE"}

package/lib/cjs/appui-react/hooks/useAvailableUiItemsProviders.js

@@ -9,21 +9,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAvailableUiItemsProviders = void 0;
 const react_1 = require("react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
+const UiItemsManager_1 = require("../ui-items-provider/UiItemsManager");
 /** React hook that maintains the number of available UiItemsProviders. This allows components to use it to refresh when a
  * UiItemsProviders is added or removed allowing the ui component to be re-rendered.
  * @internal
  */
 function useAvailableUiItemsProviders() {
-    const [uiItemsProviderIds, setUiItemsProviderIds] = (0, react_1.useState)(appui_abstract_1.UiItemsManager.registeredProviderIds); // eslint-disable-line deprecation/deprecation
+    const [uiItemsProviderIds, setUiItemsProviderIds] = (0, react_1.useState)(UiItemsManager_1.UiItemsManager.registeredProviderIds);
     (0, react_1.useEffect)(() => {
-        const handleUiProviderRegisteredEvent = () => {
-            setUiItemsProviderIds(appui_abstract_1.UiItemsManager.registeredProviderIds); // eslint-disable-line deprecation/deprecation
-        };
-        appui_abstract_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(handleUiProviderRegisteredEvent); // eslint-disable-line deprecation/deprecation
-        return () => {
-            appui_abstract_1.UiItemsManager.onUiProviderRegisteredEvent.removeListener(handleUiProviderRegisteredEvent); // eslint-disable-line deprecation/deprecation
-        };
+        return UiItemsManager_1.UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {
+            setUiItemsProviderIds(UiItemsManager_1.UiItemsManager.registeredProviderIds);
+        });
     }, []);
     return uiItemsProviderIds;
 }

package/lib/cjs/appui-react/hooks/useAvailableUiItemsProviders.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvailableUiItemsProviders.js","sourceRoot":"","sources":["../../../../src/appui-react/hooks/useAvailableUiItemsProviders.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA4C;AAC5C,0DAAuD;AAEvD;;;GAGG;AACH,SAAgB,4BAA4B;IAC1C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,+BAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC,8CAA8C;IAClJ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,+BAA+B,GAAG,GAAS,EAAE;YACjD,qBAAqB,CAAC,+BAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC,8CAA8C;QAC7G,CAAC,CAAC;QAEF,+BAAc,CAAC,2BAA2B,CAAC,WAAW,CAAC,+BAA+B,CAAC,CAAC,CAAC,8CAA8C;QACvI,OAAO,GAAG,EAAE;YACV,+BAAc,CAAC,2BAA2B,CAAC,cAAc,CAAC,+BAA+B,CAAC,CAAC,CAAC,8CAA8C;QAC5I,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AAdD,oEAcC","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 Hooks\r\n */\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { UiItemsManager } from \"@itwin/appui-abstract\";\r\n\r\n/** React hook that maintains the number of available UiItemsProviders. This allows components to use it to refresh when a\r\n * UiItemsProviders is added or removed allowing the ui component to be re-rendered.\r\n * @internal\r\n */\r\nexport function useAvailableUiItemsProviders(): readonly string[] {\r\n  const [uiItemsProviderIds, setUiItemsProviderIds] = useState(UiItemsManager.registeredProviderIds); // eslint-disable-line deprecation/deprecation\r\n  useEffect(() => {\r\n    const handleUiProviderRegisteredEvent = (): void => {\r\n      setUiItemsProviderIds(UiItemsManager.registeredProviderIds); // eslint-disable-line deprecation/deprecation\r\n    };\r\n\r\n    UiItemsManager.onUiProviderRegisteredEvent.addListener(handleUiProviderRegisteredEvent); // eslint-disable-line deprecation/deprecation\r\n    return () => {\r\n      UiItemsManager.onUiProviderRegisteredEvent.removeListener(handleUiProviderRegisteredEvent); // eslint-disable-line deprecation/deprecation\r\n    };\r\n  }, []);\r\n\r\n  return uiItemsProviderIds;\r\n}\r\n"]}
+{"version":3,"file":"useAvailableUiItemsProviders.js","sourceRoot":"","sources":["../../../../src/appui-react/hooks/useAvailableUiItemsProviders.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA4C;AAC5C,wEAAqE;AAErE;;;GAGG;AACH,SAAgB,4BAA4B;IAC1C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,+BAAc,CAAC,qBAAqB,CAAC,CAAC;IACnG,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,+BAAc,CAAC,2BAA2B,CAAC,WAAW,CAAC,GAAG,EAAE;YACjE,qBAAqB,CAAC,+BAAc,CAAC,qBAAqB,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AATD,oEASC","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 Hooks\r\n */\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { UiItemsManager } from \"../ui-items-provider/UiItemsManager\";\r\n\r\n/** React hook that maintains the number of available UiItemsProviders. This allows components to use it to refresh when a\r\n * UiItemsProviders is added or removed allowing the ui component to be re-rendered.\r\n * @internal\r\n */\r\nexport function useAvailableUiItemsProviders(): readonly string[] {\r\n  const [uiItemsProviderIds, setUiItemsProviderIds] = useState(UiItemsManager.registeredProviderIds);\r\n  useEffect(() => {\r\n    return UiItemsManager.onUiProviderRegisteredEvent.addListener(() => {\r\n      setUiItemsProviderIds(UiItemsManager.registeredProviderIds);\r\n    });\r\n  }, []);\r\n\r\n  return uiItemsProviderIds;\r\n}\r\n"]}

package/lib/cjs/appui-react/messages/ActivityMessage.js

@@ -74,7 +74,7 @@ function ActivityMessageContent({ initialActivityMessageInfo }) {
         activityMessageInfo.message && React.createElement(itwinui_react_1.Text, null,
             React.createElement(React.Fragment, null, activityMessageInfo.message.reactNode || activityMessageInfo.message)),
         !!((_a = activityMessageInfo.details) === null || _a === void 0 ? void 0 : _a.showPercentInMessage) &&
-            React.createElement(itwinui_react_1.Small, null, `${activityMessageInfo.percentage} ${percentCompleteLabel}`),
+            React.createElement(itwinui_react_1.Text, { variant: "small" }, `${activityMessageInfo.percentage} ${percentCompleteLabel}`),
         ((_b = activityMessageInfo.details) === null || _b === void 0 ? void 0 : _b.showProgressBar) && React.createElement(itwinui_react_1.ProgressLinear, { value: activityMessageInfo === null || activityMessageInfo === void 0 ? void 0 : activityMessageInfo.percentage })));
 }
 //# sourceMappingURL=ActivityMessage.js.map

package/lib/cjs/appui-react/messages/ActivityMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/ActivityMessage.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 * as React from \"react\";\r\nimport { ReactMessage, UiCore } from \"@itwin/core-react\";\r\nimport { ProgressLinear, Small, Text, toaster } from \"@itwin/itwinui-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ActivityMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\n\r\ninterface UseActivityMessageProps {\r\n  cancelActivityMessage?: () => void;\r\n  dismissActivityMessage?: () => void;\r\n  activityMessageInfo?: ActivityMessageEventArgs;\r\n}\r\n\r\n/**\r\n * Hook to render an Activity message.\r\n * @internal\r\n */\r\nfunction useActivityMessage({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage }: UseActivityMessageProps) {\r\n  const [cancelLabel] = React.useState(UiCore.translate(\"dialog.cancel\"));\r\n  const recentToast = React.useRef<{ close: () => void } | undefined>();\r\n  React.useEffect(() => {\r\n    toaster.setSettings({ placement: \"bottom\" });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    if (activityMessageInfo?.restored) {\r\n      recentToast.current = toaster.informational(\r\n        <ActivityMessageContent initialActivityMessageInfo={activityMessageInfo} />,\r\n        { onRemove: dismissActivityMessage, type: \"persisting\", link: activityMessageInfo?.details?.supportsCancellation && cancelActivityMessage ? { title: cancelLabel, onClick: cancelActivityMessage } : undefined }\r\n      );\r\n    }\r\n    if (!activityMessageInfo) {\r\n      recentToast.current?.close();\r\n    }\r\n  }, [activityMessageInfo, cancelActivityMessage, cancelLabel, dismissActivityMessage]);\r\n}\r\n\r\n/**\r\n * Component wrapping the `useActivityMessage` hook to use in class components.\r\n * @internal\r\n */\r\nexport function ActivityMessageRenderer() {\r\n  const [activityMessageInfo, setActivityMessageInfo] = React.useState<ActivityMessageEventArgs | undefined>();\r\n  React.useEffect(() => {\r\n    return MessageManager.onActivityMessageUpdatedEvent.addListener((args) => {\r\n      setActivityMessageInfo(args);\r\n    });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    return MessageManager.onActivityMessageCancelledEvent.addListener(() => {\r\n      setActivityMessageInfo(undefined);\r\n    });\r\n  }, []);\r\n\r\n  const cancelActivityMessage = React.useCallback(() => {\r\n    MessageManager.endActivityMessage(false);\r\n  }, []);\r\n\r\n  useActivityMessage({ activityMessageInfo, cancelActivityMessage });\r\n  return <></>;\r\n}\r\n\r\n/**\r\n * Component used to show and update activity message content.\r\n * @internal\r\n */\r\nfunction ActivityMessageContent({ initialActivityMessageInfo }: { initialActivityMessageInfo: ActivityMessageEventArgs }) {\r\n  const [percentCompleteLabel] = React.useState(UiFramework.translate(\"activityCenter.percentComplete\"));\r\n  const [activityMessageInfo, setActivityMessageInfo] = React.useState(initialActivityMessageInfo);\r\n\r\n  React.useEffect(() => {\r\n    const handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {\r\n      setActivityMessageInfo(args);\r\n    };\r\n\r\n    return MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      {activityMessageInfo.message && <Text><>{(activityMessageInfo.message as ReactMessage).reactNode || activityMessageInfo.message}</></Text>}\r\n      {!!activityMessageInfo.details?.showPercentInMessage &&\r\n        <Small>{`${activityMessageInfo.percentage} ${percentCompleteLabel}`}</Small>\r\n      }\r\n      {activityMessageInfo.details?.showProgressBar && <ProgressLinear value={activityMessageInfo?.percentage} />}\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ActivityMessage.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/ActivityMessage.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 * as React from \"react\";\r\nimport { ReactMessage, UiCore } from \"@itwin/core-react\";\r\nimport { ProgressLinear, Text, toaster } from \"@itwin/itwinui-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ActivityMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\n\r\ninterface UseActivityMessageProps {\r\n  cancelActivityMessage?: () => void;\r\n  dismissActivityMessage?: () => void;\r\n  activityMessageInfo?: ActivityMessageEventArgs;\r\n}\r\n\r\n/**\r\n * Hook to render an Activity message.\r\n * @internal\r\n */\r\nfunction useActivityMessage({ activityMessageInfo, dismissActivityMessage, cancelActivityMessage }: UseActivityMessageProps) {\r\n  const [cancelLabel] = React.useState(UiCore.translate(\"dialog.cancel\"));\r\n  const recentToast = React.useRef<{ close: () => void } | undefined>();\r\n  React.useEffect(() => {\r\n    toaster.setSettings({ placement: \"bottom\" });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    if (activityMessageInfo?.restored) {\r\n      recentToast.current = toaster.informational(\r\n        <ActivityMessageContent initialActivityMessageInfo={activityMessageInfo} />,\r\n        { onRemove: dismissActivityMessage, type: \"persisting\", link: activityMessageInfo?.details?.supportsCancellation && cancelActivityMessage ? { title: cancelLabel, onClick: cancelActivityMessage } : undefined }\r\n      );\r\n    }\r\n    if (!activityMessageInfo) {\r\n      recentToast.current?.close();\r\n    }\r\n  }, [activityMessageInfo, cancelActivityMessage, cancelLabel, dismissActivityMessage]);\r\n}\r\n\r\n/**\r\n * Component wrapping the `useActivityMessage` hook to use in class components.\r\n * @internal\r\n */\r\nexport function ActivityMessageRenderer() {\r\n  const [activityMessageInfo, setActivityMessageInfo] = React.useState<ActivityMessageEventArgs | undefined>();\r\n  React.useEffect(() => {\r\n    return MessageManager.onActivityMessageUpdatedEvent.addListener((args) => {\r\n      setActivityMessageInfo(args);\r\n    });\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    return MessageManager.onActivityMessageCancelledEvent.addListener(() => {\r\n      setActivityMessageInfo(undefined);\r\n    });\r\n  }, []);\r\n\r\n  const cancelActivityMessage = React.useCallback(() => {\r\n    MessageManager.endActivityMessage(false);\r\n  }, []);\r\n\r\n  useActivityMessage({ activityMessageInfo, cancelActivityMessage });\r\n  return <></>;\r\n}\r\n\r\n/**\r\n * Component used to show and update activity message content.\r\n * @internal\r\n */\r\nfunction ActivityMessageContent({ initialActivityMessageInfo }: { initialActivityMessageInfo: ActivityMessageEventArgs }) {\r\n  const [percentCompleteLabel] = React.useState(UiFramework.translate(\"activityCenter.percentComplete\"));\r\n  const [activityMessageInfo, setActivityMessageInfo] = React.useState(initialActivityMessageInfo);\r\n\r\n  React.useEffect(() => {\r\n    const handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {\r\n      setActivityMessageInfo(args);\r\n    };\r\n\r\n    return MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      {activityMessageInfo.message && <Text><>{(activityMessageInfo.message as ReactMessage).reactNode || activityMessageInfo.message}</></Text>}\r\n      {!!activityMessageInfo.details?.showPercentInMessage &&\r\n        <Text variant=\"small\">{`${activityMessageInfo.percentage} ${percentCompleteLabel}`}</Text>\r\n      }\r\n      {activityMessageInfo.details?.showProgressBar && <ProgressLinear value={activityMessageInfo?.percentage} />}\r\n    </>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/messages/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;GAEG;AACH,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IACxG,SAAyB,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAK9D;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAkDzB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,kCAAkC,CAQxC;IAEF,OAAO,CAAC,oCAAoC,CAE1C;CACH"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGhE;;GAEG;AACH,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IACxG,SAAyB,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAK9D;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAkDzB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,kCAAkC,CAQxC;IAEF,OAAO,CAAC,oCAAoC,CAE1C;CACH"}

package/lib/cjs/appui-react/messages/InputField.js

@@ -16,6 +16,7 @@ const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
 const MessageManager_1 = require("../messages/MessageManager");
 const MessageSpan_1 = require("./MessageSpan");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /** InputField message pops up near pointer when attempting an invalid interaction.
  * @public
  */
@@ -49,26 +50,26 @@ class InputFieldMessage extends React.PureComponent {
         if (!inputFieldElement || !message) {
             return null;
         }
-        let iconClassName = "";
+        let iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
         switch (priority) {
             case core_frontend_1.OutputMessagePriority.Warning:
-                iconClassName = "icon-status-warning";
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusWarning, null);
                 break;
             case core_frontend_1.OutputMessagePriority.Error:
-                iconClassName = "icon-status-error";
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusError, null);
                 break;
             case core_frontend_1.OutputMessagePriority.Info:
-                iconClassName = "icon-info";
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
                 break;
         }
         return (React.createElement(core_react_1.Popup, { isOpen: isVisible, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
             React.createElement("div", { className: "uifw-popup-message-inputField" },
                 React.createElement("div", { className: "uifw-popup-message-inputField-content" },
                     React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
-                        iconClassName &&
+                        iconComponent &&
                             React.createElement("span", { className: "uifw-popup-message-icon" },
                                 " ",
-                                React.createElement("i", { className: (0, classnames_1.default)("icon", iconClassName) }),
+                                React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon") }, iconComponent),
                                 " "),
                         React.createElement("span", { className: "uifw-popup-message-text" },
                             React.createElement(MessageSpan_1.MessageDiv, { className: "uifw-popup-message-brief", message: message }),
@@ -77,7 +78,7 @@ class InputFieldMessage extends React.PureComponent {
                 showCloseButton &&
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                     React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
-                        React.createElement("i", { className: "icon icon-close" })))));
+                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) })))));
     }
     componentDidMount() {
         MessageManager_1.MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);

package/lib/cjs/appui-react/messages/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.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 \"./InputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup } from \"@itwin/core-react\";\r\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n/** Properties of [[InputFieldMessage]] component.\r\n * @public\r\n */\r\ninterface InputFieldMessageProps {\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** [[InputFieldMessage]] state.\r\n * @internal\r\n */\r\ninterface InputFieldMessageState {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  inputFieldElement?: HTMLElement;\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** InputField message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\r\n  public override readonly state: Readonly<InputFieldMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    priority: OutputMessagePriority.None,\r\n    showCloseButton: !!this.props.showCloseButton,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\r\n\r\n    if (!inputFieldElement || !message) {\r\n      return null;\r\n    }\r\n\r\n    let iconClassName = \"\";\r\n    switch (priority) {\r\n      case OutputMessagePriority.Warning:\r\n        iconClassName = \"icon-status-warning\";\r\n        break;\r\n      case OutputMessagePriority.Error:\r\n        iconClassName = \"icon-status-error\";\r\n        break;\r\n      case OutputMessagePriority.Info:\r\n        iconClassName = \"icon-info\";\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <Popup\r\n        isOpen={isVisible}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={this._onInputMessageClose}\r\n        target={inputFieldElement}>\r\n        <div className=\"uifw-popup-message-inputField\">\r\n          <div className=\"uifw-popup-message-inputField-content\">\r\n            <div className=\"uifw-popup-message-inputField-primary\">\r\n              {iconClassName &&\r\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", iconClassName)} /> </span>\r\n              }\r\n              <span className=\"uifw-popup-message-text\">\r\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\r\n                {detailedMessage &&\r\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n          {showCloseButton &&\r\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\r\n              <i className=\"icon icon-close\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup>);\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  private _onInputMessageClose = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n\r\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\r\n    this.setState({\r\n      inputFieldElement: args.target as HTMLElement,\r\n      message: args.messageText,\r\n      isVisible: true,\r\n      priority: args.priority,\r\n      detailedMessage: args.detailedMessage,\r\n    });\r\n  };\r\n\r\n  private _handleInputFieldMessageRemovedEvent = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.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 \"./InputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Icon, Popup } from \"@itwin/core-react\";\r\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\nimport { SvgClose, SvgInfoCircularHollow, SvgStatusError, SvgStatusWarning} from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties of [[InputFieldMessage]] component.\r\n * @public\r\n */\r\ninterface InputFieldMessageProps {\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** [[InputFieldMessage]] state.\r\n * @internal\r\n */\r\ninterface InputFieldMessageState {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  inputFieldElement?: HTMLElement;\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** InputField message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\r\n  public override readonly state: Readonly<InputFieldMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    priority: OutputMessagePriority.None,\r\n    showCloseButton: !!this.props.showCloseButton,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\r\n\r\n    if (!inputFieldElement || !message) {\r\n      return null;\r\n    }\r\n\r\n    let iconComponent = <SvgInfoCircularHollow />;\r\n    switch (priority) {\r\n      case OutputMessagePriority.Warning:\r\n        iconComponent = <SvgStatusWarning />;\r\n        break;\r\n      case OutputMessagePriority.Error:\r\n        iconComponent = <SvgStatusError />;\r\n        break;\r\n      case OutputMessagePriority.Info:\r\n        iconComponent = <SvgInfoCircularHollow />;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <Popup\r\n        isOpen={isVisible}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={this._onInputMessageClose}\r\n        target={inputFieldElement}>\r\n        <div className=\"uifw-popup-message-inputField\">\r\n          <div className=\"uifw-popup-message-inputField-content\">\r\n            <div className=\"uifw-popup-message-inputField-primary\">\r\n              {iconComponent &&\r\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", \"core-svg-icon\")}>{iconComponent}</i> </span>\r\n              }\r\n              <span className=\"uifw-popup-message-text\">\r\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\r\n                {detailedMessage &&\r\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n          {showCloseButton &&\r\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\r\n              <Icon iconSpec={<SvgClose />} />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup>);\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  private _onInputMessageClose = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n\r\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\r\n    this.setState({\r\n      inputFieldElement: args.target as HTMLElement,\r\n      message: args.messageText,\r\n      isVisible: true,\r\n      priority: args.priority,\r\n      detailedMessage: args.detailedMessage,\r\n    });\r\n  };\r\n\r\n  private _handleInputFieldMessageRemovedEvent = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n}\r\n"]}

package/lib/cjs/appui-react/messages/InputField.scss

@@ -8,8 +8,8 @@
 .uifw-popup-message-inputField {
   background-color: $buic-background-control;
   padding: 3px 3px 3px 6px;
-  border-radius: 5px;
-  color: $buic-text-color;
+  border-radius: var(--iui-border-radius-1);
+  color: var(--iui-color-text);
   margin: 0px;
   transition: all 3s ease;
   display: flex;
@@ -32,20 +32,20 @@
         padding-right: 3px;
 
         .icon-status-warning {
-          color: $buic-foreground-warning;
+          color: var(--iui-color-text-warning);
         }
 
         .icon-status-warning {
-          color: $buic-foreground-warning;
+          color: var(--iui-color-text-warning);
         }
 
         .icon-status-error {
-          color: $buic-foreground-alert;
+          color: var(--iui-color-text-negative);
         }
       }
 
       .uifw-popup-message-text {
-        color: $buic-foreground-body;
+        color: var(--iui-color-text);
         padding-left: 3px;
         padding-right: 3px;
 
@@ -63,12 +63,12 @@
   .uifw-popup-message-close {
     display: flex;
     align-items: center;
-    color: $buic-foreground-muted;
+    color: var(--iui-color-text-muted);
     cursor: pointer;
 
     &:active,
     &:hover {
-      color: $buic-foreground-activehover;
+      color: var(--iui-color-text-hover);
     }
 
     &:focus {