@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/imodel-components-react/editors/ColorEditor.js

@@ -1,152 +1,152 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPropertyEditor = exports.ColorEditor = void 0;
-require("./ColorEditor.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const components_react_1 = require("@itwin/components-react");
-const ColorPickerButton_1 = require("../color/ColorPickerButton");
-/** ColorEditor React component that is a property editor with text input
- * @beta
- */
-class ColorEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._buttonElement = React.createRef();
-        /** @internal */
-        this.state = {
-            colorValue: 0,
-            readonly: false,
-            numColumns: 4,
-            availableColors: [],
-        };
-        this._onColorPick = (color) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                colorValue: color.tbgr,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-    }
-    async getPropertyValue() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: appui_abstract_1.PropertyValueFormat.Primitive,
-                value: this.state.colorValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._buttonElement.current;
-    }
-    get hasFocus() {
-        return document.activeElement === this._buttonElement.current;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {
-            this._buttonElement.current.focus();
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const record = this.props.propertyRecord;
-        // istanbul ignore else
-        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            const colorValue = record.value.value;
-            let numColumns = 4;
-            const availableColors = new Array();
-            const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;
-            const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;
-            if (record.property.editor && record.property.editor.params) {
-                const colorParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.ColorData);
-                // istanbul ignore else
-                if (colorParams) {
-                    colorParams.colorValues.forEach((colorNumber) => {
-                        availableColors.push(core_common_1.ColorDef.create(colorNumber));
-                    });
-                    // istanbul ignore else
-                    if (colorParams.numColumns)
-                        numColumns = colorParams.numColumns;
-                }
-            }
-            this.setState({ colorValue, readonly, isDisabled, numColumns, availableColors }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-        }
-    }
-    /** @internal */
-    render() {
-        const colorDef = core_common_1.ColorDef.create(this.state.colorValue);
-        return (React.createElement("div", { className: (0, classnames_1.default)("components-color-editor", this.props.className), style: this.props.style },
-            React.createElement(ColorPickerButton_1.ColorPickerButton, { ref: this._buttonElement, initialColor: colorDef, colorDefs: this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef], numColumns: this.state.numColumns, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onColorPick: this._onColorPick, "data-testid": "components-color-editor" })));
-    }
-}
-exports.ColorEditor = ColorEditor;
-/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
- * It uses the [[ColorEditor]] React component.
- * @beta
- */
-class ColorPropertyEditor extends components_react_1.PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(ColorEditor, null);
-    }
-}
-exports.ColorPropertyEditor = ColorPropertyEditor;
-components_react_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Number, ColorPropertyEditor, appui_abstract_1.StandardEditorNames.ColorPicker);
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPropertyEditor = exports.ColorEditor = void 0;
+require("./ColorEditor.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_common_1 = require("@itwin/core-common");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const components_react_1 = require("@itwin/components-react");
+const ColorPickerButton_1 = require("../color/ColorPickerButton");
+/** ColorEditor React component that is a property editor with text input
+ * @beta
+ */
+class ColorEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._buttonElement = React.createRef();
+        /** @internal */
+        this.state = {
+            colorValue: 0,
+            readonly: false,
+            numColumns: 4,
+            availableColors: [],
+        };
+        this._onColorPick = (color) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                colorValue: color.tbgr,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: appui_abstract_1.PropertyValueFormat.Primitive,
+                value: this.state.colorValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._buttonElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._buttonElement.current;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {
+            this._buttonElement.current.focus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        // istanbul ignore else
+        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            const colorValue = record.value.value;
+            let numColumns = 4;
+            const availableColors = new Array();
+            const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;
+            const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;
+            if (record.property.editor && record.property.editor.params) {
+                const colorParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.ColorData);
+                // istanbul ignore else
+                if (colorParams) {
+                    colorParams.colorValues.forEach((colorNumber) => {
+                        availableColors.push(core_common_1.ColorDef.create(colorNumber));
+                    });
+                    // istanbul ignore else
+                    if (colorParams.numColumns)
+                        numColumns = colorParams.numColumns;
+                }
+            }
+            this.setState({ colorValue, readonly, isDisabled, numColumns, availableColors }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+        }
+    }
+    /** @internal */
+    render() {
+        const colorDef = core_common_1.ColorDef.create(this.state.colorValue);
+        return (React.createElement("div", { className: (0, classnames_1.default)("components-color-editor", this.props.className), style: this.props.style },
+            React.createElement(ColorPickerButton_1.ColorPickerButton, { ref: this._buttonElement, initialColor: colorDef, colorDefs: this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef], numColumns: this.state.numColumns, disabled: this.state.isDisabled ? true : false, readonly: this.state.readonly, onColorPick: this._onColorPick, "data-testid": "components-color-editor" })));
+    }
+}
+exports.ColorEditor = ColorEditor;
+/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
+ * It uses the [[ColorEditor]] React component.
+ * @beta
+ */
+class ColorPropertyEditor extends components_react_1.PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(ColorEditor, null);
+    }
+}
+exports.ColorPropertyEditor = ColorPropertyEditor;
+components_react_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Number, ColorPropertyEditor, appui_abstract_1.StandardEditorNames.ColorPicker);
 //# sourceMappingURL=ColorEditor.js.map

