{"parents":["6ef997b534bfbf10071401ea15b39a678d557135"],"commit":{"shortRevision":"22d16cc15d","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","revision":"22d16cc15df8e570b79c2825fb495c2b98b40bf5","authoredAt":"2020-07-30T21:52:37+01:00","subject":"Remove event constants (#19276)"},"body":"* Remove opaque event type\r\n\r\n* Rename type and merge files\r\n\r\n* Use literals where we have Flow coverage\r\n\r\n* Flowify some plugins\r\n\r\n* Remove constants except necessary ones","patch":"diff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex aac854afc1..d7c0d94afb 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -91,14 +91,6 @@ import {\n listenToNonDelegatedEvent,\n } from '..\/events\/DOMPluginEventSystem';\n import {getEventListenerMap} from '.\/ReactDOMComponentTree';\n-import {\n- TOP_LOAD,\n- TOP_ERROR,\n- TOP_TOGGLE,\n- TOP_INVALID,\n- TOP_CANCEL,\n- TOP_CLOSE,\n-} from '..\/events\/DOMTopLevelEventTypes';\n \n let didWarnInvalidHydration = false;\n let didWarnScriptTags = false;\n@@ -542,8 +534,8 @@ export function setInitialProperties(\n let props: Object;\n switch (tag) {\n case 'dialog':\n- listenToNonDelegatedEvent(TOP_CANCEL, domElement);\n- listenToNonDelegatedEvent(TOP_CLOSE, domElement);\n+ listenToNonDelegatedEvent('cancel', domElement);\n+ listenToNonDelegatedEvent('close', domElement);\n props = rawProps;\n break;\n case 'iframe':\n@@ -551,7 +543,7 @@ export function setInitialProperties(\n case 'embed':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the load event.\n- listenToNonDelegatedEvent(TOP_LOAD, domElement);\n+ listenToNonDelegatedEvent('load', domElement);\n props = rawProps;\n break;\n case 'video':\n@@ -566,7 +558,7 @@ export function setInitialProperties(\n case 'source':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the error event.\n- listenToNonDelegatedEvent(TOP_ERROR, domElement);\n+ listenToNonDelegatedEvent('error', domElement);\n props = rawProps;\n break;\n case 'img':\n@@ -574,14 +566,14 @@ export function setInitialProperties(\n case 'link':\n \/\/ We listen to these events in case to ensure emulated bubble\n \/\/ listeners still fire for error and load events.\n- listenToNonDelegatedEvent(TOP_ERROR, domElement);\n- listenToNonDelegatedEvent(TOP_LOAD, domElement);\n+ listenToNonDelegatedEvent('error', domElement);\n+ listenToNonDelegatedEvent('load', domElement);\n props = rawProps;\n break;\n case 'details':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the toggle event.\n- listenToNonDelegatedEvent(TOP_TOGGLE, domElement);\n+ listenToNonDelegatedEvent('toggle', domElement);\n props = rawProps;\n break;\n case 'input':\n@@ -589,7 +581,7 @@ export function setInitialProperties(\n props = ReactDOMInputGetHostProps(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\n@@ -603,7 +595,7 @@ export function setInitialProperties(\n props = ReactDOMSelectGetHostProps(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\n@@ -613,7 +605,7 @@ export function setInitialProperties(\n props = ReactDOMTextareaGetHostProps(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\n@@ -947,15 +939,15 @@ export function diffHydratedProperties(\n \/\/ TODO: Make sure that we check isMounted before firing any of these events.\n switch (tag) {\n case 'dialog':\n- listenToNonDelegatedEvent(TOP_CANCEL, domElement);\n- listenToNonDelegatedEvent(TOP_CLOSE, domElement);\n+ listenToNonDelegatedEvent('cancel', domElement);\n+ listenToNonDelegatedEvent('close', domElement);\n break;\n case 'iframe':\n case 'object':\n case 'embed':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the load event.\n- listenToNonDelegatedEvent(TOP_LOAD, domElement);\n+ listenToNonDelegatedEvent('load', domElement);\n break;\n case 'video':\n case 'audio':\n@@ -968,26 +960,26 @@ export function diffHydratedProperties(\n case 'source':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the error event.\n- listenToNonDelegatedEvent(TOP_ERROR, domElement);\n+ listenToNonDelegatedEvent('error', domElement);\n break;\n case 'img':\n case 'image':\n case 'link':\n \/\/ We listen to these events in case to ensure emulated bubble\n \/\/ listeners still fire for error and load events.\n- listenToNonDelegatedEvent(TOP_ERROR, domElement);\n- listenToNonDelegatedEvent(TOP_LOAD, domElement);\n+ listenToNonDelegatedEvent('error', domElement);\n+ listenToNonDelegatedEvent('load', domElement);\n break;\n case 'details':\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the toggle event.\n- listenToNonDelegatedEvent(TOP_TOGGLE, domElement);\n+ listenToNonDelegatedEvent('toggle', domElement);\n break;\n case 'input':\n ReactDOMInputInitWrapperState(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\n@@ -999,7 +991,7 @@ export function diffHydratedProperties(\n ReactDOMSelectInitWrapperState(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\n@@ -1008,7 +1000,7 @@ export function diffHydratedProperties(\n ReactDOMTextareaInitWrapperState(domElement, rawProps);\n \/\/ We listen to this event in case to ensure emulated bubble\n \/\/ listeners still fire for the invalid event.\n- listenToNonDelegatedEvent(TOP_INVALID, domElement);\n+ listenToNonDelegatedEvent('invalid', domElement);\n \/\/ For controlled components we always need to ensure we're listening\n \/\/ to onChange. Even if there is no listener.\n ensureListeningTo(rootContainerElement, 'onChange', domElement);\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\nindex 606050f8f3..d5f09c1caf 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n@@ -17,7 +17,7 @@ import type {\n SuspenseInstance,\n Props,\n } from '.\/ReactDOMHostConfig';\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n \n import {\n HostComponent,\n@@ -41,7 +41,7 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;\n const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;\n \n export type ElementListenerMap = Map<\n- DOMTopLevelEventType | string,\n+ DOMEventName | string,\n ElementListenerMapEntry | null,\n >;\n \ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\nindex c4d7d41353..4c178fb701 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n import type {EventPriority, ReactScopeInstance} from 'shared\/ReactTypes';\n import type {\n ReactDOMEventHandle,\n@@ -69,7 +69,7 @@ function isReactScope(target: EventTarget | ReactScopeInstance): boolean {\n }\n \n function createEventHandleListener(\n- type: DOMTopLevelEventType,\n+ type: DOMEventName,\n isCapturePhaseListener: boolean,\n callback: (SyntheticEvent) => void,\n ): ReactDOMEventHandleListener {\n@@ -82,7 +82,7 @@ function createEventHandleListener(\n \n function registerEventOnNearestTargetContainer(\n targetFiber: Fiber,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n isPassiveListener: boolean | void,\n listenerPriority: EventPriority | void,\n isCapturePhaseListener: boolean,\n@@ -102,7 +102,7 @@ function registerEventOnNearestTargetContainer(\n targetContainer = ((targetContainer.parentNode: any): Element);\n }\n listenToNativeEvent(\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n targetContainer,\n targetElement,\n@@ -113,7 +113,7 @@ function registerEventOnNearestTargetContainer(\n \n function registerReactDOMEvent(\n target: EventTarget | ReactScopeInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n isPassiveListener: boolean | void,\n isCapturePhaseListener: boolean,\n listenerPriority: EventPriority | void,\n@@ -132,7 +132,7 @@ function registerReactDOMEvent(\n }\n registerEventOnNearestTargetContainer(\n targetFiber,\n- topLevelType,\n+ domEventName,\n isPassiveListener,\n listenerPriority,\n isCapturePhaseListener,\n@@ -147,7 +147,7 @@ function registerReactDOMEvent(\n }\n registerEventOnNearestTargetContainer(\n targetFiber,\n- topLevelType,\n+ domEventName,\n isPassiveListener,\n listenerPriority,\n isCapturePhaseListener,\n@@ -158,7 +158,7 @@ function registerReactDOMEvent(\n \/\/ These are valid event targets, but they are also\n \/\/ non-managed React nodes.\n listenToNativeEvent(\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n eventTarget,\n null,\n@@ -180,7 +180,7 @@ export function createEventHandle(\n options?: EventHandleOptions,\n ): ReactDOMEventHandle {\n if (enableCreateEventHandleAPI) {\n- const topLevelType = ((type: any): DOMTopLevelEventType);\n+ const domEventName = ((type: any): DOMEventName);\n let isCapturePhaseListener = false;\n let isPassiveListener = undefined; \/\/ Undefined means to use the browser default\n let listenerPriority;\n@@ -201,7 +201,7 @@ export function createEventHandle(\n }\n }\n if (listenerPriority === undefined) {\n- listenerPriority = getEventPriorityForListenerSystem(topLevelType);\n+ listenerPriority = getEventPriorityForListenerSystem(domEventName);\n }\n \n const registeredReactDOMEvents = new PossiblyWeakSet();\n@@ -219,16 +219,16 @@ export function createEventHandle(\n registeredReactDOMEvents.add(target);\n registerReactDOMEvent(\n target,\n- topLevelType,\n+ domEventName,\n isPassiveListener,\n isCapturePhaseListener,\n listenerPriority,\n );\n \/\/ Add the event to our known event types list.\n- addEventTypeToDispatchConfig(topLevelType);\n+ addEventTypeToDispatchConfig(domEventName);\n }\n const listener = createEventHandleListener(\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n callback,\n );\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex ace543ead3..24e65753ac 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import type {TopLevelType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n import type {Fiber, FiberRoot} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {\n BoundingRect,\n@@ -79,7 +79,6 @@ import {\n enableScopeAPI,\n } from 'shared\/ReactFeatureFlags';\n import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n-import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n import {listenToReactEvent} from '..\/events\/DOMPluginEventSystem';\n \n export type Type = string;\n@@ -504,7 +503,7 @@ export function insertInContainerBefore(\n }\n }\n \n-function createEvent(type: TopLevelType, bubbles: boolean): Event {\n+function createEvent(type: DOMEventName, bubbles: boolean): Event {\n const event = document.createEvent('Event');\n event.initEvent(((type: any): string), bubbles, false);\n return event;\n@@ -512,7 +511,7 @@ function createEvent(type: TopLevelType, bubbles: boolean): Event {\n \n function dispatchBeforeDetachedBlur(target: HTMLElement): void {\n if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {\n- const event = createEvent(TOP_BEFORE_BLUR, true);\n+ const event = createEvent('beforeblur', true);\n \/\/ Dispatch \"beforeblur\" directly on the target,\n \/\/ so it gets picked up by the event system and\n \/\/ can propagate through the React internal tree.\n@@ -522,7 +521,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {\n \n function dispatchAfterDetachedBlur(target: HTMLElement): void {\n if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {\n- const event = createEvent(TOP_AFTER_BLUR, false);\n+ const event = createEvent('afterblur', false);\n \/\/ So we know what was detached, make the relatedTarget the\n \/\/ detached target on the \"afterblur\" event.\n (event: any).relatedTarget = target;\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventNames.js b\/packages\/react-dom\/src\/events\/DOMEventNames.js\nnew file mode 100644\nindex 0000000000..42d72bc61a\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/DOMEventNames.js\n@@ -0,0 +1,111 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import getVendorPrefixedEventName from '.\/getVendorPrefixedEventName';\n+\n+export type DOMEventName =\n+ | 'abort'\n+ | 'afterblur' \/\/ Not a real event. This is used by event experiments.\n+ \/\/ These are vendor-prefixed so you should use the exported constants instead:\n+ \/\/ 'animationiteration' |\n+ \/\/ 'animationend |\n+ \/\/ 'animationstart' |\n+ | 'beforeblur' \/\/ Not a real event. This is used by event experiments.\n+ | 'canplay'\n+ | 'canplaythrough'\n+ | 'cancel'\n+ | 'change'\n+ | 'click'\n+ | 'close'\n+ | 'compositionend'\n+ | 'compositionstart'\n+ | 'compositionupdate'\n+ | 'contextmenu'\n+ | 'copy'\n+ | 'cut'\n+ | 'dblclick'\n+ | 'auxclick'\n+ | 'drag'\n+ | 'dragend'\n+ | 'dragenter'\n+ | 'dragexit'\n+ | 'dragleave'\n+ | 'dragover'\n+ | 'dragstart'\n+ | 'drop'\n+ | 'durationchange'\n+ | 'emptied'\n+ | 'encrypted'\n+ | 'ended'\n+ | 'error'\n+ | 'focusin'\n+ | 'focusout'\n+ | 'gotpointercapture'\n+ | 'input'\n+ | 'invalid'\n+ | 'keydown'\n+ | 'keypress'\n+ | 'keyup'\n+ | 'load'\n+ | 'loadstart'\n+ | 'loadeddata'\n+ | 'loadedmetadata'\n+ | 'lostpointercapture'\n+ | 'mousedown'\n+ | 'mousemove'\n+ | 'mouseout'\n+ | 'mouseover'\n+ | 'mouseup'\n+ | 'paste'\n+ | 'pause'\n+ | 'play'\n+ | 'playing'\n+ | 'pointercancel'\n+ | 'pointerdown'\n+ | 'pointerenter'\n+ | 'pointerleave'\n+ | 'pointermove'\n+ | 'pointerout'\n+ | 'pointerover'\n+ | 'pointerup'\n+ | 'progress'\n+ | 'ratechange'\n+ | 'reset'\n+ | 'scroll'\n+ | 'seeked'\n+ | 'seeking'\n+ | 'selectionchange'\n+ | 'stalled'\n+ | 'submit'\n+ | 'suspend'\n+ | 'textInput' \/\/ Intentionally camelCase. Non-standard.\n+ | 'timeupdate'\n+ | 'toggle'\n+ | 'touchcancel'\n+ | 'touchend'\n+ | 'touchmove'\n+ | 'touchstart'\n+ \/\/ These are vendor-prefixed so you should use the exported constants instead:\n+ \/\/ 'transitionend' |\n+ | 'volumechange'\n+ | 'waiting'\n+ | 'wheel';\n+\n+export const ANIMATION_END: DOMEventName = getVendorPrefixedEventName(\n+ 'animationend',\n+);\n+export const ANIMATION_ITERATION: DOMEventName = getVendorPrefixedEventName(\n+ 'animationiteration',\n+);\n+export const ANIMATION_START: DOMEventName = getVendorPrefixedEventName(\n+ 'animationstart',\n+);\n+export const TRANSITION_END: DOMEventName = getVendorPrefixedEventName(\n+ 'transitionend',\n+);\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventProperties.js b\/packages\/react-dom\/src\/events\/DOMEventProperties.js\nindex c840d90360..a8d8ad4896 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventProperties.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventProperties.js\n@@ -8,13 +8,15 @@\n *\/\n \n import type {EventPriority} from 'shared\/ReactTypes';\n-import type {\n- TopLevelType,\n- DOMTopLevelEventType,\n-} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n \n import {registerTwoPhaseEvent} from '.\/EventRegistry';\n-import * as DOMTopLevelEventTypes from '.\/DOMTopLevelEventTypes';\n+import {\n+ ANIMATION_END,\n+ ANIMATION_ITERATION,\n+ ANIMATION_START,\n+ TRANSITION_END,\n+} from '.\/DOMEventNames';\n import {\n DiscreteEvent,\n UserBlockingEvent,\n@@ -24,7 +26,7 @@ import {\n import {enableCreateEventHandleAPI} from 'shared\/ReactFeatureFlags';\n \n export const topLevelEventsToReactNames: Map<\n- TopLevelType,\n+ DOMEventName,\n string | null,\n > = new Map();\n \n@@ -41,104 +43,101 @@ const eventPriorities = new Map();\n \n \/\/ prettier-ignore\n const discreteEventPairsForSimpleEventPlugin = [\n- DOMTopLevelEventTypes.TOP_CANCEL, 'cancel',\n- DOMTopLevelEventTypes.TOP_CLICK, 'click',\n- DOMTopLevelEventTypes.TOP_CLOSE, 'close',\n- DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu',\n- DOMTopLevelEventTypes.TOP_COPY, 'copy',\n- DOMTopLevelEventTypes.TOP_CUT, 'cut',\n- DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick',\n- DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick',\n- DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd',\n- DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart',\n- DOMTopLevelEventTypes.TOP_DROP, 'drop',\n- DOMTopLevelEventTypes.TOP_FOCUS_IN, 'focus',\n- DOMTopLevelEventTypes.TOP_FOCUS_OUT, 'blur',\n- DOMTopLevelEventTypes.TOP_INPUT, 'input',\n- DOMTopLevelEventTypes.TOP_INVALID, 'invalid',\n- DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown',\n- DOMTopLevelEventTypes.TOP_KEY_PRESS, 'keyPress',\n- DOMTopLevelEventTypes.TOP_KEY_UP, 'keyUp',\n- DOMTopLevelEventTypes.TOP_MOUSE_DOWN, 'mouseDown',\n- DOMTopLevelEventTypes.TOP_MOUSE_UP, 'mouseUp',\n- DOMTopLevelEventTypes.TOP_PASTE, 'paste',\n- DOMTopLevelEventTypes.TOP_PAUSE, 'pause',\n- DOMTopLevelEventTypes.TOP_PLAY, 'play',\n- DOMTopLevelEventTypes.TOP_POINTER_CANCEL, 'pointerCancel',\n- DOMTopLevelEventTypes.TOP_POINTER_DOWN, 'pointerDown',\n- DOMTopLevelEventTypes.TOP_POINTER_UP, 'pointerUp',\n- DOMTopLevelEventTypes.TOP_RATE_CHANGE, 'rateChange',\n- DOMTopLevelEventTypes.TOP_RESET, 'reset',\n- DOMTopLevelEventTypes.TOP_SEEKED, 'seeked',\n- DOMTopLevelEventTypes.TOP_SUBMIT, 'submit',\n- DOMTopLevelEventTypes.TOP_TOUCH_CANCEL, 'touchCancel',\n- DOMTopLevelEventTypes.TOP_TOUCH_END, 'touchEnd',\n- DOMTopLevelEventTypes.TOP_TOUCH_START, 'touchStart',\n- DOMTopLevelEventTypes.TOP_VOLUME_CHANGE, 'volumeChange',\n+ ('cancel': DOMEventName), 'cancel',\n+ ('click': DOMEventName), 'click',\n+ ('close': DOMEventName), 'close',\n+ ('contextmenu': DOMEventName), 'contextMenu',\n+ ('copy': DOMEventName), 'copy',\n+ ('cut': DOMEventName), 'cut',\n+ ('auxclick': DOMEventName), 'auxClick',\n+ ('dblclick': DOMEventName), 'doubleClick', \/\/ Careful!\n+ ('dragend': DOMEventName), 'dragEnd',\n+ ('dragstart': DOMEventName), 'dragStart',\n+ ('drop': DOMEventName), 'drop',\n+ ('focusin': DOMEventName), 'focus', \/\/ Careful!\n+ ('focusout': DOMEventName), 'blur', \/\/ Careful!\n+ ('input': DOMEventName), 'input',\n+ ('invalid': DOMEventName), 'invalid',\n+ ('keydown': DOMEventName), 'keyDown',\n+ ('keypress': DOMEventName), 'keyPress',\n+ ('keyup': DOMEventName), 'keyUp',\n+ ('mousedown': DOMEventName), 'mouseDown',\n+ ('mouseup': DOMEventName), 'mouseUp',\n+ ('paste': DOMEventName), 'paste',\n+ ('pause': DOMEventName), 'pause',\n+ ('play': DOMEventName), 'play',\n+ ('pointercancel': DOMEventName), 'pointerCancel',\n+ ('pointerdown': DOMEventName), 'pointerDown',\n+ ('pointerup': DOMEventName), 'pointerUp',\n+ ('ratechange': DOMEventName), 'rateChange',\n+ ('reset': DOMEventName), 'reset',\n+ ('seeked': DOMEventName), 'seeked',\n+ ('submit': DOMEventName), 'submit',\n+ ('touchcancel': DOMEventName), 'touchCancel',\n+ ('touchend': DOMEventName), 'touchEnd',\n+ ('touchstart': DOMEventName), 'touchStart',\n+ ('volumechange': DOMEventName), 'volumeChange',\n ];\n \n-const otherDiscreteEvents = [\n- DOMTopLevelEventTypes.TOP_CHANGE,\n- DOMTopLevelEventTypes.TOP_SELECTION_CHANGE,\n- DOMTopLevelEventTypes.TOP_TEXT_INPUT,\n- DOMTopLevelEventTypes.TOP_COMPOSITION_START,\n- DOMTopLevelEventTypes.TOP_COMPOSITION_END,\n- DOMTopLevelEventTypes.TOP_COMPOSITION_UPDATE,\n+const otherDiscreteEvents: Array = [\n+ 'change',\n+ 'selectionchange',\n+ 'textInput',\n+ 'compositionstart',\n+ 'compositionend',\n+ 'compositionupdate',\n ];\n \n if (enableCreateEventHandleAPI) {\n- otherDiscreteEvents.push(\n- DOMTopLevelEventTypes.TOP_BEFORE_BLUR,\n- DOMTopLevelEventTypes.TOP_AFTER_BLUR,\n- );\n+ otherDiscreteEvents.push('beforeblur', 'afterblur');\n }\n \n \/\/ prettier-ignore\n-const userBlockingPairsForSimpleEventPlugin = [\n- DOMTopLevelEventTypes.TOP_DRAG, 'drag',\n- DOMTopLevelEventTypes.TOP_DRAG_ENTER, 'dragEnter',\n- DOMTopLevelEventTypes.TOP_DRAG_EXIT, 'dragExit',\n- DOMTopLevelEventTypes.TOP_DRAG_LEAVE, 'dragLeave',\n- DOMTopLevelEventTypes.TOP_DRAG_OVER, 'dragOver',\n- DOMTopLevelEventTypes.TOP_MOUSE_MOVE, 'mouseMove',\n- DOMTopLevelEventTypes.TOP_MOUSE_OUT, 'mouseOut',\n- DOMTopLevelEventTypes.TOP_MOUSE_OVER, 'mouseOver',\n- DOMTopLevelEventTypes.TOP_POINTER_MOVE, 'pointerMove',\n- DOMTopLevelEventTypes.TOP_POINTER_OUT, 'pointerOut',\n- DOMTopLevelEventTypes.TOP_POINTER_OVER, 'pointerOver',\n- DOMTopLevelEventTypes.TOP_SCROLL, 'scroll',\n- DOMTopLevelEventTypes.TOP_TOGGLE, 'toggle',\n- DOMTopLevelEventTypes.TOP_TOUCH_MOVE, 'touchMove',\n- DOMTopLevelEventTypes.TOP_WHEEL, 'wheel',\n+const userBlockingPairsForSimpleEventPlugin: Array = [\n+ ('drag': DOMEventName), 'drag',\n+ ('dragenter': DOMEventName), 'dragEnter',\n+ ('dragexit': DOMEventName), 'dragExit',\n+ ('dragleave': DOMEventName), 'dragLeave',\n+ ('dragover': DOMEventName), 'dragOver',\n+ ('mousemove': DOMEventName), 'mouseMove',\n+ ('mouseout': DOMEventName), 'mouseOut',\n+ ('mouseover': DOMEventName), 'mouseOver',\n+ ('pointermove': DOMEventName), 'pointerMove',\n+ ('pointerout': DOMEventName), 'pointerOut',\n+ ('pointerover': DOMEventName), 'pointerOver',\n+ ('scroll': DOMEventName), 'scroll',\n+ ('toggle': DOMEventName), 'toggle',\n+ ('touchmove': DOMEventName), 'touchMove',\n+ ('wheel': DOMEventName), 'wheel',\n ];\n \n \/\/ prettier-ignore\n-const continuousPairsForSimpleEventPlugin = [\n- DOMTopLevelEventTypes.TOP_ABORT, 'abort',\n- DOMTopLevelEventTypes.TOP_ANIMATION_END, 'animationEnd',\n- DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION, 'animationIteration',\n- DOMTopLevelEventTypes.TOP_ANIMATION_START, 'animationStart',\n- DOMTopLevelEventTypes.TOP_CAN_PLAY, 'canPlay',\n- DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH, 'canPlayThrough',\n- DOMTopLevelEventTypes.TOP_DURATION_CHANGE, 'durationChange',\n- DOMTopLevelEventTypes.TOP_EMPTIED, 'emptied',\n- DOMTopLevelEventTypes.TOP_ENCRYPTED, 'encrypted',\n- DOMTopLevelEventTypes.TOP_ENDED, 'ended',\n- DOMTopLevelEventTypes.TOP_ERROR, 'error',\n- DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture',\n- DOMTopLevelEventTypes.TOP_LOAD, 'load',\n- DOMTopLevelEventTypes.TOP_LOADED_DATA, 'loadedData',\n- DOMTopLevelEventTypes.TOP_LOADED_METADATA, 'loadedMetadata',\n- DOMTopLevelEventTypes.TOP_LOAD_START, 'loadStart',\n- DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture',\n- DOMTopLevelEventTypes.TOP_PLAYING, 'playing',\n- DOMTopLevelEventTypes.TOP_PROGRESS, 'progress',\n- DOMTopLevelEventTypes.TOP_SEEKING, 'seeking',\n- DOMTopLevelEventTypes.TOP_STALLED, 'stalled',\n- DOMTopLevelEventTypes.TOP_SUSPEND, 'suspend',\n- DOMTopLevelEventTypes.TOP_TIME_UPDATE, 'timeUpdate',\n- DOMTopLevelEventTypes.TOP_TRANSITION_END, 'transitionEnd',\n- DOMTopLevelEventTypes.TOP_WAITING, 'waiting',\n+const continuousPairsForSimpleEventPlugin: Array = [\n+ ('abort': DOMEventName), 'abort',\n+ (ANIMATION_END: DOMEventName), 'animationEnd',\n+ (ANIMATION_ITERATION: DOMEventName), 'animationIteration',\n+ (ANIMATION_START: DOMEventName), 'animationStart',\n+ ('canplay': DOMEventName), 'canPlay',\n+ ('canplaythrough': DOMEventName), 'canPlayThrough',\n+ ('durationchange': DOMEventName), 'durationChange',\n+ ('emptied': DOMEventName), 'emptied',\n+ ('encrypted': DOMEventName), 'encrypted',\n+ ('ended': DOMEventName), 'ended',\n+ ('error': DOMEventName), 'error',\n+ ('gotpointercapture': DOMEventName), 'gotPointerCapture',\n+ ('load': DOMEventName), 'load',\n+ ('loadeddata': DOMEventName), 'loadedData',\n+ ('loadedmetadata': DOMEventName), 'loadedMetadata',\n+ ('loadstart': DOMEventName), 'loadStart',\n+ ('lostpointercapture': DOMEventName), 'lostPointerCapture',\n+ ('playing': DOMEventName), 'playing',\n+ ('progress': DOMEventName), 'progress',\n+ ('seeking': DOMEventName), 'seeking',\n+ ('stalled': DOMEventName), 'stalled',\n+ ('suspend': DOMEventName), 'suspend',\n+ ('timeupdate': DOMEventName), 'timeUpdate',\n+ (TRANSITION_END: DOMEventName), 'transitionEnd',\n+ ('waiting': DOMEventName), 'waiting',\n ];\n \n \/**\n@@ -148,13 +147,13 @@ const continuousPairsForSimpleEventPlugin = [\n * into\n *\n * topLevelEventsToReactNames = new Map([\n- * [TOP_ABORT, 'onAbort'],\n+ * ['abort', 'onAbort'],\n * ]);\n *\n * and registers them.\n *\/\n function registerSimplePluginEventsAndSetTheirPriorities(\n- eventTypes: Array,\n+ eventTypes: Array,\n priority: EventPriority,\n ): void {\n \/\/ As the event types are in pairs of two, we need to iterate\n@@ -164,7 +163,7 @@ function registerSimplePluginEventsAndSetTheirPriorities(\n \/\/ if we only use three arrays to process all the categories of\n \/\/ instead of tuples.\n for (let i = 0; i < eventTypes.length; i += 2) {\n- const topEvent = ((eventTypes[i]: any): DOMTopLevelEventType);\n+ const topEvent = ((eventTypes[i]: any): DOMEventName);\n const event = ((eventTypes[i + 1]: any): string);\n const capitalizedEvent = event[0].toUpperCase() + event.slice(1);\n const reactName = 'on' + capitalizedEvent;\n@@ -175,7 +174,7 @@ function registerSimplePluginEventsAndSetTheirPriorities(\n }\n \n function setEventPriorities(\n- eventTypes: Array,\n+ eventTypes: Array,\n priority: EventPriority,\n ): void {\n for (let i = 0; i < eventTypes.length; i++) {\n@@ -184,9 +183,9 @@ function setEventPriorities(\n }\n \n export function getEventPriorityForPluginSystem(\n- topLevelType: TopLevelType,\n+ domEventName: DOMEventName,\n ): EventPriority {\n- const priority = eventPriorities.get(topLevelType);\n+ const priority = eventPriorities.get(domEventName);\n \/\/ Default to a ContinuousEvent. Note: we might\n \/\/ want to warn if we can't detect the priority\n \/\/ for the event.\n@@ -194,7 +193,7 @@ export function getEventPriorityForPluginSystem(\n }\n \n export function getEventPriorityForListenerSystem(\n- type: DOMTopLevelEventType,\n+ type: DOMEventName,\n ): EventPriority {\n const priority = eventPriorities.get(type);\n if (priority !== undefined) {\ndiff --git a\/packages\/react-dom\/src\/events\/DOMPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMPluginEventSystem.js\nindex 687ac8033b..7eb027747a 100644\n--- a\/packages\/react-dom\/src\/events\/DOMPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMPluginEventSystem.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import type {TopLevelType, DOMTopLevelEventType} from '.\/TopLevelEventTypes';\n+import type {DOMEventName} from '.\/DOMEventNames';\n import {\n type EventSystemFlags,\n SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE,\n@@ -37,40 +37,6 @@ import {\n } from 'react-reconciler\/src\/ReactWorkTags';\n \n import getEventTarget from '.\/getEventTarget';\n-import {\n- TOP_LOAD,\n- TOP_ABORT,\n- TOP_CANCEL,\n- TOP_INVALID,\n- TOP_SCROLL,\n- TOP_CLOSE,\n- TOP_CAN_PLAY,\n- TOP_CAN_PLAY_THROUGH,\n- TOP_DURATION_CHANGE,\n- TOP_EMPTIED,\n- TOP_ENCRYPTED,\n- TOP_ENDED,\n- TOP_ERROR,\n- TOP_WAITING,\n- TOP_VOLUME_CHANGE,\n- TOP_TIME_UPDATE,\n- TOP_SUSPEND,\n- TOP_STALLED,\n- TOP_SEEKING,\n- TOP_SEEKED,\n- TOP_PLAY,\n- TOP_PAUSE,\n- TOP_LOAD_START,\n- TOP_LOADED_DATA,\n- TOP_LOADED_METADATA,\n- TOP_RATE_CHANGE,\n- TOP_PROGRESS,\n- TOP_PLAYING,\n- TOP_CLICK,\n- TOP_SELECTION_CHANGE,\n- TOP_TOGGLE,\n- getRawEventName,\n-} from '.\/DOMTopLevelEventTypes';\n import {\n getClosestInstanceFromNode,\n getEventListenerMap,\n@@ -128,7 +94,7 @@ BeforeInputEventPlugin.registerEvents();\n \n function extractEvents(\n dispatchQueue: DispatchQueue,\n- topLevelType: TopLevelType,\n+ domEventName: DOMEventName,\n targetInst: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: null | EventTarget,\n@@ -143,7 +109,7 @@ function extractEvents(\n \/\/ us to ship builds of React without the polyfilled plugins below.\n SimpleEventPlugin.extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -172,7 +138,7 @@ function extractEvents(\n if (shouldProcessPolyfillPlugins) {\n EnterLeaveEventPlugin.extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -181,7 +147,7 @@ function extractEvents(\n );\n ChangeEventPlugin.extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -190,7 +156,7 @@ function extractEvents(\n );\n SelectEventPlugin.extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -199,7 +165,7 @@ function extractEvents(\n );\n BeforeInputEventPlugin.extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -210,42 +176,42 @@ function extractEvents(\n }\n \n \/\/ List of events that need to be individually attached to media elements.\n-export const mediaEventTypes = [\n- TOP_ABORT,\n- TOP_CAN_PLAY,\n- TOP_CAN_PLAY_THROUGH,\n- TOP_DURATION_CHANGE,\n- TOP_EMPTIED,\n- TOP_ENCRYPTED,\n- TOP_ENDED,\n- TOP_ERROR,\n- TOP_LOADED_DATA,\n- TOP_LOADED_METADATA,\n- TOP_LOAD_START,\n- TOP_PAUSE,\n- TOP_PLAY,\n- TOP_PLAYING,\n- TOP_PROGRESS,\n- TOP_RATE_CHANGE,\n- TOP_SEEKED,\n- TOP_SEEKING,\n- TOP_STALLED,\n- TOP_SUSPEND,\n- TOP_TIME_UPDATE,\n- TOP_VOLUME_CHANGE,\n- TOP_WAITING,\n+export const mediaEventTypes: Array = [\n+ 'abort',\n+ 'canplay',\n+ 'canplaythrough',\n+ 'durationchange',\n+ 'emptied',\n+ 'encrypted',\n+ 'ended',\n+ 'error',\n+ 'loadeddata',\n+ 'loadedmetadata',\n+ 'loadstart',\n+ 'pause',\n+ 'play',\n+ 'playing',\n+ 'progress',\n+ 'ratechange',\n+ 'seeked',\n+ 'seeking',\n+ 'stalled',\n+ 'suspend',\n+ 'timeupdate',\n+ 'volumechange',\n+ 'waiting',\n ];\n \n \/\/ We should not delegate these events to the container, but rather\n \/\/ set them on the actual target element itself. This is primarily\n \/\/ because these events do not consistently bubble in the DOM.\n-export const nonDelegatedEvents: Set = new Set([\n- TOP_CANCEL,\n- TOP_CLOSE,\n- TOP_INVALID,\n- TOP_LOAD,\n- TOP_SCROLL,\n- TOP_TOGGLE,\n+export const nonDelegatedEvents: Set = new Set([\n+ 'cancel',\n+ 'close',\n+ 'invalid',\n+ 'load',\n+ 'scroll',\n+ 'toggle',\n \/\/ In order to reduce bytes, we insert the above array of media events\n \/\/ into this Set. Note: the \"error\" event isn't an exclusive media event,\n \/\/ and can occur on other elements too. Rather than duplicate that event,\n@@ -306,7 +272,7 @@ export function processDispatchQueue(\n }\n \n function dispatchEventsForPlugins(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n nativeEvent: AnyNativeEvent,\n targetInst: null | Fiber,\n@@ -316,7 +282,7 @@ function dispatchEventsForPlugins(\n const dispatchQueue: DispatchQueue = [];\n extractEvents(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -336,13 +302,13 @@ function shouldUpgradeListener(\n }\n \n export function listenToNonDelegatedEvent(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n targetElement: Element,\n ): void {\n const isCapturePhaseListener = false;\n const listenerMap = getEventListenerMap(targetElement);\n const listenerMapKey = getListenerMapKey(\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n );\n const listenerEntry = ((listenerMap.get(\n@@ -351,7 +317,7 @@ export function listenToNonDelegatedEvent(\n if (listenerEntry === undefined) {\n const listener = addTrappedEventListener(\n targetElement,\n- topLevelType,\n+ domEventName,\n PLUGIN_EVENT_SYSTEM | IS_NON_DELEGATED,\n isCapturePhaseListener,\n );\n@@ -360,7 +326,7 @@ export function listenToNonDelegatedEvent(\n }\n \n export function listenToNativeEvent(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n isCapturePhaseListener: boolean,\n rootContainerElement: EventTarget,\n targetElement: Element | null,\n@@ -369,10 +335,10 @@ export function listenToNativeEvent(\n eventSystemFlags?: EventSystemFlags = PLUGIN_EVENT_SYSTEM,\n ): void {\n let target = rootContainerElement;\n- \/\/ TOP_SELECTION_CHANGE needs to be attached to the document\n+ \/\/ selectionchange needs to be attached to the document\n \/\/ otherwise it won't capture incoming events that are only\n \/\/ triggered on the document directly.\n- if (topLevelType === TOP_SELECTION_CHANGE) {\n+ if (domEventName === 'selectionchange') {\n target = (rootContainerElement: any).ownerDocument;\n }\n \/\/ If the event can be delegated (or is capture phase), we can\n@@ -382,7 +348,7 @@ export function listenToNativeEvent(\n if (\n targetElement !== null &&\n !isCapturePhaseListener &&\n- nonDelegatedEvents.has(topLevelType)\n+ nonDelegatedEvents.has(domEventName)\n ) {\n \/\/ For all non-delegated events, apart from scroll, we attach\n \/\/ their event listeners to the respective elements that their\n@@ -393,7 +359,7 @@ export function listenToNativeEvent(\n \/\/ TODO: ideally, we'd eventually apply the same logic to all\n \/\/ events from the nonDelegatedEvents list. Then we can remove\n \/\/ this special case and use the same logic for all events.\n- if (topLevelType !== TOP_SCROLL) {\n+ if (domEventName !== 'scroll') {\n return;\n }\n eventSystemFlags |= IS_NON_DELEGATED;\n@@ -401,7 +367,7 @@ export function listenToNativeEvent(\n }\n const listenerMap = getEventListenerMap(target);\n const listenerMapKey = getListenerMapKey(\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n );\n const listenerEntry = ((listenerMap.get(\n@@ -417,7 +383,7 @@ export function listenToNativeEvent(\n if (shouldUpgrade) {\n removeTrappedEventListener(\n target,\n- topLevelType,\n+ domEventName,\n isCapturePhaseListener,\n ((listenerEntry: any): ElementListenerMapEntry).listener,\n );\n@@ -427,7 +393,7 @@ export function listenToNativeEvent(\n }\n const listener = addTrappedEventListener(\n target,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n isCapturePhaseListener,\n false,\n@@ -490,7 +456,7 @@ export function listenToReactEvent(\n \n function addTrappedEventListener(\n targetContainer: EventTarget,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n isCapturePhaseListener: boolean,\n isDeferredListenerForLegacyFBSupport?: boolean,\n@@ -499,7 +465,7 @@ function addTrappedEventListener(\n ): any => void {\n let listener = createEventListenerWrapperWithPriority(\n targetContainer,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n listenerPriority,\n );\n@@ -514,8 +480,6 @@ function addTrappedEventListener(\n ? (targetContainer: any).ownerDocument\n : targetContainer;\n \n- const rawEventName = getRawEventName(topLevelType);\n-\n let unsubscribeListener;\n \/\/ When legacyFBSupport is enabled, it's for when we\n \/\/ want to add a one time event listener to a container.\n@@ -533,7 +497,7 @@ function addTrappedEventListener(\n listener = function(...p) {\n removeEventListener(\n targetContainer,\n- rawEventName,\n+ domEventName,\n unsubscribeListener,\n isCapturePhaseListener,\n );\n@@ -544,14 +508,14 @@ function addTrappedEventListener(\n if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {\n unsubscribeListener = addEventCaptureListenerWithPassiveFlag(\n targetContainer,\n- rawEventName,\n+ domEventName,\n listener,\n isPassiveListener,\n );\n } else {\n unsubscribeListener = addEventCaptureListener(\n targetContainer,\n- rawEventName,\n+ domEventName,\n listener,\n );\n }\n@@ -559,14 +523,14 @@ function addTrappedEventListener(\n if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {\n unsubscribeListener = addEventBubbleListenerWithPassiveFlag(\n targetContainer,\n- rawEventName,\n+ domEventName,\n listener,\n isPassiveListener,\n );\n } else {\n unsubscribeListener = addEventBubbleListener(\n targetContainer,\n- rawEventName,\n+ domEventName,\n listener,\n );\n }\n@@ -575,7 +539,7 @@ function addTrappedEventListener(\n }\n \n function deferClickToDocumentForLegacyFBSupport(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n targetContainer: EventTarget,\n ): void {\n \/\/ We defer all click events with legacy FB support mode on.\n@@ -584,7 +548,7 @@ function deferClickToDocumentForLegacyFBSupport(\n const isDeferredListenerForLegacyFBSupport = true;\n addTrappedEventListener(\n targetContainer,\n- topLevelType,\n+ domEventName,\n PLUGIN_EVENT_SYSTEM | IS_LEGACY_FB_SUPPORT_MODE,\n false,\n isDeferredListenerForLegacyFBSupport,\n@@ -603,7 +567,7 @@ function isMatchingRootContainer(\n }\n \n export function dispatchEventForPluginEventSystem(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n nativeEvent: AnyNativeEvent,\n targetInst: null | Fiber,\n@@ -626,10 +590,10 @@ export function dispatchEventForPluginEventSystem(\n \/\/ then we can defer the event to the \"document\", to allow\n \/\/ for legacy FB support, where the expected behavior was to\n \/\/ match React < 16 behavior of delegated clicks to the doc.\n- topLevelType === TOP_CLICK &&\n+ domEventName === 'click' &&\n (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0\n ) {\n- deferClickToDocumentForLegacyFBSupport(topLevelType, targetContainer);\n+ deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);\n return;\n }\n if (targetInst !== null) {\n@@ -703,7 +667,7 @@ export function dispatchEventForPluginEventSystem(\n \n batchedEventUpdates(() =>\n dispatchEventsForPlugins(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n nativeEvent,\n ancestorInst,\n@@ -1045,7 +1009,7 @@ export function accumulateEventHandleNonManagedNodeListeners(\n const eventListeners = getEventHandlerListeners(currentTarget);\n if (eventListeners !== null) {\n const listenersArr = Array.from(eventListeners);\n- const targetType = ((event.type: any): DOMTopLevelEventType);\n+ const targetType = ((event.type: any): DOMEventName);\n \n for (let i = 0; i < listenersArr.length; i++) {\n const listener = listenersArr[i];\n@@ -1064,7 +1028,7 @@ export function accumulateEventHandleNonManagedNodeListeners(\n }\n }\n \n-export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {\n+export function addEventTypeToDispatchConfig(type: DOMEventName): void {\n const reactName = topLevelEventsToReactNames.get(type);\n \/\/ If we don't have a reactName, then we're dealing with\n \/\/ an event type that React does not know about (i.e. a custom event).\n@@ -1077,8 +1041,8 @@ export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {\n }\n \n export function getListenerMapKey(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n capture: boolean,\n ): string {\n- return `${getRawEventName(topLevelType)}__${capture ? 'capture' : 'bubble'}`;\n+ return `${domEventName}__${capture ? 'capture' : 'bubble'}`;\n }\ndiff --git a\/packages\/react-dom\/src\/events\/DOMTopLevelEventTypes.js b\/packages\/react-dom\/src\/events\/DOMTopLevelEventTypes.js\ndeleted file mode 100644\nindex e8bdc7eacc..0000000000\n--- a\/packages\/react-dom\/src\/events\/DOMTopLevelEventTypes.js\n+++ \/dev\/null\n@@ -1,158 +0,0 @@\n-\/**\n- * Copyright (c) Facebook, Inc. and its affiliates.\n- *\n- * This source code is licensed under the MIT license found in the\n- * LICENSE file in the root directory of this source tree.\n- *\n- * @flow\n- *\/\n-\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n-\n-import {\n- unsafeCastStringToDOMTopLevelType,\n- unsafeCastDOMTopLevelTypeToString,\n-} from '..\/events\/TopLevelEventTypes';\n-import getVendorPrefixedEventName from '.\/getVendorPrefixedEventName';\n-\n-\/**\n- * To identify top level events in ReactDOM, we use constants defined by this\n- * module. This is the only module that uses the unsafe* methods to express\n- * that the constants actually correspond to the browser event names. This lets\n- * us save some bundle size by avoiding a top level type -> event name map.\n- * The rest of ReactDOM code should import top level types from this file.\n- *\/\n-export const TOP_ABORT = unsafeCastStringToDOMTopLevelType('abort');\n-export const TOP_ANIMATION_END = unsafeCastStringToDOMTopLevelType(\n- getVendorPrefixedEventName('animationend'),\n-);\n-export const TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(\n- getVendorPrefixedEventName('animationiteration'),\n-);\n-export const TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(\n- getVendorPrefixedEventName('animationstart'),\n-);\n-export const TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');\n-export const TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType(\n- 'canplaythrough',\n-);\n-export const TOP_CANCEL = unsafeCastStringToDOMTopLevelType('cancel');\n-export const TOP_CHANGE = unsafeCastStringToDOMTopLevelType('change');\n-export const TOP_CLICK = unsafeCastStringToDOMTopLevelType('click');\n-export const TOP_CLOSE = unsafeCastStringToDOMTopLevelType('close');\n-export const TOP_COMPOSITION_END = unsafeCastStringToDOMTopLevelType(\n- 'compositionend',\n-);\n-export const TOP_COMPOSITION_START = unsafeCastStringToDOMTopLevelType(\n- 'compositionstart',\n-);\n-export const TOP_COMPOSITION_UPDATE = unsafeCastStringToDOMTopLevelType(\n- 'compositionupdate',\n-);\n-export const TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType(\n- 'contextmenu',\n-);\n-export const TOP_COPY = unsafeCastStringToDOMTopLevelType('copy');\n-export const TOP_CUT = unsafeCastStringToDOMTopLevelType('cut');\n-export const TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick');\n-export const TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick');\n-export const TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag');\n-export const TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend');\n-export const TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter');\n-export const TOP_DRAG_EXIT = unsafeCastStringToDOMTopLevelType('dragexit');\n-export const TOP_DRAG_LEAVE = unsafeCastStringToDOMTopLevelType('dragleave');\n-export const TOP_DRAG_OVER = unsafeCastStringToDOMTopLevelType('dragover');\n-export const TOP_DRAG_START = unsafeCastStringToDOMTopLevelType('dragstart');\n-export const TOP_DROP = unsafeCastStringToDOMTopLevelType('drop');\n-export const TOP_DURATION_CHANGE = unsafeCastStringToDOMTopLevelType(\n- 'durationchange',\n-);\n-export const TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');\n-export const TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');\n-export const TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');\n-export const TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');\n-export const TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType(\n- 'gotpointercapture',\n-);\n-export const TOP_INPUT = unsafeCastStringToDOMTopLevelType('input');\n-export const TOP_INVALID = unsafeCastStringToDOMTopLevelType('invalid');\n-export const TOP_KEY_DOWN = unsafeCastStringToDOMTopLevelType('keydown');\n-export const TOP_KEY_PRESS = unsafeCastStringToDOMTopLevelType('keypress');\n-export const TOP_KEY_UP = unsafeCastStringToDOMTopLevelType('keyup');\n-export const TOP_LOAD = unsafeCastStringToDOMTopLevelType('load');\n-export const TOP_LOAD_START = unsafeCastStringToDOMTopLevelType('loadstart');\n-export const TOP_LOADED_DATA = unsafeCastStringToDOMTopLevelType('loadeddata');\n-export const TOP_LOADED_METADATA = unsafeCastStringToDOMTopLevelType(\n- 'loadedmetadata',\n-);\n-export const TOP_LOST_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType(\n- 'lostpointercapture',\n-);\n-export const TOP_MOUSE_DOWN = unsafeCastStringToDOMTopLevelType('mousedown');\n-export const TOP_MOUSE_MOVE = unsafeCastStringToDOMTopLevelType('mousemove');\n-export const TOP_MOUSE_OUT = unsafeCastStringToDOMTopLevelType('mouseout');\n-export const TOP_MOUSE_OVER = unsafeCastStringToDOMTopLevelType('mouseover');\n-export const TOP_MOUSE_UP = unsafeCastStringToDOMTopLevelType('mouseup');\n-export const TOP_PASTE = unsafeCastStringToDOMTopLevelType('paste');\n-export const TOP_PAUSE = unsafeCastStringToDOMTopLevelType('pause');\n-export const TOP_PLAY = unsafeCastStringToDOMTopLevelType('play');\n-export const TOP_PLAYING = unsafeCastStringToDOMTopLevelType('playing');\n-export const TOP_POINTER_CANCEL = unsafeCastStringToDOMTopLevelType(\n- 'pointercancel',\n-);\n-export const TOP_POINTER_DOWN = unsafeCastStringToDOMTopLevelType(\n- 'pointerdown',\n-);\n-export const TOP_POINTER_ENTER = unsafeCastStringToDOMTopLevelType(\n- 'pointerenter',\n-);\n-export const TOP_POINTER_LEAVE = unsafeCastStringToDOMTopLevelType(\n- 'pointerleave',\n-);\n-export const TOP_POINTER_MOVE = unsafeCastStringToDOMTopLevelType(\n- 'pointermove',\n-);\n-export const TOP_POINTER_OUT = unsafeCastStringToDOMTopLevelType('pointerout');\n-export const TOP_POINTER_OVER = unsafeCastStringToDOMTopLevelType(\n- 'pointerover',\n-);\n-export const TOP_POINTER_UP = unsafeCastStringToDOMTopLevelType('pointerup');\n-export const TOP_PROGRESS = unsafeCastStringToDOMTopLevelType('progress');\n-export const TOP_RATE_CHANGE = unsafeCastStringToDOMTopLevelType('ratechange');\n-export const TOP_RESET = unsafeCastStringToDOMTopLevelType('reset');\n-export const TOP_SCROLL = unsafeCastStringToDOMTopLevelType('scroll');\n-export const TOP_SEEKED = unsafeCastStringToDOMTopLevelType('seeked');\n-export const TOP_SEEKING = unsafeCastStringToDOMTopLevelType('seeking');\n-export const TOP_SELECTION_CHANGE = unsafeCastStringToDOMTopLevelType(\n- 'selectionchange',\n-);\n-export const TOP_STALLED = unsafeCastStringToDOMTopLevelType('stalled');\n-export const TOP_SUBMIT = unsafeCastStringToDOMTopLevelType('submit');\n-export const TOP_SUSPEND = unsafeCastStringToDOMTopLevelType('suspend');\n-export const TOP_TEXT_INPUT = unsafeCastStringToDOMTopLevelType('textInput');\n-export const TOP_TIME_UPDATE = unsafeCastStringToDOMTopLevelType('timeupdate');\n-export const TOP_TOGGLE = unsafeCastStringToDOMTopLevelType('toggle');\n-export const TOP_TOUCH_CANCEL = unsafeCastStringToDOMTopLevelType(\n- 'touchcancel',\n-);\n-export const TOP_TOUCH_END = unsafeCastStringToDOMTopLevelType('touchend');\n-export const TOP_TOUCH_MOVE = unsafeCastStringToDOMTopLevelType('touchmove');\n-export const TOP_TOUCH_START = unsafeCastStringToDOMTopLevelType('touchstart');\n-export const TOP_TRANSITION_END = unsafeCastStringToDOMTopLevelType(\n- getVendorPrefixedEventName('transitionend'),\n-);\n-export const TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType(\n- 'volumechange',\n-);\n-export const TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');\n-export const TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');\n-\n-export const TOP_AFTER_BLUR = unsafeCastStringToDOMTopLevelType('afterblur');\n-export const TOP_BEFORE_BLUR = unsafeCastStringToDOMTopLevelType('beforeblur');\n-\n-export const TOP_FOCUS_IN = unsafeCastStringToDOMTopLevelType('focusin');\n-export const TOP_FOCUS_OUT = unsafeCastStringToDOMTopLevelType('focusout');\n-\n-export function getRawEventName(topLevelType: DOMTopLevelEventType): string {\n- return unsafeCastDOMTopLevelTypeToString(topLevelType);\n-}\ndiff --git a\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\nindex c1312dccb1..73d3ea7331 100644\n--- a\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\n@@ -25,7 +25,7 @@ import type {\n ReactDOMResponderContext,\n ReactDOMResponderEvent,\n } from '..\/shared\/ReactDOMTypes';\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n import {\n batchedEventUpdates,\n discreteUpdates,\n@@ -40,7 +40,6 @@ import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n import {enqueueStateRestore} from '.\/ReactDOMControlledComponent';\n import {createEventListenerWrapper} from '.\/ReactDOMEventListener';\n import {passiveBrowserEventsSupported} from '.\/checkPassiveEvents';\n-import {getRawEventName} from '.\/DOMTopLevelEventTypes';\n import {\n addEventCaptureListener,\n addEventCaptureListenerWithPassiveFlag,\n@@ -77,7 +76,7 @@ export function setListenToResponderEventTypes(\n }\n \n const rootEventTypesToEventResponderInstances: Map<\n- DOMTopLevelEventType | string,\n+ DOMEventName | string,\n Set,\n > = new Map();\n \n@@ -311,7 +310,7 @@ function getActiveDocument(): Document {\n }\n \n function createDOMResponderEvent(\n- topLevelType: string,\n+ domEventName: string,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: Element | Document,\n passive: boolean,\n@@ -334,7 +333,7 @@ function createDOMResponderEvent(\n passive,\n pointerType: eventPointerType,\n target: nativeEventTarget,\n- type: topLevelType,\n+ type: domEventName,\n };\n }\n \n@@ -370,7 +369,7 @@ function validateResponderTargetEventTypes(\n }\n \n function traverseAndHandleEventResponderInstances(\n- topLevelType: string,\n+ domEventName: string,\n targetFiber: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: Document | Element,\n@@ -386,7 +385,7 @@ function traverseAndHandleEventResponderInstances(\n \n const visitedResponders = new Set();\n const responderEvent = createDOMResponderEvent(\n- topLevelType,\n+ domEventName,\n nativeEvent,\n nativeEventTarget,\n isPassiveEvent,\n@@ -411,7 +410,7 @@ function traverseAndHandleEventResponderInstances(\n if (\n !visitedResponders.has(responder) &&\n validateResponderTargetEventTypes(\n- topLevelType,\n+ domEventName,\n responder,\n isPassive,\n ) &&\n@@ -434,14 +433,14 @@ function traverseAndHandleEventResponderInstances(\n node = node.return;\n }\n \/\/ Root phase\n- const passive = rootEventTypesToEventResponderInstances.get(topLevelType);\n+ const passive = rootEventTypesToEventResponderInstances.get(domEventName);\n const rootEventResponderInstances = [];\n if (passive !== undefined) {\n rootEventResponderInstances.push(...Array.from(passive));\n }\n if (!isPassive) {\n const active = rootEventTypesToEventResponderInstances.get(\n- topLevelType + '_active',\n+ domEventName + '_active',\n );\n if (active !== undefined) {\n rootEventResponderInstances.push(...Array.from(active));\n@@ -519,7 +518,7 @@ function validateResponderContext(): void {\n }\n \n export function DEPRECATED_dispatchEventForResponderEventSystem(\n- topLevelType: string,\n+ domEventName: string,\n targetFiber: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: Document | Element,\n@@ -541,7 +540,7 @@ export function DEPRECATED_dispatchEventForResponderEventSystem(\n try {\n batchedEventUpdates(() => {\n traverseAndHandleEventResponderInstances(\n- topLevelType,\n+ domEventName,\n targetFiber,\n nativeEvent,\n nativeEventTarget,\n@@ -598,7 +597,7 @@ function DEPRECATED_registerRootEventType(\n \n export function addResponderEventSystemEvent(\n document: Document,\n- topLevelType: string,\n+ domEventName: string,\n passive: boolean,\n ): any => void {\n let eventFlags = RESPONDER_EVENT_SYSTEM;\n@@ -618,27 +617,26 @@ export function addResponderEventSystemEvent(\n \/\/ Check if interactive and wrap in discreteUpdates\n const listener = createEventListenerWrapper(\n document,\n- ((topLevelType: any): DOMTopLevelEventType),\n+ ((domEventName: any): DOMEventName),\n eventFlags,\n );\n if (passiveBrowserEventsSupported) {\n return addEventCaptureListenerWithPassiveFlag(\n document,\n- topLevelType,\n+ domEventName,\n listener,\n passive,\n );\n } else {\n- return addEventCaptureListener(document, topLevelType, listener);\n+ return addEventCaptureListener(document, domEventName, listener);\n }\n }\n \n export function removeTrappedEventListener(\n targetContainer: EventTarget,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n capture: boolean,\n listener: any => void,\n ): void {\n- const rawEventName = getRawEventName(topLevelType);\n- removeEventListener(targetContainer, rawEventName, listener, capture);\n+ removeEventListener(targetContainer, domEventName, listener, capture);\n }\ndiff --git a\/packages\/react-dom\/src\/events\/EventRegistry.js b\/packages\/react-dom\/src\/events\/EventRegistry.js\nindex 01ed12ab5c..3dd665623f 100644\n--- a\/packages\/react-dom\/src\/events\/EventRegistry.js\n+++ b\/packages\/react-dom\/src\/events\/EventRegistry.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import type {TopLevelType} from '.\/TopLevelEventTypes';\n+import type {DOMEventName} from '.\/DOMEventNames';\n \n \/**\n * Mapping from registration name to event name\n@@ -25,7 +25,7 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);\n \n export function registerTwoPhaseEvent(\n registrationName: string,\n- dependencies: ?Array,\n+ dependencies: ?Array,\n ): void {\n registerDirectEvent(registrationName, dependencies);\n registerDirectEvent(registrationName + 'Capture', dependencies);\n@@ -33,7 +33,7 @@ export function registerTwoPhaseEvent(\n \n export function registerDirectEvent(\n registrationName: string,\n- dependencies: ?Array,\n+ dependencies: ?Array,\n ) {\n if (__DEV__) {\n if (registrationNameDependencies[registrationName]) {\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex 53927dff02..959f219bbe 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -11,7 +11,7 @@ import type {AnyNativeEvent} from '..\/events\/PluginModuleType';\n import type {EventPriority} from 'shared\/ReactTypes';\n import type {FiberRoot} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {Container, SuspenseInstance} from '..\/client\/ReactDOMHostConfig';\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n \n \/\/ Intentionally not named imports because Rollup would use dynamic dispatch for\n \/\/ CommonJS interop named imports.\n@@ -82,12 +82,12 @@ export function isEnabled() {\n \n export function createEventListenerWrapper(\n targetContainer: EventTarget,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n ): Function {\n return dispatchEvent.bind(\n null,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n );\n@@ -95,13 +95,13 @@ export function createEventListenerWrapper(\n \n export function createEventListenerWrapperWithPriority(\n targetContainer: EventTarget,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n priority?: EventPriority,\n ): Function {\n const eventPriority =\n priority === undefined\n- ? getEventPriorityForPluginSystem(topLevelType)\n+ ? getEventPriorityForPluginSystem(domEventName)\n : priority;\n let listenerWrapper;\n switch (eventPriority) {\n@@ -118,14 +118,14 @@ export function createEventListenerWrapperWithPriority(\n }\n return listenerWrapper.bind(\n null,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n );\n }\n \n function dispatchDiscreteEvent(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n container,\n nativeEvent,\n@@ -140,7 +140,7 @@ function dispatchDiscreteEvent(\n }\n discreteUpdates(\n dispatchEvent,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n container,\n nativeEvent,\n@@ -148,7 +148,7 @@ function dispatchDiscreteEvent(\n }\n \n function dispatchUserBlockingUpdate(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n container,\n nativeEvent,\n@@ -161,7 +161,7 @@ function dispatchUserBlockingUpdate(\n UserBlockingPriority,\n dispatchEvent.bind(\n null,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n container,\n nativeEvent,\n@@ -173,7 +173,7 @@ function dispatchUserBlockingUpdate(\n }\n \n export function dispatchEvent(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n@@ -181,13 +181,13 @@ export function dispatchEvent(\n if (!_enabled) {\n return;\n }\n- if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(topLevelType)) {\n+ if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(domEventName)) {\n \/\/ If we already have a queue of discrete events, and this is another discrete\n \/\/ event, then we can't dispatch it regardless of its target, since they\n \/\/ need to dispatch in order.\n queueDiscreteEvent(\n null, \/\/ Flags that we're not actually blocked on anything as far as we know.\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -196,7 +196,7 @@ export function dispatchEvent(\n }\n \n const blockedOn = attemptToDispatchEvent(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -204,15 +204,15 @@ export function dispatchEvent(\n \n if (blockedOn === null) {\n \/\/ We successfully dispatched this event.\n- clearIfContinuousEvent(topLevelType, nativeEvent);\n+ clearIfContinuousEvent(domEventName, nativeEvent);\n return;\n }\n \n- if (isReplayableDiscreteEvent(topLevelType)) {\n+ if (isReplayableDiscreteEvent(domEventName)) {\n \/\/ This this to be replayed later once the target is available.\n queueDiscreteEvent(\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -223,7 +223,7 @@ export function dispatchEvent(\n if (\n queueIfContinuousEvent(\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -234,14 +234,14 @@ export function dispatchEvent(\n \n \/\/ We need to clear only if we didn't queue because\n \/\/ queueing is accummulative.\n- clearIfContinuousEvent(topLevelType, nativeEvent);\n+ clearIfContinuousEvent(domEventName, nativeEvent);\n \n \/\/ This is not replayable so we'll invoke it but without a target,\n \/\/ in case the event system needs to trace it.\n if (enableDeprecatedFlareAPI) {\n if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {\n dispatchEventForPluginEventSystem(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n nativeEvent,\n null,\n@@ -251,7 +251,7 @@ export function dispatchEvent(\n if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {\n \/\/ React Flare event system\n DEPRECATED_dispatchEventForResponderEventSystem(\n- (topLevelType: any),\n+ (domEventName: any),\n null,\n nativeEvent,\n getEventTarget(nativeEvent),\n@@ -260,7 +260,7 @@ export function dispatchEvent(\n }\n } else {\n dispatchEventForPluginEventSystem(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n nativeEvent,\n null,\n@@ -271,7 +271,7 @@ export function dispatchEvent(\n \n \/\/ Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.\n export function attemptToDispatchEvent(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n@@ -322,7 +322,7 @@ export function attemptToDispatchEvent(\n if (enableDeprecatedFlareAPI) {\n if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {\n dispatchEventForPluginEventSystem(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n nativeEvent,\n targetInst,\n@@ -332,7 +332,7 @@ export function attemptToDispatchEvent(\n if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {\n \/\/ React Flare event system\n DEPRECATED_dispatchEventForResponderEventSystem(\n- (topLevelType: any),\n+ (domEventName: any),\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -341,7 +341,7 @@ export function attemptToDispatchEvent(\n }\n } else {\n dispatchEventForPluginEventSystem(\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n nativeEvent,\n targetInst,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\nindex 005cae2398..6504e238c9 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n@@ -9,7 +9,7 @@\n \n import type {AnyNativeEvent} from '..\/events\/PluginModuleType';\n import type {Container, SuspenseInstance} from '..\/client\/ReactDOMHostConfig';\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n import type {ElementListenerMap} from '..\/client\/ReactDOMComponentTree';\n import type {EventSystemFlags} from '.\/EventSystemFlags';\n import type {FiberRoot} from 'react-reconciler\/src\/ReactInternalTypes';\n@@ -36,7 +36,6 @@ import {\n getClosestInstanceFromNode,\n getEventListenerMap,\n } from '..\/client\/ReactDOMComponentTree';\n-import {unsafeCastDOMTopLevelTypeToString} from '..\/events\/TopLevelEventTypes';\n import {HostRoot, SuspenseComponent} from 'react-reconciler\/src\/ReactWorkTags';\n \n let attemptSynchronousHydration: (fiber: Object) => void;\n@@ -87,53 +86,13 @@ type PointerEvent = Event & {\n ...\n };\n \n-import {\n- TOP_MOUSE_DOWN,\n- TOP_MOUSE_UP,\n- TOP_TOUCH_CANCEL,\n- TOP_TOUCH_END,\n- TOP_TOUCH_START,\n- TOP_AUX_CLICK,\n- TOP_DOUBLE_CLICK,\n- TOP_POINTER_CANCEL,\n- TOP_POINTER_DOWN,\n- TOP_POINTER_UP,\n- TOP_DRAG_END,\n- TOP_DRAG_START,\n- TOP_DROP,\n- TOP_COMPOSITION_END,\n- TOP_COMPOSITION_START,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_INPUT,\n- TOP_TEXT_INPUT,\n- TOP_COPY,\n- TOP_CUT,\n- TOP_PASTE,\n- TOP_CLICK,\n- TOP_CHANGE,\n- TOP_CONTEXT_MENU,\n- TOP_RESET,\n- TOP_SUBMIT,\n- TOP_DRAG_ENTER,\n- TOP_DRAG_LEAVE,\n- TOP_MOUSE_OVER,\n- TOP_MOUSE_OUT,\n- TOP_POINTER_OVER,\n- TOP_POINTER_OUT,\n- TOP_GOT_POINTER_CAPTURE,\n- TOP_LOST_POINTER_CAPTURE,\n- TOP_FOCUS_IN,\n- TOP_FOCUS_OUT,\n-} from '.\/DOMTopLevelEventTypes';\n import {IS_REPLAYED} from '.\/EventSystemFlags';\n import {listenToNativeEvent} from '.\/DOMPluginEventSystem';\n import {addResponderEventSystemEvent} from '.\/DeprecatedDOMEventResponderSystem';\n \n type QueuedReplayableEvent = {|\n blockedOn: null | Container | SuspenseInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n nativeEvent: AnyNativeEvent,\n targetContainers: Array,\n@@ -172,80 +131,77 @@ export function hasQueuedContinuousEvents(): boolean {\n return hasAnyQueuedContinuousEvents;\n }\n \n-const discreteReplayableEvents = [\n- TOP_MOUSE_DOWN,\n- TOP_MOUSE_UP,\n- TOP_TOUCH_CANCEL,\n- TOP_TOUCH_END,\n- TOP_TOUCH_START,\n- TOP_AUX_CLICK,\n- TOP_DOUBLE_CLICK,\n- TOP_POINTER_CANCEL,\n- TOP_POINTER_DOWN,\n- TOP_POINTER_UP,\n- TOP_DRAG_END,\n- TOP_DRAG_START,\n- TOP_DROP,\n- TOP_COMPOSITION_END,\n- TOP_COMPOSITION_START,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_INPUT,\n- TOP_TEXT_INPUT,\n- TOP_COPY,\n- TOP_CUT,\n- TOP_PASTE,\n- TOP_CLICK,\n- TOP_CHANGE,\n- TOP_CONTEXT_MENU,\n- TOP_RESET,\n- TOP_SUBMIT,\n+const discreteReplayableEvents: Array = [\n+ 'mousedown',\n+ 'mouseup',\n+ 'touchcancel',\n+ 'touchend',\n+ 'touchstart',\n+ 'auxclick',\n+ 'dblclick',\n+ 'pointercancel',\n+ 'pointerdown',\n+ 'pointerup',\n+ 'dragend',\n+ 'dragstart',\n+ 'drop',\n+ 'compositionend',\n+ 'compositionstart',\n+ 'keydown',\n+ 'keypress',\n+ 'keyup',\n+ 'input',\n+ 'textInput', \/\/ Intentionally camelCase\n+ 'copy',\n+ 'cut',\n+ 'paste',\n+ 'click',\n+ 'change',\n+ 'contextmenu',\n+ 'reset',\n+ 'submit',\n ];\n \n-const continuousReplayableEvents = [\n- TOP_DRAG_ENTER,\n- TOP_DRAG_LEAVE,\n- TOP_FOCUS_IN,\n- TOP_FOCUS_OUT,\n- TOP_MOUSE_OVER,\n- TOP_MOUSE_OUT,\n- TOP_POINTER_OVER,\n- TOP_POINTER_OUT,\n- TOP_GOT_POINTER_CAPTURE,\n- TOP_LOST_POINTER_CAPTURE,\n+const continuousReplayableEvents: Array = [\n+ 'dragenter',\n+ 'dragleave',\n+ 'focusin',\n+ 'focusout',\n+ 'mouseover',\n+ 'mouseout',\n+ 'pointerover',\n+ 'pointerout',\n+ 'gotpointercapture',\n+ 'lostpointercapture',\n ];\n \n-export function isReplayableDiscreteEvent(\n- eventType: DOMTopLevelEventType,\n-): boolean {\n+export function isReplayableDiscreteEvent(eventType: DOMEventName): boolean {\n return discreteReplayableEvents.indexOf(eventType) > -1;\n }\n \n function trapReplayableEventForContainer(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n container: Container,\n ) {\n- listenToNativeEvent(topLevelType, false, ((container: any): Element), null);\n+ listenToNativeEvent(domEventName, false, ((container: any): Element), null);\n }\n \n function trapReplayableEventForDocument(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n document: Document,\n listenerMap: ElementListenerMap,\n ) {\n if (enableDeprecatedFlareAPI) {\n \/\/ Trap events for the responder system.\n- const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);\n \/\/ TODO: Ideally we shouldn't need these to be active but\n \/\/ if we only have a passive listener, we at least need it\n \/\/ to still pretend to be active so that Flare gets those\n \/\/ events.\n- const activeEventKey = topLevelTypeString + '_active';\n+ const activeEventKey = domEventName + '_active';\n if (!listenerMap.has(activeEventKey)) {\n const listener = addResponderEventSystemEvent(\n document,\n- topLevelTypeString,\n+ domEventName,\n false,\n );\n listenerMap.set(activeEventKey, {passive: false, listener});\n@@ -259,27 +215,27 @@ export function eagerlyTrapReplayableEvents(\n ) {\n const listenerMapForDoc = getEventListenerMap(document);\n \/\/ Discrete\n- discreteReplayableEvents.forEach(topLevelType => {\n- trapReplayableEventForContainer(topLevelType, container);\n- trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);\n+ discreteReplayableEvents.forEach(domEventName => {\n+ trapReplayableEventForContainer(domEventName, container);\n+ trapReplayableEventForDocument(domEventName, document, listenerMapForDoc);\n });\n \/\/ Continuous\n- continuousReplayableEvents.forEach(topLevelType => {\n- trapReplayableEventForContainer(topLevelType, container);\n- trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);\n+ continuousReplayableEvents.forEach(domEventName => {\n+ trapReplayableEventForContainer(domEventName, container);\n+ trapReplayableEventForDocument(domEventName, document, listenerMapForDoc);\n });\n }\n \n function createQueuedReplayableEvent(\n blockedOn: null | Container | SuspenseInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n ): QueuedReplayableEvent {\n return {\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags: eventSystemFlags | IS_REPLAYED,\n nativeEvent,\n targetContainers: [targetContainer],\n@@ -288,14 +244,14 @@ function createQueuedReplayableEvent(\n \n export function queueDiscreteEvent(\n blockedOn: null | Container | SuspenseInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n ): void {\n const queuedEvent = createQueuedReplayableEvent(\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -329,30 +285,30 @@ export function queueDiscreteEvent(\n \n \/\/ Resets the replaying for this type of continuous event to no event.\n export function clearIfContinuousEvent(\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n nativeEvent: AnyNativeEvent,\n ): void {\n- switch (topLevelType) {\n- case TOP_FOCUS_IN:\n- case TOP_FOCUS_OUT:\n+ switch (domEventName) {\n+ case 'focusin':\n+ case 'focusout':\n queuedFocus = null;\n break;\n- case TOP_DRAG_ENTER:\n- case TOP_DRAG_LEAVE:\n+ case 'dragenter':\n+ case 'dragleave':\n queuedDrag = null;\n break;\n- case TOP_MOUSE_OVER:\n- case TOP_MOUSE_OUT:\n+ case 'mouseover':\n+ case 'mouseout':\n queuedMouse = null;\n break;\n- case TOP_POINTER_OVER:\n- case TOP_POINTER_OUT: {\n+ case 'pointerover':\n+ case 'pointerout': {\n const pointerId = ((nativeEvent: any): PointerEvent).pointerId;\n queuedPointers.delete(pointerId);\n break;\n }\n- case TOP_GOT_POINTER_CAPTURE:\n- case TOP_LOST_POINTER_CAPTURE: {\n+ case 'gotpointercapture':\n+ case 'lostpointercapture': {\n const pointerId = ((nativeEvent: any): PointerEvent).pointerId;\n queuedPointerCaptures.delete(pointerId);\n break;\n@@ -363,7 +319,7 @@ export function clearIfContinuousEvent(\n function accumulateOrCreateContinuousQueuedReplayableEvent(\n existingQueuedEvent: null | QueuedReplayableEvent,\n blockedOn: null | Container | SuspenseInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n@@ -374,7 +330,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(\n ) {\n const queuedEvent = createQueuedReplayableEvent(\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n nativeEvent,\n@@ -405,7 +361,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(\n \n export function queueIfContinuousEvent(\n blockedOn: null | Container | SuspenseInstance,\n- topLevelType: DOMTopLevelEventType,\n+ domEventName: DOMEventName,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n@@ -413,44 +369,44 @@ export function queueIfContinuousEvent(\n \/\/ These set relatedTarget to null because the replayed event will be treated as if we\n \/\/ moved from outside the window (no target) onto the target once it hydrates.\n \/\/ Instead of mutating we could clone the event.\n- switch (topLevelType) {\n- case TOP_FOCUS_IN: {\n+ switch (domEventName) {\n+ case 'focusin': {\n const focusEvent = ((nativeEvent: any): FocusEvent);\n queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(\n queuedFocus,\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n focusEvent,\n );\n return true;\n }\n- case TOP_DRAG_ENTER: {\n+ case 'dragenter': {\n const dragEvent = ((nativeEvent: any): DragEvent);\n queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(\n queuedDrag,\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n dragEvent,\n );\n return true;\n }\n- case TOP_MOUSE_OVER: {\n+ case 'mouseover': {\n const mouseEvent = ((nativeEvent: any): MouseEvent);\n queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(\n queuedMouse,\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n mouseEvent,\n );\n return true;\n }\n- case TOP_POINTER_OVER: {\n+ case 'pointerover': {\n const pointerEvent = ((nativeEvent: any): PointerEvent);\n const pointerId = pointerEvent.pointerId;\n queuedPointers.set(\n@@ -458,7 +414,7 @@ export function queueIfContinuousEvent(\n accumulateOrCreateContinuousQueuedReplayableEvent(\n queuedPointers.get(pointerId) || null,\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n pointerEvent,\n@@ -466,7 +422,7 @@ export function queueIfContinuousEvent(\n );\n return true;\n }\n- case TOP_GOT_POINTER_CAPTURE: {\n+ case 'gotpointercapture': {\n const pointerEvent = ((nativeEvent: any): PointerEvent);\n const pointerId = pointerEvent.pointerId;\n queuedPointerCaptures.set(\n@@ -474,7 +430,7 @@ export function queueIfContinuousEvent(\n accumulateOrCreateContinuousQueuedReplayableEvent(\n queuedPointerCaptures.get(pointerId) || null,\n blockedOn,\n- topLevelType,\n+ domEventName,\n eventSystemFlags,\n targetContainer,\n pointerEvent,\n@@ -559,7 +515,7 @@ function attemptReplayContinuousQueuedEvent(\n while (targetContainers.length > 0) {\n const targetContainer = targetContainers[0];\n const nextBlockedOn = attemptToDispatchEvent(\n- queuedEvent.topLevelType,\n+ queuedEvent.domEventName,\n queuedEvent.eventSystemFlags,\n targetContainer,\n queuedEvent.nativeEvent,\n@@ -608,7 +564,7 @@ function replayUnblockedEvents() {\n while (targetContainers.length > 0) {\n const targetContainer = targetContainers[0];\n const nextBlockedOn = attemptToDispatchEvent(\n- nextDiscreteEvent.topLevelType,\n+ nextDiscreteEvent.domEventName,\n nextDiscreteEvent.eventSystemFlags,\n targetContainer,\n nextDiscreteEvent.nativeEvent,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactSyntheticEventType.js b\/packages\/react-dom\/src\/events\/ReactSyntheticEventType.js\nindex 1903a93411..f68fad1e0b 100644\n--- a\/packages\/react-dom\/src\/events\/ReactSyntheticEventType.js\n+++ b\/packages\/react-dom\/src\/events\/ReactSyntheticEventType.js\n@@ -10,10 +10,10 @@\n \n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {EventPriority} from 'shared\/ReactTypes';\n-import type {TopLevelType} from '.\/TopLevelEventTypes';\n+import type {DOMEventName} from '.\/DOMEventNames';\n \n export type DispatchConfig = {|\n- dependencies?: Array,\n+ dependencies?: Array,\n phasedRegistrationNames: {|\n bubbled: null | string,\n captured: null | string,\ndiff --git a\/packages\/react-dom\/src\/events\/TopLevelEventTypes.js b\/packages\/react-dom\/src\/events\/TopLevelEventTypes.js\nindex e4f2aefa90..9b2a3e4f9a 100644\n--- a\/packages\/react-dom\/src\/events\/TopLevelEventTypes.js\n+++ b\/packages\/react-dom\/src\/events\/TopLevelEventTypes.js\n@@ -7,22 +7,90 @@\n * @flow\n *\/\n \n-export opaque type DOMTopLevelEventType = string;\n-\n-\/\/ Do not use the below two methods directly!\n-\/\/ Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.\n-\/\/ (It is the only module that is allowed to access these methods.)\n-\n-export function unsafeCastStringToDOMTopLevelType(\n- topLevelType: string,\n-): DOMTopLevelEventType {\n- return topLevelType;\n-}\n-\n-export function unsafeCastDOMTopLevelTypeToString(\n- topLevelType: DOMTopLevelEventType,\n-): string {\n- return topLevelType;\n-}\n-\n-export type TopLevelType = DOMTopLevelEventType;\n+export type TopLevelType =\n+ | 'abort'\n+ \/\/ Dynamic and vendor-prefixed at the usage site:\n+ \/\/ 'animationiteration' |\n+ \/\/ 'animationend |\n+ \/\/ 'animationstart' |\n+ | 'canplay'\n+ | 'canplaythrough'\n+ | 'cancel'\n+ | 'change'\n+ | 'click'\n+ | 'close'\n+ | 'compositionend'\n+ | 'compositionstart'\n+ | 'compositionupdate'\n+ | 'contextmenu'\n+ | 'copy'\n+ | 'cut'\n+ | 'dblclick'\n+ | 'auxclick'\n+ | 'drag'\n+ | 'dragend'\n+ | 'dragenter'\n+ | 'dragexit'\n+ | 'dragleave'\n+ | 'dragover'\n+ | 'dragstart'\n+ | 'drop'\n+ | 'durationchange'\n+ | 'emptied'\n+ | 'encrypted'\n+ | 'ended'\n+ | 'error'\n+ | 'gotpointercapture'\n+ | 'input'\n+ | 'invalid'\n+ | 'keydown'\n+ | 'keypress'\n+ | 'keyup'\n+ | 'load'\n+ | 'loadstart'\n+ | 'loadeddata'\n+ | 'loadedmetadata'\n+ | 'lostpointercapture'\n+ | 'mousedown'\n+ | 'mousemove'\n+ | 'mouseout'\n+ | 'mouseover'\n+ | 'mouseup'\n+ | 'paste'\n+ | 'pause'\n+ | 'play'\n+ | 'playing'\n+ | 'pointercancel'\n+ | 'pointerdown'\n+ | 'pointerenter'\n+ | 'pointerleave'\n+ | 'pointermove'\n+ | 'pointerout'\n+ | 'pointerover'\n+ | 'pointerup'\n+ | 'progress'\n+ | 'ratechange'\n+ | 'reset'\n+ | 'scroll'\n+ | 'seeked'\n+ | 'seeking'\n+ | 'selectionchange'\n+ | 'stalled'\n+ | 'submit'\n+ | 'suspend'\n+ | 'textInput'\n+ | 'timeupdate'\n+ | 'toggle'\n+ | 'touchcancel'\n+ | 'touchend'\n+ | 'touchmove'\n+ | 'touchstart'\n+ \/\/ Dynamic and vendor-prefixed at the usage site:\n+ \/\/ 'transitionend' |\n+ | 'volumechange'\n+ | 'waiting'\n+ | 'wheel'\n+ | 'afterblur'\n+ | 'beforeblur'\n+ | 'focusin'\n+ | 'focusout';\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/BeforeInputEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/BeforeInputEventPlugin.js\nindex 0458363943..30740f3756 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/BeforeInputEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/BeforeInputEventPlugin.js\n@@ -3,25 +3,19 @@\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n *\/\n \n-import type {TopLevelType} from '..\/..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/..\/events\/DOMEventNames';\n+import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n+import type {AnyNativeEvent} from '..\/..\/events\/PluginModuleType';\n+import type {DispatchQueue} from '..\/DOMPluginEventSystem';\n+import type {EventSystemFlags} from '..\/EventSystemFlags';\n \n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n \n import {registerTwoPhaseEvent} from '..\/EventRegistry';\n-import {\n- TOP_FOCUS_OUT,\n- TOP_COMPOSITION_START,\n- TOP_COMPOSITION_END,\n- TOP_COMPOSITION_UPDATE,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n- TOP_TEXT_INPUT,\n- TOP_PASTE,\n-} from '..\/DOMTopLevelEventTypes';\n import {\n getData as FallbackCompositionStateGetData,\n initialize as FallbackCompositionStateInitialize,\n@@ -63,34 +57,34 @@ const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);\n \n function registerEvents() {\n registerTwoPhaseEvent('onBeforeInput', [\n- TOP_COMPOSITION_END,\n- TOP_KEY_PRESS,\n- TOP_TEXT_INPUT,\n- TOP_PASTE,\n+ 'compositionend',\n+ 'keypress',\n+ 'textInput',\n+ 'paste',\n ]);\n registerTwoPhaseEvent('onCompositionEnd', [\n- TOP_COMPOSITION_END,\n- TOP_FOCUS_OUT,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n+ 'compositionend',\n+ 'focusout',\n+ 'keydown',\n+ 'keypress',\n+ 'keyup',\n+ 'mousedown',\n ]);\n registerTwoPhaseEvent('onCompositionStart', [\n- TOP_COMPOSITION_START,\n- TOP_FOCUS_OUT,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n+ 'compositionstart',\n+ 'focusout',\n+ 'keydown',\n+ 'keypress',\n+ 'keyup',\n+ 'mousedown',\n ]);\n registerTwoPhaseEvent('onCompositionUpdate', [\n- TOP_COMPOSITION_UPDATE,\n- TOP_FOCUS_OUT,\n- TOP_KEY_DOWN,\n- TOP_KEY_PRESS,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n+ 'compositionupdate',\n+ 'focusout',\n+ 'keydown',\n+ 'keypress',\n+ 'keyup',\n+ 'mousedown',\n ]);\n }\n \n@@ -102,7 +96,7 @@ let hasSpaceKeypress = false;\n * This is required because Firefox fires `keypress` events for key commands\n * (cut, copy, select-all, etc.) even though no character is inserted.\n *\/\n-function isKeypressCommand(nativeEvent) {\n+function isKeypressCommand(nativeEvent: any) {\n return (\n (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&\n \/\/ ctrlKey && altKey is equivalent to AltGr, and is not a command.\n@@ -112,17 +106,14 @@ function isKeypressCommand(nativeEvent) {\n \n \/**\n * Translate native top level events into event types.\n- *\n- * @param {string} topLevelType\n- * @return {object}\n *\/\n-function getCompositionEventType(topLevelType) {\n- switch (topLevelType) {\n- case TOP_COMPOSITION_START:\n+function getCompositionEventType(domEventName: DOMEventName) {\n+ switch (domEventName) {\n+ case 'compositionstart':\n return 'onCompositionStart';\n- case TOP_COMPOSITION_END:\n+ case 'compositionend':\n return 'onCompositionEnd';\n- case TOP_COMPOSITION_UPDATE:\n+ case 'compositionupdate':\n return 'onCompositionUpdate';\n }\n }\n@@ -130,34 +121,32 @@ function getCompositionEventType(topLevelType) {\n \/**\n * Does our fallback best-guess model think this event signifies that\n * composition has begun?\n- *\n- * @param {string} topLevelType\n- * @param {object} nativeEvent\n- * @return {boolean}\n *\/\n-function isFallbackCompositionStart(topLevelType, nativeEvent) {\n- return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;\n+function isFallbackCompositionStart(\n+ domEventName: DOMEventName,\n+ nativeEvent: any,\n+): boolean {\n+ return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;\n }\n \n \/**\n * Does our fallback mode think that this event is the end of composition?\n- *\n- * @param {string} topLevelType\n- * @param {object} nativeEvent\n- * @return {boolean}\n *\/\n-function isFallbackCompositionEnd(topLevelType, nativeEvent) {\n- switch (topLevelType) {\n- case TOP_KEY_UP:\n+function isFallbackCompositionEnd(\n+ domEventName: DOMEventName,\n+ nativeEvent: any,\n+): boolean {\n+ switch (domEventName) {\n+ case 'keyup':\n \/\/ Command keys insert or clear IME input.\n return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;\n- case TOP_KEY_DOWN:\n+ case 'keydown':\n \/\/ Expect IME keyCode on each keydown. If we get any other\n \/\/ code we must have exited earlier.\n return nativeEvent.keyCode !== START_KEYCODE;\n- case TOP_KEY_PRESS:\n- case TOP_MOUSE_DOWN:\n- case TOP_FOCUS_OUT:\n+ case 'keypress':\n+ case 'mousedown':\n+ case 'focusout':\n \/\/ Events are not possible without cancelling IME.\n return true;\n default:\n@@ -174,7 +163,7 @@ function isFallbackCompositionEnd(topLevelType, nativeEvent) {\n * @param {object} nativeEvent\n * @return {?string}\n *\/\n-function getDataFromCustomEvent(nativeEvent) {\n+function getDataFromCustomEvent(nativeEvent: any) {\n const detail = nativeEvent.detail;\n if (typeof detail === 'object' && 'data' in detail) {\n return detail.data;\n@@ -192,7 +181,7 @@ function getDataFromCustomEvent(nativeEvent) {\n * @param {object} nativeEvent\n * @return {boolean}\n *\/\n-function isUsingKoreanIME(nativeEvent) {\n+function isUsingKoreanIME(nativeEvent: any) {\n return nativeEvent.locale === 'ko';\n }\n \n@@ -204,7 +193,7 @@ let isComposing = false;\n *\/\n function extractCompositionEvent(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -213,12 +202,12 @@ function extractCompositionEvent(\n let fallbackData;\n \n if (canUseCompositionEvent) {\n- eventType = getCompositionEventType(topLevelType);\n+ eventType = getCompositionEventType(domEventName);\n } else if (!isComposing) {\n- if (isFallbackCompositionStart(topLevelType, nativeEvent)) {\n+ if (isFallbackCompositionStart(domEventName, nativeEvent)) {\n eventType = 'onCompositionStart';\n }\n- } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {\n+ } else if (isFallbackCompositionEnd(domEventName, nativeEvent)) {\n eventType = 'onCompositionEnd';\n }\n \n@@ -259,16 +248,14 @@ function extractCompositionEvent(\n }\n }\n \n-\/**\n- * @param {TopLevelType} topLevelType Number from `TopLevelType`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {?string} The string corresponding to this `beforeInput` event.\n- *\/\n-function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n- switch (topLevelType) {\n- case TOP_COMPOSITION_END:\n+function getNativeBeforeInputChars(\n+ domEventName: DOMEventName,\n+ nativeEvent: any,\n+): ?string {\n+ switch (domEventName) {\n+ case 'compositionend':\n return getDataFromCustomEvent(nativeEvent);\n- case TOP_KEY_PRESS:\n+ case 'keypress':\n \/**\n * If native `textInput` events are available, our goal is to make\n * use of them. However, there is a special case: the spacebar key.\n@@ -291,7 +278,7 @@ function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n hasSpaceKeypress = true;\n return SPACEBAR_CHAR;\n \n- case TOP_TEXT_INPUT:\n+ case 'textInput':\n \/\/ Record the characters to be added to the DOM.\n const chars = nativeEvent.data;\n \n@@ -313,21 +300,20 @@ function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n \/**\n * For browsers that do not provide the `textInput` event, extract the\n * appropriate string to use for SyntheticInputEvent.\n- *\n- * @param {number} topLevelType Number from `TopLevelEventTypes`.\n- * @param {object} nativeEvent Native browser event.\n- * @return {?string} The fallback string for this `beforeInput` event.\n *\/\n-function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n+function getFallbackBeforeInputChars(\n+ domEventName: DOMEventName,\n+ nativeEvent: any,\n+): ?string {\n \/\/ If we are currently composing (IME) and using a fallback to do so,\n \/\/ try to extract the composed characters from the fallback object.\n \/\/ If composition event is available, we extract a string only at\n \/\/ compositionevent, otherwise extract it at fallback events.\n if (isComposing) {\n if (\n- topLevelType === TOP_COMPOSITION_END ||\n+ domEventName === 'compositionend' ||\n (!canUseCompositionEvent &&\n- isFallbackCompositionEnd(topLevelType, nativeEvent))\n+ isFallbackCompositionEnd(domEventName, nativeEvent))\n ) {\n const chars = FallbackCompositionStateGetData();\n FallbackCompositionStateReset();\n@@ -337,12 +323,12 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n return null;\n }\n \n- switch (topLevelType) {\n- case TOP_PASTE:\n+ switch (domEventName) {\n+ case 'paste':\n \/\/ If a paste event occurs after a keypress, throw out the input\n \/\/ chars. Paste events should not lead to BeforeInput events.\n return null;\n- case TOP_KEY_PRESS:\n+ case 'keypress':\n \/**\n * As of v27, Firefox may fire keypress events even when no character\n * will be inserted. A few possibilities:\n@@ -373,7 +359,7 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n }\n }\n return null;\n- case TOP_COMPOSITION_END:\n+ case 'compositionend':\n return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)\n ? null\n : nativeEvent.data;\n@@ -390,7 +376,7 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n *\/\n function extractBeforeInputEvent(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n@@ -398,9 +384,9 @@ function extractBeforeInputEvent(\n let chars;\n \n if (canUseTextInputEvent) {\n- chars = getNativeBeforeInputChars(topLevelType, nativeEvent);\n+ chars = getNativeBeforeInputChars(domEventName, nativeEvent);\n } else {\n- chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);\n+ chars = getFallbackBeforeInputChars(domEventName, nativeEvent);\n }\n \n \/\/ If no characters are being inserted, no BeforeInput event should\n@@ -439,24 +425,24 @@ function extractBeforeInputEvent(\n * `composition` event types.\n *\/\n function extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n-) {\n+ dispatchQueue: DispatchQueue,\n+ domEventName: DOMEventName,\n+ targetInst: null | Fiber,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: null | EventTarget,\n+ eventSystemFlags: EventSystemFlags,\n+ targetContainer: EventTarget,\n+): void {\n extractCompositionEvent(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n );\n extractBeforeInputEvent(\n dispatchQueue,\n- topLevelType,\n+ domEventName,\n targetInst,\n nativeEvent,\n nativeEventTarget,\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ChangeEventPlugin.js\nindex 8b22fb84af..a20d9911da 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ChangeEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ChangeEventPlugin.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n import type {AnyNativeEvent} from '..\/PluginModuleType';\n-import type {TopLevelType} from '..\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/DOMEventNames';\n import type {DispatchQueue} from '..\/DOMPluginEventSystem';\n import type {EventSystemFlags} from '..\/EventSystemFlags';\n \n@@ -16,16 +16,6 @@ import {SyntheticEvent} from '..\/SyntheticEvent';\n import isTextInputElement from '..\/isTextInputElement';\n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n \n-import {\n- TOP_FOCUS_OUT,\n- TOP_CHANGE,\n- TOP_CLICK,\n- TOP_FOCUS_IN,\n- TOP_INPUT,\n- TOP_KEY_DOWN,\n- TOP_KEY_UP,\n- TOP_SELECTION_CHANGE,\n-} from '..\/DOMTopLevelEventTypes';\n import getEventTarget from '..\/getEventTarget';\n import isEventSupported from '..\/isEventSupported';\n import {getNodeFromInstance} from '..\/..\/client\/ReactDOMComponentTree';\n@@ -42,14 +32,14 @@ import {\n \n function registerEvents() {\n registerTwoPhaseEvent('onChange', [\n- TOP_CHANGE,\n- TOP_CLICK,\n- TOP_FOCUS_IN,\n- TOP_FOCUS_OUT,\n- TOP_INPUT,\n- TOP_KEY_DOWN,\n- TOP_KEY_UP,\n- TOP_SELECTION_CHANGE,\n+ 'change',\n+ 'click',\n+ 'focusin',\n+ 'focusout',\n+ 'input',\n+ 'keydown',\n+ 'keyup',\n+ 'selectionchange',\n ]);\n }\n \n@@ -116,8 +106,8 @@ function getInstIfValueChanged(targetInst: Object) {\n }\n }\n \n-function getTargetInstForChangeEvent(topLevelType, targetInst) {\n- if (topLevelType === TOP_CHANGE) {\n+function getTargetInstForChangeEvent(domEventName: DOMEventName, targetInst) {\n+ if (domEventName === 'change') {\n return targetInst;\n }\n }\n@@ -171,8 +161,12 @@ function handlePropertyChange(nativeEvent) {\n }\n }\n \n-function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {\n- if (topLevelType === TOP_FOCUS_IN) {\n+function handleEventsForInputEventPolyfill(\n+ domEventName: DOMEventName,\n+ target,\n+ targetInst,\n+) {\n+ if (domEventName === 'focusin') {\n \/\/ In IE9, propertychange fires for most input events but is buggy and\n \/\/ doesn't fire when text is deleted, but conveniently, selectionchange\n \/\/ appears to fire in all of the remaining cases so we catch those and\n@@ -185,17 +179,20 @@ function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {\n \/\/ missed a blur event somehow.\n stopWatchingForValueChange();\n startWatchingForValueChange(target, targetInst);\n- } else if (topLevelType === TOP_FOCUS_OUT) {\n+ } else if (domEventName === 'focusout') {\n stopWatchingForValueChange();\n }\n }\n \n \/\/ For IE8 and IE9.\n-function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {\n+function getTargetInstForInputEventPolyfill(\n+ domEventName: DOMEventName,\n+ targetInst,\n+) {\n if (\n- topLevelType === TOP_SELECTION_CHANGE ||\n- topLevelType === TOP_KEY_UP ||\n- topLevelType === TOP_KEY_DOWN\n+ domEventName === 'selectionchange' ||\n+ domEventName === 'keyup' ||\n+ domEventName === 'keydown'\n ) {\n \/\/ On the selectionchange event, the target is just document which isn't\n \/\/ helpful for us so just check activeElement instead.\n@@ -226,14 +223,17 @@ function shouldUseClickEvent(elem) {\n );\n }\n \n-function getTargetInstForClickEvent(topLevelType, targetInst) {\n- if (topLevelType === TOP_CLICK) {\n+function getTargetInstForClickEvent(domEventName: DOMEventName, targetInst) {\n+ if (domEventName === 'click') {\n return getInstIfValueChanged(targetInst);\n }\n }\n \n-function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {\n- if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {\n+function getTargetInstForInputOrChangeEvent(\n+ domEventName: DOMEventName,\n+ targetInst,\n+) {\n+ if (domEventName === 'input' || domEventName === 'change') {\n return getInstIfValueChanged(targetInst);\n }\n }\n@@ -263,7 +263,7 @@ function handleControlledInputBlur(node: HTMLInputElement) {\n *\/\n function extractEvents(\n dispatchQueue: DispatchQueue,\n- topLevelType: TopLevelType,\n+ domEventName: DOMEventName,\n targetInst: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: null | EventTarget,\n@@ -287,7 +287,7 @@ function extractEvents(\n }\n \n if (getTargetInstFunc) {\n- const inst = getTargetInstFunc(topLevelType, targetInst);\n+ const inst = getTargetInstFunc(domEventName, targetInst);\n if (inst) {\n createAndAccumulateChangeEvent(\n dispatchQueue,\n@@ -300,11 +300,11 @@ function extractEvents(\n }\n \n if (handleEventFunc) {\n- handleEventFunc(topLevelType, targetNode, targetInst);\n+ handleEventFunc(domEventName, targetNode, targetInst);\n }\n \n \/\/ When blurring, set the value attribute for number inputs\n- if (topLevelType === TOP_FOCUS_OUT) {\n+ if (domEventName === 'focusout') {\n handleControlledInputBlur(((targetNode: any): HTMLInputElement));\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/EnterLeaveEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/EnterLeaveEventPlugin.js\nindex 87130e69b4..2e345b2bfa 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/EnterLeaveEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/EnterLeaveEventPlugin.js\n@@ -3,15 +3,16 @@\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n *\/\n \n+import type {AnyNativeEvent} from '..\/PluginModuleType';\n+import type {DOMEventName} from '..\/DOMEventNames';\n+import type {DispatchQueue} from '..\/DOMPluginEventSystem';\n+import type {EventSystemFlags} from '..\/EventSystemFlags';\n+\n import {registerDirectEvent} from '..\/EventRegistry';\n-import {\n- TOP_MOUSE_OUT,\n- TOP_MOUSE_OVER,\n- TOP_POINTER_OUT,\n- TOP_POINTER_OVER,\n-} from '..\/DOMTopLevelEventTypes';\n import {IS_REPLAYED} from 'react-dom\/src\/events\/EventSystemFlags';\n import {\n SyntheticEvent,\n@@ -28,10 +29,10 @@ import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n import {getNearestMountedFiber} from 'react-reconciler\/src\/ReactFiberTreeReflection';\n \n function registerEvents() {\n- registerDirectEvent('onMouseEnter', [TOP_MOUSE_OUT, TOP_MOUSE_OVER]);\n- registerDirectEvent('onMouseLeave', [TOP_MOUSE_OUT, TOP_MOUSE_OVER]);\n- registerDirectEvent('onPointerEnter', [TOP_POINTER_OUT, TOP_POINTER_OVER]);\n- registerDirectEvent('onPointerLeave', [TOP_POINTER_OUT, TOP_POINTER_OVER]);\n+ registerDirectEvent('onMouseEnter', ['mouseout', 'mouseover']);\n+ registerDirectEvent('onMouseLeave', ['mouseout', 'mouseover']);\n+ registerDirectEvent('onPointerEnter', ['pointerout', 'pointerover']);\n+ registerDirectEvent('onPointerLeave', ['pointerout', 'pointerover']);\n }\n \n \/**\n@@ -42,21 +43,22 @@ function registerEvents() {\n * the `mouseover` top-level event.\n *\/\n function extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n+ dispatchQueue: DispatchQueue,\n+ domEventName: DOMEventName,\n+ targetInst: null | Fiber,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: null | EventTarget,\n+ eventSystemFlags: EventSystemFlags,\n+ targetContainer: EventTarget,\n ) {\n const isOverEvent =\n- topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;\n+ domEventName === 'mouseover' || domEventName === 'pointerover';\n const isOutEvent =\n- topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;\n+ domEventName === 'mouseout' || domEventName === 'pointerout';\n \n if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {\n- const related = nativeEvent.relatedTarget || nativeEvent.fromElement;\n+ const related =\n+ (nativeEvent: any).relatedTarget || (nativeEvent: any).fromElement;\n if (related) {\n \/\/ Due to the fact we don't add listeners to the document with the\n \/\/ modern event system and instead attach listeners to roots, we\n@@ -75,12 +77,13 @@ function extractEvents(\n }\n \n let win;\n- if (nativeEventTarget.window === nativeEventTarget) {\n+ \/\/ TODO: why is this nullable in the types but we read from it?\n+ if ((nativeEventTarget: any).window === nativeEventTarget) {\n \/\/ `nativeEventTarget` is probably a window object.\n win = nativeEventTarget;\n } else {\n \/\/ TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.\n- const doc = nativeEventTarget.ownerDocument;\n+ const doc = (nativeEventTarget: any).ownerDocument;\n if (doc) {\n win = doc.defaultView || doc.parentWindow;\n } else {\n@@ -91,9 +94,9 @@ function extractEvents(\n let from;\n let to;\n if (isOutEvent) {\n- const related = nativeEvent.relatedTarget || nativeEvent.toElement;\n+ const related = nativeEvent.relatedTarget || (nativeEvent: any).toElement;\n from = targetInst;\n- to = related ? getClosestInstanceFromNode(related) : null;\n+ to = related ? getClosestInstanceFromNode((related: any)) : null;\n if (to !== null) {\n const nearestMounted = getNearestMountedFiber(to);\n if (\n@@ -114,17 +117,11 @@ function extractEvents(\n return;\n }\n \n- let eventInterface, leaveEventType, enterEventType, eventTypePrefix;\n-\n- if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {\n- eventInterface = MouseEventInterface;\n- leaveEventType = 'onMouseLeave';\n- enterEventType = 'onMouseEnter';\n- eventTypePrefix = 'mouse';\n- } else if (\n- topLevelType === TOP_POINTER_OUT ||\n- topLevelType === TOP_POINTER_OVER\n- ) {\n+ let eventInterface = MouseEventInterface;\n+ let leaveEventType = 'onMouseLeave';\n+ let enterEventType = 'onMouseEnter';\n+ let eventTypePrefix = 'mouse';\n+ if (domEventName === 'pointerout' || domEventName === 'pointerover') {\n eventInterface = PointerEventInterface;\n leaveEventType = 'onPointerLeave';\n enterEventType = 'onPointerEnter';\n@@ -159,7 +156,7 @@ function extractEvents(\n \/\/ If we are not processing the first ancestor, then we\n \/\/ should not process the same nativeEvent again, as we\n \/\/ will have already processed it in the first ancestor.\n- const nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);\n+ const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any));\n if (nativeTargetInst !== targetInst) {\n enter = null;\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/SelectEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/SelectEventPlugin.js\nindex a8e3aae375..2357361205 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/SelectEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/SelectEventPlugin.js\n@@ -3,25 +3,21 @@\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n *\/\n \n+import type {AnyNativeEvent} from '..\/PluginModuleType';\n+import type {DOMEventName} from '..\/DOMEventNames';\n+import type {DispatchQueue} from '..\/DOMPluginEventSystem';\n+import type {EventSystemFlags} from '..\/EventSystemFlags';\n+\n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n import {SyntheticEvent} from '..\/..\/events\/SyntheticEvent';\n import isTextInputElement from '..\/isTextInputElement';\n import shallowEqual from 'shared\/shallowEqual';\n \n import {registerTwoPhaseEvent} from '..\/EventRegistry';\n-import {\n- TOP_FOCUS_OUT,\n- TOP_CONTEXT_MENU,\n- TOP_DRAG_END,\n- TOP_FOCUS_IN,\n- TOP_KEY_DOWN,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n- TOP_MOUSE_UP,\n- TOP_SELECTION_CHANGE,\n-} from '..\/DOMTopLevelEventTypes';\n import getActiveElement from '..\/..\/client\/getActiveElement';\n import {\n getNodeFromInstance,\n@@ -34,21 +30,17 @@ import {accumulateTwoPhaseListeners} from '..\/DOMPluginEventSystem';\n const skipSelectionChangeEvent =\n canUseDOM && 'documentMode' in document && document.documentMode <= 11;\n \n-const rootTargetDependencies = [\n- TOP_FOCUS_OUT,\n- TOP_CONTEXT_MENU,\n- TOP_DRAG_END,\n- TOP_FOCUS_IN,\n- TOP_KEY_DOWN,\n- TOP_KEY_UP,\n- TOP_MOUSE_DOWN,\n- TOP_MOUSE_UP,\n-];\n-\n function registerEvents() {\n registerTwoPhaseEvent('onSelect', [\n- ...rootTargetDependencies,\n- TOP_SELECTION_CHANGE,\n+ 'focusout',\n+ 'contextmenu',\n+ 'dragend',\n+ 'focusin',\n+ 'keydown',\n+ 'keyup',\n+ 'mousedown',\n+ 'mouseup',\n+ 'selectionchange',\n ]);\n }\n \n@@ -62,11 +54,8 @@ let mouseDown = false;\n *\n * The return value will not be consistent across nodes or browsers, but\n * two identical selections on the same node will return identical objects.\n- *\n- * @param {DOMElement} node\n- * @return {object}\n *\/\n-function getSelection(node) {\n+function getSelection(node: any) {\n if ('selectionStart' in node && hasSelectionCapabilities(node)) {\n return {\n start: node.selectionStart,\n@@ -87,11 +76,8 @@ function getSelection(node) {\n \n \/**\n * Get document associated with the event target.\n- *\n- * @param {object} nativeEventTarget\n- * @return {Document}\n *\/\n-function getEventTargetDocument(eventTarget) {\n+function getEventTargetDocument(eventTarget: any) {\n return eventTarget.window === eventTarget\n ? eventTarget.document\n : eventTarget.nodeType === DOCUMENT_NODE\n@@ -159,23 +145,23 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {\n * - Fires after user input.\n *\/\n function extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n+ dispatchQueue: DispatchQueue,\n+ domEventName: DOMEventName,\n+ targetInst: null | Fiber,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: null | EventTarget,\n+ eventSystemFlags: EventSystemFlags,\n+ targetContainer: EventTarget,\n ) {\n const eventListenerMap = getEventListenerMap(targetContainer);\n \/\/ Track whether all listeners exists for this plugin. If none exist, we do\n \/\/ not extract events. See #3639.\n if (\n- \/\/ If we are handling TOP_SELECTION_CHANGE, then we don't need to\n- \/\/ check for the other dependencies, as TOP_SELECTION_CHANGE is only\n+ \/\/ If we are handling selectionchange, then we don't need to\n+ \/\/ check for the other dependencies, as selectionchange is only\n \/\/ event attached from the onChange plugin and we don't expose an\n \/\/ onSelectionChange event from React.\n- topLevelType !== TOP_SELECTION_CHANGE &&\n+ domEventName !== 'selectionchange' &&\n !eventListenerMap.has('onSelect') &&\n !eventListenerMap.has('onSelectCapture')\n ) {\n@@ -184,11 +170,11 @@ function extractEvents(\n \n const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;\n \n- switch (topLevelType) {\n+ switch (domEventName) {\n \/\/ Track the input node that has focus.\n- case TOP_FOCUS_IN:\n+ case 'focusin':\n if (\n- isTextInputElement(targetNode) ||\n+ isTextInputElement((targetNode: any)) ||\n targetNode.contentEditable === 'true'\n ) {\n activeElement = targetNode;\n@@ -196,19 +182,19 @@ function extractEvents(\n lastSelection = null;\n }\n break;\n- case TOP_FOCUS_OUT:\n+ case 'focusout':\n activeElement = null;\n activeElementInst = null;\n lastSelection = null;\n break;\n \/\/ Don't fire the event while the user is dragging. This matches the\n \/\/ semantics of the native select event.\n- case TOP_MOUSE_DOWN:\n+ case 'mousedown':\n mouseDown = true;\n break;\n- case TOP_CONTEXT_MENU:\n- case TOP_MOUSE_UP:\n- case TOP_DRAG_END:\n+ case 'contextmenu':\n+ case 'mouseup':\n+ case 'dragend':\n mouseDown = false;\n constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);\n break;\n@@ -221,13 +207,13 @@ function extractEvents(\n \/\/ keyup, but we check on keydown as well in the case of holding down a\n \/\/ key, when multiple keydown events are fired but only one keyup is.\n \/\/ This is also our approach for IE handling, for the reason above.\n- case TOP_SELECTION_CHANGE:\n+ case 'selectionchange':\n if (skipSelectionChangeEvent) {\n break;\n }\n \/\/ falls through\n- case TOP_KEY_DOWN:\n- case TOP_KEY_UP:\n+ case 'keydown':\n+ case 'keyup':\n constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/SimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/SimpleEventPlugin.js\nindex 39b74059dc..05e989f194 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/SimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/SimpleEventPlugin.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import type {TopLevelType} from '..\/..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/..\/events\/DOMEventNames';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {AnyNativeEvent} from '..\/..\/events\/PluginModuleType';\n import type {DispatchQueue} from '..\/DOMPluginEventSystem';\n@@ -28,7 +28,12 @@ import {\n WheelEventInterface,\n } from '..\/..\/events\/SyntheticEvent';\n \n-import * as DOMTopLevelEventTypes from '..\/DOMTopLevelEventTypes';\n+import {\n+ ANIMATION_END,\n+ ANIMATION_ITERATION,\n+ ANIMATION_START,\n+ TRANSITION_END,\n+} from '..\/DOMEventNames';\n import {\n topLevelEventsToReactNames,\n registerSimpleEvents,\n@@ -49,20 +54,20 @@ import {\n \n function extractEvents(\n dispatchQueue: DispatchQueue,\n- topLevelType: TopLevelType,\n+ domEventName: DOMEventName,\n targetInst: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: null | EventTarget,\n eventSystemFlags: EventSystemFlags,\n targetContainer: EventTarget,\n ): void {\n- const reactName = topLevelEventsToReactNames.get(topLevelType);\n+ const reactName = topLevelEventsToReactNames.get(domEventName);\n if (reactName === undefined) {\n return;\n }\n let EventInterface;\n- switch (topLevelType) {\n- case DOMTopLevelEventTypes.TOP_KEY_PRESS:\n+ switch (domEventName) {\n+ case 'keypress':\n \/\/ Firefox creates a keypress event for function keys too. This removes\n \/\/ the unwanted keypress events. Enter is however both printable and\n \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n@@ -70,78 +75,78 @@ function extractEvents(\n return;\n }\n \/* falls through *\/\n- case DOMTopLevelEventTypes.TOP_KEY_DOWN:\n- case DOMTopLevelEventTypes.TOP_KEY_UP:\n+ case 'keydown':\n+ case 'keyup':\n EventInterface = KeyboardEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_FOCUS_IN:\n- case DOMTopLevelEventTypes.TOP_FOCUS_OUT:\n- case DOMTopLevelEventTypes.TOP_BEFORE_BLUR:\n- case DOMTopLevelEventTypes.TOP_AFTER_BLUR:\n+ case 'focusin':\n+ case 'focusout':\n+ case 'beforeblur':\n+ case 'afterblur':\n EventInterface = FocusEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_CLICK:\n+ case 'click':\n \/\/ Firefox creates a click event on right mouse clicks. This removes the\n \/\/ unwanted click events.\n if (nativeEvent.button === 2) {\n return;\n }\n \/* falls through *\/\n- case DOMTopLevelEventTypes.TOP_AUX_CLICK:\n- case DOMTopLevelEventTypes.TOP_DOUBLE_CLICK:\n- case DOMTopLevelEventTypes.TOP_MOUSE_DOWN:\n- case DOMTopLevelEventTypes.TOP_MOUSE_MOVE:\n- case DOMTopLevelEventTypes.TOP_MOUSE_UP:\n+ case 'auxclick':\n+ case 'dblclick':\n+ case 'mousedown':\n+ case 'mousemove':\n+ case 'mouseup':\n \/\/ TODO: Disabled elements should not respond to mouse events\n \/* falls through *\/\n- case DOMTopLevelEventTypes.TOP_MOUSE_OUT:\n- case DOMTopLevelEventTypes.TOP_MOUSE_OVER:\n- case DOMTopLevelEventTypes.TOP_CONTEXT_MENU:\n+ case 'mouseout':\n+ case 'mouseover':\n+ case 'contextmenu':\n EventInterface = MouseEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_DRAG:\n- case DOMTopLevelEventTypes.TOP_DRAG_END:\n- case DOMTopLevelEventTypes.TOP_DRAG_ENTER:\n- case DOMTopLevelEventTypes.TOP_DRAG_EXIT:\n- case DOMTopLevelEventTypes.TOP_DRAG_LEAVE:\n- case DOMTopLevelEventTypes.TOP_DRAG_OVER:\n- case DOMTopLevelEventTypes.TOP_DRAG_START:\n- case DOMTopLevelEventTypes.TOP_DROP:\n+ case 'drag':\n+ case 'dragend':\n+ case 'dragenter':\n+ case 'dragexit':\n+ case 'dragleave':\n+ case 'dragover':\n+ case 'dragstart':\n+ case 'drop':\n EventInterface = DragEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_TOUCH_CANCEL:\n- case DOMTopLevelEventTypes.TOP_TOUCH_END:\n- case DOMTopLevelEventTypes.TOP_TOUCH_MOVE:\n- case DOMTopLevelEventTypes.TOP_TOUCH_START:\n+ case 'touchcancel':\n+ case 'touchend':\n+ case 'touchmove':\n+ case 'touchstart':\n EventInterface = TouchEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_ANIMATION_END:\n- case DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION:\n- case DOMTopLevelEventTypes.TOP_ANIMATION_START:\n+ case ANIMATION_END:\n+ case ANIMATION_ITERATION:\n+ case ANIMATION_START:\n EventInterface = AnimationEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_TRANSITION_END:\n+ case TRANSITION_END:\n EventInterface = TransitionEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_SCROLL:\n+ case 'scroll':\n EventInterface = UIEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_WHEEL:\n+ case 'wheel':\n EventInterface = WheelEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_COPY:\n- case DOMTopLevelEventTypes.TOP_CUT:\n- case DOMTopLevelEventTypes.TOP_PASTE:\n+ case 'copy':\n+ case 'cut':\n+ case 'paste':\n EventInterface = ClipboardEventInterface;\n break;\n- case DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE:\n- case DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE:\n- case DOMTopLevelEventTypes.TOP_POINTER_CANCEL:\n- case DOMTopLevelEventTypes.TOP_POINTER_DOWN:\n- case DOMTopLevelEventTypes.TOP_POINTER_MOVE:\n- case DOMTopLevelEventTypes.TOP_POINTER_OUT:\n- case DOMTopLevelEventTypes.TOP_POINTER_OVER:\n- case DOMTopLevelEventTypes.TOP_POINTER_UP:\n+ case 'gotpointercapture':\n+ case 'lostpointercapture':\n+ case 'pointercancel':\n+ case 'pointerdown':\n+ case 'pointermove':\n+ case 'pointerout':\n+ case 'pointerover':\n+ case 'pointerup':\n EventInterface = PointerEventInterface;\n break;\n default:\n@@ -179,7 +184,7 @@ function extractEvents(\n \/\/ TODO: ideally, we'd eventually add all events from\n \/\/ nonDelegatedEvents list in DOMPluginEventSystem.\n \/\/ Then we can remove this special list.\n- topLevelType === DOMTopLevelEventTypes.TOP_SCROLL;\n+ domEventName === 'scroll';\n }\n \n accumulateSinglePhaseListeners(\ndiff --git a\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js b\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\nindex 06f2fd6ac2..7ae85387ee 100644\n--- a\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\n+++ b\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\n@@ -14,7 +14,7 @@ import type {\n EventPriority,\n ReactScopeInstance,\n } from 'shared\/ReactTypes';\n-import type {DOMTopLevelEventType} from '..\/events\/TopLevelEventTypes';\n+import type {DOMEventName} from '..\/events\/DOMEventNames';\n \n type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;\n \n@@ -86,5 +86,5 @@ export type ReactDOMEventHandle = (\n export type ReactDOMEventHandleListener = {|\n callback: (SyntheticEvent) => void,\n capture: boolean,\n- type: DOMTopLevelEventType,\n+ type: DOMEventName,\n |};\n","files":[{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMComponentTree.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMEventHandle.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/DOMEventNames.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/DOMEventProperties.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/DOMPluginEventSystem.js"},{"status":"D","path":"packages\/react-dom\/src\/events\/DOMTopLevelEventTypes.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/EventRegistry.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactSyntheticEventType.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/TopLevelEventTypes.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/BeforeInputEventPlugin.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/ChangeEventPlugin.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/EnterLeaveEventPlugin.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/SelectEventPlugin.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/plugins\/SimpleEventPlugin.js"},{"status":"M","path":"packages\/react-dom\/src\/shared\/ReactDOMTypes.js"}]}

dillon1000/react

Files changed