add | null to resolve some improved react type hints

package.json

@@ -10,32 +10,32 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "@eslint/js": "^9.7.0",
+        "@eslint/js": "^9.17.0",
         "@types/eslint__js": "^8.42.3",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "css-loader": "^7.1.2",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.35.0",
+        "eslint": "^8.57.1",
+        "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-unused-imports": "^3.2.0",
         "file-loader": "^6.2.0",
-        "html-webpack-plugin": "^5.6.0",
-        "prettier": "^3.3.3",
-        "prettier-plugin-organize-imports": "^4.0.0",
-        "sass": "^1.77.8",
-        "sass-loader": "^14.2.1",
+        "html-webpack-plugin": "^5.6.3",
+        "prettier": "^3.4.2",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "sass": "^1.83.0",
+        "sass-loader": "^16.0.4",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.5.3",
-        "typescript-eslint": "^7.16.1",
-        "webpack": "^5.93.0",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^7.18.0",
+        "webpack": "^5.97.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4"
+        "webpack-dev-server": "^5.2.0"
     },
     "dependencies": {
-        "jotai": "^2.9.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "jotai": "^2.10.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     }
 }

src/core/context-menu.tsx

@@ -6,19 +6,19 @@ import { useAlignment } from './hooks';
 
 /** calls the close action when you hit escape or click outside of the ref element */
 export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
-    refs: RefObject<HTMLElement>[],
+    refs: RefObject<HTMLElement | null>[],
     actionFunc: () => void,
 ) {
     // have to use a ref here and not states since we can't re-assign state between mouseup and click
     const data = useRef<
-        Map<number, { ref: RefObject<HTMLElement>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }>
+        Map<number, { ref: RefObject<HTMLElement | null>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }>
     >(new Map());
     const [hadMouseDown, setHadMouseDown] = useState<boolean>(false);
 
     useEffect(() => {
         data.current.clear();
         for (let i = 0; i < refs.length; ++i) {
-            const ref = refs[i] as RefObject<HTMLElement>;
+            const ref = refs[i] as RefObject<HTMLElement | null>;
             data.current.set(i, { ref, mouseDownTarget: null, mouseUpTarget: null });
         }
     }, [refs]);
@@ -125,7 +125,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
 }
 
 export interface ContextProps {
-    rootRef?: RefObject<HTMLDivElement>;
+    rootRef?: RefObject<HTMLDivElement | null>;
     relativeToRef?: RefObject<HTMLElement>;
     relativeToPos?: { x: number; y: number };
     alignment: IAlignment;

src/core/hooks.ts

@@ -173,7 +173,7 @@ export function useAsyncSubmitText<ErrorType>(
 
 /** aligns an element to a reference element or position every time realignDeps changes */
 export function useAlignment(
-    rootRef: RefObject<HTMLElement>,
+    rootRef: RefObject<HTMLElement | null>,
     relativeToRef: RefObject<HTMLElement | null> | null,
     relativeToPos: { x: number; y: number } | null,
     alignment: IAlignment,