@itwin/components-react 3.0.0-dev.83 → 3.0.0-dev.87

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":["/*---------------------------------------------------------------------------------------------\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 {\n  ButtonGroupEditorParams, EnumerationChoice, IconDefinition, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord,\n  PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { Icon } from \"@itwin/core-react\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\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 extends React.Component<PropertyEditorProps, EnumButtonGroupEditorState> implements TypeEditor {\n  private _btnRefs = new Map<string | number, HTMLButtonElement>();\n  private _divElement = React.createRef<HTMLDivElement>();\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    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const { propertyRecord } = this.props;\n\n    // istanbul ignore else\n    if (propertyRecord && propertyRecord.property.enum && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\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: \"icon icon-placeholder\" });\n\n      // istanbul ignore else\n      if (propertyRecord.property.editor && propertyRecord.property.editor.params) {\n        // istanbul ignore else\n        if (propertyRecord.property.editor && propertyRecord.property.editor.params) {\n          const bgParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ButtonGroupData) as ButtonGroupEditorParams;\n          // istanbul ignore else\n          if (bgParams) {\n            bgParams.buttons.forEach((iconDef: IconDefinition, index: number) => {\n              // istanbul ignore else\n              if (index < numChoices) {\n                enumIcons[index] = iconDef;\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        selectValue,\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  private getButton(choice: EnumerationChoice, index: number) {\n    const choiceValue = this.state.choices ? this.state.choices[index].value : /* 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) => this._btnRefs.set(choiceValue, ref)}\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 className={classnames(\"components-enumbuttongroup-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        {this.state.choices && this.state.enumIcons.length && this.state.choices.map((choice: EnumerationChoice, index: number) => this.getButton(choice, index))}\n      </div>);\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 {  // istanbul ignore next\n  public get reactNode(): React.ReactNode {\n    return <EnumButtonGroupEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Enum, EnumPropertyButtonGroupEditor, StandardEditorNames.EnumButtonGroup);\n"]}
+{"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 {\r\n  ButtonGroupEditorParams, EnumerationChoice, IconDefinition, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord,\r\n  PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { Icon } from \"@itwin/core-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\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\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: \"icon icon-placeholder\" });\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) => 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"]}

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

@@ -1,183 +1,183 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-$desktop-tool-stripe-width: 2px;
-$desktop-tool-stripe-height: 22px;
-
-$icon-size: 16px;
-$icon-color: $buic-icon-color;
-$hovered-icon-color: $buic-foreground-primary-tone;
-$pressed-icon-color: $buic-icon-color-reverse;
-$active-icon-color: $buic-foreground-primary;
-$disabled-icon-color: $buic-icon-color-disabled;
-$icon-shadow-color: $buic-icon-color-reverse;
-$icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
-$no-shadow: drop-shadow(0 0 0 transparent);
-
-$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: $iui-font-family;
-  font-size: $iui-font-size;
-  background: $buic-background-control;
-  width: fit-content;
-
-  $divider-color: $buic-background-toolbutton-stroke;
-  $border-color: $buic-background-toolbutton-stroke;
-  $border-radius: 3px;
-
-  border-color: $border-color;
-  border-width: $components-enumbuttongroup-editor-item-border-width;
-  border-radius: $border-radius;
-  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: $divider-color;
-        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: $buic-background-control;
-  background-origin: border-box;
-  border-color: $buic-background-control-stroke;
-  border-style: solid;
-  cursor: pointer;
-  transition-property: background-color, color;
-  transition-duration: 500ms;
-  transition-timing-function: ease;
-  position: relative;
-  background: $buic-background-control
-    /* linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2) */
-  ;
-  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: $icon-color;
-    filter: $icon-shadow;
-    transition: all 500ms ease;
-
-    svg {
-      filter: $icon-shadow;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &:hover {
-    >i {
-      color: $hovered-icon-color;
-      transition-duration: 150ms;
-    }
-  }
-
-  &:active {
-    >i {
-      color: $pressed-icon-color;
-      filter: $no-shadow;
-
-      svg {
-        filter: $no-shadow;
-      }
-    }
-  }
-
-  &:active:not(.nz-is-disabled) {
-    background: $buic-foreground-primary-tone;
-    color: $buic-foreground-body-reverse;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-  }
-
-  &.nz-is-active {
-    background: $buic-background-control;
-
-    &:not(:active):not(.nz-is-disabled) {
-      transition-duration: 0s;
-
-      >i {
-        color: $buic-foreground-primary;
-        filter: $no-shadow;
-        transition-duration: 150ms;
-        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
-
-        svg {
-          filter: $no-shadow;
-        }
-      }
-
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        background: $buic-foreground-primary;
-        left: 3px;
-        top: ($components-enumbuttongroup-editor-item-height - $desktop-tool-stripe-height) * .5;
-        border-radius: 2px;
-        width: $desktop-tool-stripe-width;
-        height: $desktop-tool-stripe-height;
-      }
-    }
-  }
-
-  &.nz-is-disabled {
-    pointer-events: none;
-
-    >i {
-      color: $disabled-icon-color;
-    }
-
-    &: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.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 22px;
+
+$icon-size: 16px;
+$icon-color: $buic-icon-color;
+$hovered-icon-color: $buic-foreground-primary-tone;
+$pressed-icon-color: $buic-icon-color-reverse;
+$active-icon-color: $buic-foreground-primary;
+$disabled-icon-color: $buic-icon-color-disabled;
+$icon-shadow-color: $buic-icon-color-reverse;
+$icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$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: $iui-font-family;
+  font-size: $iui-font-size;
+  background: $buic-background-control;
+  width: fit-content;
+
+  $divider-color: $buic-background-toolbutton-stroke;
+  $border-color: $buic-background-toolbutton-stroke;
+  $border-radius: 3px;
+
+  border-color: $border-color;
+  border-width: $components-enumbuttongroup-editor-item-border-width;
+  border-radius: $border-radius;
+  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: $divider-color;
+        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: $buic-background-control;
+  background-origin: border-box;
+  border-color: $buic-background-control-stroke;
+  border-style: solid;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+  position: relative;
+  background: $buic-background-control
+    /* linear-gradient(to bottom, $buic-button-gradient1, $buic-button-gradient2) */
+  ;
+  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: $icon-color;
+    filter: $icon-shadow;
+    transition: all 500ms ease;
+
+    svg {
+      filter: $icon-shadow;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:hover {
+    >i {
+      color: $hovered-icon-color;
+      transition-duration: 150ms;
+    }
+  }
+
+  &:active {
+    >i {
+      color: $pressed-icon-color;
+      filter: $no-shadow;
+
+      svg {
+        filter: $no-shadow;
+      }
+    }
+  }
+
+  &:active:not(.nz-is-disabled) {
+    background: $buic-foreground-primary-tone;
+    color: $buic-foreground-body-reverse;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+  }
+
+  &.nz-is-active {
+    background: $buic-background-control;
+
+    &:not(:active):not(.nz-is-disabled) {
+      transition-duration: 0s;
+
+      >i {
+        color: $buic-foreground-primary;
+        filter: $no-shadow;
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+
+        svg {
+          filter: $no-shadow;
+        }
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        background: $buic-foreground-primary;
+        left: 3px;
+        top: ($components-enumbuttongroup-editor-item-height - $desktop-tool-stripe-height) * .5;
+        border-radius: 2px;
+        width: $desktop-tool-stripe-width;
+        height: $desktop-tool-stripe-height;
+      }
+    }
+  }
+
+  &.nz-is-disabled {
+    pointer-events: none;
+
+    >i {
+      color: $disabled-icon-color;
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+
 }

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":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./EnumEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { EnumerationChoice, PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } 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 extends React.PureComponent<PropertyEditorProps, EnumEditorState> implements TypeEditor {\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)\n        selectValue = parseInt(newValue, 10);\n      else\n        selectValue = newValue;\n\n      this.setState({\n        selectValue,\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({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\n          }\n        }\n      });\n    }\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\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 (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\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({ selectValue: initialValue, valueIsNumber, options, parentDiv: this._divElement.current });\n  }\n\n  /** @internal */\n  public override render() {\n    const className = classnames(\"components-cell-editor\", \"components-enum-editor\", this.props.className);\n    const selectValue = this.state.selectValue !== undefined ? this.state.selectValue.toString() : /* 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\n    /* The following popoverProps are required for the popup to properly show in floating widgets because this makes it work similar to a portal */\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          popoverProps={{ appendTo: () => this.state.parentDiv ? this.state.parentDiv.ownerDocument.body : /* istanbul ignore next */ document.body }}\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      </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(StandardTypeNames.Enum, EnumPropertyEditor);\n"]}
+{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/EnumEditor.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 \"./EnumEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { EnumerationChoice, PropertyValue, PropertyValueFormat, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { 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\r\n    /* The following popoverProps are required for the popup to properly show in floating widgets because this makes it work similar to a portal */\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          popoverProps={{ appendTo: () => this.state.parentDiv ? this.state.parentDiv.ownerDocument.body : /* istanbul ignore next */ document.body }}\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      </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"]}

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

