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

Author: devongovett

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);