@arquimedes.co/eureka-forms 2.0.19 → 2.0.21

package/dist/@Types/FormStep.d.ts

@@ -190,5 +190,6 @@ export interface Mapper extends GSteps.GBaseStep {
     unitLabel: string;
     creatable?: boolean;
     deletable?: boolean;
+    max?: number;
 }
 export {};

package/dist/App/App.js

@@ -29,14 +29,14 @@ import FormComponent from '../Form/Form';
 import { Provider } from 'react-redux';
 import { store } from '../Utils/store';
 import { useLogRocket, useSetupApp } from './AppHooks';
-import { useAppSelector } from '../hooks';
+import { StoreContext, useAppSelector } from '../hooks';
 import CustomContext from '../Contexts/CustomContext';
 import { nanoid } from '@reduxjs/toolkit';
 export var IdFormContext = createContext('');
 function AppComponent(_a) {
     var formData = _a.formData, valuesData = _a.valuesData, props = __rest(_a, ["formData", "valuesData"]);
     var idForm = React.useState(nanoid(6))[0];
-    return (_jsx(IdFormContext.Provider, __assign({ value: idForm }, { children: _jsx(Provider, __assign({ store: store }, { children: _jsx(App, __assign({ formData: formData, valuesData: valuesData }, props)) })) })));
+    return (_jsx(IdFormContext.Provider, __assign({ value: idForm }, { children: _jsx(Provider, __assign({ store: store, context: StoreContext }, { children: _jsx(App, __assign({ formData: formData, valuesData: valuesData }, props)) })) })));
 }
 export default AppComponent;
 function App(_a) {

package/dist/App/AppFunctions.js

@@ -166,7 +166,7 @@ export var mapOriginalValue = function (step, value, values, form) {
             }
         }
         case StepTypes.SELECTOR: {
-            var option = step.options.find(function (option) { return option.value == value; });
+            var option = step.options.find(function (option) { return option.value === value; });
             if (!(value === null || value === void 0 ? void 0 : value.value))
                 return option;
             return value;

package/dist/Form/Section/MaterialSection/MaterialSection.js

@@ -35,7 +35,7 @@ function MaterialSection(_a) {
                 : 'normal',
         } }, { children: (_b = section.steps) === null || _b === void 0 ? void 0 : _b.map(function (idStep) {
             var step = form.steps[idStep];
-            return (_jsx(StepComponent, { editable: editable, step: step, level: 0 }, idStep));
+            return (_jsx(StepComponent, { editable: editable, step: step }, idStep));
         }) })));
 }
 export default MaterialSection;

package/dist/Form/Terms/Term/MaterialTerm/MaterialTerm.js

@@ -47,7 +47,7 @@ function TermComponent(_a) {
         rules: {
             required: true,
         },
-        defaultValue: originalValue,
+        defaultValue: originalValue !== null && originalValue !== void 0 ? originalValue : false,
         shouldUnregister: true,
     }), _e = _d.field, ref = _e.ref, field = __rest(_e, ["ref"]), error = _d.fieldState.error;
     var _f = useState(false), showDialog = _f[0], setShowDialog = _f[1];

package/dist/FormSteps/@Construction/CBRElementStep/CBRElementStep.js

