[react-interactions] Adds more experimental Scope API methods (#17042)

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -461,3 +461,7 @@ export function updateFundamentalComponent(fundamentalInstance) {
 export function unmountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -7,7 +7,11 @@
  * @flow
  */
 
-import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
+import {
+  precacheFiberNode,
+  updateFiberProps,
+  getClosestInstanceFromNode,
+} from './ReactDOMComponentTree';
 import {
   createElement,
   createTextNode,
@@ -976,3 +980,7 @@ export function unmountFundamentalComponent(
     }
   }
 }
+
+export function getInstanceFromNode(node: HTMLElement): null | Object {
+  return getClosestInstanceFromNode(node) || null;
+}

packages/react-interactions/accessibility/README.md

@@ -42,8 +42,8 @@ function MyComponent(props) {
   );
 }
 
-// Using the ref, we can get the host nodes via getScopedNodes()
-const divs = divOnlyScope.current.getScopedNodes();
+// Using the ref, we can get the host nodes via getAllNodes()
+const divs = divOnlyScope.current.getAllNodes();
 
 // [<div>DIV 1</div>, <div>DIV 2</div>, <div>DIV 3</div>]
 console.log(divs);
@@ -72,7 +72,17 @@ Returns the parent `ReactScopeInterface` of the scope node or `null` if none exi
 
 Returns the current `props` object of the scope node.
 
-### getScopedNodes: () => null | Array<HTMLElement>
+### getAllNodes: () => null | Array<HTMLElement>
 
 Returns an array of all child host nodes that successfully match when queried using the
-query function passed to the scope. Returns `null` if there are no matching host nodes.
+query function passed to the scope. Returns `null` if there are no matching host nodes.
+
+### getFirstNode: () => null | HTMLElement
+
+Returns the first child host node that successfully matches when queried using the
+query function passed to the scope. Returns `null` if there is no matching host node.
+
+### containsNode: (node: HTMLElement) => boolean
+
+Returns `true` or `false` depending on if the given `HTMLElement` is a descendant
+of the scope's sub-tree.

packages/react-interactions/accessibility/docs/TabbableScope.md

