@arquimedes.co/eureka-forms 2.0.18 → 2.0.19-test

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.d.ts

@@ -1,13 +1,5 @@
 /// <reference types="react" />
-import { FieldError } from 'react-hook-form';
 import { SmartSelectStepProps } from '../SmartSelectStep';
 import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-export declare function SmartSelect<StepType extends GSmartSelect>({ icon, step, value, error, onBlur, editable, onChange, inputRef, getOptions, calcDepError, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, renderNestedSteps, }: SmartSelectStepProps<StepType> & {
-    error: FieldError | undefined;
-    onChange: any;
-    onBlur: (event: any) => void;
-    value: any;
-    inputRef: any;
-}): JSX.Element;
-declare function SmartSelectStep(props: SmartSelectStepProps): JSX.Element;
+declare function SmartSelectStep<StepType extends GSmartSelect>({ icon, step, editable, getOptions, calcDepError, defaultValue, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, renderNestedSteps, }: SmartSelectStepProps<StepType>): JSX.Element;
 export default SmartSelectStep;

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -45,45 +45,42 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './MaterialSmartSelectStep.module.css';
-import { useController, useFormContext } from 'react-hook-form';
-import { calcStepWidth } from '../../StepFunctions';
+import { useFormContext } from 'react-hook-form';
 import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppDispatch, useAppSelector, } from '../../../hooks';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
 import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
-import { selectDependencies, useStepDependency } from '../../StepHooks';
-export function SmartSelect(_a) {
+import { selectDependencies, useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function SmartSelectStep(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h;
-    var icon = _a.icon, step = _a.step, value = _a.value, error = _a.error, onBlur = _a.onBlur, editable = _a.editable, onChange = _a.onChange, inputRef = _a.inputRef, getOptions = _a.getOptions, calcDepError = _a.calcDepError, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, renderNestedSteps = _a.renderNestedSteps;
-    var _j = useAppSelector(function (state) { return state.global; }), postview = _j.postview, formStyle = _j.formStyle, idOrganization = _j.idOrganization;
+    var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, renderNestedSteps = _a.renderNestedSteps;
+    var _j = useFormStep(step, {
+        sizeChange: true,
+        defaultValue: defaultValue,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    }), ref = _j.ref, value = _j.value, error = _j.error, field = _j.field, handleChange = _j.onChange;
+    var onChange = useCallback(function (value) {
+        return handleChange(valueOverwrite ? valueOverwrite(value) : value);
+    }, [handleChange, valueOverwrite]);
+    var _k = useAppSelector(function (state) { return state.global; }), postview = _k.postview, formStyle = _k.formStyle, idOrganization = _k.idOrganization;
     var form = useContext(FormContext);
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _k = useState(), options = _k[0], setOptions = _k[1];
-    var _l = useState(false), loading = _l[0], setLoading = _l[1];
-    var _m = useState(true), firstTime = _m[0], setFirstTime = _m[1];
-    var _o = useState(false), touched = _o[0], setTouched = _o[1];
+    var _l = useState(), options = _l[0], setOptions = _l[1];
+    var _m = useState(false), loading = _m[0], setLoading = _m[1];
+    var _o = useState(true), firstTime = _o[0], setFirstTime = _o[1];
+    var _p = useState(false), touched = _p[0], setTouched = _p[1];
     var dispatch = useAppDispatch();
     var dependencyStore = useAppSelector(function (state) { return state.site.dependencies; });
-    var _p = useAppSelector(function (state) {
+    var _q = useAppSelector(function (state) {
         return selectDependencies(state, step, form);
-    }), emptyDep = _p.emptyDep, invalids = _p.invalids;
-    var _q = useFormContext(), getValues = _q.getValues, setFocus = _q.setFocus;
+    }), emptyDep = _q.emptyDep, invalids = _q.invalids;
+    var _r = useFormContext(), getValues = _r.getValues, setFocus = _r.setFocus;
     var isEmpty = useAppSelector(function (state) { var _a; return (_a = state.site.dependencies[step.id]) === null || _a === void 0 ? void 0 : _a.empty; });
     var disabled = emptyDep;
     useEffect(function () {
@@ -118,7 +115,7 @@ export function SmartSelect(_a) {
                                 return getValueString(option) === getValueString(value);
                             });
                             if (!firstTime)
-                                onChange(newValue);
+                                onChange(newValue !== null && newValue !== void 0 ? newValue : null);
                         }
                         else if (!firstTime)
                             onChange(null);
@@ -174,9 +171,6 @@ export function SmartSelect(_a) {
         if (!touched)
             setTouched(true);
     }, [options, disabled, postview, editable, invalids, touched]);
-    var handleUpdate = useCallback(function (value) {
-        valueOverwrite ? onChange(valueOverwrite(value)) : onChange(value);
-    }, [valueOverwrite, onChange]);
     var errorMsg = useMemo(function () {
         if (postview || loading)
             return undefined;
@@ -196,31 +190,6 @@ export function SmartSelect(_a) {
         }
         return undefined;
     }, [invalids, touched, value, options]);
-    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.container, style: {
-                    width: currentBreakPoint <= step.size
-                        ? '100%'
-                        : calcStepWidth(step.size, form.size),
-                    minHeight: step.description ||
-                        (!postview && editable && step.required)
-                        ? '55px'
-                        : '43px',
-                }, onClick: onFocus, "data-testid": step.id }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, onFocus: onFocus, disabled: options === null || disabled, hidden: disabled, loading: loading, options: options !== null && options !== void 0 ? options : undefined, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: handleUpdate, getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: (_h = (_g = (_e = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _e !== void 0 ? _e : (_f = error === null || error === void 0 ? void 0 : error.message) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : step.description) !== null && _h !== void 0 ? _h : undefined, error: !!errorMsg || !!warning || !!error }) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
-}
-function SmartSelectStep(props) {
-    var step = props.step, defaultValue = props.defaultValue;
-    var _a = useStepDependency(step, defaultValue), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        shouldUnregister: true,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        defaultValue: originalValue,
-    }), _c = _b.field, ref = _c.ref, field = __rest(_c, ["ref"]), error = _b.fieldState.error;
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(SmartSelect, __assign({}, props, field, { error: error, inputRef: ref, onChange: onChange })));
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, onClick: onFocus, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: options === null || disabled, hidden: disabled, loading: loading, options: options !== null && options !== void 0 ? options : undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: (_h = (_g = (_e = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _e !== void 0 ? _e : (_f = error === null || error === void 0 ? void 0 : error.message) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : step.description) !== null && _h !== void 0 ? _h : undefined, error: !!errorMsg || !!warning || !!error })) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
 }
 export default SmartSelectStep;

