Make focus and keyboard handling hooks generic

4 files changed, 14 insertions, 18 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-focus-option-by-index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-focus-option-by-index.ts
index 1f3b3a9233..bde967f9e9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-focus-option-by-index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-focus-option-by-index.ts
@@ -2,11 +2,11 @@ import React from 'react';
 
 import { getOptions } from '../utils';
 
-export const useFocusOptionByIndex = ({
+export const useFocusOptionByIndex = <T extends HTMLElement>({
   optionsRef,
   setFocusedIndex,
 }: {
-  optionsRef: React.RefObject<HTMLUListElement | null>;
+  optionsRef: React.RefObject<T | null>;
   setFocusedIndex: (index: number) => void;
 }) => {
   return React.useCallback(
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-get-initial-focus-index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-get-initial-focus-index.ts
index fca42ecb7a..bebd0459bf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-get-initial-focus-index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-get-initial-focus-index.ts
@@ -2,12 +2,12 @@ import React from 'react';
 
 import { getOptions, getSelectedOptionIndex } from '../utils';
 
-export const useGetInitialFocusIndex = ({
+export const useGetInitialFocusIndex = <T extends HTMLElement>({
   focusedIndex,
   optionsRef,
 }: {
   focusedIndex?: number;
-  optionsRef: React.RefObject<HTMLUListElement | null>;
+  optionsRef: React.RefObject<T | null>;
 }) => {
   return React.useCallback(() => {
     const options = getOptions(optionsRef.current);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-handle-keyboard-navigation.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-handle-keyboard-navigation.ts
index d5719b6ec8..951c53253d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-handle-keyboard-navigation.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-handle-keyboard-navigation.ts
@@ -4,12 +4,12 @@ import { getOptions } from '../utils';
 import { useFocusOptionByIndex } from './use-focus-option-by-index';
 import { useGetInitialFocusIndex } from './use-get-initial-focus-index';
 
-export const useHandleKeyboardNavigation = ({
+export const useHandleKeyboardNavigation = <T extends HTMLElement>({
   optionsRef,
   focusedIndex,
   setFocusedIndex,
 }: {
-  optionsRef: React.RefObject<HTMLUListElement | null>;
+  optionsRef: React.RefObject<T | null>;
   focusedIndex?: number;
   setFocusedIndex: (index: number) => void;
 }) => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-options.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-options.ts
index aaf62df1f1..a1f41a28db 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-options.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/hooks/use-options.ts
@@ -3,21 +3,17 @@ import React from 'react';
 import { getInitialOption, getOptions } from '../utils';
 import { useHandleKeyboardNavigation } from './use-handle-keyboard-navigation';
 
-export type UseOptionsProps = {
-  optionsRef: React.RefObject<HTMLUListElement | null>;
+export type UseOptionsProps<T extends HTMLElement> = {
+  optionsRef: React.RefObject<T | null>;
   focusedIndex?: number;
   setFocusedIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 };
 
-export type UseOptionsFieldState = {
-  tabIndex: number;
-  handleFocus: (event: React.FocusEvent) => void;
-  optionsRef: React.RefObject<HTMLUListElement | null>;
-  handleKeyboardNavigation: (event: React.KeyboardEvent) => void;
-  handleBlur: (event: React.FocusEvent<HTMLUListElement>) => void;
-};
-
-export function useOptions({ optionsRef, focusedIndex, setFocusedIndex }: UseOptionsProps) {
+export function useOptions<T extends HTMLElement>({
+  optionsRef,
+  focusedIndex,
+  setFocusedIndex,
+}: UseOptionsProps<T>) {
   const [tabIndex, setTabIndex] = React.useState<number>(0);
   const handleFocus = React.useCallback(
     (event: React.FocusEvent) => {
@@ -42,7 +38,7 @@ export function useOptions({ optionsRef, focusedIndex, setFocusedIndex }: UseOpt
   });
 
   const handleBlur = React.useCallback(
-    (event: React.FocusEvent<HTMLUListElement>) => {
+    (event: React.FocusEvent<T>) => {
       const container = optionsRef.current;
       const nextFocus = event.relatedTarget as Node | null;