From cba5c6f2ffb67b8b3c86430fd38e36ea7b594392 Mon Sep 17 00:00:00 2001
From: Karol Rzotki <52164548+krzotki@users.noreply.github.com>
Date: Thu, 18 Jul 2024 12:18:07 +0200
Subject: [PATCH] upgrade React to 17.0.2 (#2806)

* upgrade React to 17.0.2

* fix tests

* remove resolutions

* adjust test

* fix lint

* v226.0.0-beta.0
---
 package.json                                | 12 +--
 src/components/accordion/Accordion.spec.tsx | 37 +++++---
 src/components/popover/Popover.spec.tsx     | 88 +++++++++----------
 src/components/rating/Rating.tsx            |  1 +
 src/components/tooltip/Tooltip.spec.tsx     | 80 ++++++++---------
 yarn.lock                                   | 96 +++++++++++++--------
 6 files changed, 176 insertions(+), 138 deletions(-)

diff --git a/package.json b/package.json
index bb17e8651d..b1a5cc5fad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "brainly-style-guide",
-  "version": "225.12.1",
+  "version": "226.0.0-beta.0",
   "description": "Brainly Front-End Style Guide",
   "repository": "https://github.com/brainly/style-guide.git",
   "author": "Brainly Team",
@@ -28,7 +28,7 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
-    "@types/react": "^16.2.0",
+    "@types/react": "17.0.40",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
@@ -69,7 +69,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/react-dom": "^16.2.0",
+    "@types/react-dom": "17.0.13",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@typescript/vfs": "^1.4.0",
@@ -121,13 +121,13 @@
     "progress-estimator": "^0.3.0",
     "query-string": "^6.5.0",
     "raw-loader": "^4.0.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-github-btn": "^1.2.0",
     "react-hot-loader": "^4.12.8",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.2",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "17.0.2",
     "rev-file": "3.0.0",
     "rev-hash": "1.0.0",
     "rimraf": "^3.0.0",
diff --git a/src/components/accordion/Accordion.spec.tsx b/src/components/accordion/Accordion.spec.tsx
index 283698d3d5..ea724fa896 100644
--- a/src/components/accordion/Accordion.spec.tsx
+++ b/src/components/accordion/Accordion.spec.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import Accordion from './Accordion';
 import AccordionItem from './AccordionItem';
-import {render, fireEvent, waitFor} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import {render, fireEvent, waitFor, screen} from '@testing-library/react';
 import {testA11y} from '../../axe';
 
 describe('<Accordion>', () => {
@@ -215,25 +214,28 @@ describe('<Accordion>', () => {
 
   it('expands and collapses item on Enter/Space keydown when motion is reduced', async () => {
     const accordionId = 'id-1';
-    const accordion = render(
+
+    render(
       <Accordion reduceMotion>
-        <AccordionItem title={accordionId} id={accordionId}>
+        <AccordionItem title={accordionId} id={accordionId} tabIndex={1}>
           Accordion Item Description
         </AccordionItem>
       </Accordion>
     );
-    const item = accordion.getByRole('button');
+    const item = screen.getByRole('button');
 
     expect(item.getAttribute('aria-expanded')).toEqual('false');
-    expect(accordion.queryByRole('region')).toBeNull();
-    accordion.getByRole('button').focus();
-    expect(item).toEqual(document.activeElement);
-    userEvent.keyboard('{enter}');
+    expect(screen.queryByRole('region')).toBeNull();
+
+    focusElement(item);
+
+    fireEvent.keyDown(item, {key: 'Enter', keyCode: '13'});
     expect(item.getAttribute('aria-expanded')).toEqual('true');
-    expect(accordion.getByRole('region')).toBeTruthy();
-    userEvent.keyboard('{space}');
+    expect(screen.getByRole('region')).toBeTruthy();
+
+    fireEvent.keyDown(item, {key: 'Space', keyCode: '32'});
     expect(item.getAttribute('aria-expanded')).toEqual('false');
-    expect(accordion.queryByRole('region')).toBeNull();
+    expect(screen.queryByRole('region')).toBeNull();
   });
 
   it('has an accessible name', () => {
@@ -259,3 +261,14 @@ describe('<Accordion>', () => {
     });
   });
 });
+
+const focusElement = (element: HTMLElement) => {
+  // This does not set the document.activeElement to the item, so expect(item).toHaveFocus() fails
+  fireEvent.focus(element);
+
+  // Those do not trigger onFocus event in React 17, so focusedElementId is always null
+  // userEvent.tab();
+  // item.focus();
+
+  // expect(item).toHaveFocus();
+};
diff --git a/src/components/popover/Popover.spec.tsx b/src/components/popover/Popover.spec.tsx
index 84cce7a1ed..ad30c2ba02 100644
--- a/src/components/popover/Popover.spec.tsx
+++ b/src/components/popover/Popover.spec.tsx
@@ -50,23 +50,21 @@ export function RenderPopover(props: {
     </Popover>
   );
 }
-
 describe('<Popover />', () => {
   it('does not display popover by default', () => {
     render(<RenderPopover />);
-
     expect(screen.queryByText(POPOVER_TEXT)).not.toBeInTheDocument();
   });
 
   it('displays popover when trigger is hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
 
     const button = screen.getByTestId('button1');
 
     expect(button).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('does not display popover when opening with hover is disabled and trigger is hovered', async () => {
@@ -78,148 +76,148 @@ describe('<Popover />', () => {
   });
 
   it('does not keep popover open when click opening is disabled and trigger is clicked, then unhovered', async () => {
-    const popover = render(<RenderPopover useClick={false} />);
+    render(<RenderPopover useClick={false} />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
     userEvent.click(button);
-    expect(screen.queryByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when trigger is no longer hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
 
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('does not hide popover when hover leaves if trigger was clicked', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
     fireEvent.click(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(screen.getByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
-  it('displays popover when trigger is focused', () => {
-    const popover = render(<RenderPopover />);
+  it('displays popover when trigger is focused', async () => {
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('hides popover when trigger loses focus', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.blur(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover if hover leaves, even when trigger is focused', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover if focus leaves, even when trigger is hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.blur(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is triggered by focus', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is triggered by hover', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('hides popover when Esc key is hit, when popover is both focused and hovered', async () => {
-    const popover = render(<RenderPopover />);
+    render(<RenderPopover />);
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
-  it('displays popover initally when set as default open', async () => {
-    const popover = render(<RenderPopover defaultOpen />);
+  it('displays popover initially when set as default open', async () => {
+    render(<RenderPopover defaultOpen />);
 
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 
   it('can hide default open popover by clicking somewhere in the document', async () => {
-    const {queryByText} = render(<RenderPopover defaultOpen />);
+    render(<RenderPopover defaultOpen />);
 
     userEvent.click(document.body);
-    await waitForElementToBeRemoved(() => queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
 
   it('popover shows up and hides properly when set as default open', async () => {
-    const popover = render(<RenderPopover defaultOpen />);
+    render(<RenderPopover defaultOpen />);
 
     const button = screen.getByTestId('button1');
 
     expect(button).toBeInTheDocument();
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
     userEvent.unhover(button);
-    await waitForElementToBeRemoved(() => popover.queryByText(POPOVER_TEXT));
+    await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
 
     userEvent.hover(button);
-    expect(popover.getByText(POPOVER_TEXT)).toBeInTheDocument();
+    expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
   });
 });
diff --git a/src/components/rating/Rating.tsx b/src/components/rating/Rating.tsx
index a49af835e9..b780b53b88 100644
--- a/src/components/rating/Rating.tsx
+++ b/src/components/rating/Rating.tsx
@@ -83,6 +83,7 @@ class Rating extends React.Component<RatingPropsType> {
     (arg0: React.MouseEvent<HTMLSpanElement>) => unknown
   > = [];
 
+  // It's a typo, should be componentWillReceiveProps (UNSAFE_componentWillReceiveProps)
   componentWillReciveProps(nextProps: RatingPropsType) {
     if (this.props.metricSize !== nextProps.metricSize) {
       this.createStarsOnChangeFunctions(nextProps.metricSize);
diff --git a/src/components/tooltip/Tooltip.spec.tsx b/src/components/tooltip/Tooltip.spec.tsx
index 662dbe9837..007ae1ed0b 100644
--- a/src/components/tooltip/Tooltip.spec.tsx
+++ b/src/components/tooltip/Tooltip.spec.tsx
@@ -46,7 +46,7 @@ describe('<Tooltip />', () => {
   });
 
   it('displays tooltip when trigger is hovered', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -64,11 +64,11 @@ describe('<Tooltip />', () => {
     expect(button).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
   });
 
   it('hides tooltip when trigger is no longer hovered', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -84,16 +84,16 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     userEvent.unhover(button);
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
-  it('displays tooltip when trigger is focused', () => {
-    const tooltip = render(
+  it('displays tooltip when trigger is focused', async () => {
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -108,11 +108,11 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
   });
 
   it('hides tooltip when trigger loses focus', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -127,16 +127,16 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     fireEvent.blur(button);
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
-  it('hides tooltip if hover leaves, even when trigger is focused, ', async () => {
-    const tooltip = render(
+  it('hides tooltip if hover leaves, even when trigger is focused', async () => {
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -151,19 +151,19 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     userEvent.unhover(button);
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
-  it('hides tooltip if focus leaves, even when trigger is hovered, ', async () => {
-    const tooltip = render(
+  it('hides tooltip if focus leaves, even when trigger is hovered', async () => {
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -179,16 +179,16 @@ describe('<Tooltip />', () => {
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     fireEvent.blur(button);
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
   it('hides tooltip when Esc key is hit, when tooltip is triggered by focus', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -203,16 +203,16 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     fireEvent.focus(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
   it('hides tooltip when Esc key is hit, when tooltip is triggered by hover', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -227,16 +227,16 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
   it('hides tooltip when Esc key is hit, when tooltip is both focused and hovered', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip>
         <Button
           data-testid="button1"
@@ -252,16 +252,16 @@ describe('<Tooltip />', () => {
 
     fireEvent.focus(button);
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
   });
 
-  it('displays tooltip initally when set as default open', async () => {
-    const tooltip = render(
+  it('displays tooltip initially when set as default open', async () => {
+    render(
       <RenderTooltip defaultOpen>
         <Button
           data-testid="button1"
@@ -274,11 +274,11 @@ describe('<Tooltip />', () => {
       </RenderTooltip>
     );
 
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
   });
 
   it('can hide default open tooltip by clicking somewhere in the document', async () => {
-    const {queryByText} = render(
+    render(
       <RenderTooltip defaultOpen>
         <Button
           data-testid="button1"
@@ -292,11 +292,13 @@ describe('<Tooltip />', () => {
     );
 
     userEvent.click(document.body);
-    await waitForElementToBeRemoved(() => queryByText('Copy to clipboard'));
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText('Copy to clipboard')
+    );
   });
 
   it('tooltip shows up and hides properly when set as default open', async () => {
-    const tooltip = render(
+    render(
       <RenderTooltip defaultOpen>
         <Button
           data-testid="button1"
@@ -312,17 +314,17 @@ describe('<Tooltip />', () => {
     const button = screen.getByTestId('button1');
 
     expect(button).toBeInTheDocument();
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
     userEvent.unhover(button);
     await waitForElementToBeRemoved(() =>
-      tooltip.queryByText('Copy to clipboard')
+      screen.queryByText('Copy to clipboard')
     );
 
     userEvent.hover(button);
-    expect(tooltip.getByText('Copy to clipboard')).toBeInTheDocument();
+    expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
   });
 });
diff --git a/yarn.lock b/yarn.lock
index a2e960abad..ae892d54c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5432,6 +5432,13 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
+"@types/react-dom@17.0.13":
+  version "17.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
+  integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@<18.0.0":
   version "17.0.18"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.18.tgz#8f7af38f5d9b42f79162eea7492e5a1caff70dc2"
@@ -5439,26 +5446,19 @@
   dependencies:
     "@types/react" "^17"
 
-"@types/react-dom@^16.2.0":
-  version "16.9.17"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.17.tgz#29100cbcc422d7b7dba7de24bb906de56680dd34"
-  integrity sha512-qSRyxEsrm5btPXnowDOs5jSkgT8ldAA0j6Qp+otHUh+xHzy3sXmgNfyhucZjAjkgpdAUw9rJe0QRtX/l+yaS4g==
-  dependencies:
-    "@types/react" "^16"
-
-"@types/react@^16", "@types/react@^16.2.0":
-  version "16.14.34"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.34.tgz#d129324ffda312044e1c47aab18696e4ed493282"
-  integrity sha512-b99nWeGGReLh6aKBppghVqp93dFJtgtDOzc8NXM6hewD8PQ2zZG5kBLgbx+VJr7Q7WBMjHxaIl3dwpwwPIUgyA==
+"@types/react@*", "@types/react@^17":
+  version "17.0.80"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.80.tgz#a5dfc351d6a41257eb592d73d3a85d3b7dbcbb41"
+  integrity sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
+    "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
-"@types/react@^17":
-  version "17.0.52"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
-  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
+"@types/react@17.0.40":
+  version "17.0.40"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.40.tgz#dc010cee6254d5239a138083f3799a16638e6bad"
+  integrity sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5469,6 +5469,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/scheduler@^0.16":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@types/semver@^7.3.12":
   version "7.3.13"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
@@ -16945,15 +16950,14 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.2.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.2"
 
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
@@ -17006,7 +17010,12 @@ react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -17062,6 +17071,14 @@ react-router@5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-shallow-renderer@^16.13.1:
+  version "16.15.0"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
+
 react-sizeme@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4"
@@ -17072,24 +17089,23 @@ react-sizeme@^3.0.1:
     shallowequal "^1.1.0"
     throttle-debounce "^3.0.1"
 
-react-test-renderer@^16.2.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
-  integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==
+react-test-renderer@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
   dependencies:
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.19.1"
+    react-is "^17.0.2"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.2"
 
-react@^16.2.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -17943,7 +17959,7 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.0, scheduler@^0.19.1:
+scheduler@^0.19.0:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
   integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
@@ -17951,6 +17967,14 @@ scheduler@^0.19.0, scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"