Function useFocusRing

packages/react-aria/src/focus/useFocusRing.ts:40–90

(props: AriaFocusRingProps = {})

 * not with a mouse, touch, or other input methods.
 */
export function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria {
  let {autoFocus = false, isTextInput, within} = props;
  let state = useRef({
    isFocused: false,
    isFocusVisible: autoFocus || isFocusVisible()
  });
  let [isFocused, setFocused] = useState(false);
  let [isFocusVisibleState, setFocusVisible] = useState(
    () => state.current.isFocused && state.current.isFocusVisible
  );

  let updateState = useCallback(
    () => setFocusVisible(state.current.isFocused && state.current.isFocusVisible),
    []
  );

  let onFocusChange = useCallback(
    isFocused => {
      state.current.isFocused = isFocused;
      state.current.isFocusVisible = isFocusVisible();
      setFocused(isFocused);
      updateState();
    },
    [updateState]
  );

  useFocusVisibleListener(
    isFocusVisible => {
      state.current.isFocusVisible = isFocusVisible;
      updateState();
    },
    [isTextInput, isFocused],
    {enabled: isFocused, isTextInput}
  );

  let {focusProps} = useFocus({
    isDisabled: within,
    onFocusChange
  });

  let {focusWithinProps} = useFocusWithin({
    isDisabled: !within,
    onFocusWithinChange: onFocusChange
  });

  return {
    isFocused,
    isFocusVisible: isFocusVisibleState,
    focusProps: within ? focusWithinProps : focusProps
  };
}