Update react and react-dom

8 files changed, 93 insertions, 80 deletions

diff --git a/gui/package-lock.json b/gui/package-lock.json
index 40d444d5e0..da38403b63 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -17,8 +17,8 @@
         "google-protobuf": "^3.21.0",
         "node-gettext": "^3.0.0",
         "rbush": "^2.0.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-redux": "^7.2.2",
         "react-router": "^5.1.2",
         "react-simple-maps": "^3.0.0",
@@ -39,8 +39,8 @@
         "@types/node": "^16.11.26",
         "@types/node-gettext": "^3.0.3",
         "@types/rbush": "^2.0.2",
-        "@types/react": "^16.9.56",
-        "@types/react-dom": "^16.9.9",
+        "@types/react": "^18.0.21",
+        "@types/react-dom": "^18.0.6",
         "@types/react-redux": "^7.1.24",
         "@types/react-router": "^5.1.19",
         "@types/react-simple-maps": "^1.0.8",
@@ -1435,22 +1435,23 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "16.14.2",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
-      "integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "16.9.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.10.tgz",
-      "integrity": "sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "dependencies": {
-        "@types/react": "^16"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-redux": {
@@ -1487,6 +1488,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "node_modules/@types/sinon": {
       "version": "10.0.13",
       "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-10.0.13.tgz",
@@ -9410,19 +9417,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -11228,28 +11222,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-is": {
@@ -11314,6 +11306,20 @@
         "value-equal": "^1.0.1"
       }
     },
+    "node_modules/react-router/node_modules/mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-router/node_modules/resolve-pathname": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
@@ -11819,12 +11825,11 @@
       "dev": true
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/semver": {
@@ -15366,22 +15371,23 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.14.2",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
-      "integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "16.9.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.10.tgz",
-      "integrity": "sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "requires": {
-        "@types/react": "^16"
+        "@types/react": "*"
       }
     },
     "@types/react-redux": {
@@ -15418,6 +15424,12 @@
         "@types/react": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@types/sinon": {
       "version": "10.0.13",
       "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-10.0.13.tgz",
@@ -21725,15 +21737,6 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
       "dev": true
     },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -23111,22 +23114,20 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       }
     },
     "react-is": {
@@ -23176,6 +23177,15 @@
             "value-equal": "^1.0.1"
           }
         },
+        "mini-create-react-context": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+          "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.1",
+            "tiny-warning": "^1.0.3"
+          }
+        },
         "resolve-pathname": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
@@ -23580,12 +23590,11 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "semver": {
diff --git a/gui/package.json b/gui/package.json
index 812da7a07d..04a9fc87d9 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -19,8 +19,8 @@
     "google-protobuf": "^3.21.0",
     "node-gettext": "^3.0.0",
     "rbush": "^2.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "^7.2.2",
     "react-router": "^5.1.2",
     "react-simple-maps": "^3.0.0",
@@ -45,8 +45,8 @@
     "@types/node": "^16.11.26",
     "@types/node-gettext": "^3.0.3",
     "@types/rbush": "^2.0.2",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-router": "^5.1.19",
     "@types/react-simple-maps": "^1.0.8",
diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index 7014175ffa..40615e44f4 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -33,7 +33,7 @@ export default class ErrorBoundary extends React.Component<IProps, IState> {
 
   public render() {
     if (this.state.hasError) {
-      const reachBackMessage: React.ReactNodeArray =
+      const reachBackMessage: React.ReactNode[] =
         // TRANSLATORS: The message displayed to the user in case of critical error in the GUI
         // TRANSLATORS: Available placeholders:
         // TRANSLATORS: %(email)s - support email
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 729cb59f3c..19c3eca0a5 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -43,6 +43,7 @@ interface ILocationListProps<SpecialValueType> {
   selectedValue?: LocationSelection<SpecialValueType>;
   selectedElementRef?: React.Ref<React.ReactInstance>;
   onSelect?: (value: LocationSelection<SpecialValueType>) => void;
+  children?: React.ReactNode;
 }
 
 export default class LocationList<SpecialValueType> extends React.Component<
@@ -244,6 +245,7 @@ interface ISpecialLocationProps<T> {
   onSelect?: (value: T) => void;
   info?: string;
   forwardedRef?: React.Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
 }
 
 export class SpecialLocation<T> extends React.Component<ISpecialLocationProps<T>> {
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index 0b30b1c167..6c69074a0c 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -379,7 +379,7 @@ function AccountDropdownItem(props: IAccountDropdownItemProps) {
   }, [props.onSelect, props.value]);
 
   const handleRemove = useCallback(
-    (event) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       // Prevent login form from submitting
       event.preventDefault();
       props.onRemove(props.value);
diff --git a/gui/src/renderer/components/ProblemReport.tsx b/gui/src/renderer/components/ProblemReport.tsx
index c2e501e109..aa89365fd5 100644
--- a/gui/src/renderer/components/ProblemReport.tsx
+++ b/gui/src/renderer/components/ProblemReport.tsx
@@ -385,7 +385,7 @@ export default class ProblemReport extends React.Component<
   }
 
   private renderSent() {
-    const reachBackMessage: React.ReactNodeArray =
+    const reachBackMessage: React.ReactNode[] =
       // TRANSLATORS: The message displayed to the user after submitting the problem report, given that the user left his or her email for us to reach back.
       // TRANSLATORS: Available placeholders:
       // TRANSLATORS: %(email)s
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 22ef1665eb..5fbfe61a55 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -6,6 +6,7 @@ import { WillExit } from '../lib/will-exit';
 
 interface ITransitioningViewProps {
   viewId: string;
+  children?: React.ReactNode;
 }
 
 type TransitioningView = React.ReactElement<ITransitioningViewProps>;
diff --git a/gui/src/renderer/index.ts b/gui/src/renderer/index.ts
index 815095408f..fbf8ebcdba 100644
--- a/gui/src/renderer/index.ts
+++ b/gui/src/renderer/index.ts
@@ -1,7 +1,8 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './app';
 
 const app = new App();
 const container = document.getElementById('app');
-ReactDOM.render(app.renderView(), container);
+const root = createRoot(container!);
+root.render(app.renderView());