@ark-ui/react/dist/providers/interaction/use-focus-visible.js

A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.

'use client';
import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
import { useCallback, useSyncExternalStore } from 'react';
import { useEnvironmentContext } from '../environment/use-environment-context.js';

function useFocusVisible(props = {}) {
  const { isTextInput, autoFocus } = props;
  const { getRootNode } = useEnvironmentContext();
  const subscribe = useCallback(
    (onStoreChange) => trackFocusVisible({
      root: getRootNode(),
      isTextInput,
      autoFocus,
      onChange: onStoreChange
    }),
    [getRootNode, isTextInput, autoFocus]
  );
  const getSnapshot = useCallback(() => autoFocus || isFocusVisible(), [autoFocus]);
  return useSyncExternalStore(subscribe, getSnapshot, () => false);
}

export { useFocusVisible };