react-aria-components 3.0.0-nightly-412a51816-250219 → 3.0.0-nightly-a792c1ad5-250222

package/src/Menu.tsx

@@ -15,12 +15,12 @@ import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, cr
 import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {DialogContext, OverlayTriggerStateContext} from './Dialog';
 import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {FocusStrategy, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
-import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
 import {PressResponder, useHover} from '@react-aria/interactions';
 import React, {
@@ -70,7 +70,6 @@ export function MenuTrigger(props: MenuTriggerProps) {
     ref: ref,
     onResize: onResize
   });
-
   let scrollRef = useRef(null);
 
   return (
@@ -106,7 +105,7 @@ export interface SubmenuTriggerProps {
   delay?: number
 }
 
-const SubmenuTriggerContext = createContext<{parentMenuRef: RefObject<HTMLElement | null>} | null>(null);
+const SubmenuTriggerContext = createContext<{parentMenuRef: RefObject<HTMLElement | null>, shouldUseVirtualFocus?: boolean} | null>(null);
 
 /**
  * A submenu trigger is used to wrap a submenu's trigger item and the submenu itself.
@@ -120,11 +119,12 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
   let submenuTriggerState = useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
   let submenuRef = useRef<HTMLDivElement>(null);
   let itemRef = useObjectRef(ref);
-  let {parentMenuRef} = useContext(SubmenuTriggerContext)!;
+  let {parentMenuRef, shouldUseVirtualFocus} = useContext(SubmenuTriggerContext)!;
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
     submenuRef,
-    delay: props.delay
+    delay: props.delay,
+    shouldUseVirtualFocus
   }, submenuTriggerState, itemRef);
 
   return (
@@ -138,9 +138,62 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
           trigger: 'SubmenuTrigger',
           triggerRef: itemRef,
           placement: 'end top',
-          // Prevent parent popover from hiding submenu.
-          // @ts-ignore
-          'data-react-aria-top-layer': true,
+          ...popoverProps
+        }]
+      ]}>
+      <CollectionBranch collection={state.collection} parent={item} />
+      {props.children[1]}
+    </Provider>
+  );
+}, props => props.children[0]);
+
+// TODO: make SubdialogTrigger unstable
+export interface SubDialogTriggerProps {
+  /**
+   * The contents of the SubDialogTrigger. The first child should be an Item (the trigger) and the second child should be the Popover (for the subdialog).
+   */
+  children: ReactElement[],
+  /**
+   * The delay time in milliseconds for the subdialog to appear after hovering over the trigger.
+   * @default 200
+   */
+  delay?: number
+}
+
+/**
+ * A subdialog trigger is used to wrap a subdialog's trigger item and the subdialog itself.
+ *
+ * @version alpha
+ */
+export const SubDialogTrigger =  /*#__PURE__*/ createBranchComponent('subdialogtrigger', (props: SubDialogTriggerProps, ref: ForwardedRef<HTMLDivElement>, item) => {
+  let {CollectionBranch} = useContext(CollectionRendererContext);
+  let state = useContext(MenuStateContext)!;
+  let rootMenuTriggerState = useContext(RootMenuTriggerStateContext)!;
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
+  let subdialogRef = useRef<HTMLDivElement>(null);
+  let itemRef = useObjectRef(ref);
+  let {parentMenuRef, shouldUseVirtualFocus} = useContext(SubmenuTriggerContext)!;
+  let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
+    parentMenuRef,
+    submenuRef: subdialogRef,
+    type: 'dialog',
+    delay: props.delay,
+    shouldUseVirtualFocus
+    // TODO: might need to have something like isUnavailable like we do for ContextualHelpTrigger
+  }, submenuTriggerState, itemRef);
+
+  return (
+    <Provider
+      values={[
+        [MenuItemContext, {...submenuTriggerProps, onAction: undefined, ref: itemRef}],
+        [DialogContext, {'aria-labelledby': submenuProps['aria-labelledby']}],
+        [MenuContext, submenuProps],
+        [OverlayTriggerStateContext, submenuTriggerState],
+        [PopoverContext, {
+          ref: subdialogRef,
+          trigger: 'SubDialogTrigger',
+          triggerRef: itemRef,
+          placement: 'end top',
           ...popoverProps
         }]
       ]}>
@@ -206,9 +259,14 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
             [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
-            [SubmenuTriggerContext, {parentMenuRef: ref}],
+            [SubmenuTriggerContext, {parentMenuRef: ref, shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus}],
             [MenuItemContext, null],
-            [SelectionManagerContext, state.selectionManager]
+            [UNSTABLE_InternalAutocompleteContext, null],
+            [SelectionManagerContext, state.selectionManager],
+            /* Ensure root MenuTriggerState is defined, in case Menu is rendered outside a MenuTrigger. */
+            /* We assume the context can never change between defined and undefined. */
+            /* eslint-disable-next-line react-hooks/rules-of-hooks */
+            [RootMenuTriggerStateContext, triggerState ?? useMenuTriggerState({})]
           ]}>
           <CollectionRoot
             collection={state.collection}

package/src/Popover.tsx

@@ -20,7 +20,7 @@ import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useRef, useState} from 'react';
 import {useIsHidden} from '@react-aria/collections';
 
