react-aria-components 1.4.0 → 1.5.0

package/src/Dialog.tsx

@@ -10,14 +10,16 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
-import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps} from './utils';
+import {ButtonContext} from './Button';
+import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
-import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
+import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
@@ -39,7 +41,9 @@ export const OverlayTriggerStateContext = createContext<OverlayTriggerState | nu
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  */
 export function DialogTrigger(props: DialogTriggerProps) {
-  let state = useOverlayTriggerState(props);
+  // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
+  // This is needed to handle submenus.
+  let state = useMenuTriggerState(props);
 
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
@@ -55,6 +59,7 @@ export function DialogTrigger(props: DialogTriggerProps) {
     <Provider
       values={[
         [OverlayTriggerStateContext, state],
+        [RootMenuTriggerStateContext, state],
         [DialogContext, overlayProps],
         [PopoverContext, {trigger: 'DialogTrigger', triggerRef: buttonRef}]
       ]}>
@@ -76,13 +81,6 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   }, ref);
   let state = useContext(OverlayTriggerStateContext);
 
-  let children = props.children;
-  if (typeof children === 'function') {
-    children = children({
-      close: state?.close || (() => {})
-    });
-  }
-
   if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
     // If aria-labelledby exists on props, we know it came from context.
     // Use that as a fallback in case there is no title slot.
@@ -93,14 +91,23 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
     }
   }
 
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Dialog',
+    className: props.className,
+    style: props.style,
+    children: props.children,
+    values: {
+      close: state?.close || (() => {})
+    }
+  });
+
   return (
     <section
       {...filterDOMProps(props)}
       {...dialogProps}
+      {...renderProps}
       ref={ref}
-      slot={props.slot || undefined}
-      style={props.style}
-      className={props.className ?? 'react-aria-Dialog'}>
+      slot={props.slot || undefined}>
       <Provider
         values={[
           [HeadingContext, {
@@ -108,9 +115,17 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
               [DEFAULT_SLOT]: {},
               title: {...titleProps, level: 2}
             }
+          }],
+          [ButtonContext, {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              close: {
+                onPress: () => state?.close()
+              }
+            }
           }]
         ]}>
-        {children}
+        {renderProps.children}
       </Provider>
     </section>
   );

package/src/Disclosure.tsx

@@ -63,7 +63,7 @@ function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivE
 }
 
 /**
- * A DisclosureGroup is a grouping of related disclosures, sometimes called an Accordion.
+ * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
  * It supports both single and multiple expanded items.
  */
 const _DisclosureGroup = forwardRef(DisclosureGroup);
@@ -71,9 +71,7 @@ export {_DisclosureGroup as DisclosureGroup};
 
 export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps {
   /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
-  id?: Key,
-  /** The children of the component. A function may be provided to alter the children based on component state. */
-  children: ReactNode | ((values: DisclosureRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode)
+  id?: Key
 }
 
 export interface DisclosureRenderProps {
@@ -110,7 +108,7 @@ const InternalDisclosureContext = createContext<InternalDisclosureContextValue |
 
 function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DisclosureContext);
-  let groupState = useContext(DisclosureGroupStateContext);
+  let groupState = useContext(DisclosureGroupStateContext)!;
   let {id, ...otherProps} = props;
 
   // Generate an id if one wasn't provided.
@@ -183,7 +181,15 @@ function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
   );
 }
 
