@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTTextInput/versions/V0/index.js

@@ -0,0 +1,224 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import React, { Fragment, PureComponent, isValidElement } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import { bool, elementType, func, object, objectOf, string } from 'prop-types';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+import { inputPropTypes, metaPropTypes } from '../../../../types/formTypes';
+import styles from './styles.module.scss';
+import { INPUT_TYPES } from './constants';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+const preventDefault = event => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
+};
+class UTTextInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleClickShowPassword", () => {
+      this.setState(prevState => ({
+        visible: !prevState.visible
+      }));
+    });
+    this.state = {
+      visible: false
+    };
+  }
+  render() {
+    const {
+      actionDataTestId,
+      adornmentInside,
+      autofocus,
+      bigInput,
+      captionLabel,
+      classes,
+      containerClassName,
+      dataTestId,
+      disabled,
+      field,
+      helperTextDataTestId,
+      id,
+      input,
+      inputClassName,
+      inputObjectKey,
+      label,
+      labelDataTestId,
+      labelRootClassName,
+      meta,
+      onChangeText,
+      placeholder,
+      PasswordInvisibleIcon,
+      PasswordVisibleIcon,
+      preventEnterSubmit,
+      preventFocus,
+      tippyProps,
+      tooltip,
+      tooltipContentDataTestId,
+      tooltipIconDataTestId,
+      type,
+      variant,
+      ...others
+    } = this.props;
+    const handleChange = event => {
+      var _event$target$value, _event$target;
+      if (preventFocus) event.preventDefault();
+      input.onChange(onChangeText((_event$target$value = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) !== null && _event$target$value !== void 0 ? _event$target$value : event));
+    };
+    const handleClick = event => {
+      if (preventFocus) {
+        event.preventDefault();
+        event.target.blur();
+      }
+    };
+    const {
+      icon: Icon,
+      outsideIcon,
+      adornment,
+      helperText
+    } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+
+    // TODO. These props were forwarded to the inner dom element and they were
+    // causing errors and warnings. I quit them from the  "..." spread to TextField.
+    // Deeper analysis should be done when refactoring the component to match
+    // design requirements.
+    const {
+      base,
+      selectedOptionsIds,
+      retrieveStyle: rs,
+      retrieveMuiTheme: rmt,
+      Component,
+      muiTheme,
+      ...textFieldPropsToForward
+    } = others;
+    const endAction = type === INPUT_TYPES.PASSWORD ? /*#__PURE__*/React.createElement(UTButton, {
+      dataTestId: actionDataTestId,
+      Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
+      onClick: this.handleClickShowPassword,
+      variant: "text"
+    }) : adornment;
+    const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
+    const errorMessage = shouldShowErrors(meta) && meta.error || captionLabel || '';
+    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
+    const TextInput = /*#__PURE__*/React.createElement(TextField, _extends({
+      id: fieldId,
+      placeholder: placeholder,
+      variant: variant,
+      label: Icon ? /*#__PURE__*/React.createElement("div", {
+        className: classes.labelContainer
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: classes.labelIcon
+      }), /*#__PURE__*/React.createElement("div", null, label)) : label,
+      onKeyPress: preventEnterSubmit ? preventDefault : undefined,
+      error: shouldShowErrors(meta),
+      FormHelperTextProps: {
+        component: 'div'
+      },
+      helperText: errorMessage || helperText ? /*#__PURE__*/React.createElement(UTLabel, {
+        className: styles.helperText,
+        colorTheme: errorMessage ? 'error' : 'gray',
+        dataTestId: helperTextDataTestId,
+        variant: "small",
+        withMarkdown: true
+      }, errorMessage || helperText) : undefined,
+      disabled: disabled,
+      onChange: handleChange,
+      onClick: handleClick,
+      value: value,
+      fullWidth: true,
+      autoFocus: autofocus,
+      margin: "none",
+      autoComplete: "off",
+      InputProps: {
+        id: fieldId,
+        inputProps: {
+          'data-testid': dataTestId,
+          'data-keyboard': (input === null || input === void 0 ? void 0 : input.name) || null
+        },
+        endAdornment: endAction && /*#__PURE__*/React.createElement(InputAdornment, {
+          position: "end",
+          className: "".concat(adornmentInside && styles.adornmentInside)
+        }, endAction),
+        type: type === INPUT_TYPES.PASSWORD ? !this.state.visible ? INPUT_TYPES.PASSWORD : INPUT_TYPES.TEXT : type || INPUT_TYPES.TEXT,
+        classes: {
+          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === INPUT_TYPES.NUMBER && styles.numberType, "\n              ").concat(inputClassName, "\n            ")
+        }
+      },
+      InputLabelProps: {
+        classes: {
+          root: labelRootClassName
+        },
+        htmlFor: fieldId,
+        'data-testid': labelDataTestId
+      }
+    }, textFieldPropsToForward));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && styles.containerWithTooltip)
+    }, tooltip ? /*#__PURE__*/React.createElement(Fragment, null, TextInput, /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltip,
+      dataTestId: tooltipContentDataTestId,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.tooltipIconContainer,
+      "data-testid": tooltipIconDataTestId
+    }, /*#__PURE__*/React.createElement(HelpOutline, {
+      className: "".concat(classes.tooltipIcon, " ").concat(styles.tooltipIcon)
+    })))) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/isValidElement(outsideIcon) && /*#__PURE__*/React.createElement("div", {
+      className: styles.iconContainer
+    }, outsideIcon), TextInput));
+  }
+}
+UTTextInput.propTypes = {
+  actionDataTestId: string,
+  adornmentInside: bool,
+  autofocus: bool,
+  bigInput: bool,
+  captionLabel: string,
+  classes: objectOf(string),
+  containerClassName: string,
+  dataTestId: string,
+  disabled: bool,
+  field: object,
+  helperTextDataTestId: string,
+  id: string,
+  input: inputPropTypes.isRequired,
+  inputClassName: string,
+  inputObjectKey: string,
+  label: string,
+  labelDataTestId: string,
+  labelRootClassName: string,
+  meta: metaPropTypes,
+  onChangeText: func,
+  PasswordInvisibleIcon: elementType,
+  PasswordVisibleIcon: elementType,
+  placeholder: string,
+  preventEnterSubmit: bool,
+  preventFocus: bool,
+  tippyProps: object,
+  tooltip: string,
+  tooltipContentDataTestId: string,
+  tooltipIconDataTestId: string,
+  type: string,
+  variant: string
+};
+UTTextInput.defaultProps = {
+  adornmentInside: false,
+  autofocus: false,
+  classes: {},
+  meta: {},
+  onChangeText: val => val,
+  PasswordInvisibleIcon: VisibilityOff,
+  PasswordVisibleIcon: Visibility,
+  preventEnterSubmit: false
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTTextInput);

