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

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.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/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/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/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.34-test",
+  "version":"3.0.35-test",
   "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,63 +45,70 @@
     ]
   },
   "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"
   ]
-}
+}