-export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
+export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
   /**
    * The name of the component that triggered the popover. This is reflected on the element
    * as the `data-trigger` attribute, and can be used to provide specific
@@ -80,6 +80,9 @@ export interface PopoverRenderProps {
 
 export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
 
+// Stores a ref for the portal container for a group of popovers (e.g. submenus).
+const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);
+
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
@@ -137,6 +140,9 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
   // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
   let arrowRef = useRef<HTMLDivElement>(null);
   let [arrowWidth, setArrowWidth] = useState(0);
+  let containerRef = useRef<HTMLDivElement | null>(null);
+  let groupCtx = useContext(PopoverGroupContext);
+  let isSubPopover = groupCtx && (props.trigger === 'SubmenuTrigger' || props.trigger === 'SubDialogTrigger');
   useLayoutEffect(() => {
     if (arrowRef.current && state.isOpen) {
       setArrowWidth(arrowRef.current.getBoundingClientRect().width);
@@ -146,7 +152,10 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
   let {popoverProps, underlayProps, arrowProps, placement} = usePopover({
     ...props,
     offset: props.offset ?? 8,
-    arrowSize: arrowWidth
+    arrowSize: arrowWidth,
+    // If this is a submenu/subdialog, use the root popover's container 
+    // to detect outside interaction and add aria-hidden.
+    groupRef: isSubPopover ? groupCtx! : containerRef
   }, state);
 
   let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
@@ -163,27 +172,44 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
   });
 
   let style = {...popoverProps.style, ...renderProps.style};
+  let overlay = (
+    <div
+      {...mergeProps(filterDOMProps(props as any), popoverProps)}
+      {...renderProps}
+      ref={ref}
+      slot={props.slot || undefined}
+      style={style}
+      dir={props.dir}
+      data-trigger={props.trigger}
+      data-placement={placement}
+      data-entering={isEntering || undefined}
+      data-exiting={isExiting || undefined}>
+      {!props.isNonModal && <DismissButton onDismiss={state.close} />}
+      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
+        {renderProps.children}
+      </OverlayArrowContext.Provider>
+      <DismissButton onDismiss={state.close} />
+    </div>
+  );
+
+  // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
+  if (!isSubPopover) {
+    return (
+      <Overlay {...props} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>
+        {!props.isNonModal && state.isOpen && <div data-testid="underlay" {...underlayProps} style={{position: 'fixed', inset: 0}} />}
+        <div ref={containerRef} style={{display: 'contents'}}>
+          <PopoverGroupContext.Provider value={containerRef}>
+            {overlay}
+          </PopoverGroupContext.Provider>
+        </div>
+      </Overlay>
+    );
+  }
 
+  // Submenus/subdialogs are mounted into the root popover's container.
   return (
-    <Overlay {...props} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>
-      {!props.isNonModal && state.isOpen && <div data-testid="underlay" {...underlayProps} style={{position: 'fixed', inset: 0}} />}
-      <div
-        {...mergeProps(filterDOMProps(props as any), popoverProps)}
-        {...renderProps}
-        ref={ref}
-        slot={props.slot || undefined}
-        style={style}
-        dir={props.dir}
-        data-trigger={props.trigger}
-        data-placement={placement}
-        data-entering={isEntering || undefined}
-        data-exiting={isExiting || undefined}>
-        {!props.isNonModal && <DismissButton onDismiss={state.close} />}
-        <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
-          {renderProps.children}
-        </OverlayArrowContext.Provider>
-        <DismissButton onDismiss={state.close} />
-      </div>
+    <Overlay {...props} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>
+      {overlay}
     </Overlay>
   );
 }

package/src/SearchField.tsx

@@ -13,14 +13,14 @@
 import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, 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 {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {createContext, ForwardedRef, useRef} from 'react';
 import {SearchFieldState, useSearchFieldState} from 'react-stately';
 import {TextContext} from './Text';
 
@@ -53,7 +53,7 @@ export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, H
 /**
  * A search field allows a user to enter and clear a search query.
  */
