@react-aria/interactions 3.8.4 → 3.10.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/module.js CHANGED
@@ -1,16 +1,7 @@
1
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";
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
- function $parcel$export(e, n, v, s) {
5
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
6
- }
7
- var $3b117e43dc0ca95d$exports = {};
8
-
9
- $parcel$export($3b117e43dc0ca95d$exports, "Pressable", () => $3b117e43dc0ca95d$export$27c701ed9e449e99);
10
-
11
- var $f6c31cce2adf654f$exports = {};
12
4
 
13
- $parcel$export($f6c31cce2adf654f$exports, "usePress", () => $f6c31cce2adf654f$export$45712eceda6fad21);
14
5
 
15
6
  // Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
16
7
  // rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
@@ -24,7 +15,7 @@ function $14c0b72509d70225$export$16a4697467175487(target) {
24
15
  document.documentElement.style.webkitUserSelect = 'none';
25
16
  }
26
17
  $14c0b72509d70225$var$state = 'disabled';
27
- } else if (target) {
18
+ } else if (target instanceof HTMLElement || target instanceof SVGElement) {
28
19
  // If not iOS, store the target's original user-select and change to user-select: none
29
20
  // Ignore state since it doesn't apply for non iOS
30
21
  $14c0b72509d70225$var$modifiedElementMap.set(target, target.style.userSelect);
@@ -51,13 +42,15 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
51
42
  }
52
43
  });
53
44
  }, 300);
54
- } else // If not iOS, restore the target's original user-select if any
45
+ } else if (target instanceof HTMLElement || target instanceof SVGElement) // If not iOS, restore the target's original user-select if any
55
46
  // Ignore state since it doesn't apply for non iOS
56
- if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
57
- let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
58
- if (target.style.userSelect === 'none') target.style.userSelect = targetOldUserSelect;
59
- if (target.getAttribute('style') === '') target.removeAttribute('style');
60
- $14c0b72509d70225$var$modifiedElementMap.delete(target);
47
+ {
48
+ if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
49
+ let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
50
+ if (target.style.userSelect === 'none') target.style.userSelect = targetOldUserSelect;
51
+ if (target.getAttribute('style') === '') target.removeAttribute('style');
52
+ $14c0b72509d70225$var$modifiedElementMap.delete(target);
53
+ }
61
54
  }
62
55
  }
63
56
 
@@ -65,7 +58,6 @@ function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
65
58
 
66
59
 
67
60
 
68
-
69
61
  function $8a9cb279dc87e130$export$60278871457622de(event) {
70
62
  // JAWS/NVDA with Firefox.
71
63
  if (event.mozInputSource === 0 && event.isTrusted) return true;
@@ -109,61 +101,58 @@ function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
109
101
  onBlur: onBlur,
110
102
  observer: null
111
103
  });
112
- let state1 = stateRef.current;
113
- state1.onBlur = onBlur;
104
+ stateRef.current.onBlur = onBlur;
114
105
  // Clean up MutationObserver on unmount. See below.
115
106
  // eslint-disable-next-line arrow-body-style
116
107
  $bx7SL$useLayoutEffect(()=>{
108
+ const state = stateRef.current;
117
109
  return ()=>{
118
- if (state1.observer) {
119
- state1.observer.disconnect();
120
- state1.observer = null;
110
+ if (state.observer) {
111
+ state.observer.disconnect();
112
+ state.observer = null;
121
113
  }
122
114
  };
123
- }, [
124
- state1
125
- ]);
115
+ }, []);
126
116
  // This function is called during a React onFocus event.