package/lib/cjs/imodel-components-react/editors/ColorEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.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 PropertyEditors\n */\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n  ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal */\ninterface ColorEditorState {\n  colorValue: number;\n  readonly: boolean;\n  isDisabled?: boolean;\n  numColumns: number;\n  availableColors: ColorDef[];\n}\n\n/** ColorEditor React component that is a property editor with text input\n * @beta\n */\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\n  private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\n\n  /** @internal */\n  public override readonly state: Readonly<ColorEditorState> = {\n    colorValue: 0,\n    readonly: false,\n    numColumns: 4,\n    availableColors: [],\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.colorValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._buttonElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._buttonElement.current;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\n      this._buttonElement.current.focus();\n    }\n  }\n\n  private _onColorPick = (color: ColorDef) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      colorValue: color.tbgr,\n    }, async () => {\n      // istanbul ignore else\n      if (propertyRecord && this.props.onCommit) {\n        const propertyValue = await this.getPropertyValue();\n        // istanbul ignore else\n        if (propertyValue !== undefined) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const colorValue = record.value.value as number;\n      let numColumns = 4;\n      const availableColors = new Array<ColorDef>();\n      const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;\n      const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;\n\n      if (record.property.editor && record.property.editor.params) {\n        const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\n        // istanbul ignore else\n        if (colorParams) {\n          colorParams.colorValues.forEach((colorNumber: number) => {\n            availableColors.push(ColorDef.create(colorNumber));\n          });\n          // istanbul ignore else\n          if (colorParams.numColumns)\n            numColumns = colorParams.numColumns;\n        }\n      }\n      this.setState(\n        { colorValue, readonly, isDisabled, numColumns, availableColors },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n    }\n  }\n\n  /** @internal */\n  public override render() {\n    const colorDef = ColorDef.create(this.state.colorValue);\n    return (\n      <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\n        <ColorPickerButton ref={this._buttonElement}\n          initialColor={colorDef}\n          colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\n          numColumns={this.state.numColumns}\n          disabled={this.state.isDisabled ? true : false}\n          readonly={this.state.readonly}\n          onColorPick={this._onColorPick}\n          data-testid=\"components-color-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <ColorEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\n"]}
+{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./ColorEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport {\r\n  ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\r\n  StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\r\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\r\n\r\n/** @internal */\r\ninterface ColorEditorState {\r\n  colorValue: number;\r\n  readonly: boolean;\r\n  isDisabled?: boolean;\r\n  numColumns: number;\r\n  availableColors: ColorDef[];\r\n}\r\n\r\n/** ColorEditor React component that is a property editor with text input\r\n * @beta\r\n */\r\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\r\n  private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<ColorEditorState> = {\r\n    colorValue: 0,\r\n    readonly: false,\r\n    numColumns: 4,\r\n    availableColors: [],\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.colorValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._buttonElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._buttonElement.current;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\r\n      this._buttonElement.current.focus();\r\n    }\r\n  }\r\n\r\n  private _onColorPick = (color: ColorDef) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      colorValue: color.tbgr,\r\n    }, async () => {\r\n      // istanbul ignore else\r\n      if (propertyRecord && this.props.onCommit) {\r\n        const propertyValue = await this.getPropertyValue();\r\n        // istanbul ignore else\r\n        if (propertyValue !== undefined) {\r\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const record = this.props.propertyRecord;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const colorValue = record.value.value as number;\r\n      let numColumns = 4;\r\n      const availableColors = new Array<ColorDef>();\r\n      const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;\r\n      const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;\r\n\r\n      if (record.property.editor && record.property.editor.params) {\r\n        const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\r\n        // istanbul ignore else\r\n        if (colorParams) {\r\n          colorParams.colorValues.forEach((colorNumber: number) => {\r\n            availableColors.push(ColorDef.create(colorNumber));\r\n          });\r\n          // istanbul ignore else\r\n          if (colorParams.numColumns)\r\n            numColumns = colorParams.numColumns;\r\n        }\r\n      }\r\n      this.setState(\r\n        { colorValue, readonly, isDisabled, numColumns, availableColors },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n    }\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const colorDef = ColorDef.create(this.state.colorValue);\r\n    return (\r\n      <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\r\n        <ColorPickerButton ref={this._buttonElement}\r\n          initialColor={colorDef}\r\n          colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\r\n          numColumns={this.state.numColumns}\r\n          disabled={this.state.isDisabled ? true : false}\r\n          readonly={this.state.readonly}\r\n          onColorPick={this._onColorPick}\r\n          data-testid=\"components-color-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\r\n * It uses the [[ColorEditor]] React component.\r\n * @beta\r\n */\r\nexport class ColorPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <ColorEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\r\n"]}

package/lib/cjs/imodel-components-react/editors/ColorEditor.scss

@@ -1,18 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$components-color-editor-item-height: 100%;
-
-.components-color-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: $buic-foreground-body;
-  border: none;
-  box-sizing: border-box;
-  height: $components-color-editor-item-height;
-  display: flex;
-  align-items: center;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$components-color-editor-item-height: 100%;
+
+.components-color-editor {
+  font-family: $iui-font-family;
+  font-size: $iui-font-size;
+  color: $buic-foreground-body;
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+  display: flex;
+  align-items: center;
+}

package/lib/cjs/imodel-components-react/editors/WeightEditor.d.ts

@@ -1,48 +1,48 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./WeightEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
-/** @internal */
-interface WeightEditorState {
-    weightValue: number;
-    readonly: boolean;
-    isDisabled?: boolean;
-}
-/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
- * @public
- */
-export declare class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {
-    private _control;
-    private _isMounted;
-    private _availableWeights;
-    private _divElement;
-    /** @internal */
-    readonly state: Readonly<WeightEditorState>;
-    constructor(props: PropertyEditorProps);
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private setFocus;
-    private _onLineWeightPick;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
- * It uses the [[WeightEditor]] React component.
- * @public
- */
-export declare class WeightPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./WeightEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+/** @internal */
+interface WeightEditorState {
+    weightValue: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+}
+/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component
+ * @public
+ */
+export declare class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {
+    private _control;
+    private _isMounted;
+    private _availableWeights;
+    private _divElement;
+    /** @internal */
+    readonly state: Readonly<WeightEditorState>;
+    constructor(props: PropertyEditorProps);
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onLineWeightPick;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Weight Property Editor registered for the "number" type name and "weight-picker" editor name.
+ * It uses the [[WeightEditor]] React component.
+ * @public
+ */
+export declare class WeightPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=WeightEditor.d.ts.map