@arquimedes.co/eureka-forms 2.0.23 → 2.0.24-test

package/dist/App/App.d.ts

@@ -39,6 +39,8 @@ export interface AppProps {
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
     /** Function to call after the confimation dialog has been closed */
     handleConfirmed?: () => void;
+    /** Function called to scroll to the top */
+    scrollToTop?: () => void;
 }
 export declare const IdFormContext: React.Context<string>;
 declare function AppComponent({ formData, valuesData, ...props }: AppProps): JSX.Element;

package/dist/App/App.js

@@ -74,6 +74,6 @@ function App(_a) {
                 sendLabel: props.sendLabel,
                 fetchDownloadUrl: props.fetchDownloadUrl,
                 customStepProps: (_g = props.customStepProps) !== null && _g !== void 0 ? _g : {},
-            } }, { children: _jsx("div", __assign({ className: styles.container }, { children: _jsx(FormComponent, { form: form, reload: reload, branding: branding, apiKey: props.apiKey, isWidget: !!isWidget, customSteps: customSteps, containerRef: containerRef, customSubmit: props.customSubmit, customSubmitBtns: props.customSubmitBtns }) })) })));
+            } }, { children: _jsx("div", __assign({ className: styles.container }, { children: _jsx(FormComponent, { form: form, reload: reload, branding: branding, apiKey: props.apiKey, isWidget: !!isWidget, customSteps: customSteps, containerRef: containerRef, customSubmit: props.customSubmit, scrollToTop: props.scrollToTop, customSubmitBtns: props.customSubmitBtns }) })) })));
     }
 }

package/dist/App/AppFunctions.js

@@ -173,10 +173,9 @@ export var mapOriginalValue = function (step, value, values, form) {
         }
         case StepTypes.CLASSIFIER_SELECTOR: {
             var stepClassifier = (_d = form === null || form === void 0 ? void 0 : form.classifiers) === null || _d === void 0 ? void 0 : _d[(_e = step.idClassifier) !== null && _e !== void 0 ? _e : ''];
-            if (stepClassifier) {
+            if (stepClassifier && !value.value) {
                 var classifier = (_f = form.classifiers) === null || _f === void 0 ? void 0 : _f[value];
-                if (!(value === null || value === void 0 ? void 0 : value.value))
-                    return { value: value, label: classifier === null || classifier === void 0 ? void 0 : classifier.name };
+                return { value: value, label: classifier === null || classifier === void 0 ? void 0 : classifier.name };
             }
             break;
         }

package/dist/Form/Form.d.ts

@@ -29,10 +29,12 @@ export interface BaseFormProps extends CustomAppProps {
     apiKey: string | undefined;
     customSubmit: AppProps['customSubmit'];
     containerRef: React.RefObject<HTMLDivElement>;
+    scrollToTop?: () => void;
 }
 export interface FormComponentProps extends CustomAppProps {
     /** Function called when users clicks submit */
     onSubmit: (values: FieldValues) => Promise<any>;
+    scrollToTop?: () => void;
 }
-declare function FormComponent({ form, apiKey, reload, isWidget, branding, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
+declare function FormComponent({ form, apiKey, reload, isWidget, branding, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
 export default FormComponent;

package/dist/Form/Form.js

@@ -84,7 +84,7 @@ export var getLocale = function () {
 function FormComponent(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, scrollToTop = _a.scrollToTop, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns;
     var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview;
     var formMethods = useForm({
         mode: 'onTouched',
@@ -168,7 +168,7 @@ function FormComponent(_a) {
         return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: function () {
                         reload();
                         setShowConfirmation(undefined);
-                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, customSubmitBtns: customSubmitBtns }) })) }))] }));
+                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
     };
     if (!idOrganization)
         return _jsx(_Fragment, {});

package/dist/Form/FormFunctions.js

@@ -88,6 +88,7 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
                 return mappedValues;
             }
             case StepTypes.TITLE:
