@arquimedes.co/eureka-forms 3.0.33-test → 3.0.34-react-compiler

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, 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';
@@ -28,14 +29,10 @@ function CBRIncidentsStep({ step, editable, ...others }) {
     });
     const [firstRender, setFirstRender] = useState(false);
     useEffect(() => {
-        setFirstRender(true);
+        const timer = setTimeout(() => setFirstRender(true), 0);
+        return () => clearTimeout(timer);
     }, []);
-    useEffect(() => {
-        if (firstRender && value.length === 0 && !postview && editable) {
-            handleAddIncident();
-        }
-    }, [firstRender]);
-    const handleAddIncident = () => {
+    const handleAddIncident = useCallback(() => {
         const current = value.filter((incident) => !incident.deleted);
         const newIncident = {
             idSpaceStep: CBRFormStepTypes.CBR_TIPO_ESPACIO + '-' + nanoid(),
@@ -65,27 +62,24 @@ 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);
         }
-    };
+    }, [firstRender, value.length, postview, editable, handleAddIncident]);
     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,7 +25,7 @@ function ClassifierSelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-    }, []);
+    }, [step]);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const { postview, preview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
@@ -46,12 +46,12 @@ function ClassifierSelectorStep({ step, editable }) {
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
         });
-    }, idDependencies.map((id) => dependencies[id].value));
+    }, [classifier, form, dependencies, preview, step.options]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
-    }, [options]);
+    }, [options, value, onChange]);
     if (!step.idClassifier || !classifier)
         return _jsx(_Fragment, {});
     const mapNestedOption = () => {

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

@@ -14,11 +14,23 @@ function Collapsible({ step, open, setOpen, ...others }) {
     const form = useContext(FormContext);
     const { formState: { errors }, } = useFormContext();
     const contentRef = React.useRef(null);
+    const [heightState, setHeightState] = useState(0);
+    React.useLayoutEffect(() => {
+        if (open) {
+            if (firstTime)
+                setHeightState('auto');
+            else
+                setHeightState(contentRef.current?.offsetHeight ?? 'auto');
+        }
+        else {
+            setHeightState(0);
+        }
+    }, [open, firstTime]);
     useEffect(() => {
         if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
             setOpen(true);
         }
-    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
+    }, [open, step.dependencies, errors, setOpen]);
     return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,
@@ -31,14 +43,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: heightState,
                 }, 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

@@ -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];
+    const dateRangeValue = 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 }) }));
 }
 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,7 @@ function FileUploadStep({ step, editable }) {
             void getLinks(filesToFetchLink);
             onChange([...value, ...filesToFetchLink]);
         }
-    }, [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);
-        }
-    }
+    }, [fileChange, getLinks, onChange, uploadFile, value]);
     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,7 +29,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-    }, [value]);
+    }, [elements, page]);
     const prevIndex = useMemo(() => {
         for (let i = page - 1; i >= 0; i--) {
             const element = elements[i];
@@ -38,7 +38,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-    }, [value]);
+    }, [elements, page]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
         console.error('Errors:', errors);
@@ -68,10 +68,16 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             page: index,
         });
         return;
-    }, [elements]);
+    }, [dispatch, element.id, elements, getValues, handleErrors, onChange, step.id, trigger]);
     const widthStats = useAppSelector((state) => state.widthStats);
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
+    const [pagingWidth, setPagingWidth] = React.useState(0);
+    React.useLayoutEffect(() => {
+        if (pagingRef.current) {
+            setPagingWidth(pagingRef.current.clientWidth);
+        }
+    }, []);
     const renderElement = (renderElementButtons) => {
         return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
                     width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
@@ -79,7 +85,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
                                     if (editable && !postview) {
                                         handleDelete?.();
                                     }
-                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children, totalElements.length > 0 && (_jsx("div", { className: styles.pagingContainer, ref: pagingRef, children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null ? () => void handleChangePage(nextIndex) : undefined, handlePrev: prevIndex !== null ? () => void handleChangePage(prevIndex) : undefined, width: pagingRef.current?.clientWidth }) }))] }) }));
+                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children, totalElements.length > 0 && (_jsx("div", { className: styles.pagingContainer, ref: pagingRef, children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null ? () => void handleChangePage(nextIndex) : undefined, handlePrev: prevIndex !== null ? () => void handleChangePage(prevIndex) : undefined, width: pagingWidth }) }))] }) }));
     };
     return (_jsx("div", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
 }

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

@@ -32,21 +32,11 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), [getOptionsConditionsIdSteps, step]);
     const dependencies = useAppSelector((state) => selectDependencies(state, allDeps));
     const deps = useAppSelector((state) => selectDependencies(state, idDependencies));
