Function useFocusZone

packages/react/src/hooks/useFocusZone.ts:28–67

(
  settings: FocusZoneHookSettings = {},
  dependencies: React.DependencyList = [],
)

}

export function useFocusZone(
  settings: FocusZoneHookSettings = {},
  dependencies: React.DependencyList = [],
): {containerRef: React.RefObject<HTMLElement>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
  const containerRef = useProvidedRefOrCreate(settings.containerRef)
  const useActiveDescendant = !!settings.activeDescendantFocus
  const passedActiveDescendantRef =
    typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus
      ? undefined
      : settings.activeDescendantFocus
  const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef)
  const disabled = settings.disabled
  const abortController = React.useRef<AbortController>()

  useEffect(
    () => {
      if (
        containerRef.current instanceof HTMLElement &&
        (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)
      ) {
        if (!disabled) {
          const vanillaSettings: FocusZoneSettings = {
            ...settings,
            activeDescendantControl: activeDescendantControlRef.current ?? undefined,
          }
          abortController.current = focusZone(containerRef.current, vanillaSettings)
          return () => {
            abortController.current?.abort()
          }
        } else {
          abortController.current?.abort()
        }
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [disabled, ...dependencies],
  )

  return {containerRef, activeDescendantControlRef}
}