@react-aria/interactions 3.8.4 → 3.10.0

package/src/useHover.ts

@@ -15,17 +15,18 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+import {DOMAttributes} from '@react-types/shared';
 import {HoverEvents} from '@react-types/shared';
-import {HTMLAttributes, useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface HoverProps extends HoverEvents {
   /** Whether the hover events should be disabled. */
   isDisabled?: boolean
 }
 
-interface HoverResult {
+export interface HoverResult {
   /** Props to spread on the target element. */
-  hoverProps: HTMLAttributes<HTMLElement>,
+  hoverProps: DOMAttributes,
   isHovered: boolean
 }
 
@@ -152,7 +153,7 @@ export function useHover(props: HoverProps): HoverResult {
       setHovered(false);
     };
 
-    let hoverProps: HTMLAttributes<HTMLElement> = {};
+    let hoverProps: DOMAttributes = {};
 
     if (typeof PointerEvent !== 'undefined') {
       hoverProps.onPointerEnter = (e) => {
@@ -164,7 +165,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onPointerLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
           triggerHoverEnd(e, e.pointerType);
         }
       };
@@ -182,7 +183,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onMouseLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
           triggerHoverEnd(e, 'mouse');
         }
       };

package/src/useInteractOutside.ts

@@ -17,7 +17,7 @@
 
 import {RefObject, SyntheticEvent, useEffect, useRef} from 'react';
 
