@arquimedes.co/eureka-forms 1.9.134 → 2.0.0-test

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -31,23 +31,28 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React, { useState, useEffect, cloneElement } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import styles from './MaterialMapperStep.module.css';
-import { Controller } from 'react-hook-form';
-import StepTypes, { ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, MapperStyleTypes, OptionTypes, } from '../../../constants/FormStepTypes';
-import RoundedButton from '../../../shared/RoundedButton/RoundedButton';
-import { nanoid } from 'nanoid';
+import { Controller, useFormContext } from 'react-hook-form';
+import { MapperStyleTypes } from '../../../constants/FormStepTypes';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
 import MapperElementComponent from './Element/MapperElement';
-import AYFFormStepTypes from '../../../constants/AYFFormStepTypes';
-import CBRFormStepTypes from '../../../constants/CBRFormStepTypes';
-import { addInitialMapper } from '../../../App';
-import { calcStepDependency } from '../../../Form/FormFunctions';
+import { addStepsDependencies } from '../../../States/SiteStateReducer';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import CustomContext from '../../../Contexts/CustomContext';
+import { useStepDependency } from '../../StepHooks';
+import { addMapperStep, calcRecursiveData } from '../../../App/AppFunctions';
 export function ElementsComponent(_a) {
-    var _b, _c;
-    var step = _a.step, form = _a.form, errors = _a.errors, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, _d = _a.loading, loading = _d === void 0 ? false : _d, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "errors", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "loading", "dependencyStore", "setDependencyStore"]);
-    var _e = useState(true), firstRender = _e[0], setFirstRender = _e[1];
+    var step = _a.step, inputRef = _a.inputRef, editable = _a.editable, elements = _a.elements, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, others = __rest(_a, ["step", "inputRef", "editable", "elements", "customAdd", "loading"]);
+    var form = useContext(FormContext);
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var customSteps = useContext(CustomContext).customSteps;
+    var dispatch = useAppDispatch();
+    var _d = useFormContext(), setValue = _d.setValue, errors = _d.formState.errors;
+    var handleStepDep = useStepDependency(step).handleStepDep;
     /** Mapper Steps to pass down */
-    var _f = useState((function () {
+    var _e = useState((function () {
         var _a;
         var newSteps = {};
         for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
@@ -61,70 +66,32 @@ export function ElementsComponent(_a) {
                 elemSteps[newIdStep] = baseStep;
                 newSteps[newIdStep] = baseStep;
             }
-            calcRecursiveData(element, elemSteps, {}, others.customSteps, others.originalValues);
+            calcRecursiveData(element, elemSteps, customSteps);
         }
         return newSteps;
-    })()), localSteps = _f[0], setLocalSteps = _f[1];
+    })()), localSteps = _e[0], setLocalSteps = _e[1];
     var onChange = function (elements) {
-        if (dependencyStore[step.id] !== undefined && customAdd) {
-            setDependencyStore(function (dependencyStore) {
-                var _a;
-                var _b;
-                return (__assign(__assign({}, dependencyStore), (_a = {}, _a[step.id] = {
-                    type: step.type,
-                    value: (_b = elements.map(function (element) { return element.value; })) !== null && _b !== void 0 ? _b : null,
-                }, _a)));
-            });
-        }
+        if (customAdd)
+            handleStepDep(elements.map(function (element) { return element.value; }));
         others.onChange(elements);
     };
     useEffect(function () {
-        if (firstRender) {
-            if (elements.length === 0 &&
-                !postview &&
-                editable &&
-                step.creatable) {
-                if (!customAdd)
-                    handleAddElement();
-            }
-            setFirstRender(false);
-        }
-        else {
-            onChange([]);
+        if (elements.length === 0 && !postview && editable && step.creatable) {
+            if (!customAdd)
+                handleAddElement();
         }
-    }, __spreadArray([], ((_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return dependencyStore[dep]; })) !== null && _c !== void 0 ? _c : []), true));
+    }, []);
     var handleAddElement = function (value) {
-        var idElement = nanoid();
-        var newElement = {
-            ids: {},
-            id: idElement,
-            originalValues: {},
-            isOriginal: false,
-        };
+        var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
         if (value)
-            newElement.value = value;
-        var newSteps = {};
-        var newValues = {};
-        for (var _i = 0, _a = Object.keys(step.steps); _i < _a.length; _i++) {
-            var idStep = _a[_i];
-            var baseStep = JSON.parse(JSON.stringify(step.steps[idStep]));
-            var newIdStep = step.id + '-' + idStep + '-' + idElement;
-            baseStep.id = newIdStep;
-            newElement.ids[idStep] = newIdStep;
-            newSteps[newIdStep] = baseStep;
-            if (baseStep.type === StepTypes.MAPPER) {
-                addInitialMapper(newValues, baseStep);
-            }
+            element.value = value;
+        for (var _i = 0, _b = Object.entries(mappers); _i < _b.length; _i++) {
+            var _c = _b[_i], key = _c[0], elems = _c[1];
+            setValue(key, elems);
         }
-        for (var _b = 0, _c = Object.entries(newValues); _b < _c.length; _b++) {
-            var _d = _c[_b], key = _d[0], elems = _d[1];
-            others.setValue(key, elems);
-        }
-        var deps = __assign({}, dependencyStore);
-        calcRecursiveData(newElement, newSteps, deps, others.customSteps);
-        onChange(__spreadArray(__spreadArray([], elements, true), [newElement], false));
-        setLocalSteps(__assign(__assign({}, localSteps), newSteps));
-        setDependencyStore(deps);
+        onChange(__spreadArray(__spreadArray([], elements, true), [element], false));
+        setLocalSteps(__assign(__assign({}, localSteps), steps));
+        dispatch(addStepsDependencies({ steps: steps, customSteps: customSteps }));
     };
     var calcStyles = function () {
         var _a;
@@ -136,13 +103,14 @@ export function ElementsComponent(_a) {
                 return { container: styles.pillContainer };
         }
     };
+    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
     var container = calcStyles().container;
     var mapElements = function () {
-        return elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, formStyle: formStyle, step: step, errors: errors, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
-                var tempElements = __spreadArray([], elements, true);
-                tempElements[index].deleted = true;
-                onChange(tempElements);
-            } }))); });
+        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: function () {
+                    var tempElements = __spreadArray([], elements, true);
+                    tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+                    onChange(tempElements);
+                } }))); }) })));
     };
     if (step.style.type === MapperStyleTypes.INLINE)
         return _jsx(React.Fragment, { children: mapElements() });