127
- return (e1)=>{
117
+ return $bx7SL$useCallback((e1)=>{
128
118
  // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
129
119
  // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
130
120
  // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
131
121
  // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
132
122
  if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
133
- state1.isFocused = true;
123
+ stateRef.current.isFocused = true;
134
124
  let target = e1.target;
135
125
  let onBlurHandler = (e)=>{
136
126
  var // For backward compatibility, dispatch a (fake) React synthetic event.
137
- ref;
138
- let state = stateRef.current;
139
- state.isFocused = false;
140
- if (target.disabled) (ref = state.onBlur) === null || ref === void 0 ? void 0 : ref.call(state, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
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));
141
130
  // We no longer need the MutationObserver once the target is blurred.
142
- if (state.observer) {
143
- state.observer.disconnect();
144
- state.observer = null;
131
+ if (stateRef.current.observer) {
132
+ stateRef.current.observer.disconnect();
133
+ stateRef.current.observer = null;
145
134
  }
146
135
  };
147
136
  target.addEventListener('focusout', onBlurHandler, {
148
137
  once: true
149
138
  });
150
- state1.observer = new MutationObserver(()=>{
151
- if (state1.isFocused && target.disabled) {
152
- state1.observer.disconnect();
139
+ stateRef.current.observer = new MutationObserver(()=>{
140
+ if (stateRef.current.isFocused && target.disabled) {
141
+ stateRef.current.observer.disconnect();
153
142
  target.dispatchEvent(new FocusEvent('blur'));
154
143
  target.dispatchEvent(new FocusEvent('focusout', {
155
144
  bubbles: true
156
145
  }));
157
146
  }
158
147
  });
159
- state1.observer.observe(target, {
148
+ stateRef.current.observer.observe(target, {
160
149
  attributes: true,
161
150
  attributeFilter: [
162
151
  'disabled'
163
152
  ]
164
153
  });
165
154
  }
166
- };
155
+ }, []);
167
156
  }
168
157
 
169
158
 
@@ -172,6 +161,7 @@ const $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = $bx7SL$react.createContext(nul
172
161
  $ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
173
162
 
174
163
 
164
+
175
165
  function $f6c31cce2adf654f$var$usePressResponderContext(props) {
176
166
  // Consume context from <PressResponder> and merge with props.
177
167
  let context = $bx7SL$useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
@@ -326,7 +316,7 @@ function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
326
316
  removeAllGlobalListeners();
327
317
  // If the target is a link, trigger the click method to open the URL,
328
318
  // but defer triggering pressEnd until onClick event handler.
329
- if (state.target.contains(target) && $f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') state.target.click();
319
+ if (state.target instanceof HTMLElement && (state.target.contains(target) && $f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) state.target.click();
330
320
  }
331
321
  };
332
322
  if (typeof PointerEvent !== 'undefined') {
@@ -614,7 +604,7 @@ function $f6c31cce2adf654f$var$isOverTarget(point, target) {
614
604
  }
615
605
  function $f6c31cce2adf654f$var$shouldPreventDefault(target) {
616
606
  // We cannot prevent default if the target is a draggable element.
617
- return !target.draggable;
607
+ return !(target instanceof HTMLElement) || !target.draggable;
618
608
  }
619
609
  function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target) {
620
610
  return !((target.tagName === 'INPUT' || target.tagName === 'BUTTON') && target.type === 'submit');
@@ -624,8 +614,9 @@ function $f6c31cce2adf654f$var$isVirtualPointerEvent(event) {
624
614
  // Android TalkBack double tap will sometimes return a event with width and height of 1
625
615
  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
626
616
  // 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
- return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0;
617
+ // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
618
+ // Talkback double tap from Windows Firefox touch screen press
619
+ return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
629
620
  }
630
621
 
631
622
 
@@ -646,9 +637,6 @@ const $3b117e43dc0ca95d$export$27c701ed9e449e99 = /*#__PURE__*/ $bx7SL$react.for
646
637
  });
647
638
 
648
639
 
649
- var $f1ab8c75478c6f73$exports = {};
650
-
651
- $parcel$export($f1ab8c75478c6f73$exports, "PressResponder", () => $f1ab8c75478c6f73$export$3351871ee4b288b8);
652
640
 
653
641
 
654
642
 
@@ -674,46 +662,41 @@ const $f1ab8c75478c6f73$export$3351871ee4b288b8 = /*#__PURE__*/ $bx7SL$react.for
674
662
  });
675
663
 
676
664
 
677
- var $a1ea59d68270f0dd$exports = {};
678
665
 
679
- $parcel$export($a1ea59d68270f0dd$exports, "useFocus", () => $a1ea59d68270f0dd$export$f8168d8dd8fd66e6);
680
666
 
681
667
  function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
682
- let onBlur;
683
- if (!props.isDisabled && (props.onBlur || props.onFocusChange)) onBlur = (e)=>{
668
+ let { isDisabled: isDisabled , onFocus: onFocusProp , onBlur: onBlurProp , onFocusChange: onFocusChange } = props;
669
+ const onBlur = $bx7SL$useCallback((e)=>{
684
670
  if (e.target === e.currentTarget) {
685
- if (props.onBlur) props.onBlur(e);
686
- if (props.onFocusChange) props.onFocusChange(false);
671
+ if (onBlurProp) onBlurProp(e);
672
+ if (onFocusChange) onFocusChange(false);
687
673
  return true;
688
674
  }
689
- };
690
- else onBlur = null;
691
- let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
692
- let onFocus;
693
- if (!props.isDisabled && (props.onFocus || props.onFocusChange || props.onBlur)) onFocus = (e)=>{
675
+ }, [
676
+ onBlurProp,
677
+ onFocusChange
678
+ ]);
679
+ const onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
680
+ const onFocus = $bx7SL$useCallback((e)=>{
694
681
  if (e.target === e.currentTarget) {
695
- if (props.onFocus) props.onFocus(e);
696
- if (props.onFocusChange) props.onFocusChange(true);
682
+ if (onFocusProp) onFocusProp(e);
683
+ if (onFocusChange) onFocusChange(true);
697
684
  onSyntheticFocus(e);
698
685
  }
699
- };
686
+ }, [
687
+ onFocusChange,
688
+ onFocusProp,
689
+ onSyntheticFocus
690
+ ]);
700
691
  return {
701
692
  focusProps: {
702
- onFocus: onFocus,
703
- onBlur: onBlur
693
+ onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
694
+ onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : null
704
695
  }
705
696
  };
706
697
  }
707
698
 
708
699
 
709
- var $507fabe10e71c6fb$exports = {};
710
-
711
- $parcel$export($507fabe10e71c6fb$exports, "isFocusVisible", () => $507fabe10e71c6fb$export$b9b3dfddab17db27);
712
- $parcel$export($507fabe10e71c6fb$exports, "getInteractionModality", () => $507fabe10e71c6fb$export$630ff653c5ada6a9);
713
- $parcel$export($507fabe10e71c6fb$exports, "setInteractionModality", () => $507fabe10e71c6fb$export$8397ddfc504fdb9a);
714
- $parcel$export($507fabe10e71c6fb$exports, "useInteractionModality", () => $507fabe10e71c6fb$export$98e20ec92f614cfe);
715
- $parcel$export($507fabe10e71c6fb$exports, "useFocusVisible", () => $507fabe10e71c6fb$export$ffd9e5021c1fb2d6);
716
- $parcel$export($507fabe10e71c6fb$exports, "useFocusVisibleListener", () => $507fabe10e71c6fb$export$ec71b4b83ac08ec3);
717
700
 
718
701
 
719
702
 
@@ -871,33 +854,45 @@ function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
871
854
  }
