@arquimedes.co/eureka-forms 3.0.45-mui9 → 3.0.45-next-fix

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

@@ -47,11 +47,9 @@ 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;
@@ -62,10 +60,10 @@ export interface Collapsible extends GSteps.GBaseStep {
 export interface FormSelector extends GSteps.GBaseStep {
     type: FormStepTypes.SELECTOR;
     label: string;
-    description: string | null;
+    description: string;
     required: boolean;
     searchable: boolean;
-    options: readonly FormSelectorOption[];
+    options: 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: readonly string[];
+    stepPath: 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, (draft) => {
-                const firstSection = draft.sections[draft.firstSection];
-                if (firstSection.steps === undefined && draft.rootSteps !== undefined) {
-                    firstSection.steps = draft.rootSteps;
+            form = createNextState(form, (form) => {
+                const firstSection = form.sections[form.firstSection];
+                if (firstSection.steps === undefined && form.rootSteps !== undefined) {
+                    firstSection.steps = form.rootSteps;
                 }
                 //If a rootStep is a mapper of type section
-                if (classifiers)
-                    draft.classifiers = classifiers;
+                if (form && classifiers)
+                    form.classifiers = classifiers;
                 /** Assign the idSection to all the forms steps */
-                for (const section of Object.values(draft.sections)) {
+                for (const section of Object.values(form.sections)) {
                     for (const idStep of section.steps) {
-                        iterateNestedSteps(idStep, draft.steps, (step, path) => {
+                        iterateNestedSteps(idStep, form.steps, (step, path) => {
                             step.idSection = section.id;
                             step.stepPath = path;
                         });
                     }
-                    for (const idStep of draft.hiddenSteps ?? []) {
-                        iterateNestedSteps(idStep, draft.steps, (step, path) => {
+                    for (const idStep of form.hiddenSteps ?? []) {
+                        iterateNestedSteps(idStep, form.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,13 +46,11 @@ function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
                         fontSize: widthStats.isMobile ? '1rem' : '1.2rem',
                     }, children: confirmation.url })] }));
     };
-    return (_jsx(Dialog, { slotProps: {
-            paper: {
-                style: {
-                    borderRadius: '20px',
-                    maxWidth: '100vw',
-                    boxSizing: 'content-box',
-                },
+    return (_jsx(Dialog, { PaperProps: {
+            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,11 +44,9 @@ function TermComponent({ term, tempError }) {
             return parts;
         }
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(Dialog, { slotProps: {
-                    paper: {
-                        style: {
-                            borderRadius: '20px',
-                        },
+    return (_jsxs(React.Fragment, { children: [_jsx(Dialog, { PaperProps: {
+                    style: {
+                        borderRadius: '20px',
                     },
                 }, onClose: () => {
                     setShowDialog(false);

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

@@ -66,13 +66,11 @@ function CBRPropertyStepComponent(props) {
                             }
                         }
                     }
-                    : undefined, getOptions: getInmueblesOptions }), showWarning !== undefined && (_jsx(Dialog, { slotProps: {
-                    paper: {
-                        style: {
-                            borderRadius: '20px',
-                            maxWidth: '100vw',
-                            boxSizing: 'content-box',
-                        },
+                    : undefined, getOptions: getInmueblesOptions }), showWarning !== undefined && (_jsx(Dialog, { PaperProps: {
+                    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/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, searchable: false }, getOptions: getMonths, getOptionSelected: (option, value) => option.id === value.id, defaultValue: props.step.type === AYFFormStepTypes.AYF_START_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
                     ? { 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, searchable: false }, getOptions: getCiudadesOptions, getOptionSelected: (option, value) => option === value, getValueString: (value) => value, IconComponent: () => _jsx(LocationIcon, {}) }));
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, 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(null);
+        if (start && end) {
+            onChange([start.toISOString(), end.toISOString()]);
         }
         else {
-            onChange([start?.toISOString() ?? null, end?.toISOString() ?? null]);
+            onChange(null);
         }
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];

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

@@ -18,13 +18,11 @@ 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, { slotProps: {
-            paper: {
-                style: {
-                    borderRadius: '20px',
-                    maxWidth: '100vw',
-                    boxSizing: 'content-box',
-                },
+    return (_jsx(Dialog, { PaperProps: {
+            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/FileComponent/FileComponent.js

@@ -64,6 +64,6 @@ function FileUploadComponent({ file, formStyle, error, editable, handleRemove, f
                     }
                 }, children: file.file?.name ?? file.fileName }), editable && (_jsx("div", { className: styles.deletBtn, onClick: () => {
                     handleRemove();
-                }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }))] }));
+                }, children: _jsx(CloseIcon, { size: 24 }) }))] }));
 }
 export default FileUploadComponent;

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((prev) => prev.map((f) => (f.file === pFile.file ? { ...f, state: 'DONE', ...resp[0] } : f)));
+            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
         }
         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 ?? undefined, 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, 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?.type !== condition.propertyType) {
+    if (!property || property.type !== condition.propertyType) {
         return false;
     }
     const value = entityValue[condition.idProperty];

package/dist/Shared/ErkButton/ErkButton.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkButton from './ErkButton';
+declare const meta: {
+    component: typeof ErkButton;
+    tags: string[];
+    args: {
+        text: string;
+        disabled: false;
+        onClick: import("vitest").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/ErkButton/ErkButton.stories.js

@@ -0,0 +1,28 @@
+import { fn } from 'storybook/test';
+import ErkButton from './ErkButton';
+const meta = {
+    component: ErkButton,
+    tags: ['autodocs'],
+    args: {
+        text: 'Label',
+        disabled: false,
+        onClick: fn(),
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Label',
+    },
+};
+export const Disabled = {
+    args: {
+        text: 'Label',
+        disabled: true,
+    },
+};
+export const DifferentColors = {
+    args: {
+        text: 'Label',
+    },
+};

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

@@ -9,7 +9,6 @@ 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, 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) }) }));
+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) }) }));
 }
 /**
  * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkCheckBox from './ErkCheckBox';
+declare const meta: {
+    component: typeof ErkCheckBox;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Uncheked: Story;
+export declare const Checked: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const ErrorColor: Story;

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.js

@@ -0,0 +1,34 @@
+import ErkCheckBox from './ErkCheckBox';
+const meta = {
+    component: ErkCheckBox,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+export const Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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 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 { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
@@ -138,36 +136,17 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
         },
     },
 }));
-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]);
+// eslint-disable-next-line react/display-name
+const CustomTextField = forwardRef((props, ref) => {
+    const pickerContext = usePickerContext();
     const handleClick = () => {
-        if (!disabled && !readOnly) {
-            setOpen((prev) => !prev);
+        if (!props.disabled && !props.readOnly) {
+            pickerContext.setOpen((prev) => !prev);
         }
     };
-    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, 
+    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
+});
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
     if (pickTime) {
@@ -210,14 +189,18 @@ orientation: _orientation, ...others }) {
                     hidden: false,
                     toolbarPlaceholder: '– –',
                 },
-                field: {
+                textField: {
                     error,
-                    required,
-                    helperText,
                     size,
+                    disabled,
+                    readOnly: !disabled && readOnly,
+                    helperText,
                     labelMargin,
+                    placeholder: '',
                     fullWidth: true,
-                    inputRef,
+                    InputProps: {
+                        readOnly: !disabled && readOnly,
+                    },
                 },
             }, viewRenderers: {
                 hours: renderTimeViewClock,
@@ -227,8 +210,9 @@ orientation: _orientation, ...others }) {
                 day: StyledDay,
                 dialog: StyledDialog,
                 toolbar: StyledDateTimeToolBar,
-                field: CustomPickerField,
-            } }));
+                textField: CustomTextField,
+                openPickerIcon: CalendarIcon,
+            }, enableAccessibleFieldDOMStructure: false }));
     }
     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: {
@@ -260,21 +244,26 @@ orientation: _orientation, ...others }) {
                     hidden: false,
                     toolbarPlaceholder: '– –',
                 },
-                field: {
+                textField: {
+                    size,
                     error,
-                    required,
+                    disabled,
+                    readOnly: !disabled && readOnly,
                     helperText,
-                    size,
                     labelMargin,
                     fullWidth: true,
-                    inputRef,
+                    placeholder: '',
+                    InputProps: {
+                        readOnly: !disabled && readOnly,
+                    },
                 },
             }, slots: {
                 day: StyledDay,
                 dialog: StyledDialog,
                 toolbar: StyledDateToolBar,
-                field: CustomPickerField,
-            } }));
+                textField: CustomTextField,
+                openPickerIcon: CalendarIcon,
+            }, enableAccessibleFieldDOMStructure: false }));
     }
 }
 /**

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkDatePicker from './ErkDatePicker';
+declare const meta: {
+    component: typeof ErkDatePicker;
+    tags: string[];
+    args: {
+        readOnly: false;
+    };
+    parameters: {
+        date: Date;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const FullDateTime: Story;
+export declare const Error: Story;
+export declare const Menu: Story;
+export declare const DateTimeDateMenu: Story;
+export declare const DateTimeTimeMenu: Story;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErkDatePicker from './ErkDatePicker';
+import { useArgs } from 'storybook/internal/preview-api';
+const meta = {
+    component: ErkDatePicker,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        value: null,
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePicker, { ...args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+export const FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+        const time = canvas.getByText('12', {
+            selector: 'h3',
+        });
+        await userEvent.click(time);
+    },
+};

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

@@ -1,16 +1,13 @@
 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, '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>;
     /** 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