From 86052eac809289a3a5ebf60c50f2a118f0389dc7 Mon Sep 17 00:00:00 2001
From: kyooosukedn <daniepurnomo50@gmail.com>
Date: Thu, 19 Dec 2024 23:43:32 +0100
Subject: [PATCH] Add generic type parameter for useFocusZone container ref

---
 packages/react/src/hooks/useFocusZone.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/hooks/useFocusZone.ts b/packages/react/src/hooks/useFocusZone.ts
index 71b49a01708..40243097420 100644
--- a/packages/react/src/hooks/useFocusZone.ts
+++ b/packages/react/src/hooks/useFocusZone.ts
@@ -5,12 +5,13 @@ import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 export {FocusKeys} from '@primer/behaviors'
 export type {Direction} from '@primer/behaviors'
 
-export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
+export interface FocusZoneHookSettings<T extends HTMLElement>
+  extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
   /**
    * Optional ref for the container that holds all elements participating in arrow key focus.
    * If one is not passed, we will create one for you and return it from the hook.
    */
-  containerRef?: React.RefObject<HTMLElement>
+  containerRef?: React.RefObject<T>
 
   /**
    * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
@@ -25,11 +26,11 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
   disabled?: boolean
 }
 
-export function useFocusZone(
-  settings: FocusZoneHookSettings = {},
+export function useFocusZone<T extends HTMLElement>(
+  settings: FocusZoneHookSettings<T> = {},
   dependencies: React.DependencyList = [],
-): {containerRef: React.RefObject<HTMLElement>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
-  const containerRef = useProvidedRefOrCreate(settings.containerRef)
+): {containerRef: React.RefObject<T>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
+  const containerRef = useProvidedRefOrCreate<T>(settings.containerRef)
   const useActiveDescendant = !!settings.activeDescendantFocus
   const passedActiveDescendantRef =
     typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus