From acbd1de548189ef5800ffd1846645c57763afa39 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 18 Nov 2025 13:10:38 -0500 Subject: [PATCH] chore(deps): update dependency react-datepicker to v8 (#2572) * fix(deps): update dependency react-datepicker to v8 * chore(deps): update code to work with react-datepicker v8 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Braden MacDonald --- package-lock.json | 80 +++++++++++++------ package.json | 2 +- src/course-updates/update-form/UpdateForm.jsx | 4 +- .../datepicker-control/DatepickerControl.jsx | 2 +- src/utils.test.tsx | 4 +- src/utils.tsx | 16 ++-- 6 files changed, 72 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6217afa1..44529ff0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,7 @@ "moment-shortformat": "^2.1.0", "prop-types": "^15.8.1", "react": "^18.3.1", - "react-datepicker": "^4.13.0", + "react-datepicker": "^8.0.0", "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "react-helmet": "^6.1.0", @@ -3030,6 +3030,40 @@ "@floating-ui/utils": "^0.2.10" } }, + "node_modules/@floating-ui/react": { + "version": "0.27.16", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz", + "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.6", + "@floating-ui/utils": "^0.2.10", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.4" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react/node_modules/tabbable": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz", + "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==", + "license": "MIT" + }, "node_modules/@floating-ui/utils": { "version": "0.2.10", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", @@ -11369,6 +11403,15 @@ "node": ">=0.10.0" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -12695,19 +12738,13 @@ } }, "node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" } }, "node_modules/debounce": { @@ -24058,21 +24095,18 @@ } }, "node_modules/react-datepicker": { - "version": "4.25.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", - "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.9.0.tgz", + "integrity": "sha512-yoRsGxjqVRjk8iUBssrW9jcinTeyP9mAfTpuzdKvlESOUjdrY0sfDTzIZWJAn38jvNcxW1dnDmW1CinjiFdxYQ==", "license": "MIT", "dependencies": { - "@popperjs/core": "^2.11.8", - "classnames": "^2.2.6", - "date-fns": "^2.30.0", - "prop-types": "^15.7.2", - "react-onclickoutside": "^6.13.0", - "react-popper": "^2.3.0" + "@floating-ui/react": "^0.27.15", + "clsx": "^2.1.1", + "date-fns": "^4.1.0" }, "peerDependencies": { - "react": "^16.9.0 || ^17 || ^18", - "react-dom": "^16.9.0 || ^17 || ^18" + "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "node_modules/react-dev-utils": { diff --git a/package.json b/package.json index d539bf239..afa14f2fb 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "moment-shortformat": "^2.1.0", "prop-types": "^15.8.1", "react": "^18.3.1", - "react-datepicker": "^4.13.0", + "react-datepicker": "^8.0.0", "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "react-helmet": "^6.1.0", diff --git a/src/course-updates/update-form/UpdateForm.jsx b/src/course-updates/update-form/UpdateForm.jsx index 23fa88321..f31109bdc 100644 --- a/src/course-updates/update-form/UpdateForm.jsx +++ b/src/course-updates/update-form/UpdateForm.jsx @@ -7,7 +7,7 @@ import { Icon, } from '@openedx/paragon'; import classNames from 'classnames'; -import DatePicker from 'react-datepicker/dist'; +import DatePicker from 'react-datepicker'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Calendar as CalendarIcon, Error as ErrorIcon } from '@openedx/paragon/icons'; import { Formik } from 'formik'; @@ -73,7 +73,7 @@ const UpdateForm = ({ { expect(date.toISOString()).toBe('2023-10-01T12:00:00.000Z'); }); - it('returns an empty string for invalid date strings', () => { + it('returns undefined for invalid date strings', () => { const dateStr = ''; const date = convertToDateFromString(dateStr); - expect(date).toBe(''); + expect(date).toBeUndefined(); }); }); diff --git a/src/utils.tsx b/src/utils.tsx index 373e0853f..e81a0e74d 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -265,15 +265,16 @@ export function setupYupExtensions() { }); } -export const convertToDateFromString = (dateStr: string) => { +export const convertToDateFromString = (dateStr: string): Date | undefined => { /** * Convert UTC to local time for react-datepicker - * Note: react-datepicker has a bug where it only interacts with local time + * Note: react-datepicker v4 had a bug where it only interacts with local time + * but this bug may no longer be affecting v8+ ? * @param {string} dateStr - YYYY-MM-DDTHH:MM:SSZ - * @return {Date} date in local time + * @return date in local time */ if (!dateStr) { - return ''; + return undefined; } const stripTimeZone = (stringValue: string) => stringValue.substring(0, 19); @@ -281,12 +282,13 @@ export const convertToDateFromString = (dateStr: string) => { return moment(stripTimeZone(String(dateStr))).toDate(); }; -export const convertToStringFromDate = (date: moment.MomentInput) => { +export const convertToStringFromDate = (date: moment.MomentInput): string => { /** * Convert local time to UTC from react-datepicker - * Note: react-datepicker has a bug where it only interacts with local time + * Note: react-datepicker v4 had a bug where it only interacts with local time + * but this bug may no longer be affecting v8+ ? * @param {Date} date - date in local time - * @return {string} YYYY-MM-DDTHH:MM:SSZ + * @return YYYY-MM-DDTHH:MM:SSZ */ if (!date) { return '';