@react-aria/interactions 3.11.0 → 3.13.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 +102 -115
- package/dist/main.js.map +1 -1
- package/dist/module.js +103 -116
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/index.ts +1 -1
- package/src/useFocusVisible.ts +3 -3
- package/src/useHover.ts +1 -0
- package/src/usePress.ts +2 -20
- package/src/utils.ts +0 -20
package/dist/module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {mergeProps as $bx7SL$mergeProps, useSyncRef as $bx7SL$useSyncRef, useGlobalListeners as $bx7SL$useGlobalListeners, focusWithoutScrolling as $bx7SL$focusWithoutScrolling, isIOS as $bx7SL$isIOS, runAfterTransition as $bx7SL$runAfterTransition, useLayoutEffect as $bx7SL$useLayoutEffect, isMac as $bx7SL$isMac, useEvent as $bx7SL$useEvent, useDescription as $bx7SL$useDescription} from "@react-aria/utils";
|
|
1
|
+
import {mergeProps as $bx7SL$mergeProps, useSyncRef as $bx7SL$useSyncRef, useGlobalListeners as $bx7SL$useGlobalListeners, isVirtualClick as $bx7SL$isVirtualClick, focusWithoutScrolling as $bx7SL$focusWithoutScrolling, isVirtualPointerEvent as $bx7SL$isVirtualPointerEvent, isIOS as $bx7SL$isIOS, runAfterTransition as $bx7SL$runAfterTransition, useLayoutEffect as $bx7SL$useLayoutEffect, isMac as $bx7SL$isMac, useEvent as $bx7SL$useEvent, useDescription as $bx7SL$useDescription} from "@react-aria/utils";
|
|
2
2
|
import $bx7SL$react, {useRef as $bx7SL$useRef, useContext as $bx7SL$useContext, useState as $bx7SL$useState, useMemo as $bx7SL$useMemo, useEffect as $bx7SL$useEffect, useCallback as $bx7SL$useCallback} from "react";
|
|
3
3
|
|
|
4
4
|
|
|
@@ -57,106 +57,6 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
|
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
|
|
60
|
-
|
|
61
|
-
function $8a9cb279dc87e130$export$60278871457622de(event) {
|
|
62
|
-
// JAWS/NVDA with Firefox.
|
|
63
|
-
if (event.mozInputSource === 0 && event.isTrusted) return true;
|
|
64
|
-
return event.detail === 0 && !event.pointerType;
|
|
65
|
-
}
|
|
66
|
-
class $8a9cb279dc87e130$export$905e7fc544a71f36 {
|
|
67
|
-
isDefaultPrevented() {
|
|
68
|
-
return this.nativeEvent.defaultPrevented;
|
|
69
|
-
}
|
|
70
|
-
preventDefault() {
|
|
71
|
-
this.defaultPrevented = true;
|
|
72
|
-
this.nativeEvent.preventDefault();
|
|
73
|
-
}
|
|
74
|
-
stopPropagation() {
|
|
75
|
-
this.nativeEvent.stopPropagation();
|
|
76
|
-
this.isPropagationStopped = ()=>true
|
|
77
|
-
;
|
|
78
|
-
}
|
|
79
|
-
isPropagationStopped() {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
persist() {
|
|
83
|
-
}
|
|
84
|
-
constructor(type, nativeEvent){
|
|
85
|
-
this.nativeEvent = nativeEvent;
|
|
86
|
-
this.target = nativeEvent.target;
|
|
87
|
-
this.currentTarget = nativeEvent.currentTarget;
|
|
88
|
-
this.relatedTarget = nativeEvent.relatedTarget;
|
|
89
|
-
this.bubbles = nativeEvent.bubbles;
|
|
90
|
-
this.cancelable = nativeEvent.cancelable;
|
|
91
|
-
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
92
|
-
this.eventPhase = nativeEvent.eventPhase;
|
|
93
|
-
this.isTrusted = nativeEvent.isTrusted;
|
|
94
|
-
this.timeStamp = nativeEvent.timeStamp;
|
|
95
|
-
this.type = type;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
|
|
99
|
-
let stateRef = $bx7SL$useRef({
|
|
100
|
-
isFocused: false,
|
|
101
|
-
onBlur: onBlur,
|
|
102
|
-
observer: null
|
|
103
|
-
});
|
|
104
|
-
stateRef.current.onBlur = onBlur;
|
|
105
|
-
// Clean up MutationObserver on unmount. See below.
|
|
106
|
-
// eslint-disable-next-line arrow-body-style
|
|
107
|
-
$bx7SL$useLayoutEffect(()=>{
|
|
108
|
-
const state = stateRef.current;
|
|
109
|
-
return ()=>{
|
|
110
|
-
if (state.observer) {
|
|
111
|
-
state.observer.disconnect();
|
|
112
|
-
state.observer = null;
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
}, []);
|
|
116
|
-
// This function is called during a React onFocus event.
|
|
117
|
-
return $bx7SL$useCallback((e1)=>{
|
|
118
|
-
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
119
|
-
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
120
|
-
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
121
|
-
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
122
|
-
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
123
|
-
stateRef.current.isFocused = true;
|
|
124
|
-
let target = e1.target;
|
|
125
|
-
let onBlurHandler = (e)=>{
|
|
126
|
-
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
127
|
-
_current, ref;
|
|
128
|
-
stateRef.current.isFocused = false;
|
|
129
|
-
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
|
|
130
|
-
// We no longer need the MutationObserver once the target is blurred.
|
|
131
|
-
if (stateRef.current.observer) {
|
|
132
|
-
stateRef.current.observer.disconnect();
|
|
133
|
-
stateRef.current.observer = null;
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
target.addEventListener('focusout', onBlurHandler, {
|
|
137
|
-
once: true
|
|
138
|
-
});
|
|
139
|
-
stateRef.current.observer = new MutationObserver(()=>{
|
|
140
|
-
if (stateRef.current.isFocused && target.disabled) {
|
|
141
|
-
stateRef.current.observer.disconnect();
|
|
142
|
-
target.dispatchEvent(new FocusEvent('blur'));
|
|
143
|
-
target.dispatchEvent(new FocusEvent('focusout', {
|
|
144
|
-
bubbles: true
|
|
145
|
-
}));
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
stateRef.current.observer.observe(target, {
|
|
149
|
-
attributes: true,
|
|
150
|
-
attributeFilter: [
|
|
151
|
-
'disabled'
|
|
152
|
-
]
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
}, []);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
60
|
const $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = $bx7SL$react.createContext(null);
|
|
161
61
|
$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
|
|
162
62
|
|
|
@@ -297,7 +197,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
297
197
|
if (isDisabled1) e.preventDefault();
|
|
298
198
|
// If triggered from a screen reader or by using element.click(),
|
|
299
199
|
// trigger as if it were a keyboard click.
|
|
300
|
-
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $
|
|
200
|
+
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $bx7SL$isVirtualClick(e.nativeEvent))) {
|
|
301
201
|
// Ensure the element receives focus (VoiceOver on iOS does not do this)
|
|
302
202
|
if (!isDisabled1 && !preventFocusOnPress) $bx7SL$focusWithoutScrolling(e.currentTarget);
|
|
303
203
|
triggerPressStart(e, 'virtual');
|
|
@@ -330,7 +230,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
330
230
|
// Ignore and let the onClick handler take care of it instead.
|
|
331
231
|
// https://bugs.webkit.org/show_bug.cgi?id=222627
|
|
332
232
|
// https://bugs.webkit.org/show_bug.cgi?id=223202
|
|
333
|
-
if ($
|
|
233
|
+
if ($bx7SL$isVirtualPointerEvent(e.nativeEvent)) {
|
|
334
234
|
state.pointerType = 'virtual';
|
|
335
235
|
return;
|
|
336
236
|
}
|
|
@@ -418,7 +318,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
418
318
|
state.isPressed = true;
|
|
419
319
|
state.isOverTarget = true;
|
|
420
320
|
state.target = e.currentTarget;
|
|
421
|
-
state.pointerType = $
|
|
321
|
+
state.pointerType = $bx7SL$isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse';
|
|
422
322
|
if (!isDisabled1 && !preventFocusOnPress) $bx7SL$focusWithoutScrolling(e.currentTarget);
|
|
423
323
|
triggerPressStart(e, state.pointerType);
|
|
424
324
|
addGlobalListener(document, 'mouseup', onMouseUp, false);
|
|
@@ -538,7 +438,8 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
|
538
438
|
// eslint-disable-next-line arrow-body-style
|
|
539
439
|
$bx7SL$useEffect(()=>{
|
|
540
440
|
return ()=>{
|
|
541
|
-
if (!allowTextSelectionOnPress)
|
|
441
|
+
if (!allowTextSelectionOnPress) // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
442
|
+
$14c0b72509d70225$export$b0d6fa1ab32e3295(ref.current.target);
|
|
542
443
|
};
|
|
543
444
|
}, [
|
|
544
445
|
allowTextSelectionOnPress
|
|
@@ -628,15 +529,6 @@ function $f6c31cce2adf654f$var$isValidInputKey(target, key) {
|
|
|
628
529
|
// Only space should toggle checkboxes and radios, not enter.
|
|
629
530
|
return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : $f6c31cce2adf654f$var$nonTextInputTypes.has(target.type);
|
|
630
531
|
}
|
|
631
|
-
function $f6c31cce2adf654f$var$isVirtualPointerEvent(event) {
|
|
632
|
-
// If the pointer size is zero, then we assume it's from a screen reader.
|
|
633
|
-
// Android TalkBack double tap will sometimes return a event with width and height of 1
|
|
634
|
-
// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
|
|
635
|
-
// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
|
|
636
|
-
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
|
|
637
|
-
// Talkback double tap from Windows Firefox touch screen press
|
|
638
|
-
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
|
|
639
|
-
}
|
|
640
532
|
|
|
641
533
|
|
|
642
534
|
|
|
@@ -683,6 +575,100 @@ const $f1ab8c75478c6f73$export$3351871ee4b288b8 = /*#__PURE__*/ $bx7SL$react.for
|
|
|
683
575
|
|
|
684
576
|
|
|
685
577
|
|
|
578
|
+
|
|
579
|
+
class $8a9cb279dc87e130$export$905e7fc544a71f36 {
|
|
580
|
+
isDefaultPrevented() {
|
|
581
|
+
return this.nativeEvent.defaultPrevented;
|
|
582
|
+
}
|
|
583
|
+
preventDefault() {
|
|
584
|
+
this.defaultPrevented = true;
|
|
585
|
+
this.nativeEvent.preventDefault();
|
|
586
|
+
}
|
|
587
|
+
stopPropagation() {
|
|
588
|
+
this.nativeEvent.stopPropagation();
|
|
589
|
+
this.isPropagationStopped = ()=>true
|
|
590
|
+
;
|
|
591
|
+
}
|
|
592
|
+
isPropagationStopped() {
|
|
593
|
+
return false;
|
|
594
|
+
}
|
|
595
|
+
persist() {
|
|
596
|
+
}
|
|
597
|
+
constructor(type, nativeEvent){
|
|
598
|
+
this.nativeEvent = nativeEvent;
|
|
599
|
+
this.target = nativeEvent.target;
|
|
600
|
+
this.currentTarget = nativeEvent.currentTarget;
|
|
601
|
+
this.relatedTarget = nativeEvent.relatedTarget;
|
|
602
|
+
this.bubbles = nativeEvent.bubbles;
|
|
603
|
+
this.cancelable = nativeEvent.cancelable;
|
|
604
|
+
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
605
|
+
this.eventPhase = nativeEvent.eventPhase;
|
|
606
|
+
this.isTrusted = nativeEvent.isTrusted;
|
|
607
|
+
this.timeStamp = nativeEvent.timeStamp;
|
|
608
|
+
this.type = type;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
|
|
612
|
+
let stateRef = $bx7SL$useRef({
|
|
613
|
+
isFocused: false,
|
|
614
|
+
onBlur: onBlur,
|
|
615
|
+
observer: null
|
|
616
|
+
});
|
|
617
|
+
stateRef.current.onBlur = onBlur;
|
|
618
|
+
// Clean up MutationObserver on unmount. See below.
|
|
619
|
+
// eslint-disable-next-line arrow-body-style
|
|
620
|
+
$bx7SL$useLayoutEffect(()=>{
|
|
621
|
+
const state = stateRef.current;
|
|
622
|
+
return ()=>{
|
|
623
|
+
if (state.observer) {
|
|
624
|
+
state.observer.disconnect();
|
|
625
|
+
state.observer = null;
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
}, []);
|
|
629
|
+
// This function is called during a React onFocus event.
|
|
630
|
+
return $bx7SL$useCallback((e1)=>{
|
|
631
|
+
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
632
|
+
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
633
|
+
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
634
|
+
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
635
|
+
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
636
|
+
stateRef.current.isFocused = true;
|
|
637
|
+
let target = e1.target;
|
|
638
|
+
let onBlurHandler = (e)=>{
|
|
639
|
+
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
640
|
+
_current, ref;
|
|
641
|
+
stateRef.current.isFocused = false;
|
|
642
|
+
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
|
|
643
|
+
// We no longer need the MutationObserver once the target is blurred.
|
|
644
|
+
if (stateRef.current.observer) {
|
|
645
|
+
stateRef.current.observer.disconnect();
|
|
646
|
+
stateRef.current.observer = null;
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
target.addEventListener('focusout', onBlurHandler, {
|
|
650
|
+
once: true
|
|
651
|
+
});
|
|
652
|
+
stateRef.current.observer = new MutationObserver(()=>{
|
|
653
|
+
if (stateRef.current.isFocused && target.disabled) {
|
|
654
|
+
stateRef.current.observer.disconnect();
|
|
655
|
+
target.dispatchEvent(new FocusEvent('blur'));
|
|
656
|
+
target.dispatchEvent(new FocusEvent('focusout', {
|
|
657
|
+
bubbles: true
|
|
658
|
+
}));
|
|
659
|
+
}
|
|
660
|
+
});
|
|
661
|
+
stateRef.current.observer.observe(target, {
|
|
662
|
+
attributes: true,
|
|
663
|
+
attributeFilter: [
|
|
664
|
+
'disabled'
|
|
665
|
+
]
|
|
666
|
+
});
|
|
667
|
+
}
|
|
668
|
+
}, []);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
|
|
686
672
|
function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
|
|
687
673
|
let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange } = props;
|
|
688
674
|
const onBlur = $bx7SL$useCallback((e)=>{
|
|
@@ -718,7 +704,6 @@ function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
|
|
|
718
704
|
|
|
719
705
|
|
|
720
706
|
|
|
721
|
-
|
|
722
707
|
let $507fabe10e71c6fb$var$currentModality = null;
|
|
723
708
|
let $507fabe10e71c6fb$var$changeHandlers = new Set();
|
|
724
709
|
let $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
|
|
@@ -753,7 +738,7 @@ function $507fabe10e71c6fb$var$handlePointerEvent(e) {
|
|
|
753
738
|
}
|
|
754
739
|
}
|
|
755
740
|
function $507fabe10e71c6fb$var$handleClickEvent(e) {
|
|
756
|
-
if ($
|
|
741
|
+
if ($bx7SL$isVirtualClick(e)) {
|
|
757
742
|
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
758
743
|
$507fabe10e71c6fb$var$currentModality = 'virtual';
|
|
759
744
|
}
|
|
@@ -869,6 +854,7 @@ function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
|
|
|
869
854
|
return ()=>{
|
|
870
855
|
$507fabe10e71c6fb$var$changeHandlers.delete(handler);
|
|
871
856
|
};
|
|
857
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
872
858
|
}, deps);
|
|
873
859
|
}
|
|
874
860
|
|
|
@@ -1031,6 +1017,7 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
|
|
|
1031
1017
|
if (isDisabled) triggerHoverEnd1({
|
|
1032
1018
|
currentTarget: state.target
|
|
1033
1019
|
}, state.pointerType);
|
|
1020
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1034
1021
|
}, [
|
|
1035
1022
|
isDisabled
|
|
1036
1023
|
]);
|