From 9d724086c7a683f7183c45530690e5ee30b6f6ce Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Sun, 1 Dec 2024 22:53:12 -0700 Subject: [PATCH] feat(ui): upgrade react-datepicker dependency from 6.2.0 to 7.5.0 (#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 | 2 +- .../payload/src/admin/elements/DatePicker.ts | 4 +- packages/ui/package.json | 3 +- .../ui/src/elements/DatePicker/DatePicker.tsx | 19 +++++-- pnpm-lock.yaml | 51 +++++-------------- 5 files changed, 30 insertions(+), 49 deletions(-) diff --git a/packages/payload/package.json b/packages/payload/package.json index 7a10e413029..ed207b7af2c 100644 --- a/packages/payload/package.json +++ b/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", diff --git a/packages/payload/src/admin/elements/DatePicker.ts b/packages/payload/src/admin/elements/DatePicker.ts index 2a44319c916..9242bb86dcc 100644 --- a/packages/payload/src/admin/elements/DatePicker.ts +++ b/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' } diff --git a/packages/ui/package.json b/packages/ui/package.json index deffb85a708..c5756121235 100644 --- a/packages/ui/package.json +++ b/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: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", diff --git a/packages/ui/src/elements/DatePicker/DatePicker.tsx b/packages/ui/src/elements/DatePicker/DatePicker.tsx index 2c5e4da2c47..7fbb7197011 100644 --- a/packages/ui/src/elements/DatePicker/DatePicker.tsx +++ b/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) => { } } - 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) => { } } - 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) => { 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}`] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a2fcfc9e515..71f34c2dbe8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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