@react-aria/interactions 3.25.6 → 3.27.0

package/src/useFocusVisible.ts

@@ -15,8 +15,9 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';
+import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
+import {PointerType} from '@react-types/shared';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
@@ -37,7 +38,8 @@ export interface FocusVisibleResult {
 }
 
 let currentModality: null | Modality = null;
-let changeHandlers = new Set<Handler>();
+let currentPointerType: PointerType = 'keyboard';
+export const changeHandlers = new Set<Handler>();
 interface GlobalListenerData {
   focus: () => void
 }
@@ -68,14 +70,16 @@ function isValidKey(e: KeyboardEvent) {
 
 function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
-  if (isValidKey(e)) {
+  if (!(openLink as any).isOpening && isValidKey(e)) {
     currentModality = 'keyboard';
+    currentPointerType = 'keyboard';
     triggerChangeHandlers('keyboard', e);
   }
 }
 
 function handlePointerEvent(e: PointerEvent | MouseEvent) {
   currentModality = 'pointer';
+  currentPointerType = 'pointerType' in e ? e.pointerType as PointerType : 'mouse';
   if (e.type === 'mousedown' || e.type === 'pointerdown') {
     hasEventBeforeFocus = true;
     triggerChangeHandlers('pointer', e);
@@ -83,9 +87,10 @@ function handlePointerEvent(e: PointerEvent | MouseEvent) {
 }
 
 function handleClickEvent(e: MouseEvent) {
-  if (isVirtualClick(e)) {
+  if (!(openLink as any).isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
   }
 }
 
@@ -101,6 +106,7 @@ function handleFocusEvent(e: FocusEvent) {
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
     triggerChangeHandlers('virtual', e);
   }
 
@@ -249,9 +255,15 @@ export function getInteractionModality(): Modality | null {
 
 export function setInteractionModality(modality: Modality): void {
   currentModality = modality;
+  currentPointerType = modality === 'pointer' ? 'mouse' : modality;
   triggerChangeHandlers(modality, null);
 }
 
+/** @private */
+export function getPointerType(): PointerType {
+  return currentPointerType;
+}
+
 /**
  * Keeps state of the current modality.
  */
@@ -321,10 +333,13 @@ export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResu
 /**
  * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
  */
-export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {
+export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {enabled?: boolean, isTextInput?: boolean}): void {
   setupGlobalFocusEvents();
 
   useEffect(() => {
+    if (opts?.enabled === false) {
+      return;
+    }
     let handler = (modality: Modality, e: HandlerEvent) => {
       // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
       if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {
@@ -339,3 +354,4 @@ export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyA
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }
+

package/src/useFocusWithin.ts

@@ -54,14 +54,14 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
 
   let onBlur = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget, e.target)) {
       return;
     }
 
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
     // when moving focus inside the element. Only trigger if the currentTarget doesn't
     // include the relatedTarget (where focus is moving).
-    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
+    if (state.current.isFocusWithin && !nodeContains(e.currentTarget as Element, e.relatedTarget as Element)) {
       state.current.isFocusWithin = false;
       removeAllGlobalListeners();
 
@@ -78,7 +78,7 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
   let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   let onFocus = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget, e.target)) {
       return;
     }
 

package/src/useHover.ts

@@ -108,7 +108,7 @@ export function useHover(props: HoverProps): HoverResult {
   let {hoverProps, triggerHoverEnd} = useMemo(() => {
     let triggerHoverStart = (event, pointerType) => {
       state.pointerType = pointerType;
-      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {
+      if (isDisabled || pointerType === 'touch' || state.isHovered || !nodeContains(event.currentTarget, event.target)) {
         return;
       }
 
@@ -180,7 +180,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onPointerLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
+        if (!isDisabled && nodeContains(e.currentTarget, e.target as Element)) {
           triggerHoverEnd(e, e.pointerType);
         }
       };
@@ -198,7 +198,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onMouseLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
+        if (!isDisabled && nodeContains(e.currentTarget, e.target as Element)) {
           triggerHoverEnd(e, 'mouse');
         }
       };

package/src/useInteractOutside.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, useEffectEvent} from '@react-aria/utils';
+import {getOwnerDocument, nodeContains, useEffectEvent} from '@react-aria/utils';
 import {RefObject} from '@react-types/shared';
 import {useEffect, useRef} from 'react';
 
@@ -111,7 +111,7 @@ export function useInteractOutside(props: InteractOutsideProps): void {
         documentObject.removeEventListener('touchend', onTouchEnd, true);
       };
     }
-  }, [ref, isDisabled, onPointerDown, triggerInteractOutside]);
+  }, [ref, isDisabled]);
 }
 
 function isValidEvent(event, ref) {
@@ -121,7 +121,7 @@ function isValidEvent(event, ref) {
   if (event.target) {
     // if the event target is no longer in the document, ignore
     const ownerDocument = event.target.ownerDocument;
-    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
+    if (!ownerDocument || !nodeContains(ownerDocument.documentElement, event.target)) {
       return false;
     }
     // If the target is within a top layer element (e.g. toasts), ignore.

package/src/useMove.ts

@@ -12,8 +12,8 @@
 
 import {disableTextSelection, restoreTextSelection}  from './textSelection';
 import {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
-import React, {useMemo, useRef} from 'react';
-import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {useEffectEvent, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';
 
 export interface MoveResult {
   /** Props to spread on the target element. */
@@ -43,7 +43,7 @@ export function useMove(props: MoveEvents): MoveResult {
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
-  let move = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
+  let move = useCallback((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
     if (deltaX === 0 && deltaY === 0) {
       return;
     }
@@ -69,9 +69,10 @@ export function useMove(props: MoveEvents): MoveResult {
       ctrlKey: originalEvent.ctrlKey,
       altKey: originalEvent.altKey
     });
-  });
+  }, [onMoveStart, onMove, state]);
+  let moveEvent = useEffectEvent(move);
 
-  let end = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+  let end = useCallback((originalEvent: EventBase, pointerType: PointerType) => {
     restoreTextSelection();
     if (state.current.didMove) {
       onMoveEnd?.({
@@ -83,57 +84,111 @@ export function useMove(props: MoveEvents): MoveResult {
         altKey: originalEvent.altKey
       });
     }
-  });
+  }, [onMoveEnd, state]);
+  let endEvent = useEffectEvent(end);
 
-  let moveProps = useMemo(() => {
-    let moveProps: DOMAttributes = {};
+  let [pointerDown, setPointerDown] = useState<'pointer' | 'mouse' | 'touch' | null>(null);
+  useLayoutEffect(() => {
+    if (pointerDown === 'pointer') {
+      let onPointerMove = (e: PointerEvent) => {
+        if (e.pointerId === state.current.id) {
+          let pointerType = (e.pointerType || 'mouse') as PointerType;
 
-    let start = () => {
-      disableTextSelection();
-      state.current.didMove = false;
-    };
+          // Problems with PointerEvent#movementX/movementY:
+          // 1. it is always 0 on macOS Safari.
+          // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
+          moveEvent(e, pointerType, e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+        }
+      };
 
-    if (typeof PointerEvent === 'undefined' && process.env.NODE_ENV === 'test') {
+      let onPointerUp = (e: PointerEvent) => {
+        if (e.pointerId === state.current.id) {
+          let pointerType = (e.pointerType || 'mouse') as PointerType;
+          endEvent(e, pointerType);
+          state.current.id = null;
+          removeGlobalListener(window, 'pointermove', onPointerMove, false);
+          removeGlobalListener(window, 'pointerup', onPointerUp, false);
+          removeGlobalListener(window, 'pointercancel', onPointerUp, false);
+          setPointerDown(null);
+        }
+      };
+      addGlobalListener(window, 'pointermove', onPointerMove, false);
+      addGlobalListener(window, 'pointerup', onPointerUp, false);
+      addGlobalListener(window, 'pointercancel', onPointerUp, false);
+      return () => {
+        removeGlobalListener(window, 'pointermove', onPointerMove, false);
+        removeGlobalListener(window, 'pointerup', onPointerUp, false);
+        removeGlobalListener(window, 'pointercancel', onPointerUp, false);
+      };
+    } else if (pointerDown === 'mouse' && 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));
+          moveEvent(e, 'mouse', e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
           state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
         }
       };
       let onMouseUp = (e: MouseEvent) => {
         if (e.button === 0) {
-          end(e, 'mouse');
+          endEvent(e, 'mouse');
           removeGlobalListener(window, 'mousemove', onMouseMove, false);
           removeGlobalListener(window, 'mouseup', onMouseUp, false);
+          setPointerDown(null);
         }
       };
-      moveProps.onMouseDown = (e: React.MouseEvent) => {
-        if (e.button === 0) {
-          start();
-          e.stopPropagation();
-          e.preventDefault();
-          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
-          addGlobalListener(window, 'mousemove', onMouseMove, false);
-          addGlobalListener(window, 'mouseup', onMouseUp, false);
-        }
+      addGlobalListener(window, 'mousemove', onMouseMove, false);
+      addGlobalListener(window, 'mouseup', onMouseUp, false);
+      return () => {
+        removeGlobalListener(window, 'mousemove', onMouseMove, false);
+        removeGlobalListener(window, 'mouseup', onMouseUp, false);
       };
-
+    } else if (pointerDown === 'touch' && process.env.NODE_ENV === 'test') {
       let onTouchMove = (e: TouchEvent) => {
         let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
         if (touch >= 0) {
           let {pageX, pageY} = e.changedTouches[touch];
-          move(e, 'touch', pageX - (state.current.lastPosition?.pageX ?? 0), pageY - (state.current.lastPosition?.pageY ?? 0));
+          moveEvent(e, 'touch', pageX - (state.current.lastPosition?.pageX ?? 0), pageY - (state.current.lastPosition?.pageY ?? 0));
           state.current.lastPosition = {pageX, pageY};
         }
       };
       let onTouchEnd = (e: TouchEvent) => {
         let touch = [...e.changedTouches].findIndex(({identifier}) => identifier === state.current.id);
         if (touch >= 0) {
-          end(e, 'touch');
+          endEvent(e, 'touch');
           state.current.id = null;
           removeGlobalListener(window, 'touchmove', onTouchMove);
           removeGlobalListener(window, 'touchend', onTouchEnd);
           removeGlobalListener(window, 'touchcancel', onTouchEnd);
+          setPointerDown(null);
+        }
+      };
+      addGlobalListener(window, 'touchmove', onTouchMove, false);
+      addGlobalListener(window, 'touchend', onTouchEnd, false);
+      addGlobalListener(window, 'touchcancel', onTouchEnd, false);
+      return () => {
+        removeGlobalListener(window, 'touchmove', onTouchMove, false);
+        removeGlobalListener(window, 'touchend', onTouchEnd, false);
+        removeGlobalListener(window, 'touchcancel', onTouchEnd, false);
+      };
+    }
+  }, [pointerDown, addGlobalListener, removeGlobalListener]);
+
+  let moveProps = useMemo(() => {
+    let moveProps: DOMAttributes = {};
+
+    let start = () => {
+      disableTextSelection();
+      state.current.didMove = false;
+    };
+
+    if (typeof PointerEvent === 'undefined' && process.env.NODE_ENV === 'test') {
+      moveProps.onMouseDown = (e: React.MouseEvent) => {
+        if (e.button === 0) {
+          start();
+          e.stopPropagation();
+          e.preventDefault();
+          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
+          setPointerDown('mouse');
         }
       };
       moveProps.onTouchStart = (e: React.TouchEvent) => {
@@ -147,34 +202,9 @@ export function useMove(props: MoveEvents): MoveResult {
         e.preventDefault();
         state.current.lastPosition = {pageX, pageY};
         state.current.id = identifier;
-        addGlobalListener(window, 'touchmove', onTouchMove, false);
-        addGlobalListener(window, 'touchend', onTouchEnd, false);
-        addGlobalListener(window, 'touchcancel', onTouchEnd, false);
+        setPointerDown('touch');
       };
     } else {
-      let onPointerMove = (e: PointerEvent) => {
-        if (e.pointerId === state.current.id) {
-          let pointerType = (e.pointerType || 'mouse') as PointerType;
-
-          // Problems with PointerEvent#movementX/movementY:
-          // 1. it is always 0 on macOS Safari.
-          // 2. On Chrome Android, it's scaled by devicePixelRatio, but not on Chrome macOS
-          move(e, pointerType, e.pageX - (state.current.lastPosition?.pageX ?? 0), e.pageY - (state.current.lastPosition?.pageY ?? 0));
-          state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
-        }
-      };
-
-      let onPointerUp = (e: PointerEvent) => {
-        if (e.pointerId === state.current.id) {
-          let pointerType = (e.pointerType || 'mouse') as PointerType;
-          end(e, pointerType);
-          state.current.id = null;
-          removeGlobalListener(window, 'pointermove', onPointerMove, false);
-          removeGlobalListener(window, 'pointerup', onPointerUp, false);
-          removeGlobalListener(window, 'pointercancel', onPointerUp, false);
-        }
-      };
-
       moveProps.onPointerDown = (e: React.PointerEvent) => {
         if (e.button === 0 && state.current.id == null) {
           start();
@@ -182,9 +212,7 @@ export function useMove(props: MoveEvents): MoveResult {
           e.preventDefault();
           state.current.lastPosition = {pageX: e.pageX, pageY: e.pageY};
           state.current.id = e.pointerId;
-          addGlobalListener(window, 'pointermove', onPointerMove, false);
-          addGlobalListener(window, 'pointerup', onPointerUp, false);
-          addGlobalListener(window, 'pointercancel', onPointerUp, false);
+          setPointerDown('pointer');
         }
       };
     }
@@ -225,7 +253,7 @@ export function useMove(props: MoveEvents): MoveResult {
     };
 
     return moveProps;
-  }, [state, addGlobalListener, removeGlobalListener, move, end]);
+  }, [state, move, end]);
 
   return {moveProps};
 }