@itwin/imodel-components-react 4.17.6 → 5.0.0-dev.3

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.scss

@@ -2,8 +2,6 @@
  * 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";
-
 .speed-timeline {
   position: relative;
   height: 25px;
@@ -22,7 +20,7 @@
     width: 100%;
     height: 2px;
     pointer-events: none;
-    background: $buic-background-5;
+    background: var(--iui-color-background-disabled);
   }
 
   .scrubberHandle {
@@ -35,6 +33,6 @@
     cursor: pointer;
     border: none;
     border-radius: 50%;
-    background: $buic-foreground-primary;
+    background: var(--iui-color-icon-accent);
   }
 }

package/lib/esm/imodel-components-react/timeline/Timeline.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";
-
 .timeline {
   position: relative;
   height: 110px;
-  background: $buic-background-1;
-  border: 1px solid $buic-background-5;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-background-disabled);
   box-sizing: border-box;
 }
 
@@ -31,7 +29,7 @@
   height: 4px;
   cursor: pointer;
   pointer-events: none;
-  background: $buic-background-5;
+  background: var(--iui-color-background-disabled);
 }
 
 .tooltip-rail {
@@ -49,7 +47,7 @@
   z-index: 4;
   width: 2px;
   height: 100%;
-  background: $buic-foreground-primary;
+  background: var(--iui-color-icon-accent);
   cursor: pointer;
 }
 
@@ -63,8 +61,8 @@
   cursor: pointer;
   border: none;
   border-radius: 50%;
