{"commit":{"authoredAt":"2020-01-15T09:50:09+00:00","shortRevision":"b6173e643a","subject":"[react-interactions] Add DO_NOT_USE to Scope methods (#17835)","revision":"b6173e643a4311b9b1cf039824b2f3d7b974b8cf","authorEmail":"trueadm@users.noreply.github.com","authorName":"Dominic Gannaway"},"parents":["8aefb1995cc6d46cc29778b0c54bd989478973c0"],"files":[{"status":"M","path":"packages\/react-interactions\/accessibility\/README.md"},{"status":"M","path":"packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusContain.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusGroup.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusManager.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusTable.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScope.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"}],"patch":"diff --git a\/packages\/react-interactions\/accessibility\/README.md b\/packages\/react-interactions\/accessibility\/README.md\nindex 582820eec1..844af1957f 100644\n--- a\/packages\/react-interactions\/accessibility\/README.md\n+++ b\/packages\/react-interactions\/accessibility\/README.md\n@@ -14,74 +14,11 @@ can be found [here](.\/docs).\n \n Note: React Scopes require the internal React flag `enableScopeAPI`.\n \n-When creating a scope, a query function is required. The query function is used\n-when collecting host nodes that match the criteria of the query function.\n-\n-```jsx\n-\/\/ This query function only matches host nodes that have the type of \"div\"\n-const queryFunction = (type: string, props: Object): boolean => {\n- if (type === 'div') {\n- return true;\n- }\n- return false;\n-};\n-\n-\/\/ Create the scope with the queryFunction above\n-const DivOnlyScope = React.unstable_createScope(queryFunction);\n-\n-\/\/ We can now use this in our components. We need to attach\n-\/\/ a ref so we can get the matching host nodes.\n-function MyComponent(props) {\n- const divOnlyScope = useRef(null);\n- return (\n- \n-

DIV 1<\/div>\n-

DIV 2<\/div>\n-

DIV 3<\/div>\n- <\/DivOnlyScope>\n- );\n-}\n-\n-\/\/ Using the ref, we can get the host nodes via getAllNodes()\n-const divs = divOnlyScope.current.getAllNodes();\n-\n-\/\/ [

DIV 1<\/div>,

DIV 2<\/div>,

DIV 3<\/div>]\n-console.log(divs);\n-```\n-\n ## React Scope Interface\n \n Scopes require a `ref` to access the internal interface of a particular scope.\n The internal interface (`ReactScopeInterface`) exposes the following scope API:\n \n-### getChildren: () => null | Array\n-\n-Returns an array of all child `ReactScopeInterface` nodes that are\n-of scopes of the same type. Returns `null` if there are no child scope nodes.\n-\n-### getChildrenFromRoot: () => null | Array\n-\n-Similar to `getChildren`, except this applies the same traversal from the root of the\n-React internal tree instead of from the scope node position.\n-\n-### getParent: () => null | ReactScopeInterface\n-\n-Returns the parent `ReactScopeInterface` of the scope node or `null` if none exists.\n-\n-### getProps: () => Object\n-\n-Returns the current `props` object of the scope node.\n-\n-### getAllNodes: () => null | Array\n-\n-Returns an array of all child host nodes that successfully match when queried using the\n-query function passed to the scope. Returns `null` if there are no matching host nodes.\n-\n-### getFirstNode: () => null | HTMLElement\n-\n-Returns the first child host node that successfully matches when queried using the\n-query function passed to the scope. Returns `null` if there is no matching host node.\n-\n ### containsNode: (node: HTMLElement) => boolean\n \n Returns `true` or `false` depending on if the given `HTMLElement` is a descendant\ndiff --git a\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md b\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md\nindex 0c942ec428..47fc5dff35 100644\n--- a\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md\n+++ b\/packages\/react-interactions\/accessibility\/docs\/TabbableScopeQuery.md\n@@ -15,7 +15,7 @@ function FocusableNodeCollector(props) {\n const scope = scopeRef.current;\n \n if (scope) {\n- const tabFocusableNodes = scope.queryAllNodes(tabbableScopeQuery);\n+ const tabFocusableNodes = scope.DO_NOT_USE_queryAllNodes(tabbableScopeQuery);\n if (tabFocusableNodes && props.onFocusableNodes) {\n props.onFocusableNodes(tabFocusableNodes);\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\nindex 78316af939..21c0b3cc89 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n@@ -71,7 +71,7 @@ export default function FocusContain({\n disabled !== true &&\n !scope.containsNode(document.activeElement)\n ) {\n- const fistElem = scope.queryFirstNode(scopeQuery);\n+ const fistElem = scope.DO_NOT_USE_queryFirstNode(scopeQuery);\n if (fistElem !== null) {\n fistElem.focus();\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\nindex ad677b9d6a..8ac102fc07 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n@@ -35,7 +35,7 @@ function focusGroupItem(\n cell: ReactScopeMethods,\n event: KeyboardEvent,\n ): void {\n- const firstScopedNode = cell.queryFirstNode(scopeQuery);\n+ const firstScopedNode = cell.DO_NOT_USE_queryFirstNode(scopeQuery);\n if (firstScopedNode !== null) {\n firstScopedNode.focus();\n event.preventDefault();\n@@ -46,7 +46,7 @@ function getPreviousGroupItem(\n group: ReactScopeMethods,\n currentItem: ReactScopeMethods,\n ): null | ReactScopeMethods {\n- const items = group.getChildren();\n+ const items = group.DO_NOT_USE_getChildren();\n if (items !== null) {\n const currentItemIndex = items.indexOf(currentItem);\n const wrap = getGroupProps(currentItem).wrap;\n@@ -63,7 +63,7 @@ function getNextGroupItem(\n group: ReactScopeMethods,\n currentItem: ReactScopeMethods,\n ): null | ReactScopeMethods {\n- const items = group.getChildren();\n+ const items = group.DO_NOT_USE_getChildren();\n if (items !== null) {\n const currentItemIndex = items.indexOf(currentItem);\n const wrap = getGroupProps(currentItem).wrap;\n@@ -78,9 +78,9 @@ function getNextGroupItem(\n }\n \n function getGroupProps(currentCell: ReactScopeMethods): Object {\n- const group = currentCell.getParent();\n+ const group = currentCell.DO_NOT_USE_getParent();\n if (group !== null) {\n- const groupProps = group.getProps();\n+ const groupProps = group.DO_NOT_USE_getProps();\n if (groupProps && groupProps.type === 'group') {\n return groupProps;\n }\n@@ -125,8 +125,8 @@ export function createFocusGroup(\n onKeyDown(event: KeyboardEvent): void {\n const currentItem = scopeRef.current;\n if (currentItem !== null) {\n- const group = currentItem.getParent();\n- const groupProps = group && group.getProps();\n+ const group = currentItem.DO_NOT_USE_getParent();\n+ const groupProps = group && group.DO_NOT_USE_getProps();\n if (group !== null && groupProps.type === 'group') {\n const portrait = groupProps.portrait;\n const key = event.key;\n@@ -134,10 +134,12 @@ export function createFocusGroup(\n if (key === 'Tab') {\n const tabScopeQuery = getGroupProps(currentItem).tabScopeQuery;\n if (tabScopeQuery) {\n- const groupScope = currentItem.getParent();\n+ const groupScope = currentItem.DO_NOT_USE_getParent();\n if (groupScope) {\n const activeNode = document.activeElement;\n- const nodes = groupScope.queryAllNodes(tabScopeQuery);\n+ const nodes = groupScope.DO_NOT_USE_queryAllNodes(\n+ tabScopeQuery,\n+ );\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n if (node !== activeNode) {\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusManager.js b\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\nindex 861f91b594..1fc4fd37e0 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusManager.js\n@@ -16,7 +16,7 @@ export function focusFirst(\n scopeQuery: (type: string | Object, props: Object) => boolean,\n scope: ReactScopeMethods,\n ): void {\n- const firstNode = scope.queryFirstNode(scopeQuery);\n+ const firstNode = scope.DO_NOT_USE_queryFirstNode(scopeQuery);\n if (firstNode) {\n focusElem(firstNode);\n }\n@@ -101,7 +101,7 @@ export function focusPrevious(\n export function getNextScope(\n scope: ReactScopeMethods,\n ): null | ReactScopeMethods {\n- const allScopes = scope.getChildrenFromRoot();\n+ const allScopes = scope.DO_NOT_USE_getChildrenFromRoot();\n if (allScopes === null) {\n return null;\n }\n@@ -115,7 +115,7 @@ export function getNextScope(\n export function getPreviousScope(\n scope: ReactScopeMethods,\n ): null | ReactScopeMethods {\n- const allScopes = scope.getChildrenFromRoot();\n+ const allScopes = scope.DO_NOT_USE_getChildrenFromRoot();\n if (allScopes === null) {\n return null;\n }\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\nindex aea24b80ed..bd05855bc7 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n@@ -42,7 +42,7 @@ function focusScope(\n cell: ReactScopeMethods,\n event?: KeyboardEvent,\n ): void {\n- const firstScopedNode = cell.queryFirstNode(scopeQuery);\n+ const firstScopedNode = cell.DO_NOT_USE_queryFirstNode(scopeQuery);\n if (firstScopedNode !== null) {\n firstScopedNode.focus();\n if (event) {\n@@ -58,13 +58,13 @@ function focusCellByColumnIndex(\n columnIndex: number,\n event?: KeyboardEvent,\n ): void {\n- const cells = row.getChildren();\n+ const cells = row.DO_NOT_USE_getChildren();\n if (cells !== null) {\n let colSize = 0;\n for (let i = 0; i < cells.length; i++) {\n const cell = cells[i];\n if (cell) {\n- colSize += cell.getProps().colSpan || 1;\n+ colSize += cell.DO_NOT_USE_getProps().colSpan || 1;\n if (colSize > columnIndex) {\n focusScope(scopeQuery, cell, event);\n return;\n@@ -84,7 +84,7 @@ function getCellIndexes(\n if (cell === currentCell) {\n return [i, i + totalColSpan];\n }\n- const colSpan = cell.getProps().colSpan;\n+ const colSpan = cell.DO_NOT_USE_getProps().colSpan;\n if (colSpan) {\n totalColSpan += colSpan - 1;\n }\n@@ -93,9 +93,9 @@ function getCellIndexes(\n }\n \n function getRowCells(currentCell: ReactScopeMethods) {\n- const row = currentCell.getParent();\n- if (row !== null && row.getProps().type === 'row') {\n- const cells = row.getChildren();\n+ const row = currentCell.DO_NOT_USE_getParent();\n+ if (row !== null && row.DO_NOT_USE_getProps().type === 'row') {\n+ const cells = row.DO_NOT_USE_getChildren();\n if (cells !== null) {\n const [rowIndex, rowIndexWithColSpan] = getCellIndexes(\n cells,\n@@ -108,11 +108,11 @@ function getRowCells(currentCell: ReactScopeMethods) {\n }\n \n function getRows(currentCell: ReactScopeMethods) {\n- const row = currentCell.getParent();\n- if (row !== null && row.getProps().type === 'row') {\n- const table = row.getParent();\n- if (table !== null && table.getProps().type === 'table') {\n- const rows = table.getChildren();\n+ const row = currentCell.DO_NOT_USE_getParent();\n+ if (row !== null && row.DO_NOT_USE_getProps().type === 'row') {\n+ const table = row.DO_NOT_USE_getParent();\n+ if (table !== null && table.DO_NOT_USE_getProps().type === 'table') {\n+ const rows = table.DO_NOT_USE_getChildren();\n if (rows !== null) {\n const columnIndex = rows.indexOf(row);\n return [rows, columnIndex];\n@@ -127,11 +127,11 @@ function triggerNavigateOut(\n direction: 'left' | 'right' | 'up' | 'down',\n event,\n ): void {\n- const row = currentCell.getParent();\n- if (row !== null && row.getProps().type === 'row') {\n- const table = row.getParent();\n+ const row = currentCell.DO_NOT_USE_getParent();\n+ if (row !== null && row.DO_NOT_USE_getProps().type === 'row') {\n+ const table = row.DO_NOT_USE_getParent();\n if (table !== null) {\n- const props = table.getProps();\n+ const props = table.DO_NOT_USE_getProps();\n const onKeyboardOut = props.onKeyboardOut;\n if (props.type === 'table' && typeof onKeyboardOut === 'function') {\n onKeyboardOut(direction, event);\n@@ -143,11 +143,11 @@ function triggerNavigateOut(\n }\n \n function getTableProps(currentCell: ReactScopeMethods): Object {\n- const row = currentCell.getParent();\n- if (row !== null && row.getProps().type === 'row') {\n- const table = row.getParent();\n+ const row = currentCell.DO_NOT_USE_getParent();\n+ if (row !== null && row.DO_NOT_USE_getProps().type === 'row') {\n+ const table = row.DO_NOT_USE_getParent();\n if (table !== null) {\n- return table.getProps();\n+ return table.DO_NOT_USE_getProps();\n }\n }\n return {};\n@@ -207,12 +207,14 @@ export function createFocusTable(\n if (key === 'Tab') {\n const tabScopeQuery = getTableProps(currentCell).tabScopeQuery;\n if (tabScopeQuery) {\n- const rowScope = currentCell.getParent();\n+ const rowScope = currentCell.DO_NOT_USE_getParent();\n if (rowScope) {\n- const tableScope = rowScope.getParent();\n+ const tableScope = rowScope.DO_NOT_USE_getParent();\n if (tableScope) {\n const activeNode = document.activeElement;\n- const nodes = tableScope.queryAllNodes(tabScopeQuery);\n+ const nodes = tableScope.DO_NOT_USE_queryAllNodes(\n+ tabScopeQuery,\n+ );\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n if (node !== activeNode) {\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js b\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js\nindex 1a286330c7..a3cd9b2ee6 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScopeQuery-test.internal.js\n@@ -35,7 +35,7 @@ describe('TabbableScopeQuery', () => {\n container = null;\n });\n \n- it('queryAllNodes() works as intended', () => {\n+ it('DO_NOT_USE_queryAllNodes() works as intended', () => {\n const scopeRef = React.createRef();\n const nodeRefA = React.createRef();\n const nodeRefB = React.createRef();\n@@ -60,7 +60,7 @@ describe('TabbableScopeQuery', () => {\n }\n \n ReactDOM.render(, container);\n- let nodes = scopeRef.current.queryAllNodes(tabbableScopeQuery);\n+ let nodes = scopeRef.current.DO_NOT_USE_queryAllNodes(tabbableScopeQuery);\n expect(nodes).toEqual([\n nodeRefA.current,\n nodeRefB.current,\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js b\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js\nindex ed6ec67ba6..7af8612e5f 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js\n@@ -19,7 +19,7 @@ export default function getTabbableNodes(\n number,\n null | HTMLElement,\n ] {\n- const tabbableNodes = scope.queryAllNodes(scopeQuery);\n+ const tabbableNodes = scope.DO_NOT_USE_queryAllNodes(scopeQuery);\n if (tabbableNodes === null || tabbableNodes.length === 0) {\n return [null, null, null, 0, null];\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScope.js b\/packages\/react-reconciler\/src\/ReactFiberScope.js\nindex 72bbaa6af3..a593ef22af 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScope.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScope.js\n@@ -12,6 +12,7 @@ import type {\n ReactScope,\n ReactScopeInstance,\n ReactScopeMethods,\n+ ReactContext,\n } from 'shared\/ReactTypes';\n \n import {getPublicInstance, getInstanceFromNode} from '.\/ReactFiberHostConfig';\n@@ -20,6 +21,7 @@ import {\n HostComponent,\n SuspenseComponent,\n ScopeComponent,\n+ ContextProvider,\n } from 'shared\/ReactWorkTags';\n import {enableScopeAPI} from 'shared\/ReactFeatureFlags';\n \n@@ -142,6 +144,38 @@ function collectNearestChildScopeMethods(\n }\n }\n \n+function collectNearestContextValues(\n+ node: Fiber,\n+ context: ReactContext,\n+ childContextValues: Array,\n+): void {\n+ if (node.tag === ContextProvider && node.type._context === context) {\n+ const contextValue = node.memoizedProps.value;\n+ childContextValues.push(contextValue);\n+ } else {\n+ let child = node.child;\n+\n+ if (isFiberSuspenseAndTimedOut(node)) {\n+ child = getSuspenseFallbackChild(node);\n+ }\n+ if (child !== null) {\n+ collectNearestChildContextValues(child, context, childContextValues);\n+ }\n+ }\n+}\n+\n+function collectNearestChildContextValues(\n+ startingChild: Fiber | null,\n+ context: ReactContext,\n+ childContextValues: Array,\n+): void {\n+ let child = startingChild;\n+ while (child !== null) {\n+ collectNearestContextValues(child, context, childContextValues);\n+ child = child.sibling;\n+ }\n+}\n+\n function isValidScopeNode(node, scope) {\n return (\n node.tag === ScopeComponent &&\n@@ -155,7 +189,7 @@ export function createScopeMethods(\n instance: ReactScopeInstance,\n ): ReactScopeMethods {\n return {\n- getChildren(): null | Array {\n+ DO_NOT_USE_getChildren(): null | Array {\n const currentFiber = ((instance.fiber: any): Fiber);\n const child = currentFiber.child;\n const childrenScopes = [];\n@@ -164,7 +198,7 @@ export function createScopeMethods(\n }\n return childrenScopes.length === 0 ? null : childrenScopes;\n },\n- getChildrenFromRoot(): null | Array {\n+ DO_NOT_USE_getChildrenFromRoot(): null | Array {\n const currentFiber = ((instance.fiber: any): Fiber);\n let node = currentFiber;\n while (node !== null) {\n@@ -181,7 +215,7 @@ export function createScopeMethods(\n collectNearestChildScopeMethods(node.child, scope, childrenScopes);\n return childrenScopes.length === 0 ? null : childrenScopes;\n },\n- getParent(): null | ReactScopeMethods {\n+ DO_NOT_USE_getParent(): null | ReactScopeMethods {\n let node = ((instance.fiber: any): Fiber).return;\n while (node !== null) {\n if (node.tag === ScopeComponent && node.type === scope) {\n@@ -191,11 +225,11 @@ export function createScopeMethods(\n }\n return null;\n },\n- getProps(): Object {\n+ DO_NOT_USE_getProps(): Object {\n const currentFiber = ((instance.fiber: any): Fiber);\n return currentFiber.memoizedProps;\n },\n- queryAllNodes(\n+ DO_NOT_USE_queryAllNodes(\n fn: (type: string | Object, props: Object, instance: Object) => boolean,\n ): null | Array

dillon1000/react

Files changed