[pull] main from tinacms:main

.changeset/wise-hounds-taste.md

@@ -0,0 +1,5 @@
+---
+"tinacms": patch
+---
+
+fix: update date-fs and related types

packages/tinacms/package.json

@@ -92,7 +92,7 @@
     "cmdk": "catalog:",
     "color-string": "catalog:",
     "crypto-js": "catalog:",
-    "date-fns": "2.30.0",
+    "date-fns": "4.1.0",
     "es-toolkit": "^1.42.0",
     "final-form": "catalog:",
     "final-form-arrays": "catalog:",
@@ -109,7 +109,7 @@
     "prop-types": "catalog:",
     "react-colorful": "catalog:",
     "react-datetime": "catalog:",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.13.0",
     "react-dropzone": "catalog:",
     "react-final-form": "catalog:",
     "react-icons": "^5.4.0",

packages/tinacms/src/toolkit/components/ui/date-time-picker.tsx

@@ -10,7 +10,7 @@ import { Input } from './input';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 import moment from 'moment';
 import 'moment-timezone';
-import { enUS } from 'date-fns/locale';
+import { enUS, Locale } from 'date-fns/locale';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Clock } from 'lucide-react';
 import * as React from 'react';

packages/tinacms/src/toolkit/fields/plugins/date-field-plugin.tsx

@@ -12,6 +12,7 @@ import {
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore importing css is not recognized
 import { DateTimePicker } from '../../components/ui/date-time-picker';
+import { DayPickerLocale } from 'react-day-picker';
 
 export const DateField = wrapFieldsWithMeta<InputProps, DatetimepickerProps>(
   ({ input, field: { dateFormat, timeFormat, onChange, ...rest } }) => {
@@ -43,10 +44,11 @@ export const DateField = wrapFieldsWithMeta<InputProps, DatetimepickerProps>(
       return dateFormat;
     }, [dateFormat]);
 
-    const date = input.value ? new Date(input.value) : input.value;
+    const date = input.value ? new Date(input.value) : new Date();
     return (
       <React.Fragment>
         <DateTimePicker
+          {...rest}
           ref={inputRef}
           granularity={granularity}
           onChange={(value) =>
@@ -56,7 +58,11 @@ export const DateField = wrapFieldsWithMeta<InputProps, DatetimepickerProps>(
           hourCycle={12}
           dateFormat={getDateFormat()}
           value={date}
-          {...rest}
+          locale={
+            rest.locale
+              ? ({ code: rest.locale } as Partial<DayPickerLocale>)
+              : undefined
+          }
         />
       </React.Fragment>
     );

packages/tinacms/src/toolkit/react-sidebar/components/VersionInfo.tsx

@@ -1,9 +1,9 @@
 import { useCMS } from '@toolkit/react-tinacms';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import { Check, LoaderCircle, TriangleAlert } from 'lucide-react';
 import React from 'react';
 import { version as currentVersion } from '../../../../package.json';
 import { LatestVersionResponse } from '../../../internalClient';
+import { formatDistanceToNow } from 'date-fns';
 
 export const VersionInfo = () => {
   const cms = useCMS();