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 <braden@opencraft.com>
This commit is contained in:
renovate[bot]
2025-11-18 13:10:38 -05:00
committed by GitHub
parent 650bb62fa7
commit acbd1de548
6 changed files with 72 additions and 36 deletions

80
package-lock.json generated
View File

@@ -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": {

View File

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

View File

@@ -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 = ({
<DatePicker
name="date"
data-testid="course-updates-datepicker"
selected={isValidDate(values.date) ? convertToDateFromString(values.date) : ''}
selected={isValidDate(values.date) ? convertToDateFromString(values.date) : undefined}
dateFormat={DATE_FORMAT}
className={classNames('datepicker-custom-control', {
'datepicker-custom-control_isInvalid': !isValid,

View File

@@ -1,5 +1,5 @@
import React from 'react';
import DatePicker from 'react-datepicker/dist';
import DatePicker from 'react-datepicker';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Form, Icon } from '@openedx/paragon';

View File

@@ -124,10 +124,10 @@ describe('FilesAndUploads utils', () => {
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();
});
});

View File

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