tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(ui): upgrade react-datepicker dependency from 6.2.0 to 7.5.0 (#9654)

Browse Source 
The new version comes with included types (we can uninstall
`@types/react-datepicker`!), removes 1 dependency and adds official
support for React 19
This commit is contained in:
Alessio Gravili
2024-12-01 22:53:12 -07:00
committed by GitHub
parent 0b445c8013
commit 9d724086c7
5 changed files with 30 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/payload/package.json
View File

@@ -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",

4
packages/payload/src/admin/elements/DatePicker.ts
View File

@@ -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'
}

3
packages/ui/package.json
View File

@@ -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:types-react@19.0.0-rc.1",
"@types/react-datepicker": "6.2.0",
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
"@types/uuid": "10.0.0",
"babel-plugin-react-compiler": "0.0.0-experimental-24ec0eb-20240918",

19
packages/ui/src/elements/DatePicker/DatePicker.tsx
View File

@@ -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}`]

51
pnpm-lock.yaml generated
View File

@@ -897,9 +897,6 @@ importers:
'@types/pluralize':
specifier: 0.0.33
version: 0.0.33
'@types/react-datepicker':
specifier: 6.2.0
version: 6.2.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
'@types/uuid':
specifier: 10.0.0
version: 10.0.0
@@ -918,6 +915,9 @@ importers:
graphql-http:
specifier: ^1.22.0
version: 1.22.2(graphql@16.9.0)
react-datepicker:
specifier: 7.5.0
version: 7.5.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
rimraf:
specifier: 3.0.2
version: 3.0.2
@@ -1528,8 +1528,8 @@ importers:
specifier: 19.0.0-rc-65a56d0e-20241020
version: 19.0.0-rc-65a56d0e-20241020
react-datepicker:
specifier: 6.9.0
version: 6.9.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
specifier: 7.5.0
version: 7.5.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
react-dom:
specifier: 19.0.0-rc-65a56d0e-20241020
version: 19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020)
@@ -1582,9 +1582,6 @@ importers:
'@types/react':
specifier: npm:types-react@19.0.0-rc.1
version: types-react@19.0.0-rc.1
'@types/react-datepicker':
specifier: 6.2.0
version: 6.2.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
'@types/react-dom':
specifier: npm:types-react-dom@19.0.0-rc.1
version: types-react-dom@19.0.0-rc.1
@@ -4888,9 +4885,6 @@ packages:
'@types/range-parser@1.2.7':
resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
'@types/react-datepicker@6.2.0':
resolution: {integrity: sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==}
'@types/react-transition-group@4.4.11':
resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
@@ -5835,8 +5829,8 @@ packages:
dataloader@2.2.2:
resolution: {integrity: sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==}
date-fns@3.3.1:
resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==}
date-fns@3.6.0:
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
date-fns@4.1.0:
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
@@ -8599,8 +8593,8 @@ packages:
resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
hasBin: true
react-datepicker@6.9.0:
resolution: {integrity: sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==}
react-datepicker@7.5.0:
resolution: {integrity: sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==}
peerDependencies:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
@@ -8639,12 +8633,6 @@ packages:
react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
react-onclickoutside@6.13.1:
resolution: {integrity: sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==}
peerDependencies:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
react-select@5.8.3:
resolution: {integrity: sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==}
peerDependencies:
@@ -14225,15 +14213,6 @@ snapshots:
'@types/range-parser@1.2.7': {}
'@types/react-datepicker@6.2.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)':
dependencies:
'@floating-ui/react': 0.26.27(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
'@types/react': types-react@19.0.0-rc.1
date-fns: 3.3.1
transitivePeerDependencies:
- react
- react-dom
'@types/react-transition-group@4.4.11':
dependencies:
'@types/react': types-react@19.0.0-rc.1
@@ -15357,7 +15336,7 @@ snapshots:
dataloader@2.2.2: {}
date-fns@3.3.1: {}
date-fns@3.6.0: {}
date-fns@4.1.0: {}
@@ -18641,15 +18620,14 @@ snapshots:
minimist: 1.2.8
strip-json-comments: 2.0.1
react-datepicker@6.9.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020):
react-datepicker@7.5.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020):
dependencies:
'@floating-ui/react': 0.26.27(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
clsx: 2.1.1
date-fns: 3.3.1
date-fns: 3.6.0
prop-types: 15.8.1
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020)
react-onclickoutside: 6.13.1(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)
react-diff-viewer-continued@3.2.6(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020):
dependencies:
@@ -18686,11 +18664,6 @@ snapshots:
react-is@18.3.1: {}
react-onclickoutside@6.13.1(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020):
dependencies:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020)
react-select@5.8.3(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)(types-react@19.0.0-rc.1):
dependencies:
'@babel/runtime': 7.26.0