@itwin/core-react 3.2.0-dev.8 → 3.2.1

package/CHANGELOG.md

@@ -1,6 +1,59 @@
 # Change Log - @itwin/core-react
 
-This log was last generated on Thu, 24 Feb 2022 15:26:55 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Jun 2022 15:02:56 GMT and should not be manually modified.
+
+## 3.2.1
+Tue, 07 Jun 2022 15:02:56 GMT
+
+### Updates
+
+- Backport change to update panel background to use same as buic-background-dialog so dispabled itwin ui components display properly.
+
+## 3.2.0
+Fri, 20 May 2022 13:10:54 GMT
+
+### Updates
+
+- Added 'useCrossOriginPopup' and 'useInterval' hooks
+- ListBox component: `onKeyPress` has been deprecated, switch to `onKeyDown`
+- Fix for losing viewport content after clicking PW link 
+- Implement svg icons loading as a web component.
+- Allow React icons to be used on Wedget tabs, backstage, and status bar items
+
+## 3.1.3
+Fri, 15 Apr 2022 13:49:25 GMT
+
+_Version update only_
+
+## 3.1.2
+Wed, 06 Apr 2022 22:27:56 GMT
+
+_Version update only_
+
+## 3.1.1
+Thu, 31 Mar 2022 15:55:48 GMT
+
+_Version update only_
+
+## 3.1.0
+Tue, 29 Mar 2022 20:53:47 GMT
+
+### Updates
+
+- Add ability to keep Dialog within application window.
+- Update to itwinui-css version "0.44.0".
+- Update to @itwin/itwinui-react: 1.32.0
+- Update to latest itwinui-react - requires new compile option allowSyntheticDefaultImports=true.
+
+## 3.0.3
+Fri, 25 Mar 2022 15:10:02 GMT
+
+_Version update only_
+
+## 3.0.2
+Thu, 10 Mar 2022 21:18:13 GMT
+
+_Version update only_
 
 ## 3.0.1
 Thu, 24 Feb 2022 15:26:55 GMT