@@ -80,14 +80,14 @@ function ElementSubStepRenderer(_a) {
     var _b;
     var value = _a.value, stepProps = __rest(_a, ["value"]);
     var form = useContext(FormContext);
-    if (!value || stepProps == undefined) {
+    if (!value || stepProps === undefined) {
         return _jsx("div", {});
     }
     var subStep = form.steps[(_b = stepProps.step.subStep) !== null && _b !== void 0 ? _b : ''];
     if ((subStep === null || subStep === void 0 ? void 0 : subStep.type) !== CBRFormStepTypes.CBR_LOCATIVAS) {
         return _jsx("div", {});
     }
-    return (_jsx(SmartSelectStep, __assign({}, stepProps, { step: subStep, level: stepProps.level + 1, icon: _jsx(InputIcon, { icon: 'LEAK' }), getOptions: getElementOptions, calcDepError: calcDepError, getOptionSelected: function (option, value) {
+    return (_jsx(SmartSelectStep, __assign({}, stepProps, { step: subStep, icon: _jsx(InputIcon, { icon: 'LEAK' }), getOptions: getElementOptions, calcDepError: calcDepError, getOptionSelected: function (option, value) {
             return option.id === value.id;
         }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; }, renderNestedSteps: function (value) { return (_jsx(ElementSubStepRenderer, __assign({ value: value }, stepProps, { step: subStep }))); } })));
 }

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CBRIncidentsStepProps } from '../../CBRIncidentsStep';
 import { Incident } from '../MaterialCBRIncidentsStep';
-declare function IncidentComponent({ step, level, incident, handleDelete, ...others }: CBRIncidentsStepProps & {
+declare function IncidentComponent({ step, incident, handleDelete, ...others }: CBRIncidentsStepProps & {
     incident: Incident;
     handleDelete: () => void;
 }): JSX.Element;

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -29,7 +29,7 @@ import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
 import { useContext } from 'react';
 function IncidentComponent(_a) {
-    var step = _a.step, level = _a.level, incident = _a.incident, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "level", "incident", "handleDelete"]);
+    var step = _a.step, incident = _a.incident, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "incident", "handleDelete"]);
     var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
@@ -50,6 +50,6 @@ function IncidentComponent(_a) {
                         if (others.editable && !postview) {
                             handleDelete();
                         }
-                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), _jsx(StepComponent, __assign({}, others, { step: spaceStep, level: level + 1 })), _jsx(StepComponent, __assign({}, others, { step: elementStep, level: level + 1 })), _jsx(TextAreaStep, __assign({}, others, { step: commentStep, maxLength: 200, level: level + 1 }))] })) })));
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), _jsx(StepComponent, __assign({}, others, { step: spaceStep })), _jsx(StepComponent, __assign({}, others, { step: elementStep })), _jsx(TextAreaStep, __assign({}, others, { step: commentStep, maxLength: 200 }))] })) })));
 }
 export default IncidentComponent;

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.d.ts

@@ -7,5 +7,5 @@ export interface Incident {
     deleted?: boolean;
     num: number;
 }
-declare function CBRIncidentsStep(props: CBRIncidentsStepProps): JSX.Element;
+declare function CBRIncidentsStep({ step, editable, ...others }: CBRIncidentsStepProps): JSX.Element;
 export default CBRIncidentsStep;

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.js

@@ -41,27 +41,37 @@ import FormContext from '../../../../Contexts/FormContext';
 import { addStepsDependencies } from '../../../../States/SiteSlice';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import CustomContext from '../../../../Contexts/CustomContext';