+                deleteIds.push(idStep);
                 return;
             default:
                 if ((step === null || step === void 0 ? void 0 : step.type) === 'CBR_INCIDENCIAS') {

package/dist/Form/FormTypes/StepperForm/StepperForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../../Form';
-declare function StepperForm({ onSubmit }: FormComponentProps): JSX.Element;
+declare function StepperForm({ onSubmit, scrollToTop, }: FormComponentProps): JSX.Element;
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -59,7 +59,7 @@ import { getAppState } from '../../../Utils/store';
 import { IdFormContext } from '../../../App/App';
 function StepperForm(_a) {
     var _this = this;
-    var onSubmit = _a.onSubmit;
+    var onSubmit = _a.onSubmit, scrollToTop = _a.scrollToTop;
     var _b = useState(undefined), loading = _b[0], setLoading = _b[1];
     var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
     var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
@@ -75,6 +75,7 @@ function StepperForm(_a) {
     });
     var handlePrevious = useCallback(function () {
         dispatch(SiteReducer.handlePrevious(getValues()));
+        scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
     }, []);
     var handleNext = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
         var valid, state, values, response;
@@ -92,6 +93,7 @@ function StepperForm(_a) {
                     }
                     if (next.length > 0) {
                         dispatch(SiteReducer.handleNext(getValues()));
+                        scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
                         return [2 /*return*/, setLoading(undefined)];
                     }
                     return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];

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

