From 583c30d76fa499097897399aa0c5ecadbf0a5e03 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 14 Nov 2024 05:18:52 -0800
Subject: [PATCH 1/3] Strict type useResizeObserver

---
 .../desktop-client/src/hooks/useResizeObserver.ts   | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/desktop-client/src/hooks/useResizeObserver.ts b/packages/desktop-client/src/hooks/useResizeObserver.ts
index 4137dd92524..58573eff5d5 100644
--- a/packages/desktop-client/src/hooks/useResizeObserver.ts
+++ b/packages/desktop-client/src/hooks/useResizeObserver.ts
@@ -1,20 +1,19 @@
-// @ts-strict-ignore
 import { useRef, useCallback } from 'react';
 
-export function useResizeObserver(
+export function useResizeObserver<T extends Element>(
   func: (contentRect: DOMRectReadOnly) => void,
-): (el: unknown) => void {
-  const observer = useRef(null);
+): (el: T) => void {
+  const observer = useRef<ResizeObserver | undefined>(undefined);
   if (!observer.current) {
     observer.current = new ResizeObserver(entries => {
       func(entries[0].contentRect);
     });
   }
 
-  const elementRef = useCallback(el => {
-    observer.current.disconnect();
+  const elementRef = useCallback((el: T) => {
+    observer.current?.disconnect();
     if (el) {
-      observer.current.observe(el, { box: 'border-box' });
+      observer.current?.observe(el, { box: 'border-box' });
     }
   }, []);
 

From d17df4f981b85adf55db56989a2f57410d81f659 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 14 Nov 2024 05:20:08 -0800
Subject: [PATCH 2/3] Release notes

---
 upcoming-release-notes/3859.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/3859.md

diff --git a/upcoming-release-notes/3859.md b/upcoming-release-notes/3859.md
new file mode 100644
index 00000000000..66a14a5d037
--- /dev/null
+++ b/upcoming-release-notes/3859.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Strict TS typing for useResizeObserver.ts

From 04fb3fc375adb3c490eed9c4cbcf1da7c5a72ae8 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 14 Nov 2024 06:01:38 -0800
Subject: [PATCH 3/3] Fix typecheck error

---
 .../desktop-client/src/components/budget/BudgetSummaries.tsx    | 2 +-
 packages/desktop-client/src/components/sidebar/Sidebar.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
index a6b2e46570f..5335e903dc6 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
@@ -31,7 +31,7 @@ export function BudgetSummaries({ SummaryComponent }: BudgetSummariesProps) {
     config: { mass: 3, tension: 600, friction: 80 },
   }));
 
-  const containerRef = useResizeObserver(
+  const containerRef = useResizeObserver<HTMLDivElement>(
     useCallback(rect => {
       setWidthState(rect.width);
     }, []),
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index 3606073bea0..9f9d4c4953c 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
@@ -61,7 +61,7 @@ export function Sidebar() {
     dispatch(replaceModal('add-account'));
   };
 
-  const containerRef = useResizeObserver(rect => {
+  const containerRef = useResizeObserver<HTMLDivElement>(rect => {
     setSidebarWidth(rect.width);
   });