MCPcopy Create free account
hub / github.com/adobe/react-spectrum / useFocusRing

Function useFocusRing

packages/react-aria/src/focus/useFocusRing.ts:40–91  ·  view source on GitHub ↗
(props: AriaFocusRingProps = {})

Source from the content-addressed store, hash-verified

38 * not with a mouse, touch, or other input methods.
39 */
40export 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}

Callers 15

ButtonExampleFunction · 0.90
FocusRingFunction · 0.90
MyButtonFunction · 0.90
TableColumnHeaderFunction · 0.90
TableRowFunction · 0.90
TableCellFunction · 0.90
ButtonFunction · 0.90
ResizerFunction · 0.90
ResizableTableRowFunction · 0.90
ResizableTableCellFunction · 0.90
TableColumnHeaderFunction · 0.90
TableRowFunction · 0.90

Calls 5

isFocusVisibleFunction · 0.90
useFocusVisibleListenerFunction · 0.90
useFocusFunction · 0.90
useFocusWithinFunction · 0.90
setFocusedFunction · 0.50

Tested by 1

ButtonExampleFunction · 0.72