@@ -150,20 +118,16 @@ export function ElementsComponent(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { ref: inputRef, className: styles.hiddenInput }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, { children: step.description }))), mapElements(), _jsx("input", { ref: inputRef, className: 'hidden-input' }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }
-                        } })), customAdd &&
-                        cloneElement(customAdd, {
-                            inputRef: inputRef,
-                            disabled: !editable || postview,
-                            handleAddElement: handleAddElement,
-                        })] }))), !!errors[step.id] &&
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!errors[step.id] &&
                 elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
 }
 function MapperStep(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: {
+    var originalValue = useStepDependency(props.step).originalValue;
+    return (_jsx(Controller, { name: props.step.id, defaultValue: originalValue, rules: {
             validate: function (array) {
                 return (props.step.required &&
                     array.filter(function (elem) { return !elem.deleted; }).length > 0) ||
@@ -175,151 +139,3 @@ function MapperStep(props) {
         } }));
 }
 export default MapperStep;
-function calcRecursiveData(element, newSteps, deps, customSteps, originalValues) {
-    var _a;
-    if (originalValues === void 0) { originalValues = {}; }
-    if (!newSteps)
-        return;
-    for (var _i = 0, _b = Object.keys(newSteps); _i < _b.length; _i++) {
-        var idStep = _b[_i];
-        var step = newSteps[idStep];
-        if (step.dependencies) {
-            for (var i = 0; i < step.dependencies.length; i++) {
-                var idDep = step.dependencies[i];
-                var newId = element.ids[idDep];
-                if (newId) {
-                    step.dependencies[i] = newId;
-                    deps[newId] = calcStepDependency(newId, newSteps, originalValues, customSteps);
-                }
-            }
-        }
-        var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
-        if (custom === null || custom === void 0 ? void 0 : custom.calcRecursiveData) {
-            custom.calcRecursiveData(step, element.ids);
-        }
-        switch (step.type) {
-            case StepTypes.SELECTOR: {
-                for (var _c = 0, _d = step.options; _c < _d.length; _c++) {
-                    var option = _d[_c];
-                    if (option.type === OptionTypes.NESTED) {
-                        for (var i = 0; i < option.steps.length; i++) {
-                            var idStep_1 = option.steps[i];
-                            var newId = element.ids[idStep_1];
-                            option.steps[i] = newId;
-                        }
-                    }
-                }
-                break;
-            }
-            case StepTypes.CLASSIFIER_SELECTOR:
-                for (var _e = 0, _f = Object.keys(step.options); _e < _f.length; _e++) {
-                    var idOption = _f[_e];
-                    var option = step.options[idOption];
-                    if (option.type === ClassifierOptionTypes.NESTED) {
-                        for (var i = 0; i < option.steps.length; i++) {
-                            var idStep_2 = option.steps[i];
-                            var newId = element.ids[idStep_2];
-                            option.steps[i] = newId;
-                        }
-                    }
-                }
-                break;
-            case StepTypes.RATING:
-                if (step.nestedSteps) {
-                    for (var _g = 0, _h = step.nestedSteps; _g < _h.length; _g++) {
-                        var steps = _h[_g];
-                        for (var i = 0; i < steps.length; i++) {
-                            var idStep_3 = steps[i];
-                            var newId = element.ids[idStep_3];
-                            steps[i] = newId;
-                        }
-                    }
-                }
-                break;
-            case StepTypes.COLLAPSIBLE: {
-                for (var i = 0; i < step.steps.length; i++) {
-                    var idStep_4 = step.steps[i];
-                    var newId = element.ids[idStep_4];
-                    step.steps[i] = newId;
-                }
-                break;
-            }
-            case StepTypes.CHECKBOX: {
-                if (step.steps)
-                    for (var i = 0; i < step.steps.length; i++) {
-                        var idStep_5 = step.steps[i];
-                        var newId = element.ids[idStep_5];
-                        step.steps[i] = newId;
-                    }
-                if (step.uncheckedSteps)
-                    for (var i = 0; i < step.uncheckedSteps.length; i++) {
-                        var idStep_6 = step.uncheckedSteps[i];
-                        var newId = element.ids[idStep_6];
-                        step.uncheckedSteps[i] = newId;
-                    }
-                break;
-            }
-            case StepTypes.ENTITYVALUEPICKER:
-                for (var _j = 0, _k = step.path; _j < _k.length; _j++) {
-                    var path = _k[_j];
-                    switch (path.type) {
-                        case EntityValueDataTypes.STEP:
-                            var newId = element.ids[path.idStep];
-                            if (newId) {
-                                path.idStep = newId;
-                                deps[newId] = calcStepDependency(newId, newSteps, originalValues, customSteps);
-                            }
-                            break;
-                        default:
-                            break;
-                    }
-                }
-                for (var _l = 0, _m = step.filters; _l < _m.length; _l++) {
-                    var filter = _m[_l];
-                    switch (filter.type) {
-                        case EntityValueDataTypes.STEP:
-                            var newId = element.ids[filter.idStep];
-                            if (newId) {
-                                filter.idStep = newId;
-                                deps[newId] = calcStepDependency(newId, newSteps, originalValues, customSteps);
-                            }
-                            break;
-                        default:
-                            break;
-                    }
-                }
-                for (var _o = 0, _p = Object.keys((_a = step.options) !== null && _a !== void 0 ? _a : {}); _o < _p.length; _o++) {
-                    var idOption = _p[_o];
-                    var option = step.options[idOption];
-                    if (option.type === EntityValueOptionTypes.NESTED) {
-                        for (var i = 0; i < option.steps.length; i++) {
-                            var idStep_7 = option.steps[i];
-                            var newId = element.ids[idStep_7];
-                            option.steps[i] = newId;
-                        }
-                    }
-                }
-                break;
-            case CBRFormStepTypes.CBR_LOCATIVAS:
-                var elementStep = step;
-                if (elementStep.subStep) {
-                    var newId = element.ids[elementStep.subStep];
-                    if (newId) {
-                        elementStep.subStep = newId;
-                    }
-                }
-                break;
-            case AYFFormStepTypes.AYF_ICA_CITY:
-                var cityStep = step;
-                if (cityStep.idNitStep) {
-                    var newId = element.ids[cityStep.idNitStep];
-                    if (newId) {
-                        cityStep.idNitStep = newId;
-                    }
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.module.css

@@ -12,13 +12,6 @@
     padding: 5px 0px;
 }
 
-.hiddenInput {
-    height: 0;
-    width: 0;
-    padding: 0;
-    border-width: 0;
-}
-
 .titleLbl {
     font-size: 24px;
     font-weight: 600;

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

@@ -21,16 +21,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import styles from './MaterialRatingStep.module.css';
-import { Controller } from 'react-hook-form';
-import React from 'react';
-import Rating from '../../../shared/Rating/Rating';
+import { useController, useFormContext } from 'react-hook-form';
+import React, { useCallback, 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 form = _a.form, step = _a.step, value = _a.value, level = _a.level, errors = _a.errors, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["form", "step", "value", "level", "errors", "onChange", "inputRef", "editable", "postview", "formStyle", "widthStats"]);
+    var step = _a.step, value = _a.value, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable;
+    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) {
@@ -43,7 +49,7 @@ function MaterialRatingStep(_a) {
             if (currentOption && currentOption.length > 0) {
                 return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, __assign({}, others, { form: form, postview: postview, editable: editable, formStyle: formStyle, errors: errors, widthStats: widthStats, step: subStep, key: idSubStep, level: level + 1 })));
+                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1 }, idSubStep));
                     }) }));
             }
         }
