@itwin/components-react 3.7.0 → 3.7.2

package/lib/cjs/components-react/editors/IconEditor.js

@@ -1,166 +1,166 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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 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.IconPropertyEditor = exports.IconEditor = void 0;
-require("./IconEditor.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const IconPickerButton_1 = require("../iconpicker/IconPickerButton");
-const PropertyEditorManager_1 = require("./PropertyEditorManager");
-/** IconEditor React component that is a property editor with button and popup
- * @alpha
- */
-// istanbul ignore next
-class IconEditor extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._control = null;
-        this._isMounted = false;
-        this._divElement = React.createRef();
-        this._onIconChange = (icon) => {
-            const propertyRecord = this.props.propertyRecord;
-            this.setState({
-                icon,
-            }, async () => {
-                // istanbul ignore else
-                if (propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (propertyValue) {
-                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
-                    }
-                }
-            });
-        };
-        let icon = "";
-        let numColumns = 4;
-        const icons = [];
-        const readonly = false;
-        // TODO: add support for following if we need to specify set of weights to display
-        const record = props.propertyRecord;
-        if (record && record.property && record.property.editor && record.property.editor.params) {
-            const iconParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.IconListData);
-            // istanbul ignore else
-            if (iconParams) {
-                if (iconParams.iconValue)
-                    icon = iconParams.iconValue;
-                if (iconParams.numColumns)
-                    numColumns = iconParams.numColumns;
-                if (iconParams.iconValues)
-                    iconParams.iconValues.forEach((i) => icons.push(i));
-            }
-        }
-        this.state = { icon, icons, numColumns, readonly };
-    }
-    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.icon,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._divElement.current;
-    }
-    get hasFocus() {
-        let containsFocus = false;
-        if (this._divElement.current)
-            containsFocus = this._divElement.current.contains(document.activeElement);
-        return containsFocus;
-    }
-    setFocus() {
-        // istanbul ignore else
-        if (this._control && !this.state.isDisabled) {
-            this._control.setFocus();
-        }
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @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;
-        let initialValue = "";
-        // istanbul ignore else
-        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            initialValue = record.value.value;
-        }
-        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
-        const isDisabled = record ? record.isDisabled : undefined;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ icon: initialValue, readonly, isDisabled }, () => {
-                if (this.props.setFocus) {
-                    this.setFocus();
-                }
-            });
-    }
-    /** @internal */
-    render() {
-        const { icon, icons, numColumns } = this.state;
-        return (React.createElement("div", { className: (0, classnames_1.default)("components-icon-editor", this.props.className), style: this.props.style, ref: this._divElement },
-            React.createElement(IconPickerButton_1.IconPickerButton, { ref: (control) => this._control = control, icon: icon, icons: icons, numColumns: numColumns, disabled: this.state.isDisabled, readonly: this.state.readonly, onIconChange: this._onIconChange, "data-testid": "components-icon-editor" })));
-    }
-}
-exports.IconEditor = IconEditor;
-/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
- * It uses the [[IconEditor]] React component.
- * @alpha
- */
-// istanbul ignore next
-class IconPropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(IconEditor, null);
-    }
-}
-exports.IconPropertyEditor = IconPropertyEditor;
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Text, IconPropertyEditor, appui_abstract_1.StandardEditorNames.IconPicker);
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.String, IconPropertyEditor, appui_abstract_1.StandardEditorNames.IconPicker);
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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 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.IconPropertyEditor = exports.IconEditor = void 0;
+require("./IconEditor.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const IconPickerButton_1 = require("../iconpicker/IconPickerButton");
+const PropertyEditorManager_1 = require("./PropertyEditorManager");
+/** IconEditor React component that is a property editor with button and popup
+ * @alpha
+ */
+// istanbul ignore next
+class IconEditor extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._control = null;
+        this._isMounted = false;
+        this._divElement = React.createRef();
+        this._onIconChange = (icon) => {
+            const propertyRecord = this.props.propertyRecord;
+            this.setState({
+                icon,
+            }, async () => {
+                // istanbul ignore else
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (propertyValue) {
+                        this.props.onCommit({ propertyRecord, newValue: propertyValue });
+                    }
+                }
+            });
+        };
+        let icon = "";
+        let numColumns = 4;
+        const icons = [];
+        const readonly = false;
+        // TODO: add support for following if we need to specify set of weights to display
+        const record = props.propertyRecord;
+        if (record && record.property && record.property.editor && record.property.editor.params) {
+            const iconParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.IconListData);
+            // istanbul ignore else
+            if (iconParams) {
+                if (iconParams.iconValue)
+                    icon = iconParams.iconValue;
+                if (iconParams.numColumns)
+                    numColumns = iconParams.numColumns;
+                if (iconParams.iconValues)
+                    iconParams.iconValues.forEach((i) => icons.push(i));
+            }
+        }
+        this.state = { icon, icons, numColumns, readonly };
+    }
+    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.icon,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    get hasFocus() {
+        let containsFocus = false;
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    setFocus() {
+        // istanbul ignore else
+        if (this._control && !this.state.isDisabled) {
+            this._control.setFocus();
+        }
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @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;
+        let initialValue = "";
+        // istanbul ignore else
+        if (record && record.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        const isDisabled = record ? record.isDisabled : undefined;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ icon: initialValue, readonly, isDisabled }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+    }
+    /** @internal */
+    render() {
+        const { icon, icons, numColumns } = this.state;
+        return (React.createElement("div", { className: (0, classnames_1.default)("components-icon-editor", this.props.className), style: this.props.style, ref: this._divElement },
+            React.createElement(IconPickerButton_1.IconPickerButton, { ref: (control) => this._control = control, icon: icon, icons: icons, numColumns: numColumns, disabled: this.state.isDisabled, readonly: this.state.readonly, onIconChange: this._onIconChange, "data-testid": "components-icon-editor" })));
+    }
+}
+exports.IconEditor = IconEditor;
+/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
+ * It uses the [[IconEditor]] React component.
+ * @alpha
+ */
+// istanbul ignore next
+class IconPropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(IconEditor, null);
+    }
+}
+exports.IconPropertyEditor = IconPropertyEditor;
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Text, IconPropertyEditor, appui_abstract_1.StandardEditorNames.IconPicker);
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.String, IconPropertyEditor, appui_abstract_1.StandardEditorNames.IconPicker);
 //# sourceMappingURL=IconEditor.js.map