@@ -1,23 +1,23 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/variables";
-
-.components-enum-editor {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-
-.components-smallEditor-host {
-  .components-enum-editor {
-    &.iui-select {
-      >.iui-select-button {
-        min-height: $uicore-component-height-small !important;
-        padding-top: 0px !important;
-        padding-bottom: 0px !important;
-      }
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* 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/style/variables";
+
+.components-enum-editor {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-enum-editor {
+    &.iui-select {
+      >.iui-select-button {
+        min-height: $uicore-component-height-small !important;
+        padding-top: 0px !important;
+        padding-bottom: 0px !important;
+      }
+    }
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./IconEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\n\n// cspell:ignore iconpicker\n\n/** @internal */\ninterface IconEditorState {\n  icon: string;\n  icons: string[];\n  numColumns: number;\n  readonly?: boolean;\n  isDisabled?: boolean;\n}\n\n/** IconEditor React component that is a property editor with button and popup\n * @alpha\n */\n// istanbul ignore next\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\n  private _control: any | null = null;\n  private _isMounted = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  constructor(props: PropertyEditorProps) {\n    super(props);\n\n    let icon = \"\";\n    let numColumns = 4;\n    const icons: string[] = [];\n    const readonly = false;\n\n    // TODO: add support for following if we need to specify set of weights to display\n    const record = props.propertyRecord;\n    if (record && record.property && record.property.editor && record.property.editor.params) {\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\n      // istanbul ignore else\n      if (iconParams) {\n        if (iconParams.iconValue)\n          icon = iconParams.iconValue;\n        if (iconParams.numColumns)\n          numColumns = iconParams.numColumns;\n        if (iconParams.iconValues)\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\n      }\n    }\n\n    this.state = { icon, icons, numColumns, readonly };\n  }\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.icon,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._control && !this.state.isDisabled) {\n      this._control.setFocus();\n    }\n  }\n\n  private _onIconChange = (icon: string) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      icon,\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) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as string;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState(\n        { icon: initialValue, readonly, isDisabled },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n  }\n\n  /** @internal */\n  public override render() {\n    const { icon, icons, numColumns } = this.state;\n    return (\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        <IconPickerButton ref={(control) => this._control = control}\n          icon={icon}\n          icons={icons}\n          numColumns={numColumns}\n          disabled={this.state.isDisabled}\n          readonly={this.state.readonly}\n          onIconChange={this._onIconChange}\n          data-testid=\"components-icon-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\n * It uses the [[IconEditor]] React component.\n * @alpha\n */\n// istanbul ignore next\nexport class IconPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <IconEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\n"]}
+{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.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 \"./IconEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\r\n  StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n// cspell:ignore iconpicker\r\n\r\n/** @internal */\r\ninterface IconEditorState {\r\n  icon: string;\r\n  icons: string[];\r\n  numColumns: number;\r\n  readonly?: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** IconEditor React component that is a property editor with button and popup\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\r\n  private _control: any | null = null;\r\n  private _isMounted = false;\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  constructor(props: PropertyEditorProps) {\r\n    super(props);\r\n\r\n    let icon = \"\";\r\n    let numColumns = 4;\r\n    const icons: string[] = [];\r\n    const readonly = false;\r\n\r\n    // TODO: add support for following if we need to specify set of weights to display\r\n    const record = props.propertyRecord;\r\n    if (record && record.property && record.property.editor && record.property.editor.params) {\r\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\r\n      // istanbul ignore else\r\n      if (iconParams) {\r\n        if (iconParams.iconValue)\r\n          icon = iconParams.iconValue;\r\n        if (iconParams.numColumns)\r\n          numColumns = iconParams.numColumns;\r\n        if (iconParams.iconValues)\r\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\r\n      }\r\n    }\r\n\r\n    this.state = { icon, icons, numColumns, readonly };\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.icon,\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    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._control && !this.state.isDisabled) {\r\n      this._control.setFocus();\r\n    }\r\n  }\r\n\r\n  private _onIconChange = (icon: string) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      icon,\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) {\r\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\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 record = this.props.propertyRecord;\r\n    let initialValue = \"\";\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as string;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState(\r\n        { icon: initialValue, readonly, isDisabled },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const { icon, icons, numColumns } = this.state;\r\n    return (\r\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        <IconPickerButton ref={(control) => this._control = control}\r\n          icon={icon}\r\n          icons={icons}\r\n          numColumns={numColumns}\r\n          disabled={this.state.isDisabled}\r\n          readonly={this.state.readonly}\r\n          onIconChange={this._onIconChange}\r\n          data-testid=\"components-icon-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\r\n * It uses the [[IconEditor]] React component.\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <IconEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\r\n"]}

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

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-$components-color-editor-item-height: 100%;
-
-.components-icon-editor {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
-  color: $buic-foreground-body;
-  border: none;
-  box-sizing: border-box;
-  height: $components-color-editor-item-height;
+/*---------------------------------------------------------------------------------------------
+* 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/style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$components-color-editor-item-height: 100%;
+
+.components-icon-editor {
+  font-family: $iui-font-family;
+  font-size: $iui-font-size;
+  color: $buic-foreground-body;
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
 }