@@ -45,6 +45,7 @@ import { useFormStep } from '../../../StepHooks';
 function CBRIncidentsStep(_a) {
     var step = _a.step, editable = _a.editable, others = __rest(_a, ["step", "editable"]);
     var _b = useFormStep(step, {
+        defaultValue: [],
         rules: {
             validate: function (array) {
                 return !step.required ||

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

@@ -22,6 +22,7 @@ import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialI
 function CheckBoxStep(_a) {
     var step = _a.step, editable = _a.editable;
     var _b = useFormStep(step, {
+        defaultValue: false,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },

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

@@ -19,10 +19,12 @@ import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
 function ClassifierSelectorStep(_a) {
     var _b, _c, _d, _e;
     var step = _a.step, editable = _a.editable;
     var _f = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
         sizeChange: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,

package/dist/FormSteps/CustomStep.js

@@ -33,7 +33,7 @@ function CustomStepComponent(_a) {
     var customStepProps = useContext(CustomStepPropsContext).customStepProps;
     var dependencyStore = useAppSelector(function (state) { return state.site.dependencies; });
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var dependencyInfo = useStepDependency(props.step);
+    var dependencyInfo = useStepDependency(props.step, undefined);
     return customStep.component(__assign(__assign(__assign(__assign(__assign({}, global), dependencyInfo), props), { dependencyStore: dependencyStore, widthStats: widthStats, form: form, customStepProps: customStepProps }), ((_b = customStep.componentProps) !== null && _b !== void 0 ? _b : {})));
 }
 export default CustomStepComponent;

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

@@ -72,6 +72,7 @@ export function isUploadedFileObject(file) {
 function FileUploadStep(_a) {
     var step = _a.step, editable = _a.editable;
     var _b = useFormStep(step, {
+        defaultValue: [],
         rules: {
             validate: function (array) {
                 return ((step.required && array.length > 0) || !step.required) &&

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -2,12 +2,16 @@
 import { MapperStepProps } from '../MapperStep';
 import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';
-declare function MapperStep<Type>({ step, editable, customAdd, ...others }: MapperStepProps<Type>): JSX.Element;
-export declare function CustomMapperStep<Type>({ step, error, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
-    loading: boolean;
+import { Form } from '../../../@Types';
+export interface MapperComponentProps<Type> extends MapperStepProps<Type> {
+    form: Form;
+    loading?: boolean;
     error: FieldError | undefined;
     onChange: (elements: MapperElement<Type>[]) => void;
+    handleAddElement: (elementValue?: Type) => void;
     elements: MapperElement<Type>[];
     inputRef: any;
-}): JSX.Element;
+}
+declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
+export declare function CustomMapperStep<Type>(props: Omit<MapperComponentProps<Type>, 'form' | 'handleAddElement'>): JSX.Element;
 export default MapperStep;

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

@@ -44,14 +44,53 @@ import CustomContext from '../../../Contexts/CustomContext';
 import { useFormStep } from '../../StepHooks';
 import { addMapperStep } from '../../../App/AppFunctions';
 import { calcMapperSubSteps } from '../../../Form/FormFunctions';
-function MapperStep(_a) {
-    var step = _a.step, editable = _a.editable, customAdd = _a.customAdd, others = __rest(_a, ["step", "editable", "customAdd"]);
-    var form = useContext(FormContext);
+function MapperComponent(_a) {
+    var form = _a.form, step = _a.step, error = _a.error, loading = _a.loading, inputRef = _a.inputRef, editable = _a.editable, customAdd = _a.customAdd, elements = _a.elements, onChange = _a.onChange, handleAddElement = _a.handleAddElement, others = __rest(_a, ["form", "step", "error", "loading", "inputRef", "editable", "customAdd", "elements", "onChange", "handleAddElement"]);
+    var handleDeleteElement = useCallback(function (index) { return function () {
+        var tempElements = __spreadArray([], elements, true);
+        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+        onChange(tempElements);
+    }; }, [elements, onChange]);
+    var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
     var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
+    var container = useMemo(function () {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case MapperStyleTypes.LIST:
+                return { container: styles.listContainer };
+            case MapperStyleTypes.PILL:
+            default:
+                return { container: styles.pillContainer };
+        }
+    }, [step]).container;
+    var mapElements = function () {
+        return (_jsx(FormContext.Provider, __assign({ value: form }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, loading: loading, handleDelete: handleDeleteElement(index) }))); }) })));
+    };
+    if (step.style.type === MapperStyleTypes.INLINE)
+        return _jsx(React.Fragment, { children: mapElements() });
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    elements.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();
+                            }
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
+                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+}
+function MapperStep(props) {
+    var step = props.step, editable = props.editable, customAdd = props.customAdd;
+    var form = useContext(FormContext);
+    var postview = useAppSelector(function (state) { return state.global; }).postview;
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
     var setValue = useFormContext().setValue;
-    var _c = useFormStep(step, {
+    var _a = useFormStep(step, {
+        defaultValue: [],
         rules: {
             validate: function (array) {
                 return !step.required ||
@@ -59,9 +98,9 @@ function MapperStep(_a) {
                         array.filter(function (elem) { return !elem.deleted; }).length > 0);
             },
         },
-    }), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error;
-    var _d = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
-    //Por alguna razón si se saca del componente no se ejecuta.
+    }), ref = _a.ref, value = _a.value, onChange = _a.onChange, error = _a.error;
+    var _b = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _b[0], setLocalSteps = _b[1];
+    //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
     useEffect(function () {
         if (value.length === 0 && !postview && editable && step.creatable) {
             if (!customAdd)
@@ -85,50 +124,16 @@ function MapperStep(_a) {
             allSteps: __assign(__assign({}, form.steps), steps),
         }));
     }, [step, form, customSteps, value, onChange]);
-    var handleDeleteElement = useCallback(function (index) { return function () {
-        var tempElements = __spreadArray([], value, true);
-        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        onChange(tempElements);
-    }; }, [value, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
-    var container = useMemo(function () {
-        var _a;
-        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
-            case MapperStyleTypes.LIST:
-                return { container: styles.listContainer };
-            case MapperStyleTypes.PILL:
-            default:
-                return { container: styles.pillContainer };
-        }
-    }, [step]).container;
-    var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
-    };
-    if (step.style.type === MapperStyleTypes.INLINE)
-        return _jsx(React.Fragment, { children: mapElements() });
-    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
-                    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 &&
-                (!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();
-                            }
-                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(ref, !editable || postview, handleAddElement)] }))), !!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" })))] })));
+    return (_jsx(MapperComponent, __assign({}, props, { error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value })));
 }
-export function CustomMapperStep(_a) {
-    var step = _a.step, error = _a.error, editable = _a.editable, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, elements = _a.elements, inputRef = _a.inputRef, onChange = _a.onChange, others = __rest(_a, ["step", "error", "editable", "customAdd", "loading", "elements", "inputRef", "onChange"]);
+export function CustomMapperStep(props) {
+    var step = props.step, elements = props.elements, onChange = props.onChange;
     var form = useContext(FormContext);
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
     var setValue = useFormContext().setValue;
-    var _d = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
+    var _a = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _a[0], setLocalSteps = _a[1];
     var handleAddElement = useCallback(function (elementValue) {
         var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
         if (elementValue)
@@ -146,40 +151,7 @@ export function CustomMapperStep(_a) {
             allSteps: __assign(__assign({}, form.steps), steps),
         }));
     }, [step, form, customSteps, elements, onChange]);
