Add scrollIntoView to fragment instances

This adds `scrollIntoView(alignToTop)`. It doesn't yet support `scrollIntoView(options)`.

Cases:
- No host children: Without host children, we represent the virtual space of the Fragment by attempting to scroll to the nearest edge by using its siblings. If the preferred sibling is not found, we'll try the other side, and then the parent.
- 1 host child: The simplest case where its the equivalent of calling the method on the child element directly
- Multiple host children in same scroll container:
    - Here we find the first child in the list for `alignToTop=true|undefined` or the last child `alignToTop=false`. We call scroll on that element.
- Multiple host children in multiple scroll containers (fixed positioning or portal-ed into other containers):
	- In order to handle the possibility of children being fixed or portal-ed, where the assumption is that isn't where you want to stop scroll, we work through groups of host children by scroll container and may scroll to multiple elements.
	- `scrollIntoView` will only be called again if scrolling to the next element wouldn't scroll the previous one out of the viewport.
	- `alignToTop=true` means iterate in reverse, scrolling the first child of each container
	- `alignToTop=false` means iterate in normal order, scrolling the last child of each container

Author: jackpope

fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js

@@ -3,7 +3,7 @@ import Fixture from '../../Fixture';
 
 const React = window.React;
 
-const {Fragment, useEffect, useRef, useState} = React;
+const {Fragment, useRef} = React;
 
 export default function FocusCase() {
   const fragmentRef = useRef(null);

fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js

@@ -2,7 +2,7 @@ import TestCase from '../../TestCase';
 import Fixture from '../../Fixture';
 
 const React = window.React;
-const {Fragment, useEffect, useRef, useState} = React;
+const {Fragment, useRef, useState} = React;
 
 export default function GetClientRectsCase() {
   const fragmentRef = useRef(null);

fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js

@@ -0,0 +1,191 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+import ScrollIntoViewCaseComplex from './ScrollIntoViewCaseComplex';
+import ScrollIntoViewCaseSimple from './ScrollIntoViewCaseSimple';
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment, useRef, useState, useEffect} = React;
+const ReactDOM = window.ReactDOM;
+
+function Controls({
+  alignToTop,
+  setAlignToTop,
+  scrollVertical,
+  exampleType,
+  setExampleType,
+}) {
+  return (
+    <div>
+      <label>
+        Example Type:
+        <select
+          value={exampleType}
+          onChange={e => setExampleType(e.target.value)}>
+          <option value="simple">Simple</option>
+          <option value="multiple">Multiple Scroll Containers</option>
+          <option value="horizontal">Horizontal</option>
+          <option value="empty">Empty Fragment</option>
+        </select>
+      </label>
+      <div>
+        <label>
+          Align to Top:
+          <input
+            type="checkbox"
+            checked={alignToTop}
+            onChange={e => setAlignToTop(e.target.checked)}
+          />
+        </label>
+      </div>
+      <div>
+        <button onClick={scrollVertical}>scrollIntoView()</button>
+      </div>
+    </div>
+  );
+}
+
+export default function ScrollIntoViewCase() {
+  const [exampleType, setExampleType] = useState('simple');
+  const [alignToTop, setAlignToTop] = useState(true);
+  const [caseInViewport, setCaseInViewport] = useState(false);
+  const fragmentRef = useRef(null);
+  const testCaseRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+
+  const scrollVertical = () => {
+    fragmentRef.current.scrollIntoView(alignToTop);
+  };
+
+  const scrollVerticalNoChildren = () => {
+    noChildRef.current.scrollIntoView(alignToTop);
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setCaseInViewport(true);
+        } else {
+          setCaseInViewport(false);
+        }
+      });
+    });
+    testCaseRef.current.observeUsing(observer);
+
+    const lastRef = testCaseRef.current;
+    return () => {
+      lastRef.unobserveUsing(observer);
+      observer.disconnect();
+    };
+  });
+
+  return (
+    <Fragment ref={testCaseRef}>
+      <TestCase title="ScrollIntoView">
+        <TestCase.Steps>
+          <li>Toggle alignToTop and click the buttons to scroll</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          <p>When the Fragment has children:</p>
+          <p>
+            The simple path is that all children are in the same scroll
+            container. If alignToTop=true|undefined, we will select the first
+            Fragment host child to call scrollIntoView on. Otherwise we'll call
+            on the last host child.
+          </p>
+          <p>
+            In the case of fixed elements and inserted elements or portals
+            causing fragment siblings to be in different scroll containers, we
+            split up the host children into groups of scroll containers. If we
+            hit a fixed element, we'll always attempt to scroll on the first or
+            last element of the next group.
+          </p>
+          <p>When the Fragment does not have children:</p>
+          <p>
+            The Fragment still represents a virtual space. We can scroll to the
+            nearest edge by selecting the host sibling before if
+            alignToTop=false, or after if alignToTop=true|undefined. We'll fall
+            back to the other sibling or parent in the case that the preferred
+            sibling target doesn't exist.
+          </p>
+        </TestCase.ExpectedResult>
+        <Fixture>
+          <Fixture.Controls>
+            <Controls
+              alignToTop={alignToTop}
+              setAlignToTop={setAlignToTop}
+              scrollVertical={scrollVertical}
+              exampleType={exampleType}
+              setExampleType={setExampleType}
+            />
+          </Fixture.Controls>
+          {exampleType === 'simple' && (
+            <Fragment ref={fragmentRef}>
+              <ScrollIntoViewCaseSimple />
+            </Fragment>
+          )}
+          {exampleType === 'horizontal' && (
+            <div
+              style={{
+                display: 'flex',
+                overflowX: 'auto',
+                flexDirection: 'row',
+                border: '1px solid #ccc',
+                padding: '1rem 10rem',
+                marginBottom: '1rem',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                justifyContent: 'space-between',
+              }}>
+              <Fragment ref={fragmentRef}>
+                <ScrollIntoViewCaseSimple />
+              </Fragment>
+            </div>
+          )}
+          {exampleType === 'multiple' && (
+            <Fragment>
+              <div
+                style={{
+                  height: '50vh',
+                  overflowY: 'auto',
+                  border: '1px solid black',
+                  marginBottom: '1rem',
+                }}
+                ref={scrollContainerRef}
+              />
+              <Fragment ref={fragmentRef}>
+                <ScrollIntoViewCaseComplex
+                  caseInViewport={caseInViewport}
+                  scrollContainerRef={scrollContainerRef}
+                />
+              </Fragment>
+            </Fragment>
+          )}
+          {exampleType === 'empty' && (
+            <Fragment>
+              <ScrollIntoViewTargetElement
+                color="lightyellow"
+                id="ABOVE EMPTY FRAGMENT"
+              />
+              <Fragment ref={fragmentRef}></Fragment>
+              <ScrollIntoViewTargetElement
+                color="lightblue"
+                id="BELOW EMPTY FRAGMENT"
+              />
+            </Fragment>
+          )}
+          <Fixture.Controls>
+            <Controls
+              alignToTop={alignToTop}
+              setAlignToTop={setAlignToTop}
+              scrollVertical={scrollVertical}
+              exampleType={exampleType}
+              setExampleType={setExampleType}
+            />
+          </Fixture.Controls>
+        </Fixture>
+      </TestCase>
+    </Fragment>
+  );
+}

fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseComplex.js

@@ -0,0 +1,50 @@
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment, useRef, useState, useEffect} = React;
+const ReactDOM = window.ReactDOM;
+
+export default function ScrollIntoViewCaseComplex({
+  caseInViewport,
+  scrollContainerRef,
+}) {
+  const [didMount, setDidMount] = useState(false);
+  // Hack to portal child into the scroll container
+  // after the first render. This is to simulate a case where
+  // an item is portaled into another scroll container.
+  useEffect(() => {
+    if (!didMount) {
+      setDidMount(true);
+    }
+  }, []);
+  return (
+    <Fragment>
+      {caseInViewport && (
+        <div
+          style={{position: 'fixed', top: 0, backgroundColor: 'red'}}
+          id="header">
+          Fixed header
+        </div>
+      )}
+      {didMount &&
+        ReactDOM.createPortal(
+          <ScrollIntoViewTargetElement color="red" id="FROM_PORTAL" />,
+          scrollContainerRef.current
+        )}
+      <ScrollIntoViewTargetElement color="lightgreen" top={true} id="A" />
+      <ScrollIntoViewTargetElement color="lightcoral" id="B" />
+      <ScrollIntoViewTargetElement color="lightblue" id="C" />
+      {caseInViewport && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            backgroundColor: 'purple',
+          }}
+          id="footer">
+          Fixed footer
+        </div>
+      )}
+    </Fragment>
+  );
+}

fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCaseSimple.js

@@ -0,0 +1,14 @@
+import ScrollIntoViewTargetElement from './ScrollIntoViewTargetElement';
+
+const React = window.React;
+const {Fragment} = React;
+
+export default function ScrollIntoViewCaseSimple() {
+  return (
+    <Fragment>
+      <ScrollIntoViewTargetElement color="lightyellow" id="SCROLLABLE-1" />
+      <ScrollIntoViewTargetElement color="lightpink" id="SCROLLABLE-2" />
+      <ScrollIntoViewTargetElement color="lightcyan" id="SCROLLABLE-3" />
+    </Fragment>
+  );
+}

fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewTargetElement.js

@@ -0,0 +1,18 @@
+const React = window.React;
+
+export default function ScrollIntoViewTargetElement({color, id, top}) {
+  return (
+    <div
+      id={id}
+      style={{
+        height: 500,
+        minWidth: 300,
+        backgroundColor: color,
+        marginTop: top ? '50vh' : 0,
+        marginBottom: 100,
+        flexShrink: 0,
+      }}>
+      {id}
+    </div>
+  );
+}

fixtures/dom/src/components/fixtures/fragment-refs/index.js

@@ -5,6 +5,7 @@ import IntersectionObserverCase from './IntersectionObserverCase';
 import ResizeObserverCase from './ResizeObserverCase';
 import FocusCase from './FocusCase';
 import GetClientRectsCase from './GetClientRectsCase';
+import ScrollIntoViewCase from './ScrollIntoViewCase';
 
 const React = window.React;
 
@@ -17,6 +18,7 @@ export default function FragmentRefsPage() {
       <ResizeObserverCase />
       <FocusCase />
       <GetClientRectsCase />
+      <ScrollIntoViewCase />
     </FixtureSet>
   );
 }

fixtures/dom/src/index.js

@@ -2,14 +2,23 @@ import './polyfills';
 import loadReact, {isLocal} from './react-loader';
 
 if (isLocal()) {
-  Promise.all([import('react'), import('react-dom/client')])
-    .then(([React, ReactDOMClient]) => {
-      if (React === undefined || ReactDOMClient === undefined) {
+  Promise.all([
+    import('react'),
+    import('react-dom'),
+    import('react-dom/client'),
+  ])
+    .then(([React, ReactDOM, ReactDOMClient]) => {
+      if (
+        React === undefined ||
+        ReactDOM === undefined ||
+        ReactDOMClient === undefined
+      ) {
         throw new Error(
           'Unable to load React. Build experimental and then run `yarn dev` again'
         );
       }
       window.React = React;
+      window.ReactDOM = ReactDOM;
       window.ReactDOMClient = ReactDOMClient;
     })
     .then(() => import('./components/App'))