@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,185 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_TextField=_interopRequireDefault(require("@material-ui/core/TextField")),_form=require("@widergy/web-utils/lib/form"),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_formTypes=require("../../../../types/formTypes"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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 _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)}class UTCuit extends _react.PureComponent{constructor(props){super(props),_defineProperty(this,"handleChangeCuit",()=>{const{prefix:prefix,document:document,verificationCode:verificationCode}=this.state;this.props.input.onChange(prefix.concat(document,verificationCode))}),_defineProperty(this,"handleKeyPress",event=>{/[0-9]+/g.test(event.key)||event.preventDefault()}),_defineProperty(this,"handleOnChangePrefix",event=>{const prefix=event.target.value.replace(/^[^2-3]/g,"").slice(0,2);this.setState({prefix:prefix},this.handleChangeCuit)}),_defineProperty(this,"handleOnChangeDocument",event=>{const document=event.target.value.slice(0,8);this.setState({document:document},this.handleChangeCuit)}),_defineProperty(this,"handleOnChangeVerificationCode",event=>{const verificationCode=event.target.value.slice(0,1);this.setState({verificationCode:verificationCode},this.handleChangeCuit)}),_defineProperty(this,"handleSetDocument",value=>{this.setState({document:value.padStart(8,"0")})}),_defineProperty(this,"verificationCodeRef",input=>{this.setState({verificationCodeRef:input})}),_defineProperty(this,"documentRef",input=>{this.setState({documentRef:input})}),_defineProperty(this,"handleFocus",()=>{2===this.state.prefix.length&&8===this.state.document.length?this.state.verificationCodeRef.focus():2===this.state.prefix.length&&this.state.documentRef.focus()}),this.state={prefix:"",verificationCode:"",document:"",verificationCodeRef:null,documentRef:null}}componentDidUpdate(){0===this.state.prefix.length&&0===this.state.document.length&&0===this.state.verificationCode.length&&this.props.input&&this.props.input.value&&this.props.field.configuration.disable_document&&this.handleSetDocument(this.props.input.value)}render(){const{prefix:prefix,document:document,verificationCode:verificationCode}=this.state,{documentDataTestId:documentDataTestId,prefixDataTestId:prefixDataTestId,verificationCodeDataTestId:verificationCodeDataTestId,input:{name:name}}=this.props;return this.handleFocus(),_react.default.createElement("div",{className:_stylesModule.default.container},_react.default.createElement("div",{className:_stylesModule.default.fieldContainer},_react.default.createElement(_TextField.default,{autoComplete:"off",autoFocus:this.props.field.configuration.auto_focus,className:_stylesModule.default.fieldCuit,error:(0,_form.shouldShowErrors)(this.props.meta)?this.props.meta.error:"",fullWidth:!0,InputLabelProps:{shrink:0!==this.props.input.value},InputProps:{type:"input",inputProps:{"data-testid":prefixDataTestId,"data-keyboard":name?"prefix-".concat(name):null}},label:this.props.field.label,margin:"none",name:"prefix",onChange:this.handleOnChangePrefix,onKeyPress:this.handleKeyPress,placeholder:"XX",value:prefix}),_react.default.createElement(_TextField.default,{autoComplete:"off",className:_stylesModule.default.fieldDocument,disabled:this.props.field.configuration.disable_document,error:(0,_form.shouldShowErrors)(this.props.meta)?this.props.meta.error:"",fullWidth:!0,InputProps:{type:"text",inputProps:{"data-testid":documentDataTestId,"data-keyboard":name?"document-".concat(name):null}},inputRef:this.documentRef,margin:"none",name:"document",onChange:this.handleOnChangeDocument,onKeyPress:this.handleKeyPress,placeholder:"XXXXXXXX",value:document}),_react.default.createElement(_TextField.default,{autoComplete:"off",className:_stylesModule.default.fieldCuit,error:(0,_form.shouldShowErrors)(this.props.meta)?this.props.meta.error:"",fullWidth:!0,inputRef:this.verificationCodeRef,InputProps:{type:"input",inputProps:{"data-testid":verificationCodeDataTestId,"data-keyboard":name?"verificationCode-".concat(name):null}},margin:"none",name:"verificationCode",onChange:this.handleOnChangeVerificationCode,onKeyPress:this.handleKeyPress,placeholder:"X",value:verificationCode})),_react.default.createElement(_UTLabel.default,{variant:"small",colorTheme:"error"},(0,_form.shouldShowErrors)(this.props.meta)?this.props.meta.error:""))}}UTCuit.propTypes={documentDataTestId:_propTypes.string,field:_formTypes.fieldType,input:_formTypes.inputPropTypes,meta:_formTypes.metaPropTypes,prefixDataTestId:_propTypes.string,verificationCodeDataTestId:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(null,_theme.retrieveMuiTheme)(UTCuit);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _form = require("@widergy/web-utils/lib/form");
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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); }
+class UTCuit extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleChangeCuit", () => {
+      const {
+        prefix,
+        document,
+        verificationCode
+      } = this.state;
+      this.props.input.onChange(prefix.concat(document, verificationCode));
+    });
+    _defineProperty(this, "handleKeyPress", event => {
+      const regexp = /[0-9]+/g;
+      if (!regexp.test(event.key)) {
+        event.preventDefault();
+      }
+    });
+    _defineProperty(this, "handleOnChangePrefix", event => {
+      const normalizePrefix = event.target.value.replace(/^[^2-3]/g, '');
+      const prefix = normalizePrefix.slice(0, 2);
+      this.setState({
+        prefix
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleOnChangeDocument", event => {
+      const document = event.target.value.slice(0, 8);
+      this.setState({
+        document
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleOnChangeVerificationCode", event => {
+      const verificationCode = event.target.value.slice(0, 1);
+      this.setState({
+        verificationCode
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleSetDocument", value => {
+      this.setState({
+        document: value.padStart(8, '0')
+      });
+    });
+    _defineProperty(this, "verificationCodeRef", input => {
+      this.setState({
+        verificationCodeRef: input
+      });
+    });
+    _defineProperty(this, "documentRef", input => {
+      this.setState({
+        documentRef: input
+      });
+    });
+    _defineProperty(this, "handleFocus", () => {
+      if (this.state.prefix.length === 2 && this.state.document.length === 8) {
+        this.state.verificationCodeRef.focus();
+      } else if (this.state.prefix.length === 2) {
+        this.state.documentRef.focus();
+      }
+    });
+    this.state = {
+      prefix: '',
+      verificationCode: '',
+      document: '',
+      verificationCodeRef: null,
+      documentRef: null
+    };
+  }
+  componentDidUpdate() {
+    if (this.state.prefix.length === 0 && this.state.document.length === 0 && this.state.verificationCode.length === 0 && this.props.input && this.props.input.value && this.props.field.configuration.disable_document) this.handleSetDocument(this.props.input.value);
+  }
+  render() {
+    const {
+      prefix,
+      document,
+      verificationCode
+    } = this.state;
+    const {
+      documentDataTestId,
+      prefixDataTestId,
+      verificationCodeDataTestId,
+      input: {
+        name
+      }
+    } = this.props;
+    this.handleFocus();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.container
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.fieldContainer
+    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      autoFocus: this.props.field.configuration.auto_focus,
+      className: _stylesModule.default.fieldCuit,
+      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      InputLabelProps: {
+        shrink: this.props.input.value !== 0
+      },
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': prefixDataTestId,
+          'data-keyboard': name ? "prefix-".concat(name) : null
+        }
+      },
+      label: this.props.field.label,
+      margin: "none",
+      name: "prefix",
+      onChange: this.handleOnChangePrefix,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "XX",
+      value: prefix
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      className: _stylesModule.default.fieldDocument,
+      disabled: this.props.field.configuration.disable_document,
+      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      InputProps: {
+        type: 'text',
+        inputProps: {
+          'data-testid': documentDataTestId,
+          'data-keyboard': name ? "document-".concat(name) : null
+        }
+      },
+      inputRef: this.documentRef,
+      margin: "none",
+      name: "document",
+      onChange: this.handleOnChangeDocument,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "XXXXXXXX",
+      value: document
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      className: _stylesModule.default.fieldCuit,
+      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      inputRef: this.verificationCodeRef,
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': verificationCodeDataTestId,
+          'data-keyboard': name ? "verificationCode-".concat(name) : null
+        }
+      },
+      margin: "none",
+      name: "verificationCode",
+      onChange: this.handleOnChangeVerificationCode,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "X",
+      value: verificationCode
+    })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "small",
+      colorTheme: "error"
+    }, (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : ''));
+  }
+}
+UTCuit.propTypes = {
+  documentDataTestId: _propTypes.string,
+  field: _formTypes.fieldType,
+  input: _formTypes.inputPropTypes,
+  meta: _formTypes.metaPropTypes,
+  prefixDataTestId: _propTypes.string,
+  verificationCodeDataTestId: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(null, _theme.retrieveMuiTheme)(UTCuit);

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

@@ -1 +1,67 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveMuiTheme=void 0;var _seamlessImmutable=require("seamless-immutable"),_styles=require("@material-ui/core/styles"),_colorsModule=_interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const retrieveMuiTheme=theme=>(0,_styles.createTheme)({typography:{fontFamily:(0,_seamlessImmutable.getIn)(theme,["Fonts","fontFamily"])},overrides:{MuiInput:{input:{fontSize:(0,_seamlessImmutable.getIn)(theme,["UTTextInput","fontSize"],(0,_seamlessImmutable.getIn)(theme,["Fonts","medium"],14)),color:(0,_seamlessImmutable.getIn)(theme,["UTTextInput","color"])},underline:{"&:hover:not($disabled):not($focused):not($error):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))}},MuiFormHelperText:{root:{fontSize:(0,_seamlessImmutable.getIn)(theme,["UTTextInput","helperText","fontSize"],12),color:(0,_seamlessImmutable.getIn)(theme,["UTTextInput","helperText","color"],theme.Palette.error["05"])}}}});exports.retrieveMuiTheme=retrieveMuiTheme;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveMuiTheme = void 0;
+var _seamlessImmutable = require("seamless-immutable");
+var _styles = require("@material-ui/core/styles");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveMuiTheme = theme => (0, _styles.createTheme)({
+  typography: {
+    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiInput: {
+      input: {
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'color'])
+      },
+      underline: {
+        '&:hover:not($disabled):not($focused):not($error):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))
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'color'], theme.Palette.error['05'])
+      }
+    }
+  }
+});
+exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTCuit/versions/V1/index.js

@@ -1 +1,163 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_form=require("@widergy/web-utils/lib/form"),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTextInput=_interopRequireDefault(require("../../../UTTextInput")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_formTypes=require("../../../../types/formTypes"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}const UTCuit=_ref=>{var _field$configuration;let{documentDataTestId:documentDataTestId,field:field,input:input,meta:meta,prefixDataTestId:prefixDataTestId,verificationCodeDataTestId:verificationCodeDataTestId,dni:dni,disableDocument:disableDocument=!1}=_ref;const[prefix,setPrefix]=(0,_react.useState)(""),[verificationCode,setVerificationCode]=(0,_react.useState)(""),[document,setDocument]=(0,_react.useState)(""),verificationCodeRef=(0,_react.useRef)(null),documentRef=(0,_react.useRef)(null),getDocumentValue=(0,_react.useCallback)(()=>{const rawDocumentValue=disableDocument&&dni?dni:document;return rawDocumentValue?rawDocumentValue.padStart(8,"0"):""},[disableDocument,dni,document]),handleChangeCuit=(0,_react.useCallback)(()=>{const documentValue=getDocumentValue(),fullCuit=prefix.concat(documentValue,verificationCode);input.onChange(fullCuit)},[prefix,document,verificationCode,input,disableDocument,dni]);(0,_react.useEffect)(()=>{disableDocument&&dni&&!document&&setDocument(dni.padStart(8,"0"))},[disableDocument,dni,document]);const handleOnChangePrefix=(0,_react.useCallback)(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");0===numericValue.length?setPrefix(""):"2"===numericValue[0]?setPrefix(numericValue):setPrefix("")},[]),handleOnChangeDocument=(0,_react.useCallback)(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");setDocument(numericValue)},[]),handleOnChangeVerificationCode=(0,_react.useCallback)(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");setVerificationCode(numericValue)},[]),handleFocus=(0,_react.useCallback)(()=>{const documentValue=getDocumentValue();var _verificationCodeRef$;if(2===prefix.length&&8===documentValue.length)null===(_verificationCodeRef$=verificationCodeRef.current)||void 0===_verificationCodeRef$||_verificationCodeRef$.focus();else if(2===prefix.length&&!disableDocument){var _documentRef$current;null===(_documentRef$current=documentRef.current)||void 0===_documentRef$current||_documentRef$current.focus()}},[prefix,document,disableDocument,dni]);return(0,_react.useEffect)(()=>{handleChangeCuit()},[handleChangeCuit]),(0,_react.useEffect)(()=>{handleFocus()},[handleFocus]),_react.default.createElement("div",{className:_stylesModule.default.container},(null==field?void 0:field.label)&&_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.label,variant:"medium"},null==field?void 0:field.label),_react.default.createElement("div",{className:_stylesModule.default.fieldContainer},_react.default.createElement("div",{className:_stylesModule.default.fieldCuit},_react.default.createElement(_UTTextInput.default,{version:"V1",autoComplete:"off",autofocus:(null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.auto_focus)||!1,dataTestId:prefixDataTestId,alwaysShowPlaceholder:!0,field:field,input:{name:"prefix"},maxLength:2,meta:meta,onChange:handleOnChangePrefix,placeholder:"XX",type:"text",value:prefix||""})),_react.default.createElement("div",{className:_stylesModule.default.fieldDocument},_react.default.createElement(_UTTextInput.default,{version:"V1",autoComplete:"off",dataTestId:documentDataTestId,alwaysShowPlaceholder:!dni,disabled:disableDocument&&dni,field:field,value:dni,input:{value:disableDocument&&dni?dni:document,onChange:disableDocument&&dni?()=>{}:handleOnChangeDocument,name:"document"},maxLength:8,inputRef:disableDocument?null:documentRef,meta:meta,placeholder:"XXXXXXXX",type:"numeric"})),_react.default.createElement("div",{className:_stylesModule.default.fieldCuit},_react.default.createElement(_UTTextInput.default,{version:"V1",autoComplete:"off",dataTestId:verificationCodeDataTestId,alwaysShowPlaceholder:!0,field:field,input:{value:verificationCode||"",name:"verificationCode"},onChange:handleOnChangeVerificationCode,maxLength:1,inputRef:verificationCodeRef,meta:meta,placeholder:"X",type:"text"}))),_react.default.createElement(_UTLabel.default,{variant:"small",colorTheme:"error"},(0,_form.shouldShowErrors)(meta)?meta.error:""))};UTCuit.propTypes={documentDataTestId:_propTypes.string,field:_formTypes.fieldType,input:_formTypes.inputPropTypes,meta:_formTypes.metaPropTypes,prefixDataTestId:_propTypes.string,verificationCodeDataTestId:_propTypes.string,dni:_propTypes.string,disableDocument:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(null,null)(UTCuit);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@widergy/web-utils/lib/form");
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTCuit = _ref => {
+  var _field$configuration;
+  let {
+    documentDataTestId,
+    field,
+    input,
+    meta,
+    prefixDataTestId,
+    verificationCodeDataTestId,
+    dni,
+    disableDocument = false
+  } = _ref;
+  const [prefix, setPrefix] = (0, _react.useState)('');
+  const [verificationCode, setVerificationCode] = (0, _react.useState)('');
+  const [document, setDocument] = (0, _react.useState)('');
+  const verificationCodeRef = (0, _react.useRef)(null);
+  const documentRef = (0, _react.useRef)(null);
+  const getDocumentValue = (0, _react.useCallback)(() => {
+    const rawDocumentValue = disableDocument && dni ? dni : document;
+    return rawDocumentValue ? rawDocumentValue.padStart(8, '0') : '';
+  }, [disableDocument, dni, document]);
+  const handleChangeCuit = (0, _react.useCallback)(() => {
+    const documentValue = getDocumentValue();
+    const fullCuit = prefix.concat(documentValue, verificationCode);
+    input.onChange(fullCuit);
+  }, [prefix, document, verificationCode, input, disableDocument, dni]);
+  (0, _react.useEffect)(() => {
+    if (disableDocument && dni && !document) {
+      setDocument(dni.padStart(8, '0'));
+    }
+  }, [disableDocument, dni, document]);
+  const handleOnChangePrefix = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    if (numericValue.length === 0) {
+      setPrefix('');
+    } else if (numericValue[0] === '2') {
+      setPrefix(numericValue);
+    } else {
+      setPrefix('');
+    }
+  }, []);
+  const handleOnChangeDocument = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setDocument(numericValue);
+  }, []);
+  const handleOnChangeVerificationCode = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setVerificationCode(numericValue);
+  }, []);
+  const handleFocus = (0, _react.useCallback)(() => {
+    const documentValue = getDocumentValue();
+    if (prefix.length === 2 && documentValue.length === 8) {
+      var _verificationCodeRef$;
+      (_verificationCodeRef$ = verificationCodeRef.current) === null || _verificationCodeRef$ === void 0 || _verificationCodeRef$.focus();
+    } else if (prefix.length === 2 && !disableDocument) {
+      var _documentRef$current;
+      (_documentRef$current = documentRef.current) === null || _documentRef$current === void 0 || _documentRef$current.focus();
+    }
+  }, [prefix, document, disableDocument, dni]);
+  (0, _react.useEffect)(() => {
+    handleChangeCuit();
+  }, [handleChangeCuit]);
+  (0, _react.useEffect)(() => {
+    handleFocus();
+  }, [handleFocus]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, (field === null || field === void 0 ? void 0 : field.label) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.label,
+    variant: "medium"
+  }, field === null || field === void 0 ? void 0 : field.label), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldCuit
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    autofocus: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.auto_focus) || false,
+    dataTestId: prefixDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      name: 'prefix'
+    },
+    maxLength: 2,
+    meta: meta,
+    onChange: handleOnChangePrefix,
+    placeholder: "XX",
+    type: "text",
+    value: prefix || ''
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldDocument
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: documentDataTestId,
+    alwaysShowPlaceholder: !dni,
+    disabled: disableDocument && dni,
+    field: field,
+    value: dni,
+    input: {
+      value: disableDocument && dni ? dni : document,
+      onChange: disableDocument && dni ? () => {} : handleOnChangeDocument,
+      name: 'document'
+    },
+    maxLength: 8,
+    inputRef: !disableDocument ? documentRef : null,
+    meta: meta,
+    placeholder: "XXXXXXXX",
+    type: "numeric"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldCuit
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: verificationCodeDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      value: verificationCode || '',
+      name: 'verificationCode'
+    },
+    onChange: handleOnChangeVerificationCode,
+    maxLength: 1,
+    inputRef: verificationCodeRef,
+    meta: meta,
+    placeholder: "X",
+    type: "text"
+  }))), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: "error"
+  }, (0, _form.shouldShowErrors)(meta) ? meta.error : ''));
+};
+UTCuit.propTypes = {
+  documentDataTestId: _propTypes.string,
+  field: _formTypes.fieldType,
+  input: _formTypes.inputPropTypes,
+  meta: _formTypes.metaPropTypes,
+  prefixDataTestId: _propTypes.string,
+  verificationCodeDataTestId: _propTypes.string,
+  dni: _propTypes.string,
+  disableDocument: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(null, null)(UTCuit);

package/dist/components/UTDataCategory/README.md

@@ -0,0 +1,109 @@
+# UTDataCategory
+
+A collapsible container component that displays a list of data elements with an optional title and collapse functionality.
+
+## Props
+
+| Name          | Type   | Default | Description                                                                        |
+| ------------- | ------ | ------- | ---------------------------------------------------------------------------------- |
+| area          | bool   | `false` | When true, applies background color and padding to create an area-like appearance. |
+| areaProps     | object |         | Additional props for customizing the area styling (colorTheme, shade).             |
+| classes       | object |         | Theme-based styling classes.                                                       |
+| classNames    | object |         | Custom CSS class names for styling the component.                                  |
+| collapsable   | bool   | `true`  | Specifies if the data list is collapsible.                                         |
+| dataTestId    | string |         | Test ID for testing purposes.                                                      |
+| description   | string |         | Description text displayed below the title.                                        |
+| descriptionProps | object |      | Additional props for customizing the description UTLabel component.               |
+| elements      | array  | `[]`    | Array of objects to be rendered as UTDataElement components.                       |
+| elementsProps | object | `{}`    | Additional props that apply to all UTDataElement components.                       |
+| expanded      | bool   | `false` | Controls the initial expanded state of the component.                              |
+| style         | object |         | Inline styles for the component.                                                   |
+| title         | string |         | Title text displayed in the component header.                                      |
+| titleProps    | object |         | Additional props for customizing the title UTLabel component.                      |
+
+## Behavior
+
+- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`. Clicking anywhere on the header (title, description) toggles it; the chevron next to the title is only a visual indicator. Clicks on `action` don't affect the toggle.
+- **Initial State**: The component starts collapsed by default unless `expanded` is `true`
+- **Area Styling**: When `area` is `true`, the component gets background color and padding
+- **Smooth Transitions**: Collapse/expand animations use CSS transitions for smooth UX
+
+## Elements Array
+
+Each element in the `elements` array should be an object that will be passed as props to a `UTDataElement` component. Common props include:
+
+- `title`: The main text label
+- `Data`: The data content (can be string, component, or JSX)
+- `Icon`: Icon name or component
+- `badge`: Badge content
+- `action`: Action button configuration
+- `children`: Collapsible children content
+- `orientation`: 'horizontal' or 'vertical' layout
+- `paddingVertical`: 'small' or 'medium' padding
+- `spacing`: 'small' or 'medium' spacing
+
+## Examples
+
+### Basic Usage
+
+```jsx
+import UTDataCategory from '@energy/ui/UTDataCategory';
+
+const dataElements = [
+  {
+    title: 'Name',
+    Data: 'John Doe',
+    Icon: 'IconUser'
+  },
+  {
+    title: 'Email',
+    Data: 'john.doe@example.com',
+    Icon: 'IconMail'
+  }
+];
+
+<UTDataCategory title="User Information" elements={dataElements} />;
+```
+
+### With Area Styling
+
+```jsx
+<UTDataCategory
+  title="Account Details"
+  elements={dataElements}
+  area={true}
+  areaProps={{
+    colorTheme: 'light',
+    shade: '03'
+  }}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<UTDataCategory
+  title="Custom Styled"
+  elements={dataElements}
+  classNames={{
+    container: 'custom-container',
+    element: 'custom-element'
+  }}
+  titleProps={{
+    weight: 'bold',
+    colorTheme: 'primary'
+  }}
+/>
+```
+
+### Non-collapsible
+
+```jsx
+<UTDataCategory title="Always Visible" elements={dataElements} collapsable={false} />
+```
+
+### Initially Expanded
+
+```jsx
+<UTDataCategory title="Pre-expanded" elements={dataElements} expanded={true} />
+```