Update to React 19

This includes an update to appkit 0.5, using its `useUnloadBlocker`.

This commit does not use any new React features, it just does the update
so that everything works. Figuring out whether code can be improved by
new features can be done later.

Author: LukasKalbertodt

package-lock.json

@@ -26,24 +26,26 @@
     "@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-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",
     "webm-duration-fix": "^1.0.4",
     "webpack": "^5.102.0",
@@ -55,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,9 +1,8 @@
-import { ColorSchemeProvider } from "@opencast/appkit";
+import { ColorSchemeProvider, useUnloadBlocker } from "@opencast/appkit";
 
 import { Root } from "./layout";
 import { GlobalStyle } from "./ui/global-style";
 import { useStudioState } from "./studio-state";
-import { useUnloadBlocker } from "./util";
 
 
 

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";
 

src/index.tsx

@@ -5,7 +5,7 @@ import {
   screenWidthAtMost, match,
 } from "@opencast/appkit";
 import { useTranslation } from "react-i18next";
-import React, { forwardRef } from "react";
+import React, { forwardRef, JSX } from "react";
 
 import { DEFINES } from "../defines";
 import KeyboardIcon from "../icons/keyboard.svg";
@@ -24,7 +24,7 @@ export const Header: React.FC<Props> = ({ setOverlayBoxState, inert }) => {
   const { scheme, isHighContrast } = useColorScheme();
 
   return (
-    <header {...{ inert: inert ? "" : null }} css={{
+    <header {...{ inert }} css={{
       backgroundColor: match(scheme, {
         "light": () => COLORS.neutral60,
         "dark": () => COLORS.neutral20,

src/layout/header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef } from "react";
+import { JSX, useEffect, useId, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import Oscilloscope from "oscilloscope";
 import { Spinner, useColorScheme } from "@opencast/appkit";

src/steps/audio-setup/mic-preview.tsx

@@ -2,7 +2,7 @@ import { Floating, FloatingContainer, FloatingTrigger, ProtoButton, match, useCo
 import { useTranslation } from "react-i18next";
 import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import { CSSObject } from "@emotion/react";
-import { useState } from "react";
+import { JSX, useState } from "react";
 
 import { COLORS, focusStyle } from "../util";
 import { SHORTCUTS, ShortcutKeys, useShortcut, useShowAvailableShortcuts } from "../shortcuts";

src/steps/elements.tsx

@@ -1,4 +1,4 @@
-import { HTMLInputTypeAttribute, useEffect, useId, useRef, useState } from "react";
+import { HTMLInputTypeAttribute, JSX, useEffect, useId, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import Select, { CSSObjectWithLabel, SelectInstance } from "react-select";
 import {

src/steps/finish/upload.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { JSX, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { match, notNullish, screenWidthAbove, screenWidthAtMost, useColorScheme } from "@opencast/appkit";
 import { FiCircle } from "react-icons/fi";
@@ -38,7 +38,7 @@ export const Main: React.FC<Props> = ({ inert }) => {
   };
 
   return (
-    <main {...{ inert: inert ? "" : null }} css={{
+    <main {...{ inert }} css={{
       display: "flex",
       flex: 1,
       backgroundColor: COLORS.neutral10,