-  background: $buic-foreground-primary;
-  border: 2px solid $buic-background-1;
+  background: var(--iui-color-icon-accent);
+  border: 2px solid var(--iui-color-background);
 
   > span {
     position: absolute;
@@ -104,7 +102,7 @@
   width: 2px;
   height: 11px;
   transform: translateX(-50%);
-  background: $buic-background-5;
+  background: var(--iui-color-background-disabled);
 }
 
 .tick-label {

package/lib/{cjs/imodel-components-react → imodel-components-react}/UiIModelComponents.d.ts

@@ -24,6 +24,6 @@ export declare class UiIModelComponents {
      */
     static translate(key: string | string[]): string;
     /** @internal */
-    static loggerCategory(obj: any): string;
+    static loggerCategory(name: string): string;
 }
 //# sourceMappingURL=UiIModelComponents.d.ts.map

package/lib/imodel-components-react/UiIModelComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiIModelComponents.d.ts","sourceRoot":"","sources":["../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAIA;;GAEG;AAOH;;;GAGG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IAEpC;;OAEG;WACiB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAyB/C,gEAAgE;WAClD,SAAS;IAQvB,4DAA4D;IAC5D,WAAkB,WAAW,IAAI,OAAO,CAEvC;IAED,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAavD,gBAAgB;WACF,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAGnD"}

package/lib/{esm/imodel-components-react → imodel-components-react}/UiIModelComponents.js

@@ -9,7 +9,6 @@ import { Logger } from "@itwin/core-bentley";
 import { IModelApp } from "@itwin/core-frontend";
 import { UiComponents } from "@itwin/components-react";
 import { EmptyLocalization } from "@itwin/core-common";
-import { getObjectClassName } from "@itwin/core-react";
 /**
  * Manages the localization service for the imodel-components-react package.
  * @public
@@ -20,7 +19,7 @@ export class UiIModelComponents {
      */
     static async initialize() {
         if (UiIModelComponents._initialized) {
-            Logger.logInfo(UiIModelComponents.loggerCategory(UiIModelComponents), `UiIModelComponents.initialize already called`);
+            Logger.logInfo(UiIModelComponents.loggerCategory("UiIModelComponents"), `UiIModelComponents.initialize already called`);
             return;
         }
         await IModelApp.localization?.registerNamespace(UiIModelComponents.localizationNamespace);
@@ -58,16 +57,14 @@ export class UiIModelComponents {
      */
     static translate(key) {
         if (!UiIModelComponents.initialized || !IModelApp.localization) {
-            Logger.logError(UiIModelComponents.loggerCategory(this), `translate: IModelApp.localization has not been setup. Returning blank string.`);
+            Logger.logError(UiIModelComponents.loggerCategory("UiIModelComponents"), `translate: IModelApp.localization has not been setup. Returning blank string.`);
             return "";
         }
         return IModelApp.localization.getLocalizedString(`${UiIModelComponents.localizationNamespace}:${key}`);
     }
     /** @internal */
-    static loggerCategory(obj) {
-        const className = getObjectClassName(obj);
-        const category = UiIModelComponents.packageName + (className ? `.${className}` : "");
-        return category;
+    static loggerCategory(name) {
+        return `${UiIModelComponents.packageName}.${name}`;
     }
 }
 UiIModelComponents._initialized = false;

package/lib/imodel-components-react/UiIModelComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiIModelComponents.js","sourceRoot":"","sources":["../../src/imodel-components-react/UiIModelComponents.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,kBAAkB;IAG7B;;OAEG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU;QAC5B,IAAI,kBAAkB,CAAC,YAAY,EAAE,CAAC;YACpC,MAAM,CAAC,OAAO,CACZ,kBAAkB,CAAC,cAAc,CAAC,oBAAoB,CAAC,EACvD,8CAA8C,CAC/C,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,SAAS,CAAC,YAAY,EAAE,iBAAiB,CAC7C,kBAAkB,CAAC,qBAAqB,CACzC,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YAC5B,oEAAoE;YACpE,MAAM,YAAY,GAAG,IAAI,iBAAiB,EAAE,CAAC;YAC7C,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;YAChC,MAAM,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,MAAM,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACxD,CAAC;QAED,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzC,CAAC;IAED,gEAAgE;IACzD,MAAM,CAAC,SAAS;QACrB,SAAS,CAAC,YAAY,EAAE,mBAAmB,CACzC,kBAAkB,CAAC,qBAAqB,CACzC,CAAC;QACF,YAAY,CAAC,SAAS,EAAE,CAAC;QACzB,kBAAkB,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1C,CAAC;IAED,4DAA4D;IACrD,MAAM,KAAK,WAAW;QAC3B,OAAO,kBAAkB,CAAC,YAAY,CAAC;IACzC,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,qBAAqB;QACrC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,gBAAgB;IACT,MAAM,KAAK,WAAW;QAC3B,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB;QAC5C,IAAI,CAAC,kBAAkB,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YAC/D,MAAM,CAAC,QAAQ,CACb,kBAAkB,CAAC,cAAc,CAAC,oBAAoB,CAAC,EACvD,+EAA+E,CAChF,CAAC;YACF,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAC9C,GAAG,kBAAkB,CAAC,qBAAqB,IAAI,GAAG,EAAE,CACrD,CAAC;IACJ,CAAC;IAED,gBAAgB;IACT,MAAM,CAAC,cAAc,CAAC,IAAY;QACvC,OAAO,GAAG,kBAAkB,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;IACrD,CAAC;;AAzEc,+BAAY,GAAG,KAAK,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\nimport { Logger } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { UiComponents } from \"@itwin/components-react\";\nimport { EmptyLocalization } from \"@itwin/core-common\";\n\n/**\n * Manages the localization service for the imodel-components-react package.\n * @public\n */\nexport class UiIModelComponents {\n  private static _initialized = false;\n\n  /**\n   * initialize UiIModelComponents.\n   */\n  public static async initialize(): Promise<void> {\n    if (UiIModelComponents._initialized) {\n      Logger.logInfo(\n        UiIModelComponents.loggerCategory(\"UiIModelComponents\"),\n        `UiIModelComponents.initialize already called`\n      );\n      return;\n    }\n\n    await IModelApp.localization?.registerNamespace(\n      UiIModelComponents.localizationNamespace\n    );\n\n    if (!IModelApp.localization) {\n      // it should only get here in unit test where IModelApp is not setup\n      const localization = new EmptyLocalization();\n      await localization.initialize();\n      await UiComponents.initialize(localization);\n    } else {\n      await UiComponents.initialize(IModelApp.localization);\n    }\n\n    UiIModelComponents._initialized = true;\n  }\n\n  /** Unregisters the UiIModelComponents localization namespace */\n  public static terminate() {\n    IModelApp.localization?.unregisterNamespace(\n      UiIModelComponents.localizationNamespace\n    );\n    UiComponents.terminate();\n    UiIModelComponents._initialized = false;\n  }\n\n  /** Determines if UiIModelComponents has been initialized */\n  public static get initialized(): boolean {\n    return UiIModelComponents._initialized;\n  }\n\n  /** The internationalization service namespace. */\n  public static get localizationNamespace(): string {\n    return \"UiIModelComponents\";\n  }\n\n  /** @internal */\n  public static get packageName(): string {\n    return \"imodel-components-react\";\n  }\n\n  /** Calls localization.getLocalizedString with the \"UiIModelComponents\" namespace. Do NOT include the namespace in the key.\n   * @internal\n   */\n  public static translate(key: string | string[]): string {\n    if (!UiIModelComponents.initialized || !IModelApp.localization) {\n      Logger.logError(\n        UiIModelComponents.loggerCategory(\"UiIModelComponents\"),\n        `translate: IModelApp.localization has not been setup. Returning blank string.`\n      );\n      return \"\";\n    }\n    return IModelApp.localization.getLocalizedString(\n      `${UiIModelComponents.localizationNamespace}:${key}`\n    );\n  }\n\n  /** @internal */\n  public static loggerCategory(name: string): string {\n    return `${UiIModelComponents.packageName}.${name}`;\n  }\n}\n"]}

package/lib/imodel-components-react/color/AlphaSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAE1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AAEH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IAEjD,gBAAgB;gBAEJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAuDtB;IAEc,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAcf;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,UAAU,CA6BhB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAKb,MAAM,IAAI,KAAK,CAAC,SAAS;CA0C1C"}

package/lib/{esm/imodel-components-react → imodel-components-react}/color/AlphaSlider.js

@@ -9,7 +9,7 @@ import "./AlphaSlider.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { Key } from "ts-key-enum";
-import { UiIModelComponents } from "../UiIModelComponents";
+import { UiIModelComponents } from "../UiIModelComponents.js";
 /** AlphaSlider component used to set the alpha value.
  * @public
  * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.

package/lib/imodel-components-react/color/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents.js\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n * @deprecated in 4.11.0. Props of deprecated component {@link AlphaSlider}.\n */\nexport interface AlphaSliderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** true if slider is oriented horizontal, else vertical orientation is assumed */\n  isHorizontal?: boolean;\n  /** function to run when user selects color swatch */\n  onAlphaChange?: ((alpha: number) => void) | undefined;\n  /** Alpha value between 0 (transparent) and 1 (opaque) */\n  alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @public\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n  private _container: HTMLDivElement | null = null;\n\n  /** @internal */\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(props: AlphaSliderProps) {\n    super(props);\n  }\n\n  private _calculateChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n    isHorizontal: boolean,\n    alpha: number,\n    container: HTMLDivElement\n  ): number | undefined => {\n    e.preventDefault();\n    const { width: containerWidth, height: containerHeight } =\n      container.getBoundingClientRect();\n\n    let x = 0;\n    if (\"pageX\" in e) {\n      x = e.pageX;\n    } else {\n      if (undefined === e.touches) return undefined;\n      x = e.touches[0].pageX;\n    }\n    if (undefined === x) return undefined;\n\n    let y = 0;\n    if (\"pageY\" in e) {\n      y = e.pageY;\n    } else {\n      if (undefined === e.touches) return;\n      y = e.touches[0].pageY;\n    }\n    if (undefined === y) return undefined;\n\n    const left = x - (container.getBoundingClientRect().left + window.scrollX);\n    const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n    let t = 0;\n\n    if (!isHorizontal) {\n      if (top < 0) {\n        t = 1;\n      } else if (top > containerHeight) {\n        t = 0;\n      } else {\n        t = 1 - top / containerHeight;\n      }\n    } else {\n      // horizontal\n      if (left < 0) {\n        t = 0;\n      } else if (left > containerWidth) {\n        t = 1;\n      } else {\n        t = left / containerWidth;\n      }\n    }\n\n    if (t < 0) t = 0;\n    if (t > 1) t = 1;\n    return alpha !== t ? t : undefined;\n  };\n\n  public override componentWillUnmount() {\n    this._unbindEventListeners();\n  }\n\n  private _onChange = (\n    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    if (this._container && this.props.onAlphaChange) {\n      const change = this._calculateChange(\n        e,\n        this.props.isHorizontal ? this.props.isHorizontal : false,\n        this.props.alpha,\n        this._container\n      );\n      undefined !== change &&\n        typeof this.props.onAlphaChange === \"function\" &&\n        this.props.onAlphaChange(change);\n    }\n  };\n\n  private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n    this._onChange(e);\n    if (this._container) this._container.focus();\n    window.addEventListener(\"mousemove\", this._onChange as any);\n    window.addEventListener(\"mouseup\", this._onMouseUp);\n  };\n\n  private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    let newTransparency: number | undefined;\n    if (\n      evt.key === Key.ArrowLeft.valueOf() ||\n      evt.key === Key.ArrowDown.valueOf()\n    ) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (\n      evt.key === Key.ArrowRight.valueOf() ||\n      evt.key === Key.ArrowUp.valueOf()\n    ) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n    } else if (evt.key === Key.PageDown.valueOf()) {\n      newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.PageUp.valueOf()) {\n      newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);\n    } else if (evt.key === Key.Home.valueOf()) {\n      newTransparency = 0;\n    } else {\n      if (evt.key === Key.End.valueOf()) {\n        newTransparency = 1;\n      }\n    }\n\n    if (undefined !== newTransparency) {\n      if (newTransparency > 1) newTransparency = 1;\n      if (newTransparency < 0) newTransparency = 0;\n      if (this.props.onAlphaChange) this.props.onAlphaChange(newTransparency);\n    }\n  };\n\n  private _onMouseUp = () => {\n    this._unbindEventListeners();\n  };\n\n  private _unbindEventListeners() {\n    window.removeEventListener(\"mousemove\", this._onChange as any);\n    window.removeEventListener(\"mouseup\", this._onMouseUp);\n  }\n\n  public override render(): React.ReactNode {\n    const containerClasses = classnames(\n      this.props.isHorizontal\n        ? \"components-alpha-container-horizontal\"\n        : \"components-alpha-container-vertical\",\n      this.props.className\n    );\n\n    const pointerStyle: React.CSSProperties = this.props.isHorizontal\n      ? { left: `${this.props.alpha * 100}%` }\n      : { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n    return (\n      <div\n        className={containerClasses}\n        style={this.props.style}\n        data-testid=\"alpha-container\"\n      >\n        <div\n          data-testid=\"alpha-slider\"\n          role=\"slider\"\n          aria-label={UiIModelComponents.translate(\"color.transparency\")}\n          aria-valuemin={0}\n          aria-valuemax={1}\n          aria-valuenow={this.props.alpha}\n          className=\"components-alpha-slider\"\n          ref={(container) => (this._container = container)}\n          onMouseDown={this._onMouseDown}\n          onTouchMove={this._onChange}\n          onTouchStart={this._onChange}\n          tabIndex={0}\n          onKeyDown={this._onKeyDown}\n        >\n          <div\n            style={pointerStyle}\n            className=\"components-alpha-pointer\"\n            data-testid=\"alpha-pointer\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/imodel-components-react/color/AlphaSlider.scss

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-alpha-pointer {
+  position: absolute;
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  background-color: rgb(248, 248, 248);
+  box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+
+.components-alpha-container-horizontal {
+  width: 100%;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .components-alpha-slider {
+    position: relative;
+    width: calc(100% - 1.2rem);
+    height: 100%;
+    background-color: linear-gradient(
+      to right,
+      rgba(47, 37, 72, 0) 0%,
+      rgb(47, 37, 72) 100%
+    );
+    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
+      linear-gradient(to right, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-size: 2rem 1rem, cover;
+    background-repeat: repeat, no-repeat;
+
+    .components-alpha-pointer {
+      transform: translate(-0.6rem, -0.1rem);
+    }
+  }
+}
+
+.components-alpha-container-vertical {
+  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .components-alpha-slider {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 1.2rem);
+    background-color: linear-gradient(
+      to bottom,
+      rgba(47, 37, 72, 0) 0%,
+      rgb(47, 37, 72) 100%
+    );
+    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".15"><rect x="200" width="200" height="200" /> <rect y="200" width="200" height="200" /></svg>'),
+      linear-gradient(to top, rgba(47, 37, 72, 0) 0%, rgb(47, 37, 72) 100%);
+    background-size: 1rem 2rem, cover;
+    background-repeat: repeat, no-repeat;
+
+    .components-alpha-pointer {
+      transform: translate(-0.1rem, -0.6rem);
+    }
+  }
+}

package/lib/imodel-components-react/color/ColorPickerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerButton.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgDrD;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAEnD,WAAW;IACb,mBAAmB;IACnB,YAAY,EAAE,QAAQ,CAAC;IACvB,uBAAuB;IACvB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqID;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,CAE9B,KAAK,EAAE,gBAAgB,KACpB,KAAK,CAAC,SAAuC,CAAC"}

package/lib/{esm/imodel-components-react → imodel-components-react}/color/ColorPickerButton.js

@@ -10,9 +10,10 @@ import classnames from "classnames";
 import * as React from "react";
 import { ColorByName, ColorDef } from "@itwin/core-common";
 import { RelativePosition } from "@itwin/appui-abstract";
-import { Icon, Popup, useRefs } from "@itwin/core-react";
-import { ColorSwatch } from "./Swatch";
-import { getCSSColorFromDef } from "./getCSSColorFromDef";
+import { Icon, Popup } from "@itwin/core-react";
+import { useRefs } from "@itwin/core-react/internal";
+import { ColorSwatch } from "./Swatch.js";
+import { getCSSColorFromDef } from "./getCSSColorFromDef.js";
 import { SvgCaretDownSmall, SvgCaretUpSmall } from "@itwin/itwinui-icons-react";
 // cSpell:ignore colorpicker
 function ColorOptions({ handleColorPicked, options, numColumns, round, title, }) {

package/lib/imodel-components-react/color/ColorPickerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./ColorPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { useRefs } from \"@itwin/core-react/internal\";\nimport { ColorSwatch } from \"./Swatch.js\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef.js\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n// cSpell:ignore colorpicker\n\nfunction ColorOptions({\n  handleColorPicked,\n  options,\n  numColumns,\n  round,\n  title,\n}: {\n  handleColorPicked: (color: ColorDef) => void;\n  options: ColorDef[];\n  numColumns: number;\n  round: boolean;\n  title?: string;\n}) {\n  const containerStyle: React.CSSProperties = {\n    gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n  };\n  return (\n    <div className=\"components-colorpicker-popup-container\">\n      {title && <h4>{title}</h4>}\n      <div\n        data-testid=\"components-colorpicker-popup-colors\"\n        className=\"components-colorpicker-popup-colors\"\n        style={containerStyle}\n      >\n        {options.map((color, index) => (\n          // eslint-disable-next-line deprecation/deprecation\n          <ColorSwatch\n            className=\"components-colorpicker-swatch\"\n            key={index}\n            colorDef={color}\n            onColorPick={handleColorPicked}\n            round={round}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/** Properties for the [[ColorPickerButton]] React component\n * @beta\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerButton}.\n */\nexport interface ColorPickerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** Active color */\n  initialColor: ColorDef;\n  /** Available colors */\n  colorDefs?: ColorDef[];\n  /** Function to run when user selects color swatch */\n  onColorPick?: ((color: ColorDef) => void) | undefined;\n  /** Show swatches as squares unless round is set to true */\n  round?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns?: number;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n}\n\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\nconst ForwardRefColorPickerButton = React.forwardRef<\n  HTMLButtonElement,\n  // eslint-disable-next-line deprecation/deprecation\n  ColorPickerProps\n>(function ForwardRefColorPickerButton(\n  {\n    className,\n    colorDefs,\n    disabled,\n    dropDownTitle,\n    initialColor,\n    numColumns,\n    onColorPick,\n    readonly,\n    round,\n    showCaret,\n    style,\n  },\n  ref\n) {\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(initialColor);\n\n  // See if new initialColor props have changed since component mounted\n  React.useEffect(() => {\n    setColorDef(initialColor);\n  }, [initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorDef.create(ColorByName.red),\n    ColorDef.create(ColorByName.orange),\n    ColorDef.create(ColorByName.yellow),\n    ColorDef.create(ColorByName.green),\n    ColorDef.create(ColorByName.blue),\n    ColorDef.create(ColorByName.indigo),\n    ColorDef.create(ColorByName.violet),\n    ColorDef.create(ColorByName.black),\n    ColorDef.create(ColorByName.white),\n    ColorDef.create(ColorByName.cyan),\n    ColorDef.create(ColorByName.fuchsia),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.gray),\n    ColorDef.create(ColorByName.brown),\n    ColorDef.create(ColorByName.purple),\n    ColorDef.create(ColorByName.olive),\n  ]);\n\n  const closePopup = React.useCallback(() => {\n    setShowPopup(false);\n  }, []);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorPicked = React.useCallback(\n    (color: ColorDef) => {\n      closePopup();\n\n      if (!color.equals(colorDef)) {\n        setColorDef(color);\n        onColorPick && onColorPick(color);\n      }\n    },\n    [closePopup, colorDef, onColorPick]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n\n  const buttonClassNames = classnames(\n    \"components-colorpicker-button\",\n    round && \"round\",\n    readonly && \"readonly\",\n    className\n  );\n\n  const colorOptions =\n    colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\n  return (\n    <>\n      <button\n        data-testid=\"components-colorpicker-button\"\n        data-value={rgbaString}\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={disabled}\n        ref={refs}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {showCaret && (\n            // eslint-disable-next-line deprecation/deprecation\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={RelativePosition.BottomLeft}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <ColorOptions\n          handleColorPicked={handleColorPicked}\n          options={colorOptions}\n          numColumns={numColumns ?? 4}\n          round={!!round}\n          title={dropDownTitle}\n        />\n      </Popup>\n    </>\n  );\n});\n\n/** ColorPickerButton component\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @beta\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerButton: (\n  // eslint-disable-next-line deprecation/deprecation\n  props: ColorPickerProps\n) => React.ReactNode = ForwardRefColorPickerButton;\n"]}

package/lib/imodel-components-react/color/ColorPickerButton.scss

@@ -0,0 +1,88 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+button.components-colorpicker-button {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--iui-border-radius-1);
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  > .components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--iui-border-radius-1);
+
+    > .components-colorpicker-button-color-swatch {
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
+    }
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    > .components-colorpicker-button-container {
+      > .components-caret {
+        color: var(--iui-color-text-disabled);
+      }
+    }
+  }
+
+  &.round {
+    .components-colorpicker-button-container {
+      border-bottom-left-radius: 50%;
+      border-top-left-radius: 50%;
+    }
+
+    .components-colorpicker-button-color-swatch {
+      border-radius: 50%;
+    }
+  }
+}
+
+.components-colorpicker-popup {
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: 6px;
+
+  .components-colorpicker-popup-container {
+    color: var(--iui-color-text);
+    background: var(--iui-color-background);
+    border-radius: 6px;
+
+    > .components-colorpicker-popup-colors {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      > .components-colorpicker-swatch {
+        height: 1.5em;
+        width: 1.5em;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+      }
+    }
+  }
+}

