deps: bump the react group across 1 directory with 4 updates

package.json

@@ -60,11 +60,11 @@
     "promise.prototype.finally": "^3.1.2",
     "prop-types": "^15.6.2",
     "qs-stringify": "^1.2.0",
-    "react": "^18.0.0",
-    "react-abstract-autocomplete": "^2.0.3",
+    "react": "^19.0.0",
+    "react-abstract-autocomplete": "^2.0.4",
     "react-async-hook": "^4.0.0",
     "react-bus": "^4.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0",
     "react-google-button": "^0.8.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.2.0",
@@ -95,8 +95,8 @@
     "@types/json-schema": "^7.0.15",
     "@types/natural-compare": "^1.4.3",
     "@types/node": "^18.19.3",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",

src/components/Chat/ChatMessages.tsx

@@ -24,7 +24,7 @@
   return true;
 }
 
-function useScrolledToBottom(ref: React.RefObject<HTMLElement>, initialValue = true) {
+function useScrolledToBottom(ref: React.RefObject<HTMLElement | null>, initialValue = true) {
   const [isScrolledToBottom, setScrolledToBottom] = useState(initialValue);
 
   const update = useCallback(() => {
@@ -78,7 +78,7 @@
     }
     // We need to scroll to the bottom only if a new message comes in, not when the scroll-to-bottom
     // state changed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lastMessage]);
 
   // Accept externally controlled scrolling using the global event bus, so the chat input box

src/components/DialogCloseAnimation/index.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 type DialogCloseAnimationProps = {
-  children: React.ReactElement | null | false | undefined,
+  children: React.ReactElement<{ open: boolean }> | null | false | undefined,
   delay: number,
 };
 
 type DialogCloseAnimationState = {
-  cachedChildren: React.ReactElement | null,
+  cachedChildren: React.ReactElement<{ open: boolean }> | null,
 };
 
 /**

src/components/MediaList/MediaRowBase.tsx

@@ -30,7 +30,7 @@ interface MediaRowBaseProps extends React.ComponentProps<'div'> {
   media: Media,
   children: React.ReactNode,
   onClick?: (event?: React.MouseEvent) => void,
-  containerRef?: React.RefObject<HTMLDivElement>,
+  containerRef?: React.RefObject<HTMLDivElement | null>,
 }
 function MediaRowBase({
   className,

src/components/PlaylistManager/Panel/PlaylistItemRow.tsx

@@ -12,7 +12,7 @@ type PlaylistItemRowProps = {
   className?: string,
   // For virtual list positioning
   style?: React.CSSProperties,
-  containerRef?: React.RefObject<HTMLDivElement>,
+  containerRef?: React.RefObject<HTMLDivElement | null>,
   index: number,
   media: PlaylistItem,
   onClick: () => void,

src/hooks/useUserCard.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import UserCard from '../components/UserCard';
 import type { User } from '../reducers/users';
 
-export default function useUserCard(user: User, refAnchor: React.RefObject<HTMLElement>) {
+export default function useUserCard(user: User, refAnchor: React.RefObject<HTMLElement | null>) {
   const [isOpen, setOpen] = useState(false);
   const [position, setPosition] = useState<{ x: number, y: number } | null>(null);