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

@@ -25,12 +25,11 @@
         "core-js": "^3.32.1",
         "foundation-sites": "^6.4.3",
         "history": "^4.10.1",
-        "minimatch": "5.1.6",
+        "minimatch": "^9.0.0",
         "prop-types": "^15.8.1",
         "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,61 +38,63 @@
         "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": {
         "@babel/core": "^7.21.3",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@storybook/addon-actions": "6.5.0-beta.1",
         "@storybook/addon-controls": "6.5.0-beta.1",
         "@storybook/addon-essentials": "6.5.0-beta.1",
         "@storybook/addon-links": "6.5.0-beta.1",
         "@storybook/addons": "6.5.0-beta.1",
+        "@storybook/builder-webpack5": "6.5.0-beta.1",
+        "@storybook/manager-webpack5": "6.5.0-beta.1",
         "@storybook/react": "6.5.0-beta.1",
-        "@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",
         "style-loader": "^2.0.0",
         "ts-jest": "^26.5.6",
         "ts-node": "^10.9.1",
         "webfonts-generator": "^0.4.0",
-        "webpack": "^4.46.0",
+        "webpack": "5",
         "yarn-deduplicate": "^6.0.2"
     },
     "resolutions": {
-        "@types/react": "^16.8.5",
+        "@types/react": "^18.0.0",
         "@types/node": "14.11.2"
     }
 }

src/components/autocomplete/autocomplete.tsx

@@ -64,7 +64,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
                 if (el) {
                     if (el.refs.input) {
                         // workaround for 'autofill for forms not deactivatable' https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
-                        (el.refs.input as HTMLInputElement).autocomplete = 'no-autocomplete';
+                        (el.refs.input as HTMLInputElement).autocomplete = 'off';
                     }
                     if (!el.setMenuPositionsOverridden) {
                         el.setMenuPositionsOverridden = true;

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

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { Checkbox } from '../checkbox';
 import { DropDown } from '../dropdown/dropdown';
+import './top-bar.scss';
 
 require('./top-bar.scss');
 
@@ -32,7 +33,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;

tsconfig.json

@@ -17,6 +17,12 @@
         ],
         "typeRoots": [
             "./node_modules/@types"
+        ],
+        "types": [
+            "node",
+            "jest",
+            "react",
+            "react-dom"
         ]
     },
     "include": ["./**/*"],

v2/.storybook/main.js

@@ -3,6 +3,9 @@ const path = require('path');
 module.exports = {
     stories: ['../components/**/*.stories.tsx'],
     addons: ['@storybook/addon-essentials'],
+    core: {
+        builder: 'webpack5',
+    },
     webpackFinal: async (config, {configType}) => {
         config.module.rules.push({
             test: /\.scss$/,

v2/components/autocomplete/autocomplete.tsx

@@ -5,7 +5,7 @@ import {Input, InputProps, SetInputFxn, useDebounce, useInput} from '../input/in
 import ThemeDiv from '../theme-div/theme-div';
 
 import './autocomplete.scss';
-import {Minimatch, IOptions} from 'minimatch';
+import {Minimatch, MinimatchOptions} from 'minimatch';
 
 interface AutocompleteProps extends InputProps {
     inputref?: React.MutableRefObject<HTMLInputElement>;
@@ -54,7 +54,7 @@ export const RenderAutocomplete = (
         onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
         className?: string;
         style?: React.CSSProperties;
-        glob?: boolean | IOptions;
+        glob?: boolean | MinimatchOptions;
     }
 ) => {
     const [curItems, setCurItems] = React.useState(props.items || []);

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}}>

v2/components/wait-for/wait-for.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {ThemeDiv} from '../theme-div/theme-div';
 import './loading-bar.scss';
 import './spinner.scss';
+import { PropsWithChildren } from 'react';
 
 export const Spinner = () => (
     <ThemeDiv className='spinner'>
@@ -24,6 +25,7 @@ export const LoadingBar = (props: {loadms?: string | number}) => {
     );
 };
 
-export const WaitFor = (props: {loading: boolean; loader?: React.ReactNode; loadms?: string | number} & React.ComponentProps<React.FunctionComponent>): JSX.Element => (
+type WaitForProps = { loading: boolean; loader?: React.ReactNode; loadms?: string | number }
+export const WaitFor: React.FC<PropsWithChildren<WaitForProps>> = (props) => (
     <React.Fragment>{props.loading ? props.loader || <LoadingBar loadms={props.loadms} /> : props.children}</React.Fragment>
 );