| 38 | * not with a mouse, touch, or other input methods. |
| 39 | */ |
| 40 | export function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria { |
| 41 | let {autoFocus = false, isTextInput, within} = props; |
| 42 | let state = useRef({ |
| 43 | isFocused: false, |
| 44 | isFocusVisible: autoFocus || isFocusVisible() |
| 45 | }); |
| 46 | let [isFocused, setFocused] = useState(false); |
| 47 | let [isFocusVisibleState, setFocusVisible] = useState( |
| 48 | // oxlint-disable-next-line react/react-compiler |
| 49 | () => state.current.isFocused && state.current.isFocusVisible |
| 50 | ); |
| 51 | |
| 52 | let updateState = useCallback( |
| 53 | () => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), |
| 54 | [] |
| 55 | ); |
| 56 | |
| 57 | let onFocusChange = useCallback( |
| 58 | isFocused => { |
| 59 | state.current.isFocused = isFocused; |
| 60 | state.current.isFocusVisible = isFocusVisible(); |
| 61 | setFocused(isFocused); |
| 62 | updateState(); |
| 63 | }, |
| 64 | [updateState] |
| 65 | ); |
| 66 | |
| 67 | useFocusVisibleListener( |
| 68 | isFocusVisible => { |
| 69 | state.current.isFocusVisible = isFocusVisible; |
| 70 | updateState(); |
| 71 | }, |
| 72 | [isTextInput, isFocused], |
| 73 | {enabled: isFocused, isTextInput} |
| 74 | ); |
| 75 | |
| 76 | let {focusProps} = useFocus({ |
| 77 | isDisabled: within, |
| 78 | onFocusChange |
| 79 | }); |
| 80 | |
| 81 | let {focusWithinProps} = useFocusWithin({ |
| 82 | isDisabled: !within, |
| 83 | onFocusWithinChange: onFocusChange |
| 84 | }); |
| 85 | |
| 86 | return { |
| 87 | isFocused, |
| 88 | isFocusVisible: isFocusVisibleState, |
| 89 | focusProps: within ? focusWithinProps : focusProps |
| 90 | }; |
| 91 | } |