package/dist/FormSteps/Step.d.ts

@@ -3,8 +3,6 @@ import { FormStep } from '../@Types/FormStep';
 export interface StepProps {
     step: FormStep;
     editable: boolean;
-    handleSizeChange?: () => void;
-    level: number;
 }
 declare function StepComponent({ step, ...props }: StepProps): JSX.Element;
 export default StepComponent;

package/dist/FormSteps/StepFunctions.d.ts

@@ -1,7 +1,8 @@
 import { FormSize } from '../@Types/Form';
 import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../@Types/FormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
-export declare function calcFillerSize(step: FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
+export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
+export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare function recursivelyCheckOpenSize(idStep: string, steps: Record<string, FormStep>, values: Record<string, any>): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
 export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;

package/dist/FormSteps/StepFunctions.js

@@ -1,4 +1,4 @@
-import Types, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
+import { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import { getRawText } from '../Utils/DraftFunctions';
@@ -6,7 +6,8 @@ export function calcFillerSize(step, steps, values, size) {
     var _a;
     var maxSize = (_a = step.maxSize) !== null && _a !== void 0 ? _a : size.blockNum;
     if (maxSize < size.blockNum) {
-        var stepSize = maxSize - recursivelyCheckOpenSize(step.id, steps, values);
+        var tsize = recursivelyCheckOpenSize(step.id, steps, values);
+        var stepSize = maxSize - tsize;
         return (size.blockSize * stepSize + size.spacingSize * (stepSize - 1) + 20);
     }
     else {
@@ -16,79 +17,85 @@ export function calcFillerSize(step, steps, values, size) {
 export function recursivelyCheckOpenSize(idStep, steps, values) {
     var step = steps[idStep];
     var value = values[idStep];
-    if (step.type === Types.SELECTOR) {
-        var size = step.size;
-        if (value) {
-            var currentOption = step.options.find(function (option) { return option.value === value; });
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === OptionTypes.NESTED) {
-                var optionSize = 0;
-                for (var _i = 0, _a = currentOption.steps; _i < _a.length; _i++) {
-                    var pStepId = _a[_i];
-                    optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+    switch (step.type) {
+        case StepTypes.SELECTOR: {
+            var size = step.size;
+            if (value) {
+                var currentOption = step.options.find(function (option) { return option.value === value.value; });
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === OptionTypes.NESTED) {
+                    var optionSize = 0;
+                    for (var _i = 0, _a = currentOption.steps; _i < _a.length; _i++) {
+                        var pStepId = _a[_i];
+                        var temp = recursivelyCheckOpenSize(pStepId, steps, values);
+                        optionSize += temp;
+                    }
+                    size += optionSize;
                 }
-                size += optionSize;
             }
+            return size;
         }
-        return size;
-    }
-    else if (step.type === Types.CLASSIFIER_SELECTOR) {
-        var size = step.size;
-        if (value) {
-            var currentOption = step.options[value];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
-                var optionSize = 0;
-                for (var _b = 0, _c = currentOption.steps; _b < _c.length; _b++) {
-                    var pStepId = _c[_b];
-                    optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+        case StepTypes.CLASSIFIER_SELECTOR: {
+            var size = step.size;
+            if (value) {
+                var currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
+                    var optionSize = 0;
+                    for (var _b = 0, _c = currentOption.steps; _b < _c.length; _b++) {
+                        var pStepId = _c[_b];
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
                 }
-                size += optionSize;
             }
+            return size;
         }
-        return size;
-    }
-    else if (step.type === Types.ENTITYVALUEPICKER) {
-        var size = step.size;
-        if (value) {
-            var currentOption = step.options[value];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
-                var optionSize = 0;
-                for (var _d = 0, _e = currentOption.steps; _d < _e.length; _d++) {
-                    var pStepId = _e[_d];
-                    optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+        case StepTypes.ENTITYVALUEPICKER: {
+            var size = step.size;
+            if (value) {
+                var currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
+                    var optionSize = 0;
+                    for (var _d = 0, _e = currentOption.steps; _d < _e.length; _d++) {
+                        var pStepId = _e[_d];
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
                 }
-                size += optionSize;
             }
+            return size;
         }
-        return size;
-    }
-    else if (step.type === Types.API_SELECTOR) {
-        var size = step.size;
-        if (value) {
-            var currentOption = step.options[value];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ApiSelectorOptionTypes.NESTED) {
-                var optionSize = 0;
-                for (var _f = 0, _g = currentOption.steps; _f < _g.length; _f++) {
-                    var pStepId = _g[_f];
-                    optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+        case StepTypes.API_SELECTOR: {
+            var size = step.size;
+            if (value) {
+                var currentOption = step.options[value];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ApiSelectorOptionTypes.NESTED) {
+                    var optionSize = 0;
+                    for (var _f = 0, _g = currentOption.steps; _f < _g.length; _f++) {
+                        var pStepId = _g[_f];
+                        optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+                    }
+                    size += optionSize;
                 }
-                size += optionSize;
             }
+            return size;
         }
-        return size;
-    }
-    if (step.type === Types.CHECKBOX) {
-        var size = step.size;
-        var stepSteps = value ? step.steps : step.uncheckedSteps;
-        var optionSize = 0;
-        for (var _h = 0, _j = stepSteps !== null && stepSteps !== void 0 ? stepSteps : []; _h < _j.length; _h++) {
-            var pStepId = _j[_h];
-            optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+        case StepTypes.CHECKBOX: {
+            var size = step.size;
+            var stepSteps = value ? step.steps : step.uncheckedSteps;
+            var optionSize = 0;
+            for (var _h = 0, _j = stepSteps !== null && stepSteps !== void 0 ? stepSteps : []; _h < _j.length; _h++) {
+                var pStepId = _j[_h];
+                optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+            }
+            size += optionSize;
+            return size;
         }
-        size += optionSize;
-        return size;
-    }
-    else {
-        return 4;
+        case StepTypes.DATEPICKER:
+        case StepTypes.TEXTINPUT: {
+            return step.size;
+        }
+        default:
+            return 4;
     }
 }
 export var calcStepWidth = function (stepSize, size) {
@@ -131,7 +138,7 @@ export var calcDefaultValue = function (step) {
 export var iterateNestedSteps = function (idStep, steps, iteration) {
     var step = steps[idStep];
     iteration(step);
-    if (step.type == StepTypes.MAPPER) {
+    if (step.type === StepTypes.MAPPER) {
         for (var _i = 0, _a = step.rootSteps; _i < _a.length; _i++) {
             var idStep_1 = _a[_i];
             iterateNestedSteps(idStep_1, step.steps, iteration);

package/dist/FormSteps/StepHooks.d.ts

@@ -3,6 +3,7 @@ import { ValuesStore } from '../States/SiteSlice';
 import { RootState } from '../Utils/store';
 import { Form } from '../@Types';
 import { DependencyStore } from '../Form/Form';
+import { FieldError, RefCallBack, UseControllerProps, useController } from 'react-hook-form';
 export declare const selectOriginalValue: ((state: RootState, step: GBaseStep) => any) & import("reselect").OutputSelectorFields<(args_0: ValuesStore, args_1: GBaseStep) => any, {
     clearCache: () => void;
 }> & {
@@ -25,3 +26,18 @@ export declare const selectDependencies: ((state: RootState, step: GBaseStep, fo
 }> & {
     clearCache: () => void;
 };
+export interface UseFormStepOptions<ValueType> {
+    defaultValue?: ValueType;
+    /** If true, will not trigger onChange until the user has finished typing */
+    debounce?: boolean;
+    rules?: UseControllerProps['rules'];
+    /** If the step should trigger a filler(root StepFiller) size change */
+    sizeChange?: boolean;
+}
+export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules, debounce, sizeChange, defaultValue, }?: UseFormStepOptions<ValueType>) => {
+    value: ValueType;
+    ref: RefCallBack;
+    onChange: (value: ValueType) => void;
+    error: FieldError | undefined;
+    field: Omit<ReturnType<typeof useController>['field'], 'ref' | 'value' | 'onChange'>;
+};

package/dist/FormSteps/StepHooks.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -7,11 +18,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useAppSelector, useAppDispatch } from '../hooks';
-import { setStepDependency } from '../States/SiteSlice';
+import { clearDependency, setStepDependency, } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { calcDefaultValue } from './StepFunctions';
+import { useController, } from 'react-hook-form';
+import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
 var selectIsDependency = createSelector([
     function (state) { return state.site.dependencies; },
     function (state, step) { return step; },
@@ -38,6 +51,9 @@ export var useStepDependency = function (step, defaultValue) {
                 value: defaultValue,
             }));
         }
+        return function () {
+            dispatch(clearDependency(step));
+        };
     }, [isDependency]);
     var handleStepDep = useCallback(function (value) {
         if (!isDependency)
@@ -85,3 +101,43 @@ var calcDeepDependencies = function (idStep, form, deps) {
     }
     return deps;
 };
+export var useFormStep = function (step, _a) {
+    var _b = _a === void 0 ? {} : _a, rules = _b.rules, debounce = _b.debounce, sizeChange = _b.sizeChange, defaultValue = _b.defaultValue;
+    var _c = useState(), timer = _c[0], setTimer = _c[1];
+    var _d = useStepDependency(step, defaultValue), isDependency = _d.isDependency, handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
+    var _e = useController({
+        name: step.id,
+        rules: rules,
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _f = _e.field, ref = _f.ref, value = _f.value, fieldOnChange = _f.onChange, field = __rest(_f, ["ref", "value", "onChange"]), error = _e.fieldState.error;
+    var handleSizeChange = useContext(SizeChangeContext);
+    var onChange = useCallback(function (value) {
+        if (isDependency) {
+            if (debounce) {
+                try {
+                    clearTimeout(timer);
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                setTimer(setTimeout(function () {
+                    handleStepDep(value);
+                    setTimer(undefined);
+                }, 1000));
+            }
+            else {
+                handleStepDep(value);
+            }
+        }
+        fieldOnChange(value);
+        if (sizeChange)
+            handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
+    }, [handleStepDep, isDependency, fieldOnChange]);
+    return {
+        ref: ref,
+        value: value,
+        onChange: onChange,
+        error: error,
+        field: field,
+    };
+};

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -114,7 +114,7 @@ function TextAreaStep(_a) {
                     }
                 } }, { children: _jsx("div", __assign({ className: postview
                         ? styles.postViewContainer + ' EF-DraftContainer'
-                        : styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
+                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
                         if (canEdit) {
                             setHovering(true);
                         }

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -9,60 +9,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
 import styles from './MaterialTextAreaStep.module.css';
-import { useController } from 'react-hook-form';
-import { useCallback, useState } from 'react';
 import { useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 function TextAreaStep(_a) {
     var _b, _c;
     var step = _a.step, editable = _a.editable, maxLength = _a.maxLength;
     var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, partial = _d.partial;
-    var _e = useState(), timer = _e[0], setTimer = _e[1];
-    var _f = useStepDependency(step), handleStepDep = _f.handleStepDep, originalValue = _f.originalValue, isDependency = _f.isDependency;
-    var _g = useController({
-        name: step.id,
-        shouldUnregister: true,
+    var _e = useFormStep(step, {
+        debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-        defaultValue: originalValue,
-    }), _h = _g.field, ref = _h.ref, field = __rest(_h, ["ref"]), error = _g.fieldState.error;
-    var onChange = useCallback(function (e) {
-        if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
-                handleStepDep(e.target.value);
-                setTimer(undefined);
-            }, 1000));
-        }
-        field.onChange(e);
-    }, [handleStepDep, isDependency, field.onChange]);
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
     var canEdit = editable && !postview;
     return (_jsxs("div", __assign({ className: styles.container, style: {
             paddingBottom: step.required || step.description || !!error
                 ? '0px'
                 : '5px',
-        } }, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { onChange: onChange, "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description) !== null && _c !== void 0 ? _c : (step.required ? ' ' : null), error: !!error })) })), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }), _jsx("p", __assign({ className: styles.printContainer, style: {
+        } }, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, "data-testid": step.id, maxLength: maxLength, label: step.label, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description) !== null && _c !== void 0 ? _c : (step.required ? ' ' : null), error: !!error })) })), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }), _jsx("p", __assign({ className: styles.printContainer, style: {
                             backgroundColor: formStyle.stepBackgroundColor,
                             borderColor: formStyle.outlineColor,
-                        } }, { children: field.value }))] })))] })));
+                        } }, { children: value }))] })))] })));
 }
 export default TextAreaStep;

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -9,70 +9,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
 import styles from './MaterialTextInputStep.module.css';
