@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.21

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

@@ -1,182 +1,141 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$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: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  background: $buic-background-control;
-  width: fit-content;
-
-  $divider-color: $buic-background-toolbutton-stroke;
-  $border-color: $buic-background-toolbutton-stroke;
-  $border-radius: var(--iui-border-radius-1);
-
-  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
-          ) * 0.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.
+*--------------------------------------------------------------------------------------------*/
+
+$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/cjs/components-react/editors/EnumEditor.js

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/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    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      </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    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"]}

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

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

@@ -9,7 +9,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/cjs/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/* eslint-disable deprecation/deprecation */\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/* eslint-disable deprecation/deprecation */\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/cjs/components-react/editors/IconEditor.scss

@@ -1,16 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$components-color-editor-item-height: 100%;
-
-.components-icon-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  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";
+
+$components-color-editor-item-height: 100%;
+
+.components-icon-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+}

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

@@ -8,7 +8,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

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