react-aria-components 1.6.0 → 1.7.1

package/src/Menu.tsx

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaMenuProps, FocusScope, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
+import {AriaMenuProps, FocusScope, mergeProps, useHover, useMenu, useMenuItem, useMenuSection, useMenuTrigger, useSubmenuTrigger} from 'react-aria';
 import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
-import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
+import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, RootMenuTriggerState, TreeState, useMenuTriggerState, useSubmenuTriggerState, useTreeState} from 'react-stately';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
-import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {FocusStrategy, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
 import {HeaderContext} from './Header';
@@ -22,7 +22,7 @@ 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 {PressResponder} from '@react-aria/interactions';
 import React, {
   createContext,
   ForwardedRef,
@@ -36,11 +36,9 @@ import React, {
   useRef,
   useState
 } from 'react';
-import {RootMenuTriggerState, useSubmenuTriggerState} from '@react-stately/menu';
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
-import {useSubmenuTrigger} from '@react-aria/menu';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<any> | null>(null);
@@ -70,7 +68,6 @@ export function MenuTrigger(props: MenuTriggerProps) {
     ref: ref,
     onResize: onResize
   });
-
   let scrollRef = useRef(null);
 
   return (
@@ -84,7 +81,8 @@ export function MenuTrigger(props: MenuTriggerProps) {
           triggerRef: ref,
           scrollRef,
           placement: 'bottom start',
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties,
+          'aria-labelledby': menuProps['aria-labelledby']
         }]
       ]}>
       <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
@@ -106,7 +104,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 +118,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 +137,7 @@ 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,
+          'aria-labelledby': submenuProps['aria-labelledby'],
           ...popoverProps
         }]
       ]}>
@@ -150,7 +147,18 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
   );
 }, props => props.children[0]);
 
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps, ScrollableProps<HTMLDivElement> {}
+export interface MenuRenderProps {
+  /**
+   * Whether the menu has no items and should display its empty state.
+   * @selector [data-empty]
+   */
+  isEmpty: boolean
+}
+
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+  /** Provides content to display when there are no items in the list. */
+  renderEmptyState?: () => ReactNode
+}
 
 /**
  * A menu displays a list of actions or options that a user can choose.
@@ -161,7 +169,7 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
   // Delay rendering the actual menu until we have the collection so that auto focus works properly.
   return (
     <CollectionBuilder content={<Collection {...props} />}>
-      {collection => collection.size > 0 && <MenuInner props={props} collection={collection} menuRef={ref} />}
+      {collection => <MenuInner props={props} collection={collection} menuRef={ref} />}
     </CollectionBuilder>
   );
 });
@@ -173,10 +181,10 @@ interface MenuInnerProps<T> {
 }
 
 function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInnerProps<T>) {
-  let {filterFn, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
   ref = useObjectRef(useMemo(() => mergeRefs(ref, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, ref]));
-  let filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);
+  let filteredCollection = useMemo(() => filter ? collection.UNSTABLE_filter(filter) : collection, [collection, filter]);
   let state = useTreeState({
     ...props,
     collection: filteredCollection as ICollection<Node<object>>,
@@ -189,9 +197,22 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
     defaultClassName: 'react-aria-Menu',
     className: props.className,
     style: props.style,
-    values: {}
+    values: {
+      isEmpty: state.collection.size === 0
+    }
   });
 
+  let emptyState: ReactElement | null = null;
+  if (state.collection.size === 0 && props.renderEmptyState) {
+    emptyState = (
+      <div
+        role="menuitem"
+        style={{display: 'contents'}}>
+        {props.renderEmptyState()}
+      </div>
+    );
+  }
+
   return (
     <FocusScope>
       <div
@@ -200,21 +221,28 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
+        data-empty={state.collection.size === 0 || undefined}
         onScroll={props.onScroll}>
         <Provider
           values={[
             [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}
             persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)}
             scrollRef={ref} />
         </Provider>
+        {emptyState}
       </div>
     </FocusScope>
   );
@@ -343,7 +371,6 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
     selectionManager
   }, state, ref);
 
-  let {isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
     isDisabled: states.isDisabled
   });
@@ -355,7 +382,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
     values: {
       ...states,
       isHovered,
-      isFocusVisible,
+      isFocusVisible: states.isFocusVisible,
       selectionMode: selectionManager.selectionMode,
       selectionBehavior: selectionManager.selectionBehavior,
       hasSubmenu: !!props['aria-haspopup'],
@@ -367,13 +394,13 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
 
   return (
     <ElementType
-      {...mergeProps(menuItemProps, focusProps, hoverProps)}
+      {...mergeProps(menuItemProps, hoverProps)}
       {...renderProps}
       ref={ref}
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}
       data-focused={states.isFocused || undefined}
-      data-focus-visible={isFocusVisible || undefined}
+      data-focus-visible={states.isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
       data-selected={states.isSelected || undefined}
       data-selection-mode={selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode}
@@ -383,6 +410,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
         values={[
           [TextContext, {
             slots: {
+              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }

package/src/Meter.tsx

@@ -45,7 +45,9 @@ export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter
   } = props;
   value = clamp(value, minValue, maxValue);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     meterProps,
     labelProps

package/src/NumberField.tsx

@@ -35,6 +35,11 @@ export interface NumberFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the number field is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
   /**
    * State of the number field.
    */
