@react-aria/interactions 3.0.0-nightly.1289 → 3.0.0-nightly.1299

package/dist/main.js

@@ -31,51 +31,71 @@ function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
 
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
 let $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'default';
 let $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = '';
+let $ce801cc8e3ff24b95c928e0152c7b7f2$var$modifiedElementMap = new WeakMap();
 
-function $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection() {
-  // Limit this behavior to iOS only. Android devices don't text select nearby element
-  // when long pressing on a different element.
-  if (!isIOS()) {
-    return;
-  }
+function $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection(target) {
+  if (isIOS()) {
+    if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'default') {
+      $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = 'none';
+    }
 
-  if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'default') {
-    $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
-    document.documentElement.style.webkitUserSelect = 'none';
+    $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'disabled';
+  } else if (target) {
+    // If not iOS, store the target's original user-select and change to user-select: none
+    // Ignore state since it doesn't apply for non iOS
+    $ce801cc8e3ff24b95c928e0152c7b7f2$var$modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
   }
-
-  $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'disabled';
 }
 
-function $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection() {
-  // If the state is already default, there's nothing to do.
-  // If it is restoring, then there's no need to queue a second restore.
-  // Limit this behavior to iOS only. Android devices don't text select nearby element
-  // when long pressing on a different element.
-  if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state !== 'disabled' || !isIOS()) {
-    return;
-  }
+function $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(target) {
+  if (isIOS()) {
+    // If the state is already default, there's nothing to do.
+    // If it is restoring, then there's no need to queue a second restore.
+    if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state !== 'disabled') {
+      return;
+    }
 
-  $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'restoring'; // There appears to be a delay on iOS where selection still might occur
-  // after pointer up, so wait a bit before removing user-select.
+    $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'restoring'; // There appears to be a delay on iOS where selection still might occur
+    // after pointer up, so wait a bit before removing user-select.
+
+    setTimeout(() => {
+      // Wait for any CSS transitions to complete so we don't recompute style
+      // for the whole page in the middle of the animation and cause jank.
+      runAfterTransition(() => {
+        // Avoid race conditions
+        if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'restoring') {
+          if (document.documentElement.style.webkitUserSelect === 'none') {
+            document.documentElement.style.webkitUserSelect = $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect || '';
+          }
 
-  setTimeout(() => {
-    // Wait for any CSS transitions to complete so we don't recompute style
-    // for the whole page in the middle of the animation and cause jank.
-    runAfterTransition(() => {
-      // Avoid race conditions
-      if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'restoring') {
-        if (document.documentElement.style.webkitUserSelect === 'none') {
-          document.documentElement.style.webkitUserSelect = $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect || '';
+          $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = '';
+          $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'default';
         }
+      });
+    }, 300);
+  } else {
+    // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    if (target && $ce801cc8e3ff24b95c928e0152c7b7f2$var$modifiedElementMap.has(target)) {
+      let targetOldUserSelect = $ce801cc8e3ff24b95c928e0152c7b7f2$var$modifiedElementMap.get(target);
 
-        $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = '';
-        $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'default';
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
       }
-    });
-  }, 300);
+
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
+      }
+
+      $ce801cc8e3ff24b95c928e0152c7b7f2$var$modifiedElementMap.delete(target);
+    }
+  }
 }
 
 /*
@@ -146,9 +166,10 @@ function usePress(props) {
     isDisabled,
     isPressed: isPressedProp,
     preventFocusOnPress,
-    shouldCancelOnPointerExit
+    shouldCancelOnPointerExit,
+    allowTextSelectionOnPress
   } = _usePressResponderCon,
-      domProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "ref"]);
+      domProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "allowTextSelectionOnPress", "ref"]);
 
   let propsRef = useRef(null);
   propsRef.current = {
@@ -293,7 +314,10 @@ function usePress(props) {
         state.activePointerId = null;
         state.pointerType = null;
         removeAllGlobalListeners();
-        $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
+
+        if (!allowTextSelectionOnPress) {
+          $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(state.target);
+        }
       }
     };
 
@@ -336,7 +360,7 @@ function usePress(props) {
           // trigger as if it were a keyboard click.
 
 
-          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $eda9c464f45e6c61a293990c493$export$isVirtualClick(e.nativeEvent)) {
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $eda9c464f45e6c61a293990c493$export$isVirtualClick(e.nativeEvent))) {
             // Ensure the element receives focus (VoiceOver on iOS does not do this)
             if (!isDisabled && !preventFocusOnPress) {
               focusWithoutScrolling(e.currentTarget);
@@ -375,17 +399,24 @@ function usePress(props) {
         // Only handle left clicks, and ignore events that bubbled through portals.
         if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
           return;
+        } // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target.
+        // Ignore and let the onClick handler take care of it instead.
+        // https://bugs.webkit.org/show_bug.cgi?id=222627
+        // https://bugs.webkit.org/show_bug.cgi?id=223202
+
+
+        if ($ed8d760564e19d8c7d03a6a4$var$isVirtualPointerEvent(e.nativeEvent)) {
+          state.pointerType = 'virtual';
+          return;
         } // Due to browser inconsistencies, especially on mobile browsers, we prevent
         // default on pointer down and handle focusing the pressable element ourselves.
 
 
         if ($ed8d760564e19d8c7d03a6a4$var$shouldPreventDefault(e.target)) {
           e.preventDefault();
-        } // iOS safari fires pointer events from VoiceOver (but only when outside an iframe...)
-        // https://bugs.webkit.org/show_bug.cgi?id=222627
-
+        }
 
-        state.pointerType = $ed8d760564e19d8c7d03a6a4$var$isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
+        state.pointerType = e.pointerType;
         e.stopPropagation();
 
         if (!state.isPressed) {
@@ -398,7 +429,10 @@ function usePress(props) {
             focusWithoutScrolling(e.currentTarget);
           }
 
-          $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection();
+          if (!allowTextSelectionOnPress) {
+            $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection(state.target);
+          }
+
           triggerPressStart(e, state.pointerType);
           addGlobalListener(document, 'pointermove', onPointerMove, false);
           addGlobalListener(document, 'pointerup', onPointerUp, false);
@@ -424,7 +458,8 @@ function usePress(props) {
       };
 
       pressProps.onPointerUp = e => {
-        if (!e.currentTarget.contains(e.target)) {
+        // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
+        if (!e.currentTarget.contains(e.target) || state.pointerType === 'virtual') {
           return;
         } // Only handle left clicks
         // Safari on iOS sometimes fires pointerup events, even
@@ -432,7 +467,7 @@ function usePress(props) {
 
 
         if (e.button === 0 && $ed8d760564e19d8c7d03a6a4$var$isOverTarget(e, e.currentTarget)) {
-          triggerPressUp(e, state.pointerType || ($ed8d760564e19d8c7d03a6a4$var$isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType));
+          triggerPressUp(e, state.pointerType || e.pointerType);
         }
       }; // Safari on iOS < 13.2 does not implement pointerenter/pointerleave events correctly.
       // Use pointer move events instead to implement our own hit testing.
@@ -472,7 +507,10 @@ function usePress(props) {
           state.activePointerId = null;
           state.pointerType = null;
           removeAllGlobalListeners();
-          $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
+
+          if (!allowTextSelectionOnPress) {
+            $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(state.target);
+          }
         }
       };
 
@@ -607,7 +645,10 @@ function usePress(props) {
           focusWithoutScrolling(e.currentTarget);
         }
 
-        $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection();
+        if (!allowTextSelectionOnPress) {
+          $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection(state.target);
+        }
+
         triggerPressStart(e, state.pointerType);
         addGlobalListener(window, 'scroll', onScroll, true);
       };
@@ -664,7 +705,11 @@ function usePress(props) {
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
-        $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
+
+        if (!allowTextSelectionOnPress) {
+          $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(state.target);
+        }
+
         removeAllGlobalListeners();
       };
 
@@ -702,12 +747,16 @@ function usePress(props) {
     }
 
     return pressProps;
-  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners]); // Remove user-select: none in case component unmounts immediately after pressStart
+  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress]); // Remove user-select: none in case component unmounts immediately after pressStart
   // eslint-disable-next-line arrow-body-style
 
   useEffect(() => {
-    return () => $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
-  }, []);
+    return () => {
+      if (!allowTextSelectionOnPress) {
+        $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(ref.current.target);
+      }
+    };
+  }, [allowTextSelectionOnPress]);
   return {
     isPressed: isPressedProp || isPressed,
     pressProps: mergeProps(domProps, pressProps)
@@ -814,7 +863,11 @@ function $ed8d760564e19d8c7d03a6a4$var$shouldPreventDefault(target) {
 
 function $ed8d760564e19d8c7d03a6a4$var$isVirtualPointerEvent(event) {
   // If the pointer size is zero, then we assume it's from a screen reader.
-  return event.width === 0 && event.height === 0;
+  // Android TalkBack double tap will sometimes return a event with width and height of 1
+  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
+  return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0;
 }
 
 const Pressable = /*#__PURE__*/_react.forwardRef((_ref, ref) => {