@react-aria/interactions 3.6.0 → 3.7.0

package/dist/main.js

@@ -13,12 +13,14 @@ var {
 
 var {
   mergeProps,
+  isIOS,
   runAfterTransition,
   focusWithoutScrolling,
   useGlobalListeners,
   useSyncRef,
   isMac,
-  useEvent
+  useEvent,
+  useDescription
 } = require("@react-aria/utils");
 
 var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -29,43 +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() {
-  if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'default') {
-    $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
-    document.documentElement.style.webkitUserSelect = 'none';
-  }
+function $ce801cc8e3ff24b95c928e0152c7b7f2$export$disableTextSelection(target) {
+  if (isIOS()) {
+    if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state === 'default') {
+      $ce801cc8e3ff24b95c928e0152c7b7f2$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = 'none';
+    }
 
-  $ce801cc8e3ff24b95c928e0152c7b7f2$var$state = 'disabled';
+    $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';
+  }
 }
 
-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.
-  if ($ce801cc8e3ff24b95c928e0152c7b7f2$var$state !== 'disabled') {
-    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);
+    }
+  }
 }
 
 /*
@@ -136,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 = {
@@ -283,7 +314,10 @@ function usePress(props) {
         state.activePointerId = null;
         state.pointerType = null;
         removeAllGlobalListeners();
-        $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
+
+        if (!allowTextSelectionOnPress) {
+          $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(state.target);
+        }
       }
     };
 
@@ -326,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);
@@ -349,11 +383,12 @@ function usePress(props) {
         e.preventDefault();
         e.stopPropagation();
         state.isPressed = false;
-        triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
+        let target = e.target;
+        triggerPressEnd($ed8d760564e19d8c7d03a6a4$var$createEvent(state.target, e), 'keyboard', state.target.contains(target));
         removeAllGlobalListeners(); // If the target is a link, trigger the click method to open the URL,
         // but defer triggering pressEnd until onClick event handler.
 
-        if (e.target === state.target && $ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
+        if (state.target.contains(target) && $ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
           state.target.click();
         }
       }
@@ -364,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) {
@@ -387,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);
@@ -413,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
@@ -421,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.
@@ -461,7 +507,10 @@ function usePress(props) {
           state.activePointerId = null;
           state.pointerType = null;
           removeAllGlobalListeners();
-          $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection();
+
+          if (!allowTextSelectionOnPress) {
+            $ce801cc8e3ff24b95c928e0152c7b7f2$export$restoreTextSelection(state.target);
+          }
         }
       };
 
@@ -596,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);
       };
@@ -653,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();
       };
 
@@ -691,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)
@@ -712,6 +772,7 @@ function $ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(target) {
 function $ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(event) {
   const {
     key,
+    code,
     target
   } = event;
   const element = target;
@@ -722,7 +783,7 @@ function $ed8d760564e19d8c7d03a6a4$var$isValidKeyboardEvent(event) {
   const role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only.
   // "Spacebar" is for IE 11
 
-  return (key === 'Enter' || key === ' ' || key === 'Spacebar') && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && isContentEditable !== true && ( // A link with a valid href should be handled natively,
+  return (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && isContentEditable !== true && ( // A link with a valid href should be handled natively,
   // unless it also has role='button' and was triggered using Space.
   !$ed8d760564e19d8c7d03a6a4$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
   !(role === 'link' && key !== 'Enter');
@@ -802,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) => {
@@ -940,7 +1005,7 @@ function $b83372066b2b4e1d9257843b2455c$var$triggerChangeHandlers(modality, e) {
 
 function $b83372066b2b4e1d9257843b2455c$var$isValidKey(e) {
   // Control and Shift keys trigger when navigating back to the tab with keyboard.
-  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.type === 'keyup' && (e.key === 'Control' || e.key === 'Shift'));
+  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
 }
 
 function $b83372066b2b4e1d9257843b2455c$var$handleKeyboardEvent(e) {
@@ -1281,7 +1346,7 @@ function useHover(props) {
       }
 
       state.isHovered = true;
-      let target = event.target;
+      let target = event.currentTarget;
       state.target = target;
 
       if (onHoverStart) {
@@ -1308,7 +1373,7 @@ function useHover(props) {
       }
 
       state.isHovered = false;
-      let target = event.target;
+      let target = event.currentTarget;
 
       if (onHoverEnd) {
         onHoverEnd({
@@ -1371,7 +1436,7 @@ function useHover(props) {
     // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
     if (isDisabled) {
       triggerHoverEnd({
-        target: state.target
+        currentTarget: state.target
       }, state.pointerType);
     }
   }, [isDisabled]);
@@ -1811,4 +1876,93 @@ function useScrollWheel(props, ref) {
 }
 
 exports.useScrollWheel = useScrollWheel;
+const $c770c63e4e3d986910ca483d5a$var$DEFAULT_THRESHOLD = 500;
+/**
+ * Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
+ * accessibility description, and normalizes behavior across browsers and devices.
+ */
+
+function useLongPress(props) {
+  let {
+    isDisabled,
+    onLongPressStart,
+    onLongPressEnd,
+    onLongPress,
+    threshold = $c770c63e4e3d986910ca483d5a$var$DEFAULT_THRESHOLD,
+    accessibilityDescription
+  } = props;
+  const timeRef = useRef(null);
+  let {
+    addGlobalListener,
+    removeGlobalListener
+  } = useGlobalListeners();
+  let {
+    pressProps
+  } = usePress({
+    isDisabled,
+
+    onPressStart(e) {
+      if (e.pointerType === 'mouse' || e.pointerType === 'touch') {
+        if (onLongPressStart) {
+          onLongPressStart(_babelRuntimeHelpersExtends({}, e, {
+            type: 'longpressstart'
+          }));
+        }
+
+        timeRef.current = setTimeout(() => {
+          // Prevent other usePress handlers from also handling this event.
+          e.target.dispatchEvent(new PointerEvent('pointercancel', {
+            bubbles: true
+          }));
+
+          if (onLongPress) {
+            onLongPress(_babelRuntimeHelpersExtends({}, e, {
+              type: 'longpress'
+            }));
+          }
+
+          timeRef.current = null;
+        }, threshold); // Prevent context menu, which may be opened on long press on touch devices
+
+        if (e.pointerType === 'touch') {
+          let onContextMenu = e => {
+            e.preventDefault();
+          };
+
+          addGlobalListener(e.target, 'contextmenu', onContextMenu, {
+            once: true
+          });
+          addGlobalListener(window, 'pointerup', () => {
+            // If no contextmenu event is fired quickly after pointerup, remove the handler
+            // so future context menu events outside a long press are not prevented.
+            setTimeout(() => {
+              removeGlobalListener(e.target, 'contextmenu', onContextMenu);
+            }, 30);
+          }, {
+            once: true
+          });
+        }
+      }
+    },
+
+    onPressEnd(e) {
+      if (timeRef.current) {
+        clearTimeout(timeRef.current);
+      }
+
+      if (onLongPressEnd && (e.pointerType === 'mouse' || e.pointerType === 'touch')) {
+        onLongPressEnd(_babelRuntimeHelpersExtends({}, e, {
+          type: 'longpressend'
+        }));
+      }
+    }
+
+  });
+  let descriptionProps = useDescription(onLongPress && !isDisabled ? accessibilityDescription : null);
+  return {
+    longPressProps: mergeProps(pressProps, descriptionProps)
+  };
+}
+
+exports.useLongPress = useLongPress;
 //# sourceMappingURL=main.js.map