-interface InteractOutsideProps {
+export interface InteractOutsideProps {
   ref: RefObject<Element>,
   onInteractOutside?: (e: SyntheticEvent) => void,
   onInteractOutsideStart?: (e: SyntheticEvent) => void,

package/src/useKeyboard.ts

@@ -11,17 +11,16 @@
  */
 
 import {createEventHandler} from './createEventHandler';
-import {HTMLAttributes} from 'react';
-import {KeyboardEvents} from '@react-types/shared';
+import {DOMAttributes, KeyboardEvents} from '@react-types/shared';
 
 export interface KeyboardProps extends KeyboardEvents {
   /** Whether the keyboard events should be disabled. */
   isDisabled?: boolean
 }
 
-interface KeyboardResult {
+export interface KeyboardResult {
   /** Props to spread onto the target element. */
-  keyboardProps: HTMLAttributes<HTMLElement>
+  keyboardProps: DOMAttributes
 }
 
 /**

package/src/useLongPress.ts

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes, useRef} from 'react';
-import {LongPressEvent} from '@react-types/shared';
+import {DOMAttributes, LongPressEvent} from '@react-types/shared';
 import {mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
 import {usePress} from './usePress';
+import {useRef} from 'react';
 
-interface LongPressProps {
+export interface LongPressProps {
   /** Whether long press events should be disabled. */
   isDisabled?: boolean,
   /** Handler that is called when a long press interaction starts. */
@@ -42,9 +42,9 @@ interface LongPressProps {
   accessibilityDescription?: string
 }
 
-interface LongPressResult {
+export interface LongPressResult {
   /** Props to spread on the target element. */
-  longPressProps: HTMLAttributes<HTMLElement>
+  longPressProps: DOMAttributes
 }
 
 const DEFAULT_THRESHOLD = 500;

package/src/useMove.ts

@@ -11,13 +11,13 @@
  */
 
 import {disableTextSelection, restoreTextSelection}  from './textSelection';
-import {MoveEvents, PointerType} from '@react-types/shared';
-import React, {HTMLAttributes, useMemo, useRef} from 'react';
+import {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
+import React, {useMemo, useRef} from 'react';
 import {useGlobalListeners} from '@react-aria/utils';
 
-interface MoveResult {
+export interface MoveResult {
   /** Props to spread on the target element. */
-  moveProps: HTMLAttributes<HTMLElement>
+  moveProps: DOMAttributes
 }
 
 interface EventBase {
@@ -44,7 +44,7 @@ export function useMove(props: MoveEvents): MoveResult {
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
   let moveProps = useMemo(() => {
-    let moveProps: HTMLAttributes<HTMLElement> = {};
+    let moveProps: DOMAttributes = {};
 
     let start = () => {
       disableTextSelection();

package/src/usePress.ts

@@ -16,11 +16,11 @@
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
+import {DOMAttributes, FocusableElement, PointerType, PressEvents} from '@react-types/shared';
 import {focusWithoutScrolling, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
-import {HTMLAttributes, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {isVirtualClick} from './utils';
-import {PointerType, PressEvents} from '@react-types/shared';
 import {PressResponderContext} from './context';
+import {RefObject, 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). */
@@ -42,7 +42,7 @@ export interface PressProps extends PressEvents {
 
 export interface PressHookProps extends PressProps {
   /** A ref to the target element. */
-  ref?: RefObject<HTMLElement>
+  ref?: RefObject<Element>
 }
 
 interface PressState {
@@ -51,7 +51,7 @@ interface PressState {
   ignoreClickAfterPress: boolean,
   didFirePressStart: boolean,
   activePointerId: any,
-  target: HTMLElement | null,
+  target: FocusableElement | null,
   isOverTarget: boolean,
   pointerType: PointerType,
   userSelect?: string
@@ -69,7 +69,7 @@ export interface PressResult {
   /** Whether the target is currently pressed. */
   isPressed: boolean,
   /** Props to spread on the target element. */
-  pressProps: HTMLAttributes<HTMLElement>
+  pressProps: DOMAttributes
 }
 
 function usePressResponderContext(props: PressHookProps): PressHookProps {
@@ -135,7 +135,7 @@ export function usePress(props: PressHookProps): PressResult {
         onPressStart({
           type: 'pressstart',
           pointerType,
-          target: originalEvent.currentTarget as HTMLElement,
+          target: originalEvent.currentTarget as Element,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
           ctrlKey: originalEvent.ctrlKey,
@@ -164,7 +164,7 @@ export function usePress(props: PressHookProps): PressResult {
         onPressEnd({
           type: 'pressend',
           pointerType,
-          target: originalEvent.currentTarget as HTMLElement,
+          target: originalEvent.currentTarget as Element,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
           ctrlKey: originalEvent.ctrlKey,
@@ -182,7 +182,7 @@ export function usePress(props: PressHookProps): PressResult {
         onPress({
           type: 'press',
           pointerType,
-          target: originalEvent.currentTarget as HTMLElement,
+          target: originalEvent.currentTarget as Element,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
           ctrlKey: originalEvent.ctrlKey,
@@ -201,7 +201,7 @@ export function usePress(props: PressHookProps): PressResult {
         onPressUp({
           type: 'pressup',
           pointerType,
-          target: originalEvent.currentTarget as HTMLElement,
+          target: originalEvent.currentTarget as Element,
           shiftKey: originalEvent.shiftKey,
           metaKey: originalEvent.metaKey,
           ctrlKey: originalEvent.ctrlKey,
@@ -226,9 +226,9 @@ export function usePress(props: PressHookProps): PressResult {
       }
     };
 
-    let pressProps: HTMLAttributes<HTMLElement> = {
+    let pressProps: DOMAttributes = {
       onKeyDown(e) {
-        if (isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target as HTMLElement)) {
+        if (isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target as Element)) {
           if (shouldPreventDefaultKeyboard(e.target as Element)) {
             e.preventDefault();
           }
@@ -238,7 +238,7 @@ export function usePress(props: PressHookProps): PressResult {
           // after which focus moved to the current element. Ignore these events and
           // only handle the first key down event.
           if (!state.isPressed && !e.repeat) {
-            state.target = e.currentTarget as HTMLElement;
+            state.target = e.currentTarget;
             state.isPressed = true;
             triggerPressStart(e, 'keyboard');
 
@@ -249,12 +249,12 @@ export function usePress(props: PressHookProps): PressResult {
         }
       },
       onKeyUp(e) {
-        if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target as HTMLElement)) {
+        if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target as Element)) {
           triggerPressUp(createEvent(state.target, e), 'keyboard');
         }
       },
       onClick(e) {
-        if (e && !e.currentTarget.contains(e.target as HTMLElement)) {
+        if (e && !e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -291,13 +291,13 @@ export function usePress(props: PressHookProps): PressResult {
         e.stopPropagation();
 
         state.isPressed = false;
-        let target = e.target as HTMLElement;
+        let target = e.target as Element;
         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 (state.target.contains(target) && isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link') {
+        if (state.target instanceof HTMLElement && (state.target.contains(target) && isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) {
           state.target.click();
         }
       }
@@ -306,7 +306,7 @@ export function usePress(props: PressHookProps): PressResult {
     if (typeof PointerEvent !== 'undefined') {
       pressProps.onPointerDown = (e) => {
         // Only handle left clicks, and ignore events that bubbled through portals.
-        if (e.button !== 0 || !e.currentTarget.contains(e.target as HTMLElement)) {
+        if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -321,7 +321,7 @@ export function usePress(props: PressHookProps): PressResult {
 
         // Due to browser inconsistencies, especially on mobile browsers, we prevent
         // default on pointer down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
+        if (shouldPreventDefault(e.currentTarget as Element)) {
           e.preventDefault();
         }
 
@@ -351,7 +351,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseDown = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -359,7 +359,7 @@ export function usePress(props: PressHookProps): PressResult {
           // Chrome and Firefox on touch Windows devices require mouse down events
           // to be canceled in addition to pointer events, or an extra asynchronous
           // focus event will be fired.
-          if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
+          if (shouldPreventDefault(e.currentTarget as Element)) {
             e.preventDefault();
           }
 
@@ -369,7 +369,7 @@ 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') {
+        if (!e.currentTarget.contains(e.target as Element) || state.pointerType === 'virtual') {
           return;
         }
 
@@ -427,7 +427,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onDragStart = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -437,13 +437,13 @@ export function usePress(props: PressHookProps): PressResult {
     } else {
       pressProps.onMouseDown = (e) => {
         // Only handle left clicks
-        if (e.button !== 0 || !e.currentTarget.contains(e.target as HTMLElement)) {
+        if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
         // Due to browser inconsistencies, especially on mobile browsers, we prevent
         // default on mouse down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
+        if (shouldPreventDefault(e.currentTarget)) {
           e.preventDefault();
         }
 
@@ -467,7 +467,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseEnter = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -479,7 +479,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseLeave = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -494,7 +494,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseUp = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -527,7 +527,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchStart = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -559,7 +559,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchMove = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -584,7 +584,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchEnd = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -612,7 +612,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchCancel = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -623,7 +623,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       let onScroll = (e: Event) => {
-        if (state.isPressed && (e.target as HTMLElement).contains(state.target)) {
+        if (state.isPressed && (e.target as Element).contains(state.target)) {
           cancel({
             currentTarget: state.target,
             shiftKey: false,
@@ -635,7 +635,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onDragStart = (e) => {
-        if (!e.currentTarget.contains(e.target as HTMLElement)) {
+        if (!e.currentTarget.contains(e.target as Element)) {
           return;
         }
 
@@ -708,7 +708,7 @@ function getTouchById(
   return null;
 }
 
-function createEvent(target: HTMLElement, e: EventBase): EventBase {
+function createEvent(target: FocusableElement, e: EventBase): EventBase {
   return {
     currentTarget: target,
     shiftKey: e.shiftKey,
@@ -758,15 +758,15 @@ function areRectanglesOverlapping(a: Rect, b: Rect) {
   return true;
 }
 
-function isOverTarget(point: EventPoint, target: HTMLElement) {
+function isOverTarget(point: EventPoint, target: Element) {
   let rect = target.getBoundingClientRect();
   let pointRect = getPointClientRect(point);
   return areRectanglesOverlapping(rect, pointRect);
 }
 
-function shouldPreventDefault(target: HTMLElement) {
+function shouldPreventDefault(target: Element) {
   // We cannot prevent default if the target is a draggable element.
-  return !target.draggable;
+  return !(target instanceof HTMLElement) || !target.draggable;
 }
 
 function shouldPreventDefaultKeyboard(target: Element) {
@@ -778,13 +778,15 @@ function isVirtualPointerEvent(event: PointerEvent) {
   // 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
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+  // Talkback double tap from Windows Firefox touch screen press
   return (
     (event.width === 0 && event.height === 0) ||
     (event.width === 1 &&
       event.height === 1 &&
       event.pressure === 0 &&
-      event.detail === 0
+      event.detail === 0 &&
+      event.pointerType === 'mouse'
     )
   );
 }

package/src/utils.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusEvent as ReactFocusEvent, useRef} from 'react';
+import {FocusEvent as ReactFocusEvent, useCallback, useRef} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 
 // Original licensing for the following method can be found in the
@@ -87,22 +87,22 @@ export function useSyntheticBlurEvent(onBlur: (e: ReactFocusEvent) => void) {
     onBlur,
     observer: null as MutationObserver
   });
-  let state = stateRef.current;
-  state.onBlur = onBlur;
+  stateRef.current.onBlur = onBlur;
 
   // Clean up MutationObserver on unmount. See below.
   // eslint-disable-next-line arrow-body-style
   useLayoutEffect(() => {
+    const state = stateRef.current;
     return () => {
       if (state.observer) {
         state.observer.disconnect();
         state.observer = null;
       }
     };
-  }, [state]);
+  }, []);
 
   // This function is called during a React onFocus event.
-  return (e: ReactFocusEvent) => {
+  return useCallback((e: ReactFocusEvent) => {
     // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
     // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
     // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
@@ -113,36 +113,35 @@ export function useSyntheticBlurEvent(onBlur: (e: ReactFocusEvent) => void) {
       e.target instanceof HTMLTextAreaElement ||
       e.target instanceof HTMLSelectElement
     ) {
-      state.isFocused = true;
+      stateRef.current.isFocused = true;
 
       let target = e.target;
       let onBlurHandler = (e: FocusEvent) => {
-        let state = stateRef.current;
-        state.isFocused = false;
+        stateRef.current.isFocused = false;
 
         if (target.disabled) {
           // For backward compatibility, dispatch a (fake) React synthetic event.
-          state.onBlur?.(new SyntheticFocusEvent('blur', e));
+          stateRef.current.onBlur?.(new SyntheticFocusEvent('blur', e));
         }
 
         // We no longer need the MutationObserver once the target is blurred.
-        if (state.observer) {
-          state.observer.disconnect();
-          state.observer = null;
+        if (stateRef.current.observer) {
+          stateRef.current.observer.disconnect();
+          stateRef.current.observer = null;
         }
       };
 
       target.addEventListener('focusout', onBlurHandler, {once: true});
 
-      state.observer = new MutationObserver(() => {
-        if (state.isFocused && target.disabled) {
-          state.observer.disconnect();
+      stateRef.current.observer = new MutationObserver(() => {
+        if (stateRef.current.isFocused && target.disabled) {
+          stateRef.current.observer.disconnect();
           target.dispatchEvent(new FocusEvent('blur'));
           target.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
         }
       });
 
-      state.observer.observe(target, {attributes: true, attributeFilter: ['disabled']});
+      stateRef.current.observer.observe(target, {attributes: true, attributeFilter: ['disabled']});
     }
-  };
+  }, []);
 }