-export const SearchField = /*#__PURE__*/ (forwardRef as forwardRefType)(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const SearchField = /*#__PURE__*/ createHideableComponent(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SearchFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';

package/src/Table.tsx

@@ -41,51 +41,21 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
 
   commit(firstKey: Key, lastKey: Key, isSSR = false) {
     this.updateColumns(isSSR);
-    this.updateRows(isSSR);
-    super.commit(firstKey, lastKey, isSSR);
-  }
 
-  private updateRows(isSSR: boolean) {
     this.rows = [];
-    let visit = (node: Node<T>) => {
-      if (node.hasChildNodes) {
-        let rowHasCellWithColSpan = false;
-        let childNodes: Iterable<GridNode<T>> = this.getChildren(node.key);
-        for (let child of childNodes) {
-          if (child.type === 'cell' && child.props?.colSpan !== undefined) {
-            rowHasCellWithColSpan = true;
-            break;
-          }
-        }
-
-        if (rowHasCellWithColSpan) {
-          let last: GridNode<T> | null = null;
-          for (let child of childNodes) {
-            child.colSpan = child.props?.colSpan;
-            child.colspan = child.props?.colSpan;
-            child.colIndex = !last ? child.index : (last.colIndex ?? last.index) + (last.colSpan ?? 1);
-            last = child;
-          }
-
-          let lastColIndex = last?.colIndex ?? 0 + 1; // internally colIndex is 0 based
-          let lastColSpan = last?.colSpan ?? 1;
-          let numberOfCellsInRow = lastColIndex + lastColSpan;
-
-          if (numberOfCellsInRow !== this.columns.length && !isSSR) {
-            throw new Error(`Cell count must match column count. Found ${numberOfCellsInRow} cells and ${this.columns.length} columns.`);
-          }
-        } else {
-          let numberOfCellsInRow = [...childNodes].length;
-          if (numberOfCellsInRow !== this.columns.length && !isSSR) {
-            throw new Error(`Cell count must match column count. Found ${numberOfCellsInRow} cells and ${this.columns.length} columns.`);
-          }
+    for (let row of this.getChildren(this.body.key)) {
+      let lastChildKey = (row as CollectionNode<T>).lastChildKey;
+      if (lastChildKey != null) {
+        let lastCell = this.getItem(lastChildKey) as GridNode<T>;
+        let numberOfCellsInRow = (lastCell.colIndex ?? lastCell.index) + (lastCell.colSpan ?? 1);
+        if (numberOfCellsInRow !== this.columns.length && !isSSR) {
+          throw new Error(`Cell count must match column count. Found ${numberOfCellsInRow} cells and ${this.columns.length} columns.`);
         }
       }
-      this.rows.push(node);
-    };
-    for (let child of this.getChildren(this.body.key)) {
-      visit(child);
+      this.rows.push(row);
     }
+
+    super.commit(firstKey, lastKey, isSSR);
   }
 
   private updateColumns(isSSR: boolean) {

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/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,7 +55,7 @@ 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';

package/src/Toast.tsx

@@ -0,0 +1,185 @@
+/*
+ * 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, useToast, useToastRegion} from '@react-aria/toast';
+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 {mergeProps, useFocusRing} from 'react-aria';
+import {QueuedToast, ToastQueue, ToastState, useToastQueue} from '@react-stately/toast';
+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>
+  );
+});