[PR] Add type definitions for pointer events

Summary:
Closes #6373, closes #3227.

The definition of `SyntheticPointerEvent` here was originally based on facebook/react#12507 (released in React DOM 16.4.0) which was missing a couple of fields (`twist` and `tangentialPressure`) from the official spec.

I've now updated this branch to include those fields, since facebook/react#13374 has been merged. However, for maximum correctness we should probably wait for that to be _released_ before releasing the corresponding type definitions. I'll update this notice once the relevant React DOM release happens.
Pull Request resolved: #6728

Reviewed By: fishythefish

Differential Revision: D9338459

Pulled By: mrkev

fbshipit-source-id: 263f4922e8a6765e4a2d6553b5af785bdc65a894

Author: motiz88

lib/dom.js

@@ -134,6 +134,8 @@ type ProgressEventHandler = (event: ProgressEvent) => mixed
 type ProgressEventListener = {handleEvent: ProgressEventHandler} | ProgressEventHandler
 type DragEventHandler = (event: DragEvent) => mixed
 type DragEventListener = {handleEvent: DragEventHandler} | DragEventHandler
+type PointerEventHandler = (event: PointerEvent) => mixed
+type PointerEventListener = {handleEvent: PointerEventHandler} | PointerEventHandler
 type AnimationEventHandler = (event: AnimationEvent) => mixed
 type AnimationEventListener = {handleEvent: AnimationEventHandler} | AnimationEventHandler
 type ClipboardEventHandler = (event: ClipboardEvent) => mixed
@@ -146,6 +148,7 @@ type TouchEventTypes = 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel';
 type WheelEventTypes = 'wheel';
 type ProgressEventTypes = 'abort' | 'error' | 'load' | 'loadend' | 'loadstart' | 'progress' | 'timeout';
 type DragEventTypes = 'drag' | 'dragend' | 'dragenter' | 'dragexit' | 'dragleave' | 'dragover' | 'dragstart' | 'drop';
+type PointerEventTypes = 'pointerover' | 'pointerenter' | 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel' | 'pointerout' | 'pointerleave' | 'gotpointercapture' | 'lostpointercapture';
 type AnimationEventTypes = 'animationstart' | 'animationend' | 'animationiteration';
 type ClipboardEventTypes = 'clipboardchange' | 'cut' | 'copy' | 'paste';
 
