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>

Author: renovate[bot]

package-lock.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",

package.json

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

src/course-updates/update-form/UpdateForm.jsx

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

src/generic/datepicker-control/DatepickerControl.jsx

@@ -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();
     });
   });
 

src/utils.test.tsx

@@ -265,28 +265,30 @@ 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);
 
   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 '';