872
855
 
873
856
 
874
- var $9ab94262bd0047c7$exports = {};
875
-
876
- $parcel$export($9ab94262bd0047c7$exports, "useFocusWithin", () => $9ab94262bd0047c7$export$420e68273165f4ec);
877
857
 
878
858
 
879
859
  function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
860
+ let { isDisabled: isDisabled , onBlurWithin: onBlurWithin , onFocusWithin: onFocusWithin , onFocusWithinChange: onFocusWithinChange } = props;
880
861
  let state = $bx7SL$useRef({
881
862
  isFocusWithin: false
882
- }).current;
883
- let onBlur = props.isDisabled ? null : (e)=>{
863
+ });
864
+ let onBlur = $bx7SL$useCallback((e)=>{
884
865
  // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
885
866
  // when moving focus inside the element. Only trigger if the currentTarget doesn't
886
867
  // include the relatedTarget (where focus is moving).
887
- if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
888
- state.isFocusWithin = false;
889
- if (props.onBlurWithin) props.onBlurWithin(e);
890
- if (props.onFocusWithinChange) props.onFocusWithinChange(false);
868
+ if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
869
+ state.current.isFocusWithin = false;
870
+ if (onBlurWithin) onBlurWithin(e);
871
+ if (onFocusWithinChange) onFocusWithinChange(false);
891
872
  }
892
- };
873
+ }, [
874
+ onBlurWithin,
875
+ onFocusWithinChange,
876
+ state
877
+ ]);
893
878
  let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
