@itwin/components-react 5.18.0 → 5.20.0

package/lib/components-react/editors/PopupButton.js

@@ -18,42 +18,39 @@ import { useTranslation } from "../l10n/useTranslation.js";
  * @alpha
  */
 export class PopupButton extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._buttonRef = React.createRef();
-        this.state = {
-            showPopup: false,
-        };
-        this._togglePopup = (event) => {
-            if (this.props.readonly || this.props.disabled)
-                return;
-            this.setState((prevState) => ({ showPopup: !prevState.showPopup }), () => this.props.onClick && this.props.onClick(event));
-        };
-        this._closePopup = () => {
-            this.setState({ showPopup: false }, () => {
-                this.props.onClose && this.props.onClose();
-                if (this._buttonRef.current)
-                    this._buttonRef.current.focus();
-            });
-        };
-        this._handleKeyDown = (event) => {
-            if ((event.key === Key.ArrowDown.valueOf() ||
-                event.key === " " ||
-                event.key === Key.Enter.valueOf()) &&
-                !this.state.showPopup) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setState({ showPopup: true });
-            }
-        };
-    }
+    _buttonRef = React.createRef();
+    state = {
+        showPopup: false,
+    };
     componentDidMount() {
         if (this.props.setFocus && this._buttonRef.current)
             this._buttonRef.current.focus();
     }
+    _togglePopup = (event) => {
+        if (this.props.readonly || this.props.disabled)
+            return;
+        this.setState((prevState) => ({ showPopup: !prevState.showPopup }), () => this.props.onClick && this.props.onClick(event));
+    };
     closePopup() {
         this._closePopup();
     }