@@ -59,13 +65,23 @@ function MaterialRatingStep(_a) {
                             : step.description })))] })), renderNestedOption()] }));
 }
 function RatingStep(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: null, rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(MaterialRatingStep, __assign({}, props, field, { inputRef: ref })));
-        } }));
+    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/RatingStep/RatingStep.js

@@ -12,8 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialRatingStep from './MaterialRatingStep/MaterialRatingStep';
+import { useAppSelector } from '../../hooks';
 function RatingStep(props) {
-    switch (props.formStyle.type) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             return _jsx(MaterialRatingStep, __assign({}, props));

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

@@ -20,20 +20,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { OptionTypes } from '../../../constants/FormStepTypes';
 import styles from './MaterialSelectorStep.module.css';
 import StepComponent from '../../Step';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
-import { Controller } from 'react-hook-form';
-import RoundedSmartSelect from '../../../shared/RoundedSmartSelect/RoundedSmartSelect';
+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, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, inputRef = _a.inputRef, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "editable", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors", "inputRef"]);
-    var _b = useState(level === 0
+    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;
+    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 = _b[0], setFillerSize = _b[1];
+        : 0), fillerSize = _d[0], setFillerSize = _d[1];
     var sizeChange = function () {
         handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
         if (level === 0) {
@@ -41,9 +47,9 @@ function Selector(_a) {
         }
     };
     var renderSelect = function () {
-        var _a;
+        var _a, _b, _c, _d;
         return (_jsx("div", __assign({ className: styles.container, style: {
-                width: widthStats.currentBreakPoint <= step.size
+                width: currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description ||
@@ -54,9 +60,7 @@ function Selector(_a) {
                     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: errors[step.id]
-                    ? errors[step.id].message
-                    : step.description, error: !!errors[step.id] }) })));
+                }, 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 mapNestedOption = function () {
         var currentOptionIndex = null;
@@ -72,17 +76,13 @@ function Selector(_a) {
             currentOptionIndex !== null) {
             return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep) {
                     var subStep = form.steps[idSubStep];
-                    return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, formStyle: formStyle, form: form, getValues: getValues, errors: errors, control: control, widthStats: widthStats, step: subStep, key: idSubStep, level: level + 1, handleSizeChange: function () {
-                            sizeChange();
-                        } })));
+                    return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idSubStep));
                 }) }));
         }
     };
     if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: widthStats.currentBreakPoint <= step.size