@@ -61,7 +66,9 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     groupProps,
@@ -82,7 +89,8 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     values: {
       state,
       isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false
+      isInvalid: validation.isInvalid || false,
+      isRequired: props.isRequired || false
     },
     defaultClassName: 'react-aria-NumberField'
   });
@@ -117,6 +125,7 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         ref={ref}
         slot={props.slot || undefined}
         data-disabled={props.isDisabled || undefined}
+        data-required={props.isRequired || undefined}
         data-invalid={validation.isInvalid || undefined} />
       {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
     </Provider>

package/src/Popover.tsx

@@ -10,17 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';
+import {AriaLabelingProps, forwardRefType, RefObject} from '@react-types/shared';
+import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {focusSafely} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext, useEffect, 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, AriaLabelingProps {
   /**
    * 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 +81,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.
  */
@@ -90,6 +94,7 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
   let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
   let isHidden = useIsHidden();
+  let {direction} = useLocale();
 
   // If we are in a hidden tree, we still need to preserve our children.
   if (isHidden) {
@@ -117,7 +122,8 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
       triggerRef={props.triggerRef!}
       state={state}
       popoverRef={ref}
-      isExiting={isExiting} />
+      isExiting={isExiting}
+      dir={direction} />
   );
 });
 
@@ -126,7 +132,8 @@ interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderP
   isEntering?: boolean,
   isExiting: boolean,
   UNSTABLE_portalContainer?: Element,
-  trigger?: string
+  trigger?: string,
+  dir?: 'ltr' | 'rtl'
 }
 
 function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: PopoverInnerProps) {
@@ -134,6 +141,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';
   useLayoutEffect(() => {
     if (arrowRef.current && state.isOpen) {
       setArrowWidth(arrowRef.current.getBoundingClientRect().width);
@@ -143,7 +153,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>;
@@ -159,27 +172,66 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     }
   });
 
+  // Automatically render Popover with role=dialog except when isNonModal is true,
+  // or a dialog is already nested inside the popover.
+  let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
+  let [isDialog, setDialog] = useState(false);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+    }
+  }, [ref, shouldBeDialog]);
+
+  // Focus the popover itself on mount, unless a child element is already focused.
+  useEffect(() => {
+    if (isDialog && ref.current && !ref.current.contains(document.activeElement)) {
+      focusSafely(ref.current);
+    }
+  }, [isDialog, ref]);
+
   let style = {...popoverProps.style, ...renderProps.style};
+  let overlay = (
+    <div
+      {...mergeProps(filterDOMProps(props as any), popoverProps)}
+      {...renderProps}
+      role={isDialog ? 'dialog' : undefined}
+      tabIndex={isDialog ? -1 : undefined}
+      aria-label={props['aria-label']}
+      aria-labelledby={props['aria-labelledby']}
+      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} shouldContainFocus={isDialog} 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}
-        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} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>
+      {overlay}
     </Overlay>
   );
 }

package/src/ProgressBar.tsx

@@ -51,7 +51,9 @@ export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarPro
   } = props;
   value = clamp(value, minValue, maxValue);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     progressBarProps,
     labelProps

package/src/RadioGroup.tsx

