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

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js

@@ -56,21 +56,25 @@ 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, { useEffect, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes, } from '../../../constants/FormStepTypes';
 import styles from './MaterialApiSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { Controller } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { calcFillerSize } from '../../StepFunctions';
 import { SmartSelect } from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
-import widgetInstance from '../../../AxiosWidget';
-import axiosInstance from '../../../AxiosAPI';
-import InputIcon from '../../../shared/InputIcon/InputIcon';
-function ApiSelector(_a) {
-    var _this = this;
-    var step = _a.step, form = _a.form, level = _a.level, value = _a.value, control = _a.control, editable = _a.editable, postview = _a.postview, inputRef = _a.inputRef, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "value", "control", "editable", "postview", "inputRef", "getValues", "widthStats", "handleSizeChange"]);
+import widgetInstance from '../../../Utils/AxiosWidget';
+import axiosInstance from '../../../Utils/AxiosAPI';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useStepDependency } from '../../StepHooks';
+function ApiSelectorComponent(_a) {
+    var step = _a.step, level = _a.level, value = _a.value, editable = _a.editable, inputRef = _a.inputRef, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "level", "value", "editable", "inputRef", "handleSizeChange"]);
+    var form = useContext(FormContext);
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var getValues = useFormContext().getValues;
     var _b = useState(level === 0
         ? calcFillerSize(step, form.steps, getValues(), form.size)
         : 0), fillerSize = _b[0], setFillerSize = _b[1];
@@ -82,57 +86,6 @@ function ApiSelector(_a) {
         var _a;
         return (_a = option === null || option === void 0 ? void 0 : option[step.labelAttribute]) !== null && _a !== void 0 ? _a : '';
     }
-    var getApiOptions = function (_a, _step, dependencyStore, domain) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            var params, _i, _b, filter, currentValue, url, response;
-            var _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        params = new URLSearchParams({});
-                        for (_i = 0, _b = step.queryParams; _i < _b.length; _i++) {
-                            filter = _b[_i];
-                            switch (filter.type) {
-                                case ApiSelectorParamTypes.STEP:
-                                    currentValue = (_c = dependencyStore[filter.idStep]) === null || _c === void 0 ? void 0 : _c.value;
-                                    if (currentValue) {
-                                        if (typeof currentValue === 'string')
-                                            params.set(filter.key, currentValue);
-                                        else
-                                            params.set(filter.key, (_d = currentValue.label) !== null && _d !== void 0 ? _d : currentValue.id);
-                                    }
-                                    else if (filter.required) {
-                                        return [2 /*return*/, null];
-                                    }
-                                    break;
-                                case ApiSelectorParamTypes.VALUE:
-                                default:
-                                    params.set(filter.key, filter.value);
-                                    break;
-                            }
-                        }
-                        url = step.url.replace('capta.co', process.env.REACT_APP_DOMAIN);
-                        if (domain && url.includes(process.env.REACT_APP_DOMAIN))
-                            params.set('idOrganization', idOrganization);
-                        if (!step.url.includes('?'))
-                            url += '?';
-                        url += params.toString();
-                        return [4 /*yield*/, (domain
-                                ? widgetInstance.get(url)
-                                : axiosInstance.get(url))];
-                    case 1:
-                        response = _e.sent();
-                        return [2 /*return*/, response.data.filter(function (option) {
-                                var _a;
-                                return calcOptionId(option) &&
-                                    ((_a = step.options[calcOptionId(option)]) === null || _a === void 0 ? void 0 : _a.type) !==
-                                        ApiSelectorOptionTypes.HIDE;
-                            })];
-                }
-            });
-        });
-    };
     var sizeChange = function () {
         handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
         if (level === 0) {
@@ -140,7 +93,7 @@ function ApiSelector(_a) {
         }
     };
     var renderSelect = function () {
-        return (_jsx(SmartSelect, __assign({}, others, { form: form, level: level, control: control, postview: postview, getValues: getValues, widthStats: widthStats, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getApiOptions, getOptionSelected: function (option, value) {
+        return (_jsx(SmartSelect, __assign({}, others, { level: level, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getApiOptions, getOptionSelected: function (option, value) {
                 return calcOptionId(option) === calcOptionId(value);
             }, calcDepError: function (steps) {
                 for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
@@ -158,18 +111,14 @@ function ApiSelector(_a) {
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ApiSelectorOptionTypes.NESTED) {
                 return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
                         var subStep = form.steps[idStep];
-                        return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, form: form, control: control, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
-                                sizeChange();
-                            } })));
+                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idStep));
                     }) }));
             }
         }
     };
     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,
                     } }, "SEPARATOR"))] })));
