feat(date-input, date-range): upgrade react-day-picker to v9

Upgrades react-day-picker to remove the dependency on React 18

jest.config.ts

@@ -1,4 +1,5 @@
 import { Config } from "jest";
+
 import coverageThresholds from "./coverage-thresholds.json";
 
 const esmOnlyPackages = [

package.json

@@ -194,7 +194,7 @@
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "react-day-picker": "~7.4.10",
+    "react-day-picker": "^9.3.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-is": "^17.0.2",

playwright/components/date-input/index.ts

@@ -1,9 +1,10 @@
 import type { Page } from "@playwright/test";
+
 import { DAY_PICKER_WRAPPER, DAY_PICKER_HEADING } from "./locators";
 
 // component preview locators
 
 export const dayPickerWrapper = (page: Page) =>
   page.locator(DAY_PICKER_WRAPPER);
 export const dayPickerHeading = (page: Page) =>
-  page.locator(DAY_PICKER_HEADING).locator("div");
+  page.locator(DAY_PICKER_HEADING);

playwright/components/date-input/locators.ts

@@ -1,3 +1,3 @@
 // component preview locators
-export const DAY_PICKER_WRAPPER = 'div[class="DayPicker-wrapper"]';
-export const DAY_PICKER_HEADING = ".DayPicker-Caption";
+export const DAY_PICKER_WRAPPER = 'div[class="rdp-root"]';
+export const DAY_PICKER_HEADING = 'span[class="rdp-caption_label"]';

src/__internal__/utils/logger/index.ts

@@ -22,6 +22,12 @@ const Logger = {
       console.warn(`[Deprecation] ${message}`);
     }
   },
+
+  warn: (message: string) => {
+    if (enabled) {
+      console.warn(`[Warning] ${message}`);
+    }
+  },
 };
 
 export default Logger;

src/__internal__/utils/logger/logger.test.ts

@@ -1,6 +1,6 @@
 import Logger from ".";
 
-test("should not output a warning to the console when logging is disabled", () => {
+test("should not output a warning to the console when logging is disabled and a deprecation message is fired", () => {
   Logger.setEnabledState(false);
   const consoleWarnSpy = jest
     .spyOn(console, "warn")
@@ -22,3 +22,26 @@ test("should output a warning to the console with a deprecation prefix when logg
   );
   consoleWarnSpy.mockReset();
 });
+
+test("should output a warning to the console with a warning prefix when logging is enabled", () => {
+  Logger.setEnabledState(true);
+  const consoleWarnSpy = jest
+    .spyOn(console, "warn")
+    .mockImplementation(() => {});
+  Logger.warn("This is a warning message");
+
+  expect(consoleWarnSpy).toHaveBeenCalledWith(
+    "[Warning] This is a warning message",
+  );
+  consoleWarnSpy.mockReset();
+});
+
+test("should not output a warning to the console when logging is disabled and a warning message is fired", () => {
+  Logger.setEnabledState(false);
+  const consoleWarnSpy = jest
+    .spyOn(console, "warn")
+    .mockImplementation(() => {});
+  Logger.warn("This is a warning message");
+
+  expect(consoleWarnSpy).not.toHaveBeenCalled();
+});

src/components/date/__internal__/date-fns-fp/index.ts

@@ -3,5 +3,7 @@
 export { default as format } from "date-fns/fp/format";
 export { default as formatISO } from "date-fns/fp/formatISO";
 export { default as isMatch } from "date-fns/fp/isMatch";
+export { default as isValid } from "date-fns/fp/isValid";
 export { default as parse } from "date-fns/fp/parse";
+export { default as parseWithOptions } from "date-fns/fp/parseWithOptions";
 export { default as parseISO } from "date-fns/fp/parseISO";