@@ -15,7 +15,7 @@ function FocusableNodeCollector(props) {
     const scope = scopeRef.current;
 
     if (scope) {
-      const tabFocusableNodes = scope.getScopedNodes();
+      const tabFocusableNodes = scope.getAllNodes();
       if (tabFocusableNodes && props.onFocusableNodes) {
         props.onFocusableNodes(tabFocusableNodes);
       }

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

@@ -66,10 +66,14 @@ export default function FocusContain({
   useLayoutEffect(
     () => {
       const scope = scopeRef.current;
-      if (scope !== null && disabled !== true) {
-        const elems = scope.getScopedNodes();
-        if (elems && elems.indexOf(document.activeElement) === -1) {
-          elems[0].focus();
+      if (
+        scope !== null &&
+        disabled !== true &&
+        !scope.containsNode(document.activeElement)
+      ) {
+        const fistElem = scope.getFirstNode();
+        if (fistElem !== null) {
+          fistElem.focus();
         }
       }
     },

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

@@ -30,9 +30,9 @@ type FocusGroupProps = {|
 const {useRef} = React;
 
 function focusGroupItem(cell: ReactScopeMethods, event: KeyboardEvent): void {
-  const tabbableNodes = cell.getScopedNodes();
-  if (tabbableNodes !== null && tabbableNodes.length > 0) {
-    tabbableNodes[0].focus();
+  const firstScopedNode = cell.getFirstNode();
+  if (firstScopedNode !== null) {
+    firstScopedNode.focus();
     event.preventDefault();
   }
 }
@@ -135,7 +135,7 @@ export function createFocusGroup(
               const tabScope = getGroupProps(currentItem).tabScopeRef.current;
               if (tabScope) {
                 const activeNode = document.activeElement;
-                const nodes = tabScope.getScopedNodes();
+                const nodes = tabScope.getAllNodes();
                 for (let i = 0; i < nodes.length; i++) {
                   const node = nodes[i];
                   if (node !== activeNode) {

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

@@ -39,9 +39,9 @@ type FocusTableProps = {|
 const {useRef} = React;
 
 function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {
-  const tabbableNodes = cell.getScopedNodes();
-  if (tabbableNodes !== null && tabbableNodes.length > 0) {
-    tabbableNodes[0].focus();
+  const firstScopedNode = cell.getFirstNode();
+  if (firstScopedNode !== null) {
+    firstScopedNode.focus();
     if (event) {
       event.preventDefault();
     }
@@ -209,7 +209,7 @@ export function createFocusTable(
           const tabScope = getTableProps(currentCell).tabScopeRef.current;
           if (tabScope) {
             const activeNode = document.activeElement;
-            const nodes = tabScope.getScopedNodes();
+            const nodes = tabScope.getAllNodes();
             for (let i = 0; i < nodes.length; i++) {
               const node = nodes[i];
               if (node !== activeNode) {

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

@@ -35,7 +35,7 @@ describe('TabbableScope', () => {
       container = null;
     });
 
-    it('getScopedNodes() works as intended', () => {
+    it('getAllNodes() works as intended', () => {
       const scopeRef = React.createRef();
       const nodeRefA = React.createRef();
       const nodeRefB = React.createRef();
@@ -58,7 +58,7 @@ describe('TabbableScope', () => {
       }
 
       ReactDOM.render(<Test />, container);
-      let nodes = scopeRef.current.getScopedNodes();
+      let nodes = scopeRef.current.getAllNodes();
       expect(nodes).toEqual([
         nodeRefA.current,
         nodeRefB.current,

packages/react-interactions/accessibility/src/shared/getTabbableNodes.js

@@ -18,7 +18,7 @@ export default function getTabbableNodes(
   number,
   null | HTMLElement,
 ] {
-  const tabbableNodes = scope.getScopedNodes();
+  const tabbableNodes = scope.getAllNodes();
   if (tabbableNodes === null || tabbableNodes.length === 0) {
     return [null, null, null, 0, null];
   }

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -491,3 +491,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {
 export function cloneFundamentalInstance(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -530,3 +530,7 @@ export function updateFundamentalComponent(fundamentalInstance) {
 export function unmountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -432,6 +432,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         hidden: instance.hidden,
       };
     },
+
+    getInstanceFromNode() {
+      throw new Error('Not yet implemented.');
+    },
   };
 
   const hostConfig = useMutation

packages/react-reconciler/src/ReactFiberScope.js

@@ -14,7 +14,7 @@ import type {
   ReactScopeMethods,
 } from 'shared/ReactTypes';
 
-import {getPublicInstance} from './ReactFiberHostConfig';
+import {getPublicInstance, getInstanceFromNode} from './ReactFiberHostConfig';
 
 import {
   HostComponent,
@@ -54,6 +54,29 @@ function collectScopedNodes(
   }
 }
 
+function collectFirstScopedNode(
+  node: Fiber,
+  fn: (type: string | Object, props: Object) => boolean,
+): null | Object {
+  if (enableScopeAPI) {
+    if (node.tag === HostComponent) {
+      const {type, memoizedProps} = node;
+      if (fn(type, memoizedProps) === true) {
+        return getPublicInstance(node.stateNode);
+      }
+    }
+    let child = node.child;
+
+    if (isFiberSuspenseAndTimedOut(node)) {
+      child = getSuspenseFallbackChild(node);
+    }
+    if (child !== null) {
+      return collectFirstScopedNodeFromChildren(child, fn);
+    }
+  }
+  return null;
+}
+
 function collectScopedNodesFromChildren(
   startingChild: Fiber,
   fn: (type: string | Object, props: Object) => boolean,
@@ -66,6 +89,21 @@ function collectScopedNodesFromChildren(
   }
 }
 
+function collectFirstScopedNodeFromChildren(
+  startingChild: Fiber,
+  fn: (type: string | Object, props: Object) => boolean,
+): Object | null {
+  let child = startingChild;
+  while (child !== null) {
+    const scopedNode = collectFirstScopedNode(child, fn);
+    if (scopedNode !== null) {
+      return scopedNode;
+    }
+    child = child.sibling;
+  }
+  return null;
+}
+
 function collectNearestScopeMethods(
   node: Fiber,
   scope: ReactScope,
@@ -151,7 +189,7 @@ export function createScopeMethods(
       const currentFiber = ((instance.fiber: any): Fiber);
       return currentFiber.memoizedProps;
     },
-    getScopedNodes(): null | Array<Object> {
+    getAllNodes(): null | Array<Object> {
       const currentFiber = ((instance.fiber: any): Fiber);
       const child = currentFiber.child;
       const scopedNodes = [];
@@ -160,5 +198,27 @@ export function createScopeMethods(
       }
       return scopedNodes.length === 0 ? null : scopedNodes;
     },
+    getFirstNode(): null | Object {
+      const currentFiber = ((instance.fiber: any): Fiber);
+      const child = currentFiber.child;
+      if (child !== null) {
+        return collectFirstScopedNodeFromChildren(child, fn);
+      }
+      return null;
+    },
+    containsNode(node: Object): boolean {
+      let fiber = getInstanceFromNode(node);
+      while (fiber !== null) {
+        if (
+          fiber.tag === ScopeComponent &&
+          fiber.type === scope &&
+          fiber.stateNode === instance
+        ) {
+          return true;
+        }
+        fiber = fiber.return;
+      }
+      return false;
+    },
   };
 }