Updated packages to react 19

Author: dlymonkai

package.json

@@ -32,8 +32,8 @@
     "svgo": "lerna run svgo --parallel"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^19.1",
+    "react-dom": "^19.1"
   },
   "devDependencies": {
     "lerna": "^7.1.4",

packages/analytics/package.json

@@ -31,8 +31,8 @@
     "@monkvision/types": "5.2.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^19.1",
+    "react-dom": "^19.1"
   },
   "devDependencies": {
     "@monkvision/eslint-config-base": "5.2.1",
@@ -41,10 +41,9 @@
     "@monkvision/jest-config": "5.2.1",
     "@monkvision/prettier-config": "5.2.1",
     "@monkvision/typescript-config": "5.2.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.2.2",
-    "@types/node": "^18.11.9",
+    "@types/node": "^24.5.2",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "eslint": "^8.29.0",
@@ -60,13 +59,13 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-utils": "^3.0.0",
-    "jest": "^29.3.1",
+    "jest": "^29.6",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",
     "regexpp": "^3.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.4"
+    "typescript": "^5.9.2"
   },
   "prettier": "@monkvision/prettier-config",
   "publishConfig": {

packages/camera-web/package.json

@@ -37,8 +37,8 @@
   },
   "peerDependencies": {
     "@auth0/auth0-react": "^2.2.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
@@ -49,11 +49,10 @@
     "@monkvision/prettier-config": "5.2.1",
     "@monkvision/test-utils": "5.2.1",
     "@monkvision/typescript-config": "5.2.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@types/fscreen": "^1.0.1",
     "@types/jest": "^29.2.2",
-    "@types/node": "^18.11.9",
+    "@types/node": "^24.5.2",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "eslint": "^8.29.0",
@@ -69,14 +68,14 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-utils": "^3.0.0",
-    "jest": "^29.3.1",
+    "jest": "^29.6",
     "jest-environment-jsdom": "^29.6.2",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",
     "regexpp": "^3.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.4"
+    "typescript": "^5.9.2"
   },
   "prettier": "@monkvision/prettier-config",
   "publishConfig": {

packages/camera-web/src/Camera/hooks/useCameraCanvas.ts

@@ -28,7 +28,7 @@ export interface CameraCanvasHandle {
   /**
    * The ref to the canvas element. Forward this ref to the <canvas> tag to set it up.
    */
-  ref: RefObject<HTMLCanvasElement>;
+  ref: RefObject<HTMLCanvasElement | null>;
   /**
    * The dimensions of the canvas.
    */

packages/camera-web/src/Camera/hooks/useCameraPreview.ts

@@ -40,7 +40,7 @@ export interface CameraPreviewHandle extends UserMediaResult {
   /**
    * React MutableRefObject referencing the video element displaying the camera preview.
    */
-  ref: RefObject<HTMLVideoElement>;
+  ref: RefObject<HTMLVideoElement | null>;
 }
 
 /**

packages/camera-web/src/Camera/hooks/useCameraScreenshot.ts

@@ -15,11 +15,11 @@ export interface CameraScreenshotConfig {
   /**
    * The ref to the video element to take screenshots of.
    */
-  videoRef: RefObject<HTMLVideoElement>;
+  videoRef: RefObject<HTMLVideoElement | null>;
   /**
    * The ref to the canvas element used to draw the screenshots
    */
-  canvasRef: RefObject<HTMLCanvasElement>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
   /**
    * The dimensions of the screenshot.
    */

packages/camera-web/src/Camera/hooks/useCompression.ts

@@ -16,7 +16,7 @@ export interface UseCompressionParams {
   /**
    * The ref to the canvas element used to draw and compress the image.
    */
-  canvasRef: RefObject<HTMLCanvasElement>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
   /**
    * The compression options.
    */
@@ -72,7 +72,7 @@ function setCustomMeasurements(
 
 function compressUsingBrowser(
   image: ImageData,
-  canvasRef: RefObject<HTMLCanvasElement>,
+  canvasRef: RefObject<HTMLCanvasElement | null>,
   options: CompressionOptions,
 ): Promise<MonkPicture> {
   const { canvas, context } = getCanvasHandle(canvasRef);

packages/camera-web/src/Camera/hooks/useUserMedia.ts

@@ -166,7 +166,7 @@ function getStreamDeviceId(stream: MediaStream): string | null {
  */
 export function useUserMedia(
   constraints: MediaStreamConstraints,
-  videoRef: RefObject<HTMLVideoElement> | null,
+  videoRef: RefObject<HTMLVideoElement | null> | null,
 ): UserMediaResult {
   const streamRef = useRef<MediaStream | null>(null);
   const [stream, setStream] = useState<MediaStream | null>(null);
@@ -225,10 +225,6 @@ export function useUserMedia(
 
   const getUserMedia = useCallback(async () => {
     setIsLoading(true);
-    if (stream) {
-      stream.removeEventListener('inactive', onStreamInactive);
-      stream.getTracks().forEach((track) => track.stop());
-    }
     const deviceDetails = await analyzeCameraDevices(constraints);
     const updatedConstraints = {
       ...constraints,
@@ -288,6 +284,7 @@ export function useUserMedia(
 
   useEffect(() => {
     return () => {
+      streamRef.current?.removeEventListener('inactive', onStreamInactive);
       streamRef.current?.getTracks().forEach((track) => {
         track.stop();
       });

packages/camera-web/src/Camera/hooks/utils/getCanvasHandle.ts

@@ -18,7 +18,7 @@ export interface CanvasHandle {
  * Utility function used to retreive a canvas handle or throw if it is not available.
  */
 export function getCanvasHandle(
-  ref: RefObject<HTMLCanvasElement>,
+  ref: RefObject<HTMLCanvasElement | null>,
   onError?: (err: Error) => void,
 ): CanvasHandle {
   if (!ref.current) {

packages/camera-web/test/Camera/Camera.test.tsx

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 
 Object.defineProperty(HTMLMediaElement.prototype, 'muted', {
   set: () => {},