[react-interactions] Make FocusList bundle (#16876)

Author: trueadm

packages/react-interactions/accessibility/focus-list.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/FocusList');

packages/react-interactions/accessibility/src/FocusList.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactScopeMethods} from 'shared/ReactTypes';
+import type {ReactScope, ReactScopeMethods} from 'shared/ReactTypes';
 import type {KeyboardEvent} from 'react-interactions/events/keyboard';
 
 import React from 'react';
@@ -59,10 +59,8 @@ function getNextListItem(
   return null;
 }
 
-export function createFocusList(
-  scopeImpl: (type: string, props: Object) => boolean,
-): Array<React.Component> {
-  const TableScope = React.unstable_createScope(scopeImpl);
+export function createFocusList(scope: ReactScope): Array<React.Component> {
+  const TableScope = React.unstable_createScope(scope.fn);
 
   function List({children, portrait}): FocusListProps {
     return (

packages/react-interactions/accessibility/src/FocusTable.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactScopeMethods} from 'shared/ReactTypes';
+import type {ReactScope, ReactScopeMethods} from 'shared/ReactTypes';
 import type {KeyboardEvent} from 'react-interactions/events/keyboard';
 
 import React from 'react';
@@ -127,10 +127,8 @@ function triggerNavigateOut(
   }
 }
 
-export function createFocusTable(
-  scopeImpl: (type: string, props: Object) => boolean,
-): Array<React.Component> {
-  const TableScope = React.unstable_createScope(scopeImpl);
+export function createFocusTable(scope: ReactScope): Array<React.Component> {
+  const TableScope = React.unstable_createScope(scope.fn);
 
   function Table({children, onKeyboardOut, id}): FocusTableProps {
     return (

packages/react-interactions/accessibility/src/TabbableScope.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 
-export const tabFocusableImpl = (type: string, props: Object): boolean => {
+const tabFocusableImpl = (type: string, props: Object): boolean => {
   if (props.tabIndex === -1 || props.disabled) {
     return false;
   }

packages/react-interactions/accessibility/src/__tests__/FocusList-test.internal.js

@@ -12,7 +12,7 @@ import {createEventTarget} from 'react-interactions/events/src/dom/testing-libra
 let React;
 let ReactFeatureFlags;
 let createFocusList;
-let tabFocusableImpl;
+let TabbableScope;
 
 describe('FocusList', () => {
   beforeEach(() => {
@@ -21,7 +21,7 @@ describe('FocusList', () => {
     ReactFeatureFlags.enableScopeAPI = true;
     ReactFeatureFlags.enableFlareAPI = true;
     createFocusList = require('../FocusList').createFocusList;
-    tabFocusableImpl = require('../TabbableScope').tabFocusableImpl;
+    TabbableScope = require('../TabbableScope').default;
     React = require('react');
   });
 
@@ -41,7 +41,7 @@ describe('FocusList', () => {
     });
 
     function createFocusListComponent() {
-      const [FocusList, FocusItem] = createFocusList(tabFocusableImpl);
+      const [FocusList, FocusItem] = createFocusList(TabbableScope);
 
       return ({portrait}) => (
         <FocusList portrait={portrait}>

packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js

@@ -12,7 +12,7 @@ import {createEventTarget} from 'react-interactions/events/src/dom/testing-libra
 let React;
 let ReactFeatureFlags;
 let createFocusTable;
-let tabFocusableImpl;
+let TabbableScope;
 
 describe('FocusTable', () => {
   beforeEach(() => {
@@ -21,7 +21,7 @@ describe('FocusTable', () => {
     ReactFeatureFlags.enableScopeAPI = true;
     ReactFeatureFlags.enableFlareAPI = true;
     createFocusTable = require('../FocusTable').createFocusTable;
-    tabFocusableImpl = require('../TabbableScope').tabFocusableImpl;
+    TabbableScope = require('../TabbableScope').default;
     React = require('react');
   });
 
@@ -42,7 +42,7 @@ describe('FocusTable', () => {
 
     function createFocusTableComponent() {
       const [FocusTable, FocusTableRow, FocusTableCell] = createFocusTable(
-        tabFocusableImpl,
+        TabbableScope,
       );
 
       return ({onKeyboardOut, id}) => (

scripts/rollup/bundles.js

@@ -706,6 +706,18 @@ const bundles = [
     global: 'ReactTabbableScope',
     externals: ['react'],
   },
+
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    moduleType: NON_FIBER_RENDERER,
+    entry: 'react-interactions/accessibility/focus-list',
+    global: 'ReactFocusList',
+    externals: [
+      'react',
+      'react-interactions/events/keyboard',
+      'react-interactions/accessibility/tabbable-scope',
+    ],
+  },
 ];
 
 const fbBundleExternalsMap = {