@react-aria/interactions 3.6.0 → 3.7.0

package/dist/module.js

@@ -1,44 +1,72 @@
 import _react, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
-import { mergeProps, runAfterTransition, focusWithoutScrolling, useGlobalListeners, useSyncRef, isMac, useEvent } from "@react-aria/utils";
+import { mergeProps, isIOS, runAfterTransition, focusWithoutScrolling, useGlobalListeners, useSyncRef, isMac, useEvent, useDescription } from "@react-aria/utils";
 import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
+// 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 $e17c9db826984f8ab8e5d837bf0b8$var$state = 'default';
 let $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = '';
+let $e17c9db826984f8ab8e5d837bf0b8$var$modifiedElementMap = new WeakMap();
 
-function $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection() {
-  if ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'default') {
-    $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
-    document.documentElement.style.webkitUserSelect = 'none';
-  }
+function $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection(target) {
+  if (isIOS()) {
+    if ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'default') {
+      $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = 'none';
+    }
 
-  $e17c9db826984f8ab8e5d837bf0b8$var$state = 'disabled';
+    $e17c9db826984f8ab8e5d837bf0b8$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
+    $e17c9db826984f8ab8e5d837bf0b8$var$modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
+  }
 }
 
-function $e17c9db826984f8ab8e5d837bf0b8$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 ($e17c9db826984f8ab8e5d837bf0b8$var$state !== 'disabled') {
-    return;
-  }
+function $e17c9db826984f8ab8e5d837bf0b8$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 ($e17c9db826984f8ab8e5d837bf0b8$var$state !== 'disabled') {
+      return;
+    }
 
