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

package/lib/components-react/editors/EnumEditor.js

@@ -0,0 +1,161 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./EnumEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { Select } from "@itwin/itwinui-react";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import { UiComponents } from "../UiComponents.js";
+/** EnumEditor React component that is a property editor with select input
+ * @public
+ */
+export class EnumEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._divElement = React.createRef();
+        this.state = {
+            selectValue: "",
+            valueIsNumber: false,
+            options: [],
+            parentDiv: null,
+        };
+        this._updateSelectValue = (newValue) => {
+            if (this._isMounted) {
+                let selectValue;
+                if (this.state.valueIsNumber)
+                    selectValue = parseInt(newValue, 10);
+                else
+                    selectValue = newValue;
+                this.setState({
+                    selectValue,
+                }, async () => {
+                    if (this.props.propertyRecord && this.props.onCommit) {
+                        const propertyValue = await this.getPropertyValue();
+                        if (propertyValue) {
+                            this.props.onCommit({
+                                propertyRecord: this.props.propertyRecord,
+                                newValue: propertyValue,
+                            });
+                        }
+                    }
+                });
+            }
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.selectValue,
+                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;
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const { propertyRecord } = this.props;
+        let initialValue = "";
+        let valueIsNumber = false;
+        if (propertyRecord &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            if (typeof primitiveValue === "string") {
+                initialValue = primitiveValue;
+                valueIsNumber = false;
+            }
+            else {
+                initialValue = primitiveValue;
+                valueIsNumber = true;
+            }
+        }
+        let choices;
+        if (propertyRecord && propertyRecord.property.enum) {
+            if (propertyRecord.property.enum.choices instanceof Promise) {
+                choices = await propertyRecord.property.enum.choices;
+            }
+            else {
+                choices = propertyRecord.property.enum.choices;
+            }
+        }
+        const options = [];
+        if (choices) {
+            choices.forEach((choice) => {
+                options.push({ value: choice.value.toString(), label: choice.label });
+            });
+        }
+        if (this._isMounted)
+            this.setState({
+                selectValue: initialValue,
+                valueIsNumber,
+                options,
+                parentDiv: this._divElement.current,
+            });
+    }
+    render() {
+        const className = classnames("components-cell-editor", "components-enum-editor", this.props.className);
+        const selectValue = this.state.selectValue !== undefined
+            ? this.state.selectValue.toString()
+            : undefined;
+        // set min-width to show about 4 characters + down arrow
+        const minWidthStyle = {
+            minWidth: `6em`,
+        };
+        // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK
+        // onBlur={this.props.onBlur}
+        return (React.createElement("div", { ref: this._divElement },
+            React.createElement(Select, { className: className, style: this.props.style ? this.props.style : minWidthStyle, value: selectValue, onChange: this._updateSelectValue, "data-testid": "components-select-editor", options: this.state.options, triggerProps: {
+                    ref: (el) => {
+                        if (!this.props.setFocus)
+                            return;
+                        el?.focus();
+                    },
+                    className: "components-button",
+                }, "aria-label": UiComponents.translate("editor.enum"), size: "small" })));
+    }
+}
+/** Enum Property Button Group Editor registered for the "enum" type name.
+ * It uses the [[EnumEditor]] React component.
+ * @public
+ */
+export class EnumPropertyEditor extends PropertyEditorBase {
+    get containerHandlesEnter() {
+        return false;
+    }
+    get containerStopsKeydownPropagation() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(EnumEditor, null);
+    }
+}
+//# sourceMappingURL=EnumEditor.js.map

