{"body":"","parents":["5a71cbe7a9e192c23b847be6e0c575b6705f6939"],"files":[{"path":"packages\/react-art\/src\/ReactARTHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-interactions\/accessibility\/README.md","status":"M"},{"path":"packages\/react-interactions\/accessibility\/docs\/TabbableScope.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\/FocusTable.js","status":"M"},{"path":"packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScope-test.internal.js","status":"M"},{"path":"packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js","status":"M"},{"path":"packages\/react-noop-renderer\/src\/createReactNoop.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\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js","status":"M"},{"path":"packages\/shared\/ReactTypes.js","status":"M"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex 247086c64b..4a525677bd 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -461,3 +461,7 @@ export function updateFundamentalComponent(fundamentalInstance) {\n export function unmountFundamentalComponent(fundamentalInstance) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function getInstanceFromNode(node) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex c9425be840..2e9224817a 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -7,7 +7,11 @@\n * @flow\n *\/\n \n-import {precacheFiberNode, updateFiberProps} from '.\/ReactDOMComponentTree';\n+import {\n+ precacheFiberNode,\n+ updateFiberProps,\n+ getClosestInstanceFromNode,\n+} from '.\/ReactDOMComponentTree';\n import {\n createElement,\n createTextNode,\n@@ -976,3 +980,7 @@ export function unmountFundamentalComponent(\n }\n }\n }\n+\n+export function getInstanceFromNode(node: HTMLElement): null | Object {\n+ return getClosestInstanceFromNode(node) || null;\n+}\ndiff --git a\/packages\/react-interactions\/accessibility\/README.md b\/packages\/react-interactions\/accessibility\/README.md\nindex 9e910b1877..582820eec1 100644\n--- a\/packages\/react-interactions\/accessibility\/README.md\n+++ b\/packages\/react-interactions\/accessibility\/README.md\n@@ -42,8 +42,8 @@ function MyComponent(props) {\n );\n }\n \n-\/\/ Using the ref, we can get the host nodes via getScopedNodes()\n-const divs = divOnlyScope.current.getScopedNodes();\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@@ -72,7 +72,17 @@ Returns the parent `ReactScopeInterface` of the scope node or `null` if none exi\n \n Returns the current `props` object of the scope node.\n \n-### getScopedNodes: () => null | Array\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\\ No newline at end of file\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\n+of the scope's sub-tree.\n\\ No newline at end of file\ndiff --git a\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md b\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md\nindex ff2209f6b5..2bafcad00d 100644\n--- a\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md\n+++ b\/packages\/react-interactions\/accessibility\/docs\/TabbableScope.md\n@@ -15,7 +15,7 @@ function FocusableNodeCollector(props) {\n const scope = scopeRef.current;\n \n if (scope) {\n- const tabFocusableNodes = scope.getScopedNodes();\n+ const tabFocusableNodes = scope.getAllNodes();\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 100e747a57..60bd3cd292 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n@@ -66,10 +66,14 @@ export default function FocusContain({\n useLayoutEffect(\n () => {\n const scope = scopeRef.current;\n- if (scope !== null && disabled !== true) {\n- const elems = scope.getScopedNodes();\n- if (elems && elems.indexOf(document.activeElement) === -1) {\n- elems[0].focus();\n+ if (\n+ scope !== null &&\n+ disabled !== true &&\n+ !scope.containsNode(document.activeElement)\n+ ) {\n+ const fistElem = scope.getFirstNode();\n+ if (fistElem !== null) {\n+ fistElem.focus();\n }\n }\n },\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\nindex 898ee8a89e..c3d8e4004e 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusGroup.js\n@@ -30,9 +30,9 @@ type FocusGroupProps = {|\n const {useRef} = React;\n \n function focusGroupItem(cell: ReactScopeMethods, event: KeyboardEvent): void {\n- const tabbableNodes = cell.getScopedNodes();\n- if (tabbableNodes !== null && tabbableNodes.length > 0) {\n- tabbableNodes[0].focus();\n+ const firstScopedNode = cell.getFirstNode();\n+ if (firstScopedNode !== null) {\n+ firstScopedNode.focus();\n event.preventDefault();\n }\n }\n@@ -135,7 +135,7 @@ export function createFocusGroup(\n const tabScope = getGroupProps(currentItem).tabScopeRef.current;\n if (tabScope) {\n const activeNode = document.activeElement;\n- const nodes = tabScope.getScopedNodes();\n+ const nodes = tabScope.getAllNodes();\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\/FocusTable.js b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\nindex ebe1265283..0f5970c1eb 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n@@ -39,9 +39,9 @@ type FocusTableProps = {|\n const {useRef} = React;\n \n function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {\n- const tabbableNodes = cell.getScopedNodes();\n- if (tabbableNodes !== null && tabbableNodes.length > 0) {\n- tabbableNodes[0].focus();\n+ const firstScopedNode = cell.getFirstNode();\n+ if (firstScopedNode !== null) {\n+ firstScopedNode.focus();\n if (event) {\n event.preventDefault();\n }\n@@ -209,7 +209,7 @@ export function createFocusTable(\n const tabScope = getTableProps(currentCell).tabScopeRef.current;\n if (tabScope) {\n const activeNode = document.activeElement;\n- const nodes = tabScope.getScopedNodes();\n+ const nodes = tabScope.getAllNodes();\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__\/TabbableScope-test.internal.js b\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScope-test.internal.js\nindex 3815a35209..6926fa48ad 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScope-test.internal.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/__tests__\/TabbableScope-test.internal.js\n@@ -35,7 +35,7 @@ describe('TabbableScope', () => {\n container = null;\n });\n \n- it('getScopedNodes() works as intended', () => {\n+ it('getAllNodes() works as intended', () => {\n const scopeRef = React.createRef();\n const nodeRefA = React.createRef();\n const nodeRefB = React.createRef();\n@@ -58,7 +58,7 @@ describe('TabbableScope', () => {\n }\n \n ReactDOM.render(, container);\n- let nodes = scopeRef.current.getScopedNodes();\n+ let nodes = scopeRef.current.getAllNodes();\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 1ee49390f2..dd847c117d 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/shared\/getTabbableNodes.js\n@@ -18,7 +18,7 @@ export default function getTabbableNodes(\n number,\n null | HTMLElement,\n ] {\n- const tabbableNodes = scope.getScopedNodes();\n+ const tabbableNodes = scope.getAllNodes();\n if (tabbableNodes === null || tabbableNodes.length === 0) {\n return [null, null, null, 0, null];\n }\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex 4a66a4a216..4b71f19f55 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -491,3 +491,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {\n export function cloneFundamentalInstance(fundamentalInstance) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function getInstanceFromNode(node) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex dd9e7e0e08..4714fb3dd1 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -530,3 +530,7 @@ export function updateFundamentalComponent(fundamentalInstance) {\n export function unmountFundamentalComponent(fundamentalInstance) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function getInstanceFromNode(node) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex a5040ee8d6..9e3a2342bd 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -432,6 +432,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n hidden: instance.hidden,\n };\n },\n+\n+ getInstanceFromNode() {\n+ throw new Error('Not yet implemented.');\n+ },\n };\n \n const hostConfig = useMutation\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScope.js b\/packages\/react-reconciler\/src\/ReactFiberScope.js\nindex 54d6bff3d8..fa8e849a3e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScope.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScope.js\n@@ -14,7 +14,7 @@ import type {\n ReactScopeMethods,\n } from 'shared\/ReactTypes';\n \n-import {getPublicInstance} from '.\/ReactFiberHostConfig';\n+import {getPublicInstance, getInstanceFromNode} from '.\/ReactFiberHostConfig';\n \n import {\n HostComponent,\n@@ -54,6 +54,29 @@ function collectScopedNodes(\n }\n }\n \n+function collectFirstScopedNode(\n+ node: Fiber,\n+ fn: (type: string | Object, props: Object) => boolean,\n+): null | Object {\n+ if (enableScopeAPI) {\n+ if (node.tag === HostComponent) {\n+ const {type, memoizedProps} = node;\n+ if (fn(type, memoizedProps) === true) {\n+ return getPublicInstance(node.stateNode);\n+ }\n+ }\n+ let child = node.child;\n+\n+ if (isFiberSuspenseAndTimedOut(node)) {\n+ child = getSuspenseFallbackChild(node);\n+ }\n+ if (child !== null) {\n+ return collectFirstScopedNodeFromChildren(child, fn);\n+ }\n+ }\n+ return null;\n+}\n+\n function collectScopedNodesFromChildren(\n startingChild: Fiber,\n fn: (type: string | Object, props: Object) => boolean,\n@@ -66,6 +89,21 @@ function collectScopedNodesFromChildren(\n }\n }\n \n+function collectFirstScopedNodeFromChildren(\n+ startingChild: Fiber,\n+ fn: (type: string | Object, props: Object) => boolean,\n+): Object | null {\n+ let child = startingChild;\n+ while (child !== null) {\n+ const scopedNode = collectFirstScopedNode(child, fn);\n+ if (scopedNode !== null) {\n+ return scopedNode;\n+ }\n+ child = child.sibling;\n+ }\n+ return null;\n+}\n+\n function collectNearestScopeMethods(\n node: Fiber,\n scope: ReactScope,\n@@ -151,7 +189,7 @@ export function createScopeMethods(\n const currentFiber = ((instance.fiber: any): Fiber);\n return currentFiber.memoizedProps;\n },\n- getScopedNodes(): null | Array

dillon1000/react

Files changed