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

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.33-test",
+  "version":"3.0.34-test",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",