894
- let onFocus = props.isDisabled ? null : (e)=>{
895
- if (!state.isFocusWithin) {
896
- if (props.onFocusWithin) props.onFocusWithin(e);
897
- if (props.onFocusWithinChange) props.onFocusWithinChange(true);
898
- state.isFocusWithin = true;
879
+ let onFocus = $bx7SL$useCallback((e)=>{
880
+ if (!state.current.isFocusWithin) {
881
+ if (onFocusWithin) onFocusWithin(e);
882
+ if (onFocusWithinChange) onFocusWithinChange(true);
883
+ state.current.isFocusWithin = true;
899
884
  onSyntheticFocus(e);
900
885
  }
886
+ }, [
887
+ onFocusWithin,
888
+ onFocusWithinChange,
889
+ onSyntheticFocus
890
+ ]);
891
+ if (isDisabled) return {
892
+ focusWithinProps: {
893
+ onFocus: null,
894
+ onBlur: null
895
+ }
901
896
  };
902
897
  return {
903
898
  focusWithinProps: {
@@ -908,9 +903,6 @@ function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
908
903
  }
909
904
 
910
905
 
911
- var $6179b936705e76d3$exports = {};
912
-
913
- $parcel$export($6179b936705e76d3$exports, "useHover", () => $6179b936705e76d3$export$ae780daf29e6d456);
914
906
 
915
907
  // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
916
908
  // We want to ignore these emulated events so they do not trigger hover behavior.
@@ -1030,9 +1022,6 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
1030
1022
  }
1031
1023
 
1032
1024
 
1033
- var $e0b6e0b68ec7f50f$exports = {};
1034
-
1035
- $parcel$export($e0b6e0b68ec7f50f$exports, "useInteractOutside", () => $e0b6e0b68ec7f50f$export$872b660ac5a1ff98);
1036
1025
 
1037
1026
  function $e0b6e0b68ec7f50f$export$872b660ac5a1ff98(props) {
1038
1027
  let { ref: ref , onInteractOutside: onInteractOutside , isDisabled: isDisabled , onInteractOutsideStart: onInteractOutsideStart } = props;
@@ -1111,9 +1100,6 @@ function $e0b6e0b68ec7f50f$var$isValidEvent(event, ref) {
1111
1100
  }
1112
1101
 
1113
1102
 
1114
- var $46d819fcbaf35654$exports = {};
1115
-
1116
- $parcel$export($46d819fcbaf35654$exports, "useKeyboard", () => $46d819fcbaf35654$export$8f71654801c2f7cd);
1117
1103
  function $93925083ecbb358c$export$48d1ea6320830260(handler) {
1118
1104
  if (!handler) return;
1119
1105
  let shouldStopPropagation = true;
@@ -1150,9 +1136,6 @@ function $46d819fcbaf35654$export$8f71654801c2f7cd(props) {
1150
1136
  }
1151
1137
 
1152
1138
 
1153
- var $e8a7022cf87cba2a$exports = {};
1154
-
1155
- $parcel$export($e8a7022cf87cba2a$exports, "useMove", () => $e8a7022cf87cba2a$export$36da96379f79f245);
1156
1139
 
1157
1140
 
1158
1141
 
@@ -1367,9 +1350,6 @@ function $e8a7022cf87cba2a$export$36da96379f79f245(props) {
1367
1350
 
1368
1351
 
1369
1352
 
1370
- var $7d0a636d7a4dcefd$exports = {};
1371
-
1372
- $parcel$export($7d0a636d7a4dcefd$exports, "useScrollWheel", () => $7d0a636d7a4dcefd$export$2123ff2b87c81ca);
1373
1353
 
1374
1354
 
1375
1355
  function $7d0a636d7a4dcefd$export$2123ff2b87c81ca(props, ref) {
@@ -1391,9 +1371,6 @@ function $7d0a636d7a4dcefd$export$2123ff2b87c81ca(props, ref) {
1391
1371
  }
1392
1372
 
1393
1373
 
1394
- var $8a26561d2877236e$exports = {};
1395
-
1396
- $parcel$export($8a26561d2877236e$exports, "useLongPress", () => $8a26561d2877236e$export$c24ed0104d07eab9);
1397
1374
 
1398
1375
 
1399
1376