package/lib/cjs/components-react/editors/IconEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.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/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./IconEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\n\n// cspell:ignore iconpicker\n\n/** @internal */\ninterface IconEditorState {\n  icon: string;\n  icons: string[];\n  numColumns: number;\n  readonly?: boolean;\n  isDisabled?: boolean;\n}\n\n/** IconEditor React component that is a property editor with button and popup\n * @alpha\n */\n// istanbul ignore next\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\n  private _control: any | null = null;\n  private _isMounted = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  constructor(props: PropertyEditorProps) {\n    super(props);\n\n    let icon = \"\";\n    let numColumns = 4;\n    const icons: string[] = [];\n    const readonly = false;\n\n    // TODO: add support for following if we need to specify set of weights to display\n    const record = props.propertyRecord;\n    if (record && record.property && record.property.editor && record.property.editor.params) {\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\n      // istanbul ignore else\n      if (iconParams) {\n        if (iconParams.iconValue)\n          icon = iconParams.iconValue;\n        if (iconParams.numColumns)\n          numColumns = iconParams.numColumns;\n        if (iconParams.iconValues)\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\n      }\n    }\n\n    this.state = { icon, icons, numColumns, readonly };\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.icon,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._control && !this.state.isDisabled) {\n      this._control.setFocus();\n    }\n  }\n\n  private _onIconChange = (icon: string) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      icon,\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) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\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    let initialValue = \"\";\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as string;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState(\n        { icon: initialValue, readonly, isDisabled },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n  }\n\n  /** @internal */\n  public override render() {\n    const { icon, icons, numColumns } = this.state;\n    return (\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        <IconPickerButton ref={(control) => this._control = control}\n          icon={icon}\n          icons={icons}\n          numColumns={numColumns}\n          disabled={this.state.isDisabled}\n          readonly={this.state.readonly}\n          onIconChange={this._onIconChange}\n          data-testid=\"components-icon-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\n * It uses the [[IconEditor]] React component.\n * @alpha\n */\n// istanbul ignore next\nexport class IconPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <IconEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\n"]}
+{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./IconEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\r\n  StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n// cspell:ignore iconpicker\r\n\r\n/** @internal */\r\ninterface IconEditorState {\r\n  icon: string;\r\n  icons: string[];\r\n  numColumns: number;\r\n  readonly?: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** IconEditor React component that is a property editor with button and popup\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\r\n  private _control: any | null = null;\r\n  private _isMounted = false;\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  constructor(props: PropertyEditorProps) {\r\n    super(props);\r\n\r\n    let icon = \"\";\r\n    let numColumns = 4;\r\n    const icons: string[] = [];\r\n    const readonly = false;\r\n\r\n    // TODO: add support for following if we need to specify set of weights to display\r\n    const record = props.propertyRecord;\r\n    if (record && record.property && record.property.editor && record.property.editor.params) {\r\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\r\n      // istanbul ignore else\r\n      if (iconParams) {\r\n        if (iconParams.iconValue)\r\n          icon = iconParams.iconValue;\r\n        if (iconParams.numColumns)\r\n          numColumns = iconParams.numColumns;\r\n        if (iconParams.iconValues)\r\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\r\n      }\r\n    }\r\n\r\n    this.state = { icon, icons, numColumns, readonly };\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.icon,\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._divElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._control && !this.state.isDisabled) {\r\n      this._control.setFocus();\r\n    }\r\n  }\r\n\r\n  private _onIconChange = (icon: string) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      icon,\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) {\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._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\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    let initialValue = \"\";\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as string;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState(\r\n        { icon: initialValue, readonly, isDisabled },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const { icon, icons, numColumns } = this.state;\r\n    return (\r\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        <IconPickerButton ref={(control) => this._control = control}\r\n          icon={icon}\r\n          icons={icons}\r\n          numColumns={numColumns}\r\n          disabled={this.state.isDisabled}\r\n          readonly={this.state.readonly}\r\n          onIconChange={this._onIconChange}\r\n          data-testid=\"components-icon-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\r\n * It uses the [[IconEditor]] React component.\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <IconEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\r\n"]}

package/lib/cjs/components-react/editors/IconEditor.scss

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* 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-icon-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;
+/*---------------------------------------------------------------------------------------------
+* 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-icon-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;
 }

package/lib/cjs/components-react/editors/ImageCheckBoxEditor.d.ts

@@ -1,48 +1,48 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./ImageCheckBoxEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface ImageCheckBoxEditorState {
-    /** Image for the "checked" state */
-    imageOn: string;
-    /** Image for the "unchecked" (default) state */
-    imageOff: string;
-    checkboxValue: boolean;
-    isDisabled?: boolean;
-}
-/** [[ImageCheckBoxEditor]]
- * Boolean editor that renders with an image instead of checkbox
- * @public
- */
-export declare class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {
-    private _isMounted;
-    private _inputElement;
-    /** @internal */
-    readonly state: Readonly<ImageCheckBoxEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    private _handleClick;
-    render(): JSX.Element;
-}
-/** ImageCheckBox Property Editor registered for the "bool" and "boolean" type names.
- * It uses the [[ImageCheckBoxEditor]] React component.
- * @public
- */
-export declare class ImageCheckBoxPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ImageCheckBoxEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface ImageCheckBoxEditorState {
+    /** Image for the "checked" state */
+    imageOn: string;
+    /** Image for the "unchecked" (default) state */
+    imageOff: string;
+    checkboxValue: boolean;
+    isDisabled?: boolean;
+}
+/** [[ImageCheckBoxEditor]]
+ * Boolean editor that renders with an image instead of checkbox
+ * @public
+ */
+export declare class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {
+    private _isMounted;
+    private _inputElement;
+    /** @internal */
+    readonly state: Readonly<ImageCheckBoxEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    private _handleClick;
+    render(): JSX.Element;
+}
+/** ImageCheckBox Property Editor registered for the "bool" and "boolean" type names.
+ * It uses the [[ImageCheckBoxEditor]] React component.
+ * @public
+ */
+export declare class ImageCheckBoxPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=ImageCheckBoxEditor.d.ts.map