Updates node to 20, React to 18, FA peer dep to latest (#1180)

.eslintrc

@@ -116,7 +116,9 @@
     {
       "files": "**/*.{ts,tsx}",
       "rules": {
-        "react/require-default-props": "off"
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error",
       }
     }
   ],

.gitignore

@@ -25,6 +25,7 @@ lib
 
 # Ignore Jetbrains IDE settings
 /.idea
+/.vscode
 
 npm-debug.log*
 yarn-debug.log*

.node-version

@@ -1 +1 @@
-18.18.2
+20.12.1

package.json

@@ -19,8 +19,6 @@
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
     "@tiptap/suggestion": "^2.1.13",
-    "@typescript-eslint/eslint-plugin": "^2",
-    "@typescript-eslint/parser": "^2",
     "react-bootstrap": "^2.5.0",
     "react-currency-input-field": "^3.6.10",
     "react-loading-skeleton": "^3.1.0",
@@ -70,12 +68,12 @@
     "bootstrap": "5.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
-    "react-tracking": "^8.1.0"
+    "react-tracking": "^9.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -109,13 +107,16 @@
     "@storybook/addons": "^7.6.17",
     "@storybook/react": "^8.0.5",
     "@storybook/react-webpack5": "^8.0.5",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^3.2.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.5",
     "@types/react-dom": "^16.0.0",
     "@types/testing-library__jest-dom": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21",
+    "@typescript-eslint/parser": "^6.21",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.0.6",
@@ -128,27 +129,26 @@
     "css-loader": "^6.8.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^4.7.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-utils": "^1.4.3",
     "file-loader": "^6.2.0",
     "jest": "^27.4.6",
     "jest-css-modules-transform": "^4.3.0",
     "node-sass": "^8.0.0",
     "nodemon": "^3.0.1",
     "prop-types": "^15.6.1",
-    "react": "^18.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^18.0.2",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
     "react-test-renderer": "^18.0.2",
-    "react-tracking": "8.1.0",
+    "react-tracking": "^9.3",
     "sass-loader": "^10.4.1",
     "storybook": "^8.0.5",
     "storybook-addon-designs": "6.3.1",
@@ -161,7 +161,6 @@
     "@babel/helper-create-regexp-features-plugin": "^7.22.15",
     "istanbul-lib-instrument": "^6.0.0",
     "jackspeak": "2.1.1",
-    "make-dir": "4.0.0",
     "normalize-package-data": "^3.0.0",
     "semver": "^7.5.3"
   },
@@ -171,7 +170,7 @@
     "scss"
   ],
   "engines": {
-    "node": ">= 16 < 19",
+    "node": ">= 20",
     "yarn": "^ 1.22"
   },
   "main": "lib/index",
@@ -198,4 +197,4 @@
     "node": "18.18.2",
     "yarn": "1.22.21"
   }
-}
+}

src/Drawer/Drawer.test.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import propTypes from 'prop-types';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import Drawer from './Drawer';
@@ -188,14 +188,15 @@ describe('Drawer', () => {
         expect(elements.drawerOverlay.get().classList).toContain('DrawerBackgroundOverlay--active');
       });
 
-      it('calls onRequestClose when pressing ESC key', () => {
+      it('calls onRequestClose when pressing ESC key', async () => {
         const onRequestClose = jest.fn();
 
         render(<SetupDrawerWithChildren visible onRequestClose={onRequestClose} />);
 
         userEvent.keyboard('{Escape}');
-
-        expect(onRequestClose).toHaveBeenCalled();
+        await waitFor(() => {
+          expect(onRequestClose).toHaveBeenCalled();
+        });
       });
 
       it('body tag has Drawer--open', () => {
@@ -233,15 +234,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag does not have Drawer--open after click', () => {
+        it('body tag does not have Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers drawerOneVisibleDefault />);
           const body = container.closest('body');
 
           expect(body.classList).toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).not.toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).not.toContain('Drawer--open');
+          });
         });
       });
     });
