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

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -9,34 +9,26 @@ 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 styles from './MaterialRatingStep.module.css';
-import { useController, useFormContext } from 'react-hook-form';
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import Rating from '../../../Shared/Rating/Rating';
 import { RatingTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function MaterialRatingStep(_a) {
-    var _b, _c, _d, _e, _f;
-    var step = _a.step, value = _a.value, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable;
+import { useFormStep } from '../../StepHooks';
+function RatingStep(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, editable = _a.editable;
+    var _f = useFormStep(step, {
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error;
     var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var errors = useFormContext().formState.errors;
     var renderNestedOption = function () {
         var currentOption;
         if (value !== undefined && value !== null && step.nestedSteps) {
@@ -49,39 +41,19 @@ function MaterialRatingStep(_a) {
             if (currentOption && currentOption.length > 0) {
                 return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1 }, idSubStep));
+                        return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
                     }) }));
             }
         }
     };
     return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
                     paddingBottom: step.description || step.required ? 0 : 15,
-                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: inputRef }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
-                            color: !!errors[step.id] && value === null
+                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: ref }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
+                            color: !!error && value === null
                                 ? (_d = formStyle.errorColor) !== null && _d !== void 0 ? _d : '#cc2936'
                                 : (_e = formStyle.descriptionTextColor) !== null && _e !== void 0 ? _e : '#989898',
-                        } }, { children: !!errors[step.id] && value === null
-                            ? (_f = errors[step.id]) === null || _f === void 0 ? void 0 : _f.message
+                        } }, { children: !!error && value === null
+                            ? error === null || error === void 0 ? void 0 : error.message
                             : step.description })))] })), renderNestedOption()] }));
 }
-function RatingStep(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), 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,
-    }).field, ref = _b.ref, field = __rest(_b, ["ref"]);
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(MaterialRatingStep, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-            handleStepDep(value);
-            onChange(value);
-        } })));
-}
 export default RatingStep;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.d.ts

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

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -9,59 +9,27 @@ 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 React, { useCallback, useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { OptionTypes } from '../../../constants/FormStepTypes';
-import styles from './MaterialSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
-import { useController, useFormContext } from 'react-hook-form';
 import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function Selector(_a) {
-    var step = _a.step, value = _a.value, level = _a.level, onBlur = _a.onBlur, editable = _a.editable, onChange = _a.onChange, handleSizeChange = _a.handleSizeChange, inputRef = _a.inputRef;
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function SelectorStep(_a) {
+    var _b, _c, _d;
+    var step = _a.step, editable = _a.editable;
+    var _e = useFormStep(step, {
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
     var form = useContext(FormContext);
-    var _b = useAppSelector(function (state) { return state.global; }), postview = _b.postview, formStyle = _b.formStyle;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _c = useFormContext(), getValues = _c.getValues, errors = _c.formState.errors;
-    var _d = useState(level === 0
-        ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _d[0], setFillerSize = _d[1];
-    var sizeChange = function () {
-        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-        if (level === 0) {
-            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        }
-    };
-    var renderSelect = function () {
-        var _a, _b, _c, _d;
-        return (_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',
-            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: step.options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
-                    onChange(value);
-                }, getOptionSelected: function (option, value) {
-                    return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
-                }, helperText: (_d = (_c = (_b = errors[step.id]) === null || _b === void 0 ? void 0 : _b.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!errors[step.id] }) })));
-    };
+    var _f = useAppSelector(function (state) { return state.global; }), postview = _f.postview, formStyle = _f.formStyle;
     var mapNestedOption = function () {
         var currentOptionIndex = null;
         var currentOption = null;
@@ -76,39 +44,15 @@ function Selector(_a) {
             currentOptionIndex !== null) {
             return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep) {
                     var subStep = form.steps[idSubStep];
-                    return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idSubStep));
+                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
                 }) }));
         }
     };
-    if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
-        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
-            } }, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
-                        width: fillerSize,
-                    } }))] })));
-    }
-    else {
-        return (_jsxs(React.Fragment, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize && (_jsx("div", { className: styles.separator }))] }));
-    }
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { value: value, inputRef: ref, handleUpdate: onChange, disabled: false, loading: false, options: step.options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_b = formStyle.stepBackgroundColor) !== null && _b !== void 0 ? _b : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: function (option, value) {
+                        return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_d = (_c = error === null || error === void 0 ? void 0 : error.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!error })) })), value && mapNestedOption()] }));
 }
-function SelectorStep(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }).field, ref = _b.ref, field = __rest(_b, ["ref"]);
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx(Selector, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-            handleStepDep(value);
-            onChange(value);
-        } })));
+function SelectorStepContainer(props) {
+    return (_jsx(StepFillerContainer, __assign({ step: props.step }, { children: _jsx(SelectorStep, __assign({}, props)) })));
 }
-export default SelectorStep;
+export default SelectorStepContainer;

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css

@@ -7,19 +7,3 @@
     padding-top: 5px;
     margin-bottom: 0px;
 }
-.separator {
-    flex-basis: 100%;
-    height: 0;
-}
-
-.firstLvlContainer {
-    max-width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.smallSeparator {
-    height: 0;
-    max-width: 100%;
-    flex-basis: 0;
-}

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'>;
+};