+    _closePopup = () => {
+        this.setState({ showPopup: false }, () => {
+            this.props.onClose && this.props.onClose();
+            if (this._buttonRef.current)
+                this._buttonRef.current.focus();
+        });
+    };
+    _handleKeyDown = (event) => {
+        if ((event.key === Key.ArrowDown.valueOf() ||
+            event.key === " " ||
+            event.key === Key.Enter.valueOf()) &&
+            !this.state.showPopup) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.setState({ showPopup: true });
+        }
+    };
     render() {
         const showArrow = this.props.showArrow ?? false;
         const showShadow = this.props.showShadow ?? false;

package/lib/components-react/editors/PopupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../src/components-react/editors/PopupButton.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 \"./PopupButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonDivProps, CommonProps } from \"@itwin/core-react\";\nimport { Div, Icon, Popup } from \"@itwin/core-react\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport {\n  SvgCheckmark,\n  SvgChevronDown,\n  SvgRemove,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\n/** Properties for [[PopupButton]] component\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface PopupButtonProps extends CommonProps {\n  /** Label to display in click area. */\n  label?: string | React.ReactNode;\n  /* Placeholder text used when there is no label yet */\n  placeholder?: string;\n  /** Contents of the popup */\n  children: React.ReactNode;\n  /** Title to display as tooltip. */\n  title?: string;\n\n  /** Set focus to popup - default is to set focus */\n  moveFocus?: boolean;\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\n  focusTarget?: React.RefObject<HTMLElement | null> | string;\n\n  /** Show or hide the box shadow (defaults to false) */\n  showShadow?: boolean;\n  /** Show or hide the arrow (defaults to false) */\n  showArrow?: boolean;\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\n  closeOnEnter?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n\n  /** Listens for click events on button area */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Listens for popup close events */\n  onClose?: () => void;\n  /** Listens for Enter key in popup */\n  onEnter?: () => void;\n}\n\n/** @internal */\ninterface PopupButtonState {\n  showPopup: boolean;\n}\n\n/** PopupButton React component that is a button and property editor popup host\n * @alpha\n */\nexport class PopupButton extends React.PureComponent<\n  PopupButtonProps,\n  PopupButtonState\n> {\n  private _buttonRef = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<PopupButtonState> = {\n    showPopup: false,\n  };\n\n  public override componentDidMount() {\n    if (this.props.setFocus && this._buttonRef.current)\n      this._buttonRef.current.focus();\n  }\n\n  private _togglePopup = (event: React.MouseEvent) => {\n    if (this.props.readonly || this.props.disabled) return;\n\n    this.setState(\n      (prevState) => ({ showPopup: !prevState.showPopup }),\n      () => this.props.onClick && this.props.onClick(event)\n    );\n  };\n\n  public closePopup() {\n    this._closePopup();\n  }\n\n  private _closePopup = () => {\n    this.setState({ showPopup: false }, () => {\n      this.props.onClose && this.props.onClose();\n\n      if (this._buttonRef.current) this._buttonRef.current.focus();\n    });\n  };\n\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\n    if (\n      (event.key === Key.ArrowDown.valueOf() ||\n        event.key === \" \" ||\n        event.key === Key.Enter.valueOf()) &&\n      !this.state.showPopup\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState({ showPopup: true });\n    }\n  };\n\n  public override render(): React.ReactNode {\n    const showArrow = this.props.showArrow ?? false;\n    const showShadow = this.props.showShadow ?? false;\n    const moveFocus = this.props.moveFocus ?? true;\n    const showPlaceholder =\n      this.props.label === undefined && this.props.placeholder !== undefined;\n\n    const classNames = classnames(\n      \"components-popup-button\",\n      this.state.showPopup && \"components-popup-expanded\",\n      this.props.readonly && \"components-readonly\",\n      this.props.disabled && \"components-disabled\"\n    );\n\n    const valueClassNames = classnames(\n      \"components-popup-button-value\",\n      showPlaceholder && \"components-popup-button-placeholder\"\n    );\n\n    return (\n      <div className={this.props.className}>\n        <div\n          className={classNames}\n          onClick={this._togglePopup}\n          onKeyDown={this._handleKeyDown}\n          data-testid=\"components-popup-button\"\n          tabIndex={0}\n          ref={this._buttonRef}\n          title={this.props.title}\n          aria-disabled={this.props.disabled}\n          role=\"button\"\n        >\n          <div className={valueClassNames}>\n            {this.props.label || this.props.placeholder}\n          </div>\n          <div className={\"components-popup-button-arrow\"}>\n            <div\n              className={classnames(\n                \"components-popup-button-arrow-icon\",\n                \"icon\"\n              )}\n            >\n              {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n              <Icon iconSpec={<SvgChevronDown />} />\n            </div>\n          </div>\n        </div>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Popup\n          className=\"components-popup-button-popup\"\n          isOpen={this.state.showPopup}\n          position={RelativePosition.Bottom}\n          onClose={this._closePopup}\n          onEnter={this.props.onEnter}\n          closeOnEnter={this.props.closeOnEnter}\n          target={this._buttonRef.current}\n          showArrow={showArrow}\n          showShadow={showShadow}\n          moveFocus={moveFocus}\n          focusTarget={this.props.focusTarget}\n          portalTarget={\n            this._buttonRef.current?.ownerDocument.querySelector(\n              \".uifw-configurableui-portalContainer\"\n            ) ?? undefined\n          }\n        >\n          {this.props.children}\n        </Popup>\n      </div>\n    );\n  }\n}\n\n/** Popup content with padding\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function PopupContent(props: CommonDivProps) {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\n}\n\n/** Properties for [[PopupOkCancelButtons]] component\n * @alpha\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof PopupOkCancelButtons>`\n */\nexport interface OkCancelProps {\n  onOk: (event: React.MouseEvent) => void;\n  onCancel: (event: React.MouseEvent) => void;\n}\n\n/** OK/Cancel Buttons\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function PopupOkCancelButtons(props: OkCancelProps) {\n  const { translate } = useTranslation();\n  return (\n    <div className=\"components-popup-bottom-buttons\">\n      <Button\n        className={classnames(\n          \"components-popup-large-button\",\n          \"components-popup-ok-button\"\n        )}\n        data-testid=\"components-popup-ok-button\"\n        styleType=\"cta\"\n        title={translate(\"dialog.ok\")}\n        onClick={props.onOk}\n      >\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Icon iconSpec={<SvgCheckmark />} />\n      </Button>\n      <Button\n        className={classnames(\n          \"components-popup-large-button\",\n          \"components-popup-cancel-button\"\n        )}\n        data-testid=\"components-popup-cancel-button\"\n        title={translate(\"dialog.cancel\")}\n        onClick={props.onCancel}\n      >\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Icon iconSpec={<SvgRemove />} />\n      </Button>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../src/components-react/editors/PopupButton.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 \"./PopupButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonDivProps, CommonProps } from \"@itwin/core-react\";\nimport { Div, Icon, Popup } from \"@itwin/core-react\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport {\n  SvgCheckmark,\n  SvgChevronDown,\n  SvgRemove,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\n/** Properties for [[PopupButton]] component\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface PopupButtonProps extends CommonProps {\n  /** Label to display in click area. */\n  label?: string | React.ReactNode;\n  /* Placeholder text used when there is no label yet */\n  placeholder?: string;\n  /** Contents of the popup */\n  children: React.ReactNode;\n  /** Title to display as tooltip. */\n  title?: string;\n\n  /** Set focus to popup - default is to set focus */\n  moveFocus?: boolean;\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\n  focusTarget?: React.RefObject<HTMLElement | null> | string;\n\n  /** Show or hide the box shadow (defaults to false) */\n  showShadow?: boolean;\n  /** Show or hide the arrow (defaults to false) */\n  showArrow?: boolean;\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\n  closeOnEnter?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n\n  /** Listens for click events on button area */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Listens for popup close events */\n  onClose?: () => void;\n  /** Listens for Enter key in popup */\n  onEnter?: () => void;\n}\n\n/** @internal */\ninterface PopupButtonState {\n  showPopup: boolean;\n}\n\n/** PopupButton React component that is a button and property editor popup host\n * @alpha\n */\nexport class PopupButton extends React.PureComponent<\n  PopupButtonProps,\n  PopupButtonState\n> {\n  private _buttonRef = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<PopupButtonState> = {\n    showPopup: false,\n  };\n\n  public override componentDidMount() {\n    if (this.props.setFocus && this._buttonRef.current)\n      this._buttonRef.current.focus();\n  }\n\n  private _togglePopup = (event: React.MouseEvent) => {\n    if (this.props.readonly || this.props.disabled) return;\n\n    this.setState(\n      (prevState) => ({ showPopup: !prevState.showPopup }),\n      () => this.props.onClick && this.props.onClick(event)\n    );\n  };\n\n  public closePopup() {\n    this._closePopup();\n  }\n\n  private _closePopup = () => {\n    this.setState({ showPopup: false }, () => {\n      this.props.onClose && this.props.onClose();\n\n      if (this._buttonRef.current) this._buttonRef.current.focus();\n    });\n  };\n\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\n    if (\n      (event.key === Key.ArrowDown.valueOf() ||\n        event.key === \" \" ||\n        event.key === Key.Enter.valueOf()) &&\n      !this.state.showPopup\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState({ showPopup: true });\n    }\n  };\n\n  public override render(): React.ReactNode {\n    const showArrow = this.props.showArrow ?? false;\n    const showShadow = this.props.showShadow ?? false;\n    const moveFocus = this.props.moveFocus ?? true;\n    const showPlaceholder =\n      this.props.label === undefined && this.props.placeholder !== undefined;\n\n    const classNames = classnames(\n      \"components-popup-button\",\n      this.state.showPopup && \"components-popup-expanded\",\n      this.props.readonly && \"components-readonly\",\n      this.props.disabled && \"components-disabled\"\n    );\n\n    const valueClassNames = classnames(\n      \"components-popup-button-value\",\n      showPlaceholder && \"components-popup-button-placeholder\"\n    );\n\n    return (\n      <div className={this.props.className}>\n        <div\n          className={classNames}\n          onClick={this._togglePopup}\n          onKeyDown={this._handleKeyDown}\n          data-testid=\"components-popup-button\"\n          tabIndex={0}\n          ref={this._buttonRef}\n          title={this.props.title}\n          aria-disabled={this.props.disabled}\n          role=\"button\"\n        >\n          <div className={valueClassNames}>\n            {this.props.label || this.props.placeholder}\n          </div>\n          <div className={\"components-popup-button-arrow\"}>\n            <div\n              className={classnames(\n                \"components-popup-button-arrow-icon\",\n                \"icon\"\n              )}\n            >\n              {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n              <Icon iconSpec={<SvgChevronDown />} />\n            </div>\n          </div>\n        </div>\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Popup\n          className=\"components-popup-button-popup\"\n          isOpen={this.state.showPopup}\n          position={RelativePosition.Bottom}\n          onClose={this._closePopup}\n          onEnter={this.props.onEnter}\n          closeOnEnter={this.props.closeOnEnter}\n          target={this._buttonRef.current}\n          showArrow={showArrow}\n          showShadow={showShadow}\n          moveFocus={moveFocus}\n          focusTarget={this.props.focusTarget}\n          portalTarget={\n            this._buttonRef.current?.ownerDocument.querySelector(\n              \".uifw-configurableui-portalContainer\"\n            ) ?? undefined\n          }\n        >\n          {this.props.children}\n        </Popup>\n      </div>\n    );\n  }\n}\n\n/** Popup content with padding\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function PopupContent(props: CommonDivProps) {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\n}\n\n/** Properties for [[PopupOkCancelButtons]] component\n * @alpha\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof PopupOkCancelButtons>`\n */\nexport interface OkCancelProps {\n  onOk: (event: React.MouseEvent) => void;\n  onCancel: (event: React.MouseEvent) => void;\n}\n\n/** OK/Cancel Buttons\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function PopupOkCancelButtons(props: OkCancelProps) {\n  const { translate } = useTranslation();\n  return (\n    <div className=\"components-popup-bottom-buttons\">\n      <Button\n        className={classnames(\n          \"components-popup-large-button\",\n          \"components-popup-ok-button\"\n        )}\n        data-testid=\"components-popup-ok-button\"\n        styleType=\"cta\"\n        title={translate(\"dialog.ok\")}\n        onClick={props.onOk}\n      >\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Icon iconSpec={<SvgCheckmark />} />\n      </Button>\n      <Button\n        className={classnames(\n          \"components-popup-large-button\",\n          \"components-popup-cancel-button\"\n        )}\n        data-testid=\"components-popup-cancel-button\"\n        title={translate(\"dialog.cancel\")}\n        onClick={props.onCancel}\n      >\n        {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n        <Icon iconSpec={<SvgRemove />} />\n      </Button>\n    </div>\n  );\n}\n"]}

package/lib/components-react/editors/PropertyEditorManager.js

