chore: update react and mui

fission/package.json

@@ -35,10 +35,10 @@
     "@biomejs/biome": "^2.5.6",
     "@haensl/google-analytics": "^1.2.2",
     "@msgpack/msgpack": "^3.1.3",
-    "@mui/base": "^5.0.0-beta.70",
-    "@mui/icons-material": "^5.18.0",
-    "@mui/material": "^5.18.0",
-    "@mui/system": "^5.18.0",
+    "@base-ui/react": "^1.0.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/system": "^6.0.0",
     "@react-three/drei": "^9.122.0",
     "@react-three/fiber": "^8.18.0",
     "@synthesis.adsk/jolt-physics": "^1.0.4",
@@ -56,10 +56,10 @@
     "peerjs": "^1.5.5",
     "playwright": "^1.61.0",
     "postprocessing": "^6.37.7",
-    "react": "^18.3.1",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.1",
-    "react-draggable": "^4.5.0",
+    "react": "^19.2.8",
+    "react-colorful": "^5.8.0",
+    "react-dom": "^19.2.8",
+    "react-draggable": "^4.7.1",
     "react-icons": "^4.12.0",
     "react-joystick-component": "^6.2.1",
     "three": "^0.179.1",
@@ -73,7 +73,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/node": "^20.19.11",
     "@types/pako": "^2.0.4",
-    "@types/react": "^18.3.23",
+    "@types/react": "^19.2.18",
     "@types/react-dom": "^18.3.7",
     "@types/three": "^0.179.0",
     "@vitejs/plugin-basic-ssl": "^2.1.0",

fission/src/ui/components/SelectButton.tsx

@@ -32,7 +32,7 @@ type SelectButtonProps = {
 
 const SelectButton: React.FC<SelectButtonProps> = ({ value, color, placeholder, onSelect, className }) => {
     const [selecting, setSelecting] = useState<boolean>(false)
-    const timeoutRef = useRef<NodeJS.Timeout>()
+    const timeoutRef = useRef<NodeJS.Timeout>(undefined)
 
     const onReceiveSelection = useCallback(
         (value: Jolt.Body) => {

fission/src/ui/components/ViewCube.tsx

@@ -19,11 +19,11 @@ const ViewCube: React.FC<ViewCubeProps> = ({
 }) => {
     const CLICK_THRESHOLD_PIXELS = 10 // Pixel threshold for distinguishing clicks from drags
     const containerRef = useRef<HTMLDivElement>(null)
-    const sceneRef = useRef<THREE.Scene>()
-    const rendererRef = useRef<THREE.WebGLRenderer>()
-    const cameraRef = useRef<THREE.OrthographicCamera>()
-    const cubeRef = useRef<THREE.Group>()
-    const axisRef = useRef<THREE.Group>()
+    const sceneRef = useRef<THREE.Scene>(undefined)
+    const rendererRef = useRef<THREE.WebGLRenderer>(undefined)
+    const cameraRef = useRef<THREE.OrthographicCamera>(undefined)
+    const cubeRef = useRef<THREE.Group>(undefined)
+    const axisRef = useRef<THREE.Group>(undefined)
     const [hoveredElement, setHoveredElement] = useState<{ type: string; index: number } | null>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [lastMousePos, setLastMousePos] = useState<{ x: number; y: number } | null>(null)

fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx

@@ -1,4 +1,14 @@
-import { Box, Divider, FormControl, InputLabel, MenuItem, Stack, Tooltip } from "@mui/material"
+import {
+    Box,
+    Divider,
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Stack,
+    type SxProps,
+    type Theme,
+    Tooltip,
+} from "@mui/material"
 import { type ReactElement, useCallback, useEffect, useReducer, useState } from "react"
 import EventSystem from "@/systems/EventSystem.ts"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
@@ -17,7 +27,7 @@ interface SchemeSelectorProps {
     panelId?: string
     brainIndex: number
 
-    style?: React.CSSProperties
+    style?: SxProps<Theme>
     message: string
     disabled?: boolean
 

fission/src/ui/panels/simulation/AutoTestPanel.tsx

@@ -276,7 +276,7 @@ const Staging: React.FC<StagingProps> = ({ assembly, setPlaying }) => {
                     label="Game Data"
                     placeholder="..."
                     defaultValue={gameData}
-                    onInput={(e: React.ChangeEvent<HTMLInputElement>) => setGameData(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGameData(e.target.value)}
                 />
             </Stack>
             <Stack>

fission/src/ui/panels/simulation/WiringPanel.tsx

@@ -13,7 +13,7 @@ import {
     useReactFlow,
 } from "@xyflow/react"
 import type React from "react"
-import { type ComponentType, useCallback, useEffect, useMemo, useReducer, useState } from "react"
+import { type ComponentType, useCallback, useEffect, useMemo, useReducer, useState, type JSX } from "react"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import InputSystem from "@/systems/input/InputSystem"
 import { isNoraDeconstructable } from "@/systems/simulation/Nora"