package/dist/esm/components/UTTextInput/versions/V0/styles.module.scss

@@ -0,0 +1,42 @@
+// sass-lint:disable no-vendor-prefixes
+@use '../../../../scss/variables/colors.module.scss' as *;
+
+.iconContainer {
+  align-items: center;
+  display: flex;
+  margin-right: 5px;
+}
+
+.numberType {
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.adornmentInside {
+  position: absolute;
+  right: 0;
+}
+
+.containerWithTooltip {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+
+.tooltipIconContainer {
+  color: $light-blue;
+  margin-left: 8px;
+}
+
+.tooltipIcon {
+  margin-bottom: -4px;
+}
+
+.helperText {
+  margin-top: 4px;
+  text-align: left;
+}

package/dist/esm/components/UTTextInput/versions/V0/theme.js

@@ -0,0 +1,125 @@
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import merge from 'lodash/merge';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      display: getIn(theme, ['UTTextInput', 'container', 'display'], 'flex'),
+      flexShrink: getIn(theme, ['UTTextInput', 'container', 'flexShrink'], '0'),
+      width: getIn(theme, ['UTTextInput', 'container', 'width'], '100%'),
+      margin: getIn(theme, ['UTTextInput', 'container', 'margin'], '0')
+    },
+    bigInput: {
+      fontSize: getIn(theme, ['UTTextInput', 'bigInput', 'fontSize'], '40px'),
+      textAlign: getIn(theme, ['UTTextInput', 'bigInput', 'textAlign'], 'center')
+    },
+    tooltipIcon: {
+      color: getIn(theme, ['UTTextInput', 'tooltipIcon', 'color'], 'currentColor')
+    },
+    labelIcon: {
+      height: getIn(theme, ['UTTextInput', 'inputIcon', 'height'], '12px'),
+      width: getIn(theme, ['UTTextInput', 'inputIcon', 'width'], 'auto'),
+      fill: getIn(theme, ['UTTextInput', 'inputIcon', 'fill'], "".concat(Colors.gray)),
+      padding: getIn(theme, ['UTTextInput', 'inputIcon', 'padding'], '0px 5px 0px 0px')
+    },
+    labelContainer: {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center'
+    }
+  };
+};
+export const retrieveMuiTheme = (theme, muiTheme) => {
+  const mui = {
+    typography: {
+      fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+    },
+    overrides: {
+      MuiOutlinedInput: {
+        input: {
+          fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTTextInput', 'color'])
+        },
+        root: {
+          '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+            border: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(Colors.gray)),
+            borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          },
+          '&$focused $notchedOutline': {
+            border: getIn(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(Colors.primary)),
+            borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          },
+          '&$disabled $notchedOutline': {
+            border: getIn(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(Colors.gray)),
+            borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+          }
+        },
+        notchedOutline: {
+          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
+          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+        }
+      },
+      MuiInput: {
+        input: {
+          border: getIn(theme, ['UTTextInput', 'border']),
+          borderRadius: getIn(theme, ['UTTextInput', 'borderRadius']),
+          fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTTextInput', 'color']),
+          padding: getIn(theme, ['UTTextInput', 'padding'])
+        },
+        underline: {
+          '&:hover:not($disabled):not($focused):not($error):before': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:hover:not($disabled):before': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$disabled:before': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:before': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$focused:after': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&:after': {
+            borderBottom: getIn(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
+          }
+        }
+      },
+      MuiFormLabel: {
+        root: {
+          color: getIn(theme, ['UTTextInput', 'formLabel', 'color']),
+          '&$error': {
+            color: getIn(theme, ['UTTextInput', 'formLabel', 'errorColor'], Colors.gray)
+          },
+          '&$focused': {
+            color: getIn(theme, ['UTTextInput', 'formLabel', 'focusedColor'], Colors.primary),
+            '&$error': {
+              color: theme.Palette.error['05']
+            }
+          },
+          fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+          fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          fontWeight: getIn(theme, ['UTTextInput', 'formLabel', 'fontWeight'])
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: getIn(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
+          color: getIn(theme, ['UTTextInput', 'helperText', 'color'], theme.Palette.error['05'])
+        }
+      }
+    }
+  };
+  return createTheme(merge(muiTheme, mui));
+};