@@ -180,34 +129,72 @@ function ApiSelector(_a) {
 }
 export default ApiSelectorStep;
 function ApiSelectorStep(props) {
-    var _a, _b;
-    var step = props.step, dependencyStore = props.dependencyStore, defaultValue = props.defaultValue, originalValues = props.originalValues;
-    useEffect(function () {
-        /** Al modificar tambien modificar en SmartSelect */
-        if (!originalValues[step.id] && defaultValue) {
-            props.setDependencyStore(function (dependencies) {
-                var _a;
-                return (__assign(__assign({}, dependencies), (_a = {}, _a[step.id] = { type: step.type, value: props.defaultValue }, _a)));
-            });
-        }
-    }, []);
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: (_b = (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : 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(ApiSelector, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-                    if (dependencyStore[step.id] !== undefined) {
-                        props.setDependencyStore(function (dependencies) {
-                            var _a;
-                            return (__assign(__assign({}, dependencies), (_a = {}, _a[step.id] = {
-                                type: step.type,
-                                value: value !== null && value !== void 0 ? value : null,
-                            }, _a)));
-                        });
-                    }
-                    field.onChange(value);
-                } })));
-        } }));
+    var step = props.step, defaultValue = props.defaultValue;
+    var _a = useStepDependency(step, defaultValue), 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,
+    }), _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(ApiSelectorComponent, __assign({}, props, field, { error: error, inputRef: ref, onChange: onChange })));
 }
+var getApiOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
+    function calcOptionId(option) {
+        var _a;
+        return (_a = option === null || option === void 0 ? void 0 : option[step.idAttribute]) !== null && _a !== void 0 ? _a : '';
+    }
+    var params, _i, _a, filter, currentValue, url, response;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0:
+                params = new URLSearchParams({});
+                for (_i = 0, _a = step.queryParams; _i < _a.length; _i++) {
+                    filter = _a[_i];
+                    switch (filter.type) {
+                        case ApiSelectorParamTypes.STEP: {
+                            currentValue = (_b = dependencyStore[filter.idStep]) === null || _b === void 0 ? void 0 : _b.value;
+                            if (currentValue) {
+                                if (typeof currentValue === 'string')
+                                    params.set(filter.key, currentValue);
+                                else
+                                    params.set(filter.key, (_c = currentValue.label) !== null && _c !== void 0 ? _c : currentValue.id);
+                            }
+                            else if (filter.required) {
+                                return [2 /*return*/, null];
+                            }
+                            break;
+                        }
+                        case ApiSelectorParamTypes.VALUE:
+                        default:
+                            params.set(filter.key, filter.value);
+                            break;
+                    }
+                }
+                url = step.url.replace('capta.co', process.env.REACT_APP_DOMAIN);
+                if (idOrganization && url.includes(process.env.REACT_APP_DOMAIN))
+                    params.set('idOrganization', idOrganization);
+                if (!step.url.includes('?'))
+                    url += '?';
+                url += params.toString();
+                return [4 /*yield*/, (idOrganization
+                        ? widgetInstance.get(url)
+                        : axiosInstance.get(url))];
+            case 1:
+                response = _d.sent();
+                return [2 /*return*/, response.data.filter(function (option) {
+                        var _a;
+                        return calcOptionId(option) &&
+                            ((_a = step.options[calcOptionId(option)]) === null || _a === void 0 ? void 0 : _a.type) !==
+                                ApiSelectorOptionTypes.HIDE;
+                    })];
+        }
+    });
+}); };

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.module.css

@@ -1,12 +1,3 @@
-.container {
-    width: fit-content;
-    max-width: calc(100% - 20px);
-    display: flex;
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 5px;
-    margin-bottom: 0px;
-}
 .separator {
     flex-basis: 100%;
     height: 0;

package/dist/FormSteps/CBRStepMapper.js

@@ -55,91 +55,95 @@ import CBRIncidentsStep from './@Construction/CBRIncidentsStep/CBRIncidentsStep'
 import CBRElementStep from './@Construction/CBRElementStep/CBRElementStep';
 import axios from 'axios';
 import CBRPropertyStep from './@Construction/CBRPropertyStep/CBRPropertyStep';
-import InputIcon from '../shared/InputIcon/InputIcon';
+import InputIcon from '../Shared/InputIcon/InputIcon';
 var baseUrl = "https://integrations.".concat(process.env.REACT_APP_DOMAIN, "/sinco/cbr/");
 function CBRStepMapper(props) {
     var _this = this;
-    var getTipoDocOptions = function (_a) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, axios.get(baseUrl + 'TiposDoc?idOrganization=' + idOrganization)];
-                    case 1: return [2 /*return*/, (_b.sent()).data];
-                }
-            });
+    var getTipoDocOptions = function (idOrganization) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!idOrganization)
+                        return [2 /*return*/, null];
+                    return [4 /*yield*/, axios.get(baseUrl + 'TiposDoc?idOrganization=' + idOrganization)];
+                case 1: return [2 /*return*/, (_a.sent()).data];
+            }
         });