package/lib/components-react/editors/EnumEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/EnumEditor.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 \"./EnumEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { EnumerationChoice, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport { UiComponents } from \"../UiComponents.js\";\n\n/** @internal */\ninterface EnumEditorState {\n  selectValue: string | number;\n  valueIsNumber: boolean;\n  options: SelectOption<string>[];\n  parentDiv: HTMLDivElement | null;\n}\n\n/** EnumEditor React component that is a property editor with select input\n * @public\n */\nexport class EnumEditor\n  extends React.PureComponent<PropertyEditorProps, EnumEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<EnumEditorState> = {\n    selectValue: \"\",\n    valueIsNumber: false,\n    options: [],\n    parentDiv: null,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.selectValue,\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 _updateSelectValue = (newValue: string) => {\n    if (this._isMounted) {\n      let selectValue: string | number;\n\n      if (this.state.valueIsNumber) selectValue = parseInt(newValue, 10);\n      else selectValue = newValue;\n\n      this.setState(\n        {\n          selectValue,\n        },\n        async () => {\n          if (this.props.propertyRecord && this.props.onCommit) {\n            const propertyValue = await this.getPropertyValue();\n            if (propertyValue) {\n              this.props.onCommit({\n                propertyRecord: this.props.propertyRecord,\n                newValue: propertyValue,\n              });\n            }\n          }\n        }\n      );\n    }\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n    let initialValue: string | number = \"\";\n    let valueIsNumber: boolean = false;\n\n    if (\n      propertyRecord &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      if (typeof primitiveValue === \"string\") {\n        initialValue = primitiveValue;\n        valueIsNumber = false;\n      } else {\n        initialValue = primitiveValue as number;\n        valueIsNumber = true;\n      }\n    }\n\n    let choices: EnumerationChoice[] | undefined;\n\n    if (propertyRecord && propertyRecord.property.enum) {\n      if (propertyRecord.property.enum.choices instanceof Promise) {\n        choices = await propertyRecord.property.enum.choices;\n      } else {\n        choices = propertyRecord.property.enum.choices;\n      }\n    }\n\n    const options: SelectOption<string>[] = [];\n    if (choices) {\n      choices.forEach((choice: EnumerationChoice) => {\n        options.push({ value: choice.value.toString(), label: choice.label });\n      });\n    }\n\n    if (this._isMounted)\n      this.setState({\n        selectValue: initialValue,\n        valueIsNumber,\n        options,\n        parentDiv: this._divElement.current,\n      });\n  }\n\n  public override render() {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-enum-editor\",\n      this.props.className\n    );\n    const selectValue =\n      this.state.selectValue !== undefined\n        ? this.state.selectValue.toString()\n        : undefined;\n\n    // set min-width to show about 4 characters + down arrow\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `6em`,\n    };\n\n    // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK\n    // onBlur={this.props.onBlur}\n    return (\n      <div ref={this._divElement}>\n        <Select\n          className={className}\n          style={this.props.style ? this.props.style : minWidthStyle}\n          value={selectValue}\n          onChange={this._updateSelectValue}\n          data-testid=\"components-select-editor\"\n          options={this.state.options}\n          triggerProps={{\n            ref: (el) => {\n              if (!this.props.setFocus) return;\n              el?.focus();\n            },\n            className: \"components-button\",\n          }}\n          aria-label={UiComponents.translate(\"editor.enum\")}\n          size=\"small\"\n        />\n      </div>\n    );\n  }\n}\n\n/** Enum Property Button Group Editor registered for the \"enum\" type name.\n * It uses the [[EnumEditor]] React component.\n * @public\n */\nexport class EnumPropertyEditor extends PropertyEditorBase {\n  public override get containerHandlesEnter(): boolean {\n    return false;\n  }\n  public override get containerStopsKeydownPropagation(): boolean {\n    return false;\n  }\n\n  public get reactNode(): React.ReactNode {\n    return <EnumEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/EnumEditor.scss

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables" as *;
+
+.components-enum-editor {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-enum-editor {
+    > .components-button {
+      min-height: $editor-component-height-small !important;
+      padding-top: 0px !important;
+      padding-bottom: 0px !important;
+    }
+  }
+}