-                    ? '100%'
-                    : 'fit-content',
+                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,
                     } }))] })));
@@ -92,13 +92,23 @@ function Selector(_a) {
     }
 }
 function SelectorStep(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: "", rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(Selector, __assign({}, props, field, { inputRef: ref })));
-        } }));
+    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);
+        } })));
 }
 export default SelectorStep;

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

@@ -5,5 +5,5 @@ export interface SelectorStepProps extends StepProps {
     /** The SelectorStep to display */
     step: FormSelector;
 }
-declare function SelectorStep({ formStyle, ...others }: SelectorStepProps): JSX.Element;
+declare function SelectorStep(props: SelectorStepProps): JSX.Element;
 export default SelectorStep;

package/dist/FormSteps/SelectorStep/SelectorStep.js

@@ -9,26 +9,16 @@ 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 { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialSelectorStep from './MaterialSelectorStep/MaterialSelectorStep';
-function SelectorStep(_a) {
-    var formStyle = _a.formStyle, others = __rest(_a, ["formStyle"]);
+function SelectorStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialSelectorStep, __assign({ formStyle: formStyle }, others));
+            return _jsx(MaterialSelectorStep, __assign({}, props));
         }
     }
 }

package/dist/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.d.ts

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

package/dist/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../../hooks';
 import styles from './MaterialSeparatorStep.module.css';
 function SeparatorStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle;
+    var step = _a.step;
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     return (_jsx("div", { className: styles.container, style: {
             backgroundColor: step.transparent
                 ? 'transparent'

package/dist/FormSteps/SeparatorStep/SeparatorStep.d.ts

@@ -5,5 +5,5 @@ export interface SeparatorStepProps extends StepProps {
     /** The TitleStep to display */
     step: Separator;
 }
-declare function SeparatorStep({ step, formStyle, ...others }: SeparatorStepProps): JSX.Element;
+declare function SeparatorStep(props: SeparatorStepProps): JSX.Element;
 export default SeparatorStep;

package/dist/FormSteps/SeparatorStep/SeparatorStep.js

@@ -9,26 +9,16 @@ 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 { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialSeparatorStep from './MaterialSeparatorStep/MaterialSeparatorStep';
-function SeparatorStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle, others = __rest(_a, ["step", "formStyle"]);
+function SeparatorStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return (_jsx(MaterialSeparatorStep, __assign({ step: step, formStyle: formStyle }, others)));
+            return _jsx(MaterialSeparatorStep, __assign({}, props));
         }
     }
 }