feat(ui): upgrade react-datepicker dependency from 6.2.0 to 7.5.0 (pa…

…yloadcms#9654)

The new version comes with included types (we can uninstall
`@types/react-datepicker`!), removes 1 dependency and adds official
support for React 19

packages/payload/package.json

@@ -119,7 +119,7 @@
     "@types/minimist": "1.2.2",
     "@types/nodemailer": "6.4.14",
     "@types/pluralize": "0.0.33",
-    "@types/react-datepicker": "6.2.0",
+    "react-datepicker": "7.5.0",
     "@types/uuid": "10.0.0",
     "@types/ws": "^8.5.10",
     "copyfiles": "2.4.1",

packages/payload/src/admin/elements/DatePicker.ts

@@ -1,8 +1,8 @@
-import type { ReactDatePickerProps } from 'react-datepicker'
+import type { DatePickerProps } from 'react-datepicker'
 
 export type SharedProps = {
   displayFormat?: string
-  overrides?: ReactDatePickerProps
+  overrides?: DatePickerProps
   pickerAppearance?: 'dayAndTime' | 'dayOnly' | 'default' | 'monthOnly' | 'timeOnly'
 }
 

packages/ui/package.json

@@ -115,7 +115,7 @@
     "md5": "2.3.0",
     "object-to-formdata": "4.5.1",
     "qs-esm": "7.0.2",
-    "react-datepicker": "6.9.0",
+    "react-datepicker": "7.5.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.8.3",
     "scheduler": "0.0.0-experimental-3edc000d-20240926",
@@ -134,7 +134,6 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/react": "npm:[email protected]",
-    "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "npm:[email protected]",
     "@types/uuid": "10.0.0",
     "babel-plugin-react-compiler": "0.0.0-experimental-24ec0eb-20240918",

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ReactDatePickerProps } from 'react-datepicker'
+import type { DatePickerProps } from 'react-datepicker'
 
 import React from 'react'
 import ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'
@@ -11,9 +11,9 @@ import type { Props } from './types.js'
 import { CalendarIcon } from '../../icons/Calendar/index.js'
 import { XIcon } from '../../icons/X/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { getFormattedLocale } from './getFormattedLocale.js'
 import './library.scss'
 import './index.scss'
+import { getFormattedLocale } from './getFormattedLocale.js'
 
 const baseClass = 'date-time-picker'
 
@@ -55,7 +55,10 @@ const DatePicker: React.FC<Props> = (props) => {
     }
   }
 
-  const onChange = (incomingDate: Date) => {
+  const onChange: Extract<
+    DatePickerProps,
+    { selectsMultiple?: never; selectsRange?: never }
+  >['onChange'] = (incomingDate) => {
     const newDate = incomingDate
     if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {
       const tzOffset = incomingDate.getTimezoneOffset() / 60
@@ -66,7 +69,10 @@ const DatePicker: React.FC<Props> = (props) => {
     }
   }
 
-  const dateTimePickerProps: ReactDatePickerProps = {
+  const dateTimePickerProps: Extract<
+    DatePickerProps,
+    { selectsMultiple?: never; selectsRange?: never }
+  > = {
     customInputRef: 'ref',
     dateFormat,
     disabled: readOnly,
@@ -84,7 +90,10 @@ const DatePicker: React.FC<Props> = (props) => {
     showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
     timeFormat,
     timeIntervals,
-    ...overrides,
+    ...(overrides as Extract<
+      DatePickerProps,
+      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange
+    >),
   }
 
   const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]