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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, 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';
@@ -28,10 +28,9 @@ function CBRIncidentsStep({ step, editable, ...others }) {
         steps: { ...form.steps },
     });
     const [firstRender, setFirstRender] = useState(false);
-    useEffect(() => {
-        const timer = setTimeout(() => setFirstRender(true), 0);
-        return () => clearTimeout(timer);
-    }, []);
+    useLayoutEffect(() => {
+        setFirstRender(true);
+    }, [setFirstRender]);
     const handleAddIncident = useCallback(() => {
         const current = value.filter((incident) => !incident.deleted);
         const newIncident = {
@@ -79,7 +78,8 @@ function CBRIncidentsStep({ step, editable, ...others }) {
             const timer = setTimeout(() => handleAddIncident(), 0);
             return () => clearTimeout(timer);
         }
-    }, [firstRender, value.length, postview, editable, handleAddIncident]);
+        // 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/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -25,8 +25,10 @@ function ClassifierSelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-    }, [step]);
+        // 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,12 +48,15 @@ function ClassifierSelectorStep({ step, editable }) {
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
         });
-    }, [classifier, form, dependencies, preview, step.options]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dependenciesValues]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
-    }, [options, value, onChange]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options]);
     if (!step.idClassifier || !classifier)
         return _jsx(_Fragment, {});
     const mapNestedOption = () => {

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,23 +14,14 @@ 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]);
+    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);
         }
-    }, [open, step.dependencies, errors, setOpen]);
+        // 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,
@@ -43,7 +34,7 @@ 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: heightState,
+                    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 });

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';
@@ -29,6 +29,6 @@ function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];
     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 }) }));
+    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/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -105,7 +105,8 @@ function FileUploadStep({ step, editable }) {
             void getLinks(filesToFetchLink);
             onChange([...value, ...filesToFetchLink]);
         }
-    }, [fileChange, getLinks, onChange, uploadFile, value]);
+        // eslint-disable-next-line
+    }, [fileChange]);
     const calcErrorMsg = () => {
         if (fieldError) {
             const errNum = value.filter((val) => val.state === 'ERROR').length;

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

@@ -29,7 +29,8 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-    }, [elements, page]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     const prevIndex = useMemo(() => {
         for (let i = page - 1; i >= 0; i--) {
             const element = elements[i];
@@ -38,7 +39,8 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-    }, [elements, page]);
+        // 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) => {
         console.error('Errors:', errors);
@@ -68,16 +70,12 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             page: index,
         });
         return;
-    }, [dispatch, element.id, elements, getValues, handleErrors, onChange, step.id, trigger]);
+    }, 
+    // 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) : '';
-    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),
@@ -85,7 +83,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: pagingWidth }) }))] }) }));
+                                }, 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 }) }))] }) }));
     };
     return (_jsx("div", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
 }

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

@@ -31,12 +31,26 @@ 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, [deps]);
+    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);
-    const calcOptions = useCallback(async (firstTime) => {
+    useEffect(() => {
+        if (!postview && editable) {
+            void calcOptions(firstTime);
+            if (firstTime)
+                setFirstTime(false);
+        }
+        else if (value && !step.searchable) {
+            setOptions([value]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allDepsValues]);
+    const calcOptions = async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
         if (value && !firstTime)
@@ -71,34 +85,7 @@ 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)
@@ -127,26 +114,14 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
         if (!touched)
             setTouched(true);
-    }, [
-        options,
-        emptyDep,
-        postview,
-        editable,
-        invalids,
-        touched,
-        dispatch,
-        form.steps,
-        form.type,
-        getValues,
-        setFocus,
-        step.idSection,
-        value,
-    ]);
+        // 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);
-    }, [options, conditionDependencies, filterOptions]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options, conditionDependencies]);
     const errorMsg = useMemo(() => {
         if (postview || loading)
             return undefined;
@@ -163,7 +138,8 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             return 'Error al cargar las opciones';
         }
         return undefined;
-    }, [invalids, touched, value, filteredOptions, calcDepError, form.steps, getOptionSelected, loading, postview]);
+        // 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)] }));
 }
 export default SmartSelectStep;

