diff --git a/packages/react-interactions/accessibility/focus-list.js b/packages/react-interactions/accessibility/focus-list.js new file mode 100644 index 0000000000000..3511cf818ed99 --- /dev/null +++ b/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'); diff --git a/packages/react-interactions/accessibility/src/FocusList.js b/packages/react-interactions/accessibility/src/FocusList.js index fa1479f25928a..0a6ffd3fee3d1 100644 --- a/packages/react-interactions/accessibility/src/FocusList.js +++ b/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 { - const TableScope = React.unstable_createScope(scopeImpl); +export function createFocusList(scope: ReactScope): Array { + const TableScope = React.unstable_createScope(scope.fn); function List({children, portrait}): FocusListProps { return ( diff --git a/packages/react-interactions/accessibility/src/FocusTable.js b/packages/react-interactions/accessibility/src/FocusTable.js index 4e6f405a0d9aa..d79451daebb36 100644 --- a/packages/react-interactions/accessibility/src/FocusTable.js +++ b/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 { - const TableScope = React.unstable_createScope(scopeImpl); +export function createFocusTable(scope: ReactScope): Array { + const TableScope = React.unstable_createScope(scope.fn); function Table({children, onKeyboardOut, id}): FocusTableProps { return ( diff --git a/packages/react-interactions/accessibility/src/TabbableScope.js b/packages/react-interactions/accessibility/src/TabbableScope.js index 7c025f63afeb9..5cf27277add29 100644 --- a/packages/react-interactions/accessibility/src/TabbableScope.js +++ b/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; } diff --git a/packages/react-interactions/accessibility/src/__tests__/FocusList-test.internal.js b/packages/react-interactions/accessibility/src/__tests__/FocusList-test.internal.js index 9a0a7be6f2760..429b6a0d7bb0e 100644 --- a/packages/react-interactions/accessibility/src/__tests__/FocusList-test.internal.js +++ b/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}) => ( diff --git a/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js b/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js index d261775bf4e20..ea3e463ef451b 100644 --- a/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js +++ b/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}) => ( diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 14b6c12689738..1d36a8c163a7a 100644 --- a/scripts/rollup/bundles.js +++ b/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 = {