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

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

@@ -15,6 +15,7 @@ export interface Form {
     Branding?: Branding;
     classifiers?: Record<string, Classifier>;
     terms?: Term[];
+    hiddenSteps?: string[];
 }
 export interface FormSize {
     blockNum: 1 | 2 | 3 | 4;

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/AppFunctions.js

@@ -15,7 +15,7 @@ import { getRawText, stringToDraft } from '../Utils/DraftFunctions';
 import { calcSubSteps } from '../FormSteps/StepFunctions';
 export var calcValuesStore = function (form, originalValues, postview, customSteps) {
     var _a;
-    var _b;
+    var _b, _c;
     if (originalValues === void 0) { originalValues = {}; }
     if (postview === void 0) { postview = false; }
     if (customSteps === void 0) { customSteps = {}; }
@@ -23,10 +23,10 @@ export var calcValuesStore = function (form, originalValues, postview, customSte
         global: {},
         sections: {},
     };
-    for (var _i = 0, _c = Object.keys(originalValues); _i < _c.length; _i++) {
-        var idValue = _c[_i];
+    for (var _i = 0, _d = Object.keys(originalValues); _i < _d.length; _i++) {
+        var idValue = _d[_i];
         var step = form.steps[idValue];
-        if (step) {
+        if (step && !((_b = form.hiddenSteps) === null || _b === void 0 ? void 0 : _b.includes(step.id))) {
             var value = mapOriginalValue(step, originalValues[step.id], values, form);
             if (value !== undefined) {
                 if (!values.sections[step.idSection])
@@ -40,17 +40,17 @@ export var calcValuesStore = function (form, originalValues, postview, customSte
     }
     if (postview)
         return values;
-    for (var _d = 0, _e = Object.values(form.sections); _d < _e.length; _d++) {
-        var section = _e[_d];
-        for (var _f = 0, _g = section.steps; _f < _g.length; _f++) {
-            var idStep = _g[_f];
+    for (var _e = 0, _f = Object.values(form.sections); _e < _f.length; _e++) {
+        var section = _f[_e];
+        for (var _g = 0, _h = section.steps; _g < _h.length; _g++) {
+            var idStep = _h[_g];
             var step = form.steps[idStep];
             if (step.type !== StepTypes.MAPPER ||
-                ((_b = values.sections[step.idSection]) === null || _b === void 0 ? void 0 : _b[step.id]))
+                ((_c = values.sections[step.idSection]) === null || _c === void 0 ? void 0 : _c[step.id]))
                 continue;
             if (!values.sections[step.idSection])
                 values.sections[step.idSection] = {};
-            var _h = addMapperStep(step, customSteps), element = _h.element, mappers = _h.mappers;
+            var _j = addMapperStep(step, customSteps), element = _j.element, mappers = _j.mappers;
             values.sections[step.idSection] = __assign(__assign(__assign({}, values.sections[step.idSection]), mappers), (_a = {}, _a[step.id] = [element], _a));
         }
     }
@@ -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

@@ -30,16 +30,24 @@ import RoundedCheckBox from '../../../../Shared/RoundedCheckBox/RoundedCheckBox'
 import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import styles from './MaterialTerm.module.css';
 import { useAppSelector } from '../../../../hooks';
+import { createSelector } from '@reduxjs/toolkit';
+var selectOriginalValue = createSelector([
+    function (state) { return state.site.values; },
+    function (state, idTerm) { return idTerm; },
+], function (values, idTerm) { return values.global[idTerm]; });
 function TermComponent(_a) {
     var _b;
     var term = _a.term, tempError = _a.tempError;
     var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var originalValue = useAppSelector(function (state) {
+        return selectOriginalValue(state, term.id);
+    });
     var _d = useController({
         name: term.id,
         rules: {
             required: true,
         },
-        defaultValue: false,
+        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/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;

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -9,120 +9,63 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
-import styles from './MaterialClassifierSelectorStep.module.css';
 import StepComponent from '../../Step';
-import { useController, useFormContext } from 'react-hook-form';
-import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function ClassifierSelector(_a) {
-    var _b, _c;
-    var step = _a.step, level = _a.level, value = _a.value, onBlur = _a.onBlur, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, handleSizeChange = _a.handleSizeChange;
-    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, preview = _d.preview;
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function ClassifierSelectorStep(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, editable = _a.editable;
+    var _f = useFormStep(step, {
+        sizeChange: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error, field = _f.field;
+    var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview, preview = _g.preview;
     var form = useContext(FormContext);
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _e = useFormContext(), getValues = _e.getValues, errors = _e.formState.errors;
-    var _f = useState(level === 0
-        ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _f[0], setFillerSize = _f[1];
-    if (!step.idClassifier) {
+    if (!step.idClassifier)
         return _jsx("div", {});
-    }
     var classifier = (_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[step.idClassifier];
-    if (!classifier) {
+    if (!classifier)
         return _jsx("div", {});
-    }
-    var options = (_c = classifier.children) === null || _c === void 0 ? void 0 : _c.filter(function (idClassifier) {
-        var _a, _b;
-        return ((_a = step.options[idClassifier]) === null || _a === void 0 ? void 0 : _a.type) !==
-            ClassifierOptionTypes.HIDE &&
-            ((_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[idClassifier]);
-    }).map(function (idClassifier) {
-        var _a, _b, _c;
-        var classifier = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier];
-        return {
-            value: classifier === null || classifier === void 0 ? void 0 : classifier._id,
-            label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && preview
-                ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
-                : classifier === null || classifier === void 0 ? void 0 : classifier.name,
-        };
-    });
-    var sizeChange = function () {
-        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-        if (level === 0) {
-            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        }
-    };
-    var renderSelect = function () {
-        var _a, _b, _c, _d;
-        return (_jsx("div", __assign({ className: styles.container, style: {
-                width: currentBreakPoint <= step.size
-                    ? '100%'
-                    : calcStepWidth(step.size, form.size),
-                minHeight: step.description ||
-                    (!postview && editable && step.required)
-                    ? '55px'
-                    : '43px',
-            }, "data-testid": step.id }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
-                    onChange(value);
-                    sizeChange();
-                }, getOptionSelected: function (option, value) {
-                    return option.value === (value === null || value === void 0 ? void 0 : value.value);
-                }, helperText: (_d = (_c = (_b = errors[step.id]) === null || _b === void 0 ? void 0 : _b.message) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : step.description, error: !!errors[step.id] }) }), step.id));
-    };
+    var options = useMemo(function () {
+        var _a;
+        return (_a = classifier.children) === null || _a === void 0 ? void 0 : _a.filter(function (idClassifier) {
+            var _a, _b;
+            return ((_a = step.options[idClassifier]) === null || _a === void 0 ? void 0 : _a.type) !==
+                ClassifierOptionTypes.HIDE &&
+                ((_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[idClassifier]);
+        }).map(function (idClassifier) {
+            var _a, _b, _c;
+            var classifier = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier];
+            return {
+                value: classifier === null || classifier === void 0 ? void 0 : classifier._id,
+                label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && preview
+                    ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
+                    : classifier === null || classifier === void 0 ? void 0 : classifier.name,
+            };
+        });
+    }, []);
     var mapNestedOption = function () {
         if (value) {
             var currentOption = step.options[value.value];
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
                 return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
                         var subStep = form.steps[idStep];
-                        return (_jsx(StepComponent, { step: subStep, level: level + 1, editable: editable, handleSizeChange: sizeChange }, idStep));
+                        return (_jsx(StepComponent, { step: subStep, editable: editable }, 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 }))] }));
-    }
+    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, disabled: false, loading: false, options: options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_c = formStyle.stepBackgroundColor) !== null && _c !== void 0 ? _c : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: onChange, getOptionSelected: function (option, value) {
+                        return option.value === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_e = (_d = error === null || error === void 0 ? void 0 : error.message) === null || _d === void 0 ? void 0 : _d.toString()) !== null && _e !== void 0 ? _e : step.description, error: !!error })) })), mapNestedOption()] })));
 }
 export default ClassifierSelectorStep;
-function ClassifierSelectorStep(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(ClassifierSelector, __assign({}, props, field, { inputRef: ref, onChange: onChange })));
-}