@react-aria/interactions 3.24.1 → 3.25.1

package/src/PressResponder.tsx

@@ -14,7 +14,7 @@ import {FocusableElement} from '@react-types/shared';
 import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
 import {PressProps} from './usePress';
 import {PressResponderContext} from './context';
-import React, {ForwardedRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {ForwardedRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
 interface PressResponderProps extends PressProps {
   children: ReactNode
@@ -39,10 +39,12 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
 
   useEffect(() => {
     if (!isRegistered.current) {
-      console.warn(
-        'A PressResponder was rendered without a pressable child. ' +
-        'Either call the usePress hook, or wrap your DOM node with <Pressable> component.'
-      );
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          'A PressResponder was rendered without a pressable child. ' +
+          'Either call the usePress hook, or wrap your DOM node with <Pressable> component.'
+        );
+      }
       isRegistered.current = true; // only warn once in strict mode.
     }
   }, []);
@@ -54,7 +56,7 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
   );
 });
 
-export function ClearPressResponder({children}: {children: ReactNode}) {
+export function ClearPressResponder({children}: {children: ReactNode}): JSX.Element {
   let context = useMemo(() => ({register: () => {}}), []);
   return (
     <PressResponderContext.Provider value={context}>

package/src/Pressable.tsx

@@ -27,6 +27,10 @@ export const Pressable = React.forwardRef(({children, ...props}: PressableProps,
   let child = React.Children.only(children);
 
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+    
     let el = ref.current;
     if (!el || !(el instanceof getOwnerWindow(el).Element)) {
       console.error('<Pressable> child must forward its ref to a DOM element.');

package/src/createEventHandler.ts

@@ -32,7 +32,7 @@ export function createEventHandler<T extends SyntheticEvent>(handler?: (e: BaseE
         return e.isDefaultPrevented();
       },
       stopPropagation() {
-        if (shouldStopPropagation) {
+        if (shouldStopPropagation && process.env.NODE_ENV !== 'production') {
           console.error('stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.');
         } else {
           shouldStopPropagation = true;

package/src/focusSafely.ts

@@ -23,7 +23,7 @@ import {getInteractionModality} from './useFocusVisible';
  * A utility function that focuses an element while avoiding undesired side effects such
  * as page scrolling and screen reader issues with CSS transitions.
  */
-export function focusSafely(element: FocusableElement) {
+export function focusSafely(element: FocusableElement): void {
   // If the user is interacting with a virtual cursor, e.g. screen reader, then
   // wait until after any animated transitions that are currently occurring on
   // the page before shifting focus. This avoids issues with VoiceOver on iOS

package/src/textSelection.ts

@@ -33,10 +33,10 @@ let state: State = 'default';
 let savedUserSelect = '';
 let modifiedElementMap = new WeakMap<Element, string>();
 
-export function disableTextSelection(target?: Element) {
+export function disableTextSelection(target?: Element): void {
   if (isIOS()) {
     if (state === 'default') {
-       
+
       const documentObject = getOwnerDocument(target);
       savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
       documentObject.documentElement.style.webkitUserSelect = 'none';
@@ -52,7 +52,7 @@ export function disableTextSelection(target?: Element) {
   }
 }
 
-export function restoreTextSelection(target?: Element) {
+export function restoreTextSelection(target?: Element): void {
   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.
@@ -70,7 +70,7 @@ export function restoreTextSelection(target?: Element) {
       runAfterTransition(() => {
         // Avoid race conditions
         if (state === 'restoring') {
-           
+
           const documentObject = getOwnerDocument(target);
           if (documentObject.documentElement.style.webkitUserSelect === 'none') {
             documentObject.documentElement.style.webkitUserSelect = savedUserSelect || '';

package/src/useFocusVisible.ts

@@ -123,7 +123,7 @@ function handleWindowBlur() {
  * Setup global event listeners to control when keyboard focus style should be visible.
  */
 function setupGlobalFocusEvents(element?: HTMLElement | null) {
-  if (typeof window === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {
+  if (typeof window === 'undefined' || typeof document === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {
     return;
   }
 
@@ -153,7 +153,7 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
     documentObject.addEventListener('pointerdown', handlePointerEvent, true);
     documentObject.addEventListener('pointermove', handlePointerEvent, true);
     documentObject.addEventListener('pointerup', handlePointerEvent, true);
-  } else {
+  } else if (process.env.NODE_ENV === 'test') {
     documentObject.addEventListener('mousedown', handlePointerEvent, true);
     documentObject.addEventListener('mousemove', handlePointerEvent, true);
     documentObject.addEventListener('mouseup', handlePointerEvent, true);
@@ -189,7 +189,7 @@ const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
     documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
     documentObject.removeEventListener('pointermove', handlePointerEvent, true);
     documentObject.removeEventListener('pointerup', handlePointerEvent, true);
-  } else {
+  } else if (process.env.NODE_ENV === 'test') {
     documentObject.removeEventListener('mousedown', handlePointerEvent, true);
     documentObject.removeEventListener('mousemove', handlePointerEvent, true);
     documentObject.removeEventListener('mouseup', handlePointerEvent, true);
@@ -247,7 +247,7 @@ export function getInteractionModality(): Modality | null {
   return currentModality;
 }
 
-export function setInteractionModality(modality: Modality) {
+export function setInteractionModality(modality: Modality): void {
   currentModality = modality;
   triggerChangeHandlers(modality, null);
 }

package/src/useFocusWithin.ts

@@ -15,10 +15,10 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+import {createSyntheticEvent, setEventTarget, useSyntheticBlurEvent} from './utils';
 import {DOMAttributes} from '@react-types/shared';
 import {FocusEvent, useCallback, useRef} from 'react';
 import {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
-import {SyntheticFocusEvent, useSyntheticBlurEvent} from './utils';
 
 export interface FocusWithinProps {
   /** Whether the focus within events should be disabled. */
@@ -104,9 +104,9 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
       let currentTarget = e.currentTarget;
       addGlobalListener(ownerDocument, 'focus', e => {
         if (state.current.isFocusWithin && !nodeContains(currentTarget, e.target as Element)) {
-          let event = new SyntheticFocusEvent('blur', new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target}));
-          event.target = currentTarget;
-          event.currentTarget = currentTarget;
+          let nativeEvent = new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target});
+          setEventTarget(nativeEvent, currentTarget);
+          let event = createSyntheticEvent<FocusEvent>(nativeEvent);
           onBlur(event);
         }
       }, {capture: true});

package/src/useFocusable.tsx

@@ -112,6 +112,10 @@ export const Focusable = forwardRef(({children, ...props}: FocusableComponentPro
   let child = React.Children.only(children);
 
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+
     let el = ref.current;
     if (!el || !(el instanceof getOwnerWindow(el).Element)) {
       console.error('<Focusable> child must forward its ref to a DOM element.');

package/src/useHover.ts

@@ -61,7 +61,7 @@ function setupGlobalTouchEvents() {
 
   if (typeof PointerEvent !== 'undefined') {
     document.addEventListener('pointerup', handleGlobalPointerEvent);
-  } else {
+  } else if (process.env.NODE_ENV === 'test') {
     document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
   }
 
@@ -74,7 +74,7 @@ function setupGlobalTouchEvents() {
 
     if (typeof PointerEvent !== 'undefined') {
       document.removeEventListener('pointerup', handleGlobalPointerEvent);
-    } else {
+    } else if (process.env.NODE_ENV === 'test') {
       document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);
     }
   };
@@ -182,7 +182,7 @@ export function useHover(props: HoverProps): HoverResult {
           triggerHoverEnd(e, e.pointerType);
         }
       };
-    } else {
+    } else if (process.env.NODE_ENV === 'test') {
       hoverProps.onTouchStart = () => {
         state.ignoreEmulatedMouseEvents = true;
       };

package/src/useInteractOutside.ts

@@ -31,7 +31,7 @@ export interface InteractOutsideProps {
  * Example, used in components like Dialogs and Popovers so they can close
  * when a user clicks outside them.
  */
-export function useInteractOutside(props: InteractOutsideProps) {
+export function useInteractOutside(props: InteractOutsideProps): void {
   let {ref, onInteractOutside, isDisabled, onInteractOutsideStart} = props;
   let stateRef = useRef({
     isPointerDown: false,
@@ -79,7 +79,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
         documentObject.removeEventListener('pointerdown', onPointerDown, true);
         documentObject.removeEventListener('pointerup', onPointerUp, true);
       };
-    } else {
+    } else if (process.env.NODE_ENV === 'test') {
       let onMouseUp = (e) => {
         if (state.ignoreEmulatedMouseEvents) {
           state.ignoreEmulatedMouseEvents = false;

package/src/useMove.ts

@@ -93,7 +93,7 @@ export function useMove(props: MoveEvents): MoveResult {
       state.current.didMove = false;
     };
 
-    if (typeof PointerEvent === 'undefined') {
+    if (typeof PointerEvent === 'undefined' && process.env.NODE_ENV === 'test') {
       let onMouseMove = (e: MouseEvent) => {
         if (e.button === 0) {
           move(e, 'mouse', e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));

package/src/usePress.ts

@@ -31,12 +31,12 @@ import {
   useGlobalListeners,
   useSyncRef
 } from '@react-aria/utils';
+import {createSyntheticEvent, preventFocus, setEventTarget} from './utils';
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
 import {PressResponderContext} from './context';
-import {preventFocus} from './utils';
-import {TouchEvent as RTouchEvent, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {MouseEvent as RMouseEvent, TouchEvent as RTouchEvent, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
 export interface PressProps extends PressEvents {
   /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
@@ -157,6 +157,8 @@ class PressEvent implements IPressEvent {
 }
 
 const LINK_CLICKED = Symbol('linkClicked');
+const STYLE_ID = 'react-aria-pressable-style';
+const PRESSABLE_ATTRIBUTE = 'data-react-aria-pressable';
 
 /**
  * Handles press interactions across mouse, touch, keyboard, and screen readers.
@@ -170,13 +172,13 @@ export function usePress(props: PressHookProps): PressResult {
     onPressStart,
     onPressEnd,
     onPressUp,
+    onClick,
     isDisabled,
     isPressed: isPressedProp,
     preventFocusOnPress,
     shouldCancelOnPointerExit,
     allowTextSelectionOnPress,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref: _, // Removing `ref` from `domProps` because TypeScript is dumb
+    ref: domRef,
     ...domProps
   } = usePressResponderContext(props);
 
@@ -295,6 +297,23 @@ export function usePress(props: PressHookProps): PressResult {
     }
   });
 
+  let triggerClick = useEffectEvent((e: RMouseEvent<FocusableElement>) => {
+    onClick?.(e);
+  });
+
+  let triggerSyntheticClick = useEffectEvent((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
+    // Some third-party libraries pass in onClick instead of onPress.
+    // Create a fake mouse event and trigger onClick as well.
+    // This matches the browser's native activation behavior for certain elements (e.g. button).
+    // https://html.spec.whatwg.org/#activation
+    // https://html.spec.whatwg.org/#fire-a-synthetic-pointer-event
+    if (onClick) {
+      let event = new MouseEvent('click', e);
+      setEventTarget(event, target);
+      onClick(createSyntheticEvent(event));
+    }
+  });
+
   let pressProps = useMemo(() => {
     let state = ref.current;
     let pressProps: DOMAttributes = {
@@ -362,11 +381,13 @@ export function usePress(props: PressHookProps): PressResult {
             let stopPressStart = triggerPressStart(e, 'virtual');
             let stopPressUp = triggerPressUp(e, 'virtual');
             let stopPressEnd = triggerPressEnd(e, 'virtual');
+            triggerClick(e);
             shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
           } else if (state.isPressed && state.pointerType !== 'keyboard') {
             let pointerType = state.pointerType || (e.nativeEvent as PointerEvent).pointerType as PointerType || 'virtual';
             shouldStopPropagation = triggerPressEnd(createEvent(e.currentTarget, e), pointerType, true);
             state.isOverTarget = false;
+            triggerClick(e);
             cancel(e);
           }
 
@@ -385,7 +406,11 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let target = getEventTarget(e);
-        triggerPressEnd(createEvent(state.target, e), 'keyboard', nodeContains(state.target, getEventTarget(e)));
+        let wasPressed = nodeContains(state.target, getEventTarget(e));
+        triggerPressEnd(createEvent(state.target, e), 'keyboard', wasPressed);
+        if (wasPressed) {
+          triggerSyntheticClick(e, state.target);
+        }
         removeAllGlobalListeners();
 
         // If a link was triggered with a key other than Enter, open the URL ourselves.
@@ -552,8 +577,8 @@ export function usePress(props: PressHookProps): PressResult {
         // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
         cancel(e);
       };
-    } else {
-      // NOTE: this fallback branch is almost entirely used by unit tests.
+    } else if (process.env.NODE_ENV === 'test') {
+      // NOTE: this fallback branch is entirely used by unit tests.
       // All browsers now support pointer events, but JSDOM still does not.
 
       pressProps.onMouseDown = (e) => {
@@ -723,6 +748,7 @@ export function usePress(props: PressHookProps): PressResult {
         if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType != null) {
           triggerPressUp(createTouchEvent(state.target!, e), state.pointerType);
           shouldStopPropagation = triggerPressEnd(createTouchEvent(state.target!, e), state.pointerType);
+          triggerSyntheticClick(e.nativeEvent, state.target!);
         } else if (state.isOverTarget && state.pointerType != null) {
           shouldStopPropagation = triggerPressEnd(createTouchEvent(state.target!, e), state.pointerType, false);
         }
@@ -784,16 +810,42 @@ export function usePress(props: PressHookProps): PressResult {
     cancelOnPointerExit,
     triggerPressEnd,
     triggerPressStart,
-    triggerPressUp
+    triggerPressUp,
+    triggerClick,
+    triggerSyntheticClick
   ]);
 
-  // Remove user-select: none in case component unmounts immediately after pressStart
+  // Avoid onClick delay for double tap to zoom by default.
+  useEffect(() => {
+    if (!domRef || process.env.NODE_ENV === 'test') {
+      return;
+    }
+
+    const ownerDocument = getOwnerDocument(domRef.current);
+    if (!ownerDocument || !ownerDocument.head || ownerDocument.getElementById(STYLE_ID)) {
+      return;
+    }
 
+    const style = ownerDocument.createElement('style');
+    style.id = STYLE_ID;
+    // touchAction: 'manipulation' is supposed to be equivalent, but in
+    // Safari it causes onPointerCancel not to fire on scroll.
+    // https://bugs.webkit.org/show_bug.cgi?id=240917
+    style.textContent = `
+@layer {
+  [${PRESSABLE_ATTRIBUTE}] {
+    touch-action: pan-x pan-y pinch-zoom;
+  }
+}
+    `.trim();
+    ownerDocument.head.prepend(style);
+  }, [domRef]);
+
+  // Remove user-select: none in case component unmounts immediately after pressStart
   useEffect(() => {
     let state = ref.current;
     return () => {
       if (!allowTextSelectionOnPress) {
-         
         restoreTextSelection(state.target ?? undefined);
       }
       for (let dispose of state.disposables) {
@@ -805,7 +857,7 @@ export function usePress(props: PressHookProps): PressResult {
 
   return {
     isPressed: isPressedProp || isPressed,
-    pressProps: mergeProps(domProps, pressProps)
+    pressProps: mergeProps(domProps, pressProps, {[PRESSABLE_ATTRIBUTE]: true})
   };
 }
 

package/src/utils.ts

@@ -12,64 +12,32 @@
 
 import {FocusableElement} from '@react-types/shared';
 import {focusWithoutScrolling, getOwnerWindow, isFocusable, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
-import {FocusEvent as ReactFocusEvent, useCallback, useRef} from 'react';
-
-export class SyntheticFocusEvent<Target = Element> implements ReactFocusEvent<Target> {
-  nativeEvent: FocusEvent;
-  target: EventTarget & Target;
-  currentTarget: EventTarget & Target;
-  relatedTarget: Element;
-  bubbles: boolean;
-  cancelable: boolean;
-  defaultPrevented: boolean;
-  eventPhase: number;
-  isTrusted: boolean;
-  timeStamp: number;
-  type: string;
-
-  constructor(type: string, nativeEvent: FocusEvent) {
-    this.nativeEvent = nativeEvent;
-    this.target = nativeEvent.target as EventTarget & Target;
-    this.currentTarget = nativeEvent.currentTarget as EventTarget & Target;
-    this.relatedTarget = nativeEvent.relatedTarget as Element;
-    this.bubbles = nativeEvent.bubbles;
-    this.cancelable = nativeEvent.cancelable;
-    this.defaultPrevented = nativeEvent.defaultPrevented;
-    this.eventPhase = nativeEvent.eventPhase;
-    this.isTrusted = nativeEvent.isTrusted;
-    this.timeStamp = nativeEvent.timeStamp;
-    this.type = type;
-  }
-
-  isDefaultPrevented(): boolean {
-    return this.nativeEvent.defaultPrevented;
-  }
-
-  preventDefault(): void {
-    this.defaultPrevented = true;
-    this.nativeEvent.preventDefault();
-  }
-
-  stopPropagation(): void {
-    this.nativeEvent.stopPropagation();
-    this.isPropagationStopped = () => true;
-  }
-
-  isPropagationStopped(): boolean {
-    return false;
-  }
+import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
+
+// Turn a native event into a React synthetic event.
+export function createSyntheticEvent<E extends SyntheticEvent>(nativeEvent: Event): E {
+  let event = nativeEvent as any as E;
+  event.nativeEvent = nativeEvent;
+  event.isDefaultPrevented = () => event.defaultPrevented;
+  // cancelBubble is technically deprecated in the spec, but still supported in all browsers.
+  event.isPropagationStopped = () => (event as any).cancelBubble;
+  event.persist = () => {};
+  return event;
+}
 
-  persist() {}
+export function setEventTarget(event: Event, target: Element): void {
+  Object.defineProperty(event, 'target', {value: target});
+  Object.defineProperty(event, 'currentTarget', {value: target});
 }
 
-export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEvent<Target>) => void) {
+export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur: (e: ReactFocusEvent<Target>) => void): (e: ReactFocusEvent<Target>) => void {
   let stateRef = useRef({
     isFocused: false,
     observer: null as MutationObserver | null
   });
 
   // Clean up MutationObserver on unmount. See below.
-   
+
   useLayoutEffect(() => {
     const state = stateRef.current;
     return () => {
@@ -80,7 +48,7 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
     };
   }, []);
 
-  let dispatchBlur = useEffectEvent((e: SyntheticFocusEvent<Target>) => {
+  let dispatchBlur = useEffectEvent((e: ReactFocusEvent<Target>) => {
     onBlur?.(e);
   });
 
@@ -104,7 +72,8 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
 
         if (target.disabled) {
           // For backward compatibility, dispatch a (fake) React synthetic event.
-          dispatchBlur(new SyntheticFocusEvent('blur', e as FocusEvent));
+          let event = createSyntheticEvent<ReactFocusEvent<Target>>(e);
+          dispatchBlur(event);
         }
 
         // We no longer need the MutationObserver once the target is blurred.
@@ -137,7 +106,7 @@ export let ignoreFocusEvent = false;
  * It works by waiting for the series of focus events to occur, and reverts focus back to where it was before.
  * It also makes these events mostly non-observable by using a capturing listener on the window and stopping propagation.
  */
-export function preventFocus(target: FocusableElement | null) {
+export function preventFocus(target: FocusableElement | null): (() => void) | undefined {
   // The browser will focus the nearest focusable ancestor of our target.
   while (target && !isFocusable(target)) {
     target = target.parentElement;
@@ -148,7 +117,7 @@ export function preventFocus(target: FocusableElement | null) {
   if (!activeElement || activeElement === target) {
     return;
   }
-  
+
   ignoreFocusEvent = true;
   let isRefocusing = false;
   let onBlur = (e: FocusEvent) => {
@@ -170,7 +139,7 @@ export function preventFocus(target: FocusableElement | null) {
       }
     }
   };
-  
+
   let onFocus = (e: FocusEvent) => {
     if (e.target === target || isRefocusing) {
       e.stopImmediatePropagation();