feat: Automatically bound virtualizer visible rectangle to window viewport

packages/@react-aria/dnd/stories/VirtualizedListBox.tsx

@@ -174,6 +174,7 @@ React.forwardRef(function (props: any, ref) {
     <Context.Provider value={{state, dropState}}>
       <Virtualizer
         {...mergeProps(collectionProps, listBoxProps)}
+        onScroll={undefined}
         ref={domRef}
         className={classNames(dndStyles, 'droppable-collection', 'is-virtualized', {'is-drop-target': isDropTarget})}
         scrollDirection="vertical"

packages/@react-aria/utils/src/scrollIntoView.ts

@@ -11,7 +11,7 @@
  */
 
 import {getScrollParents} from './getScrollParents';
-import {isChrome, isIOS} from './platform';
+import {isIOS} from './platform';
 
 interface ScrollIntoViewOpts {
   /** The position to align items along the block axis in. */
@@ -133,9 +133,7 @@ export function scrollIntoViewport(targetElement: Element | null, opts: ScrollIn
   if (targetElement && targetElement.isConnected) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
-    // If scrolling is not currently prevented then we aren't in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
-    // Also ignore in chrome because of this bug: https://issues.chromium.org/issues/40074749
-    if (!isScrollPrevented && !isChrome()) {
+    if (!isScrollPrevented) {
       let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
 
       // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -12,8 +12,9 @@
 
 // @ts-ignore
 import {flushSync} from 'react-dom';
-import {getEventTarget, useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
+import {getEventTarget, nodeContains, useEffectEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {getScrollLeft} from './utils';
+import {Point, Rect, Size} from '@react-stately/virtualizer';
 import React, {
   CSSProperties,
   ForwardedRef,
@@ -25,17 +26,17 @@ import React, {
   useRef,
   useState
 } from 'react';
-import {Rect, Size} from '@react-stately/virtualizer';
 import {useLocale} from '@react-aria/i18n';
 
-interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
+interface ScrollViewProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
   contentSize: Size,
   onVisibleRectChange: (rect: Rect) => void,
   children?: ReactNode,
   innerStyle?: CSSProperties,
   onScrollStart?: () => void,
   onScrollEnd?: () => void,
-  scrollDirection?: 'horizontal' | 'vertical' | 'both'
+  scrollDirection?: 'horizontal' | 'vertical' | 'both',
+  onScroll?: (e: Event) => void
 }
 
 function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {
@@ -70,39 +71,76 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     onScrollStart,
     onScrollEnd,
     scrollDirection = 'both',
+    onScroll: onScrollProp,
     ...otherProps
   } = props;
 
   let state = useRef({
-    scrollTop: 0,
-    scrollLeft: 0,
+    // Internal scroll position of the scroll view.
+    scrollPosition: new Point(),
+    // Size of the scroll view.
+    size: new Size(),
+    // Offset of the scroll view relative to the window viewport.
+    viewportOffset: new Point(),
+    // Size of the window viewport.
+    viewportSize: new Size(),
     scrollEndTime: 0,
     scrollTimeout: null as ReturnType<typeof setTimeout> | null,
-    width: 0,
-    height: 0,
     isScrolling: false
   }).current;
   let {direction} = useLocale();
 
+  let updateVisibleRect = useCallback(() => {
+    // Intersect the window viewport with the scroll view itself to find the actual visible rectangle.
+    // This allows virtualized components to have unbounded height but still virtualize when scrolled with the page.
+    // While there may be other scrollable elements between the <body> and the scroll view, we do not take
+    // their sizes into account for performance reasons. Their scroll positions are accounted for in viewportOffset
+    // though (due to getBoundingClientRect). This may result in more rows than absolutely necessary being rendered,
+    // but no more than the entire height of the viewport which is good enough for virtualization use cases.
+    let visibleRect = new Rect(
+      state.viewportOffset.x + state.scrollPosition.x,
+      state.viewportOffset.y + state.scrollPosition.y,
+      Math.max(0, Math.min(state.size.width - state.viewportOffset.x, state.viewportSize.width)),
+      Math.max(0, Math.min(state.size.height - state.viewportOffset.y, state.viewportSize.height))
+    );
+    onVisibleRectChange(visibleRect);
+  }, [state, onVisibleRectChange]);
+
   let [isScrolling, setScrolling] = useState(false);
 
-  let onScroll = useCallback((e) => {
-    if (getEventTarget(e) !== e.currentTarget) {
+  let onScroll = useCallback((e: Event) => {
+    let target = getEventTarget(e) as Element;
+    if (!nodeContains(target, ref.current!)) {
       return;
     }
 
-    if (props.onScroll) {
-      props.onScroll(e);
+    if (onScrollProp && target === ref.current) {
+      onScrollProp(e);
     }
 
-    flushSync(() => {
-      let scrollTop = e.currentTarget.scrollTop;
-      let scrollLeft = getScrollLeft(e.currentTarget, direction);
+    if (target !== ref.current) {
+      // An ancestor element or the window was scrolled. Update the position of the scroll view relative to the viewport.
+      let boundingRect = ref.current!.getBoundingClientRect();
+      let x = boundingRect.x < 0 ? -boundingRect.x : 0;
+      let y = boundingRect.y < 0 ? -boundingRect.y : 0;
+      if (x === state.viewportOffset.x && y === state.viewportOffset.y) {
+        return;
+      }
 
+      state.viewportOffset = new Point(x, y);
+    } else {
+      // The scroll view itself was scrolled. Update the local scroll position.
       // Prevent rubber band scrolling from shaking when scrolling out of bounds
-      state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
-      state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
-      onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
+      let scrollTop = target.scrollTop;
+      let scrollLeft = getScrollLeft(target, direction);
+      state.scrollPosition = new Point(
+        Math.max(0, Math.min(scrollLeft, contentSize.width - state.size.width)),
+        Math.max(0, Math.min(scrollTop, contentSize.height - state.size.height))
+      );
+    }
+
+    flushSync(() => {
+      updateVisibleRect();
 
       if (!state.isScrolling) {
         state.isScrolling = true;
@@ -138,10 +176,13 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
         }, 300);
       }
     });
-  }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);
+  }, [onScrollProp, ref, direction, state, contentSize, updateVisibleRect, onScrollStart, onScrollEnd]);
 
-  // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
-  useEvent(ref, 'scroll', onScroll);
+  // Attach a document-level capturing scroll listener so we can account for scrollable ancestors.
+  useEffect(() => {
+    document.addEventListener('scroll', onScroll, true);
+    return () => document.removeEventListener('scroll', onScroll, true);
+  }, [onScroll]);
 
   useEffect(() => {
     return () => {
@@ -175,11 +216,18 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
     let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
 
-    if (state.width !== w || state.height !== h) {
-      state.width = w;
-      state.height = h;
+    // Update the window viewport size.
+    let viewportWidth = window.innerWidth;
+    let viewportHeight = window.innerHeight;
+    let viewportSizeChanged = state.viewportSize.width !== viewportWidth || state.viewportSize.height !== viewportHeight;
+    if (viewportSizeChanged) {
+      state.viewportSize = new Size(viewportWidth, viewportHeight);
+    }
+
+    if (state.size.width !== w || state.size.height !== h || viewportSizeChanged) {
+      state.size = new Size(w, h);
       flush(() => {
-        onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));
+        updateVisibleRect();
       });
 
       // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
@@ -188,18 +236,30 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
       // an infinite loop. This matches how browsers behavior with native CSS grid layout.
       if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
-        state.width = dom.clientWidth;
-        state.height = dom.clientHeight;
+        state.size = new Size(dom.clientWidth, dom.clientHeight);
         flush(() => {
-          onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
+          updateVisibleRect();
         });
       }
     }
 
     isUpdatingSize.current = false;
-  }, [ref, state, onVisibleRectChange]);
+  }, [ref, state, updateVisibleRect]);
   let updateSizeEvent = useEffectEvent(updateSize);
 
+  // Track the size of the entire window viewport, which is used to bound the size of the virtualizer's visible rectangle.
+  useLayoutEffect(() => {
+    // Initialize viewportRect before updating size for the first time.
+    state.viewportSize = new Size(window.innerWidth, window.innerHeight);
+
+    let onWindowResize = () => {
+      updateSizeEvent(flushSync);
+    };
+
+    window.addEventListener('resize', onWindowResize);
+    return () => window.removeEventListener('resize', onWindowResize);
+  }, [state]);
+
   // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
   let lastContentSize = useRef<Size | null>(null);
   let [update, setUpdate] = useState({});
@@ -250,7 +310,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   if (scrollDirection === 'horizontal') {
     style.overflowX = 'auto';
     style.overflowY = 'hidden';
-  } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
+  } else if (scrollDirection === 'vertical' || contentSize.width === state.size.width) {
     // Set overflow-x: hidden if content size is equal to the width of the scroll view.
     // This prevents horizontal scrollbars from flickering during resizing due to resize observer
     // firing slower than the frame rate, which may cause an infinite re-render loop.

packages/@react-aria/virtualizer/src/Virtualizer.tsx

@@ -24,7 +24,7 @@ type RenderWrapper<T extends object, V> = (
   renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
 ) => ReactElement | null;
 
-interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onScroll'> {
   children: (type: string, content: T) => V,
   renderWrapper?: RenderWrapper<T, V>,
   layout: Layout<T, O>,
@@ -33,7 +33,8 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
   scrollDirection?: 'horizontal' | 'vertical' | 'both',
   isLoading?: boolean,
   onLoadMore?: () => void,
-  layoutOptions?: O
+  layoutOptions?: O,
+  onScroll?: (e: Event) => void
 }
 
 // forwardRef doesn't support generic parameters, so cast the result to the correct type

packages/@react-spectrum/card/test/CardView.test.js

@@ -136,9 +136,13 @@ function DynamicCardView(props) {
 }
 
 describe('CardView', function () {
-  let user;
+  let user, innerHeight, innerWidth;
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    innerHeight = window.innerHeight;
+    innerWidth = window.innerWidth;
+    Object.defineProperty(window, 'innerHeight', {value: 1000, configurable: true, writable: true});
+    Object.defineProperty(window, 'innerWidth', {value: 1000, configurable: true, writable: true});
     jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => mockWidth);
     jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => mockHeight);
     jest.useFakeTimers();
@@ -154,6 +158,8 @@ describe('CardView', function () {
   });
 
   afterAll(function () {
+    window.innerHeight = innerHeight;
+    window.innerWidth = innerWidth;
     jest.restoreAllMocks();
   });
 

packages/@react-spectrum/list/src/ListView.tsx

@@ -223,6 +223,7 @@ export const ListView = React.forwardRef(function ListView<T extends object>(pro
             {...filterDOMProps(otherProps)}
             {...gridProps}
             {...styleProps}
+            onScroll={undefined}
             isLoading={isLoading}
             onLoadMore={onLoadMore}
             ref={domRef}

packages/@react-spectrum/list/test/ListView.test.js

@@ -62,8 +62,13 @@ describe('ListView', function () {
     manyItems.push({id: i, label: 'Foo ' + i});
   }
 
+  let innerHeight, innerWidth;
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    innerHeight = window.innerHeight;
+    innerWidth = window.innerWidth;
+    Object.defineProperty(window, 'innerHeight', {value: 1000, configurable: true, writable: true});
+    Object.defineProperty(window, 'innerWidth', {value: 1000, configurable: true, writable: true});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
     scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 40);
@@ -78,6 +83,8 @@ describe('ListView', function () {
   });
 
   afterAll(function () {
+    window.innerHeight = innerHeight;
+    window.innerWidth = innerWidth;
     offsetWidth.mockReset();
     offsetHeight.mockReset();
     scrollHeight.mockReset();

packages/@react-spectrum/s2/stories/TableView.stories.tsx

@@ -799,9 +799,9 @@ for (let i = 0; i < 1000; i++) {
   manyRows.push(row);
 }
 
-export const ManyItems: StoryObj<typeof TableView> = {
-  render: (args) => (
-    <TableView aria-label="Many items table" {...args} styles={style({width: 800, height: 400})}>
+function ManyItemsTable(args) {
+  return (
+    <TableView aria-label="Many items table" {...args}>
       <TableHeader columns={manyColumns}>
         {(column) => (
           <Column width={100} minWidth={100} isRowHeader={column.name === 'Column 1'}>{column.name}</Column>
@@ -817,7 +817,11 @@ export const ManyItems: StoryObj<typeof TableView> = {
         )}
       </TableBody>
     </TableView>
-  ),
+  ); 
+}
+
+export const ManyItems: StoryObj<typeof TableView> = {
+  render: (args) => <ManyItemsTable {...args} styles={style({width: 800, height: 400})} />,
   args: {
     ...Example.args
   },
@@ -829,6 +833,41 @@ export const ManyItems: StoryObj<typeof TableView> = {
   }
 };
 
+export const ViewportScrolling: StoryObj<typeof TableView> = {
+  render: (args) => (
+    <>
+      <ManyItemsTable {...args} styles={style({width: 800})} />
+      <div style={{height: 900}} />
+    </>
+  ),
+  args: {
+    ...Example.args
+  },
+  name: 'viewport scrolling',
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
+export const ScrollableContainer: StoryObj<typeof TableView> = {
+  render: (args) => (
+    <div style={{width: 800, height: 500, overflow: 'auto'}}>
+      <ManyItemsTable {...args} styles={style({width: 'full'})} />
+    </div>
+  ),
+  args: {
+    ...Example.args
+  },
+  name: 'scrollable container',
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
 export const FlexHeight: StoryObj<typeof TableView> = {
   render: (args) => (
     <div className={style({display: 'flex', width: 400, height: 400, alignItems: 'stretch', flexDirection: 'column'})}>

packages/@react-spectrum/table/test/TableTests.js

@@ -154,14 +154,21 @@ export let tableTests = () => {
   let user;
   let testUtilUser = new User({advanceTimer: (time) => jest.advanceTimersByTime(time)});
 
+  let innerHeight, innerWidth;
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    innerHeight = window.innerHeight;
+    innerWidth = window.innerWidth;
+    Object.defineProperty(window, 'innerHeight', {value: 1000, configurable: true, writable: true});
+    Object.defineProperty(window, 'innerWidth', {value: 1000, configurable: true, writable: true});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 400);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200);
     jest.useFakeTimers();
   });
 
   afterAll(function () {
+    window.innerHeight = innerHeight;
+    window.innerWidth = innerWidth;
     offsetWidth.mockReset();
     offsetHeight.mockReset();
   });