Make useScrollDepth generic over element type

Tests attaching the scroll ref to a <div> failed to type-check because
RefObject<HTMLElement> isn't assignable to Ref<HTMLDivElement>.

Author: aapeliv

app/web/features/analytics/journeyHooks.test.tsx

@@ -120,7 +120,7 @@ describe("useScrollDepth", () => {
   it("logs max scroll depth on unmount when attached to a container", () => {
     // Use a real component so the ref is attached before useEffect runs
     function ScrollComponent() {
-      const scrollRef = useScrollDepth("page.scroll_depth", {
+      const scrollRef = useScrollDepth<HTMLDivElement>("page.scroll_depth", {
         path: "/about",
       });
       return <div ref={scrollRef} data-testid="scroller" />;
@@ -155,7 +155,7 @@ describe("useScrollDepth", () => {
 
   it("tracks maximum scroll depth, not final position", () => {
     function ScrollComponent() {
-      const scrollRef = useScrollDepth("scroll.depth");
+      const scrollRef = useScrollDepth<HTMLDivElement>("scroll.depth");
       return <div ref={scrollRef} data-testid="scroller" />;
     }
 
@@ -198,7 +198,7 @@ describe("useScrollDepth", () => {
 
   it("does not log if no scrolling occurred", () => {
     function ScrollComponent() {
-      const scrollRef = useScrollDepth("scroll.depth");
+      const scrollRef = useScrollDepth<HTMLDivElement>("scroll.depth");
       return <div ref={scrollRef} data-testid="scroller" />;
     }
 

app/web/features/analytics/journeyHooks.ts

@@ -94,7 +94,7 @@ export function useFunnelStep(
  * const scrollRef = useScrollDepth("article.read", { article_id: post.id });
  * return <article ref={scrollRef}>...</article>;
  */
-export function useScrollDepth(
+export function useScrollDepth<T extends HTMLElement = HTMLElement>(
   eventType: string,
   properties: Record<string, unknown> = {},
 ) {
@@ -103,7 +103,7 @@ export function useScrollDepth(
 
   const maxDepthRef = useRef(0);
   const hasLoggedRef = useRef(false);
-  const containerRef = useRef<HTMLElement | null>(null);
+  const containerRef = useRef<T | null>(null);
 
   const logDepth = useCallback(() => {
     if (hasLoggedRef.current) return;