[react-ui] Move experimental event+a11y work to react-ui package (#16794

)

packages/react-reconciler/src/__tests__/ReactScope-test.internal.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-import {createEventTarget} from 'react-events/src/dom/testing-library';
+import {createEventTarget} from 'react-ui/events/src/dom/testing-library';
 
 let React;
 let ReactFeatureFlags;
@@ -204,7 +204,7 @@ describe('ReactScope', () => {
       let onKeyDown = jest.fn();
       const TestScope = React.unstable_createScope((type, props) => true);
       const ref = React.createRef();
-      const useKeyboard = require('react-events/keyboard').useKeyboard;
+      const useKeyboard = require('react-ui/events/keyboard').useKeyboard;
       let Component = () => {
         const listener = useKeyboard({
           onKeyDown,

packages/react-ui/README.md

@@ -0,0 +1,4 @@
+# `react-ui`
+
+This package is experimental. It is intended for use with the experimental React
+flags for internal testing.

packages/react-dom/src/client/focus/FocusGrid.js → packages/react-ui/accessibility/src/FocusGrid.js

@@ -7,11 +7,11 @@
  * @flow
  */
 
-import type {KeyboardEvent} from 'react-events/src/dom/Keyboard';
+import type {KeyboardEvent} from 'react-ui/events/src/dom/Keyboard';
 
 import React from 'react';
 import {tabFocusableImpl} from './TabbableScope';
-import {useKeyboard} from 'react-events/keyboard';
+import {useKeyboard} from '../../events/keyboard';
 
 type GridComponentProps = {
   children: React.Node,

packages/react-dom/src/client/focus/ReactTabFocus.js → packages/react-ui/accessibility/src/ReactTabFocus.js

@@ -8,11 +8,11 @@
  */
 
 import type {ReactScopeMethods} from 'shared/ReactTypes';
-import type {KeyboardEvent} from 'react-events/src/dom/Keyboard';
+import type {KeyboardEvent} from 'react-ui/events/src/dom/Keyboard';
 
 import React from 'react';
 import {TabbableScope} from './TabbableScope';
-import {useKeyboard} from 'react-events/keyboard';
+import {useKeyboard} from '../../events/keyboard';
 
 type TabFocusControllerProps = {
   children: React.Node,

packages/react-dom/src/client/focus/__tests__/FocusGrid-test.internal.js → packages/react-ui/accessibility/src/__tests__/FocusGrid-test.internal.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {createEventTarget} from 'react-events/src/dom/testing-library';
+import {createEventTarget} from 'react-ui/events/src/dom/testing-library';
 
 let React;
 let ReactFeatureFlags;

packages/react-dom/src/client/focus/__tests__/TabFocusController-test.internal.js → packages/react-ui/accessibility/src/__tests__/TabFocusController-test.internal.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {createEventTarget} from 'react-events/src/dom/testing-library';
+import {createEventTarget} from 'react-ui/events/src/dom/testing-library';
 
 let React;
 let ReactFeatureFlags;

packages/react-events/README.md → packages/react-ui/events/README.md

@@ -1,4 +1,4 @@
-# `react-events`
+# `react-ui/events`
 
 *This package is experimental. It is intended for use with the experimental React
 events API that is not available in open source builds.*

packages/react-events/src/dom/__tests__/ContextMenu-test.internal.js → packages/react-ui/events/src/dom/__tests__/ContextMenu-test.internal.js

@@ -28,7 +28,7 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  useContextMenu = require('react-events/context-menu').useContextMenu;
+  useContextMenu = require('react-ui/events/context-menu').useContextMenu;
 }
 
 const forcePointerEvents = true;

packages/react-events/src/dom/__tests__/Drag-test.internal.js → packages/react-ui/events/src/dom/__tests__/Drag-test.internal.js

@@ -23,7 +23,7 @@ describe('Drag event responder', () => {
     ReactFeatureFlags.enableFlareAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
-    useDrag = require('react-events/drag').useDrag;
+    useDrag = require('react-ui/events/drag').useDrag;
 
     container = document.createElement('div');
     document.body.appendChild(container);

packages/react-events/src/dom/__tests__/Focus-test.internal.js → packages/react-ui/events/src/dom/__tests__/Focus-test.internal.js

@@ -24,8 +24,8 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  FocusResponder = require('react-events/focus').FocusResponder;
-  useFocus = require('react-events/focus').useFocus;
+  FocusResponder = require('react-ui/events/focus').FocusResponder;
+  useFocus = require('react-ui/events/focus').useFocus;
 }
 
 const forcePointerEvents = true;

packages/react-events/src/dom/__tests__/FocusWithin-test.internal.js → packages/react-ui/events/src/dom/__tests__/FocusWithin-test.internal.js

@@ -24,8 +24,8 @@ const initializeModules = hasPointerEvents => {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  FocusWithinResponder = require('react-events/focus').FocusWithinResponder;
-  useFocusWithin = require('react-events/focus').useFocusWithin;
+  FocusWithinResponder = require('react-ui/events/focus').FocusWithinResponder;
+  useFocusWithin = require('react-ui/events/focus').useFocusWithin;
 };
 
 const forcePointerEvents = true;

packages/react-events/src/dom/__tests__/Hover-test.internal.js → packages/react-ui/events/src/dom/__tests__/Hover-test.internal.js

@@ -25,8 +25,8 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableUserBlockingEvents = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  HoverResponder = require('react-events/hover').HoverResponder;
-  useHover = require('react-events/hover').useHover;
+  HoverResponder = require('react-ui/events/hover').HoverResponder;
+  useHover = require('react-ui/events/hover').useHover;
 }
 
 const forcePointerEvents = true;

packages/react-events/src/dom/__tests__/Input-test.internal.js → packages/react-ui/events/src/dom/__tests__/Input-test.internal.js

@@ -39,8 +39,8 @@ const modulesInit = () => {
   React = require('react');
   ReactDOM = require('react-dom');
   Scheduler = require('scheduler');
-  InputResponder = require('react-events/input').InputResponder;
-  useInput = require('react-events/input').useInput;
+  InputResponder = require('react-ui/events/input').InputResponder;
+  useInput = require('react-ui/events/input').useInput;
 };
 
 describe('Input event responder', () => {

packages/react-events/src/dom/__tests__/Keyboard-test.internal.js → packages/react-ui/events/src/dom/__tests__/Keyboard-test.internal.js

@@ -22,7 +22,7 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  useKeyboard = require('react-events/keyboard').useKeyboard;
+  useKeyboard = require('react-ui/events/keyboard').useKeyboard;
 }
 
 describe('Keyboard responder', () => {

packages/react-events/src/dom/__tests__/MixedResponders-test-internal.js → packages/react-ui/events/src/dom/__tests__/MixedResponders-test-internal.js

@@ -35,7 +35,7 @@ describe('mixing responders with the heritage event system', () => {
   });
 
   it('should properly only flush sync once when the event systems are mixed', () => {
-    const usePress = require('react-events/press').usePress;
+    const usePress = require('react-ui/events/press').usePress;
     const ref = React.createRef();
     let renderCounts = 0;
 
@@ -104,7 +104,7 @@ describe('mixing responders with the heritage event system', () => {
   });
 
   it('should properly flush sync when the event systems are mixed with unstable_flushDiscreteUpdates', () => {
-    const usePress = require('react-events/press').usePress;
+    const usePress = require('react-ui/events/press').usePress;
     const ref = React.createRef();
     let renderCounts = 0;
 
@@ -177,7 +177,7 @@ describe('mixing responders with the heritage event system', () => {
       'event systems',
     async () => {
       const {useState} = React;
-      const usePress = require('react-events/press').usePress;
+      const usePress = require('react-ui/events/press').usePress;
 
       const button = React.createRef();
 
@@ -237,8 +237,8 @@ describe('mixing responders with the heritage event system', () => {
     it('is async for non-input events', () => {
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
       ReactFeatureFlags.enableUserBlockingEvents = true;
-      const usePress = require('react-events/press').usePress;
-      const useInput = require('react-events/input').useInput;
+      const usePress = require('react-ui/events/press').usePress;
+      const useInput = require('react-ui/events/input').useInput;
       const root = ReactDOM.unstable_createRoot(container);
       let input;
 

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

@@ -28,8 +28,8 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  PressResponder = require('react-events/press').PressResponder;
-  usePress = require('react-events/press').usePress;
+  PressResponder = require('react-ui/events/press').PressResponder;
+  usePress = require('react-ui/events/press').usePress;
 }
 
 function removePressMoveStrings(eventString) {

packages/react-events/src/dom/__tests__/Scroll-test.internal.js → packages/react-ui/events/src/dom/__tests__/Scroll-test.internal.js

@@ -26,7 +26,7 @@ const initializeModules = hasPointerEvents => {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  useScroll = require('react-events/scroll').useScroll;
+  useScroll = require('react-ui/events/scroll').useScroll;
 };
 
 describe.each(table)('Scroll responder', hasPointerEvents => {

packages/react-events/src/dom/__tests__/Tap-test.internal.js → packages/react-ui/events/src/dom/__tests__/Tap-test.internal.js

@@ -29,7 +29,7 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableFlareAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  useTap = require('react-events/tap').useTap;
+  useTap = require('react-ui/events/tap').useTap;
 }
 
 const coordinatesInside = {x: 51, y: 51};

packages/react-events/package.json → packages/react-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-events",
+  "name": "react-ui",
   "private": true,
   "description": "React is a JavaScript library for building user interfaces.",
   "keywords": [
@@ -12,16 +12,17 @@
   "files": [
     "LICENSE",
     "README.md",
-    "context-menu.js",
-    "drag.js",
-    "focus.js",
-    "hover.js",
-    "input.js",
-    "keyboard.js",
-    "press.js",
-    "scroll.js",
-    "swipe.js",
-    "tap.js",
+    "events/README.md",
+    "events/context-menu.js",
+    "events/drag.js",
+    "events/focus.js",
+    "events/hover.js",
+    "events/input.js",
+    "events/keyboard.js",
+    "events/press.js",
+    "events/scroll.js",
+    "events/swipe.js",
+    "events/tap.js",
     "build-info.json",
     "cjs/",
     "umd/"

scripts/rollup/bundles.js

@@ -505,7 +505,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/context-menu',
+    entry: 'react-ui/events/context-menu',
     global: 'ReactEventsContextMenu',
     externals: ['react'],
   },
@@ -520,7 +520,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/drag',
+    entry: 'react-ui/events/drag',
     global: 'ReactEventsDrag',
     externals: ['react'],
   },
@@ -535,7 +535,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/focus',
+    entry: 'react-ui/events/focus',
     global: 'ReactEventsFocus',
     externals: ['react'],
   },
@@ -550,7 +550,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/hover',
+    entry: 'react-ui/events/hover',
     global: 'ReactEventsHover',
     externals: ['react'],
   },
@@ -565,7 +565,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/input',
+    entry: 'react-ui/events/input',
     global: 'ReactEventsInput',
     externals: ['react'],
   },
@@ -580,7 +580,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/keyboard',
+    entry: 'react-ui/events/keyboard',
     global: 'ReactEventsKeyboard',
     externals: ['react'],
   },
@@ -595,7 +595,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/press',
+    entry: 'react-ui/events/press',
     global: 'ReactEventsPress',
     externals: ['react'],
   },
@@ -610,7 +610,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/scroll',
+    entry: 'react-ui/events/scroll',
     global: 'ReactEventsScroll',
     externals: ['react'],
   },
@@ -625,7 +625,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/swipe',
+    entry: 'react-ui/events/swipe',
     global: 'ReactEventsSwipe',
     externals: ['react'],
   },
@@ -640,7 +640,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: NON_FIBER_RENDERER,
-    entry: 'react-events/tap',
+    entry: 'react-ui/events/tap',
     global: 'ReactEventsTap',
     externals: ['react'],
   },

scripts/shared/pathsByLanguageVersion.js

@@ -12,6 +12,7 @@ const esNextPaths = [
   'packages/*/*.js',
   // Source files
   'packages/*/src/**/*.js',
+  'packages/react-ui/*/src/**/*.js',
   'packages/legacy-events/**/*.js',
   'packages/shared/**/*.js',
   // Shims and Flow environment