-    var handleDeleteElement = useCallback(function (index) { return function () {
-        var tempElements = __spreadArray([], elements, true);
-        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        onChange(tempElements);
-    }; }, [elements, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
-    var container = useMemo(function () {
-        var _a;
-        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
-            case MapperStyleTypes.LIST:
-                return { container: styles.listContainer };
-            case MapperStyleTypes.PILL:
-            default:
-                return { container: styles.pillContainer };
-        }
-    }, [step]).container;
-    var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
-    };
-    if (step.style.type === MapperStyleTypes.INLINE)
-        return _jsx(React.Fragment, { children: mapElements() });
-    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
-                    margin: step.description
-                        ? '10px 0px'
-                        : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
-                (!step.max ||
-                    elements.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();
-                            }
-                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
-                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+    return (_jsx(MapperComponent, __assign({}, props, { form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement })));
 }
 export default MapperStep;

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

@@ -18,10 +18,12 @@ import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
+import { calcDefaultValue } from '../../StepFunctions';
 function RatingStep(_a) {
     var _b, _c, _d, _e;
     var step = _a.step, editable = _a.editable;
     var _f = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },

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

@@ -19,10 +19,12 @@ import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
 function SelectorStep(_a) {
     var _b, _c, _d;
     var step = _a.step, editable = _a.editable;
     var _e = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -61,7 +61,7 @@ function SmartSelectStep(_a) {
     var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, renderNestedSteps = _a.renderNestedSteps;
     var _j = useFormStep(step, {
         sizeChange: true,
-        defaultValue: defaultValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },

package/dist/FormSteps/StepHooks.d.ts

@@ -27,14 +27,14 @@ export declare const selectDependencies: ((state: RootState, step: GBaseStep, fo
     clearCache: () => void;
 };
 export interface UseFormStepOptions<ValueType> {
-    defaultValue?: ValueType;
+    defaultValue: ValueType;
     /** If true, will not trigger onChange until the user has finished typing */
     debounce?: boolean;
     rules?: UseControllerProps['rules'];
     /** If the step should trigger a filler(root StepFiller) size change */
     sizeChange?: boolean;
 }
-export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules, debounce, sizeChange, defaultValue, }?: UseFormStepOptions<ValueType>) => {
+export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules, debounce, sizeChange, defaultValue }: UseFormStepOptions<ValueType>) => {
     value: ValueType;
     ref: RefCallBack;
     onChange: (value: ValueType) => void;

package/dist/FormSteps/StepHooks.js

@@ -102,15 +102,15 @@ var calcDeepDependencies = function (idStep, form, deps) {
     return deps;
 };
 export var useFormStep = function (step, _a) {
-    var _b = _a === void 0 ? {} : _a, rules = _b.rules, debounce = _b.debounce, sizeChange = _b.sizeChange, defaultValue = _b.defaultValue;
-    var _c = useState(), timer = _c[0], setTimer = _c[1];
-    var _d = useStepDependency(step, defaultValue), isDependency = _d.isDependency, handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
-    var _e = useController({
+    var rules = _a.rules, debounce = _a.debounce, sizeChange = _a.sizeChange, defaultValue = _a.defaultValue;
+    var _b = useState(), timer = _b[0], setTimer = _b[1];
+    var _c = useStepDependency(step, defaultValue), isDependency = _c.isDependency, handleStepDep = _c.handleStepDep, originalValue = _c.originalValue;
+    var _d = useController({
         name: step.id,
         rules: rules,
         shouldUnregister: true,
         defaultValue: originalValue,
-    }), _f = _e.field, ref = _f.ref, value = _f.value, fieldOnChange = _f.onChange, field = __rest(_f, ["ref", "value", "onChange"]), error = _e.fieldState.error;
+    }), _e = _d.field, ref = _e.ref, value = _e.value, fieldOnChange = _e.onChange, field = __rest(_e, ["ref", "value", "onChange"]), error = _d.fieldState.error;
     var handleSizeChange = useContext(SizeChangeContext);
     var onChange = useCallback(function (value) {
         if (isDependency) {

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -31,6 +31,7 @@ import { ClickAwayListener } from '@material-ui/core';
 import { useAppSelector } from '../../../hooks';
 import { useStepDependency } from '../../StepHooks';
 import { EditorState, convertFromRaw } from 'draft-js';
+import { getRawText } from '../../../Utils/DraftFunctions';
 function TextAreaStep(_a) {
     var _b;
     var step = _a.step, editable = _a.editable;
@@ -38,7 +39,7 @@ function TextAreaStep(_a) {
     var _d = useState(false), hovering = _d[0], setHovering = _d[1];
     var _e = useState(false), focus = _e[0], setFocus = _e[1];
     var _f = useState(), timer = _f[0], setTimer = _f[1];
-    var _g = useStepDependency(step), handleStepDep = _g.handleStepDep, originalValue = _g.originalValue, isDependency = _g.isDependency;
+    var _g = useStepDependency(step, getRawText()), handleStepDep = _g.handleStepDep, originalValue = _g.originalValue, isDependency = _g.isDependency;
     var _h = useController({
         name: step.id,
         shouldUnregister: true,

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,6 +20,7 @@ function TextAreaStep(_a) {
     var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, partial = _d.partial;
     var _e = useFormStep(step, {
         debounce: true,
+        defaultValue: '',
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -24,7 +24,7 @@ function TextInputStep(_a) {
     var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
     var form = useContext(FormContext);
     var _e = useFormStep(step, {
-        defaultValue: defaultValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
         debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { calcStepWidth } from '../../StepFunctions';
+import { calcDefaultValue, calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
 import { useAppSelector } from '../../../hooks';
 import FormContext from '../../../Contexts/FormContext';
@@ -19,7 +19,9 @@ import { useFormStep } from '../../StepHooks';
 function TitleStep(_a) {
     var _b;
     var step = _a.step;
-    var _c = useFormStep(step).value, title = _c.title, description = _c.description;
+    var _c = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
+    }).value, title = _c.title, description = _c.description;
     var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });

package/dist/Shared/Navbar/Navbar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import Navbar from './Navbar';
+declare const meta: {
+    component: typeof Navbar;
+    tags: string[];
+    args: {
+        logo: string;
+        color: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/Shared/Navbar/Navbar.stories.js

@@ -0,0 +1,13 @@
+import Navbar from './Navbar';
+var meta = {
+    component: Navbar,
+    tags: ['autodocs'],
+    args: {
+        logo: 'https://content.capta.co/Capta/CaptaWhite.svg',
+        color: '#3d5a7f',
+    },
+};
+export default meta;
+export var Default = {
+    args: {},
+};

package/dist/Shared/Rating/Rating.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import Rating from './Rating';
+declare const meta: {
+    component: typeof Rating;
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ScaleRating: Story;
+export declare const ScaleRatingWidthValue: Story;
+export declare const LikeRating: Story;
+export declare const LikeRatingWithValue: Story;
+export declare const SatisfactionRating: Story;
+export declare const SatisfactionRatingWidthValue: Story;

package/dist/Shared/Rating/Rating.stories.js

@@ -0,0 +1,59 @@
+import Rating from './Rating';
+import { RatingTypes } from '../../constants/FormStepTypes';
+var meta = {
+    component: Rating,
+    tags: ['autodocs'],
+    args: {},
+};
+export default meta;
+export var ScaleRating = {
+    args: {
+        type: RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var ScaleRatingWidthValue = {
+    args: {
+        type: RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 4,
+    },
+};
+export var LikeRating = {
+    args: {
+        type: RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var LikeRatingWithValue = {
+    args: {
+        type: RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 1,
+    },
+};
+export var SatisfactionRating = {
+    args: {
+        type: RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var SatisfactionRatingWidthValue = {
+    args: {
+        type: RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 3,
+    },
+};

package/dist/Shared/RoundedButton/RoundedButton.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedButton from './RoundedButton';
+declare const meta: {
+    component: typeof RoundedButton;
+    tags: string[];
+    args: {
+        text: string;
+        backgroundColor: string;
+        color: string;
+        disabled: false;
+        fontSize: string;
+        padding: string;
+        borderRadius: number;
+        height: number;
+        bold: false;
+        width: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const DifferentColors: Story;