package/lib/cjs/core-react/UiCore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiCore.d.ts","sourceRoot":"","sources":["../../../src/core-react/UiCore.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,4EAA4E;AAC5E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKvD;;;GAGG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IACpC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAe;IAE5C;;;OAGG;WACiB,UAAU,CAAC,YAAY,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAWzE,oDAAoD;WACtC,SAAS;IAQvB,gDAAgD;IAChD,WAAkB,WAAW,IAAI,OAAO,CAAgC;IAExE;;OAEG;IACH,WAAkB,YAAY,IAAI,YAAY,CAM7C;IAED,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAQvD,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED,gBAAgB;WACF,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;CAM/C"}
+{"version":3,"file":"UiCore.d.ts","sourceRoot":"","sources":["../../../src/core-react/UiCore.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,4EAA4E;AAC5E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKvD;;;GAGG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IACpC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAe;IAE5C;;;OAGG;WACiB,UAAU,CAAC,YAAY,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAczE,oDAAoD;WACtC,SAAS;IAQvB,gDAAgD;IAChD,WAAkB,WAAW,IAAI,OAAO,CAAgC;IAExE;;OAEG;IACH,WAAkB,YAAY,IAAI,YAAY,CAM7C;IAED,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAQvD,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED,gBAAgB;WACF,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;CAM/C"}

package/lib/cjs/core-react/UiCore.js

@@ -15,6 +15,7 @@ require("./layout-variables.scss");
 require("./classes.scss");
 const core_bentley_1 = require("@itwin/core-bentley");
 const appui_abstract_1 = require("@itwin/appui-abstract");
+const IconWebComponent_1 = require("./utils/IconWebComponent");
 // cSpell:ignore colorthemes colorvariables
 /**
  * Manages the Localization service for the core-react package.
@@ -32,6 +33,8 @@ class UiCore {
         }
         UiCore._localization = localization;
         await UiCore._localization.registerNamespace(UiCore.localizationNamespace);
+        if (window.customElements.get("svg-loader") === undefined)
+            window.customElements.define("svg-loader", IconWebComponent_1.IconWebComponent);
         UiCore._initialized = true;
     }
     /** Unregisters the UiCore localization namespace */

package/lib/cjs/core-react/UiCore.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiCore.js","sourceRoot":"","sources":["../../../src/core-react/UiCore.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4EAA4E;AAC5E,8BAA4B;AAC5B,iCAA+B;AAC/B,mCAAiC;AACjC,0BAAwB;AAExB,sDAA6C;AAE7C,0DAA8D;AAE9D,2CAA2C;AAE3C;;;GAGG;AACH,MAAa,MAAM;IAIjB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,YAA0B;QACvD,IAAI,MAAM,CAAC,YAAY,EAAE;YACvB,qBAAM,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,kCAAkC,CAAC,CAAC;YAClF,OAAO;SACR;QAED,MAAM,CAAC,aAAa,GAAG,YAAY,CAAC;QACpC,MAAM,MAAM,CAAC,aAAa,CAAC,iBAAiB,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAC3E,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,oDAAoD;IAC7C,MAAM,CAAC,SAAS;QACrB,IAAI,MAAM,CAAC,aAAa;YACtB,MAAM,CAAC,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QACzE,MAAM,CAAC,aAAa,GAAG,SAAS,CAAC;QAEjC,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,gDAAgD;IACzC,MAAM,KAAK,WAAW,KAAc,OAAO,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAExE;;OAEG;IACI,MAAM,KAAK,YAAY;QAC5B,uBAAuB;QACvB,IAAI,CAAC,MAAM,CAAC,aAAa;YACvB,MAAM,IAAI,wBAAO,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,4FAA4F,CAAC,CAAC;QAC/I,uBAAuB;QACvB,OAAO,MAAM,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE;YACzB,qBAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,4FAA4F,CAAC,CAAC;YAC3I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,MAAM,CAAC,aAAa,CAAC,+BAA+B,CAAC,MAAM,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;IACjG,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACzE,OAAO,QAAQ,CAAC;IAClB,CAAC;;AApEH,wBAsEC;AArEgB,mBAAY,GAAG,KAAK,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 Utilities\r\n */\r\n\r\n/** Import color variables, layout variables and Sass classes barrel file */\r\nimport \"./colorthemes.scss\";\r\nimport \"./colorvariables.scss\";\r\nimport \"./layout-variables.scss\";\r\nimport \"./classes.scss\";\r\n\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport type { Localization } from \"@itwin/core-common\";\r\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\r\n\r\n// cSpell:ignore colorthemes colorvariables\r\n\r\n/**\r\n * Manages the Localization service for the core-react package.\r\n * @public\r\n */\r\nexport class UiCore {\r\n  private static _initialized = false;\r\n  private static _localization?: Localization;\r\n\r\n  /**\r\n   * Registers the Localization service namespace for UiCore.\r\n   * @param localization The internationalization service created by the host application.\r\n   */\r\n  public static async initialize(localization: Localization): Promise<void> {\r\n    if (UiCore._initialized) {\r\n      Logger.logInfo(UiCore.loggerCategory(UiCore), `UiCore.initialize already called`);\r\n      return;\r\n    }\r\n\r\n    UiCore._localization = localization;\r\n    await UiCore._localization.registerNamespace(UiCore.localizationNamespace);\r\n    UiCore._initialized = true;\r\n  }\r\n\r\n  /** Unregisters the UiCore localization namespace */\r\n  public static terminate() {\r\n    if (UiCore._localization)\r\n      UiCore._localization.unregisterNamespace(UiCore.localizationNamespace);\r\n    UiCore._localization = undefined;\r\n\r\n    UiCore._initialized = false;\r\n  }\r\n\r\n  /** Determines if UiCore has been initialized */\r\n  public static get initialized(): boolean { return UiCore._initialized; }\r\n\r\n  /** The internationalization service created by the host application.\r\n   * @internal\r\n   */\r\n  public static get localization(): Localization {\r\n    // istanbul ignore else\r\n    if (!UiCore._localization)\r\n      throw new UiError(UiCore.loggerCategory(this), \"localization: UiCore.initialize has not been called. Unable to return Localization object.\");\r\n    // istanbul ignore next\r\n    return UiCore._localization;\r\n  }\r\n\r\n  /** The internationalization service namespace. */\r\n  public static get localizationNamespace(): string {\r\n    return \"UiCore\";\r\n  }\r\n\r\n  /** Calls localization.getLocalizedStringWithNamespace with the \"UiCore\" namespace. Do NOT include the namespace in the key.\r\n   * @internal\r\n   */\r\n  public static translate(key: string | string[]): string {\r\n    if (!UiCore._localization) {\r\n      Logger.logError(UiCore.loggerCategory(this), `translate: UiCore must be initialize with a localization provider. Returning blank string.`);\r\n      return \"\";\r\n    }\r\n    return UiCore._localization.getLocalizedStringWithNamespace(UiCore.localizationNamespace, key);\r\n  }\r\n\r\n  /** @internal */\r\n  public static get packageName(): string {\r\n    return \"core-react\";\r\n  }\r\n\r\n  /** @internal */\r\n  public static loggerCategory(obj: any): string {\r\n    const className = getClassName(obj);\r\n    const category = UiCore.packageName + (className ? `.${className}` : \"\");\r\n    return category;\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"UiCore.js","sourceRoot":"","sources":["../../../src/core-react/UiCore.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4EAA4E;AAC5E,8BAA4B;AAC5B,iCAA+B;AAC/B,mCAAiC;AACjC,0BAAwB;AAExB,sDAA6C;AAE7C,0DAA8D;AAC9D,+DAA4D;AAC5D,2CAA2C;AAE3C;;;GAGG;AACH,MAAa,MAAM;IAIjB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,YAA0B;QACvD,IAAI,MAAM,CAAC,YAAY,EAAE;YACvB,qBAAM,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,kCAAkC,CAAC,CAAC;YAClF,OAAO;SACR;QAED,MAAM,CAAC,aAAa,GAAG,YAAY,CAAC;QACpC,MAAM,MAAM,CAAC,aAAa,CAAC,iBAAiB,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAC3E,IAAI,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS;YACvD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,mCAAgB,CAAC,CAAC;QAE/D,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,oDAAoD;IAC7C,MAAM,CAAC,SAAS;QACrB,IAAI,MAAM,CAAC,aAAa;YACtB,MAAM,CAAC,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QACzE,MAAM,CAAC,aAAa,GAAG,SAAS,CAAC;QAEjC,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,gDAAgD;IACzC,MAAM,KAAK,WAAW,KAAc,OAAO,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAExE;;OAEG;IACI,MAAM,KAAK,YAAY;QAC5B,uBAAuB;QACvB,IAAI,CAAC,MAAM,CAAC,aAAa;YACvB,MAAM,IAAI,wBAAO,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,4FAA4F,CAAC,CAAC;QAC/I,uBAAuB;QACvB,OAAO,MAAM,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE;YACzB,qBAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,4FAA4F,CAAC,CAAC;YAC3I,OAAO,EAAE,CAAC;SACX;QACD,OAAO,MAAM,CAAC,aAAa,CAAC,+BAA+B,CAAC,MAAM,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;IACjG,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,IAAA,6BAAY,EAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACzE,OAAO,QAAQ,CAAC;IAClB,CAAC;;AAvEH,wBAyEC;AAxEgB,mBAAY,GAAG,KAAK,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 Utilities\r\n */\r\n\r\n/** Import color variables, layout variables and Sass classes barrel file */\r\nimport \"./colorthemes.scss\";\r\nimport \"./colorvariables.scss\";\r\nimport \"./layout-variables.scss\";\r\nimport \"./classes.scss\";\r\n\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport type { Localization } from \"@itwin/core-common\";\r\nimport { getClassName, UiError } from \"@itwin/appui-abstract\";\r\nimport { IconWebComponent } from \"./utils/IconWebComponent\";\r\n// cSpell:ignore colorthemes colorvariables\r\n\r\n/**\r\n * Manages the Localization service for the core-react package.\r\n * @public\r\n */\r\nexport class UiCore {\r\n  private static _initialized = false;\r\n  private static _localization?: Localization;\r\n\r\n  /**\r\n   * Registers the Localization service namespace for UiCore.\r\n   * @param localization The internationalization service created by the host application.\r\n   */\r\n  public static async initialize(localization: Localization): Promise<void> {\r\n    if (UiCore._initialized) {\r\n      Logger.logInfo(UiCore.loggerCategory(UiCore), `UiCore.initialize already called`);\r\n      return;\r\n    }\r\n\r\n    UiCore._localization = localization;\r\n    await UiCore._localization.registerNamespace(UiCore.localizationNamespace);\r\n    if (window.customElements.get(\"svg-loader\") === undefined)\r\n      window.customElements.define(\"svg-loader\", IconWebComponent);\r\n\r\n    UiCore._initialized = true;\r\n  }\r\n\r\n  /** Unregisters the UiCore localization namespace */\r\n  public static terminate() {\r\n    if (UiCore._localization)\r\n      UiCore._localization.unregisterNamespace(UiCore.localizationNamespace);\r\n    UiCore._localization = undefined;\r\n\r\n    UiCore._initialized = false;\r\n  }\r\n\r\n  /** Determines if UiCore has been initialized */\r\n  public static get initialized(): boolean { return UiCore._initialized; }\r\n\r\n  /** The internationalization service created by the host application.\r\n   * @internal\r\n   */\r\n  public static get localization(): Localization {\r\n    // istanbul ignore else\r\n    if (!UiCore._localization)\r\n      throw new UiError(UiCore.loggerCategory(this), \"localization: UiCore.initialize has not been called. Unable to return Localization object.\");\r\n    // istanbul ignore next\r\n    return UiCore._localization;\r\n  }\r\n\r\n  /** The internationalization service namespace. */\r\n  public static get localizationNamespace(): string {\r\n    return \"UiCore\";\r\n  }\r\n\r\n  /** Calls localization.getLocalizedStringWithNamespace with the \"UiCore\" namespace. Do NOT include the namespace in the key.\r\n   * @internal\r\n   */\r\n  public static translate(key: string | string[]): string {\r\n    if (!UiCore._localization) {\r\n      Logger.logError(UiCore.loggerCategory(this), `translate: UiCore must be initialize with a localization provider. Returning blank string.`);\r\n      return \"\";\r\n    }\r\n    return UiCore._localization.getLocalizedStringWithNamespace(UiCore.localizationNamespace, key);\r\n  }\r\n\r\n  /** @internal */\r\n  public static get packageName(): string {\r\n    return \"core-react\";\r\n  }\r\n\r\n  /** @internal */\r\n  public static loggerCategory(obj: any): string {\r\n    const className = getClassName(obj);\r\n    const category = UiCore.packageName + (className ? `.${className}` : \"\");\r\n    return category;\r\n  }\r\n\r\n}\r\n"]}

