@itwin/components-react 3.6.0-dev.8 → 4.0.0-dev.2

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

@@ -1,148 +1,148 @@
-"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.ImageCheckBoxPropertyEditor = exports.ImageCheckBoxEditor = void 0;
-require("./ImageCheckBoxEditor.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const PropertyEditorManager_1 = require("./PropertyEditorManager");
-const core_react_1 = require("@itwin/core-react");
-/** [[ImageCheckBoxEditor]]
- * Boolean editor that renders with an image instead of checkbox
- * @public
- */
-class ImageCheckBoxEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        /** @internal */
-        this.state = {
-            imageOff: "",
-            imageOn: "",
-            checkboxValue: false,
-            isDisabled: false,
-        };
-        this._handleClick = (checked) => {
-            this.setState({
-                checkboxValue: checked,
-            }, async () => {
-                // istanbul ignore else
-                if (this.props.propertyRecord && this.props.onCommit) {
-                    const propertyValue = await this.getPropertyValue();
-                    // istanbul ignore else
-                    if (this._isMounted && propertyValue !== undefined) {
-                        this.props.onCommit({ propertyRecord: this.props.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.checkboxValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._inputElement.current;
-    }
-    get hasFocus() {
-        return document.activeElement === this._inputElement.current;
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps();
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    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;
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
-            const primitiveValue = propertyRecord.value.value;
-            checkboxValue = primitiveValue;
-        }
-        // istanbul ignore else
-        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 === appui_abstract_1.PropertyEditorParamTypes.CheckBoxImages);
-            // istanbul ignore else
-            if (imageCheckBoxParams) {
-                imageOn = imageCheckBoxParams.imageOn;
-                imageOff = imageCheckBoxParams.imageOff;
-            }
-        }
-        this.setState({ imageOn, imageOff, checkboxValue, isDisabled });
-    }
-    render() {
-        const className = (0, classnames_1.default)("components-cell-editor", "components-imagecheckbox-editor", this.props.className);
-        const checked = this.state.checkboxValue;
-        const isDisabled = !!this.state.isDisabled;
-        return (React.createElement(core_react_1.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" }));
-    }
-}
-exports.ImageCheckBoxEditor = ImageCheckBoxEditor;
-/** ImageCheckBox Property Editor registered for the "bool" and "boolean" type names.
- * It uses the [[ImageCheckBoxEditor]] React component.
- * @public
- */
-class ImageCheckBoxPropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
-    get reactNode() {
-        return React.createElement(ImageCheckBoxEditor, null);
-    }
-}
-exports.ImageCheckBoxPropertyEditor = ImageCheckBoxPropertyEditor;
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, appui_abstract_1.StandardEditorNames.ImageCheckBox);
-PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, appui_abstract_1.StandardEditorNames.ImageCheckBox);
+"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.ImageCheckBoxPropertyEditor = exports.ImageCheckBoxEditor = void 0;
+require("./ImageCheckBoxEditor.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const PropertyEditorManager_1 = require("./PropertyEditorManager");
+const core_react_1 = require("@itwin/core-react");
+/** [[ImageCheckBoxEditor]]
+ * Boolean editor that renders with an image instead of checkbox
+ * @public
+ */
+class ImageCheckBoxEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        /** @internal */
+        this.state = {
+            imageOff: "",
+            imageOn: "",
+            checkboxValue: false,
+            isDisabled: false,
+        };
+        this._handleClick = (checked) => {
+            this.setState({
+                checkboxValue: checked,
+            }, async () => {
+                // istanbul ignore else
+                if (this.props.propertyRecord && this.props.onCommit) {
+                    const propertyValue = await this.getPropertyValue();
+                    // istanbul ignore else
+                    if (this._isMounted && propertyValue !== undefined) {
+                        this.props.onCommit({ propertyRecord: this.props.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.checkboxValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps();
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    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;
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.value.valueFormat === appui_abstract_1.PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            checkboxValue = primitiveValue;
+        }
+        // istanbul ignore else
+        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 === appui_abstract_1.PropertyEditorParamTypes.CheckBoxImages);
+            // istanbul ignore else
+            if (imageCheckBoxParams) {
+                imageOn = imageCheckBoxParams.imageOn;
+                imageOff = imageCheckBoxParams.imageOff;
+            }
+        }
+        this.setState({ imageOn, imageOff, checkboxValue, isDisabled });
+    }
+    render() {
+        const className = (0, classnames_1.default)("components-cell-editor", "components-imagecheckbox-editor", this.props.className);
+        const checked = this.state.checkboxValue;
+        const isDisabled = !!this.state.isDisabled;
+        return (React.createElement(core_react_1.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" }));
+    }
+}
+exports.ImageCheckBoxEditor = ImageCheckBoxEditor;
+/** ImageCheckBox Property Editor registered for the "bool" and "boolean" type names.
+ * It uses the [[ImageCheckBoxEditor]] React component.
+ * @public
+ */
+class ImageCheckBoxPropertyEditor extends PropertyEditorManager_1.PropertyEditorBase {
+    get reactNode() {
+        return React.createElement(ImageCheckBoxEditor, null);
+    }
+}
+exports.ImageCheckBoxPropertyEditor = ImageCheckBoxPropertyEditor;
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, appui_abstract_1.StandardEditorNames.ImageCheckBox);
+PropertyEditorManager_1.PropertyEditorManager.registerEditor(appui_abstract_1.StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, appui_abstract_1.StandardEditorNames.ImageCheckBox);
 //# sourceMappingURL=ImageCheckBoxEditor.js.map

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

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

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

@@ -1,23 +1,24 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-$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: $iui-font-size;    // Clear the resizer in the PropertyGrid
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+  }
+}

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

@@ -1,53 +1,53 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./NumericInputEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface NumericInputEditorState {
-    value: number;
-    readonly: boolean;
-    isDisabled?: boolean;
-    size?: number;
-    maxLength?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    precision?: number;
-}
-/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
- * @public
- */
-export declare class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {
-    private _isMounted;
-    private _inputElement;
-    hasFocus: boolean;
-    /** @internal */
-    readonly state: Readonly<NumericInputEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    private _handleCommit;
-    private _updateValue;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): React.ReactNode;
-}
-/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
- * It uses the [[NumericInputEditor]] React component.
- * @public
- */
-export declare class NumericInputPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-    get containerHandlesEnter(): boolean;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./NumericInputEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface NumericInputEditorState {
+    value: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+    size?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+}
+/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons
+ * @public
+ */
+export declare class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {
+    private _isMounted;
+    private _inputElement;
+    hasFocus: boolean;
+    /** @internal */
+    readonly state: Readonly<NumericInputEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    private _handleCommit;
+    private _updateValue;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): React.ReactNode;
+}
+/** Numeric Input Property Editor registered for the "number" type name and "numeric-input" editor name.
+ * It uses the [[NumericInputEditor]] React component.
+ * @public
+ */
+export declare class NumericInputPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+    get containerHandlesEnter(): boolean;
+}
+export {};
 //# sourceMappingURL=NumericInputEditor.d.ts.map