@arquimedes.co/eureka-forms 3.0.34-test → 3.0.35-test

package/dist/App/AppHooks.js

@@ -125,6 +125,7 @@ export const useSetupApp = (isEmbedded, props) => {
         // Use stringified keys for stable comparison - only changes when content changes
         // Other object/function props (classifiers) are still
         // intentionally excluded to prevent re-renders when parent re-creates these objects
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         apiKey,
         partial,
@@ -149,6 +150,7 @@ export const useSetupApp = (isEmbedded, props) => {
         if (handleConfirmed) {
             handleConfirmed();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return {
         form,
@@ -174,5 +176,6 @@ export const useLogRocket = (organization, form, { apiKey, internal, postview, p
     };
     useEffect(() => {
         void loadLogRocket();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [organization, form]);
 };

package/dist/Form/Form.d.ts

@@ -29,7 +29,7 @@ export interface BaseFormProps extends CustomAppProps {
     isWidget: boolean;
     apiKey: string | undefined;
     customSubmit: AppProps['customSubmit'];
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     scrollToTop?: () => void;
 }
 export interface FormComponentProps extends CustomAppProps {

package/dist/Form/Form.js

@@ -25,7 +25,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         shouldFocusError: true,
     });
     const idForm = useContext(IdFormContext);
-    const recaptchaRef = useRef();
+    const recaptchaRef = useRef(null);
     const dispatch = useAppDispatch();
     const [showConfirmation, setShowConfirmation] = useState();
     const idFocusStep = useAppSelector((state) => state.site.focusStep);
@@ -34,6 +34,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             formMethods.setFocus(idFocusStep);
             dispatch(focusStep(undefined));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
     const onSubmit = useCallback(async (values) => {
         let token = null;
@@ -76,7 +77,9 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         catch (error) {
             console.error(error);
         }
-    }, [customSteps, internal, customSubmit, idOrganization, idForm]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [customSteps, internal, customSubmit, idOrganization, idForm]);
     useWidthStats(containerRef, form, postview, internal);
     const isResponsive = useAppSelector((state) => state.widthStats.isResponsive);
     const renderForm = () => {

package/dist/Form/FormHooks.d.ts

@@ -1,2 +1,2 @@
 import { Form } from '../@Types';
-export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement>, form: Form, postview: boolean, internal: boolean): void;
+export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement | null>, form: Form, postview: boolean, internal: boolean): void;

package/dist/Form/FormHooks.js

@@ -30,5 +30,6 @@ export function useWidthStats(containerRef, form, postview, internal) {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -25,6 +25,7 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
     useEffect(() => {
         if (props.setSubmit)
             props.setSubmit(submit);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.setSubmit]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -46,6 +47,7 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
         values = await onSubmit(values);
         setLoading(false);
         return values;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading)] }))] }));
 }

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