package/dist/esm/components/UTTextInput/versions/V1/README.md

@@ -0,0 +1,89 @@
+# UTTextInput
+
+## Description
+
+`UTTextInput` is a configurable text input component that supports various customization options such as icons, validation messages, and action buttons. This component is based on Material UI and can be adapted for both single-line inputs and multi-line text areas.
+
+## Props
+
+
+| Name                  | Type                                                      | Default | Description                                                                                             |
+| --------------------- | --------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| action                | object                                                    |         | Configuration for the action button that appears at the end of the input.                               |
+| alwaysShowPlaceholder | bool                                                      | false   | Whether the placeholder should always be displayed, even when the input is focused.                     |
+| autocomplete          | string                                                    |         | Indicates the type of values ​​that are expected as a value. Enables the browser to offer suggestions     |
+| blurOnSubmit          | bool                                                      | false   | Whether the input should lose focus after submitting (e.g., after pressing "Enter").                    |
+| classNames            | objectOf(string)                                          |         | Additional classes for customizing the component, independent of Material-UI.                           |
+| dataTestId            | string                                                    |         | Identifier for the input field, useful for testing purposes.                                            |
+| disabled              | bool                                                      | false   | Disables the input field.                                                                               |
+| error                 | string                                                    |         | Error message displayed below the input field.                                                          |
+| helpText              | string                                                    |         | Help text displayed below the input field.                                                              |
+| id                    | string                                                    |         | Unique identifier for the input field.                                                                  |
+| inputRef              | oneOfType([func, object])                                 |         | Reference to the input field to access methods like`focus`, `blur`, or `clear`.                         |
+| inputSize             | string                                                    | 'large' | Size of the input field. One of:`small`, `large`.                                                       |
+| maxLength             | number                                                    |         | Maximum number of characters allowed in the input field.                                                |
+| maxRows               | number                                                    | 1       | Maximum number of rows the text area can display. If greater than 1, the input becomes a text area.     |
+| name                  | string                                                    |         | Name of the field. Native attribute of the html input element.
+| onBlur                | func                                                      |         | Function called when the input field loses focus.                                                       |
+| onChange              | func                                                      |         | Function called when the input field value changes.                                                     |
+| onFocus               | func                                                      |         | Function called when the input field gains focus.                                                       |
+| onKeyDown             | func                                                      |         | Function called when the input field receives keydown actions                                           |
+| placeholder           | string                                                    |         | Placeholder text displayed when the input field is empty.                                               |
+| prefix                | string                                                    |         | Text displayed before the entered value in the input field.                                             |
+| readOnly              | bool                                                      | false   | Makes the input field read-only.                                                                        |
+| required              | bool                                                      | false   | Marks the input field as required.                                                                      |
+| RightIcon             | elementType                                               |         | Icon displayed on the right side of the input field.                                                    |
+| showCharacterCount    | bool                                                      | false   | Whether the character count should be displayed (if`maxLength` is defined).                             |
+| style                 | shape({ container: object, input: object, root: object }) |         | Style object to customize the input field. Can contain`root`, `container`, `input`, or `action` styles. |
+| suffix                | string                                                    |         | Suffix text to be displayed after the entered value in the input field.                                 |
+| title                 | string                                                    |         | Title displayed above the input field.                                                                  |
+| titleVariant          | string                                                    | 'large' | Variant of the title, can be`small` or `large`.                                                         |
+| tooltip               | string                                                    |         | Tooltip text displayed next to the input field.                                                         |
+| type                  | string                                                    | 'text'  | Type of input field (e.g., 'text', 'password').                                                         |
+| validations           | object                                                    |         | Object containing validation rules to be applied to the input field.                                    |
+| value                 | string                                                    | ''      | Current value of the input field.                                                                       |
+
+### action
+
+The `action` object allows configuring the action button that appears inside the input field, such as a clear or submit icon.
+
+
+| Name     | Type        | Description                                        |
+| -------- | ----------- | -------------------------------------------------- |
+| icon     | elementType | Icon to be displayed in the action button.         |
+| onClick  | func        | Function called when the action button is clicked. |
+| disabled | bool        | Disables the action button.                        |
+| text     | string      | Text displayed inside the action button, if any.   |
+
+### titleVariant
+
+The value of `titleVariant` must be one of the following:
+
+- "small"
+- "large"
+
+### inputSize
+
+The value of `inputSize` must be one of the following:
+
+- "small"
+- "large"
+
+### type
+
+The value of `type` must be one of the following:
+
+- "text"
+- "password"
+
+### Right Icon
+
+If a `RightIcon` is provided and an error occurs, the `RightIcon` will be replaced by an error icon.
+
+### Structure of Validations
+
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
+
+### Handling Errors
+
+Errors can be displayed below the text input using either the `error` prop or the `validations` prop.

