@react-aria/interactions 3.10.0 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +130 -127
- package/dist/main.js.map +1 -1
- package/dist/module.js +131 -128
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/useFocusVisible.ts +1 -2
- package/src/usePress.ts +46 -34
- package/src/utils.ts +0 -20
package/dist/main.js
CHANGED
|
@@ -81,106 +81,6 @@ function $f7e14e656343df57$export$b0d6fa1ab32e3295(target) {
|
|
|
81
81
|
|
|
82
82
|
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
function $625cf83917e112ad$export$60278871457622de(event) {
|
|
86
|
-
// JAWS/NVDA with Firefox.
|
|
87
|
-
if (event.mozInputSource === 0 && event.isTrusted) return true;
|
|
88
|
-
return event.detail === 0 && !event.pointerType;
|
|
89
|
-
}
|
|
90
|
-
class $625cf83917e112ad$export$905e7fc544a71f36 {
|
|
91
|
-
isDefaultPrevented() {
|
|
92
|
-
return this.nativeEvent.defaultPrevented;
|
|
93
|
-
}
|
|
94
|
-
preventDefault() {
|
|
95
|
-
this.defaultPrevented = true;
|
|
96
|
-
this.nativeEvent.preventDefault();
|
|
97
|
-
}
|
|
98
|
-
stopPropagation() {
|
|
99
|
-
this.nativeEvent.stopPropagation();
|
|
100
|
-
this.isPropagationStopped = ()=>true
|
|
101
|
-
;
|
|
102
|
-
}
|
|
103
|
-
isPropagationStopped() {
|
|
104
|
-
return false;
|
|
105
|
-
}
|
|
106
|
-
persist() {
|
|
107
|
-
}
|
|
108
|
-
constructor(type, nativeEvent){
|
|
109
|
-
this.nativeEvent = nativeEvent;
|
|
110
|
-
this.target = nativeEvent.target;
|
|
111
|
-
this.currentTarget = nativeEvent.currentTarget;
|
|
112
|
-
this.relatedTarget = nativeEvent.relatedTarget;
|
|
113
|
-
this.bubbles = nativeEvent.bubbles;
|
|
114
|
-
this.cancelable = nativeEvent.cancelable;
|
|
115
|
-
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
116
|
-
this.eventPhase = nativeEvent.eventPhase;
|
|
117
|
-
this.isTrusted = nativeEvent.isTrusted;
|
|
118
|
-
this.timeStamp = nativeEvent.timeStamp;
|
|
119
|
-
this.type = type;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
function $625cf83917e112ad$export$715c682d09d639cc(onBlur) {
|
|
123
|
-
let stateRef = $goTMa$react.useRef({
|
|
124
|
-
isFocused: false,
|
|
125
|
-
onBlur: onBlur,
|
|
126
|
-
observer: null
|
|
127
|
-
});
|
|
128
|
-
stateRef.current.onBlur = onBlur;
|
|
129
|
-
// Clean up MutationObserver on unmount. See below.
|
|
130
|
-
// eslint-disable-next-line arrow-body-style
|
|
131
|
-
$goTMa$reactariautils.useLayoutEffect(()=>{
|
|
132
|
-
const state = stateRef.current;
|
|
133
|
-
return ()=>{
|
|
134
|
-
if (state.observer) {
|
|
135
|
-
state.observer.disconnect();
|
|
136
|
-
state.observer = null;
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
}, []);
|
|
140
|
-
// This function is called during a React onFocus event.
|
|
141
|
-
return $goTMa$react.useCallback((e1)=>{
|
|
142
|
-
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
143
|
-
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
144
|
-
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
145
|
-
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
146
|
-
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
147
|
-
stateRef.current.isFocused = true;
|
|
148
|
-
let target = e1.target;
|
|
149
|
-
let onBlurHandler = (e)=>{
|
|
150
|
-
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
151
|
-
_current, ref;
|
|
152
|
-
stateRef.current.isFocused = false;
|
|
153
|
-
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $625cf83917e112ad$export$905e7fc544a71f36('blur', e));
|
|
154
|
-
// We no longer need the MutationObserver once the target is blurred.
|
|
155
|
-
if (stateRef.current.observer) {
|
|
156
|
-
stateRef.current.observer.disconnect();
|
|
157
|
-
stateRef.current.observer = null;
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
target.addEventListener('focusout', onBlurHandler, {
|
|
161
|
-
once: true
|
|
162
|
-
});
|
|
163
|
-
stateRef.current.observer = new MutationObserver(()=>{
|
|
164
|
-
if (stateRef.current.isFocused && target.disabled) {
|
|
165
|
-
stateRef.current.observer.disconnect();
|
|
166
|
-
target.dispatchEvent(new FocusEvent('blur'));
|
|
167
|
-
target.dispatchEvent(new FocusEvent('focusout', {
|
|
168
|
-
bubbles: true
|
|
169
|
-
}));
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
stateRef.current.observer.observe(target, {
|
|
173
|
-
attributes: true,
|
|
174
|
-
attributeFilter: [
|
|
175
|
-
'disabled'
|
|
176
|
-
]
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
}, []);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
84
|
const $01d3f539e91688c8$export$5165eccb35aaadb5 = ($parcel$interopDefault($goTMa$react)).createContext(null);
|
|
185
85
|
$01d3f539e91688c8$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
|
|
186
86
|
|
|
@@ -292,8 +192,8 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
292
192
|
};
|
|
293
193
|
let pressProps = {
|
|
294
194
|
onKeyDown (e) {
|
|
295
|
-
if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target)) {
|
|
296
|
-
if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target)) e.preventDefault();
|
|
195
|
+
if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
|
|
196
|
+
if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
|
|
297
197
|
e.stopPropagation();
|
|
298
198
|
// If the event is repeating, it may have started on a different element
|
|
299
199
|
// after which focus moved to the current element. Ignore these events and
|
|
@@ -306,10 +206,13 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
306
206
|
// instead of the same element where the key down event occurred.
|
|
307
207
|
addGlobalListener(document, 'keyup', onKeyUp, false);
|
|
308
208
|
}
|
|
309
|
-
}
|
|
209
|
+
} else if (e.key === 'Enter' && $0294ea432cd92340$var$isHTMLAnchorLink(e.currentTarget)) // If the target is a link, we won't have handled this above because we want the default
|
|
210
|
+
// browser behavior to open the link when pressing Enter. But we still need to prevent
|
|
211
|
+
// default so that elements above do not also handle it (e.g. table row).
|
|
212
|
+
e.stopPropagation();
|
|
310
213
|
},
|
|
311
214
|
onKeyUp (e) {
|
|
312
|
-
if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target)) triggerPressUp($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard');
|
|
215
|
+
if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target)) triggerPressUp($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard');
|
|
313
216
|
},
|
|
314
217
|
onClick (e) {
|
|
315
218
|
if (e && !e.currentTarget.contains(e.target)) return;
|
|
@@ -318,7 +221,7 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
318
221
|
if (isDisabled1) e.preventDefault();
|
|
319
222
|
// If triggered from a screen reader or by using element.click(),
|
|
320
223
|
// trigger as if it were a keyboard click.
|
|
321
|
-
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $
|
|
224
|
+
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $goTMa$reactariautils.isVirtualClick(e.nativeEvent))) {
|
|
322
225
|
// Ensure the element receives focus (VoiceOver on iOS does not do this)
|
|
323
226
|
if (!isDisabled1 && !preventFocusOnPress) $goTMa$reactariautils.focusWithoutScrolling(e.currentTarget);
|
|
324
227
|
triggerPressStart(e, 'virtual');
|
|
@@ -331,8 +234,8 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
331
234
|
}
|
|
332
235
|
};
|
|
333
236
|
let onKeyUp = (e)=>{
|
|
334
|
-
if (state.isPressed && $0294ea432cd92340$var$isValidKeyboardEvent(e)) {
|
|
335
|
-
if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target)) e.preventDefault();
|
|
237
|
+
if (state.isPressed && $0294ea432cd92340$var$isValidKeyboardEvent(e, state.target)) {
|
|
238
|
+
if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
|
|
336
239
|
e.stopPropagation();
|
|
337
240
|
state.isPressed = false;
|
|
338
241
|
let target = e.target;
|
|
@@ -340,7 +243,7 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
340
243
|
removeAllGlobalListeners();
|
|
341
244
|
// If the target is a link, trigger the click method to open the URL,
|
|
342
245
|
// but defer triggering pressEnd until onClick event handler.
|
|
343
|
-
if (state.target instanceof HTMLElement &&
|
|
246
|
+
if (state.target instanceof HTMLElement && state.target.contains(target) && ($0294ea432cd92340$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) state.target.click();
|
|
344
247
|
}
|
|
345
248
|
};
|
|
346
249
|
if (typeof PointerEvent !== 'undefined') {
|
|
@@ -351,7 +254,7 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
351
254
|
// Ignore and let the onClick handler take care of it instead.
|
|
352
255
|
// https://bugs.webkit.org/show_bug.cgi?id=222627
|
|
353
256
|
// https://bugs.webkit.org/show_bug.cgi?id=223202
|
|
354
|
-
if ($
|
|
257
|
+
if ($goTMa$reactariautils.isVirtualPointerEvent(e.nativeEvent)) {
|
|
355
258
|
state.pointerType = 'virtual';
|
|
356
259
|
return;
|
|
357
260
|
}
|
|
@@ -439,7 +342,7 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
439
342
|
state.isPressed = true;
|
|
440
343
|
state.isOverTarget = true;
|
|
441
344
|
state.target = e.currentTarget;
|
|
442
|
-
state.pointerType = $
|
|
345
|
+
state.pointerType = $goTMa$reactariautils.isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse';
|
|
443
346
|
if (!isDisabled1 && !preventFocusOnPress) $goTMa$reactariautils.focusWithoutScrolling(e.currentTarget);
|
|
444
347
|
triggerPressStart(e, state.pointerType);
|
|
445
348
|
addGlobalListener(document, 'mouseup', onMouseUp, false);
|
|
@@ -572,14 +475,13 @@ function $0294ea432cd92340$export$45712eceda6fad21(props) {
|
|
|
572
475
|
function $0294ea432cd92340$var$isHTMLAnchorLink(target) {
|
|
573
476
|
return target.tagName === 'A' && target.hasAttribute('href');
|
|
574
477
|
}
|
|
575
|
-
function $0294ea432cd92340$var$isValidKeyboardEvent(event) {
|
|
576
|
-
const { key: key , code: code
|
|
577
|
-
const element =
|
|
578
|
-
const { tagName: tagName , isContentEditable: isContentEditable } = element;
|
|
478
|
+
function $0294ea432cd92340$var$isValidKeyboardEvent(event, currentTarget) {
|
|
479
|
+
const { key: key , code: code } = event;
|
|
480
|
+
const element = currentTarget;
|
|
579
481
|
const role = element.getAttribute('role');
|
|
580
482
|
// Accessibility for keyboards. Space and Enter only.
|
|
581
483
|
// "Spacebar" is for IE 11
|
|
582
|
-
return (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
|
|
484
|
+
return (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') && !(element instanceof HTMLInputElement && !$0294ea432cd92340$var$isValidInputKey(element, key) || element instanceof HTMLTextAreaElement || element.isContentEditable) && (!$0294ea432cd92340$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
|
|
583
485
|
!(role === 'link' && key !== 'Enter');
|
|
584
486
|
}
|
|
585
487
|
function $0294ea432cd92340$var$getTouchFromEvent(event) {
|
|
@@ -630,17 +532,25 @@ function $0294ea432cd92340$var$shouldPreventDefault(target) {
|
|
|
630
532
|
// We cannot prevent default if the target is a draggable element.
|
|
631
533
|
return !(target instanceof HTMLElement) || !target.draggable;
|
|
632
534
|
}
|
|
633
|
-
function $0294ea432cd92340$var$shouldPreventDefaultKeyboard(target) {
|
|
634
|
-
|
|
535
|
+
function $0294ea432cd92340$var$shouldPreventDefaultKeyboard(target, key) {
|
|
536
|
+
if (target instanceof HTMLInputElement) return !$0294ea432cd92340$var$isValidInputKey(target, key);
|
|
537
|
+
if (target instanceof HTMLButtonElement) return target.type !== 'submit';
|
|
538
|
+
return true;
|
|
635
539
|
}
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
540
|
+
const $0294ea432cd92340$var$nonTextInputTypes = new Set([
|
|
541
|
+
'checkbox',
|
|
542
|
+
'radio',
|
|
543
|
+
'range',
|
|
544
|
+
'color',
|
|
545
|
+
'file',
|
|
546
|
+
'image',
|
|
547
|
+
'button',
|
|
548
|
+
'submit',
|
|
549
|
+
'reset'
|
|
550
|
+
]);
|
|
551
|
+
function $0294ea432cd92340$var$isValidInputKey(target, key) {
|
|
552
|
+
// Only space should toggle checkboxes and radios, not enter.
|
|
553
|
+
return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : $0294ea432cd92340$var$nonTextInputTypes.has(target.type);
|
|
644
554
|
}
|
|
645
555
|
|
|
646
556
|
|
|
@@ -688,6 +598,100 @@ const $3596bae48579386f$export$3351871ee4b288b8 = /*#__PURE__*/ ($parcel$interop
|
|
|
688
598
|
|
|
689
599
|
|
|
690
600
|
|
|
601
|
+
|
|
602
|
+
class $625cf83917e112ad$export$905e7fc544a71f36 {
|
|
603
|
+
isDefaultPrevented() {
|
|
604
|
+
return this.nativeEvent.defaultPrevented;
|
|
605
|
+
}
|
|
606
|
+
preventDefault() {
|
|
607
|
+
this.defaultPrevented = true;
|
|
608
|
+
this.nativeEvent.preventDefault();
|
|
609
|
+
}
|
|
610
|
+
stopPropagation() {
|
|
611
|
+
this.nativeEvent.stopPropagation();
|
|
612
|
+
this.isPropagationStopped = ()=>true
|
|
613
|
+
;
|
|
614
|
+
}
|
|
615
|
+
isPropagationStopped() {
|
|
616
|
+
return false;
|
|
617
|
+
}
|
|
618
|
+
persist() {
|
|
619
|
+
}
|
|
620
|
+
constructor(type, nativeEvent){
|
|
621
|
+
this.nativeEvent = nativeEvent;
|
|
622
|
+
this.target = nativeEvent.target;
|
|
623
|
+
this.currentTarget = nativeEvent.currentTarget;
|
|
624
|
+
this.relatedTarget = nativeEvent.relatedTarget;
|
|
625
|
+
this.bubbles = nativeEvent.bubbles;
|
|
626
|
+
this.cancelable = nativeEvent.cancelable;
|
|
627
|
+
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
628
|
+
this.eventPhase = nativeEvent.eventPhase;
|
|
629
|
+
this.isTrusted = nativeEvent.isTrusted;
|
|
630
|
+
this.timeStamp = nativeEvent.timeStamp;
|
|
631
|
+
this.type = type;
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
function $625cf83917e112ad$export$715c682d09d639cc(onBlur) {
|
|
635
|
+
let stateRef = $goTMa$react.useRef({
|
|
636
|
+
isFocused: false,
|
|
637
|
+
onBlur: onBlur,
|
|
638
|
+
observer: null
|
|
639
|
+
});
|
|
640
|
+
stateRef.current.onBlur = onBlur;
|
|
641
|
+
// Clean up MutationObserver on unmount. See below.
|
|
642
|
+
// eslint-disable-next-line arrow-body-style
|
|
643
|
+
$goTMa$reactariautils.useLayoutEffect(()=>{
|
|
644
|
+
const state = stateRef.current;
|
|
645
|
+
return ()=>{
|
|
646
|
+
if (state.observer) {
|
|
647
|
+
state.observer.disconnect();
|
|
648
|
+
state.observer = null;
|
|
649
|
+
}
|
|
650
|
+
};
|
|
651
|
+
}, []);
|
|
652
|
+
// This function is called during a React onFocus event.
|
|
653
|
+
return $goTMa$react.useCallback((e1)=>{
|
|
654
|
+
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
655
|
+
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
656
|
+
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
657
|
+
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
658
|
+
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
659
|
+
stateRef.current.isFocused = true;
|
|
660
|
+
let target = e1.target;
|
|
661
|
+
let onBlurHandler = (e)=>{
|
|
662
|
+
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
663
|
+
_current, ref;
|
|
664
|
+
stateRef.current.isFocused = false;
|
|
665
|
+
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $625cf83917e112ad$export$905e7fc544a71f36('blur', e));
|
|
666
|
+
// We no longer need the MutationObserver once the target is blurred.
|
|
667
|
+
if (stateRef.current.observer) {
|
|
668
|
+
stateRef.current.observer.disconnect();
|
|
669
|
+
stateRef.current.observer = null;
|
|
670
|
+
}
|
|
671
|
+
};
|
|
672
|
+
target.addEventListener('focusout', onBlurHandler, {
|
|
673
|
+
once: true
|
|
674
|
+
});
|
|
675
|
+
stateRef.current.observer = new MutationObserver(()=>{
|
|
676
|
+
if (stateRef.current.isFocused && target.disabled) {
|
|
677
|
+
stateRef.current.observer.disconnect();
|
|
678
|
+
target.dispatchEvent(new FocusEvent('blur'));
|
|
679
|
+
target.dispatchEvent(new FocusEvent('focusout', {
|
|
680
|
+
bubbles: true
|
|
681
|
+
}));
|
|
682
|
+
}
|
|
683
|
+
});
|
|
684
|
+
stateRef.current.observer.observe(target, {
|
|
685
|
+
attributes: true,
|
|
686
|
+
attributeFilter: [
|
|
687
|
+
'disabled'
|
|
688
|
+
]
|
|
689
|
+
});
|
|
690
|
+
}
|
|
691
|
+
}, []);
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
|
|
691
695
|
function $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6(props) {
|
|
692
696
|
let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange } = props;
|
|
693
697
|
const onBlur = $goTMa$react.useCallback((e)=>{
|
|
@@ -723,7 +727,6 @@ function $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6(props) {
|
|
|
723
727
|
|
|
724
728
|
|
|
725
729
|
|
|
726
|
-
|
|
727
730
|
let $e77252a287ef94ab$var$currentModality = null;
|
|
728
731
|
let $e77252a287ef94ab$var$changeHandlers = new Set();
|
|
729
732
|
let $e77252a287ef94ab$var$hasSetupGlobalListeners = false;
|
|
@@ -758,7 +761,7 @@ function $e77252a287ef94ab$var$handlePointerEvent(e) {
|
|
|
758
761
|
}
|
|
759
762
|
}
|
|
760
763
|
function $e77252a287ef94ab$var$handleClickEvent(e) {
|
|
761
|
-
if ($
|
|
764
|
+
if ($goTMa$reactariautils.isVirtualClick(e)) {
|
|
762
765
|
$e77252a287ef94ab$var$hasEventBeforeFocus = true;
|
|
763
766
|
$e77252a287ef94ab$var$currentModality = 'virtual';
|
|
764
767
|
}
|