,
    isDisabled: false,
    isExpanded: false,
    type: TextInputTypes.text,
    isLeftTruncated: false,
    isStartTruncated: false,
    onChange: (): any => undefined,
    ouiaSafe: true
  };
  inputRef = React.createRef<HTMLInputElement>();
  observer: any = () => {};

  constructor(props: TextInputProps) {
    super(props);
    if (!props.id && !props['aria-label'] && !props['aria-labelledby']) {
      // eslint-disable-next-line no-console
      console.error('Text input:', 'Text input requires either an id or aria-label to be specified');
    }
    this.state = {
      ouiaStateId: getDefaultOUIAId(TextInputBase.displayName)
    };
  }

  handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    if (this.props.onChange) {
      this.props.onChange(event, event.currentTarget.value);
    }
  };

  componentDidMount() {
    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
      const inputRef = this.props.innerRef || this.inputRef;
      this.observer = getResizeObserver(inputRef.current, this.handleResize, true);
      this.handleResize();
    }
  }

  componentWillUnmount() {
    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
      this.observer();
    }
  }

  handleResize = () => {
    const inputRef = this.props.innerRef || this.inputRef;
    if (inputRef && inputRef.current) {
      trimLeft(inputRef.current, String(this.props.value));
    }
  };

  restoreText = () => {
    const inputRef = this.props.innerRef || this.inputRef;
    // restore the value
    (inputRef.current as HTMLInputElement).value = String(this.props.value);
    // make sure we still see the rightmost value to preserve cursor click position
    inputRef.current.scrollLeft = inputRef.current.scrollWidth;
  };

  onFocus = (event?: any) => {
    const { isLeftTruncated, isStartTruncated, onFocus } = this.props;
    if (isLeftTruncated || isStartTruncated) {
      this.restoreText();
    }
    onFocus && onFocus(event);
  };

  onBlur = (event?: any) => {
    const { isLeftTruncated, isStartTruncated, onBlur } = this.props;
    if (isLeftTruncated || isStartTruncated) {
      this.handleResize();
    }
    onBlur && onBlur(event);
  };

  render() {
    const {
      innerRef,
      className,
      type,
      value,
      placeholder,
      validated,
      /* eslint-disable @typescript-eslint/no-unused-vars */
      onChange,
      onFocus,
      onBlur,
      isLeftTruncated,
      isStartTruncated,
      isExpanded,
      expandedProps,
      readOnly,
      readOnlyVariant,
      isRequired,
      isDisabled,
      customIcon,
      ouiaId,
      ouiaSafe,
      ...props
    } = this.props;

    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
    const ariaExpandedProps = expandedProps
      ? { 'aria-expanded': expandedProps?.isExpanded, 'aria-controls': expandedProps?.ariaControls, role: 'combobox' }
      : {};

    return (
      <span
        className={css(
          styles.formControl,
          readOnlyVariant && styles.modifiers.readonly,
          readOnlyVariant === 'plain' && styles.modifiers.plain,
          isDisabled && styles.modifiers.disabled,
          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
          customIcon && styles.modifiers.icon,
          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
          className
        )}
      >
        <input
          {...props}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onChange={this.handleChange}
          type={type}
          value={this.sanitizeInputValue(value)}
          aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
          {...ariaExpandedProps}
          required={isRequired}
          disabled={isDisabled}
          readOnly={!!readOnlyVariant || readOnly}
          ref={innerRef || this.inputRef}
          placeholder={placeholder}
          {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
        />
        {(customIcon || hasStatusIcon) && (
          <span className={css(styles.formControlUtilities)}>
            {customIcon && <FormControlIcon customIcon={customIcon} />}
            {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
          </span>
        )}
      </span>
    );
  }

  private sanitizeInputValue = (value: string | number) =>
    typeof value === 'string' ? value.replace(/\n/g, ' ') : value;
}

export const TextInput = React.forwardRef((props: TextInputProps, ref: React.Ref<HTMLInputElement>) => (
  <TextInputBase {...props} innerRef={ref as React.MutableRefObject<any>} />
));
TextInput.displayName = 'TextInput';