-import { Controller } from 'react-hook-form';
-function Incidents(_a) {
-    var step = _a.step, btnRef = _a.btnRef, editable = _a.editable, onChange = _a.onChange, incidents = _a.incidents, others = __rest(_a, ["step", "btnRef", "editable", "onChange", "incidents"]);
+import { useFormStep } from '../../../StepHooks';
+function CBRIncidentsStep(_a) {
+    var step = _a.step, editable = _a.editable, others = __rest(_a, ["step", "editable"]);
+    console.log(step.required);
+    var _b = useFormStep(step, {
+        rules: {
+            validate: function (array) {
+                return !step.required ||
+                    (step.required &&
+                        array.filter(function (elem) { return !elem.deleted; }).length > 0);
+            },
+        },
+    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, error = _b.error;
     var customSteps = useContext(CustomContext).customSteps;
-    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
     var dispatch = useAppDispatch();
     var form = useContext(FormContext);
     /** Form to pass down with aditional steps */
-    var _c = useState(__assign(__assign({}, form), { steps: __assign({}, form.steps) })), localForm = _c[0], setLocalForm = _c[1];
-    var _d = useState(false), firstRender = _d[0], setFirstRender = _d[1];
+    var _d = useState(__assign(__assign({}, form), { steps: __assign({}, form.steps) })), localForm = _d[0], setLocalForm = _d[1];
+    var _e = useState(false), firstRender = _e[0], setFirstRender = _e[1];
     useEffect(function () {
         setFirstRender(true);
     }, []);
     useEffect(function () {
-        if (firstRender && incidents.length === 0 && !postview && editable) {
+        if (firstRender && value.length === 0 && !postview && editable) {
             handleAddIncident();
         }
     }, [firstRender]);
     var handleAddIncident = function () {
         var _a, _b;
-        var current = incidents.filter(function (incident) { return !incident.deleted; });
+        var current = value.filter(function (incident) { return !incident.deleted; });
         var newIncident = {
             idSpaceStep: CBRFormStepTypes.CBR_TIPO_ESPACIO + '-' + nanoid(),
             idCommentStep: CBRFormStepTypes.CBR_COMENTARIO + '-' + nanoid(),
@@ -72,7 +82,7 @@ function Incidents(_a) {
         newSteps[newIncident.idSpaceStep] = __assign(__assign({}, step.spaceStep), { id: newIncident.idSpaceStep, type: CBRFormStepTypes.CBR_TIPO_ESPACIO, dependencies: step.dependencies });
         newSteps[newIncident.idCommentStep] = __assign(__assign({}, step.commentStep), { id: newIncident.idCommentStep, type: CBRFormStepTypes.CBR_COMENTARIO });
         addRecursiveElementStep(newIncident.idElementStep, step.elementStep, null, newSteps, (_b = (_a = step.dependencies) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
-        onChange(__spreadArray(__spreadArray([], incidents, true), [newIncident], false));
+        onChange(__spreadArray(__spreadArray([], value, true), [newIncident], false));
         setLocalForm(__assign(__assign({}, localForm), { steps: newSteps }));
         dispatch(addStepsDependencies({
             steps: newSteps,
@@ -98,8 +108,8 @@ function Incidents(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), _jsx(FormContext.Provider, __assign({ value: localForm }, { children: incidents.map(function (incident, index) { return (_jsx(IncidentComponent, __assign({ incident: incident, step: step, editable: editable, handleDelete: function () {
-                        var tempIncidents = __spreadArray([], incidents, true);
+                } }, { children: step.description }))), _jsx(FormContext.Provider, __assign({ value: localForm }, { children: value.map(function (incident, index) { return (_jsx(IncidentComponent, __assign({ incident: incident, step: step, editable: editable, handleDelete: function () {
+                        var tempIncidents = __spreadArray([], value, true);
                         tempIncidents[index].deleted = true;
                         var n = 1;
                         for (var _i = 0, tempIncidents_1 = tempIncidents; _i < tempIncidents_1.length; _i++) {
@@ -110,20 +120,10 @@ function Incidents(_a) {
                             }
                         }
                         onChange(tempIncidents);
-                    } }, others), index)); }) })), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                    } }, others), index)); }) })), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _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) {
                                 handleAddIncident();
                             }
-                        } })] }))] })));
-}
-function CBRIncidentsStep(props) {
-    return (_jsx(Controller, { name: props.step.id, defaultValue: [], rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, value = _b.value, field = __rest(_b, ["ref", "value"]);
-            return (_jsx(Incidents, __assign({}, props, field, { incidents: value, onChange: field.onChange, btnRef: ref })));
-        } }));
+                        } })] })), !!error && value.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
 }
 export default CBRIncidentsStep;

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.module.css

@@ -26,3 +26,9 @@
     margin-bottom: 3px;
     width: fit-content;
 }
+
+.errorMsg {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    margin-left: 15px;
+}

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.d.ts

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

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

@@ -56,28 +56,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useContext, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
 import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes, } from '../../../constants/FormStepTypes';