@@ -29,6 +29,7 @@ function StepperForm({ onSubmit, scrollToTop }) {
     const handlePrevious = useCallback(() => {
         dispatch(SiteReducer.handlePrevious({ values: getValues(), form }));
         scrollToTop?.();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleNext = useCallback(async () => {
         setLoading('NEXT');
@@ -57,6 +58,7 @@ function StepperForm({ onSubmit, scrollToTop }) {
         const response = await onSubmit(values);
         setLoading(undefined);
         return response;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});

package/dist/Form/Terms/Terms.js

@@ -14,10 +14,14 @@ function Terms() {
     useEffect(() => {
         if (!isSubmitting)
             return;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setTempError(true);
-        setTimeout(() => {
-            setTempError(false);
-        }, 500);
+        const timer = setTimeout(() => {
+            setTimeout(() => {
+                setTempError(false);
+            }, 500);
+        }, 0);
+        return () => clearTimeout(timer);
     }, [isSubmitting]);
     if (form.terms && (!internal || (internal && postview)) && !isInteralAgent) {
         return (_jsx("div", { className: styles.termsContainer, style: {

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'react';
 import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
 import IncidentComponent from './Incident/Incident';
 import styles from './MaterialCBRIncidentsStep.module.css';
 import { nanoid } from 'nanoid';
+import { addRecursiveElementStep } from './addRecursiveElementStep';
 import ErkButton from '../../../../Shared/ErkButton/ErkButton';
 import FormContext from '../../../../Contexts/FormContext';
 import { addStepsDependencies } from '../../../../States/SiteSlice';
@@ -27,15 +28,10 @@ function CBRIncidentsStep({ step, editable, ...others }) {
         steps: { ...form.steps },
     });
     const [firstRender, setFirstRender] = useState(false);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setFirstRender(true);
-    }, []);
-    useEffect(() => {
-        if (firstRender && value.length === 0 && !postview && editable) {
-            handleAddIncident();
-        }
-    }, [firstRender]);
-    const handleAddIncident = () => {
+    }, [setFirstRender]);
+    const handleAddIncident = useCallback(() => {
         const current = value.filter((incident) => !incident.deleted);
         const newIncident = {
             idSpaceStep: CBRFormStepTypes.CBR_TIPO_ESPACIO + '-' + nanoid(),
@@ -65,27 +61,25 @@ function CBRIncidentsStep({ step, editable, ...others }) {
             customSteps,
             allSteps: { ...form.steps, ...localForm.steps, ...newSteps },
         }));
-    };
-    const addRecursiveElementStep = (idStep, step, idParent, steps, idProjectDep) => {
-        const idSubStep = CBRFormStepTypes.CBR_LOCATIVAS + '-' + nanoid();
-        const newSubStep = step.subStep ? { ...step.subStep } : undefined;
-        const newStep = {
-            ...step,
-            id: idStep,
-            type: CBRFormStepTypes.CBR_LOCATIVAS,
-            dependencies: [idProjectDep],
-            subStep: null,
-        };
-        if (idParent)
-            newStep.dependencies.push(idParent);
-        if (newSubStep) {
-            newStep.subStep = idSubStep;
-        }
-        steps[idStep] = newStep;
-        if (newSubStep) {
-            addRecursiveElementStep(idSubStep, newSubStep, idStep, steps, idProjectDep);
+    }, [
+        customSteps,
+        dispatch,
+        form.steps,
+        localForm,
+        onChange,
+        step.commentStep,
+        step.dependencies,
+        step.elementStep,
+        step.spaceStep,
+        value,
+    ]);
+    useEffect(() => {
+        if (firstRender && value.length === 0 && !postview && editable) {
+            const timer = setTimeout(() => handleAddIncident(), 0);
+            return () => clearTimeout(timer);
         }
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [firstRender]);
     return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.titleLbl, children: step.label }), step.description && (_jsx("p", { className: styles.descriptionPar, style: {
                     margin: step.description ? '10px 0px' : '0px 0px 5px 0px',
                 }, children: step.description })), _jsx(FormContext.Provider, { value: localForm, children: value.map((incident, index) => (_jsx(IncidentComponent, { incident: incident, step: step, editable: editable, handleDelete: () => {

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

@@ -0,0 +1,2 @@
+import { CBRFormStep, IncidentElementStep } from '../../../../@Types/CBRFormStep';
+export declare const addRecursiveElementStep: (idStep: string, step: IncidentElementStep, idParent: string | null, steps: Record<string, CBRFormStep>, idProjectDep: string) => void;

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

@@ -0,0 +1,22 @@
+import { nanoid } from 'nanoid';
+import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
+export const addRecursiveElementStep = (idStep, step, idParent, steps, idProjectDep) => {
+    const idSubStep = CBRFormStepTypes.CBR_LOCATIVAS + '-' + nanoid();
+    const newSubStep = step.subStep ? { ...step.subStep } : undefined;
+    const newStep = {
+        ...step,
+        id: idStep,
+        type: CBRFormStepTypes.CBR_LOCATIVAS,
+        dependencies: [idProjectDep],
+        subStep: null,
+    };
+    if (idParent)
+        newStep.dependencies.push(idParent);
+    if (newSubStep) {
+        newStep.subStep = idSubStep;
+    }
+    steps[idStep] = newStep;
+    if (newSubStep) {
+        addRecursiveElementStep(idSubStep, newSubStep, idStep, steps, idProjectDep);
+    }
+};

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

@@ -43,7 +43,7 @@ function CBRPropertyStepComponent(props) {
                     return undefined;
                 }, getValueString: (value) => value?.id, getValueWarning: props.step.validation
                     ? (value) => {
-                        if (value && value.entrega !== undefined && props.step.validation) {
+                        if (value?.entrega !== undefined && props.step.validation) {
                             const date = new Date(value.entrega);
                             const today = new Date();
                             const time = today.getTime() - date.getTime();
@@ -56,7 +56,7 @@ function CBRPropertyStepComponent(props) {
                     }
                     : undefined, changeListener: props.step.validation
                     ? (value) => {
-                        if (value && value.entrega !== undefined && props.step.validation) {
+                        if (value?.entrega !== undefined && props.step.validation) {
                             const date = new Date(value.entrega);
                             const today = new Date();
                             const time = today.getTime() - date.getTime();

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

@@ -25,8 +25,10 @@ function ClassifierSelectorStep({ step, editable }) {
             }
         }
         return dependencies;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
+    const dependenciesValues = useMemo(() => idDependencies.map((id) => dependencies[id].value), [dependencies, idDependencies]);
     const { postview, preview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const classifier = form.classifiers?.[step.idClassifier ?? ''];
@@ -46,11 +48,14 @@ function ClassifierSelectorStep({ step, editable }) {
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
         });
-    }, idDependencies.map((id) => dependencies[id].value));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dependenciesValues]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     if (!step.idClassifier || !classifier)
         return _jsx(_Fragment, {});

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

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import styles from './MaterialCollapsibleStep.module.css';
 import { Controller, useFormContext } from 'react-hook-form';
 import StepComponent from '../../Step';
@@ -14,11 +14,14 @@ function Collapsible({ step, open, setOpen, ...others }) {
     const form = useContext(FormContext);
     const { formState: { errors }, } = useFormContext();
     const contentRef = React.useRef(null);
+    const depsErrors = useMemo(() => step.dependencies?.map((dep) => errors[dep]) ?? [], [step.dependencies, errors]);
     useEffect(() => {
-        if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
+        //TODO: review this
+        if (!open && depsErrors.find((dep) => !!dep)) {
             setOpen(true);
         }
-    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depsErrors]);
     return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,
@@ -31,14 +34,10 @@ function Collapsible({ step, open, setOpen, ...others }) {
                                 setFirstTime(false);
                             setOpen(!open);
                         }, children: _jsx("div", { className: styles.expandIcon, children: open ? (_jsx(ExpandLessIcon, { style: { fontSize: 'inherit' } })) : (_jsx(ExpandMoreIcon, { style: { fontSize: 'inherit' } })) }) })] }), _jsx("div", { className: styles.content, style: {
-                    height: open
-                        ? firstTime
-                            ? 'auto'
-                            : contentRef.current?.offsetHeight
-                        : 0,
+                    height: open ? (firstTime ? 'auto' : contentRef.current?.offsetHeight) : 0,
                 }, children: _jsx("div", { className: styles.contentContainer, ref: contentRef, children: step.steps.map((idSubStep) => {
                         const subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, { ...others, step: subStep, key: idSubStep }));
+                        return _createElement(StepComponent, { ...others, step: subStep, key: idSubStep });
                     }) }) }), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
                 } })] }));

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import ErkDatePickerRange from '../../../Shared/ErkDatePickerRange/ErkDatePickerRange';
+import ErkDateRangePicker from '../../../Shared/ErkDateRangePicker/ErkDateRangePicker';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
@@ -28,7 +28,7 @@ function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
         }
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];
-    const dateRangeValue = value && value.length === 2 ? [safeDate(value[0]) ?? null, safeDate(value[1]) ?? null] : [null, null];
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePickerRange, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+    const dateRangeValue = value?.length === 2 ? [safeDate(value[0]) ?? null, safeDate(value[1]) ?? null] : [null, null];
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default MaterialDatePickerRangeStep;

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