package/lib/imodel-components-react/color/ColorPickerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAS9C;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EACD,sBAAsB,qBA0DrB"}

package/lib/imodel-components-react/color/ColorPickerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,sBAAsB,CAAC;AAiB9B;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GAEM;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,cAAc;YAAE,cAAc,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC;QACJ,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QAEvB,oBAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,WAAW,IACV,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,kBAAkB;gBAEpC,oBAAC,YAAY,OAAG;gBACf,cAAc,IAAI,CACjB,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI,CACxD;gBACA,YAAY,IAAI,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC3C,CACP,CACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerDialog}.\n */\nexport interface ColorPickerDialogProps {\n  dialogTitle: string;\n  color: ColorDef;\n  onOkResult: (selectedColor: ColorDef) => void;\n  onCancelResult: () => void;\n  /** displayed in rows of 9 items */\n  colorPresets?: ColorDef[];\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function ColorPickerDialog({\n  dialogTitle,\n  color,\n  onOkResult,\n  onCancelResult,\n  colorPresets,\n  colorInputType,\n}: // eslint-disable-next-line deprecation/deprecation\nColorPickerDialogProps) {\n  const [activeColor, setActiveColor] = React.useState(color);\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    onOkResult(activeColor);\n  }, [onOkResult, activeColor]);\n  const handleCancel = React.useCallback(() => {\n    if (onCancelResult) onCancelResult();\n  }, [onCancelResult]);\n\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n    setActiveColor(newColorDef);\n  }, []);\n\n  const buttonCluster = React.useMemo(\n    () => [\n      { type: DialogButtonType.OK, onClick: handleOk },\n      { type: DialogButtonType.Cancel, onClick: handleCancel },\n    ],\n    [handleCancel, handleOk]\n  );\n\n  const colorOptions = React.useMemo(() => {\n    if (colorPresets) {\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    return undefined;\n  }, [colorPresets]);\n\n  return (\n    <div ref={dialogContainer}>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={false}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        maxWidth={320}\n      >\n        <ColorPicker\n          selectedColor={ColorValue.fromTbgr(activeColor.tbgr)}\n          onChangeComplete={handleColorChanged}\n        >\n          <ColorBuilder />\n          {colorInputType && (\n            <ColorInputPanel defaultColorFormat={colorInputType} />\n          )}\n          {colorOptions && <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div>\n  );\n}\n"]}

package/lib/imodel-components-react/color/ColorPickerPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUrD,OAAO,yBAAyB,CAAC;AASjC;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAEnD,WAAW;IACb,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAgKD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAE7B,KAAK,EAAE,qBAAqB,KACzB,KAAK,CAAC,SAAsC,CAAC"}

package/lib/{esm/imodel-components-react → imodel-components-react}/color/ColorPickerPopup.js

@@ -9,12 +9,13 @@ import * as React from "react";
 import classnames from "classnames";
 import { ColorByName, ColorDef } from "@itwin/core-common";
 import { RelativePosition } from "@itwin/appui-abstract";
-import { Icon, Popup, useRefs } from "@itwin/core-react";
+import { Icon, Popup } from "@itwin/core-react";
+import { useRefs } from "@itwin/core-react/internal";
 import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue, } from "@itwin/itwinui-react";
 import "./ColorPickerPopup.scss";
-import { getCSSColorFromDef } from "./getCSSColorFromDef";
+import { getCSSColorFromDef } from "./getCSSColorFromDef.js";
 import { SvgCaretDownSmall, SvgCaretUpSmall, SvgClose, } from "@itwin/itwinui-icons-react";
-import { useTranslation } from "../useTranslation";
+import { useTranslation } from "../useTranslation.js";
 // Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
 const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
     const { translate } = useTranslation();

package/lib/imodel-components-react/color/ColorPickerPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { useRefs } from \"@itwin/core-react/internal\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef.js\";\nimport {\n  SvgCaretDownSmall,\n  SvgCaretUpSmall,\n  SvgClose,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../useTranslation.js\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerPopup}.\n */\nexport interface ColorPickerPopupProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** Current color */\n  initialColor: ColorDef;\n  /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n   *  Displayed in rows of 9 items */\n  colorDefs?: ColorDef[];\n  /** Function to call when the color value is changed */\n  onColorChange?: ((newColor: ColorDef) => void) | undefined;\n  /** Function to call when the popup is closed */\n  onClose?: ((colorValue: ColorDef) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not, color displayed on button but button will not trigger pop-up */\n  readonly?: boolean;\n  /** popup position. If not set RelativePosition.BottomLeft is used */\n  popupPosition?: RelativePosition;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n  /** If true, don't propagate clicks out of the ColorPicker */\n  captureClicks?: boolean;\n  /** If true, don't show close button at top */\n  hideCloseButton?: boolean;\n  /** If set show input values */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<\n  HTMLButtonElement,\n  // eslint-disable-next-line deprecation/deprecation\n  ColorPickerPopupProps\n>(function ForwardRefColorPickerPopup(props, ref) {\n  const { translate } = useTranslation();\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(props.initialColor);\n  const initialColorRef = React.useRef(props.initialColor);\n\n  React.useEffect(() => {\n    if (props.initialColor !== initialColorRef.current) {\n      initialColorRef.current = props.initialColor;\n      setColorDef(props.initialColor);\n    }\n  }, [props.initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorValue.fromTbgr(ColorByName.red),\n    ColorValue.fromTbgr(ColorByName.orange),\n    ColorValue.fromTbgr(ColorByName.yellow),\n    ColorValue.fromTbgr(ColorByName.green),\n    ColorValue.fromTbgr(ColorByName.blue),\n    ColorValue.fromTbgr(ColorByName.mediumBlue),\n    ColorValue.fromTbgr(ColorByName.indigo),\n    ColorValue.fromTbgr(ColorByName.violet),\n    ColorValue.fromTbgr(ColorByName.black),\n    ColorValue.fromTbgr(ColorByName.white),\n    ColorValue.fromTbgr(ColorByName.cyan),\n    ColorValue.fromTbgr(ColorByName.fuchsia),\n    ColorValue.fromTbgr(ColorByName.tan),\n    ColorValue.fromTbgr(ColorByName.gray),\n    ColorValue.fromTbgr(ColorByName.brown),\n    ColorValue.fromTbgr(ColorByName.purple),\n    ColorValue.fromTbgr(ColorByName.olive),\n    ColorValue.fromTbgr(ColorByName.darkGreen),\n  ]);\n\n  const closePopup = React.useCallback(() => {\n    props.onClose && props.onClose(colorDef);\n    setShowPopup(false);\n  }, [colorDef, props]);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorChanged = React.useCallback(\n    (newColorValue: ColorValue) => {\n      const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n      if (!newColor.equals(colorDef)) {\n        setColorDef(newColor);\n\n        props.onColorChange && props.onColorChange(newColor);\n      }\n    },\n    [colorDef, props]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...props.style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n  const buttonClassNames = classnames(\n    \"components-colorpicker-popup-button\",\n    props.readonly && \"readonly\",\n    props.className\n  );\n\n  const clickHandler = (event: React.MouseEvent) => {\n    if (props.captureClicks) event.stopPropagation();\n  };\n\n  const colorOptions = React.useMemo(() => {\n    if (props.colorDefs && props.colorDefs.length) {\n      return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    if (props.colorDefs && 0 === props.colorDefs.length) return undefined;\n    return defaultColors.current;\n  }, [props.colorDefs]);\n  const popupPosition =\n    undefined !== props.popupPosition\n      ? props.popupPosition\n      : RelativePosition.BottomLeft;\n\n  const closeLabel = translate(\"color.close\");\n  const togglePopupLabel = translate(\"color.toggleColorPopup\");\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n    <div onClick={clickHandler}>\n      <button\n        data-testid=\"components-colorpicker-popup-button\"\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={props.disabled}\n        ref={refs}\n        title={togglePopupLabel}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {props.showCaret && (\n            // eslint-disable-next-line deprecation/deprecation\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={popupPosition}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <div className=\"components-colorpicker-popup-panel-padding\">\n          {!props.hideCloseButton && (\n            <button\n              title={closeLabel}\n              className={\n                \"core-focus-trap-ignore-initial core-dialog-close icon\"\n              }\n              data-testid=\"core-dialog-close\"\n              onClick={togglePopup}\n            >\n              {/* eslint-disable-next-line deprecation/deprecation */}\n              <Icon iconSpec={<SvgClose />} />\n            </button>\n          )}\n          <ColorPicker\n            selectedColor={ColorValue.fromTbgr(colorDef.tbgr)}\n            onChangeComplete={handleColorChanged}\n          >\n            <ColorBuilder />\n            {props.colorInputType && (\n              <ColorInputPanel defaultColorFormat={props.colorInputType} />\n            )}\n            {colorOptions && <ColorPalette colors={colorOptions} />}\n          </ColorPicker>\n        </div>\n      </Popup>\n    </div>\n  );\n});\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerPopup: (\n  // eslint-disable-next-line deprecation/deprecation\n  props: ColorPickerPopupProps\n) => React.ReactNode = ForwardRefColorPickerPopup;\n"]}