package/lib/cjs/core-react/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/core-react/badge/Badge.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,GAAG,EAAE,GAAG,CAAC;CACV;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACxC,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/core-react/badge/Badge.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,GAAG,EAAE,GAAG,CAAC;CACV;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACxC,MAAM,IAAI,GAAG,CAAC,OAAO;CAQtC"}

package/lib/cjs/core-react/badge/Badge.js

@@ -11,14 +11,16 @@ exports.Badge = void 0;
 require("./Badge.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
-const SvgSprite_1 = require("../icons/SvgSprite");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const IconComponent_1 = require("../icons/IconComponent");
 /** Beta Badge React component
  * @internal
  */
 class Badge extends React.PureComponent {
     render() {
+        const iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(this.props.svg);
         return (React.createElement("div", { className: (0, classnames_1.default)("core-badge", this.props.className), style: this.props.style },
-            React.createElement(SvgSprite_1.SvgSprite, { src: this.props.svg })));
+            React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec })));
     }
 }
 exports.Badge = Badge;

package/lib/cjs/core-react/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/Badge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,wBAAsB;AACtB,2CAAoC;AACpC,+BAA+B;AAC/B,kDAA+C;AAU/C;;GAEG;AACH,MAAa,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxC,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrF,oBAAC,qBAAS,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAI,CAC9B,CACP,CAAC;IACJ,CAAC;CACF;AARD,sBAQC","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 Utilities\r\n */\r\n\r\nimport \"./Badge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SvgSprite } from \"../icons/SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Badge]] React component\r\n * @internal\r\n */\r\nexport interface BadgeProps extends CommonProps {\r\n  svg: any;\r\n}\r\n\r\n/** Beta Badge React component\r\n * @internal\r\n */\r\nexport class Badge extends React.PureComponent<BadgeProps> {\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <div className={classnames(\"core-badge\", this.props.className)} style={this.props.style}>\r\n        <SvgSprite src={this.props.svg} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/Badge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,wBAAsB;AACtB,2CAAoC;AACpC,+BAA+B;AAE/B,0DAA0D;AAC1D,0DAA8C;AAS9C;;GAEG;AACH,MAAa,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxC,MAAM;QACpB,MAAM,QAAQ,GAAG,kCAAiB,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9E,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrF,oBAAC,oBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACxB,CACP,CAAC;IACJ,CAAC;CACF;AATD,sBASC","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 Utilities\r\n */\r\n\r\nimport \"./Badge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { Icon } from \"../icons/IconComponent\";\r\n\r\n/** Properties for the [[Badge]] React component\r\n * @internal\r\n */\r\nexport interface BadgeProps extends CommonProps {\r\n  svg: any;\r\n}\r\n\r\n/** Beta Badge React component\r\n * @internal\r\n */\r\nexport class Badge extends React.PureComponent<BadgeProps> {\r\n  public override render(): JSX.Element {\r\n    const iconSpec = IconSpecUtilities.createWebComponentIconSpec(this.props.svg);\r\n    return (\r\n      <div className={classnames(\"core-badge\", this.props.className)} style={this.props.style}>\r\n        <Icon iconSpec={iconSpec} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/badge/BetaBadge.js

