react-aria-components 1.6.0 → 1.7.0

package/src/TableLayout.ts

@@ -15,7 +15,7 @@ import {LayoutOptionsDelegate} from './Virtualizer';
 import {TableColumnResizeStateContext} from './Table';
 import {useContext, useMemo} from 'react';
 
-export class TableLayout<T> extends BaseTableLayout<T> implements LayoutOptionsDelegate<TableLayoutProps> {
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends BaseTableLayout<T, O> implements LayoutOptionsDelegate<TableLayoutProps> {
   // Invalidate the layout whenever the column widths change.
   useLayoutOptions() {
     // This is not a React class component, just a regular class.

package/src/Tabs.tsx

@@ -15,7 +15,7 @@ import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRi
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
 
@@ -255,6 +255,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
   let renderProps = useRenderProps({
     ...props,
     id: undefined,
+    children: item.rendered,
     defaultClassName: 'react-aria-Tab',
     values: {
       isSelected,
@@ -277,7 +278,9 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
-      data-hovered={isHovered || undefined} />
+      data-hovered={isHovered || undefined}>
+      {renderProps.children}
+    </ElementType>
   );
 });
 
@@ -320,7 +323,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       // @ts-ignore
-      inert={!isSelected ? 'true' : undefined}
+      inert={inertValue(!isSelected)}
       data-inert={!isSelected ? 'true' : undefined}>
       <Provider
         values={[

package/src/TagGroup.tsx

@@ -75,7 +75,9 @@ interface TagGroupInnerProps {
 
 function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {
   let tagListRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let state = useListState({
     ...props,
     children: undefined,

package/src/TextField.tsx

@@ -12,13 +12,13 @@
 
 import {AriaTextFieldProps, useTextField} from 'react-aria';
 import {ContextValue, DOMProps, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {createHideableComponent} from '@react-aria/collections';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, useCallback, useRef, useState} from 'react';
 import {TextAreaContext} from './TextArea';
 import {TextContext} from './Text';
 
@@ -55,13 +55,15 @@ export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLD
 /**
  * A text field allows a user to enter a plain text value with a keyboard.
  */
-export const TextField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const TextField = /*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let inputRef = useRef(null);
   let [inputContextProps, mergedInputRef] = useContextProps({}, inputRef, InputContext);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let [inputElementType, setInputElementType] = useState('input');
   let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTextField<any>({
     ...removeDataAttributes(props),

package/src/Toast.tsx

@@ -0,0 +1,184 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useToast, useToastRegion} from 'react-aria';
+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 {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, useContext} from 'react';
+import {TextContext} from './Text';
+import {useObjectRef} from '@react-aria/utils';
+
+const ToastStateContext = createContext<ToastState<any> | null>(null);
+
+export interface ToastRegionRenderProps<T> {
+  /** A list of all currently visible toasts. */
+  visibleToasts: QueuedToast<T>[],
+  /**
+   * Whether the toast region is currently focused.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the toast region is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean
+}
+
+export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>> {
+  /** The queue of toasts to display. */
+  queue: ToastQueue<T>,
+  /** A function to render each toast. */
+  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
+}
+
+/**
+ * A ToastRegion displays one or more toast notifications.
+ */
+export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
+  let state = useToastQueue(props.queue);
+  let objectRef = useObjectRef(ref);
+  let {regionProps} = useToastRegion(props, state, objectRef);
+
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let renderProps = useRenderProps({
+    ...props,
+    children: undefined,
+    defaultClassName: 'react-aria-ToastRegion',
+    values: {
+      visibleToasts: state.visibleToasts,
+      isFocused,
+      isFocusVisible
+    }
+  });
+
+  let region = (
+    <ToastStateContext.Provider value={state}>
+      <div
+        {...renderProps}
+        {...mergeProps(regionProps, focusProps)}
+        ref={objectRef}
+        data-focused={isFocused || undefined}
+        data-focus-visible={isFocusVisible || undefined}>
+        {typeof props.children === 'function' ? <ToastList {...props} style={{display: 'contents'}} /> : props.children}
+      </div>
+    </ToastStateContext.Provider>
+  );
+
+  return state.visibleToasts.length > 0 && typeof document !== 'undefined'
+    ? createPortal(region, document.body)
+    : null;
+});
+
+// TODO: possibly export this so additional children can be added to the region, outside the list.
+const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLOListElement>) {
+  let state = useContext(ToastStateContext)!;
+  return (
+    // @ts-ignore
+    <ol ref={ref} style={props.style} className={props.className}>
+      {state.visibleToasts.map((toast) => (
+        <li key={toast.key} style={{display: 'contents'}}>
+          {props.children({toast})}
+        </li>
+      ))}
+    </ol>
+  );
+});
+
+export interface ToastRenderProps<T> {
+  /**
+   * The toast object to display.
+   */
+  toast: QueuedToast<T>,
+  /**
+   * Whether the toast is currently focused.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the toast is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean
+}
+
+export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>> {}
+
+/**
+ * A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
+ */
+export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast<T>(props: ToastProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  let state = useContext(ToastStateContext)!;
+  let objectRef = useObjectRef(ref);
+  let {toastProps, contentProps, titleProps, descriptionProps, closeButtonProps} = useToast(
+    props,
+    state,
+    objectRef
+  );
+
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Toast',
+    values: {
+      toast: props.toast,
+      isFocused,
+      isFocusVisible
+    }
+  });
+
+  return (
+    <div
+      {...renderProps}
+      {...mergeProps(toastProps, focusProps)}
+      ref={objectRef}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}>
+      <Provider
+        values={[
+          [ToastContentContext, contentProps],
+          [TextContext, {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              title: titleProps,
+              description: descriptionProps
+            }
+          }],
+          [ButtonContext, {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              close: closeButtonProps
+            }
+          }]
+        ]}>
+        {renderProps.children}
+      </Provider>
+    </div>
+  );
+});
+
+export const ToastContentContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+
+/**
+ * ToastContent wraps the main content of a toast notification.
+ */
+export const ToastContent = /*#__PURE__*/ forwardRef(function ToastContent(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ToastContentContext);
+  return (
+    <div className="react-aria-ToastContent" {...props} ref={ref}>
+      {props.children}
+    </div>
+  );
+});