-export interface DisclosurePanelProps extends RenderProps<{}> {
+export interface DisclosurePanelRenderProps {
+  /**
+   * Whether keyboard focus is within the disclosure panel.
+   * @selector [data-focus-visible-within]
+   */
+  isFocusVisibleWithin: boolean
+}
+
+export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps {
   /**
    * The accessibility role for the disclosure's panel.
    * @default 'group'
@@ -209,8 +215,10 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivE
       isFocusVisibleWithin
     }
   });
+  let DOMProps = filterDOMProps(props);
   return (
     <div
+      {...DOMProps}
       ref={mergeRefs(ref, panelRef)}
       {...mergeProps(panelProps, focusWithinProps)}
       {...renderProps}

package/src/DragAndDrop.tsx

@@ -65,7 +65,7 @@ export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, drop
 export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
   // Persist the focused key and the drop target key.
   let focusedKey = selectionManager.focusedKey;
-  let dropTargetKey: Key | null = null;
+  let dropTargetKey: Key | null | undefined = null;
   if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === 'item') {
     dropTargetKey = dropState.target.key;
     if (dropState.target.dropPosition === 'after') {
@@ -75,6 +75,6 @@ export function useDndPersistedKeys(selectionManager: MultipleSelectionManager,
   }
 
   return useMemo(() => {
-    return new Set([focusedKey, dropTargetKey].filter(k => k !== null));
+    return new Set([focusedKey, dropTargetKey].filter(k => k != null));
   }, [focusedKey, dropTargetKey]);
 }

package/src/GridList.tsx

@@ -375,6 +375,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
             values={[
               [CheckboxContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   selection: checkboxProps
                 }
               }],

package/src/ListBox.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
-import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
+import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
 import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
@@ -246,7 +246,7 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
             [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
-            [SectionContext, {render: ListBoxSection}]
+            [SectionContext, {name: 'ListBoxSection', render: ListBoxSection}]
           ]}>
           <CollectionRoot
             collection={collection}
@@ -261,7 +261,9 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
   );
 }
 
-function ListBoxSection<T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>) {
+export interface ListBoxSectionProps<T> extends SectionProps<T> {}
+
+function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
@@ -271,7 +273,7 @@ function ListBoxSection<T extends object>(props: SectionProps<T>, ref: Forwarded
     'aria-label': props['aria-label'] ?? undefined
   });
   let renderProps = useRenderProps({
-    defaultClassName: 'react-aria-Section',
+    defaultClassName: className,
     className: props.className,
     style: props.style,
     values: {}
@@ -293,6 +295,12 @@ function ListBoxSection<T extends object>(props: SectionProps<T>, ref: Forwarded
   );
 }
 
+/**
+ * A ListBoxSection represents a section within a ListBox.
+ */
+const _ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSection);
+export {_ListBoxSection as ListBoxSection};
+
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
 export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents {

package/src/Menu.tsx

@@ -17,12 +17,13 @@ import {Collection, CollectionBuilder, createBranchComponent, createLeafComponen
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef, useResizeObserver} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps} from '@react-types/shared';
+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, PopoverProps} from './Popover';
-import {PressResponder, useHover, useInteractOutside} from '@react-aria/interactions';
+import {PopoverContext} from './Popover';
+import {PressResponder, useHover} from '@react-aria/interactions';
 import React, {
   createContext,
   ForwardedRef,
@@ -32,7 +33,6 @@ import React, {
   RefObject,
   useCallback,
   useContext,
-  useEffect,
   useRef,
   useState
 } from 'react';
@@ -44,6 +44,7 @@ import {useSubmenuTrigger} from '@react-aria/menu';
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<any> | null>(null);
 export const RootMenuTriggerStateContext = createContext<RootMenuTriggerState | null>(null);
+const SelectionManagerContext = createContext<SelectionManager | null>(null);
 
 export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children: ReactNode
@@ -51,7 +52,6 @@ export interface MenuTriggerProps extends BaseMenuTriggerProps {
 
 export function MenuTrigger(props: MenuTriggerProps) {
   let state = useMenuTriggerState(props);
-
   let ref = useRef<HTMLButtonElement>(null);
   let {menuTriggerProps, menuProps} = useMenuTrigger({
     ...props,
@@ -119,7 +119,6 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
   let submenuTriggerState = useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
   let submenuRef = useRef<HTMLDivElement>(null);
   let itemRef = useObjectRef(ref);
-  let popoverContext = useSlottedContext(PopoverContext)!;
   let {parentMenuRef} = useContext(SubmenuTriggerContext)!;
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
@@ -138,7 +137,9 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
           trigger: 'SubmenuTrigger',
           triggerRef: itemRef,
           placement: 'end top',
-          UNSTABLE_portalContainer: popoverContext.UNSTABLE_portalContainer || undefined,
+          // Prevent parent popover from hiding submenu.
+          // @ts-ignore
+          'data-react-aria-top-layer': true,
           ...popoverProps
         }]
       ]}>
@@ -173,33 +174,9 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
     collection,
     children: undefined
   });
-  let [popoverContainer, setPopoverContainer] = useState<HTMLDivElement | null>(null);
+  let triggerState = useContext(RootMenuTriggerStateContext);
   let {isVirtualized, CollectionRoot} = useContext(CollectionRendererContext);