-    };
-    var getProyectoOptions = function (_a, step, dependencyStore) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            var idMacroProyecto, proyectos;
-            var _b, _c, _d, _e;
-            return __generator(this, function (_f) {
-                switch (_f.label) {
-                    case 0:
-                        idMacroProyecto = (_e = (_d = dependencyStore[(_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : '']) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.id;
-                        return [4 /*yield*/, axios.get(baseUrl + 'Proyectos?idOrganization=' + idOrganization)];
-                    case 1:
-                        proyectos = (_f.sent()).data;
-                        if (idMacroProyecto) {
-                            proyectos = proyectos.filter(function (proyecto) { return proyecto.idMacroProyecto === idMacroProyecto; });
-                        }
-                        return [2 /*return*/, proyectos];
-                }
-            });
+    }); };
+    var getProyectoOptions = function (idOrganization, step, dependencyStore) { return __awaiter(_this, void 0, void 0, function () {
+        var idMacroProyecto, proyectos;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    if (!idOrganization)
+                        return [2 /*return*/, null];
+                    idMacroProyecto = (_d = (_c = dependencyStore[(_b = (_a = step.dependencies) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '']) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.id;
+                    return [4 /*yield*/, axios.get(baseUrl + 'Proyectos?idOrganization=' + idOrganization)];
+                case 1:
+                    proyectos = (_e.sent()).data;
+                    if (idMacroProyecto) {
+                        proyectos = proyectos.filter(function (proyecto) { return proyecto.idMacroProyecto === idMacroProyecto; });
+                    }
+                    return [2 /*return*/, proyectos];
+            }
         });
-    };
-    var getMacroProyectoOptions = function (_a) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, axios.get(baseUrl + 'MacroProyectos?idOrganization=' + idOrganization)];
-                    case 1: return [2 /*return*/, (_b.sent()).data];
-                }
-            });
+    }); };
+    var getMacroProyectoOptions = function (idOrganization) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!idOrganization)
+                        return [2 /*return*/, null];
+                    return [4 /*yield*/, axios.get(baseUrl + 'MacroProyectos?idOrganization=' + idOrganization)];
+                case 1: return [2 /*return*/, (_a.sent()).data];
+            }
         });
-    };
-    var getTipoSolicitanteOptions = function (_a) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, axios.get(baseUrl + 'TiposSolicitante?idOrganization=' + idOrganization)];
-                    case 1: return [2 /*return*/, (_b.sent()).data];
-                }
-            });
+    }); };
+    var getTipoSolicitanteOptions = function (idOrganization) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!idOrganization)
+                        return [2 /*return*/, null];
+                    return [4 /*yield*/, axios.get(baseUrl + 'TiposSolicitante?idOrganization=' + idOrganization)];
+                case 1: return [2 /*return*/, (_a.sent()).data];
+            }
         });