package/src/Tree.tsx

@@ -10,17 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeGridListProps, useTreeGridList, useTreeGridListItem} from '@react-aria/tree';
+import {AriaTreeItemOptions, AriaTreeProps, FocusScope, mergeProps, useFocusRing,  useGridListSelectionCheckbox, useHover, useTree, useTreeItem} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {DisabledBehavior, Expandable, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {DisabledBehavior, Expandable, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection, RefObject} from '@react-types/shared';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
-import {FocusScope,  mergeProps, useFocusRing, useGridListSelectionCheckbox, useHover} from 'react-aria';
 import {Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {useControlledState} from '@react-stately/utils';
 
 class TreeCollection<T> implements ICollection<Node<T>> {
@@ -120,29 +119,29 @@ export interface TreeRenderProps {
 
 export interface TreeEmptyStateRenderProps extends Omit<TreeRenderProps, 'isEmpty'> {}
 
-export interface TreeProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<TreeRenderProps>, SlotProps, ScrollableProps<HTMLDivElement>, Expandable {
+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. */
   selectionBehavior?: SelectionBehavior,
   /** Provides content to display when there are no items in the list. */
   renderEmptyState?: (props: TreeEmptyStateRenderProps) => ReactNode,
   /**
    * Whether `disabledKeys` applies to all interactions, or only selection.
-   * @default 'selection'
+   * @default 'all'
    */
   disabledBehavior?: DisabledBehavior
 }
 
 
-export const UNSTABLE_TreeContext = createContext<ContextValue<TreeProps<any>, HTMLDivElement>>(null);
-export const UNSTABLE_TreeStateContext = createContext<TreeState<any> | null>(null);
+export const TreeContext = createContext<ContextValue<TreeProps<any>, HTMLDivElement>>(null);
+export const TreeStateContext = createContext<TreeState<any> | null>(null);
 
 /**
  * A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation
  * and selection.
  */
-export const UNSTABLE_Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
-  [props, ref] = useContextProps(props, ref, UNSTABLE_TreeContext);
+  [props, ref] = useContextProps(props, ref, TreeContext);
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>
@@ -163,7 +162,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     expandedKeys: propExpandedKeys,
     defaultExpandedKeys: propDefaultExpandedKeys,
     onExpandedChange,
-    disabledBehavior = 'selection'
+    disabledBehavior = 'all'
   } = props;
   let {CollectionRoot, isVirtualized, layoutDelegate} = useContext(CollectionRendererContext);
 
@@ -189,7 +188,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     disabledBehavior
   });
 
-  let {gridProps} = useTreeGridList({
+  let {gridProps} = useTree({
     ...props,
     isVirtualized,
     layoutDelegate
@@ -211,7 +210,6 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   });
 
   let emptyState: ReactNode = null;
-  let emptyStatePropOverrides: HTMLAttributes<HTMLElement> | null = null;
   if (state.collection.size === 0 && props.renderEmptyState) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     let {isEmpty, ...values} = renderValues;
@@ -236,7 +234,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       <div
         {...filterDOMProps(props)}
         {...renderProps}
-        {...mergeProps(gridProps, focusProps, emptyStatePropOverrides)}
+        {...mergeProps(gridProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
         onScroll={props.onScroll}
@@ -245,7 +243,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
         data-focus-visible={isFocusVisible || undefined}>
         <Provider
           values={[
-            [UNSTABLE_TreeStateContext, state]
+            [TreeStateContext, state]
           ]}>
           <CollectionRoot
             collection={state.collection}
@@ -260,30 +258,39 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
 
 // TODO: readd the rest of the render props when tree supports them
 export interface TreeItemRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {
-  /** Whether the tree item is expanded. */
-  isExpanded: boolean,
-  // TODO: api discussion, how do we feel about the below? This is so we can still style the row as grey when a child element within is focused
-  // Maybe should have this for the other collection item render props
-  /** Whether the tree item's children have keyboard focus. */
-  isFocusVisibleWithin: boolean
-}
-
-export interface TreeItemContentRenderProps extends ItemRenderProps {
-  // Whether the tree item is expanded.
+  /**
+   * Whether the tree item is expanded.
+   * @selector [data-expanded]
+   */
   isExpanded: boolean,
-  // Whether the tree item has child rows.
-  hasChildRows: boolean,
-  // What level the tree item has within the tree.
+  /**
+   * Whether the tree item has child tree items.
+   * @selector [data-has-child-items]
+   */
+  hasChildItems: boolean,
+  /**
+   * What level the tree item has within the tree.
+   * @selector [data-level="number"]
+   */
   level: number,
-  // Whether the tree item's children have keyboard focus.
-  isFocusVisibleWithin: boolean
+  /**
+   * Whether the tree item's children have keyboard focus.
+   * @selector [data-focus-visible-within]
+   */
+  isFocusVisibleWithin: boolean,
+  /** The state of the tree. */
+  state: TreeState<unknown>,
+  /** The unique id of the tree row. */
+  id: Key
 }
 
+export interface TreeItemContentRenderProps extends TreeItemRenderProps {}
+
 // The TreeItemContent is the one that accepts RenderProps because we would get much more complicated logic in TreeItem otherwise since we'd
 // need to do a bunch of check to figure out what is the Content and what are the actual collection elements (aka child rows) of the TreeItem
 export interface TreeItemContentProps extends Pick<RenderProps<TreeItemContentRenderProps>, 'children'> {}
 
-export const UNSTABLE_TreeItemContent = /*#__PURE__*/ createLeafComponent('content', function TreeItemContent(props: TreeItemContentProps) {
+export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', function TreeItemContent(props: TreeItemContentProps) {
   let values = useContext(TreeItemContentContext)!;
   let renderProps = useRenderProps({
     children: props.children,
@@ -298,7 +305,7 @@ export const UNSTABLE_TreeItemContent = /*#__PURE__*/ createLeafComponent('conte
 
 export const TreeItemContentContext = createContext<TreeItemContentRenderProps | null>(null);
 
-export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, Pick<AriaTreeItemOptions, 'hasChildItems'> {
   /** 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. */
@@ -308,20 +315,27 @@ export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRend
   /** An accessibility label for this tree item. */
   'aria-label'?: string,
   /** The content of the tree item along with any nested children. Supports static nested tree items or use of a Collection to dynamically render nested tree items. */
-  children: ReactNode
+  children: ReactNode,
+  /** Whether the item is disabled. */
+  isDisabled?: boolean,
+  /**
+   * Handler that is called when a user performs an action on this tree item. The exact user event depends on
+   * the collection's `selectionBehavior` prop and the interaction modality.
+   */
+  onAction?: () => void
 }
 
 /**
  * A TreeItem represents an individual item in a Tree.
  */
-export const UNSTABLE_TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends object>(props: TreeItemProps<T>, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) => {
-  let state = useContext(UNSTABLE_TreeStateContext)!;
+export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends object>(props: TreeItemProps<T>, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) => {
+  let state = useContext(TreeStateContext)!;
   ref = useObjectRef<HTMLDivElement>(ref);
   // TODO: remove this when we support description in tree row
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {rowProps, gridCellProps, expandButtonProps, descriptionProps, ...states} = useTreeGridListItem({node: item}, state, ref);
+  let {rowProps, gridCellProps, expandButtonProps, descriptionProps, ...states} = useTreeItem({node: item}, state, ref);
   let isExpanded = rowProps['aria-expanded'] === true;
-  let hasChildRows = [...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({
@@ -341,17 +355,21 @@ export const UNSTABLE_TreeItem = /*#__PURE__*/ createBranchComponent('item', <T
     state
   );
 
+  let selectionMode = state.selectionManager.selectionMode;
+  let selectionBehavior = state.selectionManager.selectionBehavior;
   let renderPropValues = React.useMemo<TreeItemContentRenderProps>(() => ({
     ...states,
     isHovered,
     isFocusVisible,
     isExpanded,
-    hasChildRows,
+    hasChildItems,
     level,
-    selectionMode: state.selectionManager.selectionMode,
-    selectionBehavior: state.selectionManager.selectionBehavior,
-    isFocusVisibleWithin
-  }), [states, isHovered, isFocusVisible, state.selectionManager, isExpanded, hasChildRows, level, isFocusVisibleWithin]);
+    selectionMode,
+    selectionBehavior,
+    isFocusVisibleWithin,
+    state,
+    id: item.key
+  }), [states, isHovered, isFocusVisible, selectionMode, selectionBehavior, isExpanded, hasChildItems, level, isFocusVisibleWithin, state, item.key]);
 
   let renderProps = useRenderProps({
     ...props,
@@ -373,7 +391,7 @@ export const UNSTABLE_TreeItem = /*#__PURE__*/ createBranchComponent('item', <T
 
   let expandButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
-    if (hasChildRows && !expandButtonRef.current) {
+    if (hasChildItems && !expandButtonRef.current) {
       console.warn('Expandable tree items must contain a expand button so screen reader users can expand/collapse the item.');
     }
   // eslint-disable-next-line
@@ -404,8 +422,8 @@ export const UNSTABLE_TreeItem = /*#__PURE__*/ createBranchComponent('item', <T
         {...renderProps}
         ref={ref}
         // TODO: missing selectionBehavior, hasAction and allowsSelection data attribute equivalents (available in renderProps). Do we want those?
-        data-expanded={(hasChildRows && isExpanded) || undefined}
-        data-has-child-rows={hasChildRows || undefined}
+        data-expanded={(hasChildItems && isExpanded) || undefined}
+        data-has-child-items={hasChildItems || undefined}
         data-level={level}
         data-selected={states.isSelected || undefined}
         data-disabled={states.isDisabled || undefined}
@@ -445,7 +463,7 @@ export const UNSTABLE_TreeItem = /*#__PURE__*/ createBranchComponent('item', <T
   );
 });
 
-export interface TreeLoadingIndicatorRenderProps {
+export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
   /**
    * What level the tree item has within the tree.
    * @selector [data-level]
@@ -453,13 +471,13 @@ export interface TreeLoadingIndicatorRenderProps {
   level: number
 }
 
-export interface TreeLoaderProps extends RenderProps<TreeLoadingIndicatorRenderProps>, StyleRenderProps<TreeLoadingIndicatorRenderProps> {}
+export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps>, StyleRenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps> {}
 
 export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader<T extends object>(props: TreeLoaderProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
-  let state = useContext(UNSTABLE_TreeStateContext);
+  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} = useTreeGridListItem({node: item}, state, ref);
+  let {rowProps} = useTreeItem({node: item}, state, ref);
   let level = rowProps['aria-level'] || 1;
 
   let ariaProps = {

package/src/Virtualizer.tsx

@@ -24,20 +24,35 @@ export interface LayoutOptionsDelegate<O> {
 
 interface ILayout<O> extends Layout<Node<unknown>, O>, Partial<DropTargetDelegate>, LayoutOptionsDelegate<O> {}
 
+interface LayoutClass<O> {
+  new(): ILayout<O>
+}
+
 export interface VirtualizerProps<O> {
   /** The child collection to virtualize (e.g. ListBox, GridList, or Table). */
   children: ReactNode,
   /** The layout object that determines the position and size of the visible elements. */
-  layout: ILayout<O>,
+  layout: LayoutClass<O> | ILayout<O>,
   /** Options for the layout. */
   layoutOptions?: O
 }
 
+interface LayoutContextValue {
+  layout: ILayout<any>,
+  layoutOptions?: any
+}
+
 const VirtualizerContext = createContext<VirtualizerState<any, any> | null>(null);
-const LayoutContext = createContext<Pick<VirtualizerProps<any>, 'layout' | 'layoutOptions'> | null>(null);
+const LayoutContext = createContext<LayoutContextValue | null>(null);
 
+/**
+ * A Virtualizer renders a scrollable collection of data using customizable layouts.
+ * It supports very large collections by only rendering visible items to the DOM, reusing
+ * them as the user scrolls.
+ */
 export function Virtualizer<O>(props: VirtualizerProps<O>) {
-  let {children, layout, layoutOptions} = props;
+  let {children, layout: layoutProp, layoutOptions} = props;
+  let layout = useMemo(() => typeof layoutProp === 'function' ? new layoutProp() : layoutProp, [layoutProp]);
   let renderer: CollectionRenderer = useMemo(() => ({
     isVirtualized: true,
     layoutDelegate: layout,