@@ -125,7 +125,9 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     validationBehavior
   });
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useRadioGroup({
     ...props,
     label,

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,13 +53,15 @@ 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';
   let inputRef = useRef<HTMLInputElement>(null);
   let [inputContextProps, mergedInputRef] = useContextProps({}, inputRef, InputContext);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let state = useSearchFieldState({
     ...props,
     validationBehavior

package/src/Select.tsx

@@ -114,7 +114,9 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
 
   // Get props for child elements from useSelect
   let buttonRef = useRef<HTMLButtonElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     triggerProps,
@@ -177,7 +179,8 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
           triggerRef: buttonRef,
           scrollRef,
           placement: 'bottom start',
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties,
+          'aria-labelledby': menuProps['aria-labelledby']
         }],
         [ListBoxContext, {...menuProps, ref: scrollRef}],
         [ListStateContext, state],

package/src/Slider.tsx

@@ -55,7 +55,9 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
   let trackRef = useRef<HTMLDivElement>(null);
   let numberFormatter = useNumberFormatter(props.formatOptions);
   let state = useSliderState({...props, numberFormatter});
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     groupProps,
     trackProps,
@@ -221,7 +223,9 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let {index = 0} = props;
   let defaultInputRef = useRef<HTMLInputElement>(null);
   let inputRef = userInputRef || defaultInputRef;
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled} = useSliderThumb({
     ...props,
     index,

package/src/Table.tsx

@@ -41,8 +41,21 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
 
   commit(firstKey: Key, lastKey: Key, isSSR = false) {
     this.updateColumns(isSSR);
+
+    this.rows = [];
+    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(row);
+    }
+
     super.commit(firstKey, lastKey, isSSR);
-    this.rows = [...this.getChildren(this.body.key)];
   }
 
   private updateColumns(isSSR: boolean) {
@@ -526,11 +539,11 @@ export interface TableHeaderRenderProps {
 
 export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents {
   /** A list of table columns. */
-  columns?: T[],
+  columns?: Iterable<T>,
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
   children?: ReactNode | ((item: T) => ReactElement),
   /** Values that should invalidate the column cache when using dynamic collections. */
-  dependencies?: any[]
+  dependencies?: ReadonlyArray<any>
 }
 
 /**
@@ -737,7 +750,6 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
       {...mergeProps(filterDOMProps(props as any), columnHeaderProps, focusProps, hoverProps)}
       {...renderProps}
       style={style}
-      colSpan={column.colspan}
       ref={ref}
       data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
@@ -976,12 +988,12 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
 
 export interface RowRenderProps extends ItemRenderProps {
   /** Whether the row's children have keyboard focus. */
-  isFocusVisibleWithin: boolean
+  isFocusVisibleWithin: boolean,
+  /** The unique id of the row. */
+  id?: Key
 }
 
 export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps, HoverEvents {
-  /** The unique id of the row. */
-  id?: Key,
   /** A list of columns used when dynamically rendering cells. */
   columns?: Iterable<T>,
   /** The cells within the row. Supports static items or a function for dynamic rendering. */
@@ -989,7 +1001,7 @@ export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMPr
   /** The object value that this row represents. When using dynamic collections, this is set automatically. */
   value?: T,
   /** Values that should invalidate the cell cache when using dynamic collections. */
-  dependencies?: any[],
+  dependencies?: ReadonlyArray<any>,
   /** A string representation of the row's contents, used for features like typeahead. */
   textValue?: string,
   /** Whether the row is disabled. */
@@ -998,7 +1010,9 @@ export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMPr
    * Handler that is called when a user performs an action on the row. The exact user event depends on
    * the collection's `selectionBehavior` prop and the interaction modality.
    */
-  onAction?: () => void
+  onAction?: () => void,
+  /** The unique id of the row. */
+  id?: Key
 }
 
 /**
@@ -1075,7 +1089,8 @@ export const Row = /*#__PURE__*/ createBranchComponent(
         selectionBehavior: state.selectionManager.selectionBehavior,
         isDragging,
         isDropTarget: dropIndicator?.isDropTarget,
-        isFocusVisibleWithin
+        isFocusVisibleWithin,
+        id: item.key
       }
     });
 
@@ -1166,14 +1181,18 @@ export interface CellRenderProps {
    * Whether the cell is currently hovered with a mouse.
    * @selector [data-hovered]
    */
-  isHovered: boolean
+  isHovered: boolean,
+  /**
+   * The unique id of the cell.
+   **/
+  id?: Key
 }
 
 export interface CellProps extends RenderProps<CellRenderProps> {
-  /** The unique id of the cell. */
-  id?: Key,
   /** A string representation of the cell's contents, used for features like typeahead. */
-  textValue?: string
+  textValue?: string,
+  /** Indicates how many columns the data cell spans. */
+  colSpan?: number
 }
 
 /**
@@ -1203,7 +1222,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
       isFocused,
       isFocusVisible,
       isPressed,
-      isHovered
+      isHovered,
+      id: cell.key
     }
   });