@arquimedes.co/eureka-forms 3.0.43-test → 3.0.44-mui9

package/dist/@Types/FormStep.d.ts

@@ -47,9 +47,11 @@ export interface TextInput extends GSteps.GTextInput {
 }
 export interface DatePicker extends GSteps.GDatePicker {
     type: FormStepTypes.DATEPICKER;
+    defaultValue?: string;
 }
 export interface DatePickerRange extends GSteps.GDatePickerRange {
     type: FormStepTypes.DATEPICKER_RANGE;
+    defaultValue?: string[];
 }
 export interface Collapsible extends GSteps.GBaseStep {
     type: FormStepTypes.COLLAPSIBLE;
@@ -60,10 +62,10 @@ export interface Collapsible extends GSteps.GBaseStep {
 export interface FormSelector extends GSteps.GBaseStep {
     type: FormStepTypes.SELECTOR;
     label: string;
-    description: string;
+    description: string | null;
     required: boolean;
     searchable: boolean;
-    options: FormSelectorOption[];
+    options: readonly FormSelectorOption[];
     size: 1 | 2 | 3 | 4;
     maxSize?: number;
     defaultValue?: string;

package/dist/@Types/GenericFormSteps.d.ts

@@ -2,7 +2,7 @@ import { Condition } from './Condition';
 export interface GBaseStep {
     id: string;
     idSection: string;
-    stepPath: string[];
+    stepPath: readonly string[];
     type: string;
     editable?: boolean;
     partial?: boolean;

package/dist/App/AppHooks.js

@@ -57,33 +57,33 @@ export const useSetupApp = (isEmbedded, props) => {
             idOrganization = match ? match[1] : '';
         }
         if (form) {
-            form = createNextState(form, (form) => {
-                const firstSection = form.sections[form.firstSection];
-                if (firstSection.steps === undefined && form.rootSteps !== undefined) {
-                    firstSection.steps = form.rootSteps;
+            form = createNextState(form, (draft) => {
+                const firstSection = draft.sections[draft.firstSection];
+                if (firstSection.steps === undefined && draft.rootSteps !== undefined) {
+                    firstSection.steps = draft.rootSteps;
                 }
                 //If a rootStep is a mapper of type section
-                if (form && classifiers)
-                    form.classifiers = classifiers;
+                if (classifiers)
+                    draft.classifiers = classifiers;
                 /** Assign the idSection to all the forms steps */
-                for (const section of Object.values(form.sections)) {
+                for (const section of Object.values(draft.sections)) {
                     for (const idStep of section.steps) {
-                        iterateNestedSteps(idStep, form.steps, (step, path) => {
+                        iterateNestedSteps(idStep, draft.steps, (step, path) => {
                             step.idSection = section.id;
                             step.stepPath = path;
                         });
                     }
-                    for (const idStep of form.hiddenSteps ?? []) {
-                        iterateNestedSteps(idStep, form.steps, (step, path) => {
+                    for (const idStep of draft.hiddenSteps ?? []) {
+                        iterateNestedSteps(idStep, draft.steps, (step, path) => {
                             step.idSection = section.id;
                             step.stepPath = path;
                         });
                     }
                 }
-                const CBRStep = Object.values(form.steps).find((step) => step.type.startsWith('CBR'));
-                if (CBRStep)
-                    form = calcCbrForm(form, valuesData ?? {});
             });
+            const CBRStep = Object.values(form.steps).find((step) => step.type.startsWith('CBR'));
+            if (CBRStep)
+                form = calcCbrForm(form, valuesData ?? {});
         }
         setForm(form);
         if (!form || !idOrganization)

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -46,11 +46,13 @@ function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
                         fontSize: widthStats.isMobile ? '1rem' : '1.2rem',
                     }, children: confirmation.url })] }));
     };
-    return (_jsx(Dialog, { PaperProps: {
-            style: {
-                borderRadius: '20px',
-                maxWidth: '100vw',
-                boxSizing: 'content-box',
+    return (_jsx(Dialog, { slotProps: {
+            paper: {
+                style: {
+                    borderRadius: '20px',
+                    maxWidth: '100vw',
+                    boxSizing: 'content-box',
+                },
             },
         }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: {
                 color: '#293241',

package/dist/Form/Terms/Term/MaterialTerm/MaterialTerm.js

@@ -44,9 +44,11 @@ function TermComponent({ term, tempError }) {
             return parts;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(Dialog, { PaperProps: {
-                    style: {
-                        borderRadius: '20px',
+    return (_jsxs(React.Fragment, { children: [_jsx(Dialog, { slotProps: {
+                    paper: {
+                        style: {
+                            borderRadius: '20px',
+                        },
                     },
                 }, onClose: () => {
                     setShowDialog(false);

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

@@ -66,11 +66,13 @@ function CBRPropertyStepComponent(props) {
                             }
                         }
                     }
-                    : undefined, getOptions: getInmueblesOptions }), showWarning !== undefined && (_jsx(Dialog, { PaperProps: {
-                    style: {
-                        borderRadius: '20px',
-                        maxWidth: '100vw',
-                        boxSizing: 'content-box',
+                    : undefined, getOptions: getInmueblesOptions }), showWarning !== undefined && (_jsx(Dialog, { slotProps: {
+                    paper: {
+                        style: {
+                            borderRadius: '20px',
+                            maxWidth: '100vw',
+                            boxSizing: 'content-box',
+                        },
                     },
                 }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
                                 setShowWarning(undefined);

package/dist/FormSteps/@StoryDecorators/FormStepDecorator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Form } from '../../@Types';
+/** Minimal form object shared across FormStep stories */
+export declare const storyForm: Form;
+/**
+ * Decorator for FormStep stories.
+ * Provides: Redux store, form ID, react-hook-form, FormContext, SectionContext.
+ */
+export declare function withFormStepProviders(Story: React.ComponentType): JSX.Element;

package/dist/FormSteps/@StoryDecorators/FormStepDecorator.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+const STORY_FORM_ID = 'STORY_FORM';
+/** Minimal form object shared across FormStep stories */
+export const storyForm = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: {
+            id: 'SECTION_1',
+            name: 'Sección 1',
+            steps: [],
+            nextSection: null,
+        },
+    },
+    steps: {
+        'inner-step-1': {
+            id: 'inner-step-1',
+            idSection: 'SECTION_1',
+            stepPath: ['inner-step-1'],
+            type: FormStepTypes.TEXTINPUT,
+            label: 'Campo interior 1',
+            description: null,
+            required: false,
+            size: 4,
+            editable: true,
+        },
+        'inner-step-2': {
+            id: 'inner-step-2',
+            idSection: 'SECTION_1',
+            stepPath: ['inner-step-2'],
+            type: FormStepTypes.TEXTINPUT,
+            label: 'Campo interior 2',
+            description: null,
+            required: false,
+            size: 4,
+            editable: true,
+        },
+    },
+    confirmationMessage: {
+        blocks: [],
+        entityMap: {},
+    },
+    showLink: false,
+    size: {
+        blockSize: 200,
+        blockNum: 4,
+        spacingSize: 10,
+    },
+};
+function createStoryStore() {
+    return configureStore({
+        reducer: {
+            forms: EurekaFormsReducer,
+            [RootApi.reducerPath]: RootApi.reducer,
+        },
+        preloadedState: {
+            forms: {
+                [STORY_FORM_ID]: defaultRootState,
+            },
+        },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+/**
+ * Decorator for FormStep stories.
+ * Provides: Redux store, form ID, react-hook-form, FormContext, SectionContext.
+ */
+export function withFormStepProviders(Story) {
+    const store = createStoryStore();
+    function FormStepWrapper({ children }) {
+        const methods = useForm({ mode: 'onChange' });
+        return _jsx(FormProvider, { ...methods, children: children });
+    }
+    return (_jsx(Provider, { store: store, context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: storyForm, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormStepWrapper, { children: _jsx(Story, {}) }) }) }) }) }));
+}

package/dist/FormSteps/AYFStepMapper.js

@@ -64,7 +64,7 @@ function AYFStepMapper(props) {
     switch (props.step.type) {
         case AYFFormStepTypes.AYF_START_MONTH:
         case AYFFormStepTypes.AYF_END_MONTH:
-            return (_jsx(SmartSelectStep, { ...props, step: props.step, getOptions: getMonths, getOptionSelected: (option, value) => option.id === value.id, defaultValue: props.step.type === AYFFormStepTypes.AYF_START_MONTH
+            return (_jsx(SmartSelectStep, { ...props, step: { ...props.step, searchable: false }, getOptions: getMonths, getOptionSelected: (option, value) => option.id === value.id, defaultValue: props.step.type === AYFFormStepTypes.AYF_START_MONTH
                     ? { id: '1', label: 'Enero' }
                     : { id: '12', label: 'Diciembre' }, getValueString: (value) => value?.id, IconComponent: () => _jsx(CalendarIcon, {}) }));
         case AYFFormStepTypes.AYF_YEAR:
@@ -78,7 +78,7 @@ function AYFStepMapper(props) {
         case AYFFormStepTypes.AYF_CUT_OFF_DATE:
             return _jsx(DatePickerStep, { ...props, step: props.step, defaultValue: new Date().toString() });
         case AYFFormStepTypes.AYF_ICA_CITY:
-            return (_jsx(SmartSelectStep, { ...props, step: props.step, getOptions: getCiudadesOptions, getOptionSelected: (option, value) => option === value, getValueString: (value) => value, IconComponent: () => _jsx(LocationIcon, {}) }));
+            return (_jsx(SmartSelectStep, { ...props, step: { ...props.step, searchable: false }, getOptions: getCiudadesOptions, getOptionSelected: (option, value) => option === value, getValueString: (value) => value, IconComponent: () => _jsx(LocationIcon, {}) }));
         default:
             return _jsx("div", {});
     }

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

@@ -20,11 +20,11 @@ function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
     });
     const handleChange = useCallback((dateRange) => {
         const [start, end] = dateRange;
-        if (start && end) {
-            onChange([start.toISOString(), end.toISOString()]);
+        if (!start && !end) {
+            onChange(null);
         }
         else {
-            onChange(null);
+            onChange([start?.toISOString() ?? null, end?.toISOString() ?? null]);
         }
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];

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

@@ -18,11 +18,13 @@ function MaterialEntityValueDialog({ type, entity, message, entityValue, handleC
     const editorState = useMemo(() => {
         return EditorState.createWithContent(convertFromRaw(mapDraftEntities({ form, dependencies, entity, entityValue }, message)));
     }, [form, message, dependencies, entity, entityValue]);
-    return (_jsx(Dialog, { PaperProps: {
-            style: {
-                borderRadius: '20px',
-                maxWidth: '100vw',
-                boxSizing: 'content-box',
+    return (_jsx(Dialog, { slotProps: {
+            paper: {
+                style: {
+                    borderRadius: '20px',
+                    maxWidth: '100vw',
+                    boxSizing: 'content-box',
+                },
             },
         }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: formStyle.textColor }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => handleClose(), children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.contentContainer, children: [_jsx("div", { className: styles.warningContainer, style: {
                                         color: type === 'INFO' ? formStyle.primaryColor : formStyle.errorColor,

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

@@ -58,7 +58,7 @@ function FileUploadStep({ step, editable }) {
                 postFile(pFile.file, pFile.postInfo),
                 new Promise((resolve) => setTimeout(resolve, 1000)),
             ]);
-            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
+            setFileChange((prev) => prev.map((f) => (f.file === pFile.file ? { ...f, state: 'DONE', ...resp[0] } : f)));
         }
         catch (error) {
             console.error(error);

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

@@ -64,7 +64,7 @@ function SelectorStep({ step, editable }) {
         }
         // 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()] }));
+    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 ?? undefined, getOptionSelected: (option, value) => option?.value === value?.value }) }), value && mapNestedOption()] }));
 }
 function SelectorStepContainer(props) {
     return (_jsx(StepFillerContainer, { step: props.step, children: _jsx(SelectorStep, { ...props }) }));

package/dist/FormSteps/StepFunctions.js

@@ -483,7 +483,7 @@ const evaluateEntityPropertyCondition = (condition, entity, entityValue) => {
         return !boolFactor;
     }
     const property = entity.steps[condition.idProperty];
-    if (!property || property.type !== condition.propertyType) {
+    if (property?.type !== condition.propertyType) {
         return false;
     }
     const value = entityValue[condition.idProperty];

package/dist/Shared/ErkCheckbox/ErkCheckBox.d.ts

@@ -9,6 +9,7 @@ interface ErkCheckboxProps extends Omit<StyleProps, 'error'>, Omit<MuiCheckboxPr
     onChange?: (checked: boolean) => void;
     checked: boolean;
     error?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkCheckbox/ErkCheckBox.js

@@ -17,8 +17,8 @@ const StyledCheckbox = styled(MuiCheckbox, { shouldForwardProp: (prop) => prop !
 /**
  * Generic capta checkbox
  */
-function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, ...others }) {
-    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, inputProps: { disabled: disabled || readOnly }, icon: _jsx(CheckboxUncheckedIcon, {}), checkedIcon: _jsx(CheckboxCheckedIcon, {}), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
+function CustomCheckBox({ onChange, error = false, readOnly = false, disabled = false, inputRef, ...others }) {
+    return (_jsx(FormControl, { error: true, children: _jsx(StyledCheckbox, { ...others, error: +error, readOnly: readOnly, disabled: disabled, slotProps: { input: { disabled: disabled ?? readOnly, ref: inputRef } }, icon: _jsx(CheckboxUncheckedIcon, {}), checkedIcon: _jsx(CheckboxCheckedIcon, {}), onChange: (event) => onChange?.(typeof event === 'boolean' ? event : event.target.checked) }) }));
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef } from 'react';
-import { styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, PickersDay as MuiPickerDay, usePickerContext, } from '@mui/x-date-pickers';
+import React, { useMemo } from 'react';
+import { format as dateFnsFormat, isValid } from 'date-fns';
+import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
+import { PickerDay as MuiPickerDay } from '@mui/x-date-pickers/PickerDay';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
@@ -136,17 +138,36 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
         },
     },
 }));
-// eslint-disable-next-line react/display-name
-const CustomTextField = forwardRef((props, ref) => {
-    const pickerContext = usePickerContext();
+function CustomPickerField({ error, required, helperText, size = 'small', labelMargin = 5, inputRef, fullWidth = true, }) {
+    const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
+    const { displayValue, isInvalid } = useMemo(() => {
+        if (!value)
+            return { displayValue: '', isInvalid: false };
+        if (!isValid(value))
+            return { displayValue: '', isInvalid: true };
+        try {
+            return { displayValue: dateFnsFormat(value, fieldFormat ?? 'P'), isInvalid: false };
+        }
+        catch {
+            return { displayValue: '', isInvalid: true };
+        }
+    }, [value, fieldFormat]);
     const handleClick = () => {
-        if (!props.disabled && !props.readOnly) {
-            pickerContext.setOpen((prev) => !prev);
+        if (!disabled && !readOnly) {
+            setOpen((prev) => !prev);
         }
     };
-    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
-});
-function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, 
+    return (_jsx(StyledTextField, { value: displayValue, label: label, disabled: disabled, readOnly: readOnly, error: isInvalid || error, required: required, helperText: isInvalid ? 'Fecha inválida' : helperText, size: size, labelMargin: labelMargin, inputRef: inputRef, onClick: handleClick, fullWidth: fullWidth, placeholder: "", slotProps: {
+            input: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { style: {
+                            fontSize: size === 'small' ? 18 : 20,
+                            opacity: disabled || readOnly ? 0.5 : 1,
+                        } }) })),
+                readOnly: true,
+            },
+        } }));
+}
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, inputRef, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
     if (pickTime) {
@@ -189,18 +210,14 @@ orientation: _orientation, ...others }) {
                     hidden: false,
                     toolbarPlaceholder: '– –',
                 },
-                textField: {
+                field: {
                     error,
-                    size,
-                    disabled,
-                    readOnly: !disabled && readOnly,
+                    required,
                     helperText,
+                    size,
                     labelMargin,
-                    placeholder: '',
                     fullWidth: true,
-                    InputProps: {
-                        readOnly: !disabled && readOnly,
-                    },
+                    inputRef,
                 },
             }, viewRenderers: {
                 hours: renderTimeViewClock,
@@ -210,9 +227,8 @@ orientation: _orientation, ...others }) {
                 day: StyledDay,
                 dialog: StyledDialog,
                 toolbar: StyledDateTimeToolBar,
-                textField: CustomTextField,
-                openPickerIcon: CalendarIcon,
-            }, enableAccessibleFieldDOMStructure: false }));
+                field: CustomPickerField,
+            } }));
     }
     else {
         return (_jsx(StyledDatePicker, { ...others, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
@@ -244,26 +260,21 @@ orientation: _orientation, ...others }) {
                     hidden: false,
                     toolbarPlaceholder: '– –',
                 },
-                textField: {
-                    size,
+                field: {
                     error,
-                    disabled,
-                    readOnly: !disabled && readOnly,
+                    required,
                     helperText,
+                    size,
                     labelMargin,
                     fullWidth: true,
-                    placeholder: '',
-                    InputProps: {
-                        readOnly: !disabled && readOnly,
-                    },
+                    inputRef,
                 },
             }, slots: {
                 day: StyledDay,
                 dialog: StyledDialog,
                 toolbar: StyledDateToolBar,
-                textField: CustomTextField,
-                openPickerIcon: CalendarIcon,
-            }, enableAccessibleFieldDOMStructure: false }));
+                field: CustomPickerField,
+            } }));
     }
 }
 /**

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
 import { DateRange } from '@mui/x-date-pickers-pro';
+import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps<boolean>, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
+interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (dateRange: DateRange<Date>) => void;
     value?: DateRange<Date>;
     inputRef?: React.Ref<HTMLInputElement>;
     /** labelMargin */
     labelMargin?: number;
+    /** Shortcuts to display in the picker */
+    shortcuts?: PickersShortcutsItem<DateRange<Date>>[];
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { styled, Dialog as MuiDialog } from '@mui/material';
+import React, { useMemo } from 'react';
+import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
 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, isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
@@ -85,22 +84,47 @@ 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();
+const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef, }, ref) {
+    const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
+    const { displayValue, isInvalid } = useMemo(() => {
+        const [startDate, endDate] = value ?? [null, null];
+        if (!startDate)
+            return { displayValue: '', isInvalid: false };
+        if (!isValid(startDate))
+            return { displayValue: '', isInvalid: true };
+        if (endDate && !isValid(endDate))
+            return { displayValue: '', isInvalid: true };
+        try {
+            const fmt = fieldFormat ?? 'P';
+            const start = format(startDate, fmt);
+            const end = endDate ? format(endDate, fmt) : '';
+            return { displayValue: end ? `${start} – ${end}` : start, isInvalid: false };
+        }
+        catch {
+            return { displayValue: '', isInvalid: true };
+        }
+    }, [value, fieldFormat]);
     const handleClick = () => {
-        if (!props.disabled && !props.readOnly) {
-            pickerContext.setOpen((prev) => !prev);
+        if (!disabled && !readOnly) {
+            setOpen((prev) => !prev);
         }
     };
-    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
+    return (_jsx(StyledTextField, { ref: ref, value: displayValue, label: label, disabled: disabled, readOnly: readOnly, error: isInvalid || error, required: required, helperText: isInvalid ? 'Fecha inválida' : helperText, size: size, labelMargin: labelMargin, inputRef: inputRef, onClick: handleClick, fullWidth: fullWidth, placeholder: "", slotProps: {
+            input: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { style: {
+                            fontSize: size === 'small' ? 18 : 20,
+                            opacity: disabled || readOnly ? 0.5 : 1,
+                        } }) })),
+                readOnly: true,
+            },
+        } }));
 });
 const formatDate = (date, showYear) => {
     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 }) {
+function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, inputRef, shortcuts, ...others }) {
     const [startDate, endDate] = value ?? [null, null];
     const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
     const showYear = startDate &&
@@ -111,19 +135,16 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
     const formattedStartDate = formatDate(startDate, Boolean(showYear));
     const formattedEndDate = formatDate(endDate, Boolean(showYear));
     const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
-    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, enableAccessibleFieldDOMStructure: false, slots: {
-            //TODO: create system for shortcuts customs or default (enums)
-            shortcuts: undefined,
-            field: SingleInputDateRangeField,
+    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, slots: {
+            field: CustomRangePickerField,
             day: StyledDay,
             dialog: StyledDialog,
             toolbar: StyledDateToolBar,
-            openPickerIcon: CalendarIcon,
-            textField: CustomTextField,
         }, slotProps: {
             actionBar: {
                 actions: ['clear', 'accept'],
             },
+            shortcuts: shortcuts ? { items: shortcuts } : undefined,
             layout: {
                 sx: {
                     backgroundColor: '#ffffff',
@@ -154,18 +175,14 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
                 hidden: false,
                 toolbarPlaceholder: toolbarText,
             },
-            textField: {
+            field: {
                 size,
                 error,
-                disabled,
-                readOnly: !disabled && readOnly,
+                required: others.required,
                 helperText,
                 labelMargin,
                 fullWidth: true,
-                placeholder: '',
-                InputProps: {
-                    readOnly: !disabled && readOnly,
-                },
+                inputRef,
             },
         } }));
 }

package/dist/Shared/ErkMenuItem.d.ts

@@ -1,2 +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<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>, {}, {}>;
+declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").MenuItemOwnProps> & Omit<import("@mui/material").ButtonBaseOwnProps, "children" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material").MenuItemOwnProps> & 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" | "nativeButton" | "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

@@ -6,12 +6,12 @@ export interface SelectorStyleProps {
 }
 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<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;
+    component?: React.ElementType | undefined;
 } & {
     open: boolean;
 }, {}, {}>;
 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;
+    component?: React.ElementType | undefined;
 }, {}, {}>;
 export type ErkSelectValue<Type extends string | number, Multiple, Clearable> = Multiple extends true ? Type[] : Clearable extends true ? Type | undefined : Type;
 export interface ErkSelectProps<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<MuiSelectProps, 'color' | 'onChange' | 'ref'>, SelectorStyleProps {