@@ -163,6 +166,7 @@ declare class EventTarget {
   addEventListener(type: WheelEventTypes, listener: WheelEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   addEventListener(type: ProgressEventTypes, listener: ProgressEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   addEventListener(type: DragEventTypes, listener: DragEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
+  addEventListener(type: PointerEventTypes, listener: PointerEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   addEventListener(type: AnimationEventTypes, listener: AnimationEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   addEventListener(type: ClipboardEventTypes, listener: ClipboardEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   addEventListener(type: string, listener: EventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
@@ -174,6 +178,7 @@ declare class EventTarget {
   removeEventListener(type: WheelEventTypes, listener: WheelEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   removeEventListener(type: ProgressEventTypes, listener: ProgressEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   removeEventListener(type: DragEventTypes, listener: DragEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
+  removeEventListener(type: PointerEventTypes, listener: PointerEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   removeEventListener(type: AnimationEventTypes, listener: AnimationEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   removeEventListener(type: ClipboardEventTypes, listener: ClipboardEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
   removeEventListener(type: string, listener: EventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
@@ -185,6 +190,7 @@ declare class EventTarget {
   attachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
   attachEvent?: (type: ProgressEventTypes, listener: ProgressEventListener) => void;
   attachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
+  attachEvent?: (type: PointerEventTypes, listener: PointerEventListener) => void;
   attachEvent?: (type: AnimationEventTypes, listener: AnimationEventListener) => void;
   attachEvent?: (type: ClipboardEventTypes, listener: ClipboardEventListener) => void;
   attachEvent?: (type: string, listener: EventListener) => void;
@@ -196,6 +202,7 @@ declare class EventTarget {
   detachEvent?: (type: WheelEventTypes, listener: WheelEventListener) => void;
   detachEvent?: (type: ProgressEventTypes, listener: ProgressEventListener) => void;
   detachEvent?: (type: DragEventTypes, listener: DragEventListener) => void;
+  detachEvent?: (type: PointerEventTypes, listener: PointerEventListener) => void;
   detachEvent?: (type: AnimationEventTypes, listener: AnimationEventListener) => void;
   detachEvent?: (type: ClipboardEventTypes, listener: ClipboardEventListener) => void;
   detachEvent?: (type: string, listener: EventListener) => void;
@@ -322,6 +329,36 @@ declare class DragEvent extends MouseEvent {
   dataTransfer: ?DataTransfer; // readonly
 }
 
+type PointerEvent$PointerEventInit = MouseEvent$MouseEventInit & {
+  pointerId?: number;
+  width?: number;
+  height?: number;
+  pressure?: number;
+  tangentialPressure?: number;
+  tiltX?: number;
+  tiltY?: number;
+  twist?: number;
+  pointerType?: string;
+  isPrimary?: boolean;
+};
+
+declare class PointerEvent extends MouseEvent {
+  constructor(
+    typeArg: string,
+    pointerEventInit?: PointerEvent$PointerEventInit,
+  ): void;
+  pointerId: number;
+  width: number;
+  height: number;
+  pressure: number;
+  tangentialPressure: number;
+  tiltX: number;
+  tiltY: number;
+  twist: number;
+  pointerType: string;
+  isPrimary: boolean;
+}
+
 declare class ProgressEvent extends Event {
   lengthComputable: boolean;
   loaded: number;
@@ -1523,6 +1560,7 @@ declare class HTMLElement extends Element {
   onended: ?Function;
   onerror: ?Function;
   onfocus: ?Function;
+  ongotpointercapture: ?Function,
   oninput: ?Function;
   oninvalid: ?Function;
   onkeydown: ?Function;
@@ -1532,6 +1570,7 @@ declare class HTMLElement extends Element {
   onloadeddata: ?Function;
   onloadedmetadata: ?Function;
   onloadstart: ?Function;
+  onlostpointercapture: ?Function,
   onmousedown: ?Function;
   onmouseenter: ?Function;
   onmouseleave: ?Function;
@@ -1543,6 +1582,14 @@ declare class HTMLElement extends Element {
   onpause: ?Function;
   onplay: ?Function;
   onplaying: ?Function;
+  onpointercancel: ?Function,
+  onpointerdown: ?Function,
+  onpointerenter: ?Function,
+  onpointerleave: ?Function,
+  onpointermove: ?Function,
+  onpointerout: ?Function,
+  onpointerover: ?Function,
+  onpointerup: ?Function,
   onprogress: ?Function;
   onratechange: ?Function;
   onreadystatechange: ?Function;

lib/react-dom.js

@@ -224,6 +224,21 @@ declare class SyntheticWheelEvent<
   deltaZ: number;
 }
 
+declare class SyntheticPointerEvent<
+  +T: EventTarget = EventTarget,
+> extends SyntheticMouseEvent<T> {
+  pointerId: number;
+  width: number;
+  height: number;
+  pressure: number;
+  tangentialPressure: number;
+  tiltX: number;
+  tiltY: number;
+  twist: number;
+  pointerType: string;
+  isPrimary: boolean;
+}
+
 declare class SyntheticTouchEvent<
   +T: EventTarget = EventTarget,
 > extends SyntheticUIEvent<T> {

tests/bom/bom.exp

@@ -22,8 +22,8 @@ with `HTMLFormElement` [2].
                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 References:
-   <BUILTINS>/dom.js:617:36
-   617|   createElement(tagName: 'input'): HTMLInputElement;
+   <BUILTINS>/dom.js:654:36
+   654|   createElement(tagName: 'input'): HTMLInputElement;
                                            ^^^^^^^^^^^^^^^^ [1]
    <BUILTINS>/bom.js:330:24
    330|     constructor(form?: HTMLFormElement): void;