@itwin/components-react 4.1.0 → 4.2.0

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -10,7 +10,7 @@ import classnames from "classnames";
 import * as React from "react";
 import { IconSpecUtilities, PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames, } from "@itwin/appui-abstract";
 import { Icon } from "@itwin/core-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { PropertyEditorBase, PropertyEditorManager, } from "./PropertyEditorManager";
 import svgPlaceholder from "@bentley/icons-generic/icons/placeholder.svg";
 /** EnumButtonGroupEditor React component that is a property editor with select input
  * @public
@@ -72,18 +72,20 @@ export class EnumButtonGroupEditor extends React.Component {
     }
     /** @internal */
     componentDidMount() {
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        void this.setStateFromProps();
     }
     /** @internal */
     componentDidUpdate(prevProps) {
         if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+            void this.setStateFromProps();
         }
     }
     async setStateFromProps() {
         const { propertyRecord } = this.props;
         // istanbul ignore else
-        if (propertyRecord && propertyRecord.property.enum && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+        if (propertyRecord &&
+            propertyRecord.property.enum &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
             const primitiveValue = propertyRecord.value.value;
             let selectValue;
             if (typeof primitiveValue === "string") {
@@ -106,9 +108,11 @@ export class EnumButtonGroupEditor extends React.Component {
             const enumIcons = new Array(numChoices);
             enumIcons.fill({ iconSpec: this._placeholderIconSpec });
             // istanbul ignore else
-            if (propertyRecord.property.editor && propertyRecord.property.editor.params) {
+            if (propertyRecord.property.editor &&
+                propertyRecord.property.editor.params) {
                 // istanbul ignore else
-                if (propertyRecord.property.editor && propertyRecord.property.editor.params) {
+                if (propertyRecord.property.editor &&
+                    propertyRecord.property.editor.params) {
                     const bgParams = propertyRecord.property.editor.params.find((param) => param.type === PropertyEditorParamTypes.ButtonGroupData);
                     // istanbul ignore else
                     if (bgParams) {
@@ -125,8 +129,10 @@ export class EnumButtonGroupEditor extends React.Component {
         }
     }
     getButton(choice, index) {
-        const choiceValue = this.state.choices ? this.state.choices[index].value : /* istanbul ignore next */ 0;
-        const isActive = (choiceValue === this.state.selectValue) ? true : false;
+        const choiceValue = this.state.choices
+            ? this.state.choices[index].value
+            : /* istanbul ignore next */ 0;
+        const isActive = choiceValue === this.state.selectValue ? true : false;
         let isDisabled = false;
         const isEnabledFunction = this.state.enumIcons[index].isEnabledFunction;
         // istanbul ignore else
@@ -139,7 +145,9 @@ export class EnumButtonGroupEditor extends React.Component {
     }
     /** @internal */
     render() {
-        return (React.createElement("div", { className: classnames("components-enumbuttongroup-editor", this.props.className), style: this.props.style, ref: this._divElement }, this.state.choices && this.state.enumIcons.length && this.state.choices.map((choice, index) => this.getButton(choice, index))));
+        return (React.createElement("div", { className: classnames("components-enumbuttongroup-editor", this.props.className), style: this.props.style, ref: this._divElement }, this.state.choices &&
+            this.state.enumIcons.length &&
+            this.state.choices.map((choice, index) => this.getButton(choice, index))));
     }
 }
 /** Enum Property Button Group Editor registered for the "enum" type name and the "enum-buttongroup" editor name.
@@ -147,6 +155,7 @@ export class EnumButtonGroupEditor extends React.Component {
  * @public
  */
 export class EnumPropertyButtonGroupEditor extends PropertyEditorBase {
+    // istanbul ignore next
     get reactNode() {
         return React.createElement(EnumButtonGroupEditor, null);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"EnumButtonGroupEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumButtonGroupEditor.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 \"./EnumButtonGroupEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type {\r\n  ButtonGroupEditorParams, EnumerationChoice, IconDefinition, PropertyEditorParams, PropertyRecord,\r\n  PropertyValue} from \"@itwin/appui-abstract\";\r\nimport { IconSpecUtilities, PropertyEditorParamTypes, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport svgPlaceholder from \"@bentley/icons-generic/icons/placeholder.svg\";\r\n\r\n// cspell:ignore buttongroup enumbuttongroup\r\n\r\n/** @internal */\r\ninterface EnumButtonGroupEditorState {\r\n  selectValue: string | number;\r\n  enumIcons: IconDefinition[];\r\n  choices: EnumerationChoice[];\r\n}\r\n\r\n/** EnumButtonGroupEditor React component that is a property editor with select input\r\n * @public\r\n */\r\nexport class EnumButtonGroupEditor extends React.Component<PropertyEditorProps, EnumButtonGroupEditorState> implements TypeEditor {\r\n  private _btnRefs = new Map<string | number, HTMLButtonElement>();\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n  private _placeholderIconSpec = IconSpecUtilities.createWebComponentIconSpec(svgPlaceholder);\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<EnumButtonGroupEditorState> = {\r\n    selectValue: \"\",\r\n    enumIcons: [],\r\n    choices: [],\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  public get htmlElement(): HTMLElement | null {\r\n    return this._divElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    // 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  /** @internal */\r\n  public override componentDidMount() {\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\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\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.property.enum && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      let selectValue: string | number;\r\n\r\n      if (typeof primitiveValue === \"string\") {\r\n        selectValue = primitiveValue;\r\n      } else {\r\n        selectValue = primitiveValue as number;\r\n      }\r\n\r\n      let choices: EnumerationChoice[] = [];\r\n      // istanbul ignore else\r\n      if (propertyRecord && propertyRecord.property.enum) {\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      const numChoices = choices.length;\r\n      const enumIcons = new Array<IconDefinition>(numChoices);\r\n      enumIcons.fill({ iconSpec: this._placeholderIconSpec });\r\n\r\n      // istanbul ignore else\r\n      if (propertyRecord.property.editor && propertyRecord.property.editor.params) {\r\n        // istanbul ignore else\r\n        if (propertyRecord.property.editor && propertyRecord.property.editor.params) {\r\n          const bgParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ButtonGroupData) as ButtonGroupEditorParams;\r\n          // istanbul ignore else\r\n          if (bgParams) {\r\n            bgParams.buttons.forEach((iconDef: IconDefinition, index: number) => {\r\n              // istanbul ignore else\r\n              if (index < numChoices) {\r\n                enumIcons[index] = iconDef;\r\n              }\r\n            });\r\n          }\r\n        }\r\n      }\r\n\r\n      this.setState({ selectValue, enumIcons, choices });\r\n    }\r\n  }\r\n\r\n  private _handleButtonClick = (index: number) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    // istanbul ignore else\r\n    if (this.state.choices && this.state.choices.length > index) {\r\n      const selectValue = this.state.choices[index].value;\r\n\r\n      this.setState({\r\n        selectValue,\r\n      }, async () => {\r\n        // istanbul ignore else\r\n        if (propertyRecord && this.props.onCommit) {\r\n          const propertyValue = await this.getPropertyValue();\r\n          // istanbul ignore else\r\n          if (propertyValue !== undefined) {\r\n            this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n          }\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  private getButton(choice: EnumerationChoice, index: number) {\r\n    const choiceValue = this.state.choices ? this.state.choices[index].value : /* istanbul ignore next */ 0;\r\n    const isActive = (choiceValue === this.state.selectValue) ? true : false;\r\n    let isDisabled = false;\r\n    const isEnabledFunction = this.state.enumIcons[index].isEnabledFunction;\r\n    // istanbul ignore else\r\n    if (isEnabledFunction) {\r\n      isDisabled = !isEnabledFunction();\r\n    }\r\n\r\n    const className = classnames(\r\n      \"components-enumbuttongroup-button\",\r\n      isDisabled && \"nz-is-disabled\",\r\n      isActive && \"nz-is-active\",\r\n    );\r\n\r\n    return (\r\n      <button\r\n        ref={(ref: HTMLButtonElement|null) => ref && this._btnRefs.set(choiceValue, ref)}\r\n        data-testid={choice.label}\r\n        className={className}\r\n        title={choice.label}\r\n        key={choice.label}\r\n        onClick={() => this._handleButtonClick(index)}\r\n      >\r\n        <Icon iconSpec={this.state.enumIcons[index].iconSpec} />\r\n      </button >\r\n    );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    return (\r\n      <div className={classnames(\"components-enumbuttongroup-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        {this.state.choices && this.state.enumIcons.length && this.state.choices.map((choice: EnumerationChoice, index: number) => this.getButton(choice, index))}\r\n      </div>);\r\n  }\r\n}\r\n\r\n/** Enum Property Button Group Editor registered for the \"enum\" type name and the \"enum-buttongroup\" editor name.\r\n * It uses the [[EnumButtonGroupEditor]] React component.\r\n * @public\r\n */\r\nexport class EnumPropertyButtonGroupEditor extends PropertyEditorBase {  // istanbul ignore next\r\n  public get reactNode(): React.ReactNode {\r\n    return <EnumButtonGroupEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Enum, EnumPropertyButtonGroupEditor, StandardEditorNames.EnumButtonGroup);\r\n"]}
+{"version":3,"file":"EnumButtonGroupEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumButtonGroupEditor.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 \"./EnumButtonGroupEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  ButtonGroupEditorParams,\n  EnumerationChoice,\n  IconDefinition,\n  PropertyEditorParams,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  IconSpecUtilities,\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n  StandardEditorNames,\n  StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport {\n  PropertyEditorBase,\n  PropertyEditorManager,\n} from \"./PropertyEditorManager\";\nimport svgPlaceholder from \"@bentley/icons-generic/icons/placeholder.svg\";\n\n// cspell:ignore buttongroup enumbuttongroup\n\n/** @internal */\ninterface EnumButtonGroupEditorState {\n  selectValue: string | number;\n  enumIcons: IconDefinition[];\n  choices: EnumerationChoice[];\n}\n\n/** EnumButtonGroupEditor React component that is a property editor with select input\n * @public\n */\nexport class EnumButtonGroupEditor\n  extends React.Component<PropertyEditorProps, EnumButtonGroupEditorState>\n  implements TypeEditor\n{\n  private _btnRefs = new Map<string | number, HTMLButtonElement>();\n  private _divElement = React.createRef<HTMLDivElement>();\n  private _placeholderIconSpec =\n    IconSpecUtilities.createWebComponentIconSpec(svgPlaceholder);\n\n  /** @internal */\n  public override readonly state: Readonly<EnumButtonGroupEditorState> = {\n    selectValue: \"\",\n    enumIcons: [],\n    choices: [],\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.selectValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    // istanbul ignore else\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    void this.setStateFromProps();\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n\n    // istanbul ignore else\n    if (\n      propertyRecord &&\n      propertyRecord.property.enum &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      let selectValue: string | number;\n\n      if (typeof primitiveValue === \"string\") {\n        selectValue = primitiveValue;\n      } else {\n        selectValue = primitiveValue as number;\n      }\n\n      let choices: EnumerationChoice[] = [];\n      // istanbul ignore else\n      if (propertyRecord && propertyRecord.property.enum) {\n        if (propertyRecord.property.enum.choices instanceof Promise) {\n          choices = await propertyRecord.property.enum.choices;\n        } else {\n          choices = propertyRecord.property.enum.choices;\n        }\n      }\n\n      const numChoices = choices.length;\n      const enumIcons = new Array<IconDefinition>(numChoices);\n      enumIcons.fill({ iconSpec: this._placeholderIconSpec });\n\n      // istanbul ignore else\n      if (\n        propertyRecord.property.editor &&\n        propertyRecord.property.editor.params\n      ) {\n        // istanbul ignore else\n        if (\n          propertyRecord.property.editor &&\n          propertyRecord.property.editor.params\n        ) {\n          const bgParams = propertyRecord.property.editor.params.find(\n            (param: PropertyEditorParams) =>\n              param.type === PropertyEditorParamTypes.ButtonGroupData\n          ) as ButtonGroupEditorParams;\n          // istanbul ignore else\n          if (bgParams) {\n            bgParams.buttons.forEach(\n              (iconDef: IconDefinition, index: number) => {\n                // istanbul ignore else\n                if (index < numChoices) {\n                  enumIcons[index] = iconDef;\n                }\n              }\n            );\n          }\n        }\n      }\n\n      this.setState({ selectValue, enumIcons, choices });\n    }\n  }\n\n  private _handleButtonClick = (index: number) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    // istanbul ignore else\n    if (this.state.choices && this.state.choices.length > index) {\n      const selectValue = this.state.choices[index].value;\n\n      this.setState(\n        {\n          selectValue,\n        },\n        async () => {\n          // istanbul ignore else\n          if (propertyRecord && this.props.onCommit) {\n            const propertyValue = await this.getPropertyValue();\n            // istanbul ignore else\n            if (propertyValue !== undefined) {\n              this.props.onCommit({ propertyRecord, newValue: propertyValue });\n            }\n          }\n        }\n      );\n    }\n  };\n\n  private getButton(choice: EnumerationChoice, index: number) {\n    const choiceValue = this.state.choices\n      ? this.state.choices[index].value\n      : /* istanbul ignore next */ 0;\n    const isActive = choiceValue === this.state.selectValue ? true : false;\n    let isDisabled = false;\n    const isEnabledFunction = this.state.enumIcons[index].isEnabledFunction;\n    // istanbul ignore else\n    if (isEnabledFunction) {\n      isDisabled = !isEnabledFunction();\n    }\n\n    const className = classnames(\n      \"components-enumbuttongroup-button\",\n      isDisabled && \"nz-is-disabled\",\n      isActive && \"nz-is-active\"\n    );\n\n    return (\n      <button\n        ref={(ref: HTMLButtonElement | null) =>\n          ref && this._btnRefs.set(choiceValue, ref)\n        }\n        data-testid={choice.label}\n        className={className}\n        title={choice.label}\n        key={choice.label}\n        onClick={() => this._handleButtonClick(index)}\n      >\n        <Icon iconSpec={this.state.enumIcons[index].iconSpec} />\n      </button>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    return (\n      <div\n        className={classnames(\n          \"components-enumbuttongroup-editor\",\n          this.props.className\n        )}\n        style={this.props.style}\n        ref={this._divElement}\n      >\n        {this.state.choices &&\n          this.state.enumIcons.length &&\n          this.state.choices.map((choice: EnumerationChoice, index: number) =>\n            this.getButton(choice, index)\n          )}\n      </div>\n    );\n  }\n}\n\n/** Enum Property Button Group Editor registered for the \"enum\" type name and the \"enum-buttongroup\" editor name.\n * It uses the [[EnumButtonGroupEditor]] React component.\n * @public\n */\nexport class EnumPropertyButtonGroupEditor extends PropertyEditorBase {\n  // istanbul ignore next\n  public get reactNode(): React.ReactNode {\n    return <EnumButtonGroupEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(\n  StandardTypeNames.Enum,\n  EnumPropertyButtonGroupEditor,\n  StandardEditorNames.EnumButtonGroup\n);\n"]}

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

@@ -1,141 +1,141 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-$desktop-tool-stripe-width: 2px;
-$desktop-tool-stripe-height: 22px;
-
-$icon-size: 16px;
-
-$components-enumbuttongroup-editor-item-width: 32px;
-$components-enumbuttongroup-editor-item-height: 32px;
-
-$components-enumbuttongroup-editor-item-border-width: 1px;
-$components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
-
-.components-enumbuttongroup-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  background: var(--iui-color-background);
-  width: fit-content;
-  border-color: var(--iui-color-border-foreground);
-  border-width: $components-enumbuttongroup-editor-item-border-width;
-  border-radius: var(--iui-border-radius-1);
-  border-style: solid;
-  overflow: hidden;
-  display: flex;
-  vertical-align: bottom;
-  box-sizing: border-box;
-
-  height: $components-enumbuttongroup-editor-item-height;
-
-  > * {
-    display: inline-block;
-    height: 100%;
-    width: $components-enumbuttongroup-editor-item-width;
-
-    &:not(:first-child) {
-      margin-left: $components-enumbuttongroup-editor-space-between-toolbar-items;
-
-      &:before {
-        content: "";
-        background-color: var(--iui-color-border-foreground);
-        display: block;
-        position: absolute;
-        pointer-events: none;
-        width: $components-enumbuttongroup-editor-space-between-toolbar-items;
-        height: 100%;
-        left: -$components-enumbuttongroup-editor-space-between-toolbar-items;
-        top: 0;
-      }
-    }
-  }
-}
-
-.components-enumbuttongroup-button {
-  border-width: 0;
-  background-color: var(--iui-color-background);
-  background-origin: border-box;
-  border-color: var(--iui-color-border);
-  border-style: solid;
-  cursor: pointer;
-  transition-property: background-color, color;
-  transition-duration: 500ms;
-  transition-timing-function: ease;
-  position: relative;
-  height: $components-enumbuttongroup-editor-item-height;
-  width: $components-enumbuttongroup-editor-item-width;
-
-  > i {
-    font-size: $icon-size;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    margin: 0;
-    color: var(--iui-color-icon);
-    transition: all 500ms ease;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &:hover {
-    > i {
-      color: var(--iui-color-text-accent-hover);
-      transition-duration: 150ms;
-    }
-  }
-
-  &.nz-is-active {
-    background: var(--iui-color-background);
-
-    &:not(.nz-is-disabled) {
-      transition-duration: 0s;
-
-      > i {
-        color: var(--iui-color-icon-accent);
-        transition-duration: 150ms;
-        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-      }
-
-      &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        background: var(--iui-color-border-accent);
-        left: 3px;
-        top: (
-            $components-enumbuttongroup-editor-item-height -
-              $desktop-tool-stripe-height
-          ) * 0.5;
-        border-radius: 2px;
-        width: $desktop-tool-stripe-width;
-        height: $desktop-tool-stripe-height;
-      }
-    }
-  }
-
-  &.nz-is-disabled {
-    pointer-events: none;
-    background-color: var(--iui-color-background-disabled);
-    border-color: var(--iui-color-border-disabled);
-    cursor: not-allowed;
-
-    > i {
-      color: var(--iui-color-icon-disabled);
-    }
-
-    &:hover {
-      cursor: auto;
-    }
-
-    &:active {
-      pointer-events: none;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 22px;
+
+$icon-size: 16px;
+
+$components-enumbuttongroup-editor-item-width: 32px;
+$components-enumbuttongroup-editor-item-height: 32px;
+
+$components-enumbuttongroup-editor-item-border-width: 1px;
+$components-enumbuttongroup-editor-space-between-toolbar-items: 1px;
+
+.components-enumbuttongroup-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  background: var(--iui-color-background);
+  width: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  border-width: $components-enumbuttongroup-editor-item-border-width;
+  border-radius: var(--iui-border-radius-1);
+  border-style: solid;
+  overflow: hidden;
+  display: flex;
+  vertical-align: bottom;
+  box-sizing: border-box;
+
+  height: $components-enumbuttongroup-editor-item-height;
+
+  > * {
+    display: inline-block;
+    height: 100%;
+    width: $components-enumbuttongroup-editor-item-width;
+
+    &:not(:first-child) {
+      margin-left: $components-enumbuttongroup-editor-space-between-toolbar-items;
+
+      &:before {
+        content: "";
+        background-color: var(--iui-color-border-foreground);
+        display: block;
+        position: absolute;
+        pointer-events: none;
+        width: $components-enumbuttongroup-editor-space-between-toolbar-items;
+        height: 100%;
+        left: -$components-enumbuttongroup-editor-space-between-toolbar-items;
+        top: 0;
+      }
+    }
+  }
+}
+
+.components-enumbuttongroup-button {
+  border-width: 0;
+  background-color: var(--iui-color-background);
+  background-origin: border-box;
+  border-color: var(--iui-color-border);
+  border-style: solid;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+  position: relative;
+  height: $components-enumbuttongroup-editor-item-height;
+  width: $components-enumbuttongroup-editor-item-width;
+
+  > i {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    margin: 0;
+    color: var(--iui-color-icon);
+    transition: all 500ms ease;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:hover {
+    > i {
+      color: var(--iui-color-text-accent-hover);
+      transition-duration: 150ms;
+    }
+  }
+
+  &.nz-is-active {
+    background: var(--iui-color-background);
+
+    &:not(.nz-is-disabled) {
+      transition-duration: 0s;
+
+      > i {
+        color: var(--iui-color-icon-accent);
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        background: var(--iui-color-border-accent);
+        left: 3px;
+        top: (
+            $components-enumbuttongroup-editor-item-height -
+              $desktop-tool-stripe-height
+          ) * 0.5;
+        border-radius: 2px;
+        width: $desktop-tool-stripe-width;
+        height: $desktop-tool-stripe-height;
+      }
+    }
+  }
+
+  &.nz-is-disabled {
+    pointer-events: none;
+    background-color: var(--iui-color-background-disabled);
+    border-color: var(--iui-color-border-disabled);
+    cursor: not-allowed;
+
+    > i {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+}

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

@@ -15,8 +15,8 @@ interface EnumEditorState {
     parentDiv: HTMLDivElement | null;
 }
 /** EnumEditor React component that is a property editor with select input
-  * @public
-  */
+ * @public
+ */
 export declare class EnumEditor extends React.PureComponent<PropertyEditorProps, EnumEditorState> implements TypeEditor {
     private _isMounted;
     private _ariaLabel;
@@ -38,9 +38,9 @@ export declare class EnumEditor extends React.PureComponent<PropertyEditorProps,
     render(): JSX.Element;
 }
 /** Enum Property Button Group Editor registered for the "enum" type name.
-  * It uses the [[EnumEditor]] React component.
-  * @public
-  */
+ * It uses the [[EnumEditor]] React component.
+ * @public
+ */
 export declare class EnumPropertyEditor extends PropertyEditorBase {
     get containerHandlesEnter(): boolean;
     get containerStopsKeydownPropagation(): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAyB,MAAM,yBAAyB,CAAC;AAGpF,gBAAgB;AAChB,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAClC;AAED;;IAEI;AACJ,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,eAAe,CAAE,YAAW,UAAU;IAC7G,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAyC;IAC3D,OAAO,CAAC,WAAW,CAAqC;IAExD,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAKvD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAiBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAGD,IAAW,QAAQ,IAAI,OAAO,CAM7B;IAED,OAAO,CAAC,kBAAkB,CAwBxB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAwC/B,gBAAgB;IACA,MAAM;CA0BvB;AAED;;;IAGI;AACJ,qBAAa,kBAAmB,SAAQ,kBAAkB;IAExD,IAAoB,qBAAqB,IAAI,OAAO,CAEnD;IACD,IAAoB,gCAAgC,IAAI,OAAO,CAE9D;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
+{"version":3,"file":"EnumEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAGjC,gBAAgB;AAChB,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,qBAAa,UACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,eAAe,CAChE,YAAW,UAAU;IAErB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAyC;IAC3D,OAAO,CAAC,WAAW,CAAqC;IAExD,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAKvD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAiBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAGD,IAAW,QAAQ,IAAI,OAAO,CAM7B;IAED,OAAO,CAAC,kBAAkB,CA4BxB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAgD/B,gBAAgB;IACA,MAAM;CAkCvB;AAED;;;GAGG;AACH,qBAAa,kBAAmB,SAAQ,kBAAkB;IAExD,IAAoB,qBAAqB,IAAI,OAAO,CAEnD;IACD,IAAoB,gCAAgC,IAAI,OAAO,CAE9D;IAED,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -10,11 +10,11 @@ import classnames from "classnames";
 import * as React from "react";
 import { PropertyValueFormat, StandardTypeNames } from "@itwin/appui-abstract";
 import { Select } from "@itwin/itwinui-react";
-import { PropertyEditorBase, PropertyEditorManager } from "./PropertyEditorManager";
+import { PropertyEditorBase, PropertyEditorManager, } from "./PropertyEditorManager";
 import { UiComponents } from "../UiComponents";
 /** EnumEditor React component that is a property editor with select input
-  * @public
-  */
+ * @public
+ */
 export class EnumEditor extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -45,7 +45,10 @@ export class EnumEditor extends React.PureComponent {
                         const propertyValue = await this.getPropertyValue();
                         // istanbul ignore else
                         if (propertyValue) {
-                            this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });
+                            this.props.onCommit({
+                                propertyRecord: this.props.propertyRecord,
+                                newValue: propertyValue,
+                            });
                         }
                     }
                 });
@@ -80,7 +83,7 @@ export class EnumEditor extends React.PureComponent {
     /** @internal */
     componentDidMount() {
         this._isMounted = true;
-        this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        void this.setStateFromProps();
     }
     /** @internal */
     componentWillUnmount() {
@@ -89,7 +92,7 @@ export class EnumEditor extends React.PureComponent {
     /** @internal */
     componentDidUpdate(prevProps) {
         if (this.props.propertyRecord !== prevProps.propertyRecord) {
-            this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises
+            void this.setStateFromProps();
         }
     }
     async setStateFromProps() {
@@ -97,7 +100,8 @@ export class EnumEditor extends React.PureComponent {
         let initialValue = "";
         let valueIsNumber = false;
         // istanbul ignore else
-        if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
+        if (propertyRecord &&
+            propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {
             const primitiveValue = propertyRecord.value.value;
             if (typeof primitiveValue === "string") {
                 initialValue = primitiveValue;
@@ -126,12 +130,19 @@ export class EnumEditor extends React.PureComponent {
         }
         // istanbul ignore else
         if (this._isMounted)
-            this.setState({ selectValue: initialValue, valueIsNumber, options, parentDiv: this._divElement.current });
+            this.setState({
+                selectValue: initialValue,
+                valueIsNumber,
+                options,
+                parentDiv: this._divElement.current,
+            });
     }
     /** @internal */
     render() {
         const className = classnames("components-cell-editor", "components-enum-editor", this.props.className);
-        const selectValue = this.state.selectValue !== undefined ? this.state.selectValue.toString() : /* istanbul ignore next */ undefined;
+        const selectValue = this.state.selectValue !== undefined
+            ? this.state.selectValue.toString()
+            : /* istanbul ignore next */ undefined;
         // set min-width to show about 4 characters + down arrow
         const minWidthStyle = {
             minWidth: `6em`,
@@ -143,9 +154,9 @@ export class EnumEditor extends React.PureComponent {
     }
 }
 /** Enum Property Button Group Editor registered for the "enum" type name.
-  * It uses the [[EnumEditor]] React component.
-  * @public
-  */
+ * It uses the [[EnumEditor]] React component.
+ * @public
+ */
 export class EnumPropertyEditor extends PropertyEditorBase {
     // istanbul ignore next
     get containerHandlesEnter() {

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

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumEditor.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C;;IAEI;AACJ,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAAmD;IAAzF;;QACU,eAAU,GAAG,KAAK,CAAC;QACnB,eAAU,GAAG,YAAY,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACnD,gBAAW,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAExD,gBAAgB;QACS,UAAK,GAA8B;YAC1D,WAAW,EAAE,EAAE;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,IAAI;SAChB,CAAC;QAgCM,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,WAA4B,CAAC;gBAEjC,qBAAqB;gBACrB,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa;oBAC1B,WAAW,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;oBAErC,WAAW,GAAG,QAAQ,CAAC;gBAEzB,IAAI,CAAC,QAAQ,CAAC;oBACZ,WAAW;iBACZ,EAAE,KAAK,IAAI,EAAE;oBACZ,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;wBACpD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBACpD,uBAAuB;wBACvB,IAAI,aAAa,EAAE;4BACjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;yBAC7F;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;IAuFJ,CAAC;IA7IQ,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,mBAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW;gBAC7B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,uBAAuB;IACvB,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IAClC,CAAC;IAED,uBAAuB;IACvB,IAAW,QAAQ;QACjB,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,uBAAuB;QACvB,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;YAC1B,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5E,OAAO,aAAa,CAAC;IACvB,CAAC;IA4BD,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,8DAA8D;IAC1F,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,8DAA8D;SACzF;IACH,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,YAAY,GAAoB,EAAE,CAAC;QACvC,IAAI,aAAa,GAAY,KAAK,CAAC;QAEnC,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAAE;YACxF,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YAClD,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;gBACtC,YAAY,GAAG,cAAc,CAAC;gBAC9B,aAAa,GAAG,KAAK,CAAC;aACvB;iBAAM;gBACL,YAAY,GAAG,cAAwB,CAAC;gBACxC,aAAa,GAAG,IAAI,CAAC;aACtB;SACF;QAED,IAAI,OAAwC,CAAC;QAE7C,IAAI,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClD,uBAAuB;YACvB,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,YAAY,OAAO,EAAE;gBAC3D,OAAO,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aACtD;iBAAM;gBACL,OAAO,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aAChD;SACF;QAED,MAAM,OAAO,GAA2B,EAAE,CAAC;QAC3C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,OAAO,CAAC,CAAC,MAAyB,EAAE,EAAE;gBAC5C,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YACxE,CAAC,CAAC,CAAC;SACJ;QAED,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU;YACjB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9G,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,wBAAwB,EAAE,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvG,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,SAAS,CAAC;QAEpI,wDAAwD;QACxD,MAAM,aAAa,GAAwB;YACzC,QAAQ,EAAE,KAAK;SAChB,CAAC;QAEF,oGAAoG;QACpG,6BAA6B;QAC7B,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,WAAW;YACxB,oBAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,EAC1D,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,iBACrB,0BAA0B,EACtC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,gBACjB,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAC,OAAO,GAAG,CACb,CACP,CAAC;IACJ,CAAC;CACF;AAED;;;IAGI;AACJ,MAAM,OAAO,kBAAmB,SAAQ,kBAAkB;IACxD,uBAAuB;IACvB,IAAoB,qBAAqB;QACvC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAoB,gCAAgC;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,oBAAC,UAAU,OAAG,CAAC;IACxB,CAAC;CACF;AAED,qBAAqB,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC","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 \"./EnumEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport type { EnumerationChoice, PropertyValue} from \"@itwin/appui-abstract\";\r\nimport { PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport type { SelectOption } from \"@itwin/itwinui-react\";\r\nimport { Select } from \"@itwin/itwinui-react\";\r\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/** @internal */\r\ninterface EnumEditorState {\r\n  selectValue: string | number;\r\n  valueIsNumber: boolean;\r\n  options: SelectOption<string>[];\r\n  parentDiv: HTMLDivElement | null;\r\n}\r\n\r\n/** EnumEditor React component that is a property editor with select input\r\n  * @public\r\n  */\r\nexport class EnumEditor extends React.PureComponent<PropertyEditorProps, EnumEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _ariaLabel = UiComponents.translate(\"editor.enum\");\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: [],\r\n    parentDiv: null,\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 = (newValue: string) => {\r\n    // istanbul ignore else\r\n    if (this._isMounted) {\r\n      let selectValue: string | number;\r\n\r\n      // istanbul ignore if\r\n      if (this.state.valueIsNumber)\r\n        selectValue = parseInt(newValue, 10);\r\n      else\r\n        selectValue = newValue;\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\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    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    const options: SelectOption<string>[] = [];\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\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ selectValue: initialValue, valueIsNumber, options, parentDiv: this._divElement.current });\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 !== undefined ? this.state.selectValue.toString() : /* istanbul ignore next */ undefined;\r\n\r\n    // set min-width to show about 4 characters + down arrow\r\n    const minWidthStyle: React.CSSProperties = {\r\n      minWidth: `6em`,\r\n    };\r\n\r\n    // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK\r\n    // onBlur={this.props.onBlur}\r\n    return (\r\n      <div ref={this._divElement}>\r\n        <Select\r\n          className={className}\r\n          style={this.props.style ? this.props.style : minWidthStyle}\r\n          value={selectValue}\r\n          onChange={this._updateSelectValue}\r\n          data-testid=\"components-select-editor\"\r\n          options={this.state.options}\r\n          setFocus={this.props.setFocus}\r\n          aria-label={this._ariaLabel}\r\n          size=\"small\" />\r\n      </div>\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  * @public\r\n  */\r\nexport class EnumPropertyEditor extends PropertyEditorBase {\r\n  // istanbul ignore next\r\n  public override get containerHandlesEnter(): boolean {\r\n    return false;\r\n  }\r\n  public override get containerStopsKeydownPropagation(): boolean {\r\n    return false;\r\n  }\r\n\r\n  public get reactNode(): React.ReactNode {\r\n    return <EnumEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Enum, EnumPropertyEditor);\r\n"]}
+{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EACL,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU/C;;GAEG;AACH,MAAM,OAAO,UACX,SAAQ,KAAK,CAAC,aAAmD;IADnE;;QAIU,eAAU,GAAG,KAAK,CAAC;QACnB,eAAU,GAAG,YAAY,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACnD,gBAAW,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAExD,gBAAgB;QACS,UAAK,GAA8B;YAC1D,WAAW,EAAE,EAAE;YACf,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,IAAI;SAChB,CAAC;QAgCM,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,WAA4B,CAAC;gBAEjC,qBAAqB;gBACrB,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa;oBAAE,WAAW,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;oBAC9D,WAAW,GAAG,QAAQ,CAAC;gBAE5B,IAAI,CAAC,QAAQ,CACX;oBACE,WAAW;iBACZ,EACD,KAAK,IAAI,EAAE;oBACT,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;wBACpD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBACpD,uBAAuB;wBACvB,IAAI,aAAa,EAAE;4BACjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;gCAClB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;gCACzC,QAAQ,EAAE,aAAa;6BACxB,CAAC,CAAC;yBACJ;qBACF;gBACH,CAAC,CACF,CAAC;aACH;QACH,CAAC,CAAC;IAuGJ,CAAC;IAjKQ,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,mBAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW;gBAC7B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,uBAAuB;IACvB,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IAClC,CAAC;IAED,uBAAuB;IACvB,IAAW,QAAQ;QACjB,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,uBAAuB;QACvB,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;YAC1B,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5E,OAAO,aAAa,CAAC;IACvB,CAAC;IAgCD,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC/B;IACH,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,YAAY,GAAoB,EAAE,CAAC;QACvC,IAAI,aAAa,GAAY,KAAK,CAAC;QAEnC,uBAAuB;QACvB,IACE,cAAc;YACd,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAClE;YACA,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YAClD,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;gBACtC,YAAY,GAAG,cAAc,CAAC;gBAC9B,aAAa,GAAG,KAAK,CAAC;aACvB;iBAAM;gBACL,YAAY,GAAG,cAAwB,CAAC;gBACxC,aAAa,GAAG,IAAI,CAAC;aACtB;SACF;QAED,IAAI,OAAwC,CAAC;QAE7C,IAAI,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClD,uBAAuB;YACvB,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,YAAY,OAAO,EAAE;gBAC3D,OAAO,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aACtD;iBAAM;gBACL,OAAO,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aAChD;SACF;QAED,MAAM,OAAO,GAA2B,EAAE,CAAC;QAC3C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,OAAO,CAAC,CAAC,MAAyB,EAAE,EAAE;gBAC5C,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YACxE,CAAC,CAAC,CAAC;SACJ;QAED,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU;YACjB,IAAI,CAAC,QAAQ,CAAC;gBACZ,WAAW,EAAE,YAAY;gBACzB,aAAa;gBACb,OAAO;gBACP,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO;aACpC,CAAC,CAAC;IACP,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,wBAAwB,EACxB,wBAAwB,EACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS;YAClC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;YACnC,CAAC,CAAC,0BAA0B,CAAC,SAAS,CAAC;QAE3C,wDAAwD;QACxD,MAAM,aAAa,GAAwB;YACzC,QAAQ,EAAE,KAAK;SAChB,CAAC;QAEF,oGAAoG;QACpG,6BAA6B;QAC7B,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,WAAW;YACxB,oBAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,EAC1D,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,iBACrB,0BAA0B,EACtC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,gBACjB,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;IACJ,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAO,kBAAmB,SAAQ,kBAAkB;IACxD,uBAAuB;IACvB,IAAoB,qBAAqB;QACvC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAoB,gCAAgC;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAW,SAAS;QAClB,OAAO,oBAAC,UAAU,OAAG,CAAC;IACxB,CAAC;CACF;AAED,qBAAqB,CAAC,cAAc,CAClC,iBAAiB,CAAC,IAAI,EACtB,kBAAkB,CACnB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./EnumEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { EnumerationChoice, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport {\n  PropertyEditorBase,\n  PropertyEditorManager,\n} from \"./PropertyEditorManager\";\nimport { UiComponents } from \"../UiComponents\";\n\n/** @internal */\ninterface EnumEditorState {\n  selectValue: string | number;\n  valueIsNumber: boolean;\n  options: SelectOption<string>[];\n  parentDiv: HTMLDivElement | null;\n}\n\n/** EnumEditor React component that is a property editor with select input\n * @public\n */\nexport class EnumEditor\n  extends React.PureComponent<PropertyEditorProps, EnumEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _ariaLabel = UiComponents.translate(\"editor.enum\");\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<EnumEditorState> = {\n    selectValue: \"\",\n    valueIsNumber: false,\n    options: [],\n    parentDiv: null,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.selectValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  // istanbul ignore next\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  // istanbul ignore next\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    // istanbul ignore else\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private _updateSelectValue = (newValue: string) => {\n    // istanbul ignore else\n    if (this._isMounted) {\n      let selectValue: string | number;\n\n      // istanbul ignore if\n      if (this.state.valueIsNumber) selectValue = parseInt(newValue, 10);\n      else selectValue = newValue;\n\n      this.setState(\n        {\n          selectValue,\n        },\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 (propertyValue) {\n              this.props.onCommit({\n                propertyRecord: this.props.propertyRecord,\n                newValue: propertyValue,\n              });\n            }\n          }\n        }\n      );\n    }\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    void 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      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n    let initialValue: string | number = \"\";\n    let valueIsNumber: boolean = false;\n\n    // istanbul ignore else\n    if (\n      propertyRecord &&\n      propertyRecord.value.valueFormat === PropertyValueFormat.Primitive\n    ) {\n      const primitiveValue = propertyRecord.value.value;\n      if (typeof primitiveValue === \"string\") {\n        initialValue = primitiveValue;\n        valueIsNumber = false;\n      } else {\n        initialValue = primitiveValue as number;\n        valueIsNumber = true;\n      }\n    }\n\n    let choices: EnumerationChoice[] | undefined;\n\n    if (propertyRecord && propertyRecord.property.enum) {\n      // istanbul ignore else\n      if (propertyRecord.property.enum.choices instanceof Promise) {\n        choices = await propertyRecord.property.enum.choices;\n      } else {\n        choices = propertyRecord.property.enum.choices;\n      }\n    }\n\n    const options: SelectOption<string>[] = [];\n    if (choices) {\n      choices.forEach((choice: EnumerationChoice) => {\n        options.push({ value: choice.value.toString(), label: choice.label });\n      });\n    }\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState({\n        selectValue: initialValue,\n        valueIsNumber,\n        options,\n        parentDiv: this._divElement.current,\n      });\n  }\n\n  /** @internal */\n  public override render() {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-enum-editor\",\n      this.props.className\n    );\n    const selectValue =\n      this.state.selectValue !== undefined\n        ? this.state.selectValue.toString()\n        : /* istanbul ignore next */ undefined;\n\n    // set min-width to show about 4 characters + down arrow\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `6em`,\n    };\n\n    // The iTwinUI-react Select onBlur still does not work properly, so it cannot be used yet. NEEDSWORK\n    // onBlur={this.props.onBlur}\n    return (\n      <div ref={this._divElement}>\n        <Select\n          className={className}\n          style={this.props.style ? this.props.style : minWidthStyle}\n          value={selectValue}\n          onChange={this._updateSelectValue}\n          data-testid=\"components-select-editor\"\n          options={this.state.options}\n          setFocus={this.props.setFocus}\n          aria-label={this._ariaLabel}\n          size=\"small\"\n        />\n      </div>\n    );\n  }\n}\n\n/** Enum Property Button Group Editor registered for the \"enum\" type name.\n * It uses the [[EnumEditor]] React component.\n * @public\n */\nexport class EnumPropertyEditor extends PropertyEditorBase {\n  // istanbul ignore next\n  public override get containerHandlesEnter(): boolean {\n    return false;\n  }\n  public override get containerStopsKeydownPropagation(): boolean {\n    return false;\n  }\n\n  public get reactNode(): React.ReactNode {\n    return <EnumEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(\n  StandardTypeNames.Enum,\n  EnumPropertyEditor\n);\n"]}