[Flare] Press includes button type (#16100)

1. Allow auxillary button clicks (i.e., middle mouse button) to trigger 'onPressStart' and 'onPressEnd', but never 'onPress'.
2. Report the button type – 'primary' or 'auxillary' – on the press event.

Author: necolas

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

@@ -89,6 +89,7 @@ type PressEventType =
   | 'contextmenu';
 
 type PressEvent = {|
+  button: 'primary' | 'auxillary',
   defaultPrevented: boolean,
   target: Element | Document,
   type: PressEventType,
@@ -165,6 +166,7 @@ function createPressEvent(
   defaultPrevented: boolean,
 ): PressEvent {
   const timeStamp = context.getTimeStamp();
+  let button = 'primary';
   let clientX = null;
   let clientY = null;
   let pageX = null;
@@ -186,8 +188,12 @@ function createPressEvent(
     if (eventObject) {
       ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
     }
+    if (nativeEvent.button === 1) {
+      button = 'auxillary';
+    }
   }
   return {
+    button,
     defaultPrevented,
     target,
     type,
@@ -706,11 +712,11 @@ const PressResponder: ReactDOMEventResponder = {
             state.activePointerId = touchEvent.identifier;
           }
 
-          // Ignore any device buttons except left-mouse and touch/pen contact.
-          // Additionally we ignore left-mouse + ctrl-key with Macs as that
+          // Ignore any device buttons except primary/auxillary and touch/pen contact.
+          // Additionally we ignore primary-button + ctrl-key with Macs as that
           // acts like right-click and opens the contextmenu.
           if (
-            nativeEvent.button > 0 ||
+            nativeEvent.button > 1 ||
             (isMac && isMouseEvent && nativeEvent.ctrlKey)
           ) {
             return;
@@ -962,7 +968,10 @@ const PressResponder: ReactDOMEventResponder = {
                 state,
               );
             }
-            if (state.isPressWithinResponderRegion) {
+            if (
+              state.isPressWithinResponderRegion &&
+              nativeEvent.button !== 1
+            ) {
               if (
                 !(
                   wasLongPressed &&

packages/react-events/src/dom/__tests__/Press-test.internal.js

@@ -136,15 +136,28 @@ describe('Event responder: Press', () => {
       );
     });
 
+    it('is called after auxillary-button "pointerdown" event', () => {
+      ref.current.dispatchEvent(
+        createEvent('pointerdown', {button: 1, pointerType: 'mouse'}),
+      );
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          button: 'auxillary',
+          pointerType: 'mouse',
+          type: 'pressstart',
+        }),
+      );
+    });
+
     it('ignores browser emulated events', () => {
       ref.current.dispatchEvent(createEvent('pointerdown'));
       ref.current.dispatchEvent(createEvent('touchstart'));
       ref.current.dispatchEvent(createEvent('mousedown'));
       expect(onPressStart).toHaveBeenCalledTimes(1);
     });
 
-    it('ignores any events not caused by left-click or touch/pen contact', () => {
-      ref.current.dispatchEvent(createEvent('pointerdown', {button: 1}));
+    it('ignores any events not caused by primary/auxillary-click or touch/pen contact', () => {
       ref.current.dispatchEvent(createEvent('pointerdown', {button: 5}));
       ref.current.dispatchEvent(createEvent('mousedown', {button: 2}));
       expect(onPressStart).toHaveBeenCalledTimes(0);
@@ -330,6 +343,23 @@ describe('Event responder: Press', () => {
       );
     });
 
+    it('is called after auxillary-button "pointerup" event', () => {
+      ref.current.dispatchEvent(
+        createEvent('pointerdown', {button: 1, pointerType: 'mouse'}),
+      );
+      ref.current.dispatchEvent(
+        createEvent('pointerup', {button: 1, pointerType: 'mouse'}),
+      );
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          button: 'auxillary',
+          pointerType: 'mouse',
+          type: 'pressend',
+        }),
+      );
+    });
+
     it('ignores browser emulated events', () => {
       ref.current.dispatchEvent(
         createEvent('pointerdown', {pointerType: 'touch'}),
@@ -664,6 +694,21 @@ describe('Event responder: Press', () => {
       );
     });
 
+    it('is not called after auxillary-button press', () => {
+      const element = (
+        <Press onPress={onPress}>
+          <div ref={ref} />
+        </Press>
+      );
+      ReactDOM.render(element, container);
+
+      ref.current.dispatchEvent(createEvent('pointerdown', {button: 1}));
+      ref.current.dispatchEvent(
+        createEvent('pointerup', {button: 1, clientX: 10, clientY: 10}),
+      );
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
     it('is called after valid "keyup" event', () => {
       ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
       ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
@@ -709,6 +754,22 @@ describe('Event responder: Press', () => {
       expect(onPress).toHaveBeenCalledTimes(1);
     });
 
+    it('is called with modifier keys', () => {
+      ref.current.dispatchEvent(
+        createEvent('pointerdown', {metaKey: true, pointerType: 'mouse'}),
+      );
+      ref.current.dispatchEvent(
+        createEvent('pointerup', {metaKey: true, pointerType: 'mouse'}),
+      );
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'mouse',
+          type: 'press',
+          metaKey: true,
+        }),
+      );
+    });
+
     // No PointerEvent fallbacks
     // TODO: jsdom missing APIs
     // it('is called after "touchend" event', () => {