@itwin/components-react 4.0.0-dev.9 → 4.0.1

package/lib/esm/components-react/datepicker/TimeField.scss

@@ -1,76 +1,76 @@
-/*---------------------------------------------------------------------------------------------
-* 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/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.components-time {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: $buic-background-control;
-  border: 1px solid $buic-inputs-border;
-  border-radius: var(--iui-border-radius-1);
-  box-shadow: var(--buic-inputs-boxshadow) 0px 1px 1px inset;
-  box-sizing: border-box;
-
-  &.has-error {
-    color: $buic-foreground-alert;
-  }
-
-  .components-time-input {
-    box-sizing: border-box;
-    width: 2em;
-    text-align: center;
-    border: none;
-    box-shadow: none;
-    margin: 0;
-
-    &.iui-input {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    &:focus {
-      outline: 0px;
-      border: 1px solid $buic-inputs-border;
-      border-radius: var(--iui-border-radius-1);
-      border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
-      z-index: 1;
-      /* bump z-index so drop shadow in not cut off by AM/PM */
-    }
-  }
-
-  .components-time-period-input {
-    box-sizing: border-box;
-    width: 3em;
-    text-align: center;
-    border: none;
-    padding-left: 0;
-    padding-right: 0;
-    box-shadow: none;
-    margin: 0;
-
-    &:focus {
-      outline: 0px;
-      border: 1px solid $buic-inputs-border;
-      border-radius: var(--iui-border-radius-1);
-      border-color: var(--buic-foreground-focus-border);
-      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
-    }
-  }
-
-  .component-time-separator {
-    margin: 0;
-    padding: 0 1px;
-  }
-
-  .iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/inputs/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.components-time {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: $buic-background-control;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: var(--buic-inputs-boxshadow) 0px 1px 1px inset;
+  box-sizing: border-box;
+
+  &.has-error {
+    color: var(--iui-color-text-negative);
+  }
+
+  .components-time-input {
+    box-sizing: border-box;
+    width: 2em;
+    text-align: center;
+    border: none;
+    box-shadow: none;
+    margin: 0;
+
+    &.iui-input {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    &:focus {
+      outline: 0px;
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
+      border-color: var(--buic-foreground-focus-border);
+      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+      z-index: 1;
+      /* bump z-index so drop shadow in not cut off by AM/PM */
+    }
+  }
+
+  .components-time-period-input {
+    box-sizing: border-box;
+    width: 3em;
+    text-align: center;
+    border: none;
+    padding-left: 0;
+    padding-right: 0;
+    box-shadow: none;
+    margin: 0;
+
+    &:focus {
+      outline: 0px;
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
+      border-color: var(--buic-foreground-focus-border);
+      box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
+        var(--buic-focus-boxshadow-gradient2) 0px 0px 0px 2px;
+    }
+  }
+
+  .component-time-separator {
+    margin: 0;
+    padding: 0 1px;
+  }
+
+  .iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

package/lib/esm/components-react/editors/BooleanEditor.d.ts

@@ -1,46 +1,46 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./BooleanEditor.scss";
-import * as React from "react";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
-import { PropertyEditorBase } from "./PropertyEditorManager";
-/** @internal */
-interface BooleanEditorState {
-    checkboxValue: boolean;
-    isDisabled?: boolean;
-}
-/** BooleanEditor React component that is a property editor with checkbox input
- * @public
- */
-export declare class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {
-    private _isMounted;
-    private _inputElement;
-    /** @internal */
-    readonly state: Readonly<BooleanEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    private getPropertyValueSync;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private _updateCheckboxValue;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentWillUnmount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Boolean Property Editor registered for the "bool" and "boolean" type names.
- * It uses the [[BooleanEditor]] React component.
- * @public
- */
-export declare class BooleanPropertyEditor extends PropertyEditorBase {
-    get containerHandlesBlur(): boolean;
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./BooleanEditor.scss";
+import * as React from "react";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorProps, TypeEditor } from "./EditorContainer";
+import { PropertyEditorBase } from "./PropertyEditorManager";
+/** @internal */
+interface BooleanEditorState {
+    checkboxValue: boolean;
+    isDisabled?: boolean;
+}
+/** BooleanEditor React component that is a property editor with checkbox input
+ * @public
+ */
+export declare class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {
+    private _isMounted;
+    private _inputElement;
+    /** @internal */
+    readonly state: Readonly<BooleanEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    private getPropertyValueSync;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private _updateCheckboxValue;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Boolean Property Editor registered for the "bool" and "boolean" type names.
+ * It uses the [[BooleanEditor]] React component.
+ * @public
+ */
+export declare class BooleanPropertyEditor extends PropertyEditorBase {
+    get containerHandlesBlur(): boolean;
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=BooleanEditor.d.ts.map

package/lib/esm/components-react/editors/BooleanEditor.js

@@ -1,122 +1,122 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./BooleanEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardTypeNames } from "@itwin/appui-abstract";
-import { Checkbox } from "@itwin/itwinui-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-/** BooleanEditor React component that is a property editor with checkbox input
- * @public
- */
-export class BooleanEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        /** @internal */
-        this.state = {
-            checkboxValue: false,
-            isDisabled: false,
-        };
-        this._updateCheckboxValue = (e) => {
-            // istanbul ignore else
-            if (this._isMounted) {
-                const checkboxValue = !!e.target.checked;
-                this.setState({
-                    checkboxValue,
-                }, () => {
-                    // istanbul ignore else
-                    if (this.props.propertyRecord && this.props.onCommit) {
-                        const propertyValue = this.getPropertyValueSync();
-                        // istanbul ignore else
-                        if (propertyValue !== undefined) {
-                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
-                        }
-                    }
-                });
-            }
-        };
-    }
-    async getPropertyValue() {
-        return this.getPropertyValueSync();
-    }
-    getPropertyValueSync() {
-        const record = this.props.propertyRecord;
-        let propertyValue;
-        // istanbul ignore else
-        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;
-    }
-    /** @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 isDisabled = false;
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
-            const primitiveValue = propertyRecord.value.value;
-            checkboxValue = primitiveValue;
-        }
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.isDisabled)
-            isDisabled = propertyRecord.isDisabled;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ checkboxValue, isDisabled });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-boolean-editor", this.props.className);
-        const checked = this.state.checkboxValue;
-        const isDisabled = !!this.state.isDisabled;
-        return (React.createElement(Checkbox, { ref: this._inputElement, onBlur: this.props.onBlur, className: className, style: this.props.style, checked: checked, onChange: this._updateCheckboxValue, setFocus: this.props.setFocus, disabled: isDisabled, "data-testid": "components-checkbox-editor" }));
-    }
-}
-/** Boolean Property Editor registered for the "bool" and "boolean" type names.
- * It uses the [[BooleanEditor]] React component.
- * @public
- */
-export class BooleanPropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get containerHandlesBlur() {
-        return false;
-    }
-    get reactNode() {
-        return React.createElement(BooleanEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);
-PropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);
+/*---------------------------------------------------------------------------------------------
+* 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 "./BooleanEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardTypeNames } from "@itwin/appui-abstract";
+import { Checkbox } from "@itwin/itwinui-react";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+/** BooleanEditor React component that is a property editor with checkbox input
+ * @public
+ */
+export class BooleanEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        /** @internal */
+        this.state = {
+            checkboxValue: false,
+            isDisabled: false,
+        };
+        this._updateCheckboxValue = (e) => {
+            // istanbul ignore else
+            if (this._isMounted) {
+                const checkboxValue = !!e.target.checked;
+                this.setState({
+                    checkboxValue,
+                }, () => {
+                    // istanbul ignore else
+                    if (this.props.propertyRecord && this.props.onCommit) {
+                        const propertyValue = this.getPropertyValueSync();
+                        // istanbul ignore else
+                        if (propertyValue !== undefined) {
+                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                        }
+                    }
+                });
+            }
+        };
+    }
+    async getPropertyValue() {
+        return this.getPropertyValueSync();
+    }
+    getPropertyValueSync() {
+        const record = this.props.propertyRecord;
+        let propertyValue;
+        // istanbul ignore else
+        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;
+    }
+    /** @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 isDisabled = false;
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            checkboxValue = primitiveValue;
+        }
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.isDisabled)
+            isDisabled = propertyRecord.isDisabled;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ checkboxValue, isDisabled });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-boolean-editor", this.props.className);
+        const checked = this.state.checkboxValue;
+        const isDisabled = !!this.state.isDisabled;
+        return (React.createElement(Checkbox, { ref: this._inputElement, onBlur: this.props.onBlur, className: className, style: this.props.style, checked: checked, onChange: this._updateCheckboxValue, setFocus: this.props.setFocus, disabled: isDisabled, "data-testid": "components-checkbox-editor" }));
+    }
+}
+/** Boolean Property Editor registered for the "bool" and "boolean" type names.
+ * It uses the [[BooleanEditor]] React component.
+ * @public
+ */
+export class BooleanPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get containerHandlesBlur() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(BooleanEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);
+PropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);
 //# sourceMappingURL=BooleanEditor.js.map

package/lib/esm/components-react/editors/BooleanEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.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 \"./BooleanEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal */\r\ninterface BooleanEditorState {\r\n  checkboxValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** BooleanEditor React component that is a property editor with checkbox input\r\n * @public\r\n */\r\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement = React.createRef<HTMLInputElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<BooleanEditorState> = {\r\n    checkboxValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    return this.getPropertyValueSync();\r\n  }\r\n\r\n  private getPropertyValueSync(): 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  private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      const checkboxValue = !!e.target.checked;\r\n\r\n      this.setState({\r\n        checkboxValue,\r\n      }, () => {\r\n        // istanbul ignore else\r\n        if (this.props.propertyRecord && this.props.onCommit) {\r\n          const propertyValue = this.getPropertyValueSync();\r\n          // istanbul ignore else\r\n          if (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\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 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    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ checkboxValue, isDisabled });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-boolean-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      <Checkbox\r\n        ref={this._inputElement}\r\n        onBlur={this.props.onBlur}\r\n        className={className}\r\n        style={this.props.style}\r\n        checked={checked}\r\n        onChange={this._updateCheckboxValue}\r\n        setFocus={this.props.setFocus}\r\n        disabled={isDisabled}\r\n        data-testid=\"components-checkbox-editor\">\r\n      </Checkbox>\r\n    );\r\n  }\r\n}\r\n\r\n/** Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[BooleanEditor]] React component.\r\n * @public\r\n */\r\nexport class BooleanPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <BooleanEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\r\n"]}
+{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/BooleanEditor.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 \"./BooleanEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\n\n/** @internal */\ninterface BooleanEditorState {\n  checkboxValue: boolean;\n  isDisabled?: boolean;\n}\n\n/** BooleanEditor React component that is a property editor with checkbox input\n * @public\n */\nexport class BooleanEditor extends React.PureComponent<PropertyEditorProps, BooleanEditorState> implements TypeEditor {\n  private _isMounted = false;\n  private _inputElement = React.createRef<HTMLInputElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<BooleanEditorState> = {\n    checkboxValue: false,\n    isDisabled: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    return this.getPropertyValueSync();\n  }\n\n  private getPropertyValueSync(): 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  private _updateCheckboxValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // istanbul ignore else\n    if (this._isMounted) {\n      const checkboxValue = !!e.target.checked;\n\n      this.setState({\n        checkboxValue,\n      }, () => {\n        // istanbul ignore else\n        if (this.props.propertyRecord && this.props.onCommit) {\n          const propertyValue = this.getPropertyValueSync();\n          // istanbul ignore else\n          if (propertyValue !== undefined) {\n            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\n          }\n        }\n      });\n    }\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 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    // istanbul ignore else\n    if (this._isMounted)\n      this.setState({ checkboxValue, isDisabled });\n  }\n\n  /** @internal */\n  public override render() {\n    const className = classnames(\"components-cell-editor\", \"components-boolean-editor\", this.props.className);\n    const checked = this.state.checkboxValue;\n    const isDisabled = !!this.state.isDisabled;\n\n    return (\n      <Checkbox\n        ref={this._inputElement}\n        onBlur={this.props.onBlur}\n        className={className}\n        style={this.props.style}\n        checked={checked}\n        onChange={this._updateCheckboxValue}\n        setFocus={this.props.setFocus}\n        disabled={isDisabled}\n        data-testid=\"components-checkbox-editor\">\n      </Checkbox>\n    );\n  }\n}\n\n/** Boolean Property Editor registered for the \"bool\" and \"boolean\" type names.\n * It uses the [[BooleanEditor]] React component.\n * @public\n */\nexport class BooleanPropertyEditor extends PropertyEditorBase {\n  // istanbul ignore next\n  public override get containerHandlesBlur(): boolean {\n    return false;\n  }\n\n  public get reactNode(): React.ReactNode {\n    return <BooleanEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, BooleanPropertyEditor);\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, BooleanPropertyEditor);\n"]}

package/lib/esm/components-react/editors/BooleanEditor.scss

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