(fix:types) stricter in v19

frontend/src/components/ContextMenu.tsx

@@ -14,10 +14,10 @@ interface ContextMenuProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   options: MenuOption[];
-  anchorRef: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  anchorRef: React.RefObject<HTMLDivElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
   offset?: { x: number; y: number };
+  className?: string;
 }
 
 export default function ContextMenu({

frontend/src/components/DropdownMenu.tsx

@@ -7,12 +7,12 @@ type DropdownMenuProps = {
   onSelect: (value: string) => void;
   defaultValue?: string;
   icon?: string;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  anchorRef?: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
   offset?: { x: number; y: number };
+  className?: string;
 };
 
 export default function DropdownMenu({

frontend/src/components/MultiSelectPopup.tsx

@@ -17,7 +17,7 @@ export type OptionType = {
 type MultiSelectPopupProps = {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement>;
+  anchorRef: React.RefObject<HTMLElement | null>;
   options: OptionType[];
   selectedIds: Set<string | number>;
   onSelectionChange: (newSelectedIds: Set<string | number>) => void;

frontend/src/components/SourcesPopup.tsx

@@ -16,7 +16,7 @@ import { ActiveState } from '../models/misc';
 type SourcesPopupProps = {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
   handlePostDocumentSelect: (doc: Doc | null) => void;
   setUploadModalState: React.Dispatch<React.SetStateAction<ActiveState>>;
 };

frontend/src/components/ToolsPopup.tsx

@@ -14,7 +14,7 @@ import { useDarkTheme } from '../hooks';
 interface ToolsPopupProps {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 export default function ToolsPopup({

frontend/src/conversation/ConversationBubble.tsx

@@ -96,7 +96,7 @@ const ConversationBubble = forwardRef<
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const editableQueryRef = useRef<HTMLDivElement | null>(null);
+  const editableQueryRef = useRef<HTMLDivElement>(null);
   const [isQuestionCollapsed, setIsQuestionCollapsed] = useState(true);
 
   useOutsideAlerter(editableQueryRef, () => setIsEditClicked(false), [], true);

frontend/src/hooks/index.ts

@@ -1,7 +1,7 @@
 import { useEffect, RefObject, useState } from 'react';
 
 export function useOutsideAlerter<T extends HTMLElement>(
-  ref: RefObject<T>,
+  ref: RefObject<T | null>,
   handler: () => void,
   additionalDeps: unknown[],
   handleEscapeKey?: boolean,
@@ -30,7 +30,7 @@ export function useOutsideAlerter<T extends HTMLElement>(
         document.removeEventListener('keydown', handleEscape);
       }
     };
-  }, [ref, ...additionalDeps]);
+  }, [ref, handler, handleEscapeKey, ...additionalDeps]);
 }
 
 export function useMediaQuery() {

frontend/src/settings/Documents.tsx

@@ -68,9 +68,9 @@ export default function Documents({
   const [totalPages, setTotalPages] = useState<number>(1);
 
   const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>(
-    {},
-  );
+  const menuRefs = useRef<{
+    [key: string]: React.RefObject<HTMLDivElement | null>;
+  }>({});
 
   // Create or get a ref for each document wrapper div (not the td)
   const getMenuRef = (docId: string) => {

frontend/src/settings/Tools.tsx

@@ -35,7 +35,7 @@ export default function Tools() {
   const [loading, setLoading] = React.useState(false);
   const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);
   const menuRefs = React.useRef<{
-    [key: string]: React.RefObject<HTMLDivElement>;
+    [key: string]: React.RefObject<HTMLDivElement | null>;
   }>({});
   const [deleteModalState, setDeleteModalState] =
     React.useState<ActiveState>('INACTIVE');
@@ -46,7 +46,7 @@ export default function Tools() {
   React.useEffect(() => {
     userTools.forEach((tool) => {
       if (!menuRefs.current[tool.id]) {
-        menuRefs.current[tool.id] = React.createRef();
+        menuRefs.current[tool.id] = React.createRef<HTMLDivElement>();
       }
     });
   }, [userTools]);

frontend/src/upload/Upload.tsx

@@ -194,7 +194,7 @@ function Upload({
   }>();
 
   const { t } = useTranslation();
-  const setTimeoutRef = useRef<number | null>();
+  const setTimeoutRef = useRef<number | null>(null);
 
   const urlOptions: { label: string; value: IngestorType }[] = [
     { label: 'Crawler', value: 'crawler' },