@react-aria/interactions 3.4.0 → 3.7.0

package/src/useLongPress.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {HTMLAttributes, useRef} from 'react';
+import {LongPressEvent} from '@react-types/shared';
+import {mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
+import {usePress} from './usePress';
+
+interface LongPressProps {
+  /** Whether long press events should be disabled. */
+  isDisabled?: boolean,
+  /** Handler that is called when a long press interaction starts. */
+  onLongPressStart?: (e: LongPressEvent) => void,
+  /**
+   * Handler that is called when a long press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onLongPressEnd?: (e: LongPressEvent) => void,
+  /**
+   * Handler that is called when the threshold time is met while
+   * the press is over the target.
+   */
+  onLongPress?: (e: LongPressEvent) => void,
+  /**
+   * The amount of time in milliseconds to wait before triggering a long press.
+   * @default 500ms
+   */
+  threshold?: number,
+  /**
+   * A description for assistive techology users indicating that a long press
+   * action is available, e.g. "Long press to open menu".
+   */
+  accessibilityDescription?: string
+}
+
+interface LongPressResult {
+  /** Props to spread on the target element. */
+  longPressProps: HTMLAttributes<HTMLElement>
+}
+
+const 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: LongPressProps): LongPressResult {
+  let {
+    isDisabled,
+    onLongPressStart,
+    onLongPressEnd,
+    onLongPress,
+    threshold = 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({
+            ...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({
+              ...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({
+          ...e,
+          type: 'longpressend'
+        });
+      }
+    }
+  });
+
+  let descriptionProps = useDescription(onLongPress && !isDisabled ? accessibilityDescription : null);
+
+  return {
+    longPressProps: mergeProps(pressProps, descriptionProps)
+  };
+}

package/src/usePress.ts

@@ -28,7 +28,16 @@ export interface PressProps extends PressEvents {
   /** Whether the press events should be disabled. */
   isDisabled?: boolean,
   /** Whether the target should not receive focus on press. */
-  preventFocusOnPress?: boolean
+  preventFocusOnPress?: boolean,
+  /**
+   * Whether press events should be canceled when the pointer leaves the target while pressed.
+   * By default, this is `false`, which means if the pointer returns back over the target while
+   * still pressed, onPressStart will be fired again. If set to `true`, the press is canceled
+   * when the pointer leaves the target and onPressStart will not be fired if the pointer returns.
+   */
+  shouldCancelOnPointerExit?: boolean,
+  /** Whether text selection should be enabled on the pressable element. */
+  allowTextSelectionOnPress?: boolean
 }
 
 export interface PressHookProps extends PressProps {
@@ -52,7 +61,8 @@ interface EventBase {
   currentTarget: EventTarget,
   shiftKey: boolean,
   ctrlKey: boolean,
-  metaKey: boolean
+  metaKey: boolean,
+  altKey: boolean
 }
 
 export interface PressResult {
@@ -90,12 +100,14 @@ export function usePress(props: PressHookProps): PressResult {
     isDisabled,
     isPressed: isPressedProp,
     preventFocusOnPress,
+    shouldCancelOnPointerExit,
+    allowTextSelectionOnPress,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ref: _, // Removing `ref` from `domProps` because TypeScript is dumb,
     ...domProps
   } = usePressResponderContext(props);
   let propsRef = useRef<PressHookProps>(null);
-  propsRef.current = {onPress, onPressChange, onPressStart, onPressEnd, onPressUp, isDisabled};
+  propsRef.current = {onPress, onPressChange, onPressStart, onPressEnd, onPressUp, isDisabled, shouldCancelOnPointerExit};
 
   let [isPressed, setPressed] = useState(false);
   let ref = useRef<PressState>({
@@ -126,7 +138,8 @@ export function usePress(props: PressHookProps): PressResult {
           target: originalEvent.currentTarget as HTMLElement,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
         });
       }
 
@@ -154,7 +167,8 @@ export function usePress(props: PressHookProps): PressResult {
           target: originalEvent.currentTarget as HTMLElement,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
         });
       }
 
@@ -171,7 +185,8 @@ export function usePress(props: PressHookProps): PressResult {
           target: originalEvent.currentTarget as HTMLElement,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
         });
       }
     };