package/lib/components-react/editors/IconEditor.d.ts

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./IconEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @internal */
+interface IconEditorState {
+    icon: string;
+    icons: string[];
+    numColumns: number;
+    readonly?: boolean;
+    isDisabled?: boolean;
+}
+/** IconEditor React component that is a property editor with button and popup
+ * @alpha
+ */
+export declare class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {
+    private _control;
+    private _isMounted;
+    private _divElement;
+    constructor(props: PropertyEditorProps);
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onIconChange;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    render(): React.JSX.Element;
+}
+/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
+ * It uses the [[IconEditor]] React component.
+ * @alpha
+ */
+export declare class IconPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=IconEditor.d.ts.map

package/lib/components-react/editors/IconEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/IconEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAIV,aAAa,EACd,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,gBAAgB;AAChB,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,UACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,eAAe,CAChE,YAAW,UAAU;IAErB,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAqC;gBAE5C,KAAK,EAAE,mBAAmB;IA+BzB,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAK7B;IAED,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,aAAa,CAgBnB;IAEc,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAoBf,MAAM;CAqBvB;AAED;;;GAGG;AACH,qBAAa,kBAAmB,SAAQ,kBAAkB;IACxD,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -0,0 +1,126 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./IconEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, } from "@itwin/appui-abstract";
+import { IconPickerButton } from "../iconpicker/IconPickerButton.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** IconEditor React component that is a property editor with button and popup
+ * @alpha
+ */
+export 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 () => {
+                if (propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    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 === PropertyEditorParamTypes.IconListData.valueOf());
+            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;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: 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() {
+        if (this._control && !this.state.isDisabled) {
+            this._control.setFocus();
+        }
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        void this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            void this.setStateFromProps();
+        }
+    }
+    async setStateFromProps() {
+        const record = this.props.propertyRecord;
+        let initialValue = "";
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            initialValue = record.value.value;
+        }
+        const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;
+        const isDisabled = record ? record.isDisabled : undefined;
+        if (this._isMounted)
+            this.setState({ icon: initialValue, readonly, isDisabled }, () => {
+                if (this.props.setFocus) {
+                    this.setFocus();
+                }
+            });
+    }
+    render() {
+        const { icon, icons, numColumns } = this.state;
+        return (React.createElement("div", { className: classnames("components-icon-editor", this.props.className), style: this.props.style, ref: this._divElement },
+            React.createElement(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" })));
+    }
+}
+/** Icon Property Editor registered for the "text" and "string" type names and the "icon-picker" editor name.
+ * It uses the [[IconEditor]] React component.
+ * @alpha
+ */
+export class IconPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(IconEditor, null);
+    }
+}
+//# sourceMappingURL=IconEditor.js.map

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

