[react-events] Tap responder (#16628)

This is a partial replacement for the 'Press' responder:

1. `useTap` is scoped to pointers (no keyboard support). Our current thinking is
that "responders" should be limited to working with pointers, and that they can
be combined with 'useKeyboard' in user-space. For example, we might create a
'usePress' hook in user-space that combines 'useTap' with 'useKeyboard' to react
to both pointers and keyboard interactions.

2. `useTap` cancels the gesture once the pointer moves over an element that is
not within the responder target's subtree. This differs from `usePress` (and
React Native), where the gesture remains active after the pointer exits the
target's subtree and is restarted once the pointer reenters. One of the
drawbacks with the `usePress` behavior is that it requires repeatedly measuring
DOM elements (which can cause jank) to perform hit region tests. `useTap` avoids
doing this and relies on `document.elementFromPoint` only to support the
TouchEvent fallbacks.

3. `useTap` calls `onTapUpdate` when the active gesture's state changes,
`onTapEnd` when the gesture successfully completes. and `onTapCancel` when it
fails. There is no `onTap` callback. `usePress` did not explicitly report back
when the gesture failed, and product developers were confused about the
difference between `onPress` and `onPressEnd`.

4. `useTap` explicitly separates the PointerEvent implementation from the
MouseEvent/TouchEvent fallback.

5. `useTap` has better unit test coverage . All pointer types and the fallback
environment are tested. The shape of the gesture state object is also defined
and tested.

Author: necolas

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -119,7 +119,7 @@ const eventResponderContext: ReactDOMResponderContext = {
       }
     }
   },
-  isTargetWithinResponder(target: Element | Document): boolean {
+  isTargetWithinResponder(target: null | Element | Document): boolean {
     validateResponderContext();
     if (target != null) {
       let fiber = getClosestInstanceFromNode(target);
@@ -135,7 +135,7 @@ const eventResponderContext: ReactDOMResponderContext = {
     }
     return false;
   },
-  isTargetWithinResponderScope(target: Element | Document): boolean {
+  isTargetWithinResponderScope(target: null | Element | Document): boolean {
     validateResponderContext();
     const componentInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
     const responder = componentInstance.responder;
@@ -158,7 +158,7 @@ const eventResponderContext: ReactDOMResponderContext = {
     return false;
   },
   isTargetWithinNode(
-    childTarget: Element | Document,
+    childTarget: null | Element | Document,
     parentTarget: Element | Document,
   ): boolean {
     validateResponderContext();
@@ -390,11 +390,9 @@ function createDOMResponderEvent(
 ): ReactDOMResponderEvent {
   const {buttons, pointerType} = (nativeEvent: any);
   let eventPointerType = '';
-  let pointerId = null;
 
   if (pointerType !== undefined) {
     eventPointerType = pointerType;
-    pointerId = (nativeEvent: any).pointerId;
   } else if (nativeEvent.key !== undefined) {
     eventPointerType = 'keyboard';
   } else if (buttons !== undefined) {
@@ -407,7 +405,6 @@ function createDOMResponderEvent(
     nativeEvent: nativeEvent,
     passive,
     passiveSupported,
-    pointerId,
     pointerType: eventPointerType,
     target: nativeEventTarget,
     type: topLevelType,

packages/react-events/npm/tap.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-events-tap.production.min.js');
+} else {
+  module.exports = require('./cjs/react-events-tap.development.js');
+}

packages/react-events/package.json

@@ -21,6 +21,7 @@
     "press.js",
     "scroll.js",
     "swipe.js",
+    "tap.js",
     "build-info.json",
     "cjs/",
     "umd/"

packages/react-events/src/dom/Press.js

@@ -521,7 +521,7 @@ const pressResponderImpl = {
     props: PressProps,
     state: PressState,
   ): void {
-    const {pointerId, pointerType, type} = event;
+    const {pointerType, type} = event;
 
     if (props.disabled) {
       removeRootEventTypes(context, state);
@@ -584,7 +584,7 @@ const pressResponderImpl = {
           state.pointerType = pointerType;
           const pressTarget = (state.pressTarget = context.getResponderNode());
           if (isPointerEvent) {
-            state.activePointerId = pointerId;
+            state.activePointerId = nativeEvent.pointerId;
           } else if (isTouchEvent) {
             const touchEvent = getTouchFromPressEvent(nativeEvent);
             if (touchEvent === null) {
@@ -652,7 +652,7 @@ const pressResponderImpl = {
     props: PressProps,
     state: PressState,
   ): void {
-    let {pointerId, pointerType, target, type} = event;
+    let {pointerType, target, type} = event;
 
     const nativeEvent: any = event.nativeEvent;
     const isPressed = state.isPressed;
@@ -672,7 +672,10 @@ const pressResponderImpl = {
         if (previousPointerType !== pointerType) {
           return;
         }
-        if (type === 'pointermove' && activePointerId !== pointerId) {
+        if (
+          type === 'pointermove' &&
+          activePointerId !== nativeEvent.pointerId
+        ) {
           return;
         } else if (type === 'touchmove') {
           touchEvent = getTouchById(nativeEvent, activePointerId);
@@ -733,7 +736,10 @@ const pressResponderImpl = {
           const buttons = state.buttons;
           let isKeyboardEvent = false;
           let touchEvent;
-          if (type === 'pointerup' && activePointerId !== pointerId) {
+          if (
+            type === 'pointerup' &&
+            activePointerId !== nativeEvent.pointerId
+          ) {
             return;
           } else if (type === 'touchend') {
             touchEvent = getTouchById(nativeEvent, activePointerId);