@@ -189,7 +204,8 @@ export function usePress(props: PressHookProps): PressResult {
           target: originalEvent.currentTarget as HTMLElement,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
-          ctrlKey: originalEvent.ctrlKey
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
         });
       }
     };
@@ -204,17 +220,18 @@ export function usePress(props: PressHookProps): PressResult {
         state.activePointerId = null;
         state.pointerType = null;
         removeAllGlobalListeners();
-        restoreTextSelection();
+        if (!allowTextSelectionOnPress) {
+          restoreTextSelection(state.target);
+        }
       }
     };
 
     let pressProps: HTMLAttributes<HTMLElement> = {
       onKeyDown(e) {
-        if (isValidKeyboardEvent(e.nativeEvent)) {
+        if (isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target as HTMLElement)) {
           e.preventDefault();
           e.stopPropagation();
 
-
           // If the event is repeating, it may have started on a different element
           // after which focus moved to the current element. Ignore these events and
           // only handle the first key down event.
@@ -230,11 +247,15 @@ export function usePress(props: PressHookProps): PressResult {
         }
       },
       onKeyUp(e) {
-        if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat) {
+        if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target as HTMLElement)) {
           triggerPressUp(createEvent(state.target, e), 'keyboard');
         }
       },
       onClick(e) {
+        if (e && !e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         if (e && e.button === 0) {
           e.stopPropagation();
           if (isDisabled) {
@@ -243,7 +264,7 @@ export function usePress(props: PressHookProps): PressResult {
 
           // If triggered from a screen reader or by using element.click(),
           // trigger as if it were a keyboard click.
-          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && isVirtualClick(e.nativeEvent)) {
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || isVirtualClick(e.nativeEvent))) {
             // Ensure the element receives focus (VoiceOver on iOS does not do this)
             if (!isDisabled && !preventFocusOnPress) {
               focusWithoutScrolling(e.currentTarget);
@@ -266,12 +287,13 @@ export function usePress(props: PressHookProps): PressResult {
         e.stopPropagation();
 
         state.isPressed = false;
-        triggerPressEnd(createEvent(state.target, e), 'keyboard', e.target === state.target);
+        let target = e.target as HTMLElement;
+        triggerPressEnd(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 && isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
+        if (state.target.contains(target) && isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
           state.target.click();
         }
       }
@@ -279,8 +301,17 @@ export function usePress(props: PressHookProps): PressResult {
 
     if (typeof PointerEvent !== 'undefined') {
       pressProps.onPointerDown = (e) => {
-        // Only handle left clicks
-        if (e.button !== 0) {
+        // Only handle left clicks, and ignore events that bubbled through portals.
+        if (e.button !== 0 || !e.currentTarget.contains(e.target as HTMLElement)) {
+          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 (isVirtualPointerEvent(e.nativeEvent)) {
+          state.pointerType = 'virtual';
           return;
         }
 
@@ -290,9 +321,7 @@ export function usePress(props: PressHookProps): PressResult {
           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 = isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
+        state.pointerType = e.pointerType;
 
         e.stopPropagation();
         if (!state.isPressed) {
@@ -305,7 +334,10 @@ export function usePress(props: PressHookProps): PressResult {
             focusWithoutScrolling(e.currentTarget);
           }
 
-          disableTextSelection();
+          if (!allowTextSelectionOnPress) {
+            disableTextSelection(state.target);
+          }
+
           triggerPressStart(e, state.pointerType);
 
           addGlobalListener(document, 'pointermove', onPointerMove, false);
@@ -315,6 +347,10 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseDown = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         if (e.button === 0) {
           // Chrome and Firefox on touch Windows devices require mouse down events
           // to be canceled in addition to pointer events, or an extra asynchronous
@@ -328,11 +364,16 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onPointerUp = (e) => {
+        // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
+        if (!e.currentTarget.contains(e.target as HTMLElement) || state.pointerType === 'virtual') {
+          return;
+        }
+
         // Only handle left clicks
         // Safari on iOS sometimes fires pointerup events, even
         // when the touch isn't over the target, so double check.
         if (e.button === 0 && isOverTarget(e, e.currentTarget)) {
-          triggerPressUp(e, state.pointerType);
+          triggerPressUp(e, state.pointerType || e.pointerType);
         }
       };
 
@@ -352,6 +393,9 @@ export function usePress(props: PressHookProps): PressResult {
         } else if (state.isOverTarget) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit) {
+            cancel(e);
+          }
         }
       };
 
@@ -368,7 +412,9 @@ export function usePress(props: PressHookProps): PressResult {
           state.activePointerId = null;
           state.pointerType = null;
           removeAllGlobalListeners();
-          restoreTextSelection();
+          if (!allowTextSelectionOnPress) {
+            restoreTextSelection(state.target);
+          }
         }
       };
 
@@ -377,13 +423,17 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onDragStart = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
         cancel(e);
       };
     } else {
       pressProps.onMouseDown = (e) => {
         // Only handle left clicks
-        if (e.button !== 0) {
+        if (e.button !== 0 || !e.currentTarget.contains(e.target as HTMLElement)) {
           return;
         }
 
@@ -413,6 +463,10 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseEnter = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
           state.isOverTarget = true;
@@ -421,14 +475,25 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseLeave = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
           state.isOverTarget = false;
           triggerPressEnd(e, state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit) {
+            cancel(e);
+          }
         }
       };
 
       pressProps.onMouseUp = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         if (!state.ignoreEmulatedMouseEvents && e.button === 0) {
           triggerPressUp(e, state.pointerType);
         }
@@ -458,6 +523,10 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchStart = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         let touch = getTouchFromEvent(e.nativeEvent);
         if (!touch) {
@@ -476,13 +545,20 @@ export function usePress(props: PressHookProps): PressResult {
           focusWithoutScrolling(e.currentTarget);
         }
 
-        disableTextSelection();
+        if (!allowTextSelectionOnPress) {
+          disableTextSelection(state.target);
+        }
+
         triggerPressStart(e, state.pointerType);
 
         addGlobalListener(window, 'scroll', onScroll, true);
       };
 
       pressProps.onTouchMove = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         if (!state.isPressed) {
           return;
@@ -497,10 +573,17 @@ export function usePress(props: PressHookProps): PressResult {
         } else if (state.isOverTarget) {
           state.isOverTarget = false;
           triggerPressEnd(e, state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit) {
+            cancel(e);
+          }
         }
       };
 
       pressProps.onTouchEnd = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         if (!state.isPressed) {
           return;
@@ -518,11 +601,17 @@ export function usePress(props: PressHookProps): PressResult {
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
-        restoreTextSelection();
+        if (!allowTextSelectionOnPress) {
+          restoreTextSelection(state.target);
+        }
         removeAllGlobalListeners();
       };
 
       pressProps.onTouchCancel = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         e.stopPropagation();
         if (state.isPressed) {
           cancel(e);
@@ -535,24 +624,33 @@ export function usePress(props: PressHookProps): PressResult {
             currentTarget: state.target,
             shiftKey: false,
             ctrlKey: false,
-            metaKey: false
+            metaKey: false,
+            altKey: false
           });
         }
       };
 
       pressProps.onDragStart = (e) => {
+        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+          return;
+        }
+
         cancel(e);
       };
     }
 
     return pressProps;
-  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners]);
+  }, [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 () => restoreTextSelection();
-  }, []);
+    return () => {
+      if (!allowTextSelectionOnPress) {
+        restoreTextSelection(ref.current.target);
+      }
+    };
+  }, [allowTextSelectionOnPress]);
 
   return {
     isPressed: isPressedProp || isPressed,
@@ -565,14 +663,14 @@ function isHTMLAnchorLink(target: HTMLElement): boolean {
 }
 
 function isValidKeyboardEvent(event: KeyboardEvent): boolean {
-  const {key, target} = event;
+  const {key, code, target} = event;
   const element = target as HTMLElement;
   const {tagName, isContentEditable} = element;
   const role = element.getAttribute('role');
   // Accessibility for keyboards. Space and Enter only.
   // "Spacebar" is for IE 11
   return (
-    (key === 'Enter' || key === ' ' || key === 'Spacebar') &&
+    (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
     (tagName !== 'INPUT' &&
       tagName !== 'TEXTAREA' &&
       isContentEditable !== true) &&
@@ -611,21 +709,55 @@ function createEvent(target: HTMLElement, e: EventBase): EventBase {
     currentTarget: target,
     shiftKey: e.shiftKey,
     ctrlKey: e.ctrlKey,
-    metaKey: e.metaKey
+    metaKey: e.metaKey,
+    altKey: e.altKey
   };
 }
 
+interface Rect {
+  top: number,
+  right: number,
+  bottom: number,
+  left: number
+}
+
 interface EventPoint {
   clientX: number,
-  clientY: number
+  clientY: number,
+  width?: number,
+  height?: number,
+  radiusX?: number,
+  radiusY?: number
+}
+
+function getPointClientRect(point: EventPoint): Rect {
+  let offsetX = (point.width / 2) || point.radiusX || 0;
+  let offsetY = (point.height / 2) || point.radiusY || 0;
+
+  return {
+    top: point.clientY - offsetY,
+    right: point.clientX + offsetX,
+    bottom: point.clientY + offsetY,
+    left: point.clientX - offsetX
+  };
+}
+
+function areRectanglesOverlapping(a: Rect, b: Rect) {
+  // check if they cannot overlap on x axis
+  if (a.left > b.right || b.left > a.right) {
+    return false;
+  }
+  // check if they cannot overlap on y axis
+  if (a.top > b.bottom || b.top > a.bottom) {
+    return false;
+  }
+  return true;
 }
 
 function isOverTarget(point: EventPoint, target: HTMLElement) {
   let rect = target.getBoundingClientRect();
-  return (point.clientX || 0) >= (rect.left || 0) &&
-    (point.clientX || 0) <= (rect.right || 0) &&
-    (point.clientY || 0) >= (rect.top || 0) &&
-    (point.clientY || 0) <= (rect.bottom || 0);
+  let pointRect = getPointClientRect(point);
+  return areRectanglesOverlapping(rect, pointRect);
 }
 
 function shouldPreventDefault(target: Element) {
@@ -635,5 +767,16 @@ function shouldPreventDefault(target: Element) {
 
 function isVirtualPointerEvent(event: PointerEvent) {
   // 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
+    )
+  );
 }

package/src/useScrollWheel.ts

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject, useCallback, useEffect} from 'react';
+import {RefObject, useCallback} from 'react';
 import {ScrollEvents} from '@react-types/shared';
+import {useEvent} from '@react-aria/utils';
 
 export interface ScrollWheelProps extends ScrollEvents {
   /** Whether the scroll listener should be disabled. */
@@ -36,15 +37,5 @@ export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLEleme
     }
   }, [onScroll]);
 
-  useEffect(() => {
-    let elem = ref.current;
-    if (isDisabled) {
-      return;
-    }
-    elem.addEventListener('wheel', onScrollHandler);
-
-    return () => {
-      elem.removeEventListener('wheel', onScrollHandler);
-    };
-  }, [onScrollHandler, ref, isDisabled]);
+  useEvent(ref, 'wheel', isDisabled ? null : onScrollHandler);
 }