fix(deps-dev): update to react 19

app/package.json

@@ -18,8 +18,8 @@
     "@tailwindcss/vite": "^4.1.18",
     "@types/geojson": "^7946.0.10",
     "axios": "^1.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^7.10.1",
     "utopia-ui": "^3.0.112",
@@ -29,8 +29,8 @@
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
     "@eslint/js": "^9.36.0",
     "@types/node": "^24.10.2",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "daisyui": "^5.5.14",
     "eslint": "^9.39.2",

lib/package.json

@@ -55,8 +55,8 @@
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.5",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
     "cypress": "^15.7.1",
@@ -77,8 +77,8 @@
     "happy-dom": "^20.0.11",
     "postcss": "^8.4.21",
     "prettier": "^3.7.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^4.53.5",
     "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -94,8 +94,8 @@
     "vitest": "^3.0.5"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^7.10.1"
   },
   "dependencies": {
@@ -123,12 +123,12 @@
     "react-icons": "^5.5.0",
     "react-image-crop": "^11.0.10",
     "react-inlinesvg": "^4.2.0",
-    "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^3.1.1",
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-cluster": "^4.0.0",
     "react-markdown": "^9.0.1",
     "react-photo-album": "^3.3.0",
     "react-qr-code": "^2.0.16",
-    "react-toastify": "^9.1.3",
+    "react-toastify": "^11.0.5",
     "remark-breaks": "^4.0.0",
     "tiptap-markdown": "^0.9.0",
     "yet-another-react-lightbox": "^3.27.0"

lib/src/Components/AppShell/ContextWrapper.tsx

@@ -31,24 +31,24 @@ const CloseButton = ({ closeToast }: CloseButtonProps) => (
 
 export const ContextWrapper = ({ children }: { children: React.ReactNode }) => {
   const isWrapped = useContext(ContextCheckContext)
-
   const isInsideRouter = useInRouterContext()
 
-  let returnValue = children
+  // Build the component tree from inside out
+  let content = <>{children}</>
 
   if (!isWrapped) {
-    returnValue = (
+    content = (
       <ContextCheckContext.Provider value={true}>
-        <Wrappers>{returnValue}</Wrappers>
+        <Wrappers>{content}</Wrappers>
       </ContextCheckContext.Provider>
     )
   }
 
   if (!isInsideRouter) {
-    returnValue = <Router>{returnValue}</Router>
+    content = <Router>{content}</Router>
   }
 
-  return returnValue
+  return content
 }
 
 // eslint-disable-next-line react/prop-types

lib/src/Components/AppShell/UserControl.tsx

@@ -32,7 +32,7 @@ export const UserControl = () => {
           return 'Bye bye'
         },
         // other options
-        icon: '👋',
+        icon: () => '👋',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/LoginPage.tsx

@@ -65,7 +65,7 @@ export function LoginPage({ inviteApi, showRequestPassword }: Props) {
           return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
         },
         // other options
-        icon: '✌️',
+        icon: () => '✌️',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/RequestPasswordPage.tsx

@@ -24,7 +24,7 @@ export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
           return 'Check your mailbox'
         },
         // other options
-        icon: '📬',
+        icon: () => '📬',
       },
       error: {
         render({ data }) {

lib/src/Components/Auth/SignupPage.tsx

@@ -29,7 +29,7 @@ export function SignupPage() {
           return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`
         },
         // other options
-        icon: '✌️',
+        icon: () => '✌️',
       },
       error: {
         render({ data }) {

lib/src/Components/Input/Autocomplete.tsx

@@ -23,17 +23,18 @@ export const Autocomplete = ({
 }) => {
   const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([])
   const [heighlightedSuggestion, setHeighlightedSuggestion] = useState<number>(0)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
   }, [pushFilteredSuggestions])
 
   useEffect(() => {
-    setFocus && inputRef.current?.focus()
+    if (setFocus) {
+      inputRef.current?.focus()
+    }
   }, [setFocus])
 
-  const inputRef = useRef<HTMLInputElement>()
-
   const getSuggestions = (value) => {
     const inputValue = value.trim().toLowerCase()
     const inputLength = inputValue.length

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

@@ -6,16 +6,16 @@ import { createContext, useContext, useState } from 'react'
 type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>
 
 const ClusterRefContext = createContext<UseClusterRefManagerResult>({
-  clusterRef: {} as React.MutableRefObject<undefined>,
+  clusterRef: {} as React.RefObject<undefined>,
   setClusterRef: () => {},
 })
 
 function useClusterRefManager(): {
   clusterRef: any
-  setClusterRef: React.Dispatch<React.SetStateAction<React.MutableRefObject<undefined>>>
+  setClusterRef: React.Dispatch<React.SetStateAction<React.RefObject<undefined>>>
 } {
-  const [clusterRef, setClusterRef] = useState<React.MutableRefObject<undefined>>(
-    {} as React.MutableRefObject<undefined>,
+  const [clusterRef, setClusterRef] = useState<React.RefObject<undefined>>(
+    {} as React.RefObject<undefined>,
   )
 
   return { clusterRef, setClusterRef }

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

@@ -1,20 +1,17 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useCallback, useEffect, useRef } from 'react'
 
-export const useTimeout = (callback, delay) => {
+export const useTimeout = (callback: () => void, delay: number) => {
   const callbackRef = useRef(callback)
-  const timeoutRef = useRef<any>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     callbackRef.current = callback
   }, [callback])
 
   const set = useCallback(() => {
-    timeoutRef.current = setTimeout(() => callbackRef.current(), delay)
+    timeoutRef.current = setTimeout(() => {
+      callbackRef.current()
+    }, delay)
   }, [delay])
 
   const clear = useCallback(() => {