@@ -22,6 +22,7 @@ function EntityValuePickerStep({ step, editable }) {
             ids.push(...recursivelyCalcConditionSteps(dialog.condition));
         }
         return ids;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dialogDeps = useAppSelector((state) => selectDependencies(state, dialogsIdStepDeps));
     const handleCloseDialog = useCallback(() => {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialFileUploadStep.module.css';
 import { useFormContext } from 'react-hook-form';
 import ErkButton from '../../../Shared/ErkButton/ErkButton';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
 import { getUploadUrls, postFile } from '../../../Services/FileService';
 import FileComponent from './FileComponent/FileComponent';
@@ -23,7 +23,47 @@ function FileUploadStep({ step, editable }) {
     const { clearErrors } = useFormContext();
     const [error, setError] = useState(undefined);
     const [fileChange, setFileChange] = useState([]);
-    const inputRef = useRef();
+    const inputRef = useRef(null);
+    const getLinks = useCallback(async (pFiles) => {
+        try {
+            const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
+            const errorsExt = [];
+            setFileChange(pFiles.map((file, index) => {
+                if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
+                    errorsExt.push(file.file.name.split('.').pop() ?? '');
+                    return { ...file, state: 'ERROR' };
+                }
+                else {
+                    return {
+                        ...file,
+                        state: 'UPLOADING',
+                        postInfo: fileLinks[index],
+                    };
+                }
+            }));
+            if (errorsExt.length === 1) {
+                setError('La extención .' + errorsExt[0] + ' no es válida');
+            }
+            else if (errorsExt.length > 1) {
+                setError('Las extenciónes .' + errorsExt.join(',.') + ' no son válidas');
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, [idOrganization]);
+    const uploadFile = useCallback(async (pFile) => {
+        try {
+            const resp = await Promise.all([
+                postFile(pFile.file, pFile.postInfo),
+                new Promise((resolve) => setTimeout(resolve, 1000)),
+            ]);
+            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, []);
     useEffect(() => {
         const filesToFetchLink = [];
         const filesChanged = [];
@@ -32,6 +72,7 @@ function FileUploadStep({ step, editable }) {
                 filesToFetchLink.push(file);
             }
             if (file.state === 'UPLOADING') {
+                // eslint-disable-next-line
                 void uploadFile(file);
                 filesChanged.push(file);
             }
@@ -64,47 +105,8 @@ function FileUploadStep({ step, editable }) {
             void getLinks(filesToFetchLink);
             onChange([...value, ...filesToFetchLink]);
         }
+        // eslint-disable-next-line
     }, [fileChange]);
-    async function getLinks(pFiles) {
-        try {
-            const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
-            const errorsExt = [];
-            setFileChange(pFiles.map((file, index) => {
-                if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
-                    errorsExt.push(file.file.name.split('.').pop() ?? '');
-                    return { ...file, state: 'ERROR' };
-                }
-                else {
-                    return {
-                        ...file,
-                        state: 'UPLOADING',
-                        postInfo: fileLinks[index],
-                    };
-                }
-            }));
-            if (errorsExt.length === 1) {
-                setError('La extención .' + errorsExt[0] + ' no es válida');
-            }
-            else if (errorsExt.length > 1) {
-                setError('Las extenciónes .' + errorsExt.join(',.') + ' no son válidas');
-            }
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    async function uploadFile(pFile) {
-        try {
-            const resp = await Promise.all([
-                postFile(pFile.file, pFile.postInfo),
-                new Promise((resolve) => setTimeout(resolve, 1000)),
-            ]);
-            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
     const calcErrorMsg = () => {
         if (fieldError) {
             const errNum = value.filter((val) => val.state === 'ERROR').length;

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

@@ -9,17 +9,17 @@ import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
 import PagedMapperElement from './PagedMapperElement/PagedMapperElement';
 function MapperElementComponent(props) {
-    const { step, element, editable } = props;
+    const { step, element, editable, calcCustomStepProps } = props;
     const customContext = useContext(CustomContext);
     const form = useContext(FormContext);
     const nestedCustomContext = useMemo(() => {
-        if (!props.calcCustomStepProps)
+        if (!calcCustomStepProps)
             return customContext;
         return {
             ...customContext,
-            customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
+            customStepProps: calcCustomStepProps(element, customContext.customStepProps),
         };
-    }, [element, customContext]);
+    }, [element, customContext, calcCustomStepProps]);
     if (element.deleted)
         return _jsx(_Fragment, {});
     const mapSubSteps = () => {

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

@@ -29,6 +29,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     const prevIndex = useMemo(() => {
         for (let i = page - 1; i >= 0; i--) {
@@ -38,6 +39,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -68,7 +70,9 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             page: index,
         });
         return;
-    }, [elements]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [elements]);
     const widthStats = useAppSelector((state) => state.widthStats);
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';

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

@@ -33,7 +33,9 @@ function MapperComponent({ form, step, error, value, loading, inputRef, editable
             elements: tempElements,
             page: page === index ? newPage : page,
         });
-    }, [elements, onChange]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [elements, onChange]);
     const inputValue = useMemo(() => JSON.stringify(elements), [elements]);
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const { container } = useMemo(() => {
@@ -87,6 +89,7 @@ function MapperStep(props) {
             if (!customAdd)
                 handleAddElement();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleAddElement = useCallback((elementValue) => {
         const { element, steps, mappers } = addMapperStep(step, customSteps);
@@ -106,7 +109,10 @@ function MapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, [step, form, customSteps, value, onChange]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [step, form, customSteps, value, onChange]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
     return (_jsx(MapperComponent, { ...props, error: error, inputRef: ref, onChange: onChange, value: value, handleAddElement: handleAddElement, form: subForm }));
 }
@@ -136,8 +142,8 @@ export function CustomMapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, [step, form, customSteps, elements, onChange]);
-    const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
+    }, [step, form, customSteps, elements, onChange, dispatch, setValue]);
+    const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps, form]);
     return _jsx(MapperComponent, { ...props, form: subForm, onChange: onChange, handleAddElement: handleAddElement });
 }
 export default MapperStep;

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

@@ -27,6 +27,7 @@ function SelectorStep({ step, editable }) {
             }
         }
         return dependencies;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const mapNestedOption = () => {
@@ -47,17 +48,22 @@ function SelectorStep({ step, editable }) {
         }
         return null;
     };
+    const dependenciesValues = useMemo(() => {
+        return idDependencies.map((id) => dependencies[id].value);
+    }, [dependencies, idDependencies]);
     const filteredOptions = useMemo(() => {
         return step.options.filter((option) => {
             if (!option.condition || evaluateCondition(option.condition, dependencies))
                 return true;
             return false;
         });
-    }, idDependencies.map((id) => dependencies[id].value));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dependenciesValues]);
     useEffect(() => {
         if (value && !filteredOptions.find((option) => option.value === value?.value)) {
             onChange('');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, required: step.required, options: filteredOptions, searchable: step.searchable, readOnly: !editable || postview, helperText: error?.message?.toString() ?? step.description, getOptionSelected: (option, value) => option?.value === value?.value }) }), value && mapNestedOption()] }));
 }

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

