Add support for custom collection renderers (e.g. virtualization)

packages/@react-aria/menu/src/useMenuItem.ts

@@ -100,6 +100,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
  */
 export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, ref: RefObject<FocusableElement>): MenuItemAria {
   let {
+    id,
     key,
     closeOnSelect,
     isVirtualized,
@@ -160,6 +161,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   let keyboardId = useSlotId();
 
   let ariaProps = {
+    id,
     'aria-disabled': isDisabled || undefined,
     role,
     'aria-label': props['aria-label'],

packages/@react-aria/menu/src/useSubmenuTrigger.ts

@@ -13,16 +13,19 @@
 import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
-import {FocusableElement, FocusStrategy, KeyboardEvent, PressEvent, Node as RSNode} from '@react-types/shared';
+import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent} from '@react-types/shared';
 import {RefObject, useCallback, useRef} from 'react';
 import type {SubmenuTriggerState} from '@react-stately/menu';
 import {useEffectEvent, useId, useLayoutEffect} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useSafelyMouseToSubmenu} from './useSafelyMouseToSubmenu';
 
 export interface AriaSubmenuTriggerProps {
-  /** An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item. */
-  node: RSNode<unknown>,
+  /**
+   * An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item.
+   * @deprecated
+   */
+  node?: Node<unknown>,
   /** Whether the submenu trigger is disabled. */
   isDisabled?: boolean,
   /** The type of the contents that the submenu trigger opens. */
@@ -64,7 +67,7 @@ export interface SubmenuTriggerAria<T> {
  * @param ref - Ref to the submenu trigger element.
  */
 export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T> {
-  let {parentMenuRef, submenuRef, type = 'menu', isDisabled, node, delay = 200} = props;
+  let {parentMenuRef, submenuRef, type = 'menu', isDisabled, delay = 200} = props;
   let submenuTriggerId = useId();
   let overlayId = useId();
   let {direction} = useLocale();
@@ -117,7 +120,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
 
   let submenuProps = {
     id: overlayId,
-    'aria-label': node.textValue,
+    'aria-labelledby': submenuTriggerId,
     submenuLevel: state.submenuLevel,
     ...(type === 'menu' && {
       onClose: state.closeAll,

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

@@ -202,7 +202,7 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   };
 
   return (
-    <div {...otherProps} style={style} ref={ref} onScroll={onScroll}>
+    <div role="presentation" {...otherProps} style={style} ref={ref} onScroll={onScroll}>
       <div role="presentation" style={innerStyle}>
         {children}
       </div>

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

@@ -14,7 +14,7 @@ import {Collection, Key} from '@react-types/shared';
 import {getInteractionModality} from '@react-aria/interactions';
 import {Layout, Rect, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
-import React, {FocusEvent, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, FocusEvent, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef} from 'react';
 import {ScrollView} from './ScrollView';
 import {VirtualizerItem} from './VirtualizerItem';
 
@@ -39,6 +39,8 @@ interface VirtualizerProps<T extends object, V> extends Omit<HTMLAttributes<HTML
   autoFocus?: boolean
 }
 
+export const VirtualizerContext = createContext<VirtualizerState<any, any, any> | null>(null);
+
 function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerProps<T, V>, ref: RefObject<HTMLDivElement>) {
   let {
     children: renderView,
@@ -90,7 +92,9 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
       onScrollEnd={state.endScrolling}
       sizeToFit={sizeToFit}
       scrollDirection={scrollDirection}>
-      {state.visibleViews}
+      <VirtualizerContext.Provider value={state}>
+        {state.visibleViews}
+      </VirtualizerContext.Provider>
     </ScrollView>
   );
 }

packages/@react-aria/virtualizer/src/index.ts

@@ -12,7 +12,7 @@
 
 export type {RTLOffsetType} from './utils';
 export type {VirtualizerItemOptions} from './useVirtualizerItem';
-export {useVirtualizer, Virtualizer} from './Virtualizer';
+export {useVirtualizer, Virtualizer, VirtualizerContext} from './Virtualizer';
 export {useVirtualizerItem} from './useVirtualizerItem';
 export {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';
 export {ScrollView} from './ScrollView';

packages/@react-aria/virtualizer/src/useVirtualizerItem.ts

@@ -29,12 +29,14 @@ export function useVirtualizerItem(options: VirtualizerItemOptions) {
   let {layoutInfo, virtualizer, ref} = options;
 
   let updateSize = useCallback(() => {
-    let size = getSize(ref.current);
-    virtualizer.updateItemSize(layoutInfo.key, size);
-  }, [virtualizer, layoutInfo.key, ref]);
+    if (layoutInfo) {
+      let size = getSize(ref.current);
+      virtualizer.updateItemSize(layoutInfo.key, size);
+    }
+  }, [virtualizer, layoutInfo?.key, ref]);
 
   useLayoutEffect(() => {
-    if (layoutInfo.estimatedSize) {
+    if (layoutInfo?.estimatedSize) {
       updateSize();
     }
   });

packages/@react-spectrum/listbox/src/ListBoxBase.tsx

@@ -97,7 +97,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
           item={reusableView.content}
           layoutInfo={reusableView.layoutInfo}
           virtualizer={reusableView.virtualizer}
-          headerLayoutInfo={children.find(c => c.viewType === 'header').layoutInfo}>
+          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>
           {renderChildren(children.filter(c => c.viewType === 'item'))}
         </ListBoxSection>
       );

packages/@react-spectrum/listbox/src/ListBoxSection.tsx

@@ -46,7 +46,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
 
   return (
     <Fragment>
-      <div role="presentation" ref={headerRef} style={layoutInfoToStyle(headerLayoutInfo, direction)}>
+      {headerLayoutInfo && <div role="presentation" ref={headerRef} style={layoutInfoToStyle(headerLayoutInfo, direction)}>
         {item.key !== state.collection.getFirstKey() &&
           <div
             role="presentation"
@@ -67,7 +67,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
             {item.rendered}
           </div>
         }
-      </div>
+      </div>}
       <div
         {...groupProps}
         style={layoutInfoToStyle(layoutInfo, direction)}

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -43,11 +43,9 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let triggerRef = useRef<HTMLLIElement>(null);
   let popoverRef = useRef(null);
   let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
-  let triggerNode = state.collection.getItem(targetKey);
   let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
   let submenuRef = unwrapDOMRef(popoverRef);
   let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
-    node: triggerNode,
     parentMenuRef,
     submenuRef,
     type: 'dialog',

packages/@react-spectrum/menu/src/SubmenuTrigger.tsx

@@ -40,11 +40,9 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
   } = props;
 
   let [menuTrigger, menu] = React.Children.toArray(children);
-  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState, state} = useMenuStateContext();
-  let triggerNode = state.collection.getItem(targetKey);
+  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext();
   let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
-    node: triggerNode,
     parentMenuRef,
     submenuRef: menuRef
   }, submenuTriggerState, triggerRef);

packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx

@@ -94,7 +94,7 @@ describe('Submenu', function () {
     expect(menus).toHaveLength(2);
     let submenu1 = menus[1];
     expect(document.activeElement).toBe(submenuTrigger1);
-    expect(submenu1).toHaveAttribute('aria-label', submenuTrigger1.textContent);
+    expect(submenu1).toHaveAttribute('aria-labelledby', submenuTrigger1.id);
     expect(submenuTrigger1).toHaveAttribute('aria-expanded', 'true');
     expect(submenuTrigger1).toHaveAttribute('aria-controls', submenu1.id);
 
@@ -114,7 +114,7 @@ describe('Submenu', function () {
     expect(menus).toHaveLength(3);
     let submenu2 = menus[2];
     expect(document.activeElement).toBe(submenuTrigger2);
-    expect(submenu2).toHaveAttribute('aria-label', submenuTrigger2.textContent);
+    expect(submenu2).toHaveAttribute('aria-labelledby', submenuTrigger2.id);
     expect(submenuTrigger2).toHaveAttribute('aria-expanded', 'true');
     expect(submenuTrigger2).toHaveAttribute('aria-controls', submenu2.id);
 
@@ -828,7 +828,7 @@ describe('Submenu', function () {
       let submenu1 = menus[0];
       let submenu1Items = within(submenu1).getAllByRole('menuitem');
       expect(document.activeElement).toBe(submenu1Items[0]);
-      expect(submenu1).toHaveAttribute('aria-label', submenuTrigger1.textContent);
+      expect(submenu1).toHaveAttribute('aria-labelledby', submenuTrigger1.id);
       let trayDialog = within(tray).getByRole('dialog');
       expect(trayDialog).toBeTruthy();
       let backButton = within(trayDialog).getByRole('button');
@@ -852,7 +852,7 @@ describe('Submenu', function () {
       let submenu2 = menus[0];
       let submenu2Items = within(submenu2).getAllByRole('menuitem');
       expect(document.activeElement).toBe(submenu2Items[0]);
-      expect(submenu2).toHaveAttribute('aria-label', submenuTrigger2.textContent);
+      expect(submenu2).toHaveAttribute('aria-labelledby', submenuTrigger2.id);
       trayDialog = within(tray).getByRole('dialog');
       backButton = within(trayDialog).getByRole('button');
       expect(backButton).toHaveAttribute('aria-label', `Return to ${submenuTrigger2.textContent}`);

packages/@react-spectrum/tree/src/TreeView.tsx

@@ -38,11 +38,13 @@ export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>,
   children?: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {
+export interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {
   /** Rendered contents of the tree item or child items. */
   children: ReactNode,
   /** Whether this item has children, even if not loaded yet. */
-  hasChildItems?: boolean
+  hasChildItems?: boolean,
+  /** A list of child tree item objects used when dynamically rendering the tree item children. */
+  childItems?: Iterable<T>
 }
 
 interface TreeRendererContextValue {
@@ -220,7 +222,7 @@ const treeRowOutline = style({
   }
 });
 
-export const TreeViewItem = (props: SpectrumTreeViewItemProps) => {
+export const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<T>) => {
   let {
     children,
     childItems,

packages/@react-stately/layout/src/ListLayout.ts

@@ -114,7 +114,7 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
       res = this.layoutInfos.get(key);
     }
 
-    return res;
+    return res!;
   }
 
   getVisibleLayoutInfos(rect: Rect) {
@@ -271,41 +271,22 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
         return this.buildSection(node, x, y);
       case 'item':
         return this.buildItem(node, x, y);
+      case 'header':
+        return this.buildHeader(node, x, y);
     }
   }
 
   buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
-    let rectHeight = this.headingHeight;
-    let isEstimated = false;
-
-    // If no explicit height is available, use an estimated height.
-    if (rectHeight == null) {
-      // If a previous version of this layout info exists, reuse its height.
-      // Mark as estimated if the size of the overall collection view changed,
-      // or the content of the item changed.
-      let previousLayoutNode = this.layoutNodes.get(node.key);
-      if (previousLayoutNode && previousLayoutNode.header) {
-        let curNode = this.collection.getItem(node.key);
-        let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
-        rectHeight = previousLayoutNode.header.rect.height;
-        isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.header.estimatedSize;
-      } else {
-        rectHeight = (node.rendered ? this.estimatedHeadingHeight : 0);
-        isEstimated = true;
-      }
-    }
-
-    if (rectHeight == null) {
-      rectHeight = DEFAULT_HEIGHT;
+    let header = null;
+    if (node.rendered) {
+      let headerNode = this.buildHeader(node, x, y);
+      header = headerNode.layoutInfo;
+      header.key += ':header';
+      header.parentKey = node.key;
+      y += header.rect.height;
     }
 
-    let headerRect = new Rect(0, y, width, rectHeight);
-    let header = new LayoutInfo('header', node.key + ':header', headerRect);
-    header.estimatedSize = isEstimated;
-    header.parentKey = node.key;
-    y += header.rect.height;
-
     let rect = new Rect(0, y, width, 0);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
 
@@ -343,6 +324,43 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate,
     };
   }
 
+  buildHeader(node: Node<T>, x: number, y: number): LayoutNode {
+    let width = this.virtualizer.visibleRect.width;
+    let rectHeight = this.headingHeight;
+    let isEstimated = false;
+
+    // If no explicit height is available, use an estimated height.
+    if (rectHeight == null) {
+      // If a previous version of this layout info exists, reuse its height.
+      // Mark as estimated if the size of the overall collection view changed,
+      // or the content of the item changed.
+      let previousLayoutNode = this.layoutNodes.get(node.key);
+      let previousLayoutInfo = previousLayoutNode?.header || previousLayoutNode?.layoutInfo;
+      if (previousLayoutInfo) {
+        let curNode = this.collection.getItem(node.key);
+        let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
+        rectHeight = previousLayoutInfo.rect.height;
+        isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
+      } else {
+        rectHeight = (node.rendered ? this.estimatedHeadingHeight : 0);
+        isEstimated = true;
+      }
+    }
+
+    if (rectHeight == null) {
+      rectHeight = DEFAULT_HEIGHT;
+    }
+
+    let headerRect = new Rect(0, y, width, rectHeight);
+    let header = new LayoutInfo('header', node.key, headerRect);
+    header.estimatedSize = isEstimated;
+    return {
+      layoutInfo: header,
+      children: [],
+      validRect: header.rect.intersection(this.validRect)
+    };
+  }
+
   buildItem(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.rowHeight;

packages/@react-stately/virtualizer/src/Virtualizer.ts

@@ -89,6 +89,7 @@ export class Virtualizer<T extends object, V, W> {
   private _visibleViews: Map<Key, ReusableView<T, V>>;
   private _renderedContent: WeakMap<T, V>;
   private _children: Set<ReusableView<T, V>>;
+  private _viewsByParentKey: Map<Key | null, ReusableView<T, V>[]>;
   private _invalidationContext: InvalidationContext<T, V> | null;
   private _overscanManager: OverscanManager;
   private _persistedKeys: Set<Key>;
@@ -837,20 +838,25 @@ export class Virtualizer<T extends object, V, W> {
     // by referencing a parentKey. Just before rendering the visible views, we rebuild this hierarchy
     // by creating a mapping of views by parent key and recursively calling the delegate's renderWrapper
     // method to build the final tree.
-    let viewsByParentKey = new Map([[null, []]]);
+    this._viewsByParentKey = new Map([[null, []]]);
     for (let view of this._children) {
-      if (view.layoutInfo?.parentKey != null && !viewsByParentKey.has(view.layoutInfo.parentKey)) {
-        viewsByParentKey.set(view.layoutInfo.parentKey, []);
+      if (view.layoutInfo?.parentKey != null && !this._viewsByParentKey.has(view.layoutInfo.parentKey)) {
+        this._viewsByParentKey.set(view.layoutInfo.parentKey, []);
       }
 
-      viewsByParentKey.get(view.layoutInfo?.parentKey)?.push(view);
-      if (!viewsByParentKey.has(view.layoutInfo?.key)) {
-        viewsByParentKey.set(view.layoutInfo?.key, []);
+      this._viewsByParentKey.get(view.layoutInfo?.parentKey)?.push(view);
+      if (!this._viewsByParentKey.has(view.layoutInfo?.key)) {
+        this._viewsByParentKey.set(view.layoutInfo?.key, []);
       }
     }
 
+    let children = this.getChildren(null);
+    this.delegate.setVisibleViews(children);
+  }
+
+  getChildren(key: Key) {
     let buildTree = (parent: ReusableView<T, V>, views: ReusableView<T, V>[]): W[] => views.map(view => {
-      let children = viewsByParentKey.get(view.layoutInfo.key);
+      let children = this._viewsByParentKey.get(view.layoutInfo.key);
       return this.delegate.renderWrapper(
         parent,
         view,
@@ -859,8 +865,8 @@ export class Virtualizer<T extends object, V, W> {
       );
     });
 
-    let children = buildTree(null, viewsByParentKey.get(null));
-    this.delegate.setVisibleViews(children);
+    let parent = this._visibleViews.get(key)!;
+    return buildTree(parent, this._viewsByParentKey.get(key));
   }
 
   private _applyLayoutInfo(view: ReusableView<T, V>, layoutInfo: LayoutInfo) {