chore: React 18 upgrade

jest.config.js

@@ -7,7 +7,6 @@ module.exports = {
   "moduleNameMapper": {
     "\\.(css|less|scss|sass)$": "identity-obj-proxy"
   },
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   setupFilesAfterEnv: ['<rootDir>src/setupTests.ts'],
   globals: {
     'ts-jest': {

package.json

@@ -30,7 +30,6 @@
         "react-autocomplete": "1.8.1",
         "react-form": "^2.16.0",
         "react-helmet": "^6.1.0",
-        "react-router-dom": "^4.2.2",
         "react-toastify": "9.0.3",
         "rxjs": "^7.8.1",
         "typescript": "^4.9.5",
@@ -39,11 +38,13 @@
         "xterm-addon-fit": "^0.5.0"
     },
     "peerDependencies": {
-        "@types/react": "^16.8.5",
-        "react": "^16.9.3",
-        "react-dom": "^16.9.3"
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-router-dom": "^5.0.0"
     },
     "devDependencies": {
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@babel/core": "^7.21.3",
         "@storybook/addon-actions": "6.5.0-beta.1",
         "@storybook/addon-controls": "6.5.0-beta.1",
@@ -54,34 +55,33 @@
         "@types/classnames": "^2.3.1",
         "@types/deep-equal": "^1.0.1",
         "@types/enzyme": "^3.10.12",
-        "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/history": "^4.7.8",
         "@types/jest": "^26.0.15",
         "@types/node": "^18.15.3",
         "@types/prop-types": "^15.7.5",
-        "@types/react": "^16.8.5",
+        "@types/react": "^18.0.0",
         "@types/react-autocomplete": "^1.8.4",
-        "@types/react-dom": "^16.9.3",
+        "@types/react-dom": "^18.0.0",
         "@types/react-form": "^2.16.1",
         "@types/react-helmet": "^6.1.6",
-        "@types/react-router-dom": "^4.2.2",
+        "@types/react-router-dom": "^5.0.0",
         "@types/uuid": "^9.0.3",
         "@typescript-eslint/eslint-plugin": "^5.36.1",
         "@typescript-eslint/parser": "^5.36.1",
         "babel-loader": "^8.2.5",
         "copy-webpack-plugin": "^4.3.1",
         "css-loader": "^3.6.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.7",
         "enzyme-to-json": "^3.6.2",
         "eslint": "^8.23.0",
         "eslint-plugin-react": "^7.31.1",
         "glob": "^8.0.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^26.6.3",
         "raw-loader": "^4.0.2",
-        "react": "^16.9.3",
-        "react-dom": "^16.9.3",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-router-dom": "^5.0.0",
         "sass": "^1.55.0",
         "sass-loader": "^v10.1.0",
         "storybook": "6.5.0-beta.1",
@@ -93,7 +93,7 @@
         "yarn-deduplicate": "^6.0.2"
     },
     "resolutions": {
-        "@types/react": "^16.8.5",
+        "@types/react": "^18.0.0",
         "@types/node": "14.11.2"
     }
 }

src/components/form-field/form-field.tsx

@@ -17,7 +17,8 @@ export function getNestedField(src: any, path: string): any {
 }
 
 export const FormField: <E, T extends ReactForm.FieldProps & { className?: string}>(
-    props: React.Props<E> & {
+    props: {
+        children?: React.ReactNode;
         label?: string,
         field: string,
         formApi: ReactForm.FormApi,

src/components/page/page.tsx

@@ -9,7 +9,8 @@ import { Utils } from '../utils';
 
 require('./page.scss');
 
-interface PageProps extends React.Props<any> {
+interface PageProps {
+    children?: React.ReactNode;
     title: string;
     toolbar?: Toolbar | Observable<Toolbar>;
     topBarTitle?: string;

src/components/sliding-panel/sliding-panel.tsx

@@ -2,7 +2,8 @@ import {default as classNames} from 'classnames';
 import * as React from 'react';
 import { Key, KeybindingContext, KeybindingProvider } from '../../../v2';
 
-export interface SlidingPanelProps extends React.Props<any> {
+export interface SlidingPanelProps {
+    children?: React.ReactNode;
     isShown?: boolean;
     isNarrow?: boolean;
     isMiddle?: boolean;

src/components/tabs/tabs.tsx

@@ -14,7 +14,8 @@ export interface Tab {
     extraHorizontalScrollPadding?: number;
 }
 
-export interface TabsProps extends React.Props<any> {
+export interface TabsProps {
+    children?: React.ReactNode;
     navCenter?: boolean;
     fixed?: boolean;
     navTransparent?: boolean;

src/components/top-bar/top-bar.tsx

@@ -32,7 +32,8 @@ export interface Toolbar {
     actionMenu?: ActionMenu;
 }
 
-export interface TopBarProps extends React.Props<any> {
+export interface TopBarProps {
+    children?: React.ReactNode;
     title: string;
     toolbar?: Toolbar;
 }

src/setupTests.ts

@@ -1,4 +1,7 @@
-import {configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Enzyme from 'enzyme'
+import Adapter from '@cfaester/enzyme-adapter-react-18'
 
-configure({ adapter: new Adapter() });
+Enzyme.configure({ adapter: new Adapter() });
+
+// Configure testing environment for React 18
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

v2/components/tooltip/tooltip.tsx

@@ -30,7 +30,7 @@ export const useHover = (): [React.MutableRefObject<any>, boolean] => {
 /**
  * Displays a Tooltip when its children are hovered over
  */
-export const Tooltip = (props: {content: React.ReactNode | string; inverted?: boolean} & React.PropsWithRef<any>) => {
+export const Tooltip = (props: {content: React.ReactNode | string; inverted?: boolean; children?: React.ReactNode}) => {
     const [tooltip, showTooltip] = useHover();
     return (
         <div ref={tooltip} style={{position: 'relative', minWidth: 0}}>