-    };
-    var getTipoEspaciosOptions = function (_a, step, dependencyStore) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            var idProyecto;
-            var _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        if (!step.dependencies) return [3 /*break*/, 2];
-                        idProyecto = (_c = (_b = dependencyStore[step.dependencies[0]]) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id;
-                        if (!idProyecto) {
-                            return [2 /*return*/, null]; //null para indicar que falta la depedency
-                        }
-                        return [4 /*yield*/, axios.get(baseUrl +
-                                'TiposEspacio?idProyecto=' +
-                                idProyecto +
-                                '&idOrganization=' +
-                                idOrganization)];
-                    case 1: return [2 /*return*/, (_d.sent()).data];
-                    case 2: return [2 /*return*/, null];
-                }
-            });
+    }); };
+    var getTipoEspaciosOptions = function (idOrganization, step, dependencyStore) { return __awaiter(_this, void 0, void 0, function () {
+        var idProyecto, params;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!(step.dependencies && idOrganization)) return [3 /*break*/, 2];
+                    idProyecto = (_b = (_a = dependencyStore[step.dependencies[0]]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id;
+                    if (!idProyecto) {
+                        return [2 /*return*/, null]; //null para indicar que falta la depedency
+                    }
+                    params = new URLSearchParams({ idProyecto: idProyecto, idOrganization: idOrganization });
+                    return [4 /*yield*/, axios.get(baseUrl + 'TiposEspacio?' + params.toString())];
+                case 1: return [2 /*return*/, (_c.sent()).data];
+                case 2: return [2 /*return*/, null];
+            }
         });
-    };
+    }); };
     switch (props.step.type) {
-        case CBRFormStepTypes.CBR_CEL:
         case CBRFormStepTypes.CBR_EMAIL:
+            return (_jsx(TextInputStep, __assign({}, props, { step: props.step, validation: {
+                    type: 'EMAIL',
+                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                        .source,
+                    message: 'El correo no es válido',
+                } })));
+        case CBRFormStepTypes.CBR_CEL:
         case CBRFormStepTypes.CBR_PHONE:
+            return (_jsx(TextInputStep, __assign({}, props, { step: props.step, validation: {
+                    type: 'OTHER',
+                    value: /^(\+[0-9])|([0-9])$/.source,
+                    message: 'El teléfono no es válido',
+                } })));
         case CBRFormStepTypes.CBR_LAST_NAME:
         case CBRFormStepTypes.CBR_FIRST_NAME:
         case CBRFormStepTypes.CBR_MIDDLE_NAME:

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.d.ts

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

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.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 { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialCheckBoxStep from './MaterialCheckBoxStep/MaterialCheckBoxStep';
-function CheckboxStep(_a) {
-    var formStyle = _a.formStyle, others = __rest(_a, ["formStyle"]);
+import { useAppSelector } from '../../hooks';
+function CheckboxStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialCheckBoxStep, __assign({ formStyle: formStyle }, others));
+            return _jsx(MaterialCheckBoxStep, __assign({}, props));
         }
     }
 }

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -20,20 +20,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
-import RoundedCheckBox from '../../../shared/RoundedCheckBox/RoundedCheckBox';
-import { Controller } from 'react-hook-form';
-import React, { useState } from 'react';
+import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
+import { useController, useFormContext } from 'react-hook-form';
+import React, { useCallback, useContext, useState } from 'react';
 import StepComponent from '../../Step';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useStepDependency } from '../../StepHooks';
 function CheckBox(_a) {
-    var step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, getValues = _a.getValues, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["step", "form", "value", "onBlur", "errors", "level", "onChange", "inputRef", "editable", "postview", "getValues", "formStyle", "widthStats"]);
-    var handleSizeChange = others.handleSizeChange;
-    var _b = useState(level === 0
+    var step = _a.step, value = _a.value, onBlur = _a.onBlur, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, handleSizeChange = _a.handleSizeChange;
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
+    var form = useContext(FormContext);
+    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) {
@@ -42,7 +47,7 @@ function CheckBox(_a) {
     };
     var renderCheckbox = function () {
         return (_jsxs("div", __assign({ className: styles.container, style: {
-                width: widthStats.currentBreakPoint <= step.size
+                width: currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description ||
@@ -50,10 +55,10 @@ function CheckBox(_a) {
                     ? '55px'
                     : '43px',
             } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }))), _jsx(RoundedCheckBox, { onChange: onChange, onBlur: onBlur, "data-testid": step.id, inputRef: inputRef, padding: "0px", size: "1.6rem", error: !!errors[step.id], cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })] })), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
-                        color: !!errors[step.id]
+                        color: errors[step.id]
                             ? formStyle.errorColor
                             : formStyle.descriptionTextColor,
-                    } }, { children: !!errors[step.id]
+                    } }, { children: errors[step.id]
                         ? 'Este campo es obligatorio'
                         : step.description })))] }), step.id));
     };
@@ -61,16 +66,12 @@ function CheckBox(_a) {
         var steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (idStep) {
                 var subStep = form.steps[idStep];
-                return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
-                        sizeChange();
-                    } })));
+                return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idStep));
             }) }));
     };
     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: [renderCheckbox(), renderNested(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
                         width: fillerSize,
                     } }, "SEPARATOR"))] })));
@@ -80,14 +81,20 @@ function CheckBox(_a) {
     }
 }
 function CheckBoxStep(props) {
-    var _a, _b;
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: (_b = (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : props.step.defaultValue) !== null && _b !== void 0 ? _b : false, 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(CheckBox, __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(CheckBox, __assign({}, props, field, { inputRef: ref, onChange: onChange })));
 }
 export default CheckBoxStep;

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -35,3 +35,20 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.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/ClassifierSelectorStep/ClassifierSelectorStep.d.ts

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

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