@@ -0,0 +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/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./IconEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IconListEditorParams,\n  PropertyEditorParams,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton.js\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\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 */\nexport class IconEditor\n  extends React.PureComponent<PropertyEditorProps, IconEditorState>\n  implements TypeEditor\n{\n  private _control: any = 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 (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const iconParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.IconListData.valueOf()\n      ) as IconListEditorParams;\n      if (iconParams) {\n        if (iconParams.iconValue) icon = iconParams.iconValue;\n        if (iconParams.numColumns) 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    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    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      {\n        icon,\n      },\n      async () => {\n        if (propertyRecord && this.props.onCommit) {\n          const propertyValue = await this.getPropertyValue();\n          if (propertyValue) {\n            this.props.onCommit({ propertyRecord, newValue: propertyValue });\n          }\n        }\n      }\n    );\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as string;\n    }\n\n    const readonly =\n      record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    if (this._isMounted)\n      this.setState({ icon: initialValue, readonly, isDisabled }, () => {\n        if (this.props.setFocus) {\n          this.setFocus();\n        }\n      });\n  }\n\n  public override render() {\n    const { icon, icons, numColumns } = this.state;\n    return (\n      <div\n        className={classnames(\"components-icon-editor\", this.props.className)}\n        style={this.props.style}\n        ref={this._divElement}\n      >\n        <IconPickerButton\n          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        />\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 */\nexport class IconPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <IconEditor />;\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$components-color-editor-item-height: 100%;
+
+.components-icon-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+}

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

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ImageCheckBoxEditor.scss";
+import * as React from "react";
+import type { PropertyValue } from "@itwin/appui-abstract";
+import type { PropertyEditorProps, TypeEditor } from "./EditorContainer.js";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+/** @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;
+    readonly state: Readonly<ImageCheckBoxEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    private _handleClick;
+    render(): React.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCheckBoxEditor.d.ts","sourceRoot":"","sources":["../../../src/components-react/editors/ImageCheckBoxEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAKhE,gBAAgB;AAChB,UAAU,wBAAwB;IAChC,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD;;;GAGG;AACH,qBAAa,mBACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,wBAAwB,CACzE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAwD;IAE7E,SAAyB,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,CAKhE;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAEe,iBAAiB;IAKjB,oBAAoB;IAIpB,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjE,OAAO,CAAC,iBAAiB;IAoCzB,OAAO,CAAC,YAAY,CAiBlB;IAEc,MAAM;CAyBvB;AAED;;;GAGG;AACH,qBAAa,2BAA4B,SAAQ,kBAAkB;IACjE,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

package/lib/components-react/editors/ImageCheckBoxEditor.js

@@ -0,0 +1,118 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./ImageCheckBoxEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyEditorParamTypes, PropertyValueFormat, } from "@itwin/appui-abstract";
+import { PropertyEditorBase } from "./PropertyEditorManager.js";
+import { ImageCheckBox } from "@itwin/core-react";
+/** [[ImageCheckBoxEditor]]
+ * Boolean editor that renders with an image instead of checkbox
+ * @public
+ */
+export class ImageCheckBoxEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        this.state = {
+            imageOff: "",
+            imageOn: "",
+            checkboxValue: false,
+            isDisabled: false,
+        };
+        this._handleClick = (checked) => {
+            this.setState({
+                checkboxValue: checked,
+            }, async () => {
+                if (this.props.propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    if (this._isMounted && propertyValue !== undefined) {
+                        this.props.onCommit({
+                            propertyRecord: this.props.propertyRecord,
+                            newValue: propertyValue,
+                        });
+                    }
+                }
+            });
+        };
+    }
+    async getPropertyValue() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.checkboxValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps();
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps();
+        }
+    }
+    setStateFromProps() {
+        const { propertyRecord } = this.props;
+        let checkboxValue = false;
+        let imageOn = "";
+        let imageOff = "";
+        let isDisabled = false;
+        if (propertyRecord &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            checkboxValue = primitiveValue;
+        }
+        if (propertyRecord && propertyRecord.isDisabled)
+            isDisabled = propertyRecord.isDisabled;
+        if (propertyRecord &&
+            propertyRecord.property &&
+            propertyRecord.property.editor &&
+            propertyRecord.property.editor.params) {
+            const imageCheckBoxParams = propertyRecord.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.CheckBoxImages.valueOf());
+            if (imageCheckBoxParams) {
+                imageOn = imageCheckBoxParams.imageOn;
+                imageOff = imageCheckBoxParams.imageOff;
+            }
+        }
+        this.setState({ imageOn, imageOff, checkboxValue, isDisabled });
+    }
+    render() {
+        const className = classnames("components-cell-editor", "components-imagecheckbox-editor", this.props.className);
+        const checked = this.state.checkboxValue;
+        const isDisabled = !!this.state.isDisabled;
+        return (
+        // eslint-disable-next-line deprecation/deprecation
+        React.createElement(ImageCheckBox, { inputRef: this._inputElement, imageOff: this.state.imageOff, imageOn: this.state.imageOn, className: className, border: true, style: this.props.style, checked: checked, disabled: isDisabled, onClick: this._handleClick, "data-testid": "components-imagecheckbox-editor" }));
+    }
+}
+/** ImageCheckBox Property Editor registered for the "bool" and "boolean" type names.
+ * It uses the [[ImageCheckBoxEditor]] React component.
+ * @public
+ */
+export class ImageCheckBoxPropertyEditor extends PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(ImageCheckBoxEditor, null);
+    }
+}
+//# sourceMappingURL=ImageCheckBoxEditor.js.map

