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

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 })));
-}

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -32,7 +32,7 @@ import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
 function Collapsible(_a) {
     var _b, _c, _d, _e;
-    var step = _a.step, open = _a.open, setOpen = _a.setOpen, level = _a.level, others = __rest(_a, ["step", "open", "setOpen", "level"]);
+    var step = _a.step, open = _a.open, setOpen = _a.setOpen, others = __rest(_a, ["step", "open", "setOpen"]);
     var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     var form = useContext(FormContext);
     var errors = useFormContext().formState.errors;
@@ -58,7 +58,7 @@ function Collapsible(_a) {
                             : 0,
                 } }, { children: _jsx("div", __assign({ className: styles.contentContainer, ref: contentRef }, { children: step.steps.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep, level: level + 1 })));
+                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep })));
                     }) })) })), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
                 } })] }));

package/dist/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -9,52 +9,21 @@ 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 styles from './MaterialDatePickerStep.module.css';
-import { useController } from 'react-hook-form';
 import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
-import { calcStepWidth } from '../../StepFunctions';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import FormContext from '../../../Contexts/FormContext';
-import { useCallback, useContext } from 'react';
-import { useStepDependency } from '../../StepHooks';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 function DatePickerStep(_a) {
     var _b;
     var step = _a.step, editable = _a.editable, defaultValue = _a.defaultValue;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
     var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var form = useContext(FormContext);
-    var _d = useStepDependency(step, defaultValue), handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
-    var _e = useController({
-        name: step.id,
+    var _d = useFormStep(step, {
+        defaultValue: defaultValue,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-        shouldUnregister: true,
-        defaultValue: originalValue,
-    }), _f = _e.field, ref = _f.ref, field = __rest(_f, ["ref"]), error = _e.fieldState.error;
-    var onChange = useCallback(function (value) {
-        handleStepDep(value);
-        field.onChange(value);
-    }, [handleStepDep, field]);
-    return (_jsx("div", __assign({ className: styles.container, style: {
-            width: currentBreakPoint <= step.size
-                ? '100%'
-                : calcStepWidth(step.size, form.size),
-            minHeight: step.description || (!postview && editable && step.required)
-                ? '55px'
-                : '43px',
-        } }, { children: _jsx(RoundedDatePicker, __assign({}, field, { onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required })) })));
+    }), ref = _d.ref, value = _d.value, onChange = _d.onChange, error = _d.error, field = _d.field;
+    return (_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedDatePicker, __assign({}, field, { value: value, onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, error: !!error, required: step.required })) })));
 }
 export default DatePickerStep;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.d.ts

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

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -45,46 +45,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useContext, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
-import styles from './MaterialEntityValuePickerStep.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 InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-function EntityValuePickerComponent(_a) {
-    var step = _a.step, error = _a.error, level = _a.level, value = _a.value, editable = _a.editable, inputRef = _a.inputRef, onBlur = _a.onBlur, onChange = _a.onChange, handleSizeChange = _a.handleSizeChange;
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+function EntityValuePickerStep(_a) {
+    var step = _a.step, editable = _a.editable;
     var form = useContext(FormContext);
-    var getValues = useFormContext().getValues;
-    var currentBreakPoint = useAppSelector(selectBreakPoint);
-    var _b = useState(level === 0
-        ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _b[0], setFillerSize = _b[1];
-    var sizeChange = function () {
-        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-        if (level === 0) {
-            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        }
-    };
-    var renderSelect = function () {
-        return (_jsx(SmartSelect, { onBlur: onBlur, error: error, onChange: onChange, level: level, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+    return (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
                 return option._id === value._id;
             }, calcDepError: function (steps) {
                 for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
@@ -94,48 +67,21 @@ function EntityValuePickerComponent(_a) {
                     }
                 }
                 return undefined;
-            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; } }));
-    };
-    var mapNestedOption = function () {
-        if (value) {
-            var currentOption = step.options[value._id];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.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 }))] }));
-    }
+            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                var currentOption = step.options[value._id];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.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 EntityValuePickerStep;
-function EntityValuePickerStep(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(EntityValuePickerComponent, __assign({}, props, field, { error: error, inputRef: ref, onChange: onChange })));
-}
 var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
     var urlPath, _i, _a, path, idEntityValue, currentValue, params, _b, _c, filter, currentValue, url, response;
     var _d, _e, _f, _g, _h;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.d.ts