@@ -31,8 +31,11 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     const allDeps = useMemo(() => [...(step.dependencies ?? []), ...getOptionalDependencies(step)], [getOptionalDependencies, step]);
     const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), [getOptionsConditionsIdSteps, step]);
     const dependencies = useAppSelector((state) => selectDependencies(state, allDeps));
+    const allDepsValues = useMemo(() => allDeps.map((dep) => dependencies[dep]?.value), [dependencies, allDeps]);
     const deps = useAppSelector((state) => selectDependencies(state, idDependencies));
-    const conditionDependencies = useMemo(() => deps, idDependencies.map((id) => deps[id]));
+    const dependenciesValues = useMemo(() => idDependencies.map((id) => deps[id]?.value), [deps, idDependencies]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const conditionDependencies = useMemo(() => deps, [dependenciesValues]);
     const { emptyDep, invalids } = useAppSelector((state) => selectStepDependencies(state, step, form));
     const { getValues, setFocus } = useFormContext();
     const isEmpty = useAppSelector((state) => state.site.dependencies[step.id]?.empty);
@@ -45,7 +48,8 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         else if (value && !step.searchable) {
             setOptions([value]);
         }
-    }, allDeps.map((dep) => dependencies[dep]?.value) ?? []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allDepsValues]);
     const calcOptions = async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
@@ -110,11 +114,13 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
         if (!touched)
             setTouched(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, emptyDep, postview, editable, invalids, touched]);
     const filteredOptions = useMemo(() => {
         if (!options || !filterOptions)
             return options;
         return filterOptions(options, conditionDependencies);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, conditionDependencies]);
     const errorMsg = useMemo(() => {
         if (postview || loading)
@@ -132,6 +138,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             return 'Error al cargar las opciones';
         }
         return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [invalids, touched, value, filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, onFocus: onFocus, loading: loading, label: step.label, onChange: onChange, required: step.required, searchable: step.searchable, getValueString: getValueString, disabled: emptyDep, getOptionSelected: getOptionSelected, options: filteredOptions ?? undefined, IconComponent: step.showIcon ? IconComponent : undefined, error: !!errorMsg || !!warning || !!error, readOnly: !editable || postview || emptyDep || filteredOptions === null, helperText: errorMsg ?? warning ?? error?.message?.toString() ?? step.description ?? undefined }) }), renderNestedSteps?.(value)] }));
 }