@react-aria/interactions 3.8.4 → 3.9.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 +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/main.js
CHANGED
|
@@ -128,61 +128,58 @@ function $625cf83917e112ad$export$715c682d09d639cc(onBlur) {
|
|
|
128
128
|
onBlur: onBlur,
|
|
129
129
|
observer: null
|
|
130
130
|
});
|
|
131
|
-
|
|
132
|
-
state1.onBlur = onBlur;
|
|
131
|
+
stateRef.current.onBlur = onBlur;
|
|
133
132
|
// Clean up MutationObserver on unmount. See below.
|
|
134
133
|
// eslint-disable-next-line arrow-body-style
|
|
135
134
|
$goTMa$reactariautils.useLayoutEffect(()=>{
|
|
135
|
+
const state = stateRef.current;
|
|
136
136
|
return ()=>{
|
|
137
|
-
if (
|
|
138
|
-
|
|
139
|
-
|
|
137
|
+
if (state.observer) {
|
|
138
|
+
state.observer.disconnect();
|
|
139
|
+
state.observer = null;
|
|
140
140
|
}
|
|
141
141
|
};
|
|
142
|
-
}, [
|
|
143
|
-
state1
|
|
144
|
-
]);
|
|
142
|
+
}, []);
|
|
145
143
|
// This function is called during a React onFocus event.
|
|
146
|
-
return (e1)=>{
|
|
144
|
+
return $goTMa$react.useCallback((e1)=>{
|
|
147
145
|
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
148
146
|
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
149
147
|
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
150
148
|
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
151
149
|
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
152
|
-
|
|
150
|
+
stateRef.current.isFocused = true;
|
|
153
151
|
let target = e1.target;
|
|
154
152
|
let onBlurHandler = (e)=>{
|
|
155
153
|
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
156
|
-
ref;
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
if (target.disabled) (ref = state.onBlur) === null || ref === void 0 ? void 0 : ref.call(state, new $625cf83917e112ad$export$905e7fc544a71f36('blur', e));
|
|
154
|
+
_current, ref;
|
|
155
|
+
stateRef.current.isFocused = false;
|
|
156
|
+
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $625cf83917e112ad$export$905e7fc544a71f36('blur', e));
|
|
160
157
|
// We no longer need the MutationObserver once the target is blurred.
|
|
161
|
-
if (
|
|
162
|
-
|
|
163
|
-
|
|
158
|
+
if (stateRef.current.observer) {
|
|
159
|
+
stateRef.current.observer.disconnect();
|
|
160
|
+
stateRef.current.observer = null;
|
|
164
161
|
}
|
|
165
162
|
};
|
|
166
163
|
target.addEventListener('focusout', onBlurHandler, {
|
|
167
164
|
once: true
|
|
168
165
|
});
|
|
169
|
-
|
|
170
|
-
if (
|
|
171
|
-
|
|
166
|
+
stateRef.current.observer = new MutationObserver(()=>{
|
|
167
|
+
if (stateRef.current.isFocused && target.disabled) {
|
|
168
|
+
stateRef.current.observer.disconnect();
|
|
172
169
|
target.dispatchEvent(new FocusEvent('blur'));
|
|
173
170
|
target.dispatchEvent(new FocusEvent('focusout', {
|
|
174
171
|
bubbles: true
|
|
175
172
|
}));
|
|
176
173
|
}
|
|
177
174
|
});
|
|
178
|
-
|
|
175
|
+
stateRef.current.observer.observe(target, {
|
|
179
176
|
attributes: true,
|
|
180
177
|
attributeFilter: [
|
|
181
178
|
'disabled'
|
|
182
179
|
]
|
|
183
180
|
});
|
|
184
181
|
}
|
|
185
|
-
};
|
|
182
|
+
}, []);
|
|
186
183
|
}
|
|
187
184
|
|
|
188
185
|
|
|
@@ -643,8 +640,9 @@ function $0294ea432cd92340$var$isVirtualPointerEvent(event) {
|
|
|
643
640
|
// Android TalkBack double tap will sometimes return a event with width and height of 1
|
|
644
641
|
// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
|
|
645
642
|
// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
|
|
646
|
-
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
|
|
647
|
-
|
|
643
|
+
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
|
|
644
|
+
// Talkback double tap from Windows Firefox touch screen press
|
|
645
|
+
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
|
|
648
646
|
}
|
|
649
647
|
|
|
650
648
|
|
|
@@ -697,29 +695,35 @@ var $5cb73d0ce355b0dc$exports = {};
|
|
|
697
695
|
|
|
698
696
|
$parcel$export($5cb73d0ce355b0dc$exports, "useFocus", () => $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6);
|
|
699
697
|
|
|
698
|
+
|
|
700
699
|
function $5cb73d0ce355b0dc$export$f8168d8dd8fd66e6(props) {
|
|
701
|
-
let onBlur;
|
|
702
|
-
|
|
700
|
+
let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange } = props;
|
|
701
|
+
const onBlur = $goTMa$react.useCallback((e)=>{
|
|
703
702
|
if (e.target === e.currentTarget) {
|
|
704
|
-
if (
|
|
705
|
-
if (
|
|
703
|
+
if (onBlurProp) onBlurProp(e);
|
|
704
|
+
if (onFocusChange) onFocusChange(false);
|
|
706
705
|
return true;
|
|
707
706
|
}
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
707
|
+
}, [
|
|
708
|
+
onBlurProp,
|
|
709
|
+
onFocusChange
|
|
710
|
+
]);
|
|
711
|
+
const onSyntheticFocus = $625cf83917e112ad$export$715c682d09d639cc(onBlur);
|
|
712
|
+
const onFocus = $goTMa$react.useCallback((e)=>{
|
|
713
713
|
if (e.target === e.currentTarget) {
|
|
714
|
-
if (
|
|
715
|
-
if (
|
|
714
|
+
if (onFocusProp) onFocusProp(e);
|
|
715
|
+
if (onFocusChange) onFocusChange(true);
|
|
716
716
|
onSyntheticFocus(e);
|
|
717
717
|
}
|
|
718
|
-
}
|
|
718
|
+
}, [
|
|
719
|
+
onFocusChange,
|
|
720
|
+
onFocusProp,
|
|
721
|
+
onSyntheticFocus
|
|
722
|
+
]);
|
|
719
723
|
return {
|
|
720
724
|
focusProps: {
|
|
721
|
-
onFocus: onFocus,
|
|
722
|
-
onBlur: onBlur
|
|
725
|
+
onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
|
|
726
|
+
onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : null
|
|
723
727
|
}
|
|
724
728
|
};
|
|
725
729
|
}
|
|
@@ -896,27 +900,42 @@ $parcel$export($d16842bbd0359d1b$exports, "useFocusWithin", () => $d16842bbd0359
|
|
|
896
900
|
|
|
897
901
|
|
|
898
902
|
function $d16842bbd0359d1b$export$420e68273165f4ec(props) {
|
|
903
|
+
let { isDisabled: isDisabled , onBlurWithin: onBlurWithin , onFocusWithin: onFocusWithin , onFocusWithinChange: onFocusWithinChange } = props;
|
|
899
904
|
let state = $goTMa$react.useRef({
|
|
900
905
|
isFocusWithin: false
|
|
901
|
-
})
|
|
902
|
-
let onBlur =
|
|
906
|
+
});
|
|
907
|
+
let onBlur = $goTMa$react.useCallback((e)=>{
|
|
903
908
|
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again
|
|
904
909
|
// when moving focus inside the element. Only trigger if the currentTarget doesn't
|
|
905
910
|
// include the relatedTarget (where focus is moving).
|
|
906
|
-
if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
907
|
-
state.isFocusWithin = false;
|
|
908
|
-
if (
|
|
909
|
-
if (
|
|
911
|
+
if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
912
|
+
state.current.isFocusWithin = false;
|
|
913
|
+
if (onBlurWithin) onBlurWithin(e);
|
|
914
|
+
if (onFocusWithinChange) onFocusWithinChange(false);
|
|
910
915
|
}
|
|
911
|
-
}
|
|
916
|
+
}, [
|
|
917
|
+
onBlurWithin,
|
|
918
|
+
onFocusWithinChange,
|
|
919
|
+
state
|
|
920
|
+
]);
|
|
912
921
|
let onSyntheticFocus = $625cf83917e112ad$export$715c682d09d639cc(onBlur);
|
|
913
|
-
let onFocus =
|
|
914
|
-
if (!state.isFocusWithin) {
|
|
915
|
-
if (
|
|
916
|
-
if (
|
|
917
|
-
state.isFocusWithin = true;
|
|
922
|
+
let onFocus = $goTMa$react.useCallback((e)=>{
|
|
923
|
+
if (!state.current.isFocusWithin) {
|
|
924
|
+
if (onFocusWithin) onFocusWithin(e);
|
|
925
|
+
if (onFocusWithinChange) onFocusWithinChange(true);
|
|
926
|
+
state.current.isFocusWithin = true;
|
|
918
927
|
onSyntheticFocus(e);
|
|
919
928
|
}
|
|
929
|
+
}, [
|
|
930
|
+
onFocusWithin,
|
|
931
|
+
onFocusWithinChange,
|
|
932
|
+
onSyntheticFocus
|
|
933
|
+
]);
|
|
934
|
+
if (isDisabled) return {
|
|
935
|
+
focusWithinProps: {
|
|
936
|
+
onFocus: null,
|
|
937
|
+
onBlur: null
|
|
938
|
+
}
|
|
920
939
|
};
|
|
921
940
|
return {
|
|
922
941
|
focusWithinProps: {
|