@react-aria/interactions 3.8.3 → 3.9.1
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 +69 -50
- package/dist/main.js.map +1 -1
- package/dist/module.js +69 -50
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/useFocus.ts +32 -32
- package/src/useFocusWithin.ts +33 -18
- package/src/usePress.ts +4 -2
- package/src/utils.ts +16 -17
package/dist/module.js
CHANGED
|
@@ -109,61 +109,58 @@ function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
|
|
|
109
109
|
onBlur: onBlur,
|
|
110
110
|
observer: null
|
|
111
111
|
});
|
|
112
|
-
|
|
113
|
-
state1.onBlur = onBlur;
|
|
112
|
+
stateRef.current.onBlur = onBlur;
|
|
114
113
|
// Clean up MutationObserver on unmount. See below.
|
|
115
114
|
// eslint-disable-next-line arrow-body-style
|
|
116
115
|
$bx7SL$useLayoutEffect(()=>{
|
|
116
|
+
const state = stateRef.current;
|
|
117
117
|
return ()=>{
|
|
118
|
-
if (
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
if (state.observer) {
|
|
119
|
+
state.observer.disconnect();
|
|
120
|
+
state.observer = null;
|
|
121
121
|
}
|
|
122
122
|
};
|
|
123
|
-
}, [
|
|
124
|
-
state1
|
|
125
|
-
]);
|
|
123
|
+
}, []);
|
|
126
124
|
// This function is called during a React onFocus event.
|
|
127
|
-
return (e1)=>{
|
|
125
|
+
return $bx7SL$useCallback((e1)=>{
|
|
128
126
|
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
129
127
|
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
130
128
|
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
131
129
|
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
132
130
|
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
133
|
-
|
|
131
|
+
stateRef.current.isFocused = true;
|
|
134
132
|
let target = e1.target;
|
|
135
133
|
let onBlurHandler = (e)=>{
|
|
136
134
|
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
137
|
-
ref;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (target.disabled) (ref = state.onBlur) === null || ref === void 0 ? void 0 : ref.call(state, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
|
|
135
|
+
_current, ref;
|
|
136
|
+
stateRef.current.isFocused = false;
|
|
137
|
+
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
|
|
141
138
|
// We no longer need the MutationObserver once the target is blurred.
|
|
142
|
-
if (
|
|
143
|
-
|
|
144
|
-
|
|
139
|
+
if (stateRef.current.observer) {
|
|
140
|
+
stateRef.current.observer.disconnect();
|
|
141
|
+
stateRef.current.observer = null;
|
|
145
142
|
}
|
|
146
143
|
};
|
|
147
144
|
target.addEventListener('focusout', onBlurHandler, {
|
|
148
145
|
once: true
|
|
149
146
|
});
|
|
150
|
-
|
|
151
|
-
if (
|
|
152
|
-
|
|
147
|
+
stateRef.current.observer = new MutationObserver(()=>{
|
|
148
|
+
if (stateRef.current.isFocused && target.disabled) {
|
|
149
|
+
stateRef.current.observer.disconnect();
|
|
153
150
|
target.dispatchEvent(new FocusEvent('blur'));
|
|
154
151
|
target.dispatchEvent(new FocusEvent('focusout', {
|
|
155
152
|
bubbles: true
|
|
156
153
|
}));
|
|
157
154
|
}
|
|
158
155
|
});
|
|
159
|
-
|
|
156
|
+
stateRef.current.observer.observe(target, {
|
|
160
157
|
attributes: true,
|
|
161
158
|
attributeFilter: [
|
|
162
159
|
'disabled'
|
|
163
160
|
]
|
|
164
161
|
});
|
|
165
162
|
}
|
|
166
|
-
};
|
|
163
|
+
}, []);
|
|
167
164
|
}
|
|
168
165
|
|
|
169
166
|
|
|
@@ -624,8 +621,9 @@ function $f6c31cce2adf654f$var$isVirtualPointerEvent(event) {
|
|
|
624
621
|
// Android TalkBack double tap will sometimes return a event with width and height of 1
|
|
625
622
|
// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
|
|
626
623
|
// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
|
|
627
|
-
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
|
|
628
|
-
|
|
624
|
+
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
|
|
625
|
+
// Talkback double tap from Windows Firefox touch screen press
|
|
626
|
+
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
|
|
629
627
|
}
|
|
630
628
|
|
|
631
629
|
|
|
@@ -678,29 +676,35 @@ var $a1ea59d68270f0dd$exports = {};
|
|
|
678
676
|
|
|
679
677
|
$parcel$export($a1ea59d68270f0dd$exports, "useFocus", () => $a1ea59d68270f0dd$export$f8168d8dd8fd66e6);
|
|
680
678
|
|
|
679
|
+
|
|
681
680
|
function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
|
|
682
|
-
let onBlur;
|
|
683
|
-
|
|
681
|
+
let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange } = props;
|
|
682
|
+
const onBlur = $bx7SL$useCallback((e)=>{
|
|
684
683
|
if (e.target === e.currentTarget) {
|
|
685
|
-
if (
|
|
686
|
-
if (
|
|
684
|
+
if (onBlurProp) onBlurProp(e);
|
|
685
|
+
if (onFocusChange) onFocusChange(false);
|
|
687
686
|
return true;
|
|
688
687
|
}
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
688
|
+
}, [
|
|
689
|
+
onBlurProp,
|
|
690
|
+
onFocusChange
|
|
691
|
+
]);
|
|
692
|
+
const onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
|
|
693
|
+
const onFocus = $bx7SL$useCallback((e)=>{
|
|
694
694
|
if (e.target === e.currentTarget) {
|
|
695
|
-
if (
|
|
696
|
-
if (
|
|
695
|
+
if (onFocusProp) onFocusProp(e);
|
|
696
|
+
if (onFocusChange) onFocusChange(true);
|
|
697
697
|
onSyntheticFocus(e);
|
|
698
698
|
}
|
|
699
|
-
}
|
|
699
|
+
}, [
|
|
700
|
+
onFocusChange,
|
|
701
|
+
onFocusProp,
|
|
702
|
+
onSyntheticFocus
|
|
703
|
+
]);
|
|
700
704
|
return {
|
|
701
705
|
focusProps: {
|
|
702
|
-
onFocus: onFocus,
|
|
703
|
-
onBlur: onBlur
|
|
706
|
+
onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
|
|
707
|
+
onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : null
|
|
704
708
|
}
|
|
705
709
|
};
|
|
706
710
|
}
|
|
@@ -877,27 +881,42 @@ $parcel$export($9ab94262bd0047c7$exports, "useFocusWithin", () => $9ab94262bd004
|
|
|
877
881
|
|
|
878
882
|
|
|
879
883
|
function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
|
|
884
|
+
let { isDisabled: isDisabled , onBlurWithin: onBlurWithin , onFocusWithin: onFocusWithin , onFocusWithinChange: onFocusWithinChange } = props;
|
|
880
885
|
let state = $bx7SL$useRef({
|
|
881
886
|
isFocusWithin: false
|
|
882
|
-
})
|
|
883
|
-
let onBlur =
|
|
887
|
+
});
|
|
888
|
+
let onBlur = $bx7SL$useCallback((e)=>{
|
|
884
889
|
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again
|
|
885
890
|
// when moving focus inside the element. Only trigger if the currentTarget doesn't
|
|
886
891
|
// include the relatedTarget (where focus is moving).
|
|
887
|
-
if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
888
|
-
state.isFocusWithin = false;
|
|
889
|
-
if (
|
|
890
|
-
if (
|
|
892
|
+
if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
893
|
+
state.current.isFocusWithin = false;
|
|
894
|
+
if (onBlurWithin) onBlurWithin(e);
|
|
895
|
+
if (onFocusWithinChange) onFocusWithinChange(false);
|
|
891
896
|
}
|
|
892
|
-
}
|
|
897
|
+
}, [
|
|
898
|
+
onBlurWithin,
|
|
899
|
+
onFocusWithinChange,
|
|
900
|
+
state
|
|
901
|
+
]);
|
|
893
902
|
let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
|
|
894
|
-
let onFocus =
|
|
895
|
-
if (!state.isFocusWithin) {
|
|
896
|
-
if (
|
|
897
|
-
if (
|
|
898
|
-
state.isFocusWithin = true;
|
|
903
|
+
let onFocus = $bx7SL$useCallback((e)=>{
|
|
904
|
+
if (!state.current.isFocusWithin) {
|
|
905
|
+
if (onFocusWithin) onFocusWithin(e);
|
|
906
|
+
if (onFocusWithinChange) onFocusWithinChange(true);
|
|
907
|
+
state.current.isFocusWithin = true;
|
|
899
908
|
onSyntheticFocus(e);
|
|
900
909
|
}
|
|
910
|
+
}, [
|
|
911
|
+
onFocusWithin,
|
|
912
|
+
onFocusWithinChange,
|
|
913
|
+
onSyntheticFocus
|
|
914
|
+
]);
|
|
915
|
+
if (isDisabled) return {
|
|
916
|
+
focusWithinProps: {
|
|
917
|
+
onFocus: null,
|
|
918
|
+
onBlur: null
|
|
919
|
+
}
|
|
901
920
|
};
|
|
902
921
|
return {
|
|
903
922
|
focusWithinProps: {
|