@@ -14,5 +14,5 @@ export interface UploadedFileObject {
     downloadUrl?: string;
 }
 export declare function isUploadedFileObject(file: UploadedFileObject | FileObject): file is UploadedFileObject;
-declare function UploadStepComponent(props: FileUploadStepProps): JSX.Element;
-export default UploadStepComponent;
+declare function FileUploadStep({ step, editable }: FileUploadStepProps): JSX.Element;
+export default FileUploadStep;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -45,17 +45,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -67,26 +56,34 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialFileUploadStep.module.css';
-import { useController, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
 import { getUploadUrls, postFile } from '../../../Services/FileService';
 import FileComponent from './FileComponent/FileComponent';
 import maxSize from '../../../constants/Files/FileMaxSize';
 import { useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 export function isUploadedFileObject(file) {
     return file.state === undefined && file.S3Key !== undefined;
 }
 function FileUploadStep(_a) {
-    var step = _a.step, value = _a.value, btnRef = _a.btnRef, onChange = _a.onChange, editable = _a.editable, fieldError = _a.fieldError;
+    var step = _a.step, editable = _a.editable;
+    var _b = useFormStep(step, {
+        rules: {
+            validate: function (array) {
+                return ((step.required && array.length > 0) || !step.required) &&
+                    array.find(function (file) { return !file.S3Key; }) === undefined;
+            },
+        },
+    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, fieldError = _b.error;
     var fetchDownloadUrl = useContext(CustomContext).fetchDownloadUrl;
-    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, idOrganization = _b.idOrganization, postview = _b.postview;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, idOrganization = _c.idOrganization, postview = _c.postview;
     var clearErrors = useFormContext().clearErrors;
-    var _c = useState(undefined), error = _c[0], setError = _c[1];
-    var _d = useState([]), fileChange = _d[0], setFileChange = _d[1];
+    var _d = useState(undefined), error = _d[0], setError = _d[1];
+    var _e = useState([]), fileChange = _e[0], setFileChange = _e[1];
     var inputRef = useRef();
     useEffect(function () {
         var filesToFetchLink = [];
@@ -210,7 +207,7 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable == false || postview
+    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable === false || postview
             ? {}
             : {
                 minHeight: '100px',
@@ -240,7 +237,7 @@ function FileUploadStep(_a) {
                         }
                         inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 var input = inputRef.current;
                                 if (input !== null) {
@@ -265,25 +262,4 @@ function FileUploadStep(_a) {
                         }
                     }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) })), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }))] })));
 }
-function UploadStepComponent(props) {
-    var step = props.step;
-    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
-    var _b = useController({
-        name: step.id,
-        rules: {
-            validate: function (array) {
-                return ((props.step.required && array.length > 0) ||
-                    !props.step.required) &&
-                    array.find(function (file) { return !file.S3Key; }) === 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(FileUploadStep, __assign({}, props, field, { btnRef: ref, fieldError: error, onChange: onChange })));
-}
-export default UploadStepComponent;
+export default FileUploadStep;

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

@@ -20,7 +20,7 @@ import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
 function MapperElementComponent(props) {
     var _a;
-    var level = props.level, step = props.step, element = props.element, editable = props.editable;
+    var step = props.step, element = props.element, editable = props.editable;
     var customContext = useContext(CustomContext);
     var form = useContext(FormContext);
     if (element.deleted) {
@@ -35,7 +35,7 @@ function MapperElementComponent(props) {
         return (_jsx(CustomContext.Provider, __assign({ value: nestedCustomContext }, { children: step.rootSteps.map(function (idSubStep) {
                 var _a;
                 var subStep = form.steps[element.ids[idSubStep]];
-                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep], level: level + 1 })));
+                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep] })));
             }) })));
     };
     switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {

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

@@ -56,10 +56,10 @@ function MapperStep(_a) {
         name: step.id,
         rules: {
             validate: function (array) {
-                return (step.required &&
-                    array.filter(function (elem) { return !elem.deleted; })
-                        .length > 0) ||
-                    !step.required;
+                return !step.required ||
+                    (step.required &&
+                        array.filter(function (elem) { return !elem.deleted; })
+                            .length > 0);
             },
         },
         shouldUnregister: true,
@@ -122,7 +122,11 @@ function MapperStep(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    value.filter(function (elem) { return !elem.deleted; })
+                        .length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel +
+                            (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }

package/dist/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.d.ts

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