Upgrade to react 18 (#1991)

* Upgrade react 18

- also update packages with peer dependencies on react
- delete file not referenced anywhere (it happened to also reference
  a datetime package that has not be updated to be compatible with react
  18, but it doesn't matter because we didn't actually need it)
- palantir/blueprint#5699

* package lock

* Change to use the new API for the root render call reqired in version 18

* Remove unneeded depedency, move cypress-parallel to optional depedencies

package.json

@@ -29,8 +29,6 @@
     "compile_grammar": "npx lezer-generator --output src/Parser/doenet.js src/Parser/doenet.grammar"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.0.0-beta.0",
-    "@blueprintjs/datetime": "^4.0.0-beta.0",
     "@codemirror/basic-setup": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
     "@codemirror/gutter": "^0.19.9",
@@ -57,7 +55,6 @@
     "crypto-js": "^3.3.0",
     "cssesc": "^3.0.0",
     "csv-parse": "^4.16.3",
-    "cypress-parallel": "^0.12.0",
     "esm-seedrandom": "^3.0.5",
     "handsontable": "^12.1.2",
     "hi-base32": "^0.5.1",
@@ -70,17 +67,17 @@
     "lorem-ipsum": "^2.0.4",
     "math-expressions": "^2.0.0-alpha59",
     "nanoid": "^3.1.31",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-datetime": "^3.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.4.2",
     "react-is": "^17.0.1",
-    "react-mathquill": "^1.0.1",
+    "react-mathquill": "^1.0.3",
     "react-measure": "^2.5.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-select": "^4.3.1",
+    "react-select": "^5.7.0",
     "react-table": "^7.7.0",
     "react-use-measure": "^2.1.1",
     "react-visibility-sensor-v2": "^1.0.0",
@@ -103,6 +100,7 @@
     "@types/react": "^18.0.5",
     "@web/test-runner": "^0.12.19",
     "chai": "^4.2.0",
+    "cypress-parallel": "^0.12.0",
     "esbuild": "^0.14.38",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.2.0",

src/Tools/_framework/Menus/AddDriveItems.jsx

@@ -1,4 +1,3 @@
-// import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import Button from '../../../_reactComponents/PanelHeaderComponents/Button';

src/Tools/chat/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Route, Router, Switch } from 'react-router';
+import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 import ToolRoot from '@ToolRoot';
 
 import Chat from './Chat';
 import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <MathJaxContext
       version={2}
@@ -17,6 +17,5 @@ ReactDOM.render(
     >
       <ToolRoot tool={<Chat key={'BaseTool'} />} />
     </MathJaxContext>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/cypressTest/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CypressTest from './CypressTest.jsx';
 import axios from 'axios';
 import { RecoilRoot } from 'recoil';
@@ -14,7 +14,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 //   return <p>test</p>
 // }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -31,8 +32,7 @@ ReactDOM.render(
           } />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );
 
 // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.

src/Tools/singlepage/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
@@ -8,7 +8,8 @@ import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 import DarkmodeController from '../_framework/DarkmodeController';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -28,6 +29,5 @@ ReactDOM.render(
         />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/temp/index.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-
-
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <>
   test here
-  </>,
-  document.getElementById('root'),
+  </>
 );
 

src/Tools/test/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import DoenetTest from './DoenetTest.jsx';
 import { RecoilRoot } from 'recoil';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-ReactDOM.render(
+
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -15,6 +17,5 @@ ReactDOM.render(
           } />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/uiDocs/index.jsx

@@ -1,19 +1,20 @@
 import { MathJaxContext } from 'better-react-mathjax';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { mathjaxConfig } from '../../Core/utils/math.js';
 
 import UIDocs from './uiDocs.jsx';
 
 // import { initialize } from '../imports/courseInfo';
 // initialize();
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <MathJaxContext
     version={2}
     config={mathjaxConfig}
     onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
   >
     <UIDocs />
   </MathJaxContext>
-  , document.getElementById('root')); 
+); 

src/Tools/umn/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
@@ -8,7 +8,8 @@ import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 import DarkmodeController from '../_framework/DarkmodeController';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -28,6 +29,5 @@ ReactDOM.render(
         />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );