@react-aria/interactions 3.9.0 → 3.11.0

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,10 +226,10 @@ 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 (shouldPreventDefaultKeyboard(e.target as Element)) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target as Element)) {
+          if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
             e.preventDefault();
           }
           e.stopPropagation();
@@ -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');
 
@@ -246,15 +246,20 @@ export function usePress(props: PressHookProps): PressResult {
             // instead of the same element where the key down event occurred.
             addGlobalListener(document, 'keyup', onKeyUp, false);
           }
+        } else if (e.key === 'Enter' && isHTMLAnchorLink(e.currentTarget)) {
+          // If the target is a link, we won't have handled this above because we want the default
+          // browser behavior to open the link when pressing Enter. But we still need to prevent
+          // default so that elements above do not also handle it (e.g. table row).
+          e.stopPropagation();
         }
       },
       onKeyUp(e) {
-        if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target as HTMLElement)) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !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;
         }
 
@@ -284,20 +289,20 @@ export function usePress(props: PressHookProps): PressResult {
     };
 
     let onKeyUp = (e: KeyboardEvent) => {
-      if (state.isPressed && isValidKeyboardEvent(e)) {
-        if (shouldPreventDefaultKeyboard(e.target as Element)) {
+      if (state.isPressed && isValidKeyboardEvent(e, state.target)) {
+        if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
           e.preventDefault();
         }
         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 +311,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 +326,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 +356,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 +364,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 +374,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 +432,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 +442,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 +472,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 +484,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 +499,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 +532,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 +564,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 +589,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 +617,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 +628,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 +640,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;
         }
 
@@ -662,22 +667,21 @@ export function usePress(props: PressHookProps): PressResult {
   };
 }
 
-function isHTMLAnchorLink(target: HTMLElement): boolean {
+function isHTMLAnchorLink(target: Element): boolean {
   return target.tagName === 'A' && target.hasAttribute('href');
 }
 
-function isValidKeyboardEvent(event: KeyboardEvent): boolean {
-  const {key, code, target} = event;
-  const element = target as HTMLElement;
-  const {tagName, isContentEditable} = element;
+function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boolean {
+  const {key, code} = event;
+  const element = currentTarget as HTMLElement;
   const role = element.getAttribute('role');
   // Accessibility for keyboards. Space and Enter only.
   // "Spacebar" is for IE 11
   return (
     (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
-    (tagName !== 'INPUT' &&
-      tagName !== 'TEXTAREA' &&
-      isContentEditable !== true) &&
+    !((element instanceof HTMLInputElement && !isValidInputKey(element, key)) ||
+      element instanceof HTMLTextAreaElement ||
+      element.isContentEditable) &&
     // A link with a valid href should be handled natively,
     // unless it also has role='button' and was triggered using Space.
     (!isHTMLAnchorLink(element) || (role === 'button' && key !== 'Enter')) &&
@@ -708,7 +712,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,19 +762,46 @@ 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, key: string) {
+  if (target instanceof HTMLInputElement) {
+    return !isValidInputKey(target, key);
+  }
+
+  if (target instanceof HTMLButtonElement) {
+    return target.type !== 'submit';
+  }
+
+  return true;
 }
 
-function shouldPreventDefaultKeyboard(target: Element) {
-  return !((target.tagName === 'INPUT' || target.tagName === 'BUTTON') && (target as HTMLButtonElement | HTMLInputElement).type === 'submit');
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset'
+]);
+
+function isValidInputKey(target: HTMLInputElement, key: string) {
+  // Only space should toggle checkboxes and radios, not enter.
+  return target.type === 'checkbox' || target.type === 'radio'
+    ? key === ' '
+    : nonTextInputTypes.has(target.type);
 }
 
 function isVirtualPointerEvent(event: PointerEvent) {