@react-aria/interactions 3.8.2 → 3.8.3
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 +120 -23
- package/dist/main.js.map +1 -1
- package/dist/module.js +121 -24
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/useFocus.ts +21 -15
- package/src/useFocusWithin.ts +20 -21
- package/src/utils.ts +117 -0
package/dist/main.js
CHANGED
|
@@ -83,11 +83,107 @@ function $f7e14e656343df57$export$b0d6fa1ab32e3295(target) {
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
|
|
86
|
+
|
|
87
|
+
|
|
86
88
|
function $625cf83917e112ad$export$60278871457622de(event) {
|
|
87
89
|
// JAWS/NVDA with Firefox.
|
|
88
90
|
if (event.mozInputSource === 0 && event.isTrusted) return true;
|
|
89
91
|
return event.detail === 0 && !event.pointerType;
|
|
90
92
|
}
|
|
93
|
+
class $625cf83917e112ad$export$905e7fc544a71f36 {
|
|
94
|
+
isDefaultPrevented() {
|
|
95
|
+
return this.nativeEvent.defaultPrevented;
|
|
96
|
+
}
|
|
97
|
+
preventDefault() {
|
|
98
|
+
this.defaultPrevented = true;
|
|
99
|
+
this.nativeEvent.preventDefault();
|
|
100
|
+
}
|
|
101
|
+
stopPropagation() {
|
|
102
|
+
this.nativeEvent.stopPropagation();
|
|
103
|
+
this.isPropagationStopped = ()=>true
|
|
104
|
+
;
|
|
105
|
+
}
|
|
106
|
+
isPropagationStopped() {
|
|
107
|
+
return false;
|
|
108
|
+
}
|
|
109
|
+
persist() {
|
|
110
|
+
}
|
|
111
|
+
constructor(type, nativeEvent){
|
|
112
|
+
this.nativeEvent = nativeEvent;
|
|
113
|
+
this.target = nativeEvent.target;
|
|
114
|
+
this.currentTarget = nativeEvent.currentTarget;
|
|
115
|
+
this.relatedTarget = nativeEvent.relatedTarget;
|
|
116
|
+
this.bubbles = nativeEvent.bubbles;
|
|
117
|
+
this.cancelable = nativeEvent.cancelable;
|
|
118
|
+
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
119
|
+
this.eventPhase = nativeEvent.eventPhase;
|
|
120
|
+
this.isTrusted = nativeEvent.isTrusted;
|
|
121
|
+
this.timeStamp = nativeEvent.timeStamp;
|
|
122
|
+
this.type = type;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
function $625cf83917e112ad$export$715c682d09d639cc(onBlur) {
|
|
126
|
+
let stateRef = $goTMa$react.useRef({
|
|
127
|
+
isFocused: false,
|
|
128
|
+
onBlur: onBlur,
|
|
129
|
+
observer: null
|
|
130
|
+
});
|
|
131
|
+
let state1 = stateRef.current;
|
|
132
|
+
state1.onBlur = onBlur;
|
|
133
|
+
// Clean up MutationObserver on unmount. See below.
|
|
134
|
+
// eslint-disable-next-line arrow-body-style
|
|
135
|
+
$goTMa$reactariautils.useLayoutEffect(()=>{
|
|
136
|
+
return ()=>{
|
|
137
|
+
if (state1.observer) {
|
|
138
|
+
state1.observer.disconnect();
|
|
139
|
+
state1.observer = null;
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
}, [
|
|
143
|
+
state1
|
|
144
|
+
]);
|
|
145
|
+
// This function is called during a React onFocus event.
|
|
146
|
+
return (e1)=>{
|
|
147
|
+
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
148
|
+
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
149
|
+
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
150
|
+
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
151
|
+
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
152
|
+
state1.isFocused = true;
|
|
153
|
+
let target = e1.target;
|
|
154
|
+
let onBlurHandler = (e)=>{
|
|
155
|
+
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
156
|
+
ref;
|
|
157
|
+
let state = stateRef.current;
|
|
158
|
+
state.isFocused = false;
|
|
159
|
+
if (target.disabled) (ref = state.onBlur) === null || ref === void 0 ? void 0 : ref.call(state, new $625cf83917e112ad$export$905e7fc544a71f36('blur', e));
|
|
160
|
+
// We no longer need the MutationObserver once the target is blurred.
|
|
161
|
+
if (state.observer) {
|
|
162
|
+
state.observer.disconnect();
|
|
163
|
+
state.observer = null;
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
target.addEventListener('focusout', onBlurHandler, {
|
|
167
|
+
once: true
|
|
168
|
+
});
|
|
169
|
+
state1.observer = new MutationObserver(()=>{
|
|
170
|
+
if (state1.isFocused && target.disabled) {
|
|
171
|
+
state1.observer.disconnect();
|
|
172
|
+
target.dispatchEvent(new FocusEvent('blur'));
|
|
173
|
+
target.dispatchEvent(new FocusEvent('focusout', {
|
|
174
|
+
bubbles: true
|
|
175
|
+
}));
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
state1.observer.observe(target, {
|
|
179
|
+
attributes: true,
|
|
180
|
+
attributeFilter: [
|
|
181
|
+
'disabled'
|
|
182
|
+
]
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
}
|
|
91
187
|
|
|
92
188
|
|
|
93
189
|
|
|
@@ -600,22 +696,24 @@ const $3596bae48579386f$export$3351871ee4b288b8 = /*#__PURE__*/ ($parcel$interop
|
|
|
600
696
|
var $5cb73d0ce355b0dc$exports = {};
|
|
601
697
|
|
|
602
698
|
$parcel$export($5cb73d0ce355b0dc$exports, "useFocus", () => $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6);
|
|
699
|
+
|
|
603
700
|
function $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6(props) {
|
|
604
|
-
|
|
605
|
-
|
|
701
|
+
let onBlur;
|
|
702
|
+
if (!props.isDisabled && (props.onBlur || props.onFocusChange)) onBlur = (e)=>{
|
|
703
|
+
if (e.target === e.currentTarget) {
|
|
704
|
+
if (props.onBlur) props.onBlur(e);
|
|
705
|
+
if (props.onFocusChange) props.onFocusChange(false);
|
|
706
|
+
return true;
|
|
606
707
|
}
|
|
607
708
|
};
|
|
608
|
-
|
|
609
|
-
|
|
709
|
+
else onBlur = null;
|
|
710
|
+
let onSyntheticFocus = $625cf83917e112ad$export$715c682d09d639cc(onBlur);
|
|
711
|
+
let onFocus;
|
|
712
|
+
if (!props.isDisabled && (props.onFocus || props.onFocusChange || props.onBlur)) onFocus = (e)=>{
|
|
610
713
|
if (e.target === e.currentTarget) {
|
|
611
714
|
if (props.onFocus) props.onFocus(e);
|
|
612
715
|
if (props.onFocusChange) props.onFocusChange(true);
|
|
613
|
-
|
|
614
|
-
};
|
|
615
|
-
if (props.onBlur || props.onFocusChange) onBlur = (e)=>{
|
|
616
|
-
if (e.target === e.currentTarget) {
|
|
617
|
-
if (props.onBlur) props.onBlur(e);
|
|
618
|
-
if (props.onFocusChange) props.onFocusChange(false);
|
|
716
|
+
onSyntheticFocus(e);
|
|
619
717
|
}
|
|
620
718
|
};
|
|
621
719
|
return {
|
|
@@ -796,29 +894,28 @@ var $d16842bbd0359d1b$exports = {};
|
|
|
796
894
|
|
|
797
895
|
$parcel$export($d16842bbd0359d1b$exports, "useFocusWithin", () => $d16842bbd0359d1b$export$420e68273165f4ec);
|
|
798
896
|
|
|
897
|
+
|
|
799
898
|
function $d16842bbd0359d1b$export$420e68273165f4ec(props) {
|
|
800
899
|
let state = $goTMa$react.useRef({
|
|
801
900
|
isFocusWithin: false
|
|
802
901
|
}).current;
|
|
803
|
-
|
|
804
|
-
focusWithinProps: {
|
|
805
|
-
}
|
|
806
|
-
};
|
|
807
|
-
let onFocus = (e)=>{
|
|
808
|
-
if (!state.isFocusWithin) {
|
|
809
|
-
if (props.onFocusWithin) props.onFocusWithin(e);
|
|
810
|
-
if (props.onFocusWithinChange) props.onFocusWithinChange(true);
|
|
811
|
-
state.isFocusWithin = true;
|
|
812
|
-
}
|
|
813
|
-
};
|
|
814
|
-
let onBlur = (e)=>{
|
|
902
|
+
let onBlur = props.isDisabled ? null : (e)=>{
|
|
815
903
|
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again
|
|
816
904
|
// when moving focus inside the element. Only trigger if the currentTarget doesn't
|
|
817
905
|
// include the relatedTarget (where focus is moving).
|
|
818
906
|
if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
907
|
+
state.isFocusWithin = false;
|
|
819
908
|
if (props.onBlurWithin) props.onBlurWithin(e);
|
|
820
909
|
if (props.onFocusWithinChange) props.onFocusWithinChange(false);
|
|
821
|
-
|
|
910
|
+
}
|
|
911
|
+
};
|
|
912
|
+
let onSyntheticFocus = $625cf83917e112ad$export$715c682d09d639cc(onBlur);
|
|
913
|
+
let onFocus = props.isDisabled ? null : (e)=>{
|
|
914
|
+
if (!state.isFocusWithin) {
|
|
915
|
+
if (props.onFocusWithin) props.onFocusWithin(e);
|
|
916
|
+
if (props.onFocusWithinChange) props.onFocusWithinChange(true);
|
|
917
|
+
state.isFocusWithin = true;
|
|
918
|
+
onSyntheticFocus(e);
|
|
822
919
|
}
|
|
823
920
|
};
|
|
824
921
|
return {
|