[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

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;