1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.teardown = teardown;
|
9 | exports.default = useIsFocusVisible;
|
10 |
|
11 | var React = _interopRequireWildcard(require("react"));
|
12 |
|
13 | var ReactDOM = _interopRequireWildcard(require("react-dom"));
|
14 |
|
15 |
|
16 | var hadKeyboardEvent = true;
|
17 | var hadFocusVisibleRecently = false;
|
18 | var hadFocusVisibleRecentlyTimeout = null;
|
19 | var inputTypesWhitelist = {
|
20 | text: true,
|
21 | search: true,
|
22 | url: true,
|
23 | tel: true,
|
24 | email: true,
|
25 | password: true,
|
26 | number: true,
|
27 | date: true,
|
28 | month: true,
|
29 | week: true,
|
30 | time: true,
|
31 | datetime: true,
|
32 | 'datetime-local': true
|
33 | };
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | function focusTriggersKeyboardModality(node) {
|
43 | var type = node.type,
|
44 | tagName = node.tagName;
|
45 |
|
46 | if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
47 | return true;
|
48 | }
|
49 |
|
50 | if (tagName === 'TEXTAREA' && !node.readOnly) {
|
51 | return true;
|
52 | }
|
53 |
|
54 | if (node.isContentEditable) {
|
55 | return true;
|
56 | }
|
57 |
|
58 | return false;
|
59 | }
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | function handleKeyDown(event) {
|
70 | if (event.metaKey || event.altKey || event.ctrlKey) {
|
71 | return;
|
72 | }
|
73 |
|
74 | hadKeyboardEvent = true;
|
75 | }
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 | function handlePointerDown() {
|
86 | hadKeyboardEvent = false;
|
87 | }
|
88 |
|
89 | function handleVisibilityChange() {
|
90 | if (this.visibilityState === 'hidden') {
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | if (hadFocusVisibleRecently) {
|
96 | hadKeyboardEvent = true;
|
97 | }
|
98 | }
|
99 | }
|
100 |
|
101 | function prepare(doc) {
|
102 | doc.addEventListener('keydown', handleKeyDown, true);
|
103 | doc.addEventListener('mousedown', handlePointerDown, true);
|
104 | doc.addEventListener('pointerdown', handlePointerDown, true);
|
105 | doc.addEventListener('touchstart', handlePointerDown, true);
|
106 | doc.addEventListener('visibilitychange', handleVisibilityChange, true);
|
107 | }
|
108 |
|
109 | function teardown(doc) {
|
110 | doc.removeEventListener('keydown', handleKeyDown, true);
|
111 | doc.removeEventListener('mousedown', handlePointerDown, true);
|
112 | doc.removeEventListener('pointerdown', handlePointerDown, true);
|
113 | doc.removeEventListener('touchstart', handlePointerDown, true);
|
114 | doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
|
115 | }
|
116 |
|
117 | function isFocusVisible(event) {
|
118 | var target = event.target;
|
119 |
|
120 | try {
|
121 | return target.matches(':focus-visible');
|
122 | } catch (error) {}
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 | return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
131 | }
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | function handleBlurVisible() {
|
138 |
|
139 |
|
140 |
|
141 |
|
142 | hadFocusVisibleRecently = true;
|
143 | window.clearTimeout(hadFocusVisibleRecentlyTimeout);
|
144 | hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
|
145 | hadFocusVisibleRecently = false;
|
146 | }, 100);
|
147 | }
|
148 |
|
149 | function useIsFocusVisible() {
|
150 | var ref = React.useCallback(function (instance) {
|
151 | var node = ReactDOM.findDOMNode(instance);
|
152 |
|
153 | if (node != null) {
|
154 | prepare(node.ownerDocument);
|
155 | }
|
156 | }, []);
|
157 |
|
158 | if (process.env.NODE_ENV !== 'production') {
|
159 |
|
160 | React.useDebugValue(isFocusVisible);
|
161 | }
|
162 |
|
163 | return {
|
164 | isFocusVisible: isFocusVisible,
|
165 | onBlurVisible: handleBlurVisible,
|
166 | ref: ref
|
167 | };
|
168 | } |
\ | No newline at end of file |