@@ -12,13 +12,13 @@ require("./BetaBadge.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
 const Badge_1 = require("./Badge");
-const technical_preview_badge_svg_sprite_1 = require("./technical-preview-badge.svg?sprite");
+const technical_preview_badge_svg_1 = require("./technical-preview-badge.svg");
 /** Beta Badge React component
  * @internal
  */
 function BetaBadge(props) {
     const className = (0, classnames_1.default)("core-badge-betaBadge", props.className);
-    return React.createElement(Badge_1.Badge, { ...props, svg: technical_preview_badge_svg_sprite_1.default, className: className });
+    return React.createElement(Badge_1.Badge, { ...props, svg: technical_preview_badge_svg_1.default, className: className });
 }
 exports.BetaBadge = BetaBadge;
 //# sourceMappingURL=BetaBadge.js.map

package/lib/cjs/core-react/badge/BetaBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BetaBadge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/BetaBadge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,mCAAgC;AAChC,6FAAiE;AAEjE;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAkB;IAC1C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EACjD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,oBAAC,aAAK,OACP,KAAK,EACT,GAAG,EAAE,4CAAa,EAClB,SAAS,EAAE,SAAS,GACpB,CAAC;AACL,CAAC;AATD,8BASC","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 Utilities\r\n */\r\n\r\nimport \"./BetaBadge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Badge } from \"./Badge\";\r\nimport betaBadgeIcon from \"./technical-preview-badge.svg?sprite\";\r\n\r\n/** Beta Badge React component\r\n * @internal\r\n */\r\nexport function BetaBadge(props: CommonProps) {\r\n  const className = classnames(\"core-badge-betaBadge\",\r\n    props.className,\r\n  );\r\n  return <Badge\r\n    {...props}\r\n    svg={betaBadgeIcon}\r\n    className={className}\r\n  />;\r\n}\r\n"]}
+{"version":3,"file":"BetaBadge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/BetaBadge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,mCAAgC;AAChC,+EAA0D;AAE1D;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAkB;IAC1C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EACjD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,oBAAC,aAAK,OACP,KAAK,EACT,GAAG,EAAE,qCAAa,EAClB,SAAS,EAAE,SAAS,GACpB,CAAC;AACL,CAAC;AATD,8BASC","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 Utilities\r\n */\r\n\r\nimport \"./BetaBadge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Badge } from \"./Badge\";\r\nimport betaBadgeIcon from \"./technical-preview-badge.svg\";\r\n\r\n/** Beta Badge React component\r\n * @internal\r\n */\r\nexport function BetaBadge(props: CommonProps) {\r\n  const className = classnames(\"core-badge-betaBadge\",\r\n    props.className,\r\n  );\r\n  return <Badge\r\n    {...props}\r\n    svg={betaBadgeIcon}\r\n    className={className}\r\n  />;\r\n}\r\n"]}

package/lib/cjs/core-react/badge/NewBadge.js

@@ -12,13 +12,13 @@ require("./NewBadge.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
 const Badge_1 = require("./Badge");
-const new_feature_badge_svg_sprite_1 = require("./new-feature-badge.svg?sprite");
+const new_feature_badge_svg_1 = require("./new-feature-badge.svg");
 /** New Badge React component
  * @internal
  */
 function NewBadge(props) {
     const { className, ...badgeProps } = props;
-    return React.createElement(Badge_1.Badge, { ...badgeProps, className: (0, classnames_1.default)("core-new-badge", className), svg: new_feature_badge_svg_sprite_1.default });
+    return React.createElement(Badge_1.Badge, { ...badgeProps, className: (0, classnames_1.default)("core-new-badge", className), svg: new_feature_badge_svg_1.default });
 }
 exports.NewBadge = NewBadge;
 //# sourceMappingURL=NewBadge.js.map

package/lib/cjs/core-react/badge/NewBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewBadge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/NewBadge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,mCAAgC;AAChC,iFAA0D;AAE1D;;GAEG;AACH,SAAgB,QAAQ,CAAC,KAAkB;IACzC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3C,OAAO,oBAAC,aAAK,OAAK,UAAU,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,sCAAY,GAAI,CAAC;AAC1G,CAAC;AAHD,4BAGC","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 Utilities\r\n */\r\n\r\nimport \"./NewBadge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Badge } from \"./Badge\";\r\nimport newBadgeIcon from \"./new-feature-badge.svg?sprite\";\r\n\r\n/** New Badge React component\r\n * @internal\r\n */\r\nexport function NewBadge(props: CommonProps) {\r\n  const { className, ...badgeProps } = props;\r\n  return <Badge {...badgeProps} className={classnames(\"core-new-badge\", className)} svg={newBadgeIcon} />;\r\n}\r\n"]}
+{"version":3,"file":"NewBadge.js","sourceRoot":"","sources":["../../../../src/core-react/badge/NewBadge.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,mCAAgC;AAChC,mEAAmD;AAEnD;;GAEG;AACH,SAAgB,QAAQ,CAAC,KAAkB;IACzC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3C,OAAO,oBAAC,aAAK,OAAK,UAAU,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,+BAAY,GAAI,CAAC;AAC1G,CAAC;AAHD,4BAGC","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 Utilities\r\n */\r\n\r\nimport \"./NewBadge.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Badge } from \"./Badge\";\r\nimport newBadgeIcon from \"./new-feature-badge.svg\";\r\n\r\n/** New Badge React component\r\n * @internal\r\n */\r\nexport function NewBadge(props: CommonProps) {\r\n  const { className, ...badgeProps } = props;\r\n  return <Badge {...badgeProps} className={classnames(\"core-new-badge\", className)} svg={newBadgeIcon} />;\r\n}\r\n"]}

package/lib/cjs/core-react/colorvariables.scss

