@itwin/components-react 4.0.0-dev.3 → 4.0.0-dev.6

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

@@ -0,0 +1,180 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ThemedEnumEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
+import { ThemedSelect } from "@itwin/core-react";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+/** EnumEditor React component that is a property editor with select input
+ * @beta @deprecated in 3.0.
+ */
+export class ThemedEnumEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._divElement = React.createRef();
+        /** @internal */
+        this.state = {
+            selectValue: "",
+            valueIsNumber: false,
+            options: undefined,
+        };
+        this._updateSelectValue = (value, action) => {
+            // istanbul ignore else
+            if (this._isMounted && action.action === "select-option" && value) {
+                let selectValue;
+                const selectedOption = value;
+                // istanbul ignore next
+                if (selectedOption === undefined) // no multi-select allowed
+                    return;
+                if (this.state.valueIsNumber)
+                    selectValue = parseInt(selectedOption.value, 10);
+                else
+                    selectValue = selectedOption.value;
+                this.setState({
+                    selectValue,
+                }, async () => {
+                    // istanbul ignore else
+                    if (this.props.propertyRecord && this.props.onCommit) {
+                        const propertyValue = await this.getPropertyValue();
+                        // istanbul ignore else
+                        if (propertyValue) {
+                            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 === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.selectValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    // istanbul ignore next
+    get htmlElement() {
+        return this._divElement.current;
+    }
+    // istanbul ignore next
+    get hasFocus() {
+        let containsFocus = false;
+        // istanbul ignore else
+        if (this._divElement.current)
+            containsFocus = this._divElement.current.contains(document.activeElement);
+        return containsFocus;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const { propertyRecord } = this.props;
+        let initialValue = "";
+        let valueIsNumber = false;
+        let choices;
+        if (propertyRecord && propertyRecord.property.enum) {
+            // istanbul ignore else
+            if (propertyRecord.property.enum.choices instanceof Promise) {
+                choices = await propertyRecord.property.enum.choices;
+            }
+            else {
+                choices = propertyRecord.property.enum.choices;
+            }
+        }
+        let options = [];
+        if (this.state.options === undefined) {
+            if (choices) {
+                choices.forEach((choice) => {
+                    options.push({ value: choice.value.toString(), label: choice.label });
+                });
+            }
+        }
+        else {
+            options = this.state.options;
+        }
+        // istanbul ignore else
+        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;
+            }
+        }
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ selectValue: initialValue, valueIsNumber, options });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-enum-editor", this.props.className);
+        const selectValue = this.state.selectValue ? this.state.selectValue.toString() : undefined;
+        const options = this.state.options === undefined ? [] : this.state.options;
+        const selectedOption = options.find((e) => e.value === selectValue);
+        const { isSearchable, placeholder, noOptionsMessage } = this.props;
+        // set min-width to show about 4 characters + down arrow
+        const minWidthStyle = {
+            minWidth: `${6 * 0.75}em`,
+        };
+        return (React.createElement(ThemedSelect, { divRef: this._divElement, className: className, value: selectedOption, onChange: this._updateSelectValue, "data-testid": "components-select-editor", styles: this.props.style ? this.props.style : minWidthStyle, isSearchable: isSearchable, placeholder: placeholder, noOptionsMessage: noOptionsMessage, isMulti: false, 
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.props.setFocus, options: options }));
+    }
+}
+/** Enum Property Button Group Editor registered for the "enum" type name.
+ * It uses the [[EnumEditor]] React component.
+ * @beta @deprecated in 3.0.
+ */
+export class ThemedEnumPropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get containerHandlesBlur() {
+        return false;
+    }
+    // istanbul ignore next
+    get containerHandlesEscape() {
+        return false;
+    }
+    // istanbul ignore next
+    get containerHandlesEnter() {
+        return false;
+    }
+    // istanbul ignore next
+    get containerHandlesTab() {
+        return false;
+    }
+    // istanbul ignore next
+    get reactNode() {
+        return React.createElement(ThemedEnumEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Enum, ThemedEnumPropertyEditor, StandardEditorNames.ThemedEnum);
+//# sourceMappingURL=ThemedEnumEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedEnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ThemedEnumEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./ThemedEnumEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { EnumerationChoice, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { OptionType, ThemedSelect } from \"@itwin/core-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ActionMeta, ValueType } from \"react-select/src/types\";\r\n\r\n/** Properties for [[EnumEditor]] component\r\n * @beta @deprecated in 3.0.\r\n */\r\nexport interface ThemedEnumEditorProps extends PropertyEditorProps {\r\n  /** Allow searching in enum list */\r\n  isSearchable?: boolean;\r\n  /** The prompt string used when no enum member has been selected */\r\n  placeholder?: string;\r\n  /** The function to return an error message used when the search string can't be found in the list */\r\n  noOptionsMessage?: (obj: { inputValue: string }) => string | null;\r\n}\r\n/** @internal */\r\ninterface EnumEditorState {\r\n  selectValue: string | number;\r\n  valueIsNumber: boolean;\r\n  options: OptionType[] | undefined;\r\n}\r\n\r\n/** EnumEditor React component that is a property editor with select input\r\n * @beta @deprecated in 3.0.\r\n */\r\nexport class ThemedEnumEditor extends React.PureComponent<ThemedEnumEditorProps, EnumEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<EnumEditorState> = {\r\n    selectValue: \"\",\r\n    valueIsNumber: false,\r\n    options: undefined,\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.selectValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  // istanbul ignore next\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._divElement.current;\r\n  }\r\n\r\n  // istanbul ignore next\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    // istanbul ignore else\r\n    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private _updateSelectValue = (value: ValueType<OptionType>, action: ActionMeta<OptionType>) => {\r\n    // istanbul ignore else\r\n    if (this._isMounted && action.action === \"select-option\" && value) {\r\n      let selectValue: string | number;\r\n      const selectedOption: OptionType = value as OptionType;\r\n      // istanbul ignore next\r\n      if (selectedOption === undefined) // no multi-select allowed\r\n        return;\r\n\r\n      if (this.state.valueIsNumber)\r\n        selectValue = parseInt(selectedOption.value, 10);\r\n      else\r\n        selectValue = selectedOption.value;\r\n\r\n      this.setState({\r\n        selectValue,\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 (propertyValue) {\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(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let initialValue: string | number = \"\";\r\n    let valueIsNumber: boolean = false;\r\n    let choices: EnumerationChoice[] | undefined;\r\n\r\n    if (propertyRecord && propertyRecord.property.enum) {\r\n      // istanbul ignore else\r\n      if (propertyRecord.property.enum.choices instanceof Promise) {\r\n        choices = await propertyRecord.property.enum.choices;\r\n      } else {\r\n        choices = propertyRecord.property.enum.choices;\r\n      }\r\n    }\r\n\r\n    let options: OptionType[] = [];\r\n    if (this.state.options === undefined) {\r\n      if (choices) {\r\n        choices.forEach((choice: EnumerationChoice) => {\r\n          options.push({ value: choice.value.toString(), label: choice.label });\r\n        });\r\n      }\r\n    } else {\r\n      options = this.state.options;\r\n    }\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      if (typeof primitiveValue === \"string\") {\r\n        initialValue = primitiveValue;\r\n        valueIsNumber = false;\r\n      } else {\r\n        initialValue = primitiveValue as number;\r\n        valueIsNumber = true;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ selectValue: initialValue, valueIsNumber, options });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-enum-editor\", this.props.className);\r\n    const selectValue = this.state.selectValue ? this.state.selectValue.toString() : undefined;\r\n    const options = this.state.options === undefined ? [] : this.state.options;\r\n    const selectedOption = options.find((e) => e.value === selectValue);\r\n    const { isSearchable, placeholder, noOptionsMessage } = this.props;\r\n    // set min-width to show about 4 characters + down arrow\r\n    const minWidthStyle: React.CSSProperties = {\r\n      minWidth: `${6 * 0.75}em`,\r\n    };\r\n\r\n    return (\r\n      <ThemedSelect\r\n        divRef={this._divElement}\r\n        className={className}\r\n        value={selectedOption}\r\n        onChange={this._updateSelectValue}\r\n        data-testid=\"components-select-editor\"\r\n        styles={this.props.style ? this.props.style : minWidthStyle}\r\n        isSearchable={isSearchable}\r\n        placeholder={placeholder}\r\n        noOptionsMessage={noOptionsMessage}\r\n        isMulti={false}\r\n        // eslint-disable-next-line jsx-a11y/no-autofocus\r\n        autoFocus={this.props.setFocus}\r\n        options={options} />\r\n    );\r\n  }\r\n}\r\n\r\n/** Enum Property Button Group Editor registered for the \"enum\" type name.\r\n * It uses the [[EnumEditor]] React component.\r\n * @beta @deprecated in 3.0.\r\n */\r\nexport class ThemedEnumPropertyEditor extends PropertyEditorBase {\r\n\r\n  // istanbul ignore next\r\n  public override get containerHandlesBlur(): boolean {\r\n    return false;\r\n  }\r\n  // istanbul ignore next\r\n  public override get containerHandlesEscape(): boolean {\r\n    return false;\r\n  }\r\n  // istanbul ignore next\r\n  public override get containerHandlesEnter(): boolean {\r\n    return false;\r\n  }\r\n  // istanbul ignore next\r\n  public override get containerHandlesTab(): boolean {\r\n    return false;\r\n  }\r\n  // istanbul ignore next\r\n  public get reactNode(): React.ReactNode {\r\n    return <ThemedEnumEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Enum, ThemedEnumPropertyEditor, StandardEditorNames.ThemedEnum);\r\n"]}

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

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+* 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/input";
+
+.components-enum-editor {
+  min-width: 100%;
+  height: 100%;
+  margin: 0;
+
+  $enum-editor-height: 24px;
+
+  .uicore-reactSelectTop {
+    max-height: $enum-editor-height;
+
+    .react-select__control {
+      max-height: $enum-editor-height;
+      width: 100%;
+      line-height: $enum-editor-height;
+      min-height: 0px;
+
+
+      .react-select__placeholder {
+        padding: 2px;
+      }
+
+      .react-select__value-container {
+        padding: 2px;
+        max-height: $enum-editor-height;
+        min-height: $enum-editor-height;
+        min-width: 4.5em;
+      }
+    }
+
+    .react-select__single-value {
+      max-height: $enum-editor-height;
+      min-height: $enum-editor-height;
+      margin: 0;
+      min-width: 4.5em;
+    }
+
+    .react-select__indicator {
+      padding: 0 2px;
+      max-height: $enum-editor-height;
+      min-height: $enum-editor-height;
+      width: 100%;
+    }
+  }
+
+  .css-1gtu0rj-indicatorContainer {
+    max-height: $enum-editor-height;
+    width: 100%;
+    padding: 0 8px;
+  }
+
+  .css-tlfecz-indicatorContainer {
+    max-height: $enum-editor-height;
+    width: 100%;
+    padding: 0 8px;
+  }
+
+  .css-g1d714-ValueContainer {
+    max-height: $enum-editor-height;
+    min-height: $enum-editor-height;
+    width: 100%;
+  }
+
+  .css-yk16xz-control {
+    max-height: $enum-editor-height;
+    min-height: $enum-editor-height;
+    min-width: 4.5em;
+    width: 100%;
+  }
+
+  .css-1pahdxg-control {
+    max-height: $enum-editor-height;
+    min-height: $enum-editor-height;
+    min-width: 4.5em;
+    width: 100%;
+  }
+
+}

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

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

package/lib/esm/components-react/editors/ToggleEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA+D,MAAM,uBAAuB,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAGpF,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAAE,YAAW,UAAU;IACjH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,kBAAkB,CAqBxB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAoB/B,gBAAgB;IACA,MAAM;CAkBvB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAE1D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
+{"version":3,"file":"ToggleEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAA+D,MAAM,uBAAuB,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAGpF,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAAE,YAAW,UAAU;IACjH,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAuC;IAE5D,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,kBAAkB,CA8BxB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAoB/B,gBAAgB;IACA,MAAM;CAkBvB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAE1D,IAAoB,oBAAoB,IAAI,OAAO,CAElD;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -1,122 +1,130 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./ToggleEditor.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
-import { ToggleSwitch } from "@itwin/itwinui-react";
-/** ToggleEditor React component that is a property editor with checkbox input
- * @public
- */
-export class ToggleEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        /** @internal */
-        this.state = {
-            toggleValue: false,
-            isDisabled: false,
-        };
-        this._updateToggleValue = (e) => {
-            // istanbul ignore else
-            if (this._isMounted) {
-                // istanbul ignore else
-                if (this._isMounted) {
-                    const toggleValue = !!e.target.checked;
-                    this.setState({
-                        toggleValue,
-                    }, async () => {
-                        // istanbul ignore else
-                        if (this.props.propertyRecord && this.props.onCommit) {
-                            const propertyValue = await this.getPropertyValue();
-                            // istanbul ignore else
-                            if (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 === PropertyValueFormat.Primitive) {
-            propertyValue = {
-                valueFormat: PropertyValueFormat.Primitive,
-                value: this.state.toggleValue,
-                displayValue: "",
-            };
-        }
-        return propertyValue;
-    }
-    get htmlElement() {
-        return this._inputElement.current;
-    }
-    get hasFocus() {
-        return document.activeElement === this._inputElement.current;
-    }
-    /** @internal */
-    componentDidMount() {
-        this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        }
-    }
-    async setStateFromProps() {
-        const { propertyRecord } = this.props;
-        let toggleValue = false;
-        let isDisabled = false;
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
-            const primitiveValue = propertyRecord.value.value;
-            toggleValue = primitiveValue;
-        }
-        // istanbul ignore else
-        if (propertyRecord && propertyRecord.isDisabled)
-            isDisabled = propertyRecord.isDisabled;
-        // istanbul ignore else
-        if (this._isMounted)
-            this.setState({ toggleValue, isDisabled });
-    }
-    /** @internal */
-    render() {
-        const className = classnames("components-cell-editor", "components-toggle-editor", this.props.className);
-        const isChecked = this.state.toggleValue;
-        const isDisabled = !!this.state.isDisabled;
-        return (React.createElement(ToggleSwitch, { ref: this._inputElement, onBlur: this.props.onBlur, className: className, style: this.props.style, checked: isChecked, disabled: isDisabled, onChange: this._updateToggleValue, "data-testid": "components-toggle-editor", setFocus: this.props.setFocus }));
-    }
-}
-/** Toggle Property Editor registered for the "bool" and "boolean" type names and "toggle" editor name.
- * It uses the [[ToggleEditor]] React component.
- * @public
- */
-export class TogglePropertyEditor extends PropertyEditorBase {
-    // istanbul ignore next
-    get containerHandlesBlur() {
-        return false;
-    }
-    get reactNode() {
-        return React.createElement(ToggleEditor, null);
-    }
-}
-PropertyEditorManager.registerEditor(StandardTypeNames.Bool, TogglePropertyEditor, StandardEditorNames.Toggle);
-PropertyEditorManager.registerEditor(StandardTypeNames.Boolean, TogglePropertyEditor, StandardEditorNames.Toggle);
+/*---------------------------------------------------------------------------------------------
+* 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 "./ToggleEditor.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { PropertyValueFormat, StandardEditorNames, StandardTypeNames } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { ToggleSwitch } from "@itwin/itwinui-react";
+/** ToggleEditor React component that is a property editor with checkbox input
+ * @public
+ */
+export class ToggleEditor extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._isMounted = false;
+        this._inputElement = React.createRef();
+        /** @internal */
+        this.state = {
+            toggleValue: false,
+            isDisabled: false,
+        };
+        this._updateToggleValue = (e) => {
+            // istanbul ignore else
+            if (this._isMounted) {
+                // istanbul ignore else
+                if (this._isMounted) {
+                    let toggleValue = false;
+                    // istanbul ignore if
+                    if (e.target.checked !== undefined) // Needed for unit test environment
+                        toggleValue = e.target.checked;
+                    else {
+                        // istanbul ignore else
+                        if (e.target.value !== undefined && typeof e.target.value === "boolean")
+                            toggleValue = e.target.value;
+                    }
+                    this.setState({
+                        toggleValue,
+                    }, async () => {
+                        // istanbul ignore else
+                        if (this.props.propertyRecord && this.props.onCommit) {
+                            const propertyValue = await this.getPropertyValue();
+                            // istanbul ignore else
+                            if (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 === PropertyValueFormat.Primitive) {
+            propertyValue = {
+                valueFormat: PropertyValueFormat.Primitive,
+                value: this.state.toggleValue,
+                displayValue: "",
+            };
+        }
+        return propertyValue;
+    }
+    get htmlElement() {
+        return this._inputElement.current;
+    }
+    get hasFocus() {
+        return document.activeElement === this._inputElement.current;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._isMounted = true;
+        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.propertyRecord !== prevProps.propertyRecord) {
+            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+    }
+    async setStateFromProps() {
+        const { propertyRecord } = this.props;
+        let toggleValue = false;
+        let isDisabled = false;
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+            const primitiveValue = propertyRecord.value.value;
+            toggleValue = primitiveValue;
+        }
+        // istanbul ignore else
+        if (propertyRecord && propertyRecord.isDisabled)
+            isDisabled = propertyRecord.isDisabled;
+        // istanbul ignore else
+        if (this._isMounted)
+            this.setState({ toggleValue, isDisabled });
+    }
+    /** @internal */
+    render() {
+        const className = classnames("components-cell-editor", "components-toggle-editor", this.props.className);
+        const isChecked = this.state.toggleValue;
+        const isDisabled = !!this.state.isDisabled;
+        return (React.createElement(ToggleSwitch, { ref: this._inputElement, onBlur: this.props.onBlur, className: className, style: this.props.style, checked: isChecked, disabled: isDisabled, onChange: this._updateToggleValue, "data-testid": "components-toggle-editor", setFocus: this.props.setFocus }));
+    }
+}
+/** Toggle Property Editor registered for the "bool" and "boolean" type names and "toggle" editor name.
+ * It uses the [[ToggleEditor]] React component.
+ * @public
+ */
+export class TogglePropertyEditor extends PropertyEditorBase {
+    // istanbul ignore next
+    get containerHandlesBlur() {
+        return false;
+    }
+    get reactNode() {
+        return React.createElement(ToggleEditor, null);
+    }
+}
+PropertyEditorManager.registerEditor(StandardTypeNames.Bool, TogglePropertyEditor, StandardEditorNames.Toggle);
+PropertyEditorManager.registerEditor(StandardTypeNames.Boolean, TogglePropertyEditor, StandardEditorNames.Toggle);
 //# sourceMappingURL=ToggleEditor.js.map