package/dist/esm/components/UTTextInput/versions/V1/index.js

@@ -0,0 +1,193 @@
+import React, { useMemo } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, elementType, func, instanceOf, number, objectOf, oneOfType, shape, string } from 'prop-types';
+import UTBaseInputField from '../../../UTBaseInputField';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTValidation, { validationDataProptypes } from '../../../UTValidation';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import styles from './styles.module.scss';
+const UTTextInput = _ref => {
+  let {
+    action,
+    actions: titleActions,
+    actionDataTestId,
+    alwaysShowPlaceholder,
+    autocomplete,
+    classNames = {},
+    dataTestId,
+    disabled,
+    error,
+    helpText,
+    helperTextDataTestId,
+    id,
+    inputRef,
+    inputSize,
+    labelDataTestId,
+    LeftIcon,
+    maxLength,
+    maxRows = 1,
+    minRows,
+    name,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    onKeyDown = () => {},
+    placeholder,
+    prefix,
+    readOnly,
+    required,
+    RightIcon,
+    showCharacterCount,
+    suffix,
+    title,
+    titleVariant = 'large',
+    tooltip,
+    tooltipContentDataTestId,
+    tooltipIconDataTestId,
+    type,
+    validationDataTestId,
+    validations,
+    value = null
+  } = _ref;
+  const validationData = useMemo(() => !isEmpty(validations) ? validations : error && formatErrorToValidation(error), [error, validations]);
+  const leftAdornments = useMemo(() => {
+    const adornments = [];
+    if (LeftIcon) adornments.push({
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        Icon: LeftIcon
+      }
+    });
+    if (prefix) adornments.push({
+      name: COMPONENT_KEYS.PREFIX,
+      props: {
+        text: prefix
+      }
+    });
+    return adornments;
+  }, [LeftIcon, prefix]);
+  const rightAdornments = useMemo(() => {
+    const adornments = [];
+    if (suffix) adornments.push({
+      name: COMPONENT_KEYS.SUFFIX,
+      props: {
+        text: suffix
+      }
+    });
+    if (RightIcon || error) adornments.push({
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        Icon: RightIcon,
+        changeOnError: true
+      }
+    });
+    if (action) adornments.push({
+      name: COMPONENT_KEYS.ACTION,
+      props: {
+        action,
+        dataTestId: actionDataTestId
+      }
+    });
+    if (tooltip) adornments.push({
+      name: COMPONENT_KEYS.TOOLTIP,
+      props: {
+        contentDataTestId: tooltipContentDataTestId,
+        dataTestId: tooltipIconDataTestId,
+        tooltip
+      }
+    });
+    return adornments;
+  }, [suffix, RightIcon, error, action, tooltip]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames.container)
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: titleActions,
+    dataTestId: labelDataTestId,
+    readOnly: readOnly,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: alwaysShowPlaceholder,
+    autocomplete: autocomplete,
+    classNames: classNames,
+    dataTestId: dataTestId,
+    disabled: disabled,
+    error: error,
+    id: id,
+    inputSize: inputSize,
+    inputRef: inputRef,
+    leftAdornments: leftAdornments,
+    maxLength: maxLength,
+    maxRows: maxRows,
+    minRows: minRows,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    rightAdornments: rightAdornments,
+    showCharacterCount: showCharacterCount,
+    type: type,
+    value: value
+  }), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.textHelp,
+    colorTheme: "gray",
+    dataTestId: helperTextDataTestId,
+    variant: "small",
+    withMarkdown: true
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: validationDataTestId,
+    validationData: validationData
+  }));
+};
+export const propTypes = {
+  action: elementType,
+  actions: arrayOf(buttonTypes),
+  actionDataTestId: string,
+  alwaysShowPlaceholder: bool,
+  autocomplete: string,
+  classNames: objectOf(string),
+  dataTestId: string,
+  disabled: bool,
+  error: oneOfType([bool, string]),
+  helpText: string,
+  helperTextDataTestId: string,
+  id: string,
+  inputRef: oneOfType([func, shape({
+    current: instanceOf(Element)
+  })]),
+  inputSize: string,
+  labelDataTestId: string,
+  LeftIcon: elementType,
+  maxLength: number,
+  minRows: number,
+  maxRows: number,
+  name: string,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  onKeyDown: func,
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  RightIcon: elementType,
+  showCharacterCount: bool,
+  suffix: string,
+  title: string,
+  titleVariant: string,
+  tooltip: string,
+  tooltipContentDataTestId: string,
+  tooltipIconDataTestId: string,
+  type: string,
+  validationDataTestId: string,
+  validations: validationDataProptypes,
+  value: string
+};
+UTTextInput.propTypes = propTypes;
+export default UTTextInput;