@@ -13,100 +13,104 @@
 :root {
 
   // NEEDSWORK - Need to deprecate these accessory colors
-  --buic-accessory-hollow:                    rgb(255, 255, 255);
-  --buic-accessory-primary:                   rgb(000, 139, 225);
-  --buic-accessory-success:                   rgb(083, 162, 026);
-  --buic-accessory-alert:                     rgb(211, 010, 010);
-  --buic-accessory-warning:                   rgb(241, 139, 018);
-  --buic-accessory-primary-tint:              rgb(165, 215, 245);
-  --buic-accessory-success-tint:              rgb(195, 225, 175);
-  --buic-accessory-alert-tint:                rgb(239, 169, 169);
-  --buic-accessory-warning-tint:              rgb(249, 215, 171);
-
-  --buic-background-1-rgb:                    var(--iui-color-background-1-rgb);
-  --buic-background-2-rgb:                    var(--iui-color-background-2-rgb);
-  --buic-background-3-rgb:                    var(--iui-color-background-3-rgb);
-  --buic-background-4-rgb:                    var(--iui-color-background-4-rgb);
-  --buic-background-5-rgb:                    var(--iui-color-background-5-rgb);
-
-  --buic-background-1:                        var(--iui-color-background-1);
-  --buic-background-2:                        var(--iui-color-background-2);
-  --buic-background-3:                        var(--iui-color-background-3);
-  --buic-background-4:                        var(--iui-color-background-4);
-  --buic-background-5:                        var(--iui-color-background-5);
-  --buic-background-primary:                  var(--iui-color-background-primary);
-  --buic-background-tooltip:                  rgba(var(--iui-color-background-5-rgb), 0.90);
-  --buic-background-scrollbar:                rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  --buic-background-scrollbar-hover:          rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-
-  --buic-foreground-body-rgb:                 var(--iui-text-color-rgb);
-  --buic-foreground-body:                     var(--iui-text-color);
-  --buic-foreground-body-reverse-rgb:         var(--iui-color-foreground-body-invert-rgb);
-  --buic-foreground-body-reverse:             rgba(var(--iui-color-foreground-body-invert-rgb), var(--iui-opacity-2));
-  --buic-foreground-muted:                    var(--iui-text-color-muted);
-  --buic-foreground-disabled:                 var(--iui-text-color-placeholder);
-  --buic-foreground-activehover:              var(--iui-icons-color-actionable-hover);
-
-  --buic-inputs-border:                       rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  --buic-inputs-boxshadow:                    var(--iui-focus-box-shadow);
-  --buic-popup-boxshadow:                     var(--buic-inputs-boxshadow);
-
-  --buic-foreground-primary:                  var(--iui-icons-color-primary);
-  --buic-foreground-primary-tone:             var(--iui-color-foreground-primary-overlay);
-  --buic-foreground-focus:                    var(--iui-color-foreground-primary-overlay);
-  --buic-foreground-focus-border:             var(--buic-inputs-border);
-  --buic-focus-boxshadow:                     rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
-
-  --buic-foreground-accessory:                var(--iui-color-foreground-accessory);
-  --buic-foreground-success:                  var(--iui-color-foreground-positive);
-  --buic-foreground-positive:                 var(--iui-color-foreground-positive);
-  --buic-foreground-positive-rgb:             var(--iui-color-foreground-positive-rgb);
-  --buic-foreground-alert:                    var(--iui-color-foreground-negative);
-  --buic-foreground-negative:                 var(--iui-color-foreground-negative);
-  --buic-foreground-negative-rgb:             var(--iui-color-foreground-negative-rgb);
-  --buic-foreground-warning:                  var(--iui-color-foreground-warning);
-  --buic-foreground-warning-rgb:              var(--iui-color-foreground-warning-rgb);
-
-  --buic-background-focus-overlay:            rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  --buic-background-hover-overlay:            rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  --buic-background-active-overlay:           rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  --buic-background-pressed-overlay:          rgba(var(--iui-color-foreground-primary-rgb), 0.3);
-
-  --buic-background-card:                     var(--buic-background-tooltip);
-  --buic-background-striped_row:              rgba(var(--iui-color-foreground-body-rgb), 0.03);
+  --buic-accessory-hollow: rgb(255, 255, 255);
+  --buic-accessory-primary: rgb(000, 139, 225);
+  --buic-accessory-success: rgb(083, 162, 026);
+  --buic-accessory-alert: rgb(211, 010, 010);
+  --buic-accessory-warning: rgb(241, 139, 018);
+  --buic-accessory-primary-tint: rgb(165, 215, 245);
+  --buic-accessory-success-tint: rgb(195, 225, 175);
+  --buic-accessory-alert-tint: rgb(239, 169, 169);
+  --buic-accessory-warning-tint: rgb(249, 215, 171);
+
+  --buic-background-1-rgb: var(--iui-color-background-1-rgb);
+  --buic-background-2-rgb: var(--iui-color-background-2-rgb);
+  --buic-background-3-rgb: var(--iui-color-background-3-rgb);
+  --buic-background-4-rgb: var(--iui-color-background-4-rgb);
+  --buic-background-5-rgb: var(--iui-color-background-5-rgb);
+
+  --buic-background-1: var(--iui-color-background-1);
+  --buic-background-2: var(--iui-color-background-2);
+  --buic-background-3: var(--iui-color-background-3);
+  --buic-background-4: var(--iui-color-background-4);
+  --buic-background-5: var(--iui-color-background-5);
+  --buic-background-primary: var(--iui-color-background-primary);
+  --buic-background-tooltip: rgba(var(--iui-color-background-5-rgb), 0.90);
+  --buic-background-scrollbar: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --buic-background-scrollbar-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+
+  --buic-foreground-body-rgb: var(--iui-text-color-rgb);
+  --buic-foreground-body: var(--iui-text-color);
+  --buic-foreground-body-reverse-rgb: var(--iui-color-foreground-body-invert-rgb);
+  --buic-foreground-body-reverse: rgba(var(--iui-color-foreground-body-invert-rgb), var(--iui-opacity-2));
+  --buic-foreground-muted: var(--iui-text-color-muted);
+  --buic-foreground-disabled: var(--iui-text-color-placeholder);
+  --buic-foreground-activehover: var(--iui-icons-color-actionable-hover);
+
+  --buic-inputs-border: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --buic-inputs-boxshadow: var(--iui-focus-box-shadow);
+  --buic-popup-boxshadow: var(--buic-inputs-boxshadow);
+
+  --buic-foreground-primary: var(--iui-icons-color-primary);
+  --buic-foreground-primary-tone: var(--iui-color-foreground-primary-overlay);
+  --buic-foreground-focus: var(--iui-color-foreground-primary-overlay);
+  --buic-foreground-focus-border: var(--buic-inputs-border);
+  --buic-focus-boxshadow: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+
+  // The following two are still in use by DatePicker and there is no itwinui equivalent
+  --buic-focus-boxshadow-gradient1: rgba(var(--buic-foreground-primary-tone-rgb), 0);
+  --buic-focus-boxshadow-gradient2: rgba(var(--buic-foreground-primary-rgb), 0.65);
+
+  --buic-foreground-accessory: var(--iui-color-foreground-accessory);
+  --buic-foreground-success: var(--iui-color-foreground-positive);
+  --buic-foreground-positive: var(--iui-color-foreground-positive);
+  --buic-foreground-positive-rgb: var(--iui-color-foreground-positive-rgb);
+  --buic-foreground-alert: var(--iui-color-foreground-negative);
+  --buic-foreground-negative: var(--iui-color-foreground-negative);
+  --buic-foreground-negative-rgb: var(--iui-color-foreground-negative-rgb);
+  --buic-foreground-warning: var(--iui-color-foreground-warning);
+  --buic-foreground-warning-rgb: var(--iui-color-foreground-warning-rgb);
+
+  --buic-background-focus-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --buic-background-hover-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  --buic-background-active-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  --buic-background-pressed-overlay: rgba(var(--iui-color-foreground-primary-rgb), 0.3);
+
+  --buic-background-card: var(--buic-background-tooltip);
+  --buic-background-striped_row: rgba(var(--iui-color-foreground-body-rgb), 0.03);
 
   /** background.5 */
-  --buic-background-titlebar:                 var(--buic-background-5);
-  --buic-background-dialog-stroke:            var(--buic-background-5);
-  --buic-background-widget-stroke:            var(--buic-background-5);
-  --buic-background-control-stroke:           var(--buic-background-5);
-  --buic-background-panel-stroke:             var(--buic-background-5);
-  --buic-background-toolbutton-stroke:        var(--buic-background-5);
+  --buic-background-titlebar: var(--buic-background-5);
+  --buic-background-dialog-stroke: var(--buic-background-5);
+  --buic-background-widget-stroke: var(--buic-background-5);
+  --buic-background-control-stroke: var(--buic-background-5);
+  --buic-background-panel-stroke: var(--buic-background-5);
+  --buic-background-toolbutton-stroke: var(--buic-background-5);
 
   /** background.4 */
-  --buic-background-titlebar-outoffocus:      var(--buic-background-4);
-  --buic-background-divider:                  var(--buic-background-4);
-  --buic-background-widget-element-stroke:    var(--buic-background-4);
-  --buic-background-statusbar:                var(--buic-background-4);
-  --buic-background-table-header:             var(--buic-background-4);
-  --buic-background-control-stroke-disabled:  var(--buic-background-4);
+  --buic-background-titlebar-outoffocus: var(--buic-background-4);
+  --buic-background-divider: var(--buic-background-4);
+  --buic-background-widget-element-stroke: var(--buic-background-4);
+  --buic-background-statusbar: var(--buic-background-4);
+  --buic-background-table-header: var(--buic-background-4);
+  --buic-background-control-stroke-disabled: var(--buic-background-4);
 
   /** background.3 */
-  --buic-background-tab-inactive:             var(--buic-background-3);
-  --buic-background-toolbutton-inactive:      var(--buic-background-3);
-  --buic-background-context-menu:             var(--buic-background-3);
-  --buic-background-panel:                    var(--buic-background-3);
-  --buic-background-widget-panel:             var(--buic-background-3);
-  --buic-background-placeholder:              var(--buic-background-3);
-  --buic-background-control-disabled:         var(--buic-background-3);
+  --buic-background-tab-inactive: var(--buic-background-3);
+  --buic-background-toolbutton-inactive: var(--buic-background-3);
+  --buic-background-context-menu: var(--buic-background-3);
+  --buic-background-widget-panel: var(--buic-background-3);
+  --buic-background-placeholder: var(--buic-background-3);
+  --buic-background-control-disabled: var(--buic-background-3);
 
   /** background.2 */
-  --buic-background-tab-active:               var(--buic-background-2);
-  --buic-background-dialog:                   var(--buic-background-2);
-  --buic-background-widget:                   var(--buic-background-2);
-  --buic-background-window:                   var(--buic-background-2);
-  --buic-background-toolbar:                  var(--buic-background-2);
+  --buic-background-tab-active: var(--buic-background-2);
+  --buic-background-dialog: var(--buic-background-2);
+  --buic-background-widget: var(--buic-background-2);
+  --buic-background-window: var(--buic-background-2);
+  --buic-background-toolbar: var(--buic-background-2);
+  --buic-background-panel: var(--buic-background-2);
 
   /** background.1 */
-  --buic-background-control:                  var(--buic-background-1);
+  --buic-background-control: var(--buic-background-1);
 }

