[ARGG-1201]: React 18 investigation

package.json

@@ -134,15 +134,14 @@
     "@storybook/react-webpack5": "^7.6.8",
     "@storybook/test": "^7.6.19",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.3",
+    "@types/jest-axe": "^3.5.9",
     "@types/lodash.clamp": "^4.0.9",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
     "@types/webpack-env": "^1.18.4",
     "autoprefixer": "^10.4.18",
@@ -164,9 +163,9 @@
     "gulp-rename": "^2.0.0",
     "gulp-svgmin": "^4.1.0",
     "husky": "^9.1.3",
-    "jest": "^29.0.0",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.2.2",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "^2.9.0",
@@ -175,8 +174,8 @@
     "postcss-loader": "^8.1.1",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-svg-loader": "^3.0.1",
     "sass-embedded": "^1.77.1",
     "sass-loader": "^14.2.1",

packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx

@@ -17,7 +17,7 @@
  */
 import { renderToString } from 'react-dom/server';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import useMediaQuery from './useMediaQuery';

packages/bpk-component-calendar/src/BpkCalendarContainer.tsx

@@ -222,6 +222,7 @@ const withCalendarState = <P extends object>(Calendar: ComponentType<P>) => {
 
       const minDate = startOfDay(nextProps.minDate!);
       const maxDate = startOfDay(nextProps.maxDate!);
+      // @ts-ignore
       if (focusedDateHasChanged(this.props, nextProps)) {
         this.setState({
           focusedDate: dateToBoundaries(

packages/bpk-component-carousel/src/utils.test.tsx

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react'
+
+import { useScrollToInitialImage } from './utils';
+
+describe('useScrollToInitialImage', () => {
+  it('should scroll to initial image on mount', () => {
+    const imagesRef = {
+      current: [document.createElement('div'), document.createElement('div')],
+    };
+    const initialImageIndex = 0;
+
+    renderHook(() => useScrollToInitialImage(initialImageIndex, imagesRef));
+
+    expect(
+      imagesRef.current[initialImageIndex].scrollIntoView,
+    ).toHaveBeenCalledTimes(1);
+  });
+});

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 
 import { BpkCalendarGrid } from '../../bpk-component-calendar';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
@@ -33,7 +33,7 @@ type Props = Partial<BpkCalendarGridProps> & {
   month: Date;
   formatDateFull: (date: Date) => Date | string;
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  formatMonth: (date: Date) => Date | string;
+  formatMonth: (date: Date) => ReactNode | string;
 };
 const BpkScrollableCalendarGrid = ({
   className,

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useRef, useState, useMemo, useEffect } from 'react';
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 
 import { startOfDay, startOfMonth } from 'date-fns';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -54,7 +54,7 @@ type Props = Partial<BpkCalendarGridProps> & {
   formatDateFull: (date: Date) => Date | string;
   month: Date;
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  formatMonth: (date: Date) => Date | string;
+  formatMonth: (date: Date) => ReactNode | string;
   focusedDate?: Date | null;
   selectionConfiguration?: SelectionConfiguration;
   className?: string | null;

packages/bpk-component-text/src/BpkText.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
+import type { ReactNode, ReactElement } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 

packages/package.json

@@ -49,8 +49,8 @@
   },
   "peerDependencies": {
     "node-sass": ">= 7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
     "react-transition-group": "^4.4.5",
     "sass": "^1",
     "sass-embedded": "^1"

packages/react-version-test.js

@@ -18,6 +18,6 @@
 
 import { version } from 'react';
 
-it('packages/* should be ^17.0.0', () => {
-  expect(version).toMatch(/^17/);
+it('packages/* should be ^18.0.0', () => {
+  expect(version).toMatch(/^18/);
 });

scripts/npm/check-react-versions.js

@@ -20,7 +20,7 @@
 
 const reactDeps = require('../../package.json').devDependencies;
 
-const skyscannerStandard = '17.0.2';
+const skyscannerStandard = '18.3.0';
 const reactLibs = ['react', 'react-dom'];
 
 const reactVersionErrors = [];