-  let {menuProps} = useMenu({...props, isVirtualized}, state, ref);
-  let rootMenuTriggerState = useContext(RootMenuTriggerStateContext)!;
-  let popoverContext = useContext(PopoverContext)!;
-
-  let isSubmenu = (popoverContext as PopoverProps)?.trigger === 'SubmenuTrigger';
-  useInteractOutside({
-    ref,
-    onInteractOutside: (e) => {
-      if (rootMenuTriggerState && !popoverContainer?.contains(e.target as HTMLElement)) {
-        rootMenuTriggerState.close();
-      }
-    },
-    isDisabled: isSubmenu || rootMenuTriggerState?.expandedKeysStack.length === 0
-  });
-
-  let prevPopoverContainer = useRef<HTMLDivElement | null>(null) ;
-  let [leftOffset, setLeftOffset] = useState({left: 0});
-  useEffect(() => {
-    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
-      prevPopoverContainer.current = popoverContainer;
-      let {left} = popoverContainer.getBoundingClientRect();
-      setLeftOffset({left: -1 * left});
-    }
-  }, [leftOffset, popoverContainer]);
-
+  let {menuProps} = useMenu({...props, isVirtualized, onClose: props.onClose || triggerState?.close}, state, ref);
   let renderProps = useRenderProps({
     defaultClassName: 'react-aria-Menu',
     className: props.className,
@@ -220,10 +197,10 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
           values={[
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
-            [PopoverContext, {UNSTABLE_portalContainer: popoverContainer || undefined}],
-            [SectionContext, {render: MenuSection}],
+            [SectionContext, {name: 'MenuSection', render: MenuSection}],
             [SubmenuTriggerContext, {parentMenuRef: ref}],
-            [MenuItemContext, null]
+            [MenuItemContext, null],
+            [SelectionManagerContext, state.selectionManager]
           ]}>
           <CollectionRoot
             collection={collection}
@@ -231,7 +208,6 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
             scrollRef={ref} />
         </Provider>
       </div>
-      <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: 0, ...leftOffset}} />
     </FocusScope>
   );
 }
@@ -242,7 +218,40 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
 const _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
 export {_Menu as Menu};
 
-function MenuSection<T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>) {
+export interface MenuSectionProps<T> extends SectionProps<T>, MultipleSelection {}
+
+// A subclass of SelectionManager that forwards focus-related properties to the parent,
+// but has its own local selection state.
+class GroupSelectionManager extends SelectionManager {
+  private parent: SelectionManager;
+
+  constructor(parent: SelectionManager, state: MultipleSelectionState) {
+    super(parent.collection, state);
+    this.parent = parent;
+  }
+
+  get focusedKey() {
+    return this.parent.focusedKey;
+  }
+
+  get isFocused() {
+    return this.parent.isFocused;
+  }
+
+  setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void {
+    return this.parent.setFocusedKey(key, childFocusStrategy);
+  }
+
+  setFocused(isFocused: boolean): void {
+    this.parent.setFocused(isFocused);
+  }
+
+  get childFocusStrategy() {
+    return this.parent.childFocusStrategy;
+  }
+}
+
+function MenuSection<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
   let state = useContext(MenuStateContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let [headingRef, heading] = useSlot();
@@ -251,25 +260,39 @@ function MenuSection<T extends object>(props: SectionProps<T>, ref: ForwardedRef
     'aria-label': section.props['aria-label'] ?? undefined
   });
   let renderProps = useRenderProps({
-    defaultClassName: 'react-aria-Section',
+    defaultClassName: className,
     className: section.props?.className,
     style: section.props?.style,
     values: {}
   });
 
+  let parent = useContext(SelectionManagerContext)!;
+  let selectionState = useMultipleSelectionState(props);
+  let manager = props.selectionMode != null ? new GroupSelectionManager(parent, selectionState) : parent;
+
   return (
     <section
       {...filterDOMProps(props as any)}
       {...groupProps}
       {...renderProps}
       ref={ref}>
-      <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
+      <Provider
+        values={[
+          [HeaderContext, {...headingProps, ref: headingRef}],
+          [SelectionManagerContext, manager]
+        ]}>
         <CollectionBranch collection={state.collection} parent={section} />
-      </HeaderContext.Provider>
+      </Provider>
     </section>
   );
 }
 
