packages/components/hooks/useContactFocus.tsx

   1 import type { MutableRefObject } from 'react';
   2 import { useEffect, useRef, useState } from 'react';
   3
   4 import { useHandler } from './useHandler';
   5
   6 export interface ContactFocusContext {
   7     elementIDs: string[];
   8     listRef: MutableRefObject<HTMLElement | null>;
   9 }
  10
  11 export const useContactFocus = ({ elementIDs, listRef }: ContactFocusContext) => {
  12     const [focusIndex, setFocusIndex] = useState<number>();
  13
  14     const getFocusedId = () => (focusIndex !== undefined ? elementIDs[focusIndex] : undefined);
  15
  16     const focusedIDRef = useRef(getFocusedId());
  17
  18     const handleFocus = useHandler((index) => {
  19         setFocusIndex(index);
  20     });
  21
  22     const focusOnElementByIndex = (index: number) => {
  23         const element = listRef.current?.querySelector(
  24             `[data-shortcut-target="contact-container"][data-element-id="${elementIDs[index]}"]`
  25         ) as HTMLElement;
  26         element?.focus();
  27     };
  28
  29     useEffect(() => {
  30         if (focusIndex !== undefined) {
  31             focusOnElementByIndex(focusIndex);
  32         }
  33
  34         focusedIDRef.current = getFocusedId();
  35     }, [focusIndex]);
  36
  37     return {
  38         focusIndex,
  39         getFocusedId,
  40         setFocusIndex,
  41         handleFocus,
  42     };
  43 };