react-aria-components 1.10.1 → 1.11.0

package/src/Toast.tsx

@@ -14,12 +14,12 @@ import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useHover
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {createPortal} from 'react-dom';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
 import {TextContext} from './Text';
 import {useIsSSR} from '@react-aria/ssr';
-import {useObjectRef} from '@react-aria/utils';
 import {useUNSAFE_PortalContext} from '@react-aria/overlays';
 
 export const ToastStateContext = createContext<ToastState<any> | null>(null);
@@ -44,7 +44,7 @@ export interface ToastRegionRenderProps<T> {
   isFocusVisible: boolean
 }
 
-export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>> {
+export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
   /** The queue of toasts to display. */
   queue: ToastQueue<T>,
   /** A function to render each toast, or children containing a `<ToastList>`. */
@@ -84,11 +84,12 @@ export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   let region = (
     <ToastStateContext.Provider value={state}>
       <div
-        {...renderProps}
-        {...mergeProps(regionProps, focusProps, hoverProps)}
+        {...mergeProps(DOMProps, renderProps, regionProps, focusProps, hoverProps)}
         dir={direction}
         ref={objectRef}
         data-hovered={isHovered || undefined}
@@ -152,7 +153,7 @@ export interface ToastRenderProps<T> {
   isFocusVisible: boolean
 }
 
-export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>> {}
+export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {}
 
 /**
  * A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
@@ -177,10 +178,11 @@ export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...renderProps}
-      {...mergeProps(toastProps, focusProps)}
+      {...mergeProps(DOMProps, renderProps, toastProps, focusProps)}
       ref={objectRef}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}>

package/src/ToggleButton.tsx

@@ -13,7 +13,8 @@
 import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton, useToggleButtonGroupItem} from 'react-aria';
 import {ButtonRenderProps} from './Button';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType, Key} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
@@ -30,7 +31,7 @@ export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPend
   state: ToggleState
 }
 
-export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. */
   id?: Key
 }
@@ -65,10 +66,13 @@ export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     defaultClassName: 'react-aria-ToggleButton'
   });
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
   return (
     <button
-      {...mergeProps(buttonProps, focusProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-focused={isFocused || undefined}

package/src/ToggleButtonGroup.tsx

@@ -11,7 +11,8 @@
  */
 import {AriaToggleButtonGroupProps, useToggleButtonGroup} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleGroupState, useToggleGroupState} from 'react-stately';
 
@@ -27,7 +28,7 @@ export interface ToggleButtonGroupRenderProps {
   state: ToggleGroupState
 }
 
-export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps {}
+export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
 export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
@@ -49,10 +50,11 @@ export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(fu
     defaultClassName: 'react-aria-ToggleButtonGroup'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-orientation={props.orientation || 'horizontal'}

package/src/Toolbar.tsx

@@ -13,7 +13,7 @@
 import {AriaToolbarProps, useToolbar} from '@react-aria/toolbar';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, Orientation} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, Orientation} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ToolbarRenderProps {
@@ -24,7 +24,7 @@ export interface ToolbarRenderProps {
   orientation: Orientation
 }
 
-export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps> {
+export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
 }
 
 export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
@@ -41,13 +41,12 @@ export const Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Too
     values: {orientation: props.orientation || 'horizontal'},
     defaultClassName: 'react-aria-Toolbar'
   });
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
     <div
-      {...mergeProps(toolbarProps, DOMProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, toolbarProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-orientation={props.orientation || 'horizontal'}>

package/src/Tooltip.tsx

@@ -10,20 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, FocusableElement, forwardRefType, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, FocusableElement, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
 import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 import {FocusableProvider} from '@react-aria/focus';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
-import {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
   children: ReactNode
 }
 
-export interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {
+export interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The ref for the element which the tooltip positions itself with respect to.
    *
@@ -160,11 +160,12 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
   props = mergeProps(props, overlayProps);
   let {tooltipProps} = useTooltip(props, state);
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...tooltipProps}
+      {...mergeProps(DOMProps, renderProps, tooltipProps)}
       ref={props.tooltipRef}
-      {...renderProps}
       style={{...overlayProps.style, ...renderProps.style}}
       data-placement={placement ?? undefined}
       data-entering={isEntering || undefined}

package/src/Tree.tsx

@@ -15,12 +15,12 @@ import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection, RefObject, SelectionMode} from '@react-types/shared';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents, RefObject, SelectionMode} from '@react-types/shared';
 import {DragAndDropContext, DropIndicatorContext, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {TreeDropTargetDelegate} from './TreeDropTargetDelegate';
 import {useControlledState} from '@react-stately/utils';
@@ -28,13 +28,15 @@ import {useControlledState} from '@react-stately/utils';
 class TreeCollection<T> implements ICollection<Node<T>> {
   private flattenedRows: Node<T>[];
   private keyMap: Map<Key, CollectionNode<T>> = new Map();
+  private itemCount: number = 0;
 
   constructor(opts) {
     let {collection, expandedKeys} = opts;
-    let {flattenedRows, keyMap} = flattenTree<T>(collection, {expandedKeys});
+    let {flattenedRows, keyMap, itemCount} = flattenTree<T>(collection, {expandedKeys});
     this.flattenedRows = flattenedRows;
     // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
     this.keyMap = keyMap;
+    this.itemCount = itemCount;
   }
 
   // TODO: should this collection's getters reflect the flattened structure or the original structure
@@ -44,7 +46,7 @@ class TreeCollection<T> implements ICollection<Node<T>> {
   }
 
   get size() {
-    return this.flattenedRows.length;
+    return this.itemCount;
   }
 
   getKeys() {
@@ -64,7 +66,7 @@ class TreeCollection<T> implements ICollection<Node<T>> {
   }
 
   getLastKey() {
-    return this.flattenedRows[this.size - 1]?.key;
+    return this.flattenedRows[this.flattenedRows.length - 1]?.key;
   }
 
   getKeyAfter(key: Key) {
@@ -132,8 +134,11 @@ export interface TreeRenderProps {
 
 export interface TreeEmptyStateRenderProps extends Omit<TreeRenderProps, 'isEmpty'> {}
 
-export interface TreeProps<T> extends Omit<AriaTreeProps<T>, 'children'>, MultipleSelection, CollectionProps<T>, StyleRenderProps<TreeRenderProps>, SlotProps, ScrollableProps<HTMLDivElement>, Expandable {
-  /** How multiple selection should behave in the tree. */
+export interface TreeProps<T> extends Omit<AriaTreeProps<T>, 'children'>, MultipleSelection, CollectionProps<T>, StyleRenderProps<TreeRenderProps>, SlotProps, Expandable, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * How multiple selection should behave in the tree.
+   * @default "toggle"
+   */
   selectionBehavior?: SelectionBehavior,
   /** Provides content to display when there are no items in the list. */
   renderEmptyState?: (props: TreeEmptyStateRenderProps) => ReactNode,
@@ -361,9 +366,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     let {isEmpty, ...values} = renderValues;
     let content = props.renderEmptyState({...values});
     let treeGridRowProps = {
-      'aria-level': 1,
-      'aria-posinset': 1,
-      'aria-setsize': 1
+      'aria-level': 1
     };
 
     emptyState = (
@@ -375,16 +378,15 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <>
       <FocusScope>
         <div
-          {...filterDOMProps(props)}
-          {...renderProps}
-          {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps)}
+          {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps)}
           ref={ref}
           slot={props.slot || undefined}
-          onScroll={props.onScroll}
           data-empty={state.collection.size === 0 || undefined}
           data-focused={isFocused || undefined}
           data-drop-target={isRootDropTarget || undefined}
@@ -461,7 +463,7 @@ export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', func
 
 export const TreeItemContentContext = createContext<TreeItemContentRenderProps | null>(null);
 
-export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, Pick<AriaTreeItemOptions, 'hasChildItems'> {
+export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Pick<AriaTreeItemOptions, 'hasChildItems'>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** The unique id of the tree row. */
   id?: Key,
   /** The object value that this tree item represents. When using dynamic collections, this is set automatically. */
@@ -496,7 +498,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     shouldSelectOnPressUp: !!dragState
   }, state, ref);
   let isExpanded = rowProps['aria-expanded'] === true;
-  let hasChildItems = props.hasChildItems || [...state.collection.getChildren!(item.key)]?.length > 1;;
+  let hasChildItems = props.hasChildItems || [...state.collection.getChildren!(item.key)]?.length > 1;
   let level = rowProps['aria-level'] || 1;
 
   let {hoverProps, isHovered} = useHover({
@@ -607,6 +609,9 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   });
 
   let activateButtonId = useId();
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
 
   return (
     <>
@@ -634,7 +639,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
       )}
       <div
         {...mergeProps(
-          filterDOMProps(props as any),
+          DOMProps,
           rowProps,
           focusProps,
           hoverProps,
@@ -695,7 +700,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   );
 });
 
-export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
+export interface TreeLoadMoreItemRenderProps {
   /**
    * What level the tree item has within the tree.
    * @selector [data-level]
@@ -703,23 +708,46 @@ export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
   level: number
 }
 
-export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps>, StyleRenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps> {}
+export interface TreeLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, RenderProps<TreeLoadMoreItemRenderProps> {
+  /**
+   * The load more spinner to render when loading additional items.
+   */
+  children?: ReactNode | ((values: TreeLoadMoreItemRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode),
+  /**
+   * Whether or not the loading spinner should be rendered or not.
+   */
+  isLoading?: boolean
+}
 
-export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader<T extends object>(props: TreeLoaderProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const TreeLoadMoreItem = createLeafComponent('loader', function TreeLoadingSentinel<T extends object>(props: TreeLoadMoreItemProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+  let {isVirtualized} = useContext(CollectionRendererContext);
   let state = useContext(TreeStateContext)!;
-  // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
-  // @ts-ignore
-  let {rowProps} = useTreeItem({node: item}, state, ref);
+  let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
+  let sentinelRef = useRef(null);
+  let memoedLoadMoreProps = useMemo(() => ({
+    onLoadMore,
+    // this collection will update anytime a row is expanded/collapsed becaused the flattenedRows will change.
+    // This means onLoadMore will trigger but that might be ok cause the user should have logic to handle multiple loadMore calls
+    collection: state?.collection,
+    sentinelRef,
+    scrollOffset
+  }), [onLoadMore, scrollOffset, state?.collection]);
+  useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
+
+  ref = useObjectRef<HTMLDivElement>(ref);
+  let {rowProps, gridCellProps} = useTreeItem({node: item}, state, ref);
   let level = rowProps['aria-level'] || 1;
 
+  // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+  // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+  // item count
   let ariaProps = {
-    'aria-level': rowProps['aria-level'],
-    'aria-posinset': rowProps['aria-posinset'],
-    'aria-setsize': rowProps['aria-setsize']
+    role: 'row',
+    'aria-level': rowProps['aria-level']
   };
 
   let renderProps = useRenderProps({
-    ...props,
+    ...otherProps,
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-TreeLoader',
@@ -727,19 +755,30 @@ export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', funct
       level
     }
   });
+  let style = {};
+
+  if (isVirtualized) {
+    style = {display: 'contents'};
+  }
 
   return (
     <>
-      <div
-        role="row"
-        ref={ref}
-        {...mergeProps(filterDOMProps(props as any), ariaProps)}
-        {...renderProps}
-        data-level={level}>
-        <div role="gridcell" aria-colindex={1}>
-          {renderProps.children}
-        </div>
+      {/* Alway render the sentinel. For now onus is on the user for styling when using flex + gap (this would introduce a gap even though it doesn't take room) */}
+      {/* @ts-ignore - compatibility with React < 19 */}
+      <div style={{position: 'relative', width: 0, height: 0}} inert={inertValue(true)} >
+        <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />
       </div>
+      {isLoading && renderProps.children && (
+        <div
+          ref={ref}
+          {...mergeProps(filterDOMProps(props as any), ariaProps)}
+          {...renderProps}
+          data-level={level}>
+          <div {...gridCellProps} style={style}>
+            {renderProps.children}
+          </div>
+        </div>
+      )}
     </>
   );
 });
@@ -759,7 +798,8 @@ interface TreeGridCollectionOptions {
 
 interface FlattenedTree<T> {
   flattenedRows: Node<T>[],
-  keyMap: Map<Key, CollectionNode<T>>
+  keyMap: Map<Key, CollectionNode<T>>,
+  itemCount: number
 }
 
 function flattenTree<T>(collection: TreeCollection<T>, opts: TreeGridCollectionOptions): FlattenedTree<T> {
@@ -768,6 +808,8 @@ function flattenTree<T>(collection: TreeCollection<T>, opts: TreeGridCollectionO
   } = opts;
   let keyMap: Map<Key, CollectionNode<T>> = new Map();
   let flattenedRows: Node<T>[] = [];
+  // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
+  let itemCount = 0;
 
   let visitNode = (node: Node<T>) => {
     if (node.type === 'item' || node.type === 'loader') {
@@ -792,9 +834,14 @@ function flattenTree<T>(collection: TreeCollection<T>, opts: TreeGridCollectionO
         keyMap.set(node.key, node as CollectionNode<T>);
       }
 
-      if (node.level === 0 || (parentKey != null && expandedKeys.has(parentKey) && flattenedRows.find(row => row.key === parentKey))) {
-        // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-        flattenedRows.push(keyMap.get(node.key) || node);
+      // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
+      let modifiedNode = keyMap.get(node.key) || node;
+      if (modifiedNode.level === 0 || (modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && flattenedRows.find(row => row.key === modifiedNode.parentKey))) {
+        if (modifiedNode.type === 'item') {
+          itemCount++;
+        }
+
+        flattenedRows.push(modifiedNode);
       }
     } else if (node.type !== null) {
       keyMap.set(node.key, node as CollectionNode<T>);
@@ -811,7 +858,8 @@ function flattenTree<T>(collection: TreeCollection<T>, opts: TreeGridCollectionO
 
   return {
     flattenedRows,
-    keyMap
+    keyMap,
+    itemCount
   };
 }
 

package/src/TreeDropTargetDelegate.ts

@@ -84,11 +84,15 @@ export class TreeDropTargetDelegate<T> {
     if (target.dropPosition === 'before') {
       let keyBefore = this.state!.collection.getKeyBefore(target.key);
       if (keyBefore != null) {
-        target = {
+        let convertedTarget = {
           type: 'item',
           key: keyBefore,
           dropPosition: 'after'
         } as const;
+
+        if (isValidDropTarget(convertedTarget)) {
+          target = convertedTarget;
+        }
       }
     }
 

package/src/index.ts

@@ -39,7 +39,7 @@ export {DropZone, DropZoneContext} from './DropZone';
 export {FieldError, FieldErrorContext} from './FieldError';
 export {FileTrigger} from './FileTrigger';
 export {Form, FormContext} from './Form';
-export {UNSTABLE_GridListLoadingSentinel, GridList, GridListItem, GridListContext} from './GridList';
+export {GridListLoadMoreItem, GridList, GridListItem, GridListContext} from './GridList';
 export {Group, GroupContext} from './Group';
 export {Header, HeaderContext} from './Header';
 export {Heading} from './Heading';
@@ -49,7 +49,7 @@ export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createB
 export {Keyboard, KeyboardContext} from './Keyboard';
 export {Label, LabelContext} from './Label';
 export {Link, LinkContext} from './Link';
-export {UNSTABLE_ListBoxLoadingSentinel, ListBox, ListBoxItem, ListBoxSection, ListBoxContext, ListStateContext} from './ListBox';
+export {ListBoxLoadMoreItem, ListBox, ListBoxItem, ListBoxSection, ListBoxContext, ListStateContext} from './ListBox';
 export {Menu, MenuItem, MenuTrigger, MenuSection, MenuContext, MenuStateContext, RootMenuTriggerStateContext, SubmenuTrigger} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {Modal, ModalOverlay, ModalContext} from './Modal';
@@ -63,7 +63,7 @@ export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateConte
 export {Separator, SeparatorContext} from './Separator';
 export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from './Slider';
 export {Switch, SwitchContext} from './Switch';
-export {UNSTABLE_TableLoadingSentinel, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
+export {TableLoadMoreItem, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
 export {TableLayout} from './TableLayout';
 export {Tabs, TabList, TabPanel, Tab, TabsContext, TabListStateContext} from './Tabs';
 export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from './TagGroup';
@@ -75,7 +75,7 @@ export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} from './ToggleButtonGroup';
 export {Toolbar, ToolbarContext} from './Toolbar';
 export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
-export {UNSTABLE_TreeLoadingIndicator, Tree, TreeItem, TreeContext, TreeItemContent, TreeStateContext} from './Tree';
+export {TreeLoadMoreItem, Tree, TreeItem, TreeContext, TreeItemContent, TreeStateContext} from './Tree';
 export {useDragAndDrop} from './useDragAndDrop';
 export {DropIndicator, DropIndicatorContext, DragAndDropContext} from './DragAndDrop';
 export {Virtualizer} from './Virtualizer';
@@ -106,14 +106,14 @@ export type {DropZoneProps, DropZoneRenderProps} from './DropZone';
 export type {FieldErrorProps, FieldErrorRenderProps} from './FieldError';
 export type {FileTriggerProps} from './FileTrigger';
 export type {FormProps} from './Form';
-export type {GridListProps, GridListRenderProps, GridListItemProps, GridListItemRenderProps} from './GridList';
+export type {GridListProps, GridListRenderProps, GridListItemProps, GridListItemRenderProps, GridListLoadMoreItemProps} from './GridList';
 export type {GroupProps, GroupRenderProps} from './Group';
 export type {HeadingProps} from './Heading';
 export type {InputProps, InputRenderProps} from './Input';
 export type {SectionProps, CollectionRenderer} from './Collection';
 export type {LabelProps} from './Label';
 export type {LinkProps, LinkRenderProps} from './Link';
-export type {ListBoxProps, ListBoxRenderProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxSectionProps} from './ListBox';
+export type {ListBoxProps, ListBoxRenderProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxLoadMoreItemProps} from './ListBox';
 export type {MenuProps, MenuItemProps, MenuItemRenderProps, MenuTriggerProps, SubmenuTriggerProps, MenuSectionProps} from './Menu';
 export type {MeterProps, MeterRenderProps} from './Meter';
 export type {ModalOverlayProps, ModalRenderProps} from './Modal';
@@ -127,7 +127,7 @@ export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRender
 export type {SeparatorProps} from './Separator';
 export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from './Slider';
 export type {SwitchProps, SwitchRenderProps} from './Switch';
-export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, TableBodyRenderProps, ResizableTableContainerProps, ColumnProps, ColumnRenderProps, ColumnResizerProps, ColumnResizerRenderProps, RowProps, RowRenderProps, CellProps, CellRenderProps} from './Table';
+export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, TableBodyRenderProps, ResizableTableContainerProps, ColumnProps, ColumnRenderProps, ColumnResizerProps, ColumnResizerRenderProps, RowProps, RowRenderProps, CellProps, CellRenderProps, TableLoadMoreItemProps} from './Table';
 export type {TabListProps, TabListRenderProps, TabPanelProps, TabPanelRenderProps, TabProps, TabsProps, TabRenderProps, TabsRenderProps} from './Tabs';
 export type {TagGroupProps, TagListProps, TagListRenderProps, TagProps, TagRenderProps} from './TagGroup';
 export type {TextAreaProps} from './TextArea';
@@ -138,7 +138,7 @@ export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';
 export type {ToggleButtonGroupProps, ToggleButtonGroupRenderProps} from './ToggleButtonGroup';
 export type {ToolbarProps, ToolbarRenderProps} from './Toolbar';
 export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from './Tooltip';
-export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps} from './Tree';
+export type {TreeProps, TreeRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps, TreeLoadMoreItemProps, TreeLoadMoreItemRenderProps} from './Tree';
 export type {DragAndDropHooks, DragAndDropOptions} from './useDragAndDrop';
 export type {DropIndicatorProps, DropIndicatorRenderProps} from './DragAndDrop';
 export type {ContextValue, RenderProps, SlotProps, StyleRenderProps} from './utils';

package/src/useDragAndDrop.tsx

@@ -50,7 +50,7 @@ interface DragHooks {
   useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>) => void,
   useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult,
   DragPreview?: typeof DragPreview,
-  renderDragPreview?: (items: DragItem[]) => JSX.Element,
+  renderDragPreview?: (items: DragItem[]) => JSX.Element | {element: JSX.Element, x: number, y: number},
   isVirtualDragging?: () => boolean
 }
 
@@ -81,7 +81,7 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
    * A function that renders a drag preview, which is shown under the user's cursor while dragging.
    * By default, a copy of the dragged element is rendered.
    */
-  renderDragPreview?: (items: DragItem[]) => JSX.Element,
+  renderDragPreview?: (items: DragItem[]) => JSX.Element | {element: JSX.Element, x: number, y: number},
   /**
    * A function that renders a drop indicator element between two items in a collection.
    * This should render a `<DropIndicator>` element. If this function is not provided, a

package/src/utils.tsx

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, RefObject,  DOMProps as SharedDOMProps} from '@react-types/shared';
 import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
-import React, {Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, UIEvent, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, useCallback, useContext, useMemo, useRef, useState} from 'react';
 
 export const DEFAULT_SLOT = Symbol('default');
 
@@ -63,21 +63,21 @@ export interface DOMProps extends StyleProps, SharedDOMProps {
   children?: ReactNode
 }
 
-export interface ScrollableProps<T extends Element> {
-  /** Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). */
-  onScroll?: (e: UIEvent<T>) => void
-}
+type ClassNameOrFunction<T> = string | ((values: T & {defaultClassName: string | undefined}) => string);
+type StyleOrFunction<T> = CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined);
 
 export interface StyleRenderProps<T> {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
-  className?: string | ((values: T & {defaultClassName: string | undefined}) => string),
+  className?: ClassNameOrFunction<T>,
   /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
-  style?: CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined)
+  style?: StyleOrFunction<T>
 }
 
+type ChildrenOrFunction<T> = ReactNode | ((values: T & {defaultChildren: ReactNode | undefined}) => ReactNode);
+
 export interface RenderProps<T> extends StyleRenderProps<T> {
   /** The children of the component. A function may be provided to alter the children based on component state. */
-  children?: ReactNode | ((values: T & {defaultChildren: ReactNode | undefined}) => ReactNode)
+  children?: ChildrenOrFunction<T>
 }
 
 interface RenderPropsHookOptions<T> extends RenderProps<T>, SharedDOMProps, AriaLabelingProps {
@@ -180,7 +180,7 @@ export function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, s
   return ctx;
 }
 
-export function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
+export function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E> | undefined, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
   let ctx = useSlottedContext(context, props.slot) || {};
   // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
   let {ref: contextRef, ...contextProps} = ctx as any;