-import styles from './MaterialApiSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { useController, useFormContext } from 'react-hook-form';
-import { calcFillerSize } from '../../StepFunctions';
-import { SmartSelect } from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
 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';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 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 step = _a.step, editable = _a.editable, others = __rest(_a, ["step", "editable"]);
     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];
     function calcOptionId(option) {
         var _a;
         return (_a = option === null || option === void 0 ? void 0 : option[step.idAttribute]) !== null && _a !== void 0 ? _a : '';
@@ -86,14 +77,7 @@ function ApiSelectorComponent(_a) {
         var _a;
         return (_a = option === null || option === void 0 ? void 0 : option[step.labelAttribute]) !== null && _a !== void 0 ? _a : '';
     }
-    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 () {
-        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 (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, __assign({}, others, { 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++) {
@@ -103,48 +87,21 @@ function ApiSelectorComponent(_a) {
                     }
                 }
                 return undefined;
-            }, getValueString: function (value) { return calcOptionLabel(value); } })));
-    };
-    var mapNestedOption = function () {
-        if (value) {
-            var currentOption = step.options[calcOptionId(value)];
-            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 (_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: 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"))] })));
-    }
-    else {
-        return (_jsxs(React.Fragment, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize && (_jsx("div", { className: styles.separator }))] }));
-    }
-}
-export default ApiSelectorStep;
-function ApiSelectorStep(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,
-        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 })));
+            }, getValueString: function (value) { return calcOptionLabel(value); }, renderNestedSteps: function (value) {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                var currentOption = step.options[calcOptionId(value)];
+                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 (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                        }) }));
+                }
+                else
+                    return _jsx(_Fragment, {});
+            } })) })));
 }
+export default ApiSelectorComponent;
 var getApiOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
     function calcOptionId(option) {
         var _a;

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

@@ -1,16 +0,0 @@
-.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/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts

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

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

@@ -9,92 +9,37 @@ 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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
-import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
-import { useController, useFormContext } from 'react-hook-form';
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useContext } 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, 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;
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function CheckBoxStep(_a) {
+    var step = _a.step, editable = _a.editable;
+    var _b = useFormStep(step, {
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, error = _b.error, field = _b.field;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.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 = _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 renderCheckbox = function () {
-        return (_jsxs("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: [_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]
-                            ? formStyle.errorColor
-                            : formStyle.descriptionTextColor,
-                    } }, { children: errors[step.id]
-                        ? 'Este campo es obligatorio'
-                        : step.description })))] }), step.id));
-    };
     var renderNested = function () {
         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 (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idStep));
+                return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
             }) }));
     };
-    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: [renderCheckbox(), renderNested(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
-                        width: fillerSize,
-                    } }, "SEPARATOR"))] })));
-    }
-    else {
-        return (_jsxs(React.Fragment, { children: [renderCheckbox(), renderNested(), level === 0 && step.maxSize && (_jsx("div", { className: styles.separator }))] }));
-    }
-}
-function CheckBoxStep(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(CheckBox, __assign({}, props, field, { inputRef: ref, onChange: onChange })));
+    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsxs(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }))), _jsx(RoundedCheckBox, __assign({}, field, { inputRef: ref, onChange: onChange, "data-testid": step.id, padding: "0px", size: "1.6rem", error: !!error, cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value }))] })), (step.description || !!error) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
+                            color: error
+                                ? formStyle.errorColor
+                                : formStyle.descriptionTextColor,
+                        } }, { children: error ? 'Este campo es obligatorio' : step.description })))] })), renderNested()] })));
 }
 export default CheckBoxStep;

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

@@ -1,14 +1,3 @@
-.container {
-    width: fit-content;
-    max-width: calc(100% - 20px);
-    display: flex;
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 5px;
-    margin-bottom: 0px;
-    flex-direction: column;
-}
-
 .checkboxLbl {
     font-size: 18px;
     margin-right: 10px;
@@ -35,20 +24,3 @@
     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/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.d.ts

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