@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,233 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _HelpOutline=_interopRequireDefault(require("@material-ui/icons/HelpOutline")),_InputAdornment=_interopRequireDefault(require("@material-ui/core/InputAdornment")),_react=_interopRequireWildcard(require("react")),_TextField=_interopRequireDefault(require("@material-ui/core/TextField")),_Visibility=_interopRequireDefault(require("@material-ui/icons/Visibility")),_VisibilityOff=_interopRequireDefault(require("@material-ui/icons/VisibilityOff")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_UTButton=_interopRequireDefault(require("../../../UTButton")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_formTypes=require("../../../../types/formTypes"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants"),_theme=require("./theme");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}const preventDefault=event=>{"Enter"===event.key&&event.preventDefault()};class UTTextInput extends _react.PureComponent{constructor(props){super(props),_defineProperty(this,"handleClickShowPassword",()=>{this.setState(prevState=>({visible:!prevState.visible}))}),this.state={visible:!1}}render(){const{actionDataTestId:actionDataTestId,adornmentInside:adornmentInside,autofocus:autofocus,bigInput:bigInput,captionLabel:captionLabel,classes:classes,containerClassName:containerClassName,dataTestId:dataTestId,disabled:disabled,field:field,helperTextDataTestId:helperTextDataTestId,id:id,input:input,inputClassName:inputClassName,inputObjectKey:inputObjectKey,label:label,labelDataTestId:labelDataTestId,labelRootClassName:labelRootClassName,meta:meta,onChangeText:onChangeText,placeholder:placeholder,PasswordInvisibleIcon:PasswordInvisibleIcon,PasswordVisibleIcon:PasswordVisibleIcon,preventEnterSubmit:preventEnterSubmit,preventFocus:preventFocus,tippyProps:tippyProps,tooltip:tooltip,tooltipContentDataTestId:tooltipContentDataTestId,tooltipIconDataTestId:tooltipIconDataTestId,type:type,variant:variant,...others}=this.props,{icon:Icon,outsideIcon:outsideIcon,adornment:adornment,helperText:helperText}=(null==field?void 0:field.configuration)||{},{base:base,selectedOptionsIds:selectedOptionsIds,retrieveStyle:rs,retrieveMuiTheme:rmt,Component:Component,muiTheme:muiTheme,...textFieldPropsToForward}=others,endAction=type===_constants.INPUT_TYPES.PASSWORD?_react.default.createElement(_UTButton.default,{dataTestId:actionDataTestId,Icon:this.state.visible?PasswordVisibleIcon:PasswordInvisibleIcon,onClick:this.handleClickShowPassword,variant:"text"}):adornment,value=inputObjectKey?input.value[inputObjectKey]:input.value,errorMessage=(0,_form.shouldShowErrors)(meta)&&meta.error||captionLabel||"",fieldId=id||null!=field&&field.id?"".concat(id||field.id):void 0,TextInput=_react.default.createElement(_TextField.default,_extends({id:fieldId,"data-testid":dataTestId,placeholder:placeholder,variant:variant,label:Icon?_react.default.createElement("div",{className:classes.labelContainer},_react.default.createElement(Icon,{className:classes.labelIcon}),_react.default.createElement("div",null,label)):label,onKeyPress:preventEnterSubmit?preventDefault:void 0,error:(0,_form.shouldShowErrors)(meta),FormHelperTextProps:{component:"div"},helperText:errorMessage||helperText?_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.helperText,colorTheme:errorMessage?"error":"gray",dataTestId:helperTextDataTestId,variant:"small",withMarkdown:!0},errorMessage||helperText):void 0,disabled:disabled,onChange:event=>{var _event$target$value,_event$target;preventFocus&&event.preventDefault(),input.onChange(onChangeText(null!==(_event$target$value=null==event||null===(_event$target=event.target)||void 0===_event$target?void 0:_event$target.value)&&void 0!==_event$target$value?_event$target$value:event))},onClick:event=>{preventFocus&&(event.preventDefault(),event.target.blur())},value:value,fullWidth:!0,autoFocus:autofocus,margin:"none",autoComplete:"off",InputProps:{id:fieldId,inputProps:{"data-testid":dataTestId,"data-keyboard":(null==input?void 0:input.name)||null},endAdornment:endAction&&_react.default.createElement(_InputAdornment.default,{position:"end",className:"".concat(adornmentInside&&_stylesModule.default.adornmentInside)},endAction),type:type===_constants.INPUT_TYPES.PASSWORD?this.state.visible?_constants.INPUT_TYPES.TEXT:_constants.INPUT_TYPES.PASSWORD:type||_constants.INPUT_TYPES.TEXT,classes:{input:"\n              ".concat(bigInput&&classes.bigInput,"\n              ").concat(type===_constants.INPUT_TYPES.NUMBER&&_stylesModule.default.numberType,"\n              ").concat(inputClassName,"\n            ")}},InputLabelProps:{classes:{root:labelRootClassName},htmlFor:fieldId,"data-testid":labelDataTestId}},textFieldPropsToForward));return _react.default.createElement("div",{className:"".concat(classes.container," ").concat(containerClassName," ").concat(tooltip&&_stylesModule.default.containerWithTooltip)},tooltip?_react.default.createElement(_react.Fragment,null,TextInput,_react.default.createElement(_UTTooltip.default,{content:tooltip,dataTestId:tooltipContentDataTestId,tippyProps:tippyProps},_react.default.createElement("span",{className:_stylesModule.default.tooltipIconContainer,"data-testid":tooltipIconDataTestId},_react.default.createElement(_HelpOutline.default,{className:"".concat(classes.tooltipIcon," ").concat(_stylesModule.default.tooltipIcon)})))):_react.default.createElement(_react.Fragment,null,(0,_react.isValidElement)(outsideIcon)&&_react.default.createElement("div",{className:_stylesModule.default.iconContainer},outsideIcon),TextInput))}}UTTextInput.propTypes={actionDataTestId:_propTypes.string,adornmentInside:_propTypes.bool,autofocus:_propTypes.bool,bigInput:_propTypes.bool,captionLabel:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),containerClassName:_propTypes.string,dataTestId:_propTypes.string,disabled:_propTypes.bool,field:_propTypes.object,helperTextDataTestId:_propTypes.string,id:_propTypes.string,input:_formTypes.inputPropTypes.isRequired,inputClassName:_propTypes.string,inputObjectKey:_propTypes.string,label:_propTypes.string,labelDataTestId:_propTypes.string,labelRootClassName:_propTypes.string,meta:_formTypes.metaPropTypes,onChangeText:_propTypes.func,PasswordInvisibleIcon:_propTypes.elementType,PasswordVisibleIcon:_propTypes.elementType,placeholder:_propTypes.string,preventEnterSubmit:_propTypes.bool,preventFocus:_propTypes.bool,tippyProps:_propTypes.object,tooltip:_propTypes.string,tooltipContentDataTestId:_propTypes.string,tooltipIconDataTestId:_propTypes.string,type:_propTypes.string,variant:_propTypes.string},UTTextInput.defaultProps={adornmentInside:!1,autofocus:!1,classes:{},meta:{},onChangeText:val=>val,PasswordInvisibleIcon:_VisibilityOff.default,PasswordVisibleIcon:_Visibility.default,preventEnterSubmit:!1};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle,_theme.retrieveMuiTheme)(UTTextInput);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
+var _propTypes = require("prop-types");
+var _form = require("@widergy/web-utils/lib/form");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+var _theme = require("./theme");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const preventDefault = event => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
+};
+class UTTextInput extends _react.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 === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      dataTestId: actionDataTestId,
+      Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
+      onClick: this.handleClickShowPassword,
+      variant: "text"
+    }) : adornment;
+    const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
+    const errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
+    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
+    const TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+      id: fieldId,
+      "data-testid": dataTestId,
+      placeholder: placeholder,
+      variant: variant,
+      label: Icon ? /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.labelContainer
+      }, /*#__PURE__*/_react.default.createElement(Icon, {
+        className: classes.labelIcon
+      }), /*#__PURE__*/_react.default.createElement("div", null, label)) : label,
+      onKeyPress: preventEnterSubmit ? preventDefault : undefined,
+      error: (0, _form.shouldShowErrors)(meta),
+      FormHelperTextProps: {
+        component: 'div'
+      },
+      helperText: errorMessage || helperText ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        className: _stylesModule.default.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.default.createElement(_InputAdornment.default, {
+          position: "end",
+          className: "".concat(adornmentInside && _stylesModule.default.adornmentInside)
+        }, endAction),
+        type: type === _constants.INPUT_TYPES.PASSWORD ? !this.state.visible ? _constants.INPUT_TYPES.PASSWORD : _constants.INPUT_TYPES.TEXT : type || _constants.INPUT_TYPES.TEXT,
+        classes: {
+          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === _constants.INPUT_TYPES.NUMBER && _stylesModule.default.numberType, "\n              ").concat(inputClassName, "\n            ")
+        }
+      },
+      InputLabelProps: {
+        classes: {
+          root: labelRootClassName
+        },
+        htmlFor: fieldId,
+        'data-testid': labelDataTestId
+      }
+    }, textFieldPropsToForward));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && _stylesModule.default.containerWithTooltip)
+    }, tooltip ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, TextInput, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      content: tooltip,
+      dataTestId: tooltipContentDataTestId,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: _stylesModule.default.tooltipIconContainer,
+      "data-testid": tooltipIconDataTestId
+    }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+      className: "".concat(classes.tooltipIcon, " ").concat(_stylesModule.default.tooltipIcon)
+    })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/(0, _react.isValidElement)(outsideIcon) && /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.iconContainer
+    }, outsideIcon), TextInput));
+  }
+}
+UTTextInput.propTypes = {
+  actionDataTestId: _propTypes.string,
+  adornmentInside: _propTypes.bool,
+  autofocus: _propTypes.bool,
+  bigInput: _propTypes.bool,
+  captionLabel: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  containerClassName: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  field: _propTypes.object,
+  helperTextDataTestId: _propTypes.string,
+  id: _propTypes.string,
+  input: _formTypes.inputPropTypes.isRequired,
+  inputClassName: _propTypes.string,
+  inputObjectKey: _propTypes.string,
+  label: _propTypes.string,
+  labelDataTestId: _propTypes.string,
+  labelRootClassName: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
+  onChangeText: _propTypes.func,
+  PasswordInvisibleIcon: _propTypes.elementType,
+  PasswordVisibleIcon: _propTypes.elementType,
+  placeholder: _propTypes.string,
+  preventEnterSubmit: _propTypes.bool,
+  preventFocus: _propTypes.bool,
+  tippyProps: _propTypes.object,
+  tooltip: _propTypes.string,
+  tooltipContentDataTestId: _propTypes.string,
+  tooltipIconDataTestId: _propTypes.string,
+  type: _propTypes.string,
+  variant: _propTypes.string
+};
+UTTextInput.defaultProps = {
+  adornmentInside: false,
+  autofocus: false,
+  classes: {},
+  meta: {},
+  onChangeText: val => val,
+  PasswordInvisibleIcon: _VisibilityOff.default,
+  PasswordVisibleIcon: _Visibility.default,
+  preventEnterSubmit: false
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTTextInput);

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

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

package/dist/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.