-    const conditionDependencies = useMemo(() => deps, idDependencies.map((id) => deps[id]));
+    const conditionDependencies = useMemo(() => deps, [deps]);
     const { emptyDep, invalids } = useAppSelector((state) => selectStepDependencies(state, step, form));
     const { getValues, setFocus } = useFormContext();
     const isEmpty = useAppSelector((state) => state.site.dependencies[step.id]?.empty);
-    useEffect(() => {
-        if (!postview && editable) {
-            void calcOptions(firstTime);
-            if (firstTime)
-                setFirstTime(false);
-        }
-        else if (value && !step.searchable) {
-            setOptions([value]);
-        }
-    }, allDeps.map((dep) => dependencies[dep]?.value) ?? []);
-    const calcOptions = async (firstTime) => {
+    const calcOptions = useCallback(async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
         if (value && !firstTime)
@@ -81,7 +71,34 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             setOptions(null);
         }
         setLoading(false);
-    };
+    }, [
+        dependencies,
+        dispatch,
+        getOptions,
+        getValueString,
+        idCurrentAgent,
+        idOrganization,
+        isEmpty,
+        onChange,
+        postview,
+        step,
+        value,
+    ]);
+    useEffect(() => {
+        if (!postview && editable) {
+            const timer = setTimeout(() => {
+                void calcOptions(firstTime);
+                if (firstTime)
+                    setFirstTime(false);
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else if (value && !step.searchable) {
+            setTimeout(() => {
+                setOptions([value]);
+            }, 0);
+        }
+    }, [allDeps, dependencies, editable, firstTime, postview, step.searchable, value, calcOptions]);
     const warning = useMemo(() => getValueWarning?.(value), [value, getValueWarning]);
     const onFocus = useCallback(() => {
         if (emptyDep || !editable || postview)
@@ -110,12 +127,26 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
         if (!touched)
             setTouched(true);
-    }, [options, emptyDep, postview, editable, invalids, touched]);
+    }, [
+        options,
+        emptyDep,
+        postview,
+        editable,
+        invalids,
+        touched,
+        dispatch,
+        form.steps,
+        form.type,
+        getValues,
+        setFocus,
+        step.idSection,
+        value,
+    ]);
     const filteredOptions = useMemo(() => {
         if (!options || !filterOptions)
             return options;
         return filterOptions(options, conditionDependencies);
-    }, [options, conditionDependencies]);
+    }, [options, conditionDependencies, filterOptions]);
     const errorMsg = useMemo(() => {
         if (postview || loading)
             return undefined;
@@ -132,7 +163,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             return 'Error al cargar las opciones';
         }
         return undefined;
-    }, [invalids, touched, value, filteredOptions]);
+    }, [invalids, touched, value, filteredOptions, calcDepError, form.steps, getOptionSelected, loading, postview]);
     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)] }));
 }
 export default SmartSelectStep;

package/dist/FormSteps/StepHooks.js

@@ -28,6 +28,7 @@ export const useStepDependency = (step, defaultValue) => {
         return () => {
             dispatch(clearDependency(step));
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isDependency]);
     const handleStepDep = useCallback((value) => {
         if (!isDependency)
@@ -36,7 +37,9 @@ export const useStepDependency = (step, defaultValue) => {
             step,
             value: value ?? null,
         }));
-    }, [step.id, step.type, isDependency]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [step.id, step.type, isDependency]);
     return {
         handleStepDep,
         isDependency,
@@ -102,7 +105,9 @@ export const useFormStep = (step, { rules, debounce, sizeChange, defaultValue })
         fieldOnChange(value);
         if (sizeChange)
             handleSizeChange?.();
-    }, [handleStepDep, isDependency, fieldOnChange]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleStepDep, isDependency, fieldOnChange]);
     return {
         ref,
         value,
@@ -120,11 +125,13 @@ export const selectDependencies = createSelector([
     [idDep]: dependencies[idDep],
 }), {}));
 export const useCondition = (condition) => {
-    const ids = useMemo(() => recursivelyCalcConditionSteps(condition), []);
+    const ids = useMemo(() => recursivelyCalcConditionSteps(condition), [condition]);
     const dependencies = useAppSelector((state) => selectDependencies(state, ids));
+    const dependenciesValues = useMemo(() => ids.map((id) => dependencies[id].value), [dependencies, ids]);
     return useMemo(() => {
         return !condition || evaluateCondition(condition, dependencies);
-    }, ids.map((id) => dependencies[id].value));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dependenciesValues]);
 };
 export const calcStepDeps = (step) => {
     const dependencies = [...(step.dependencies ?? [])];

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

@@ -35,7 +35,9 @@ function TextAreaStep({ step, editable }) {
             }, 1000));
         }
         onChange(value);
