Update to React 19 (and get rid of some dependencies) (#1269)

This updates Studio to use React 19. See commit descriptions for
additional information.

Test deployments: https://test.studio.opencast.org

Author: LukasKalbertodt

package-lock.json

@@ -26,27 +26,27 @@
     "@fontsource-variable/roboto-flex": "^5.2.8",
     "@fontsource-variable/vazirmatn": "^5.2.8",
     "@iarna/toml": "^2.2.5",
-    "@opencast/appkit": "^0.4.1",
+    "@opencast/appkit": "^0.5.0",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.1",
     "deepmerge": "^4.3.1",
     "fast-deep-equal": "^3.1.3",
+    "focus-trap-react": "^11.0.4",
     "html-webpack-plugin": "^5.6.4",
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "is-plain-object": "^5.0.0",
     "mustache": "^4.2.0",
     "oscilloscope": "^1.3.0",
-    "react": "^18.3.1",
-    "react-beforeunload": "^2.6.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.63.0",
     "react-hotkeys-hook": "^5.1.0",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
+    "react-merge-refs": "^3.0.2",
     "react-select": "^5.10.2",
-    "use-resize-observer": "^9.1.0",
     "webm-duration-fix": "^1.0.4",
     "webpack": "^5.102.0",
     "webpack-cli": "^6.0.1"
@@ -57,9 +57,9 @@
     "@types/iarna__toml": "^2.0.5",
     "@types/mustache": "^4.2.6",
     "@types/node": "^24.6.1",
-    "@types/react": "^18.3.23",
+    "@types/react": "^19.2.0",
     "@types/react-beforeunload": "^2.1.5",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.2.0",
     "@types/react-page-visibility": "^6.4.4",
     "@typescript-eslint/eslint-plugin": "^8.45.0",
     "eslint": "^9.33.0",

package.json

@@ -1,5 +1,4 @@
-import { ColorSchemeProvider } from "@opencast/appkit";
-import { useBeforeunload } from "react-beforeunload";
+import { ColorSchemeProvider, useUnloadBlocker } from "@opencast/appkit";
 
 import { Root } from "./layout";
 import { GlobalStyle } from "./ui/global-style";
@@ -24,11 +23,7 @@ const PreventClose = () => {
   const uploaded = upload.state === "uploaded";
   const uploading = upload.state === "uploading";
 
-  useBeforeunload(event => {
-    if ((recordings?.length > 0 && !uploaded && !downloaded) || uploading) {
-      event.preventDefault();
-    }
-  });
+  useUnloadBlocker((recordings?.length > 0 && !uploaded && !downloaded) || uploading);
 
   return null;
 };

src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { JSX } from "react";
 import ReactDOM from "react-dom/client";
 import { notNullish } from "@opencast/appkit";