package/lib/cjs/core-react/icons/IconComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAqB,MAAM,uBAAuB,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,oBAAY,QAAQ,GAAG,MAAM,GAAG,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sBAyBpC"}
+{"version":3,"file":"IconComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAqB,MAAM,uBAAuB,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C;;GAEG;AACH,oBAAY,QAAQ,GAAG,MAAM,GAAG,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sBA0CpC"}

package/lib/cjs/core-react/icons/IconComponent.js

@@ -3,6 +3,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Icon
  */
@@ -13,6 +14,7 @@ const React = require("react");
 const classnames_1 = require("classnames");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const SvgSprite_1 = require("./SvgSprite");
+const dompurify_1 = require("dompurify"), DOMPurifyNS = dompurify_1;
 /** Icon Functional component displays an icon based on an [[IconSpec]].
  * @public
  */
@@ -27,6 +29,20 @@ function Icon(props) {
         if (svgSource !== undefined)
             return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className), style: props.style },
                 React.createElement(SvgSprite_1.SvgSprite, { src: svgSource })));
+        const webComponentString = appui_abstract_1.IconSpecUtilities.getWebComponentSource(iconString);
+        if (webComponentString) {
+            const svgLoader = `<svg-loader src=${webComponentString} id="svg-id"></svg-loader>`;
+            const svgDiv = `<div>${svgLoader}</div>`;
+            // the esm build of dompurify has a default import but the cjs build does not
+            // if there is a default export, use it (likely esm), otherwise use the namespace
+            // istanbul ignore next
+            const sanitizer = dompurify_1.default !== null && dompurify_1.default !== void 0 ? dompurify_1.default : DOMPurifyNS;
+            const sanitizedIconString = sanitizer.sanitize(svgDiv, { ALLOWED_TAGS: ["svg-loader"] });
+            // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above
+            // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger
+            const webComponentNode = React.createElement("div", { dangerouslySetInnerHTML: { __html: sanitizedIconString } });
+            return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className) }, webComponentNode));
+        }
         return (React.createElement("i", { className: (0, classnames_1.default)("icon", iconString, props.className), style: props.style }));
     }
     return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className), style: props.style }, props.iconSpec));

package/lib/cjs/core-react/icons/IconComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAClF,2CAAwC;AAkBxC;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,kCAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,qBAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QAEJ,OAAO,CAAC,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,CACb,CACL,CAAC;AACJ,CAAC;AAzBD,oBAyBC","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 Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { SvgSprite } from \"./SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n  /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly\r\n   * used to extend other interfaces and changing it would break existing API.\r\n   */\r\n  iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n  if (!props.iconSpec)\r\n    return null;\r\n\r\n  const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n    ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n  if (iconString) {\r\n    const svgSource = IconSpecUtilities.getSvgSource(iconString);\r\n    // if string begins with \"svg:\" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader\r\n    if (svgSource !== undefined)\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n          <SvgSprite src={svgSource} />\r\n        </i>\r\n      );\r\n\r\n    return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n  }\r\n\r\n  return (\r\n    <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n      {props.iconSpec}\r\n    </i>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAClF,2CAAwC;AAExC,oEAAoD;AAiBpD;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,kCAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,qBAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,kCAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,EAAC;YACrB,MAAM,SAAS,GAAG,mBAAmB,kBAAkB,4BAA4B,CAAC;YACpF,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,mBAAS,aAAT,mBAAS,cAAT,mBAAS,GAAI,WAAW,CAAC;YAC3C,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAC,CAAC,CAAC;YACvF,iFAAiF;YACjF,+FAA+F;YAC/F,MAAM,gBAAgB,GAAG,6BAAK,uBAAuB,EAAE,EAAC,MAAM,EAAC,mBAAmB,EAAC,GAAQ,CAAC;YAC5F,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CAAC,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,CACb,CACL,CAAC;AACJ,CAAC;AA1CD,oBA0CC","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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { SvgSprite } from \"./SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n  /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly\r\n   * used to extend other interfaces and changing it would break existing API.\r\n   */\r\n  iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n  if (!props.iconSpec)\r\n    return null;\r\n\r\n  const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n    ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n  if (iconString) {\r\n    const svgSource = IconSpecUtilities.getSvgSource(iconString);\r\n    // if string begins with \"svg:\" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader\r\n    if (svgSource !== undefined)\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n          <SvgSprite src={svgSource} />\r\n        </i>\r\n      );\r\n    const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);\r\n    if (webComponentString){\r\n      const svgLoader = `<svg-loader src=${webComponentString} id=\"svg-id\"></svg-loader>`;\r\n      const svgDiv = `<div>${svgLoader}</div>`;\r\n      // the esm build of dompurify has a default import but the cjs build does not\r\n      // if there is a default export, use it (likely esm), otherwise use the namespace\r\n      // istanbul ignore next\r\n      const sanitizer = DOMPurify ?? DOMPurifyNS;\r\n      const sanitizedIconString = sanitizer.sanitize(svgDiv, {ALLOWED_TAGS: [\"svg-loader\"]});\r\n      // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\r\n      // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger\r\n      const webComponentNode = <div dangerouslySetInnerHTML={{__html:sanitizedIconString}}></div>;\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} >\r\n          {webComponentNode}\r\n        </i>\r\n      );\r\n    }\r\n    return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n  }\r\n\r\n  return (\r\n    <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n      {props.iconSpec}\r\n    </i>\r\n  );\r\n}\r\n"]}

package/lib/cjs/core-react/icons/IconComponent.scss

@@ -13,3 +13,8 @@
     fill: currentColor;
   }
 }
+
+.icon.core-menuitem-icon {
+  font-size: 16px;
+}
+

package/lib/cjs/core-react/icons/SvgSprite.d.ts