package/lib/imodel-components-react/color/ColorPickerPopup.scss

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+button.components-colorpicker-popup-button {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  background-color: transparent;
+  box-sizing: border-box;
+  border-radius: var(--iui-border-radius-1);
+  border: none;
+  padding: 0;
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  > .components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    > .components-colorpicker-button-color-swatch {
+      border: 1px solid var(--iui-color-border);
+      border-radius: var(--iui-border-radius-1);
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    > .components-colorpicker-button-container {
+      > .components-caret {
+        color: var(--iui-color-text-disabled);
+      }
+    }
+  }
+}
+
+.components-colorpicker-popup-panel-padding {
+  padding: 3px 6px 6px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  button.core-dialog-close {
+    cursor: pointer;
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--iui-color-text);
+  }
+}

package/lib/imodel-components-react/color/HueSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA2DrD;;;GAGG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAE1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EACD,cAAc,qBAwKb"}

package/lib/{esm/imodel-components-react → imodel-components-react}/color/HueSlider.js

@@ -9,7 +9,7 @@ import "./HueSlider.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { Key } from "ts-key-enum";
-import { useTranslation } from "../useTranslation";
+import { useTranslation } from "../useTranslation.js";
 // hue is a value from 0 to 360
 function calculateHue(currentPos, high, isVertical) {
     if (currentPos <= 0) {