React 18

package.json

@@ -28,7 +28,6 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
-    "@types/react": "17.0.40",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
@@ -66,10 +65,10 @@
     "@storybook/theming": "^6.5.13",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/react": "^13.1.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/react-dom": "17.0.13",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@typescript/vfs": "^1.4.0",
@@ -121,8 +120,8 @@
     "progress-estimator": "^0.3.0",
     "query-string": "^6.5.0",
     "raw-loader": "^4.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-github-btn": "^1.2.0",
     "react-hot-loader": "^4.12.8",
     "react-router-dom": "^5.0.1",
@@ -150,6 +149,10 @@
     "yaml": "^1.10.2",
     "yargs": "^4.3.1"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
   "scripts": {
     "build": "./scripts/build.sh",
     "build-chromatic": "NODE_ENV=production PUBLIC_PATH=/ STORYBOOK_ENV=chromatic yarn build-storybook",

src/components/accordion/Accordion.spec.tsx

@@ -204,10 +204,14 @@ describe('<Accordion>', () => {
     expect(item.getAttribute('aria-expanded')).toEqual('false');
     expect(accordion.queryByRole('region')).toBeNull();
     accordion.getByRole('button').click();
-    expect(item.getAttribute('aria-expanded')).toEqual('true');
+    await waitFor(() =>
+      expect(item.getAttribute('aria-expanded')).toEqual('true')
+    );
     await waitFor(() => expect(accordion.getByRole('region')).toBeTruthy());
     accordion.getByRole('button').click();
-    expect(item.getAttribute('aria-expanded')).toEqual('false');
+    await waitFor(() =>
+      expect(item.getAttribute('aria-expanded')).toEqual('false')
+    );
     fireEvent(accordion.getByRole('region'), new Event('transitionend'));
     await waitFor(() => expect(accordion.queryByRole('region')).toBeNull());
   });

src/components/dialog/Dialog.stories.mdx

@@ -12,7 +12,6 @@ import DialogCloseButton from './DialogCloseButton';
 import startSkyImage from './stories/stars_sky.jpg';
 import Text from '../text/Text';
 import PageHeader from 'blocks/PageHeader';
-import {fireEvent, within} from '@testing-library/react';
 
 <Meta
   title="Components/Dialog"
@@ -77,8 +76,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Default"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -174,8 +172,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Scroll Outside"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -309,8 +306,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Scroll Inside"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -445,8 +441,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Without Header"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -504,10 +499,9 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Nested"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
-      const openNestedButton = await canvas.findByText('Open another dialog');
-      fireEvent.click(openNestedButton);
+      canvasElement.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 500));
+      canvasElement.querySelector('[id=open_another_dialog]').click();
     }}
   >
     {args => {
@@ -556,6 +550,7 @@ import {fireEvent, within} from '@testing-library/react';
                   as="button"
                   onClick={() => setAnotherOpen(true)}
                   onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
+                  id="open_another_dialog"
                 >
                   Open another dialog
                 </Link>
@@ -606,8 +601,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="With Ads"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -816,8 +810,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Switching modals"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -911,8 +904,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Size S"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -962,8 +954,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Size M"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -1013,8 +1004,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Size L"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -1064,8 +1054,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Size XL"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {
@@ -1115,8 +1104,7 @@ import {fireEvent, within} from '@testing-library/react';
   <Story
     name="Size Fullscreen"
     play={async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      fireEvent.click(canvas.getByText('open dialog'));
+      canvasElement.querySelector('button').click();
     }}
   >
     {args => {

src/components/dialog/Dialog.tsx

@@ -45,24 +45,11 @@ export type DialogPropsType = Readonly<{
   appearance?: 'none' | 'dialog';
 }>;
 
-/**
- * The react-docgen has a problem with default values
- * of nested components (see BaseDialog inside the
- * Dialog) and this is for documentation purposes.
- */
-Dialog.defaultProps = {
-  size: 'm',
-  scroll: 'outside',
-  position: 'center',
-  overlay: 'light',
-  appearance: 'dialog',
-} as Partial<DialogPropsType>;
-
 /**
  * The Dialog component controls mounting
  * when BaseDialog controls its own states.
  */
-function BaseDialog({
+const BaseDialog = ({
   open,
   children,
   size = 'm',
@@ -81,7 +68,7 @@ function BaseDialog({
   position = 'center',
   overlay = 'light',
   appearance = 'dialog',
-}: DialogPropsType) {
+}: DialogPropsType) => {
   const overlayRef = React.useRef<HTMLDivElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [exiting, setExiting] = React.useState<boolean>(false);
@@ -311,9 +298,13 @@ function BaseDialog({
       <div tabIndex={0} />
     </div>
   );
-}
+};
 
-function Dialog({open, onExitTransitionEnd, ...otherProps}: DialogPropsType) {
+const Dialog = ({
+  open,
+  onExitTransitionEnd,
+  ...otherProps
+}: DialogPropsType) => {
   const [mounted, setMounted] = React.useState<boolean>(open);
 
   if (open && !mounted) {
@@ -336,7 +327,7 @@ function Dialog({open, onExitTransitionEnd, ...otherProps}: DialogPropsType) {
       open={open}
     />
   ) : null;
-}
+};
 
 Dialog.Overlay = DialogOverlay;
 export default Dialog;

src/components/icons/Icon.tsx

@@ -590,14 +590,22 @@ const Icon = ({
           role="img"
           aria-labelledby={labelledBy}
           focusable="false"
-          // @ts-expect-error
-          suppressHydrationWarning
+          // fix for Property 'suppressHydrationWarning' does not exist on type 'SVGProps<SVGSVGElement>'
+          {...{
+            ...(React.version.startsWith('18') && {
+              suppressHydrationWarning: true,
+            }),
+          }}
         >
           <text
             id={titleId}
             visibility="hidden"
-            /* @ts-expect-error */
-            suppressHydrationWarning
+            // fix for Property 'suppressHydrationWarning' does not exist on type 'SVGProps<SVGSVGTextElement>'
+            {...{
+              ...(React.version.startsWith('18') && {
+                suppressHydrationWarning: true,
+              }),
+            }}
           >
             {title || defaultTitle}
           </text>

src/components/select-menu/SelectMenu.spec.tsx

@@ -192,7 +192,7 @@ describe('<SelectMenu />', () => {
     const select = render(<RenderSelectMenu />);
     const selectElement = select.getByRole('combobox') as HTMLElement;
 
-    selectElement.focus();
+    userEvent.tab();
     expect(selectElement).toEqual(document.activeElement);
     expect(selectElement.getAttribute('aria-expanded')).toBe('false');
 
@@ -202,6 +202,8 @@ describe('<SelectMenu />', () => {
     );
     const option1 = select.getByRole('option', {name: 'Physics'});
 
+    userEvent.tab();
+
     expect(option1).toHaveFocus();
     expect(option1).toEqual(document.activeElement);
 

src/components/subject-icons/SubjectIcon.tsx

@@ -205,14 +205,22 @@ const SubjectIcon = ({
       className={iconClass}
       aria-labelledby={titleId}
       role="img"
-      /* @ts-expect-error */
-      suppressHydrationWarning
+      // fix for Property 'suppressHydrationWarning' does not exist on type 'SVGProps<SVGSVGElement>'
+      {...{
+        ...(React.version.startsWith('18') && {
+          suppressHydrationWarning: true,
+        }),
+      }}
     >
       <text
         id={titleId}
         visibility="hidden"
-        /* @ts-expect-error */
-        suppressHydrationWarning
+        // fix for Property 'suppressHydrationWarning' does not exist on type 'SVGProps<SVGSVGTextElement>'
+        {...{
+          ...(React.version.startsWith('18') && {
+            suppressHydrationWarning: true,
+          }),
+        }}
       >
         {title || defaultTitle}
       </text>

src/components/transition/Transition.spec.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {fireEvent, render} from '@testing-library/react';
-import {act} from 'react-dom/test-utils';
+import {act, fireEvent, render} from '@testing-library/react';
 import Transition from './Transition'; // https://github.com/jsdom/jsdom/issues/1781
 // https://github.com/testing-library/dom-testing-library/pull/865
 
@@ -143,8 +142,8 @@ describe('<Transition />', () => {
             active
           />
         );
-        fireEvent.transitionEnd(wrapper.container.firstElementChild);
       });
+      fireEvent.transitionEnd(wrapper.container.firstElementChild);
       expect(
         (wrapper.container.firstElementChild as HTMLElement).style.opacity
       ).toBe(`${after}`);

src/components/utils/useReducedMotion.spec.ts

@@ -1,5 +1,5 @@
 import useReducedMotion from './useReducedMotion';
-import {act, renderHook} from '@testing-library/react-hooks';
+import {renderHook, act} from '@testing-library/react';
 import MatchMedia from './__mocks__/mq';
 
 const MOTION_MQ = {