package/lib/components-react/editors/ImageCheckBoxEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCheckBoxEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/ImageCheckBoxEditor.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 \"./ImageCheckBoxEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  ImageCheckBoxParams,\n  PropertyEditorParams,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport { ImageCheckBox } from \"@itwin/core-react\";\n\n// cSpell:ignore imagecheckbox\n\n/** @internal */\ninterface ImageCheckBoxEditorState {\n  /** Image for the \"checked\" state */\n  imageOn: string;\n  /** Image for the \"unchecked\" (default) state */\n  imageOff: string;\n  checkboxValue: boolean;\n  isDisabled?: boolean;\n}\n/** [[ImageCheckBoxEditor]]\n * Boolean editor that renders with an image instead of checkbox\n * @public\n */\nexport class ImageCheckBoxEditor\n  extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\n\n  public override readonly state: Readonly<ImageCheckBoxEditorState> = {\n    imageOff: \"\",\n    imageOn: \"\",\n    checkboxValue: false,\n    isDisabled: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.checkboxValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps();\n    }\n  }\n\n  private setStateFromProps() {\n    const { propertyRecord } = this.props;\n    let checkboxValue = false;\n    let imageOn = \"\";\n    let imageOff = \"\";\n    let isDisabled = false;\n\n    if (\n      propertyRecord &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      checkboxValue = primitiveValue as boolean;\n    }\n\n    if (propertyRecord && propertyRecord.isDisabled)\n      isDisabled = propertyRecord.isDisabled;\n\n    if (\n      propertyRecord &&\n      propertyRecord.property &&\n      propertyRecord.property.editor &&\n      propertyRecord.property.editor.params\n    ) {\n      const imageCheckBoxParams = propertyRecord.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.CheckBoxImages.valueOf()\n      ) as ImageCheckBoxParams;\n      if (imageCheckBoxParams) {\n        imageOn = imageCheckBoxParams.imageOn;\n        imageOff = imageCheckBoxParams.imageOff;\n      }\n    }\n    this.setState({ imageOn, imageOff, checkboxValue, isDisabled });\n  }\n\n  private _handleClick = (checked: boolean) => {\n    this.setState(\n      {\n        checkboxValue: checked,\n      },\n      async () => {\n        if (this.props.propertyRecord && this.props.onCommit) {\n          const propertyValue = await this.getPropertyValue();\n          if (this._isMounted && propertyValue !== undefined) {\n            this.props.onCommit({\n              propertyRecord: this.props.propertyRecord,\n              newValue: propertyValue,\n            });\n          }\n        }\n      }\n    );\n  };\n\n  public override render() {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-imagecheckbox-editor\",\n      this.props.className\n    );\n    const checked = this.state.checkboxValue;\n    const isDisabled = !!this.state.isDisabled;\n\n    return (\n      // eslint-disable-next-line deprecation/deprecation\n      <ImageCheckBox\n        inputRef={this._inputElement}\n        imageOff={this.state.imageOff}\n        imageOn={this.state.imageOn}\n        className={className}\n        border={true}\n        style={this.props.style}\n        checked={checked}\n        disabled={isDisabled}\n        onClick={this._handleClick}\n        data-testid=\"components-imagecheckbox-editor\"\n      />\n    );\n  }\n}\n\n/** ImageCheckBox Property Editor registered for the \"bool\" and \"boolean\" type names.\n * It uses the [[ImageCheckBoxEditor]] React component.\n * @public\n */\nexport class ImageCheckBoxPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <ImageCheckBoxEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/ImageCheckBoxEditor.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+$image-checkbox-size: 32px;
+
+.components-image-checkbox-editor {
+  height: $image-checkbox-size;
+  width: $image-checkbox-size;
+  margin-left: 0px;
+
+  &.components-cell-editor {
+    border: none;
+  }
+}
+
+.components-property-list--horizontal {
+  .components-image-checkbox-editor {
+    margin-left: var(
+      --iui-font-size-1
+    ); // Clear the resizer in the PropertyGrid
+  }
+}