Update React to v19 and react-leaflet to v5

Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>

app/package.json

@@ -19,8 +19,8 @@
     "@types/geojson": "^7946.0.10",
     "axios": "^1.6.5",
     "date-fns": "^3.3.1",
-    "react": "^18.2.0",
+    "react": "^19.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.2.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.23.0",
     "vite-tsconfig-paths": "^5.1.4",
@@ -29,8 +29,8 @@
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
     "@types/node": "^22.15.28",
-    "@types/react": "^18.2.79",
+    "@types/react": "^19.2.5",
-    "@types/react-dom": "^18.2.25",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.0",

lib/.eslintignore

@@ -2,4 +2,8 @@ node_modules/
 dist/
 examples/
 docs/
-coverage/
+coverage/
+**/*.spec.ts
+**/*.spec.tsx
+**/*.test.ts
+**/*.test.tsx

lib/examples/1-basic-map/package.json

@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
+    "react": "^19.2.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "utopia-ui": "../../"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.5",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",

lib/examples/2-static-layers/package.json

@@ -10,15 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
+    "react": "^19.2.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "utopia-ui": "../../"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
     "@types/geojson": "^7946.0.16",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.5",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",

lib/examples/3-tags/package.json

@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
+    "react": "^19.2.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "utopia-ui": "latest"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.5",
-    "@types/react-dom": "^18.3.5",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",

lib/package.json

@@ -50,12 +50,12 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@tailwindcss/postcss": "^4.0.14",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
     "@types/leaflet.markercluster": "^1.5.5",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.2.5",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
@@ -80,8 +80,8 @@
     "happy-dom": "^20.0.0",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
+    "react": "^19.2.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "rollup": "^4.34.6",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
@@ -96,8 +96,8 @@
     "vitest": "^3.0.5"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
+    "react": "^19.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.2.0",
     "react-router-dom": "^6.23.0"
   },
   "dependencies": {
@@ -110,6 +110,7 @@
     "@tiptap/extension-image": "^3.6.5",
     "@tiptap/extension-link": "^3.6.5",
     "@tiptap/extension-placeholder": "^3.6.5",
+    "@tiptap/extension-text-style": "^3.6.5",
     "@tiptap/extension-youtube": "^3.6.5",
     "@tiptap/pm": "^3.6.5",
     "@tiptap/react": "^3.6.5",
@@ -127,8 +128,8 @@
     "react-icons": "^5.5.0",
     "react-image-crop": "^10.1.8",
     "react-inlinesvg": "^4.2.0",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
-    "react-leaflet-cluster": "^2.1.0",
+    "react-leaflet-cluster": "^3.1.1",
     "react-markdown": "^9.0.1",
     "react-photo-album": "^3.0.2",
     "react-qr-code": "^2.0.16",

lib/src/Components/AppShell/SideBar.tsx

@@ -4,9 +4,11 @@ import { NavLink, useLocation } from 'react-router-dom'
 import { useAppState, useSetAppState } from './hooks/useAppState'
 import SidebarSubmenu from './SidebarSubmenu'
 
+import type { ReactElement } from 'react'
+
 export interface Route {
   path: string
-  icon: JSX.Element
+  icon: ReactElement
   name: string
   submenu?: Route[]
   blank?: boolean

lib/src/Components/AppShell/SidebarSubmenu.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 import type { Route } from './SideBar'
+import type { ReactElement } from 'react'
 
 function SidebarSubmenu({
   submenu,
@@ -10,7 +11,7 @@ function SidebarSubmenu({
   icon,
 }: {
   path: string
-  icon: JSX.Element
+  icon: ReactElement
   name: string
   submenu?: Route[]
 }) {

lib/src/Components/Input/Autocomplete.tsx

@@ -32,7 +32,7 @@ export const Autocomplete = ({
     setFocus && inputRef.current?.focus()
   }, [setFocus])
 
-  const inputRef = useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const getSuggestions = (value) => {
     const inputValue = value.trim().toLowerCase()

lib/src/Components/Map/Subcomponents/Controls/LocateControl.tsx

@@ -31,7 +31,7 @@ declare module 'leaflet' {
  * React wrapper for leaflet.locatecontrol that provides user geolocation functionality
  * @category Map Controls
  */
-export const LocateControl = (): JSX.Element => {
+export const LocateControl = (): React.JSX.Element => {
   const map = useMap()
   const myProfile = useMyProfile()
   const updateItem = useUpdateItem()

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/types.ts

@@ -1,5 +1,6 @@
 import type { Item } from '#types/Item'
 import type { ItemsApi } from '#types/ItemsApi'
+import type { ReactElement } from 'react'
 
 export interface HeaderViewProps {
   item?: Item
@@ -16,7 +17,7 @@ export interface HeaderViewProps {
 
 export interface PlatformConfig {
   shareUrl: string
-  icon: JSX.Element
+  icon: ReactElement
   label: string
   bgColor: string
 }

lib/src/Components/Map/hooks/useTimeout.tsx

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef } from 'react'
 
 export const useTimeout = (callback, delay) => {
   const callbackRef = useRef(callback)
-  const timeoutRef = useRef<any>()
+  const timeoutRef = useRef<any>(null)
 
   useEffect(() => {
     callbackRef.current = callback

lib/tsconfig.json

@@ -24,7 +24,7 @@
       }
     },
   "include": ["src", "vite.config.ts", "setupTest.ts", "cypress.config.ts", "cypress/support/commands.ts", "cypress/support/component.ts"],
-  "exclude": ["node_modules", "dist", "example"],
+  "exclude": ["node_modules", "dist", "example", "**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
   "typeRoots": [
     "./src/types",
     "./node_modules/@types/"