Bump dependencies (#75)

* Bump all dependencies to latest versions

yarn up --interactive --exact '**'

* Fix lint - React APIs deprecated in v18

* Update snapshots after browser updates

Minor changes to spacing/text alignment in text inputs

package.json

@@ -13,7 +13,7 @@
     "url": "https://github.com/drauf/watson/issues"
   },
   "dependencies": {
-    "d3": "7.8.4",
+    "d3": "7.8.5",
     "d3-flame-graph": "4.1.3",
     "flatted": "3.2.7",
     "gh-pages": "5.0.0",
@@ -23,72 +23,72 @@
     "react-app-polyfill": "3.0.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-router-dom": "6.11.2",
-    "recharts": "2.6.2",
+    "react-router-dom": "6.14.2",
+    "recharts": "2.7.2",
     "spark-md5": "3.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.22.1",
-    "@playwright/test": "1.34.3",
+    "@babel/core": "7.22.9",
+    "@playwright/test": "1.36.2",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@svgr/webpack": "8.0.1",
     "@types/d3": "7.4.0",
-    "@types/jest": "29.5.2",
-    "@types/node": "20.2.5",
-    "@types/react-dom": "18.2.4",
+    "@types/jest": "29.5.3",
+    "@types/node": "20.4.5",
+    "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "5.3.3",
     "@types/spark-md5": "3.0.2",
-    "@typescript-eslint/eslint-plugin": "5.59.8",
-    "@typescript-eslint/parser": "5.59.8",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
     "autoprefixer": "10.4.14",
-    "babel-jest": "29.5.0",
-    "babel-loader": "9.1.2",
+    "babel-jest": "29.6.2",
+    "babel-loader": "9.1.3",
     "babel-plugin-named-asset-import": "0.3.8",
     "babel-preset-react-app": "10.0.1",
     "bfj": "7.0.2",
-    "browserslist": "4.21.7",
+    "browserslist": "4.21.10",
     "camelcase": "7.0.1",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "6.8.1",
-    "css-minimizer-webpack-plugin": "5.0.0",
-    "dotenv": "16.1.3",
+    "css-minimizer-webpack-plugin": "5.0.1",
+    "dotenv": "16.3.1",
     "dotenv-expand": "10.0.0",
-    "eslint": "8.41.0",
+    "eslint": "8.46.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "17.0.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "file-loader": "6.2.0",
     "fs-extra": "11.1.1",
-    "html-webpack-plugin": "5.5.1",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
-    "jest-resolve": "29.5.0",
+    "html-webpack-plugin": "5.5.3",
+    "jest": "29.6.2",
+    "jest-environment-jsdom": "29.6.2",
+    "jest-resolve": "29.6.2",
     "jest-watch-typeahead": "2.2.2",
     "mini-css-extract-plugin": "2.7.6",
-    "postcss": "8.4.24",
+    "postcss": "8.4.27",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "7.3.2",
+    "postcss-loader": "7.3.3",
     "postcss-normalize": "10.0.1",
-    "postcss-preset-env": "8.4.1",
+    "postcss-preset-env": "9.1.0",
     "prompts": "2.4.2",
     "react-dev-utils": "12.0.1",
     "react-refresh": "0.14.0",
     "resolve": "1.22.2",
     "resolve-url-loader": "5.0.0",
-    "semver": "7.5.2",
+    "semver": "7.5.4",
     "source-map-loader": "4.0.1",
     "style-loader": "3.3.3",
-    "stylelint": "15.10.1",
+    "stylelint": "15.10.2",
     "stylelint-config-rational-order": "0.1.2",
-    "stylelint-config-standard": "33.0.0",
+    "stylelint-config-standard": "34.0.0",
     "stylelint-order": "6.0.3",
     "terser-webpack-plugin": "5.3.9",
-    "typescript": "5.0.4",
-    "webpack": "5.85.0",
-    "webpack-dev-server": "4.15.0",
+    "typescript": "5.1.6",
+    "webpack": "5.88.2",
+    "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
     "workbox-webpack-plugin": "7.0.0"
   },

src/components/ThreadDetails/ThreadDetails.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Thread from '../../types/Thread';
 import ThreadDetailsWindow from './ThreadDetailsWindow';
 
@@ -46,11 +46,12 @@ export default class ThreadDetails extends React.PureComponent<Props> {
     if (newWindow) {
       this.windows.add(newWindow);
       newWindow.document.title = thread.name;
-      ReactDOM.render(<ThreadDetailsWindow thread={thread} />, newWindow.document.body);
+      const root = createRoot(newWindow.document.body);
+      root.render(<ThreadDetailsWindow thread={thread} />);
       copyStyles(document, newWindow.document);
 
       newWindow.addEventListener('beforeunload', () => {
-        ReactDOM.unmountComponentAtNode(newWindow.document.body);
+        root.unmount();
         this.windows.delete(newWindow);
       });
     }