@@ -11,9 +11,6 @@ import { TextEditor } from "./TextEditor.js";
  * @public
  */
 export class PropertyEditorBase {
-    constructor() {
-        this.customDataController = undefined;
-    }
     get containerHandlesBlur() {
         return true;
     }
@@ -29,6 +26,7 @@ export class PropertyEditorBase {
     get containerStopsKeydownPropagation() {
         return true;
     }
+    customDataController = undefined;
     applyEditorParams(_property, _record) { }
     async commitValue(newValue, record) {
         if (this.customDataController)
@@ -57,6 +55,7 @@ const editors = {};
  * @public
  */
 export class PropertyEditorManager {
+    static _dataControllers = {};
     static registerEditor(editType, editor, editorName) {
         const fullEditorName = getFullEditorName(editType, editorName);
         if (editors.hasOwnProperty(fullEditorName)) {
@@ -101,7 +100,6 @@ export class PropertyEditorManager {
         return editors.hasOwnProperty(fullEditorName);
     }
 }
-PropertyEditorManager._dataControllers = {};
 /** Basic Property Editor registered for the "text" and "string" type names.
  * It uses the [[TextEditor]] React component.
  * @public

package/lib/components-react/editors/PropertyEditorManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyEditorManager.js","sourceRoot":"","sources":["../../../src/components-react/editors/PropertyEditorManager.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 * as React from \"react\";\nimport { TextEditor } from \"./TextEditor.js\";\nimport type {\n  DisplayMessageType,\n  MessageSeverity,\n  PropertyDescription,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\n\n/** Asynchronous Error Message returned as part of [[AsyncValueProcessingResult]]\n * @public\n */\nexport interface AsyncErrorMessage {\n  severity: MessageSeverity;\n  briefMessage: string;\n  detailedMessage?: string;\n  messageType?: DisplayMessageType;\n}\n\n/** Asynchronous Value Process Result\n * @public\n */\nexport interface AsyncValueProcessingResult {\n  encounteredError: boolean;\n  returnValue?: PropertyValue;\n  errorMessage?: AsyncErrorMessage;\n}\n\n/** DataControllers can be implemented per typename to validate and commit values.\n * @public\n */\nexport interface DataController {\n  validateValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult>;\n  commitValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult>;\n}\n\n/** PropertyEditor is the base class for all property editors.\n * @public\n */\nexport abstract class PropertyEditorBase implements DataController {\n  public get containerHandlesBlur(): boolean {\n    return true;\n  }\n  public get containerHandlesEscape(): boolean {\n    return true;\n  }\n  public get containerHandlesEnter(): boolean {\n    return true;\n  }\n  public get containerHandlesTab(): boolean {\n    return true;\n  }\n  public get containerStopsKeydownPropagation(): boolean {\n    return true;\n  }\n\n  public customDataController: DataController | undefined = undefined;\n\n  public abstract get reactNode(): React.ReactNode;\n\n  public applyEditorParams(\n    _property: PropertyDescription,\n    _record: PropertyRecord\n  ): void {}\n\n  public async commitValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    if (this.customDataController)\n      return this.customDataController.commitValue(newValue, record);\n\n    return { encounteredError: false };\n  }\n\n  public async validateValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    if (this.customDataController)\n      return this.customDataController.validateValue(newValue, record);\n\n    return { encounteredError: false };\n  }\n}\n\n/** DataControllerBase is the base class for all Data Controllers.\n * @public\n */\nexport abstract class DataControllerBase implements DataController {\n  public async commitValue(\n    _newValue: PropertyValue,\n    _record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    return { encounteredError: false };\n  }\n\n  public async validateValue(\n    _newValue: PropertyValue,\n    _record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    return { encounteredError: false };\n  }\n}\n\nconst editors: { [index: string]: new () => PropertyEditorBase } = {};\n\n/** Manages Property Editors. Property Editors are registered with and created by the manager.\n * @public\n */\nexport class PropertyEditorManager {\n  private static _dataControllers: {\n    [index: string]: new () => DataControllerBase;\n  } = {};\n\n  public static registerEditor(\n    editType: string,\n    editor: new () => PropertyEditorBase,\n    editorName?: string\n  ): void {\n    const fullEditorName = getFullEditorName(editType, editorName);\n\n    if (editors.hasOwnProperty(fullEditorName)) {\n      const nameOfEditor = editors[fullEditorName].name;\n      throw Error(\n        `PropertyEditorManager.registerEditor error: type '${fullEditorName}' already registered to '${nameOfEditor}'`\n      );\n    }\n    editors[fullEditorName] = editor;\n  }\n\n  public static registerDataController(\n    controllerName: string,\n    controller: new () => DataControllerBase\n  ): void {\n    if (PropertyEditorManager._dataControllers.hasOwnProperty(controllerName)) {\n      throw Error(\n        `PropertyEditorManager.registerDataController error: type '${controllerName}' already registered to '${(typeof PropertyEditorManager\n          ._dataControllers[controllerName]).toString()}'`\n      );\n    }\n    PropertyEditorManager._dataControllers[controllerName] = controller;\n  }\n\n  /** @internal */\n  public static deregisterDataController(controllerName: string): void {\n    if (PropertyEditorManager._dataControllers.hasOwnProperty(controllerName)) {\n      delete PropertyEditorManager._dataControllers[controllerName];\n    }\n  }\n\n  public static createEditor(\n    editType: string,\n    editorName?: string,\n    dataControllerName?: string\n  ): PropertyEditorBase {\n    const fullEditorName = getFullEditorName(editType, editorName);\n\n    let editor: PropertyEditorBase;\n    if (editors.hasOwnProperty(fullEditorName))\n      editor = new editors[fullEditorName]();\n    else if (editors.hasOwnProperty(editType)) editor = new editors[editType]();\n    else editor = new BasicPropertyEditor();\n\n    if (dataControllerName) {\n      if (\n        PropertyEditorManager._dataControllers.hasOwnProperty(\n          dataControllerName\n        )\n      )\n        editor.customDataController =\n          new PropertyEditorManager._dataControllers[dataControllerName]();\n      else\n        throw Error(\n          `PropertyEditorManager.createEditor error: data controller '${dataControllerName}' is not registered`\n        );\n    }\n\n    return editor;\n  }\n\n  public static hasCustomEditor(editType: string, editorName: string): boolean {\n    const fullEditorName = getFullEditorName(editType, editorName);\n    return editors.hasOwnProperty(fullEditorName);\n  }\n}\n\n/** Basic Property Editor registered for the \"text\" and \"string\" type names.\n * It uses the [[TextEditor]] React component.\n * @public\n */\nexport class BasicPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <TextEditor />;\n  }\n}\n\nfunction getFullEditorName(editType: string, editorName?: string) {\n  let fullEditorName = editType;\n  if (editorName) fullEditorName += `:${editorName}`;\n  return fullEditorName;\n}\n\n/** Used to override the default property editors from the `appui-react` package.\n * @internal\n */\nexport function registerDefaultPropertyEditor(\n  editType: string,\n  editor: new () => PropertyEditorBase,\n  editorName?: string,\n  override = false\n) {\n  const fullEditorName = getFullEditorName(editType, editorName);\n\n  // Ignore if already registered and override is disabled.\n  if (editors.hasOwnProperty(fullEditorName) && !override) return;\n\n  editors[fullEditorName] = editor;\n}\n"]}
+{"version":3,"file":"PropertyEditorManager.js","sourceRoot":"","sources":["../../../src/components-react/editors/PropertyEditorManager.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 * as React from \"react\";\nimport { TextEditor } from \"./TextEditor.js\";\nimport type {\n  DisplayMessageType,\n  MessageSeverity,\n  PropertyDescription,\n  PropertyRecord,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\n\n/** Asynchronous Error Message returned as part of [[AsyncValueProcessingResult]]\n * @public\n */\nexport interface AsyncErrorMessage {\n  severity: MessageSeverity;\n  briefMessage: string;\n  detailedMessage?: string;\n  messageType?: DisplayMessageType;\n}\n\n/** Asynchronous Value Process Result\n * @public\n */\nexport interface AsyncValueProcessingResult {\n  encounteredError: boolean;\n  returnValue?: PropertyValue;\n  errorMessage?: AsyncErrorMessage;\n}\n\n/** DataControllers can be implemented per typename to validate and commit values.\n * @public\n */\nexport interface DataController {\n  validateValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult>;\n  commitValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult>;\n}\n\n/** PropertyEditor is the base class for all property editors.\n * @public\n */\nexport abstract class PropertyEditorBase implements DataController {\n  public get containerHandlesBlur(): boolean {\n    return true;\n  }\n  public get containerHandlesEscape(): boolean {\n    return true;\n  }\n  public get containerHandlesEnter(): boolean {\n    return true;\n  }\n  public get containerHandlesTab(): boolean {\n    return true;\n  }\n  public get containerStopsKeydownPropagation(): boolean {\n    return true;\n  }\n\n  public customDataController: DataController | undefined = undefined;\n\n  public abstract get reactNode(): React.ReactNode;\n\n  public applyEditorParams(\n    _property: PropertyDescription,\n    _record: PropertyRecord\n  ): void {}\n\n  public async commitValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    if (this.customDataController)\n      return this.customDataController.commitValue(newValue, record);\n\n    return { encounteredError: false };\n  }\n\n  public async validateValue(\n    newValue: PropertyValue,\n    record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    if (this.customDataController)\n      return this.customDataController.validateValue(newValue, record);\n\n    return { encounteredError: false };\n  }\n}\n\n/** DataControllerBase is the base class for all Data Controllers.\n * @public\n */\nexport abstract class DataControllerBase implements DataController {\n  public async commitValue(\n    _newValue: PropertyValue,\n    _record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    return { encounteredError: false };\n  }\n\n  public async validateValue(\n    _newValue: PropertyValue,\n    _record: PropertyRecord\n  ): Promise<AsyncValueProcessingResult> {\n    return { encounteredError: false };\n  }\n}\n\nconst editors: { [index: string]: new () => PropertyEditorBase } = {};\n\n/** Manages Property Editors. Property Editors are registered with and created by the manager.\n * @public\n */\nexport class PropertyEditorManager {\n  private static _dataControllers: {\n    [index: string]: new () => DataControllerBase;\n  } = {};\n\n  public static registerEditor(\n    editType: string,\n    editor: new () => PropertyEditorBase,\n    editorName?: string\n  ): void {\n    const fullEditorName = getFullEditorName(editType, editorName);\n\n    if (editors.hasOwnProperty(fullEditorName)) {\n      const nameOfEditor = editors[fullEditorName].name;\n      throw Error(\n        `PropertyEditorManager.registerEditor error: type '${fullEditorName}' already registered to '${nameOfEditor}'`\n      );\n    }\n    editors[fullEditorName] = editor;\n  }\n\n  public static registerDataController(\n    controllerName: string,\n    controller: new () => DataControllerBase\n  ): void {\n    if (PropertyEditorManager._dataControllers.hasOwnProperty(controllerName)) {\n      throw Error(\n        `PropertyEditorManager.registerDataController error: type '${controllerName}' already registered to '${(typeof PropertyEditorManager\n          ._dataControllers[controllerName]).toString()}'`\n      );\n    }\n    PropertyEditorManager._dataControllers[controllerName] = controller;\n  }\n\n  /** @internal */\n  public static deregisterDataController(controllerName: string): void {\n    if (PropertyEditorManager._dataControllers.hasOwnProperty(controllerName)) {\n      delete PropertyEditorManager._dataControllers[controllerName];\n    }\n  }\n\n  public static createEditor(\n    editType: string,\n    editorName?: string,\n    dataControllerName?: string\n  ): PropertyEditorBase {\n    const fullEditorName = getFullEditorName(editType, editorName);\n\n    let editor: PropertyEditorBase;\n    if (editors.hasOwnProperty(fullEditorName))\n      editor = new editors[fullEditorName]();\n    else if (editors.hasOwnProperty(editType)) editor = new editors[editType]();\n    else editor = new BasicPropertyEditor();\n\n    if (dataControllerName) {\n      if (\n        PropertyEditorManager._dataControllers.hasOwnProperty(\n          dataControllerName\n        )\n      )\n        editor.customDataController =\n          new PropertyEditorManager._dataControllers[dataControllerName]();\n      else\n        throw Error(\n          `PropertyEditorManager.createEditor error: data controller '${dataControllerName}' is not registered`\n        );\n    }\n\n    return editor;\n  }\n\n  public static hasCustomEditor(editType: string, editorName: string): boolean {\n    const fullEditorName = getFullEditorName(editType, editorName);\n    return editors.hasOwnProperty(fullEditorName);\n  }\n}\n\n/** Basic Property Editor registered for the \"text\" and \"string\" type names.\n * It uses the [[TextEditor]] React component.\n * @public\n */\nexport class BasicPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <TextEditor />;\n  }\n}\n\nfunction getFullEditorName(editType: string, editorName?: string) {\n  let fullEditorName = editType;\n  if (editorName) fullEditorName += `:${editorName}`;\n  return fullEditorName;\n}\n\n/** Used to override the default property editors from the `appui-react` package.\n * @internal\n */\nexport function registerDefaultPropertyEditor(\n  editType: string,\n  editor: new () => PropertyEditorBase,\n  editorName?: string,\n  override = false\n) {\n  const fullEditorName = getFullEditorName(editType, editorName);\n\n  // Ignore if already registered and override is disabled.\n  if (editors.hasOwnProperty(fullEditorName) && !override) return;\n\n  editors[fullEditorName] = editor;\n}\n"]}

package/lib/components-react/editors/SliderEditor.js

@@ -17,74 +17,14 @@ import { PopupButton, PopupContent, PopupOkCancelButtons, } from "./PopupButton.
  * @public
  */
 export class SliderEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._enterKey = false;
-        this._divElement = React.createRef();
-        this.state = {
-            value: 0,
-            min: 0,
-            max: 100,
-        };
-        this._handleChange = (values) => {
-            const newValue = values[0];
-            if (this._isMounted)
-                this.setState({
-                    value: newValue,
-                });
-        };
-        this.internalFormatTooltip = (value, step = 1) => {
-            if (Number.isInteger(step))
-                return value.toFixed(0);
-            const stepString = step.toString();
-            const decimalIndex = stepString.indexOf(".");
-            const numDecimals = step.toString().length - (decimalIndex + 1);
-            return value.toFixed(numDecimals);
-        };
-        this._handleEnter = async () => {
-            this._enterKey = true;
-            await this._handleCommit();
-        };
-        this._handleClose = async () => {
-            if (this._enterKey) {
-                this._enterKey = false;
-            }
-            else {
-                if (this.props.onCancel)
-                    this.props.onCancel();
-            }
-        };
-        this._handleOk = async (_event) => {
-            await this._handleCommit();
-        };
-        this._handleCancel = (_event) => {
-            if (this.props.onCancel) {
-                this.props.onCancel();
-            }
-        };
-        this._handleCommit = async () => {
-            if (this.props.propertyRecord && this.props.onCommit) {
-                const propertyValue = await this.getPropertyValue();
-                if (propertyValue !== undefined) {
-                    this.props.onCommit({
-                        propertyRecord: this.props.propertyRecord,
-                        newValue: propertyValue,
-                    });
-                }
-            }
-        };
-        this.tooltipProps = (_index, val) => {
-            const content = this.state.formatTooltip
-                ? this.state.formatTooltip(val)
-                : this.internalFormatTooltip(val, this.state.step);
-            return {
-                placement: this.state.tooltipBelow ? "bottom" : "top",
-                content,
-                visible: this.state.showTooltip,
-            };
-        };
-    }
+    _isMounted = false;
+    _enterKey = false;
+    _divElement = React.createRef();
+    state = {
+        value: 0,
+        min: 0,
+        max: 100,
+    };
     async getPropertyValue() {
         const record = this.props.propertyRecord;
         let propertyValue;
@@ -106,6 +46,13 @@ export class SliderEditor extends React.PureComponent {
             containsFocus = this.htmlElement.contains(document.activeElement);
         return containsFocus;
     }
+    _handleChange = (values) => {
+        const newValue = values[0];
+        if (this._isMounted)
+            this.setState({
+                value: newValue,
+            });
+    };
     componentDidMount() {
         this._isMounted = true;
         void this.setStateFromProps();
@@ -119,6 +66,14 @@ export class SliderEditor extends React.PureComponent {
             void this.setStateFromProps();
         }
     }
+    internalFormatTooltip = (value, step = 1) => {
+        if (Number.isInteger(step))
+            return value.toFixed(0);
+        const stepString = step.toString();
+        const decimalIndex = stepString.indexOf(".");
+        const numDecimals = step.toString().length - (decimalIndex + 1);
+        return value.toFixed(numDecimals);
+    };
     async setStateFromProps() {
         const record = this.props.propertyRecord;
         let initialValue = 0;
@@ -206,6 +161,48 @@ export class SliderEditor extends React.PureComponent {
                 thumbMode,
             });
     }
+    _handleEnter = async () => {
+        this._enterKey = true;
+        await this._handleCommit();
+    };
+    _handleClose = async () => {
+        if (this._enterKey) {
+            this._enterKey = false;
+        }
+        else {
+            if (this.props.onCancel)
+                this.props.onCancel();
+        }
+    };
+    _handleOk = async (_event) => {
+        await this._handleCommit();
+    };
+    _handleCancel = (_event) => {
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    };
+    _handleCommit = async () => {
+        if (this.props.propertyRecord && this.props.onCommit) {
+            const propertyValue = await this.getPropertyValue();
+            if (propertyValue !== undefined) {
+                this.props.onCommit({
+                    propertyRecord: this.props.propertyRecord,
+                    newValue: propertyValue,
+                });
+            }
+        }
+    };
+    tooltipProps = (_index, val) => {
+        const content = this.state.formatTooltip
+            ? this.state.formatTooltip(val)
+            : this.internalFormatTooltip(val, this.state.step);
+        return {
+            placement: this.state.tooltipBelow ? "bottom" : "top",
+            content,
+            visible: this.state.showTooltip,
+        };
+    };
     render() {
         const className = classnames("components-cell-editor", "components-slider-editor", this.props.className);
         const minSize = this.state.size ? this.state.size : 100;

package/lib/components-react/editors/SliderEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/SliderEditor.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 \"./SliderEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  PropertyEditorParams,\n  PropertyValue,\n  SliderEditorParams,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { Tooltip } from \"@itwin/itwinui-react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport {\n  PopupButton,\n  PopupContent,\n  PopupOkCancelButtons,\n} from \"./PopupButton.js\";\n\ntype TooltipProps = React.ComponentPropsWithoutRef<typeof Tooltip>;\n\n/** @internal */\ninterface SliderEditorState {\n  value: number;\n  min: number;\n  max: number;\n  size?: number;\n  step?: number;\n  showTooltip?: boolean;\n  tooltipBelow?: boolean;\n  formatTooltip?: (value: number) => string;\n  thumbMode?: \"allow-crossing\" | \"inhibit-crossing\";\n  trackDisplayMode?: \"auto\" | \"none\" | \"odd-segments\" | \"even-segments\";\n  minLabel?: React.ReactNode;\n  maxLabel?: React.ReactNode;\n  tickLabels?: React.ReactNode;\n}\n\n/** SliderEditor React component that is a property editor with numeric input & up/down buttons\n * @public\n */\nexport class SliderEditor\n  extends React.PureComponent<PropertyEditorProps, SliderEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _enterKey = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<SliderEditorState> = {\n    value: 0,\n    min: 0,\n    max: 100,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.value,\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.htmlElement)\n      containsFocus = this.htmlElement.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private _handleChange = (values: readonly number[]): void => {\n    const newValue = values[0];\n\n    if (this._isMounted)\n      this.setState({\n        value: newValue,\n      });\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private internalFormatTooltip = (value: number, step = 1) => {\n    if (Number.isInteger(step)) return value.toFixed(0);\n\n    const stepString = step.toString();\n    const decimalIndex = stepString.indexOf(\".\");\n    const numDecimals = step.toString().length - (decimalIndex + 1);\n    return value.toFixed(numDecimals);\n  };\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = 0;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as number;\n    }\n\n    let size: number | undefined;\n    let min = 0;\n    let max = 100;\n    let step: number | undefined;\n    let showTooltip: boolean | undefined;\n    let tooltipBelow: boolean | undefined;\n    let formatTooltip: ((value: number) => string) | undefined;\n    let tickLabels: string[] | undefined;\n    let minLabel: React.ReactNode | undefined;\n    let maxLabel: React.ReactNode | undefined;\n    let trackDisplayMode:\n      | \"auto\"\n      | \"none\"\n      | \"odd-segments\"\n      | \"even-segments\"\n      | undefined;\n    let thumbMode: \"allow-crossing\" | \"inhibit-crossing\" | undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const sliderParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Slider.valueOf()\n      ) as SliderEditorParams;\n      if (sliderParams) {\n        min = sliderParams.minimum;\n        max = sliderParams.maximum;\n        size = sliderParams.size;\n        step = sliderParams.step;\n        thumbMode =\n          1 === sliderParams.mode ? \"allow-crossing\" : \"inhibit-crossing\";\n        trackDisplayMode = !sliderParams.reversed ? \"auto\" : \"odd-segments\";\n        showTooltip = sliderParams.showTooltip;\n        tooltipBelow = sliderParams.tooltipBelow;\n        formatTooltip = sliderParams.formatTooltip;\n\n        minLabel = !sliderParams.showMinMax ? (\n          \"\"\n        ) : sliderParams.minIconSpec ? (\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          <Icon iconSpec={sliderParams.minIconSpec} />\n        ) : undefined;\n        maxLabel = !sliderParams.showMinMax ? (\n          \"\"\n        ) : sliderParams.maxIconSpec ? (\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          <Icon iconSpec={sliderParams.maxIconSpec} />\n        ) : undefined;\n\n        if (sliderParams.showTicks) {\n          const count = sliderParams.getTickCount\n            ? sliderParams.getTickCount()\n            : 0;\n          if (count) {\n            tickLabels = [];\n            const increment = (max - min) / count;\n            for (let i = 0; i <= count; i++) {\n              const value = i * increment + min;\n              if (sliderParams.showTickLabels) {\n                const label = sliderParams.formatTick\n                  ? sliderParams.formatTick(value)\n                  : this.internalFormatTooltip(value, step);\n                tickLabels.push(label);\n              } else {\n                tickLabels.push(\"\");\n              }\n            }\n          } else if (sliderParams.getTickValues) {\n            tickLabels = sliderParams\n              .getTickValues()\n              .map((val: number) =>\n                sliderParams.formatTick\n                  ? sliderParams.formatTick(val)\n                  : this.internalFormatTooltip(val, step)\n              );\n          }\n        }\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        value: initialValue,\n        size,\n        min,\n        max,\n        step,\n        trackDisplayMode,\n        showTooltip,\n        tooltipBelow,\n        formatTooltip,\n        minLabel,\n        maxLabel,\n        tickLabels,\n        thumbMode,\n      });\n  }\n\n  private _handleEnter = async (): Promise<void> => {\n    this._enterKey = true;\n    await this._handleCommit();\n  };\n\n  private _handleClose = async (): Promise<void> => {\n    if (this._enterKey) {\n      this._enterKey = false;\n    } else {\n      if (this.props.onCancel) this.props.onCancel();\n    }\n  };\n\n  private _handleOk = async (_event: React.MouseEvent): Promise<void> => {\n    await this._handleCommit();\n  };\n\n  private _handleCancel = (_event: React.MouseEvent): void => {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  };\n\n  private _handleCommit = async (): Promise<void> => {\n    if (this.props.propertyRecord && this.props.onCommit) {\n      const propertyValue = await this.getPropertyValue();\n      if (propertyValue !== undefined) {\n        this.props.onCommit({\n          propertyRecord: this.props.propertyRecord,\n          newValue: propertyValue,\n        });\n      }\n    }\n  };\n\n  private tooltipProps = (_index: number, val: number) => {\n    const content = this.state.formatTooltip\n      ? this.state.formatTooltip(val)\n      : this.internalFormatTooltip(val, this.state.step);\n    return {\n      placement: this.state.tooltipBelow ? \"bottom\" : \"top\",\n      content,\n      visible: this.state.showTooltip,\n    } as Partial<Omit<TooltipProps, \"children\">>;\n  };\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-slider-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 100;\n    const style: React.CSSProperties = {\n      ...this.props.style,\n      minWidth: `${minSize}px`,\n    };\n\n    const tickProps = {\n      \"data-testid\": \"components-tick\",\n    } as React.ComponentProps<\"span\">;\n    const popupContent = (\n      <Slider\n        className=\"components-slider-editor-slider\"\n        style={style}\n        values={[this.state.value]}\n        min={this.state.min}\n        max={this.state.max}\n        step={this.state.step}\n        thumbMode={this.state.thumbMode}\n        trackDisplayMode={this.state.trackDisplayMode}\n        disabled={this.props.propertyRecord?.isDisabled}\n        minLabel={this.state.minLabel}\n        maxLabel={this.state.maxLabel}\n        tooltipProps={this.tooltipProps}\n        tickLabels={this.state.tickLabels}\n        tickProps={tickProps}\n        onChange={this._handleChange}\n      />\n    );\n\n    return (\n      <div className={className} ref={this._divElement}>\n        <PopupButton\n          label={this.state.value}\n          onClose={this._handleClose}\n          onEnter={this._handleEnter}\n          setFocus={this.props.setFocus}\n          disabled={this.props.propertyRecord?.isDisabled}\n          readonly={this.props.propertyRecord?.isReadonly}\n        >\n          <PopupContent>\n            {popupContent}\n            <PopupOkCancelButtons\n              onOk={this._handleOk}\n              onCancel={this._handleCancel}\n            />\n          </PopupContent>\n        </PopupButton>\n      </div>\n    );\n  }\n}\n\n/** Slider Property Editor registered for the \"number\" type name and \"slider\" editor name.\n * It uses the [[SliderEditor]] React component.\n * @public\n */\nexport class SliderPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <SliderEditor />;\n  }\n}\n"]}
+{"version":3,"file":"SliderEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/SliderEditor.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 \"./SliderEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  PropertyEditorParams,\n  PropertyValue,\n  SliderEditorParams,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { Tooltip } from \"@itwin/itwinui-react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { PropertyEditorProps, TypeEditor } from \"./EditorContainer.js\";\nimport { PropertyEditorBase } from \"./PropertyEditorManager.js\";\nimport {\n  PopupButton,\n  PopupContent,\n  PopupOkCancelButtons,\n} from \"./PopupButton.js\";\n\ntype TooltipProps = React.ComponentPropsWithoutRef<typeof Tooltip>;\n\n/** @internal */\ninterface SliderEditorState {\n  value: number;\n  min: number;\n  max: number;\n  size?: number;\n  step?: number;\n  showTooltip?: boolean;\n  tooltipBelow?: boolean;\n  formatTooltip?: (value: number) => string;\n  thumbMode?: \"allow-crossing\" | \"inhibit-crossing\";\n  trackDisplayMode?: \"auto\" | \"none\" | \"odd-segments\" | \"even-segments\";\n  minLabel?: React.ReactNode;\n  maxLabel?: React.ReactNode;\n  tickLabels?: React.ReactNode;\n}\n\n/** SliderEditor React component that is a property editor with numeric input & up/down buttons\n * @public\n */\nexport class SliderEditor\n  extends React.PureComponent<PropertyEditorProps, SliderEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _enterKey = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  public override readonly state: Readonly<SliderEditorState> = {\n    value: 0,\n    min: 0,\n    max: 100,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.value,\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.htmlElement)\n      containsFocus = this.htmlElement.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private _handleChange = (values: readonly number[]): void => {\n    const newValue = values[0];\n\n    if (this._isMounted)\n      this.setState({\n        value: newValue,\n      });\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private internalFormatTooltip = (value: number, step = 1) => {\n    if (Number.isInteger(step)) return value.toFixed(0);\n\n    const stepString = step.toString();\n    const decimalIndex = stepString.indexOf(\".\");\n    const numDecimals = step.toString().length - (decimalIndex + 1);\n    return value.toFixed(numDecimals);\n  };\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = 0;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as number;\n    }\n\n    let size: number | undefined;\n    let min = 0;\n    let max = 100;\n    let step: number | undefined;\n    let showTooltip: boolean | undefined;\n    let tooltipBelow: boolean | undefined;\n    let formatTooltip: ((value: number) => string) | undefined;\n    let tickLabels: string[] | undefined;\n    let minLabel: React.ReactNode | undefined;\n    let maxLabel: React.ReactNode | undefined;\n    let trackDisplayMode:\n      | \"auto\"\n      | \"none\"\n      | \"odd-segments\"\n      | \"even-segments\"\n      | undefined;\n    let thumbMode: \"allow-crossing\" | \"inhibit-crossing\" | undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const sliderParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Slider.valueOf()\n      ) as SliderEditorParams;\n      if (sliderParams) {\n        min = sliderParams.minimum;\n        max = sliderParams.maximum;\n        size = sliderParams.size;\n        step = sliderParams.step;\n        thumbMode =\n          1 === sliderParams.mode ? \"allow-crossing\" : \"inhibit-crossing\";\n        trackDisplayMode = !sliderParams.reversed ? \"auto\" : \"odd-segments\";\n        showTooltip = sliderParams.showTooltip;\n        tooltipBelow = sliderParams.tooltipBelow;\n        formatTooltip = sliderParams.formatTooltip;\n\n        minLabel = !sliderParams.showMinMax ? (\n          \"\"\n        ) : sliderParams.minIconSpec ? (\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          <Icon iconSpec={sliderParams.minIconSpec} />\n        ) : undefined;\n        maxLabel = !sliderParams.showMinMax ? (\n          \"\"\n        ) : sliderParams.maxIconSpec ? (\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          <Icon iconSpec={sliderParams.maxIconSpec} />\n        ) : undefined;\n\n        if (sliderParams.showTicks) {\n          const count = sliderParams.getTickCount\n            ? sliderParams.getTickCount()\n            : 0;\n          if (count) {\n            tickLabels = [];\n            const increment = (max - min) / count;\n            for (let i = 0; i <= count; i++) {\n              const value = i * increment + min;\n              if (sliderParams.showTickLabels) {\n                const label = sliderParams.formatTick\n                  ? sliderParams.formatTick(value)\n                  : this.internalFormatTooltip(value, step);\n                tickLabels.push(label);\n              } else {\n                tickLabels.push(\"\");\n              }\n            }\n          } else if (sliderParams.getTickValues) {\n            tickLabels = sliderParams\n              .getTickValues()\n              .map((val: number) =>\n                sliderParams.formatTick\n                  ? sliderParams.formatTick(val)\n                  : this.internalFormatTooltip(val, step)\n              );\n          }\n        }\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        value: initialValue,\n        size,\n        min,\n        max,\n        step,\n        trackDisplayMode,\n        showTooltip,\n        tooltipBelow,\n        formatTooltip,\n        minLabel,\n        maxLabel,\n        tickLabels,\n        thumbMode,\n      });\n  }\n\n  private _handleEnter = async (): Promise<void> => {\n    this._enterKey = true;\n    await this._handleCommit();\n  };\n\n  private _handleClose = async (): Promise<void> => {\n    if (this._enterKey) {\n      this._enterKey = false;\n    } else {\n      if (this.props.onCancel) this.props.onCancel();\n    }\n  };\n\n  private _handleOk = async (_event: React.MouseEvent): Promise<void> => {\n    await this._handleCommit();\n  };\n\n  private _handleCancel = (_event: React.MouseEvent): void => {\n    if (this.props.onCancel) {\n      this.props.onCancel();\n    }\n  };\n\n  private _handleCommit = async (): Promise<void> => {\n    if (this.props.propertyRecord && this.props.onCommit) {\n      const propertyValue = await this.getPropertyValue();\n      if (propertyValue !== undefined) {\n        this.props.onCommit({\n          propertyRecord: this.props.propertyRecord,\n          newValue: propertyValue,\n        });\n      }\n    }\n  };\n\n  private tooltipProps = (_index: number, val: number) => {\n    const content = this.state.formatTooltip\n      ? this.state.formatTooltip(val)\n      : this.internalFormatTooltip(val, this.state.step);\n    return {\n      placement: this.state.tooltipBelow ? \"bottom\" : \"top\",\n      content,\n      visible: this.state.showTooltip,\n    } as Partial<Omit<TooltipProps, \"children\">>;\n  };\n\n  public override render(): React.ReactNode {\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-slider-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 100;\n    const style: React.CSSProperties = {\n      ...this.props.style,\n      minWidth: `${minSize}px`,\n    };\n\n    const tickProps = {\n      \"data-testid\": \"components-tick\",\n    } as React.ComponentProps<\"span\">;\n    const popupContent = (\n      <Slider\n        className=\"components-slider-editor-slider\"\n        style={style}\n        values={[this.state.value]}\n        min={this.state.min}\n        max={this.state.max}\n        step={this.state.step}\n        thumbMode={this.state.thumbMode}\n        trackDisplayMode={this.state.trackDisplayMode}\n        disabled={this.props.propertyRecord?.isDisabled}\n        minLabel={this.state.minLabel}\n        maxLabel={this.state.maxLabel}\n        tooltipProps={this.tooltipProps}\n        tickLabels={this.state.tickLabels}\n        tickProps={tickProps}\n        onChange={this._handleChange}\n      />\n    );\n\n    return (\n      <div className={className} ref={this._divElement}>\n        <PopupButton\n          label={this.state.value}\n          onClose={this._handleClose}\n          onEnter={this._handleEnter}\n          setFocus={this.props.setFocus}\n          disabled={this.props.propertyRecord?.isDisabled}\n          readonly={this.props.propertyRecord?.isReadonly}\n        >\n          <PopupContent>\n            {popupContent}\n            <PopupOkCancelButtons\n              onOk={this._handleOk}\n              onCancel={this._handleCancel}\n            />\n          </PopupContent>\n        </PopupButton>\n      </div>\n    );\n  }\n}\n\n/** Slider Property Editor registered for the \"number\" type name and \"slider\" editor name.\n * It uses the [[SliderEditor]] React component.\n * @public\n */\nexport class SliderPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <SliderEditor />;\n  }\n}\n"]}

package/lib/components-react/editors/TextEditor.js

@@ -17,31 +17,11 @@ import { UiComponents } from "../UiComponents.js";
  * @public
  */
 export class TextEditor extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false;
-        this._inputElement = React.createRef();
-        this.state = {
-            inputValue: "",
-        };
-        this._updateInputValue = (e) => {
-            if (this._isMounted)
-                this.setState({
-                    inputValue: e.target.value,
-                }, async () => {
-                    if (this.props.shouldCommitOnChange &&
-                        this.props.onCommit &&
-                        this.props.propertyRecord) {
-                        const newValue = await this.getPropertyValue();
-                        if (newValue)
-                            this.props.onCommit({
-                                propertyRecord: this.props.propertyRecord,
-                                newValue,
-                            });
-                    }
-                });
-        };
-    }
+    _isMounted = false;
+    _inputElement = React.createRef();
+    state = {
+        inputValue: "",
+    };
     async getPropertyValue() {
         const record = this.props.propertyRecord;
         let propertyValue;
@@ -57,6 +37,23 @@ export class TextEditor extends React.PureComponent {
     get hasFocus() {
         return document.activeElement === this._inputElement.current;
     }
+    _updateInputValue = (e) => {
+        if (this._isMounted)
+            this.setState({
+                inputValue: e.target.value,
+            }, async () => {
+                if (this.props.shouldCommitOnChange &&
+                    this.props.onCommit &&
+                    this.props.propertyRecord) {
+                    const newValue = await this.getPropertyValue();
+                    if (newValue)
+                        this.props.onCommit({
+                            propertyRecord: this.props.propertyRecord,
+                            newValue,
+                        });
+                }
+            });
+    };
     componentDidMount() {
         this._isMounted = true;
         void this.setStateFromProps();

package/lib/components-react/editors/TextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/TextEditor.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 \"./TextEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IconEditorParams,\n  InputEditorSizeParams,\n  PrimitiveValue,\n  PropertyEditorParams,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon, IconInput } from \"@itwin/core-react\";\nimport { Input, InputWithDecorations } from \"@itwin/itwinui-react\";\nimport { TypeConverterManager } from \"../converters/TypeConverterManager.js\";\nimport type {\n  InternalInputEditorProps,\n  PropertyEditorProps,\n  TypeEditor,\n} from \"./EditorContainer.js\";\nimport { UiComponents } from \"../UiComponents.js\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\n/** @internal */\ninterface TextEditorState {\n  inputValue: string;\n  size?: number;\n  maxLength?: number;\n  iconSpec?: string;\n}\n\n/** TextEditor React component that is a property editor with text input\n * @public\n */\nexport class TextEditor\n  extends React.PureComponent<PropertyEditorProps, TextEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _inputElement = React.createRef<HTMLInputElement>();\n\n  public override readonly state: Readonly<TextEditorState> = {\n    inputValue: \"\",\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertFromStringToPropertyValue(this.state.inputValue, record);\n      (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  private _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (this._isMounted)\n      this.setState(\n        {\n          inputValue: e.target.value,\n        },\n        async () => {\n          if (\n            this.props.shouldCommitOnChange &&\n            this.props.onCommit &&\n            this.props.propertyRecord\n          ) {\n            const newValue = await this.getPropertyValue();\n            if (newValue)\n              this.props.onCommit({\n                propertyRecord: this.props.propertyRecord,\n                newValue,\n              });\n          }\n        }\n      );\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const value = record.value.value;\n      initialValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertPropertyToString(record.property, value);\n    }\n\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let iconSpec: string | undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const editorSizeParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.InputEditorSize.valueOf()\n      ) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        if (editorSizeParams.size) size = editorSizeParams.size;\n        if (editorSizeParams.maxLength) maxLength = editorSizeParams.maxLength;\n      }\n\n      const iconParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Icon.valueOf()\n      ) as IconEditorParams;\n      if (iconParams) {\n        iconSpec = iconParams.definition.iconSpec;\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: initialValue,\n        size,\n        maxLength,\n        iconSpec,\n      });\n  }\n\n  public override render(): React.ReactNode {\n    const { decoration } = this.props as InternalInputEditorProps;\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-text-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 8;\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `${minSize * 0.75}em`,\n    };\n    const inputProps: InputProps = {\n      type: \"text\",\n      className,\n      style: this.props.style ? this.props.style : minWidthStyle,\n      readOnly: this.props.propertyRecord?.isReadonly,\n      disabled: this.props.propertyRecord?.isDisabled,\n      maxLength: this.state.maxLength,\n      value: this.state.inputValue,\n      onBlur: this.props.onBlur,\n      onChange: this._updateInputValue,\n      autoFocus: this.props.setFocus && !this.props.propertyRecord?.isDisabled,\n      \"aria-label\": UiComponents.translate(\"editor.text\"),\n    };\n\n    const icon = this.state.iconSpec ? (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <Icon iconSpec={this.state.iconSpec} />\n    ) : undefined;\n    return (\n      <LockTextEditor\n        {...inputProps}\n        ref={this._inputElement}\n        id={this.props.propertyRecord?.property.name}\n        icon={icon}\n        decoration={decoration}\n      />\n    );\n  }\n}\n\ninterface LockTextEditorProps extends InputProps {\n  icon?: React.ReactNode;\n  decoration?: React.ReactNode;\n}\n\nconst LockTextEditor = React.forwardRef<HTMLInputElement, LockTextEditorProps>(\n  function LockTextEditor(props, forwardedRef) {\n    const { icon, decoration, ...rest } = props;\n    if (decoration) {\n      return (\n        <InputWithDecorations size=\"small\">\n          {icon && (\n            <InputWithDecorations.Icon size=\"small\">\n              {icon}\n            </InputWithDecorations.Icon>\n          )}\n          <InputWithDecorations.Input\n            {...rest}\n            ref={forwardedRef}\n            data-testid=\"components-text-editor\"\n            size=\"small\"\n          />\n          {decoration}\n        </InputWithDecorations>\n      );\n    }\n\n    if (icon) {\n      return (\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        <IconInput\n          {...rest}\n          ref={forwardedRef}\n          icon={icon}\n          data-testid=\"components-text-editor\"\n        />\n      );\n    }\n    return (\n      <Input\n        {...rest}\n        ref={forwardedRef}\n        data-testid=\"components-text-editor\"\n        size=\"small\"\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../src/components-react/editors/TextEditor.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 \"./TextEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type {\n  IconEditorParams,\n  InputEditorSizeParams,\n  PrimitiveValue,\n  PropertyEditorParams,\n  PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n  PropertyEditorParamTypes,\n  PropertyValueFormat,\n} from \"@itwin/appui-abstract\";\nimport { Icon, IconInput } from \"@itwin/core-react\";\nimport { Input, InputWithDecorations } from \"@itwin/itwinui-react\";\nimport { TypeConverterManager } from \"../converters/TypeConverterManager.js\";\nimport type {\n  InternalInputEditorProps,\n  PropertyEditorProps,\n  TypeEditor,\n} from \"./EditorContainer.js\";\nimport { UiComponents } from \"../UiComponents.js\";\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Input>;\n\n/** @internal */\ninterface TextEditorState {\n  inputValue: string;\n  size?: number;\n  maxLength?: number;\n  iconSpec?: string;\n}\n\n/** TextEditor React component that is a property editor with text input\n * @public\n */\nexport class TextEditor\n  extends React.PureComponent<PropertyEditorProps, TextEditorState>\n  implements TypeEditor\n{\n  private _isMounted = false;\n  private _inputElement = React.createRef<HTMLInputElement>();\n\n  public override readonly state: Readonly<TextEditorState> = {\n    inputValue: \"\",\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertFromStringToPropertyValue(this.state.inputValue, record);\n      (propertyValue as PrimitiveValue).displayValue = this.state.inputValue;\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  private _updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (this._isMounted)\n      this.setState(\n        {\n          inputValue: e.target.value,\n        },\n        async () => {\n          if (\n            this.props.shouldCommitOnChange &&\n            this.props.onCommit &&\n            this.props.propertyRecord\n          ) {\n            const newValue = await this.getPropertyValue();\n            if (newValue)\n              this.props.onCommit({\n                propertyRecord: this.props.propertyRecord,\n                newValue,\n              });\n          }\n        }\n      );\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    void this.setStateFromProps();\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      void this.setStateFromProps();\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      const value = record.value.value;\n      initialValue = await TypeConverterManager.getConverter(\n        record.property.typename,\n        record.property.converter?.name\n      ).convertPropertyToString(record.property, value);\n    }\n\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let iconSpec: string | undefined;\n\n    if (\n      record &&\n      record.property &&\n      record.property.editor &&\n      record.property.editor.params\n    ) {\n      const editorSizeParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.InputEditorSize.valueOf()\n      ) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        if (editorSizeParams.size) size = editorSizeParams.size;\n        if (editorSizeParams.maxLength) maxLength = editorSizeParams.maxLength;\n      }\n\n      const iconParams = record.property.editor.params.find(\n        (param: PropertyEditorParams) =>\n          param.type === PropertyEditorParamTypes.Icon.valueOf()\n      ) as IconEditorParams;\n      if (iconParams) {\n        iconSpec = iconParams.definition.iconSpec;\n      }\n    }\n\n    if (this._isMounted)\n      this.setState({\n        inputValue: initialValue,\n        size,\n        maxLength,\n        iconSpec,\n      });\n  }\n\n  public override render(): React.ReactNode {\n    const { decoration } = this.props as InternalInputEditorProps;\n    const className = classnames(\n      \"components-cell-editor\",\n      \"components-text-editor\",\n      this.props.className\n    );\n    const minSize = this.state.size ? this.state.size : 8;\n    const minWidthStyle: React.CSSProperties = {\n      minWidth: `${minSize * 0.75}em`,\n    };\n    const inputProps: InputProps = {\n      type: \"text\",\n      className,\n      style: this.props.style ? this.props.style : minWidthStyle,\n      readOnly: this.props.propertyRecord?.isReadonly,\n      disabled: this.props.propertyRecord?.isDisabled,\n      maxLength: this.state.maxLength,\n      value: this.state.inputValue,\n      onBlur: this.props.onBlur,\n      onChange: this._updateInputValue,\n      autoFocus: this.props.setFocus && !this.props.propertyRecord?.isDisabled,\n      \"aria-label\": UiComponents.translate(\"editor.text\"),\n    };\n\n    const icon = this.state.iconSpec ? (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <Icon iconSpec={this.state.iconSpec} />\n    ) : undefined;\n    return (\n      <LockTextEditor\n        {...inputProps}\n        ref={this._inputElement}\n        id={this.props.propertyRecord?.property.name}\n        icon={icon}\n        decoration={decoration}\n      />\n    );\n  }\n}\n\ninterface LockTextEditorProps extends InputProps {\n  icon?: React.ReactNode;\n  decoration?: React.ReactNode;\n}\n\nconst LockTextEditor = React.forwardRef<HTMLInputElement, LockTextEditorProps>(\n  function LockTextEditor(props, forwardedRef) {\n    const { icon, decoration, ...rest } = props;\n    if (decoration) {\n      return (\n        <InputWithDecorations size=\"small\">\n          {icon && (\n            <InputWithDecorations.Icon size=\"small\">\n              {icon}\n            </InputWithDecorations.Icon>\n          )}\n          <InputWithDecorations.Input\n            {...rest}\n            ref={forwardedRef}\n            data-testid=\"components-text-editor\"\n            size=\"small\"\n          />\n          {decoration}\n        </InputWithDecorations>\n      );\n    }\n\n    if (icon) {\n      return (\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        <IconInput\n          {...rest}\n          ref={forwardedRef}\n          icon={icon}\n          data-testid=\"components-text-editor\"\n        />\n      );\n    }\n    return (\n      <Input\n        {...rest}\n        ref={forwardedRef}\n        data-testid=\"components-text-editor\"\n        size=\"small\"\n      />\n    );\n  }\n);\n"]}