@@ -255,15 +257,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag has Drawer--open after click', () => {
+        it('body tag has Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers />);
           const body = container.closest('body');
 
           expect(body.classList).not.toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).toContain('Drawer--open');
+          });
         });
       });
     });

src/Drawer/DrawerFooter.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { DrawerFooter } from './index';
@@ -9,7 +9,7 @@ describe('DrawerFooter', () => {
   );
 
   describe('primary action button', () => {
-    it('calls the onPrimaryAction callback when clicked', () => {
+    it('calls the onPrimaryAction callback when clicked', async () => {
       const onPrimaryActionMock = jest.fn();
 
       renderDrawerFooter({
@@ -19,7 +19,9 @@ describe('DrawerFooter', () => {
 
       userEvent.click(screen.getByRole('button', { name: 'Primary Action' }));
 
-      expect(onPrimaryActionMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onPrimaryActionMock).toHaveBeenCalled();
+      });
     });
   });
 });

src/InputLabel/InputLabel.jsx

@@ -8,7 +8,6 @@ import 'scss/forms/input_label.scss';
 
 const InputLabel = ({
   className,
-  elementType,
   labelHtmlFor,
   text,
   required,
@@ -38,7 +37,6 @@ const InputLabel = ({
 
 InputLabel.propTypes = {
   className: PropTypes.string,
-  elementType: PropTypes.string,
   labelHelperText: PropTypes.string,
   labelHtmlFor: PropTypes.string,
   required: PropTypes.bool,
@@ -48,7 +46,6 @@ InputLabel.propTypes = {
 
 InputLabel.defaultProps = {
   className: '',
-  elementType: undefined,
   labelHelperText: undefined,
   labelHtmlFor: '',
   required: false,

src/InputLegend/InputLegend.jsx

@@ -9,7 +9,6 @@ import 'scss/forms/input_label.scss';
 
 const InputLegend = ({
   className,
-  elementType,
   labelHtmlFor,
   text,
   required,
@@ -39,7 +38,6 @@ const InputLegend = ({
 
 InputLegend.propTypes = {
   className: PropTypes.string,
-  elementType: PropTypes.string,
   labelHelperText: PropTypes.string,
   labelHtmlFor: PropTypes.string,
   required: PropTypes.bool,
@@ -49,7 +47,6 @@ InputLegend.propTypes = {
 
 InputLegend.defaultProps = {
   className: '',
-  elementType: undefined,
   labelHelperText: undefined,
   labelHtmlFor: '',
   required: false,

src/Layout/SidebarView/SidebarView.jsx

@@ -145,7 +145,6 @@ export default class SidebarView extends Component {
     const sidebarClassName = classNames(
       this.props.className,
       {
-        // eslint-disable-next-line @typescript-eslint/camelcase
         SidebarView__sidebar: true,
         'SidebarView__sidebar--open': this.props.isSidebarOpen,
         'SidebarView__sidebar--openable': this.props.isSidebarOpenable,

src/RichTextEditor/RichTextEditor.tsx

@@ -1,10 +1,11 @@
 import type { IOptions } from 'sanitize-html';
-import type { AriaAttributes } from 'react';
 import type { Extension, Node as TipTapNode, Mark } from '@tiptap/core';
 
 import './RichTextEditor.scss';
 
-import React, { forwardRef, type ForwardedRef, useImperativeHandle } from 'react';
+import React, {
+ forwardRef, useImperativeHandle, type AriaAttributes, type ForwardedRef,
+} from 'react';
 
 import classNames from 'classnames';
 

src/Tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Tab, Tabs } from './index';
@@ -64,7 +64,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(uncontrolledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -73,8 +73,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(tabTwoButton).toHaveClass('active');
+      await waitFor(() => {
+        expect(tabTwoButton).toHaveClass('active');
+      });
 
       expect(screen.getByText(tabOneContent)).not.toHaveClass('active');
       expect(screen.getByText(tabTwoContent)).toHaveClass('active');
@@ -93,7 +94,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(controlledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -102,8 +103,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(onSelectMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onSelectMock).toHaveBeenCalled();
+      });
     });
   });
 });