-    }, [handleStepDep, isDependency, onChange]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleStepDep, isDependency, onChange]);
     const calcStyle = () => {
         const backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {

package/dist/FormSteps/Utils/@StepFiller/StepFiller.js

@@ -13,6 +13,7 @@ function StepFiller({ step, children }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
     const handleSizeChange = useCallback(() => {
         setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", { className: styles.firstLvlContainer, style: {

package/dist/Shared/CustomBtn/CustomBtn.js

@@ -9,6 +9,7 @@ function CustomBtn({ label, onClick, backgroundColor, color, loading = false, di
         if (coords)
             setCoords(undefined);
         return () => setMounted(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [label]);
     return (_jsxs("button", { className: styles.customBtn, style: {
             width,

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { styled, Dialog as MuiDialog } from '@mui/material';
-import { DatePickerToolbar as MuiDatePickerToolbar, } from '@mui/x-date-pickers';
+import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
 import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
-import { format } from 'date-fns';
+import { format, isValid } from 'date-fns';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 const StyledDateRangePicker = styled(MuiDateRangePicker, {
     shouldForwardProp: (propName) => propName !== 'size',
@@ -83,15 +84,24 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
         backgroundColor: theme.palette.primary.main + '1a',
     },
 }));
+// eslint-disable-next-line react/display-name
+const CustomTextField = React.forwardRef((props, ref) => {
+    const pickerContext = usePickerContext();
+    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: () => pickerContext.setOpen((prev) => !prev) });
+});
 const formatDate = (date, showYear) => {
-    if (!date)
+    if (!date || !isValid(date))
         return '';
     return format(date, showYear ? 'PP' : 'dd MMM');
 };
 function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, ...others }) {
     const [startDate, endDate] = value ?? [null, null];
     const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
-    const showYear = startDate && endDate && startDate.getFullYear() !== endDate.getFullYear();
+    const showYear = startDate &&
+        endDate &&
+        isValid(startDate) &&
+        isValid(endDate) &&
+        startDate.getFullYear() !== endDate.getFullYear();
     const formattedStartDate = formatDate(startDate, Boolean(showYear));
     const formattedEndDate = formatDate(endDate, Boolean(showYear));
     const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
@@ -103,6 +113,7 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
             dialog: StyledDialog,
             toolbar: StyledDateToolBar,
             openPickerIcon: CalendarIcon,
+            textField: CustomTextField,
         }, slotProps: {
             actionBar: {
                 actions: ['clear', 'accept'],

package/dist/Shared/ErkMenuItem.d.ts

@@ -1,4 +1,2 @@
-declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export default Styled;

package/dist/Shared/ErkSelect/ErkSelect.d.ts

@@ -5,16 +5,12 @@ export interface SelectorStyleProps {
     readOnly?: boolean;
 }
 export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material").FilledSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").StandardSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").OutlinedSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>), {}, {}>;
-export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
-}, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     component?: React.ElementType;
 } & {
     open: boolean;
 }, {}, {}>;
-export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     component?: React.ElementType;
 }, {}, {}>;
 export type ErkSelectValue<Type extends string | number, Multiple, Clearable> = Multiple extends true ? Type[] : Clearable extends true ? Type | undefined : Type;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -28,7 +28,7 @@ const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props
 export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
     if (searchable) {
         return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, disabled: disabled || readOnly, readOnly: readOnly, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
-                if (value && value.label === params?.inputValue) {
+                if (value?.label === params?.inputValue) {
                     return options;
                 }
                 else {

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -100,17 +100,20 @@ function CustomTextfield({ onChange, value = '', IconComponent, size = 'small',
     const handleChange = useCallback((event) => {
         onChange?.(event.target.value);
     }, [onChange]);
-    const inputProps = useMemo(() => ({
-        ...others.inputProps,
-        spellCheck: true,
-        endAdornment: IconComponent,
-        readOnly: !!readOnly,
-        disabled: !!readOnly || !!disabled,
-    }), [others.inputProps, IconComponent, readOnly, disabled]);
+    const inputProps = useMemo(() => {
+        const mergedInputProps = {
+            ...others.inputProps,
+            spellCheck: true,
+            endAdornment: IconComponent,
+            readOnly: !!readOnly,
+            disabled: !!readOnly || !!disabled,
+        };
+        if (maxLength) {
+            mergedInputProps.inputProps = { maxLength };
+        }
+        return mergedInputProps;
+    }, [others.inputProps, IconComponent, readOnly, disabled, maxLength]);
     const length = maxLength ? value.toString()?.length : null;
-    if (maxLength) {
-        inputProps.inputProps = { maxLength };
-    }
     const helperText = others.helperText ?? (others.error === false && !others.readOnly ? ' ' : undefined);
     return (_jsxs("div", { style: {
             position: 'relative',

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -3,12 +3,12 @@ import { StyledHelperText, StyledInputLabel, StyledSelect } from '../ErkSelect/E
 import styles from './ErkTimePicker.module.css';
 import ClockIcon from '../../Icons/ClockIcon';
 import { ClickAwayListener, FormControl, InputAdornment, MenuItem, Popper, useTheme, } from '@mui/material';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import ErkToggle from '../Toggle/Toggle';
 function CustomSelect({ value, onChange, label, error, required, pickDays, helperText, readOnly = false, disabled = false, minDays = 0, maxDays, pickHours, minHours = 0, maxHours, pickMinutes, minMinutes = 0, maxMinutes, working, labelMargin = 5, size = 'small', ...others }) {
     const [open, setOpen] = useState(false);
-    const ref = useRef(null);
+    const [anchorEl, setAnchorEl] = useState(null);
     const { palette } = useTheme();
     const handleChange = useCallback((value) => {
         const time = { ...value };
@@ -34,7 +34,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
             parts.push('*');
         return parts.join(' ');
     };
-    return (_jsxs(_Fragment, { children: [open && (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => setOpen(false), children: _jsx(Popper, { open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: [
+    return (_jsxs(_Fragment, { children: [open && (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => setOpen(false), children: _jsx(Popper, { open: true, anchorEl: anchorEl, placement: 'bottom-start', modifiers: [
                         {
                             name: 'preventOverflow',
                             enabled: true,
@@ -53,7 +53,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
                                                 ...value,
                                                 working,
                                             });
-                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: size, error: error, variant: "outlined", required: required, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, size: size, readOnly: readOnly, disabled: disabled, onBlur: () => {
+                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: size, error: error, variant: "outlined", required: required, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsx(StyledSelect, { ...others, ref: setAnchorEl, open: open, size: size, readOnly: readOnly, disabled: disabled, onBlur: () => {
                             if (!readOnly && !disabled)
                                 setOpen(false);
                         }, label: label ? calcLabel() : undefined, value: value ? 0 : '', title: calcTimeString(value), IconComponent: () => _jsx(_Fragment, {}), MenuProps: { sx: { visibility: 'hidden' } }, endAdornment: _jsx(InputAdornment, { position: "end", onClick: (e) => {

package/dist/Widget.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App/App';
 import './Utils/MuiClassnameSetup';
 const WIDGET_ID = document.currentScript?.getAttribute('data-id') ?? 'widget:eureka';
@@ -45,5 +45,5 @@ if (element) {
         props.partial = true;
     }
 }
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(_jsx(App, { isWidget: true, ...props }), document.getElementById(WIDGET_ID));
+const root = createRoot(document.getElementById(WIDGET_ID));
+root.render(_jsx(App, { isWidget: true, ...props }));

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.33-test",
+  "version":"3.0.34-react-compiler",
   "scripts": {
-    "watch": "tsc --noEmit --watch --project tsconfig.app.json",
+    "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
     "build": "tsc -b && vite build",
     "format": "prettier --write ./src",
@@ -16,20 +16,20 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.9.0",
-    "axios": "^1.12.2",
-    "date-fns": "^4.1.0",
-    "draft-js": "^0.11.7",
-    "i18n-iso-countries": "^7.14.0",
-    "libphonenumber-js": "^1.12.23",
-    "logrocket": "^10.1.0",
-    "nanoid": "^5.1.6",
-    "react-draft-wysiwyg": "^1.15.0",
-    "react-google-recaptcha": "^3.1.0",
-    "react-hook-form": "^7.64.0",
-    "react-international-phone": "^4.6.0",
-    "react-redux": "^9.2.0",
-    "typescript": "^5.9.3"
+    "@reduxjs/toolkit": "2.11.0",
+    "axios": "1.12.2",
+    "date-fns": "4.1.0",
+    "draft-js": "0.11.7",
+    "i18n-iso-countries": "7.14.0",
+    "libphonenumber-js": "1.12.31",
+    "logrocket": "10.1.1",
+    "nanoid": "5.1.6",
+    "react-draft-wysiwyg": "1.15.0",
+    "react-google-recaptcha": "3.1.0",
+    "react-hook-form": "7.68.0",
+    "react-international-phone": "4.6.1",
+    "react-redux": "9.2.0",
+    "typescript": "5.9.3"
   },
   "eslintConfig": {},
   "browserslist": {
@@ -45,61 +45,68 @@
     ]
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.0",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.37.0",
-    "@faker-js/faker": "^10.0.0",
-    "@mui/material": "^7.3.4",
-    "@mui/x-data-grid-pro": "^8.13.1",
-    "@mui/x-date-pickers": "^8.12.0",
-    "@mui/x-date-pickers-pro": "^8.12.0",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/addon-themes": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/draft-js": "^0.11.18",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-draft-wysiwyg": "^1.13.8",
-    "@types/react-google-recaptcha": "^2.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.26.0",
-    "@vitejs/plugin-react-swc": "^4.1.0",
-    "css-loader": "^7.1.2",
-    "cypress": "^15.3.0",
-    "dotenv-webpack": "^8.1.1",
-    "eslint": "^9.37.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^6.1.1",
-    "eslint-plugin-react-refresh": "^0.4.23",
-    "eslint-plugin-storybook": "^9.1.10",
-    "globals": "^16.4.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^27.0.0",
-    "prettier": "3.6.2",
-    "react-refresh": "^0.18.0",
-    "storybook": "^9.1.10",
-    "style-loader": "^4.0.0",
-    "vite": "^7.1.9",
-    "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^3.2.4"
+    "@eslint/compat": "1.4.0",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.1",
+    "@faker-js/faker": "10.1.0",
+    "@mui/material": "7.3.6",
+    "@mui/x-data-grid-pro": "8.21.0",
+    "@mui/x-date-pickers": "8.21.0",
+    "@mui/x-date-pickers-pro": "8.21.0",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-onboarding": "^9.1.16",
+    "@storybook/addon-themes": "^9.1.16",
+    "@storybook/react-vite": "^9.1.16",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/draft-js": "0.11.20",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@types/react-draft-wysiwyg": "1.13.9",
+    "@types/react-google-recaptcha": "2.1.9",
+    "@typescript-eslint/eslint-plugin": "8.48.1",
+    "@typescript-eslint/parser": "8.48.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "css-loader": "7.1.2",
+    "cypress": "15.7.1",
+    "dotenv-webpack": "8.1.1",
+    "eslint": "9.39.1",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.4.24",
+    "eslint-plugin-storybook": "9.1.16",
+    "globals": "16.4.0",
+    "identity-obj-proxy": "3.0.0",
+    "jsdom": "27.2.0",
+    "prettier": "3.7.4",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "react-refresh": "0.18.0",
+    "storybook": "^9.1.16",
+    "style-loader": "4.0.0",
+    "vite": "7.1.9",
+    "vite-plugin-svgr": "4.5.0",
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.x.x",
-    "@emotion/styled": "^11.x.x",
-    "@mui/material": "^7.x.x",
-    "@mui/x-date-pickers": "^8.x.x",
-    "react": "^18.x.x",
-    "react-dom": "^18.x.x"
+    "@emotion/react": "11.x.x",
+    "@emotion/styled": "11.x.x",
+    "@mui/material": "7.3.6",
+    "@mui/x-date-pickers": "8.21.0",
+    "react": "18 || 19",
+    "react-dom": "18 || 19"
   },
   "publishConfig": {
     "access": "public"
   },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom"
+  },
   "main": "./dist/index.lib.js",
   "files": [
     "/dist"