package/dist/Shared/{ErkDatePickerRange/ErkDatePickerRange.d.ts → ErkDateRangePicker/ErkDateRangePicker.d.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import { DateRange } from '@mui/x-date-pickers-pro';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-interface ErkDatePickerRangeProps extends Omit<MuiDateRangePickerProps<boolean>, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
+interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps<boolean>, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (dateRange: DateRange<Date>) => void;
     value?: DateRange<Date>;
     inputRef?: React.Ref<HTMLInputElement>;
@@ -12,7 +12,7 @@ interface ErkDatePickerRangeProps extends Omit<MuiDateRangePickerProps<boolean>,
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
-declare class ErkDatePickerRange extends React.Component<ErkDatePickerRangeProps> {
+declare class ErkDateRangePicker extends React.Component<ErkDateRangePickerProps> {
     render(): JSX.Element;
 }
-export default ErkDatePickerRange;
+export default ErkDateRangePicker;

package/dist/Shared/{ErkDatePickerRange/ErkDatePickerRange.js → ErkDateRangePicker/ErkDateRangePicker.js}

@@ -165,9 +165,9 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
-class ErkDatePickerRange extends React.Component {
+class ErkDateRangePicker extends React.Component {
     render() {
         return _jsx(CustomDatePickerRange, { ...this.props });
     }
 }
-export default ErkDatePickerRange;
+export default ErkDateRangePicker;

package/dist/Shared/{ErkDatePickerRange/ErkDatePickerRange.stories.d.ts → ErkDateRangePicker/ErkDateRangePicker.stories.d.ts}

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
-import ErkDatePickerRange from './ErkDatePickerRange';
+import ErkDateRangePicker from './ErkDateRangePicker';
 declare const meta: {
-    component: typeof ErkDatePickerRange;
+    component: typeof ErkDateRangePicker;
     tags: string[];
     args: {
         readOnly: false;

package/dist/Shared/{ErkDatePickerRange/ErkDatePickerRange.stories.js → ErkDateRangePicker/ErkDateRangePicker.stories.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErkDatePickerRange from './ErkDatePickerRange';
+import ErkDateRangePicker from './ErkDateRangePicker';
 import { useArgs } from 'storybook/internal/preview-api';
 import { useState } from 'react';
 const meta = {
-    component: ErkDatePickerRange,
+    component: ErkDateRangePicker,
     tags: ['autodocs'],
     args: {
         readOnly: false,
@@ -26,7 +26,7 @@ export const Default = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const Interactive = {
@@ -41,7 +41,7 @@ export const Interactive = {
             setValue(newValue);
             args.onChange?.(newValue);
         };
-        return (_jsxs("div", { children: [_jsx(ErkDatePickerRange, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
+        return (_jsxs("div", { children: [_jsx(ErkDateRangePicker, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
     },
 };
 export const ValueAndLabel = {
@@ -55,7 +55,7 @@ export const ValueAndLabel = {
             args.onChange?.(value);
             setArgs({ value });
         };
-        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+        return _jsx(ErkDateRangePicker, { ...args, onChange: onValueChange });
     },
 };
 export const Full = {
@@ -66,7 +66,7 @@ export const Full = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const Error = {
@@ -78,7 +78,7 @@ export const Error = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const Menu = {
@@ -88,7 +88,7 @@ export const Menu = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
     play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
@@ -107,7 +107,7 @@ export const WithSelectedRange = {
             args.onChange?.(value);
             setArgs({ value });
         };
-        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+        return _jsx(ErkDateRangePicker, { ...args, onChange: onValueChange });
     },
 };
 export const Disabled = {
@@ -119,7 +119,7 @@ export const Disabled = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const ReadOnly = {
@@ -131,7 +131,7 @@ export const ReadOnly = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const WithError = {
@@ -143,7 +143,7 @@ export const WithError = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const Required = {
@@ -155,7 +155,7 @@ export const Required = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const SmallSize = {
@@ -167,7 +167,7 @@ export const SmallSize = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const MediumSize = {
@@ -179,7 +179,7 @@ export const MediumSize = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const CurrentMonth = {
@@ -190,7 +190,7 @@ export const CurrentMonth = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const LastWeek = {
@@ -201,7 +201,7 @@ export const LastWeek = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const NextMonth = {
@@ -215,7 +215,7 @@ export const NextMonth = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const WithMinMaxDates = {
@@ -228,7 +228,7 @@ export const WithMinMaxDates = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const YearRange = {
@@ -239,7 +239,7 @@ export const YearRange = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const QuarterRange = {
@@ -250,7 +250,7 @@ export const QuarterRange = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const EventDuration = {
@@ -261,7 +261,7 @@ export const EventDuration = {
     },
     render: function Component(args) {
         const [value, setValue] = useState(args.value ?? [null, null]);
-        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+        return _jsx(ErkDateRangePicker, { ...args, value: value, onChange: setValue });
     },
 };
 export const MultipleStates = {
@@ -269,6 +269,6 @@ export const MultipleStates = {
         const [range1, setRange1] = useState([null, null]);
         const [range2, setRange2] = useState([new Date('2025-01-01'), new Date('2025-01-31')]);
         const [range3, setRange3] = useState([null, null]);
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDatePickerRange, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDatePickerRange, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDatePickerRange, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDateRangePicker, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDateRangePicker, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDateRangePicker, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
     },
 };

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -39,6 +39,7 @@ export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
     },
     '& .Mui-disabled, &.Mui-readOnly': {
         cursor: 'default',
+        pointerEvents: 'none',
     },
     '&.Erk-MuiInputBase-root.Mui-focused': {
         '& .Erk-MuiOutlinedInput-notchedOutline': {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.34-react-compiler",
+  "version":"3.0.35-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -111,4 +111,4 @@
   "files": [
     "/dist"
   ]
-}
+}