@@ -5,14 +5,15 @@ import "./SvgSprite.scss";
 import * as React from "react";
 import { CommonProps } from "../utils/Props";
 /** Properties of [[SvgSprite]] component.
- * @public
+ * @public @deprecated
  */
 export interface SvgSpriteProps extends CommonProps {
     /** Source for the Svg */
     src: string;
 }
 /** Svg element wrapper.
- * @public
+ * This component is deprecate -- use IconComponent
+ * @public @deprecated
  */
 export declare class SvgSprite extends React.PureComponent<SvgSpriteProps> {
     render(): JSX.Element;

package/lib/cjs/core-react/icons/SvgSprite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgSprite.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgSprite.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;CAYvB"}
+{"version":3,"file":"SvgSprite.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgSprite.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;CAYvB"}

package/lib/cjs/core-react/icons/SvgSprite.js

@@ -3,6 +3,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Icon
  */
@@ -12,7 +13,8 @@ require("./SvgSprite.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
 /** Svg element wrapper.
- * @public
+ * This component is deprecate -- use IconComponent
+ * @public @deprecated
  */
 class SvgSprite extends React.PureComponent {
     render() {

package/lib/cjs/core-react/icons/SvgSprite.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgSprite.js","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgSprite.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,sBAAsB,EACtB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM;YAC5E,6BAAK,UAAU,EAAC,8BAA8B,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAI,CACxE,CACP,CAAC;IACJ,CAAC;CACF;AAbD,8BAaC","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 Icon\r\n */\r\n\r\nimport \"./SvgSprite.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties of [[SvgSprite]] component.\r\n * @public\r\n */\r\nexport interface SvgSpriteProps extends CommonProps {\r\n  /** Source for the Svg */\r\n  src: string;\r\n}\r\n\r\n/** Svg element wrapper.\r\n * @public\r\n */\r\nexport class SvgSprite extends React.PureComponent<SvgSpriteProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-icons-svgSprite\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <svg className={className} style={this.props.style} width=\"100%\" height=\"100%\">\r\n        <use xmlnsXlink=\"http://www.w3.org/1999/xlink\" xlinkHref={this.props.src} />\r\n      </svg>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"SvgSprite.js","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgSprite.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAW/B;;;GAGG;AACH,MAAa,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,sBAAsB,EACtB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM;YAC5E,6BAAK,UAAU,EAAC,8BAA8B,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAI,CACxE,CACP,CAAC;IACJ,CAAC;CACF;AAbD,8BAaC","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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./SvgSprite.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties of [[SvgSprite]] component.\r\n * @public @deprecated\r\n */\r\nexport interface SvgSpriteProps extends CommonProps {\r\n  /** Source for the Svg */\r\n  src: string;\r\n}\r\n\r\n/** Svg element wrapper.\r\n * This component is deprecate -- use IconComponent\r\n * @public @deprecated\r\n */\r\nexport class SvgSprite extends React.PureComponent<SvgSpriteProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-icons-svgSprite\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <svg className={className} style={this.props.style} width=\"100%\" height=\"100%\">\r\n        <use xmlnsXlink=\"http://www.w3.org/1999/xlink\" xlinkHref={this.props.src} />\r\n      </svg>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/inputs/Input.js

@@ -16,7 +16,7 @@ const useRefs_1 = require("../utils/hooks/useRefs");
 const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
 function ForwardRefInput(props, ref) {
     const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
-    const inputElementRef = React.useRef();
+    const inputElementRef = React.useRef(null);
     const refs = (0, useRefs_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
     React.useEffect(() => {
         const currentElement = inputElementRef.current;

package/lib/cjs/core-react/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACzD,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n  /** Indicates whether to set focus to the input element */\r\n  setFocus?: boolean;\r\n  /** Native keydown event handler */\r\n  nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>(   // eslint-disable-line deprecation/deprecation\r\n  function ForwardRefInput(props, ref) {\r\n    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    const inputElementRef = React.useRef<HTMLInputElement>();\r\n    const refs = useRefs(inputElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n    React.useEffect(() => {\r\n      const currentElement = inputElementRef.current;\r\n      const currentHandler = nativeKeyHandler;\r\n\r\n      if (currentElement && currentHandler) {\r\n        currentElement.addEventListener(\"keydown\", currentHandler);\r\n      }\r\n      return () => {\r\n        if (currentHandler && currentElement) {\r\n          currentElement.removeEventListener(\"keydown\", currentHandler);\r\n        }\r\n      };\r\n    }, [nativeKeyHandler]);\r\n\r\n    React.useEffect(() => {\r\n      if (inputElementRef.current && setFocus)\r\n        inputElementRef.current.focus();\r\n    }, [setFocus]);\r\n\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    return (\r\n      <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n        className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n    );\r\n  }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput;  // eslint-disable-line deprecation/deprecation\r\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n  /** Indicates whether to set focus to the input element */\r\n  setFocus?: boolean;\r\n  /** Native keydown event handler */\r\n  nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>(   // eslint-disable-line deprecation/deprecation\r\n  function ForwardRefInput(props, ref) {\r\n    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    const inputElementRef = React.useRef<HTMLInputElement>(null);\r\n    const refs = useRefs(inputElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n    React.useEffect(() => {\r\n      const currentElement = inputElementRef.current;\r\n      const currentHandler = nativeKeyHandler;\r\n\r\n      if (currentElement && currentHandler) {\r\n        currentElement.addEventListener(\"keydown\", currentHandler);\r\n      }\r\n      return () => {\r\n        if (currentHandler && currentElement) {\r\n          currentElement.removeEventListener(\"keydown\", currentHandler);\r\n        }\r\n      };\r\n    }, [nativeKeyHandler]);\r\n\r\n    React.useEffect(() => {\r\n      if (inputElementRef.current && setFocus)\r\n        inputElementRef.current.focus();\r\n    }, [setFocus]);\r\n\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    return (\r\n      <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n        className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n    );\r\n  }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput;  // eslint-disable-line deprecation/deprecation\r\n"]}

package/lib/cjs/core-react/inputs/Textarea.js

@@ -17,7 +17,7 @@ const ForwardRefTextarea = React.forwardRef(// eslint-disable-line deprecation/d
 function ForwardRefTextarea(props, ref) {
     const { className, style, rows, setFocus, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
     const textRows = undefined !== rows ? rows : 3;
-    const textAreaElementRef = React.useRef();
+    const textAreaElementRef = React.useRef(null);
     const refs = (0, useRefs_1.useRefs)(textAreaElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
     React.useEffect(() => {
         if (textAreaElementRef.current && setFocus)