1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import {isMac, isVirtualClick} from '@react-aria/utils';
|
19 | import {useEffect, useState} from 'react';
|
20 |
|
21 | export type Modality = 'keyboard' | 'pointer' | 'virtual';
|
22 | type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent;
|
23 | type Handler = (modality: Modality, e: HandlerEvent) => void;
|
24 | export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
25 | export interface FocusVisibleProps {
|
26 |
|
27 | isTextInput?: boolean,
|
28 |
|
29 | autoFocus?: boolean
|
30 | }
|
31 |
|
32 | export interface FocusVisibleResult {
|
33 |
|
34 | isFocusVisible: boolean
|
35 | }
|
36 |
|
37 | let currentModality = null;
|
38 | let changeHandlers = new Set<Handler>();
|
39 | let hasSetupGlobalListeners = false;
|
40 | let hasEventBeforeFocus = false;
|
41 | let hasBlurredWindowRecently = false;
|
42 |
|
43 |
|
44 | const FOCUS_VISIBLE_INPUT_KEYS = {
|
45 | Tab: true,
|
46 | Escape: true
|
47 | };
|
48 |
|
49 | function triggerChangeHandlers(modality: Modality, e: HandlerEvent) {
|
50 | for (let handler of changeHandlers) {
|
51 | handler(modality, e);
|
52 | }
|
53 | }
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | function isValidKey(e: KeyboardEvent) {
|
59 |
|
60 | return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
|
61 | }
|
62 |
|
63 |
|
64 | function handleKeyboardEvent(e: KeyboardEvent) {
|
65 | hasEventBeforeFocus = true;
|
66 | if (isValidKey(e)) {
|
67 | currentModality = 'keyboard';
|
68 | triggerChangeHandlers('keyboard', e);
|
69 | }
|
70 | }
|
71 |
|
72 | function handlePointerEvent(e: PointerEvent | MouseEvent) {
|
73 | currentModality = 'pointer';
|
74 | if (e.type === 'mousedown' || e.type === 'pointerdown') {
|
75 | hasEventBeforeFocus = true;
|
76 | triggerChangeHandlers('pointer', e);
|
77 | }
|
78 | }
|
79 |
|
80 | function handleClickEvent(e: MouseEvent) {
|
81 | if (isVirtualClick(e)) {
|
82 | hasEventBeforeFocus = true;
|
83 | currentModality = 'virtual';
|
84 | }
|
85 | }
|
86 |
|
87 | function handleFocusEvent(e: FocusEvent) {
|
88 |
|
89 |
|
90 |
|
91 | if (e.target === window || e.target === document) {
|
92 | return;
|
93 | }
|
94 |
|
95 |
|
96 |
|
97 | if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
|
98 | currentModality = 'virtual';
|
99 | triggerChangeHandlers('virtual', e);
|
100 | }
|
101 |
|
102 | hasEventBeforeFocus = false;
|
103 | hasBlurredWindowRecently = false;
|
104 | }
|
105 |
|
106 | function handleWindowBlur() {
|
107 |
|
108 |
|
109 | hasEventBeforeFocus = false;
|
110 | hasBlurredWindowRecently = true;
|
111 | }
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | function setupGlobalFocusEvents() {
|
117 | if (typeof window === 'undefined' || hasSetupGlobalListeners) {
|
118 | return;
|
119 | }
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | let focus = HTMLElement.prototype.focus;
|
126 | HTMLElement.prototype.focus = function () {
|
127 | hasEventBeforeFocus = true;
|
128 | focus.apply(this, arguments);
|
129 | };
|
130 |
|
131 | document.addEventListener('keydown', handleKeyboardEvent, true);
|
132 | document.addEventListener('keyup', handleKeyboardEvent, true);
|
133 | document.addEventListener('click', handleClickEvent, true);
|
134 |
|
135 |
|
136 |
|
137 | window.addEventListener('focus', handleFocusEvent, true);
|
138 | window.addEventListener('blur', handleWindowBlur, false);
|
139 |
|
140 | if (typeof PointerEvent !== 'undefined') {
|
141 | document.addEventListener('pointerdown', handlePointerEvent, true);
|
142 | document.addEventListener('pointermove', handlePointerEvent, true);
|
143 | document.addEventListener('pointerup', handlePointerEvent, true);
|
144 | } else {
|
145 | document.addEventListener('mousedown', handlePointerEvent, true);
|
146 | document.addEventListener('mousemove', handlePointerEvent, true);
|
147 | document.addEventListener('mouseup', handlePointerEvent, true);
|
148 | }
|
149 |
|
150 | hasSetupGlobalListeners = true;
|
151 | }
|
152 |
|
153 | if (typeof document !== 'undefined') {
|
154 | if (document.readyState !== 'loading') {
|
155 | setupGlobalFocusEvents();
|
156 | } else {
|
157 | document.addEventListener('DOMContentLoaded', setupGlobalFocusEvents);
|
158 | }
|
159 | }
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | export function isFocusVisible(): boolean {
|
165 | return currentModality !== 'pointer';
|
166 | }
|
167 |
|
168 | export function getInteractionModality(): Modality {
|
169 | return currentModality;
|
170 | }
|
171 |
|
172 | export function setInteractionModality(modality: Modality) {
|
173 | currentModality = modality;
|
174 | triggerChangeHandlers(modality, null);
|
175 | }
|
176 |
|
177 |
|
178 |
|
179 |
|
180 | export function useInteractionModality(): Modality {
|
181 | setupGlobalFocusEvents();
|
182 |
|
183 | let [modality, setModality] = useState(currentModality);
|
184 | useEffect(() => {
|
185 | let handler = () => {
|
186 | setModality(currentModality);
|
187 | };
|
188 |
|
189 | changeHandlers.add(handler);
|
190 | return () => {
|
191 | changeHandlers.delete(handler);
|
192 | };
|
193 | }, []);
|
194 |
|
195 | return modality;
|
196 | }
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 | function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
|
203 | return !(isTextInput && modality === 'keyboard' && e instanceof KeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
|
204 | }
|
205 |
|
206 |
|
207 |
|
208 |
|
209 | export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {
|
210 | let {isTextInput, autoFocus} = props;
|
211 | let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());
|
212 | useFocusVisibleListener((isFocusVisible) => {
|
213 | setFocusVisible(isFocusVisible);
|
214 | }, [isTextInput], {isTextInput});
|
215 |
|
216 | return {isFocusVisible: isFocusVisibleState};
|
217 | }
|
218 |
|
219 |
|
220 |
|
221 |
|
222 | export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {
|
223 | setupGlobalFocusEvents();
|
224 |
|
225 | useEffect(() => {
|
226 | let handler = (modality: Modality, e: HandlerEvent) => {
|
227 | if (!isKeyboardFocusEvent(opts?.isTextInput, modality, e)) {
|
228 | return;
|
229 | }
|
230 | fn(isFocusVisible());
|
231 | };
|
232 | changeHandlers.add(handler);
|
233 | return () => {
|
234 | changeHandlers.delete(handler);
|
235 | };
|
236 |
|
237 | }, deps);
|
238 | }
|