-import { useController } from 'react-hook-form';
 import { calcStepWidth } from '../../StepFunctions';
-import { useCallback, useContext, useState } from 'react';
+import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 function TextInputStep(_a) {
     var _b;
     var icon = _a.icon, step = _a.step, editable = _a.editable, maxLength = _a.maxLength, defaultValue = _a.defaultValue, _c = _a.validation, validation = _c === void 0 ? step.validation : _c;
     var currentBreakPoint = useAppSelector(selectBreakPoint);
     var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
     var form = useContext(FormContext);
-    var _e = useState(), timer = _e[0], setTimer = _e[1];
-    var _f = useStepDependency(step, defaultValue), isDependency = _f.isDependency, handleStepDep = _f.handleStepDep, originalValue = _f.originalValue;
-    var _g = useController({
-        name: step.id,
-        shouldUnregister: true,
+    var _e = useFormStep(step, {
+        defaultValue: defaultValue,
+        debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
             pattern: validation
                 ? {
-                    value: new RegExp(validation.value),
+                    value: new RegExp(validation.type === 'EMAIL'
+                        ? // eslint-disable-next-line no-control-regex
+                            /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
+                        : validation.value),
                     message: validation.message,
                 }
                 : undefined,
         },
-        defaultValue: originalValue,
-    }), _h = _g.field, ref = _h.ref, field = __rest(_h, ["ref"]), error = _g.fieldState.error;
-    var onChange = useCallback(function (e) {
-        if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
-                handleStepDep(e.target.value);
-                setTimer(undefined);
-            }, 1000));
-        }
-        field.onChange(e);
-    }, [handleStepDep, isDependency, field.onChange]);
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
     return (_jsx("div", __assign({ className: styles.container, style: {
             width: currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form.size),
-            minHeight: (!postview && editable && (step.required || validation)) ||
-                step.description
+            minHeight: step.description ||
+                (!postview && editable && (step.required || validation))
                 ? '55px'
                 : '43px',
-        } }, { children: _jsx(RoundedTextField, __assign({}, field, { onChange: onChange, maxLength: maxLength, "data-testid": step.id, label: step.label, inputRef: ref, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error, icon: step.showIcon ? icon : undefined })) })));
+        } }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, maxLength: maxLength, "data-testid": step.id, label: step.label, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error, icon: step.showIcon ? icon : undefined })) })));
 }
 export default TextInputStep;

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TitleStepProps } from '../TitleStep';
-declare function TitleStep(props: TitleStepProps): JSX.Element;
+declare function TitleStep({ step }: TitleStepProps): JSX.Element;
 export default TitleStep;