-  $e17c9db826984f8ab8e5d837bf0b8$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.
+    $e17c9db826984f8ab8e5d837bf0b8$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 ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'restoring') {
+          if (document.documentElement.style.webkitUserSelect === 'none') {
+            document.documentElement.style.webkitUserSelect = $e17c9db826984f8ab8e5d837bf0b8$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 ($e17c9db826984f8ab8e5d837bf0b8$var$state === 'restoring') {
-        if (document.documentElement.style.webkitUserSelect === 'none') {
-          document.documentElement.style.webkitUserSelect = $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect || '';
+          $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = '';
+          $e17c9db826984f8ab8e5d837bf0b8$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 && $e17c9db826984f8ab8e5d837bf0b8$var$modifiedElementMap.has(target)) {
+      let targetOldUserSelect = $e17c9db826984f8ab8e5d837bf0b8$var$modifiedElementMap.get(target);
 
-        $e17c9db826984f8ab8e5d837bf0b8$var$savedUserSelect = '';
-        $e17c9db826984f8ab8e5d837bf0b8$var$state = 'default';
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
       }
-    });
-  }, 300);
+
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
+      }
+
+      $e17c9db826984f8ab8e5d837bf0b8$var$modifiedElementMap.delete(target);
+    }
+  }
 }
 
 /*
@@ -109,9 +137,10 @@ export function usePress(props) {
     isDisabled,
     isPressed: isPressedProp,
     preventFocusOnPress,
-    shouldCancelOnPointerExit
+    shouldCancelOnPointerExit,
+    allowTextSelectionOnPress
   } = _usePressResponderCon,
-      domProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "ref"]);
+      domProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_usePressResponderCon, ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "allowTextSelectionOnPress", "ref"]);
 
   let propsRef = useRef(null);
   propsRef.current = {
@@ -256,7 +285,10 @@ export function usePress(props) {
         state.activePointerId = null;
         state.pointerType = null;
         removeAllGlobalListeners();
-        $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+
+        if (!allowTextSelectionOnPress) {
+          $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection(state.target);
+        }
       }
     };
 
@@ -299,7 +331,7 @@ export function usePress(props) {
           // trigger as if it were a keyboard click.
 
 
-          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && $f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(e.nativeEvent)) {
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $f67ef9f1b8ed09b4b00fd0840cd8b94b$export$isVirtualClick(e.nativeEvent))) {
             // Ensure the element receives focus (VoiceOver on iOS does not do this)
             if (!isDisabled && !preventFocusOnPress) {
               focusWithoutScrolling(e.currentTarget);
@@ -322,11 +354,12 @@ export function usePress(props) {
         e.preventDefault();
         e.stopPropagation();
         state.isPressed = false;
-        triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$var$createEvent(state.target, e), 'keyboard', e.target === state.target);
+        let target = e.target;
+        triggerPressEnd($ffc54430b1dbeee65879852feaaff07d$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 && $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
+        if (state.target.contains(target) && $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
           state.target.click();
         }
       }
@@ -337,17 +370,24 @@ export 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 ($ffc54430b1dbeee65879852feaaff07d$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 ($ffc54430b1dbeee65879852feaaff07d$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 = $ffc54430b1dbeee65879852feaaff07d$var$isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
+        state.pointerType = e.pointerType;
         e.stopPropagation();
 
         if (!state.isPressed) {
@@ -360,7 +400,10 @@ export function usePress(props) {
             focusWithoutScrolling(e.currentTarget);
           }
 
-          $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection();
+          if (!allowTextSelectionOnPress) {
+            $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection(state.target);
+          }
+
           triggerPressStart(e, state.pointerType);
           addGlobalListener(document, 'pointermove', onPointerMove, false);
           addGlobalListener(document, 'pointerup', onPointerUp, false);
@@ -386,7 +429,8 @@ export 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
@@ -394,7 +438,7 @@ export function usePress(props) {
 
 
         if (e.button === 0 && $ffc54430b1dbeee65879852feaaff07d$var$isOverTarget(e, e.currentTarget)) {
-          triggerPressUp(e, state.pointerType || ($ffc54430b1dbeee65879852feaaff07d$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.
@@ -434,7 +478,10 @@ export function usePress(props) {
           state.activePointerId = null;
           state.pointerType = null;
           removeAllGlobalListeners();
-          $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+
+          if (!allowTextSelectionOnPress) {
+            $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection(state.target);
+          }
         }
       };
 
@@ -569,7 +616,10 @@ export function usePress(props) {
           focusWithoutScrolling(e.currentTarget);
         }
 
-        $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection();
+        if (!allowTextSelectionOnPress) {
+          $e17c9db826984f8ab8e5d837bf0b8$export$disableTextSelection(state.target);
+        }
+
         triggerPressStart(e, state.pointerType);
         addGlobalListener(window, 'scroll', onScroll, true);
       };
@@ -626,7 +676,11 @@ export function usePress(props) {
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
-        $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
+
+        if (!allowTextSelectionOnPress) {
+          $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection(state.target);
+        }
+
         removeAllGlobalListeners();
       };
 
@@ -664,12 +718,16 @@ export 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 () => $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection();
-  }, []);
+    return () => {
+      if (!allowTextSelectionOnPress) {
+        $e17c9db826984f8ab8e5d837bf0b8$export$restoreTextSelection(ref.current.target);
+      }
+    };
+  }, [allowTextSelectionOnPress]);
   return {
     isPressed: isPressedProp || isPressed,
     pressProps: mergeProps(domProps, pressProps)
@@ -683,6 +741,7 @@ function $ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(target) {
 function $ffc54430b1dbeee65879852feaaff07d$var$isValidKeyboardEvent(event) {
   const {
     key,
+    code,
     target
   } = event;
   const element = target;
@@ -693,7 +752,7 @@ function $ffc54430b1dbeee65879852feaaff07d$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.
   !$ffc54430b1dbeee65879852feaaff07d$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
   !(role === 'link' && key !== 'Enter');
@@ -773,7 +832,11 @@ function $ffc54430b1dbeee65879852feaaff07d$var$shouldPreventDefault(target) {
 
 function $ffc54430b1dbeee65879852feaaff07d$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;
 }
 
 export const Pressable = /*#__PURE__*/_react.forwardRef((_ref, ref) => {
@@ -903,7 +966,7 @@ function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$triggerChangeHandlers(modality, e
 
 function $d01f69bb2ab5f70dfd0005370a2a2cbc$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 $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleKeyboardEvent(e) {
@@ -1225,7 +1288,7 @@ export function useHover(props) {
       }
 
       state.isHovered = true;
-      let target = event.target;
+      let target = event.currentTarget;
       state.target = target;
 
       if (onHoverStart) {
@@ -1252,7 +1315,7 @@ export function useHover(props) {
       }
 
       state.isHovered = false;
-      let target = event.target;
+      let target = event.currentTarget;
 
       if (onHoverEnd) {
         onHoverEnd({
@@ -1315,7 +1378,7 @@ export 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]);
@@ -1744,4 +1807,91 @@ export function useScrollWheel(props, ref) {
   }, [onScroll]);
   useEvent(ref, 'wheel', isDisabled ? null : onScrollHandler);
 }
+const $cd8e0096d064b4c36af8a188dfbda75c$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.
+ */
+
+export function useLongPress(props) {
+  let {
+    isDisabled,
+    onLongPressStart,
+    onLongPressEnd,
+    onLongPress,
+    threshold = $cd8e0096d064b4c36af8a188dfbda75c$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(_babelRuntimeHelpersEsmExtends({}, 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(_babelRuntimeHelpersEsmExtends({}, 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(_babelRuntimeHelpersEsmExtends({}, e, {
+          type: 'longpressend'
+        }));
+      }
+    }
+
+  });
+  let descriptionProps = useDescription(onLongPress && !isDisabled ? accessibilityDescription : null);
+  return {
+    longPressProps: mergeProps(pressProps, descriptionProps)
+  };
+}
 //# sourceMappingURL=module.js.map