+/**
+ * A MenuSection represents a section within a Menu.
+ */
+const _MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSection);
+export {_MenuSection as MenuSection};
+
 export interface MenuItemRenderProps extends ItemRenderProps {
   /**
    * Whether the item has a submenu.
@@ -310,8 +333,14 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
   let id = useSlottedContext(MenuItemContext)?.id as string;
   let state = useContext(MenuStateContext)!;
   let ref = useObjectRef<any>(forwardedRef);
+  let selectionManager = useContext(SelectionManagerContext)!;
 
-  let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({...props, id, key: item.key}, state, ref);
+  let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({
+    ...props,
+    id,
+    key: item.key,
+    selectionManager
+  }, state, ref);
 
   let {isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
@@ -326,8 +355,8 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
       ...states,
       isHovered,
       isFocusVisible,
-      selectionMode: state.selectionManager.selectionMode,
-      selectionBehavior: state.selectionManager.selectionBehavior,
+      selectionMode: selectionManager.selectionMode,
+      selectionBehavior: selectionManager.selectionBehavior,
       hasSubmenu: !!props['aria-haspopup'],
       isOpen: props['aria-expanded'] === 'true'
     }
@@ -346,7 +375,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
       data-selected={states.isSelected || undefined}
-      data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}
+      data-selection-mode={selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode}
       data-has-submenu={!!props['aria-haspopup'] || undefined}
       data-open={props['aria-expanded'] === 'true' || undefined}>
       <Provider

package/src/OverlayArrow.tsx

@@ -16,7 +16,7 @@ import {PlacementAxis} from 'react-aria';
 import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 interface OverlayArrowContextValue extends OverlayArrowProps {
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
@@ -30,7 +30,7 @@ export interface OverlayArrowRenderProps {
    * The placement of the overlay relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
    */
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
@@ -38,9 +38,11 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
   let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
     position: 'absolute',
-    [placement]: '100%',
     transform: placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'
   };
+  if (placement != null) {
+    style[placement] = '100%';
+  }
 
   let renderProps = useRenderProps({
     ...props,

package/src/Popover.tsx

@@ -65,7 +65,7 @@ export interface PopoverRenderProps {
    * The placement of the popover relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
    */
-  placement: PlacementAxis,
+  placement: PlacementAxis | null,
   /**
    * Whether the popover is currently entering. Use this to apply animations.
    * @selector [data-entering]
@@ -165,7 +165,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
   let style = {...popoverProps.style, ...renderProps.style};
 
   return (
-    <Overlay isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>
+    <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)}

package/src/Select.tsx

@@ -62,12 +62,12 @@ export interface SelectRenderProps {
   isRequired: boolean
 }
 
-export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps {}
+export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps {}
 
 export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
 export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
 
-function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (

package/src/Table.tsx

@@ -1118,6 +1118,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
             values={[
               [CheckboxContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   selection: checkboxProps
                 }
               }],
@@ -1142,7 +1143,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
   },
   props => {
     if (props.id == null && typeof props.children === 'function') {
-      console.warn('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
+      throw new Error('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
     }
 
     let dependencies = [props.value].concat(props.dependencies);
@@ -1193,7 +1194,6 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
   let {dragState} = useContext(DragAndDropContext);
   let {isVirtualized} = useContext(CollectionRendererContext);
 
-  // @ts-ignore
   cell.column = state.collection.columns[cell.index];
 
   let {gridCellProps, isPressed} = useTableCell({

package/src/ToggleButton.tsx

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton} from 'react-aria';
+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} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {forwardRefType, Key} from '@react-types/shared';
+import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
 
 export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPending'> {
@@ -29,19 +30,35 @@ export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPend
   state: ToggleState
 }
 
-export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {}
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {
+  /** When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. */
+  id?: Key
+}
 
 export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>({});
 
 function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonContext);
-  let state = useToggleState(props);
-  let {buttonProps, isPressed} = useToggleButton(props, state, ref);
+  let groupState = useContext(ToggleGroupStateContext);
+  let state = useToggleState(groupState && props.id != null ? {
+    isSelected: groupState.selectedKeys.has(props.id),
+    onChange(isSelected) {
+      groupState.setSelected(props.id!, isSelected);
+    }
+  } : props);
+
+  let {buttonProps, isPressed, isSelected, isDisabled} = groupState && props.id != null
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ? useToggleButtonGroupItem({...props, id: props.id}, groupState, ref)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    : useToggleButton({...props, id: props.id != null ? String(props.id) : undefined}, state, ref);
+
   let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
   let {hoverProps, isHovered} = useHover(props);
   let renderProps = useRenderProps({
     ...props,
-    values: {isHovered, isPressed, isFocused, isSelected: state.isSelected, isFocusVisible, isDisabled: props.isDisabled || false, state},
+    id: undefined,
+    values: {isHovered, isPressed, isFocused, isSelected: state.isSelected, isFocusVisible, isDisabled, state},
     defaultClassName: 'react-aria-ToggleButton'
   });
 
@@ -52,9 +69,9 @@ function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElem
       ref={ref}
       slot={props.slot || undefined}
       data-focused={isFocused || undefined}
-      data-disabled={props.isDisabled || undefined}
+      data-disabled={isDisabled || undefined}
       data-pressed={isPressed || undefined}
-      data-selected={state.isSelected || undefined}
+      data-selected={isSelected || undefined}
       data-hovered={isHovered || undefined}
       data-focus-visible={isFocusVisible || undefined} />
   );