react-aria-components 1.7.0 → 1.8.0

package/i18n/index.mjs

@@ -83,7 +83,7 @@ function getLocalizationScript(locale, dict = dictionary) {
   return getPackageLocalizationScript(locale, strings);
 }
 
-let deps = {"@react-aria/autocomplete":["@react-aria/combobox","@react-aria/searchfield"],"@react-aria/color":["@react-aria/numberfield","@react-aria/spinbutton","@react-stately/color"],"@react-aria/combobox":["@react-aria/menu","@react-aria/overlays"],"@react-aria/datepicker":["@react-aria/spinbutton","@react-stately/datepicker"],"@react-aria/dnd":["@react-aria/overlays"],"@react-aria/gridlist":["@react-aria/grid"],"@react-aria/menu":["@react-aria/overlays"],"@react-aria/numberfield":["@react-aria/spinbutton"],"@react-aria/table":["@react-aria/grid"],"@react-aria/tag":["@react-aria/gridlist"],"@react-aria/tree":["@react-aria/gridlist"],"react-aria-components":["@react-aria/autocomplete","@react-aria/dnd"]};
+let deps = {"@react-aria/autocomplete":["@react-aria/combobox","@react-aria/searchfield"],"@react-aria/color":["@react-aria/numberfield","@react-aria/spinbutton","@react-stately/color"],"@react-aria/combobox":["@react-aria/menu","@react-aria/overlays"],"@react-aria/datepicker":["@react-aria/spinbutton","@react-stately/datepicker"],"@react-aria/dnd":["@react-aria/overlays"],"@react-aria/gridlist":["@react-aria/grid"],"@react-aria/menu":["@react-aria/overlays"],"@react-aria/numberfield":["@react-aria/spinbutton"],"@react-aria/table":["@react-aria/grid"],"@react-aria/tag":["@react-aria/gridlist"],"@react-aria/tree":["@react-aria/gridlist"],"react-aria-components":["@react-aria/autocomplete","@react-aria/dnd","@react-aria/overlays"]};
 
 function createLocalizedStringDictionary(packages) {
   let strings = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A library of styleable components built using React Aria",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -37,31 +37,33 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.7.0",
-    "@internationalized/string": "^3.2.5",
-    "@react-aria/autocomplete": "3.0.0-beta.0",
-    "@react-aria/collections": "3.0.0-beta.0",
-    "@react-aria/dnd": "^3.9.0",
-    "@react-aria/focus": "^3.20.0",
-    "@react-aria/interactions": "^3.24.0",
-    "@react-aria/live-announcer": "^3.4.1",
-    "@react-aria/toolbar": "3.0.0-beta.13",
-    "@react-aria/utils": "^3.28.0",
-    "@react-aria/virtualizer": "^4.1.2",
-    "@react-stately/autocomplete": "3.0.0-beta.0",
-    "@react-stately/layout": "^4.2.0",
-    "@react-stately/selection": "^3.20.0",
-    "@react-stately/table": "^3.14.0",
-    "@react-stately/utils": "^3.10.5",
-    "@react-stately/virtualizer": "^4.3.0",
-    "@react-types/form": "^3.7.10",
-    "@react-types/grid": "^3.3.0",
-    "@react-types/shared": "^3.28.0",
-    "@react-types/table": "^3.11.0",
+    "@internationalized/date": "^3.8.0",
+    "@internationalized/string": "^3.2.6",
+    "@react-aria/autocomplete": "3.0.0-beta.2",
+    "@react-aria/collections": "3.0.0-rc.0",
+    "@react-aria/dnd": "^3.9.2",
+    "@react-aria/focus": "^3.20.2",
+    "@react-aria/interactions": "^3.25.0",
+    "@react-aria/live-announcer": "^3.4.2",
+    "@react-aria/overlays": "^3.27.0",
+    "@react-aria/ssr": "^3.9.8",
+    "@react-aria/toolbar": "3.0.0-beta.15",
+    "@react-aria/utils": "^3.28.2",
+    "@react-aria/virtualizer": "^4.1.4",
+    "@react-stately/autocomplete": "3.0.0-beta.1",
+    "@react-stately/layout": "^4.2.2",
+    "@react-stately/selection": "^3.20.1",
+    "@react-stately/table": "^3.14.1",
+    "@react-stately/utils": "^3.10.6",
+    "@react-stately/virtualizer": "^4.3.2",
+    "@react-types/form": "^3.7.11",
+    "@react-types/grid": "^3.3.1",
+    "@react-types/shared": "^3.29.0",
+    "@react-types/table": "^3.12.0",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.38.0",
-    "react-stately": "^3.36.0",
+    "react-aria": "^3.39.0",
+    "react-stately": "^3.37.0",
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
@@ -74,5 +76,5 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0"
   },
-  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
+  "gitHead": "9b66d270572f482948afee95622a85cdf68ed408"
 }

package/src/Autocomplete.tsx

@@ -15,7 +15,7 @@ import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomple
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
-import React, {createContext, RefObject, useRef} from 'react';
+import React, {createContext, ReactNode, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
@@ -36,7 +36,7 @@ export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutoco
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
  */
-export function Autocomplete(props: AutocompleteProps) {
+export function Autocomplete(props: AutocompleteProps): ReactNode {
   let ctx = useSlottedContext(AutocompleteContext, props.slot);
   props = mergeProps(ctx, props);
   let {filter, disableAutoFocusFirst} = props;

package/src/Calendar.tsx

@@ -24,7 +24,7 @@ import {
   VisuallyHidden
 } from 'react-aria';
 import {ButtonContext} from './Button';
-import {CalendarDate, createCalendar, DateDuration, endOfMonth, getWeeksInMonth, isSameDay, isSameMonth} from '@internationalized/date';
+import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {DOMAttributes, FocusableElement, forwardRefType, HoverEvents} from '@react-types/shared';
@@ -62,7 +62,14 @@ export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarPro
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+
+  /**
+   * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+   * object for a given calendar identifier. If not provided, the `createCalendar` function
+   * from `@internationalized/date` will be used.
+   */
+  createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
 export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps {
@@ -70,7 +77,14 @@ export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeC
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+
+  /**
+   * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+   * object for a given calendar identifier. If not provided, the `createCalendar` function
+   * from `@internationalized/date` will be used.
+   */
+  createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
 export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
@@ -87,7 +101,7 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   let state = useCalendarState({
     ...props,
     locale,
-    createCalendar
+    createCalendar: props.createCalendar || createCalendar
   });
 
   let {calendarProps, prevButtonProps, nextButtonProps, errorMessageProps, title} = useCalendar(props, state);
@@ -160,7 +174,7 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
   let state = useRangeCalendarState({
     ...props,
     locale,
-    createCalendar
+    createCalendar: props.createCalendar || createCalendar
   });
 
   let {calendarProps, prevButtonProps, nextButtonProps, errorMessageProps, title} = useRangeCalendar(
@@ -329,7 +343,7 @@ interface InternalCalendarGridContextValue {
   headerProps: DOMAttributes<FocusableElement>,
   weekDays: string[],
   startDate: CalendarDate,
-  firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined
+  weeksInMonth: number
 }
 
 const InternalCalendarGridContext = createContext<InternalCalendarGridContextValue | null>(null);
@@ -351,7 +365,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
 
   let firstDayOfWeek = calenderProps?.firstDayOfWeek ?? rangeCalenderProps?.firstDayOfWeek;
 
-  let {gridProps, headerProps, weekDays} = useCalendarGrid({
+  let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid({
     startDate,
     endDate: endOfMonth(startDate),
     weekdayStyle: props.weekdayStyle,
@@ -359,7 +373,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   }, state);
 
   return (
-    <InternalCalendarGridContext.Provider value={{headerProps, weekDays, startDate, firstDayOfWeek}}>
+    <InternalCalendarGridContext.Provider value={{headerProps, weekDays, startDate, weeksInMonth}}>
       <table
         {...filterDOMProps(props as any)}
         {...gridProps}
@@ -442,9 +456,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;
-  let {startDate, firstDayOfWeek} = useContext(InternalCalendarGridContext)!;
-  let {locale} = useLocale();
-  let weeksInMonth = getWeeksInMonth(startDate, locale, firstDayOfWeek);
+  let {startDate, weeksInMonth} = useContext(InternalCalendarGridContext)!;
 
   return (
     <tbody

package/src/Collection.tsx

@@ -102,7 +102,9 @@ export const SectionContext = createContext<SectionContextValue | null>(null);
 /** @deprecated */
 export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>): JSX.Element => {
   let {name, render} = useContext(SectionContext)!;
-  console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
+  }
   return render(props, ref, section, 'react-aria-Section');
 });
 
@@ -177,6 +179,7 @@ function useCollectionRender(
 
 export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
-export function usePersistedKeys(focusedKey: Key | null) {
+type PersistedKeysReturnValue = Set<Key> | null;
+export function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue {
   return useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
 }

package/src/ColorPicker.tsx

@@ -16,7 +16,7 @@ import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
-import React, {createContext} from 'react';
+import React, {createContext, ReactNode} from 'react';
 
 export interface ColorPickerRenderProps {
   /** The currently selected color. */
@@ -32,7 +32,7 @@ export const ColorPickerStateContext = createContext<ColorPickerState | null>(nu
  * A ColorPicker synchronizes a color value between multiple React Aria color components.
  * It simplifies building color pickers with customizable layouts via composition.
  */
-export function ColorPicker(props: ColorPickerProps) {
+export function ColorPicker(props: ColorPickerProps): ReactNode {
   let ctx = useSlottedContext(ColorPickerContext, props.slot);
   props = mergeProps(ctx, props);
   let state = useColorPickerState(props);

package/src/ColorWheel.tsx

@@ -77,6 +77,8 @@ export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrack
 export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
   let state = useContext(ColorWheelStateContext)!;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {className, style, ...rest} = props;
 
   let renderProps = useRenderProps({
     ...props,
@@ -89,7 +91,7 @@ export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorW
 
   return (
     <div
-      {...props}
+      {...rest}
       {...renderProps}
       ref={ref}
       data-disabled={state.isDisabled || undefined} />

package/src/DateField.tsx

@@ -92,7 +92,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
     <Provider
       values={[
         [DateFieldStateContext, state],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
         [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
@@ -108,7 +108,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
-        data-invalid={state.isInvalid || undefined} />
+        data-invalid={state.isInvalid || undefined}
+        data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
 });
@@ -157,7 +158,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
     <Provider
       values={[
         [TimeFieldStateContext, state],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
         [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
@@ -173,7 +174,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
-        data-invalid={state.isInvalid || undefined} />
+        data-invalid={state.isInvalid || undefined} 
+        data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
 });
@@ -241,7 +243,7 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef
       values={[
         [DateFieldStateContext, state],
         [InputContext, {...inputProps, ref: inputRef}],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}]
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]
       ]}>
       <DateInputInner {...props} />
     </Provider>
@@ -261,7 +263,8 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
         ref={ref}
         slot={props.slot || undefined}
         className={className ?? 'react-aria-DateInput'}
-        isInvalid={state.isInvalid}>
+        isInvalid={state.isInvalid}
+        isDisabled={state.isDisabled}>
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
       </Group>
       <Input />
@@ -328,11 +331,12 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let {segmentProps} = useDateSegment(segment, state, domRef);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});
+  let {isEditable, ...segmentRest} = segment;
   let renderProps = useRenderProps({
     ...otherProps,
     values: {
-      ...segment,
-      isReadOnly: !segment.isEditable,
+      ...segmentRest,
+      isReadOnly: !isEditable,
       isInvalid: state.isInvalid,
       isDisabled: state.isDisabled,
       isHovered,
@@ -352,7 +356,7 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       ref={domRef}
       data-placeholder={segment.isPlaceholder || undefined}
       data-invalid={state.isInvalid || undefined}
-      data-readonly={!segment.isEditable || undefined}
+      data-readonly={!isEditable || undefined}
       data-disabled={state.isDisabled || undefined}
       data-type={segment.type}
       data-hovered={isHovered || undefined}

package/src/Dialog.tsx

@@ -40,7 +40,7 @@ export const OverlayTriggerStateContext = createContext<OverlayTriggerState | nu
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  */
-export function DialogTrigger(props: DialogTriggerProps) {
+export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
   // This is needed to handle submenus.
   let state = useMenuTriggerState(props);
@@ -93,7 +93,7 @@ export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dial
     // Use that as a fallback in case there is no title slot.
     if (props['aria-labelledby']) {
       dialogProps['aria-labelledby'] = props['aria-labelledby'];
-    } else {
+    } else if (process.env.NODE_ENV !== 'production') {
       console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
     }
   }

package/src/DragAndDrop.tsx

@@ -45,7 +45,9 @@ export const DropIndicator = forwardRef(function DropIndicator(props: DropIndica
   return <>{render(props, ref)}</>;
 });
 
-export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
+type RenderDropIndicatorRetValue = ((target: ItemDropTarget) => ReactNode | undefined) | undefined
+
+export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): RenderDropIndicatorRetValue {
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
   let isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.();
   let fn = useCallback((target: ItemDropTarget) => {
@@ -59,7 +61,7 @@ export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, drop
   return dragAndDropHooks?.useDropIndicator ? fn : undefined;
 }
 
-export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
+export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): Set<Key> {
   // Persist the focused key and the drop target key.
   let focusedKey = selectionManager.focusedKey;
   let dropTargetKey: Key | null | undefined = null;

package/src/GridList.tsx

@@ -139,6 +139,9 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   let dragHooksProvided = useRef(isListDraggable);
   let dropHooksProvided = useRef(isListDroppable);
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
     if (dragHooksProvided.current !== isListDraggable) {
       console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
     }
@@ -344,7 +347,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
   }, []);
 
   useEffect(() => {
-    if (!item.textValue) {
+    if (!item.textValue && process.env.NODE_ENV !== 'production') {
       console.warn('A `textValue` prop is required for <GridListItem> elements with non-plain text children in order to support accessibility features such as type to select.');
     }
   }, [item.textValue]);

package/src/ListBox.tsx

@@ -155,6 +155,9 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
   let dragHooksProvided = useRef(isListDraggable);
   let dropHooksProvided = useRef(isListDroppable);
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
     if (dragHooksProvided.current !== isListDraggable) {
       console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
     }
@@ -373,7 +376,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
   });
 
   useEffect(() => {
-    if (!item.textValue) {
+    if (!item.textValue && process.env.NODE_ENV !== 'production') {
       console.warn('A `textValue` prop is required for <ListBoxItem> elements with non-plain text children in order to support accessibility features such as type to select.');
     }
   }, [item.textValue]);

package/src/Menu.tsx

@@ -49,7 +49,7 @@ export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children: ReactNode
 }
 
-export function MenuTrigger(props: MenuTriggerProps) {
+export function MenuTrigger(props: MenuTriggerProps): ReactNode {
   let state = useMenuTriggerState(props);
   let ref = useRef<HTMLButtonElement>(null);
   let {menuTriggerProps, menuProps} = useMenuTrigger({

package/src/Modal.tsx

@@ -30,6 +30,7 @@ export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTrigger
   /**
    * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
    * @default document.body
+   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
    */
   UNSTABLE_portalContainer?: Element
 }

package/src/OverlayArrow.tsx

@@ -11,7 +11,8 @@
  */
 
 import {ContextValue, RenderProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {DOMProps, forwardRefType} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import {PlacementAxis} from 'react-aria';
 import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
@@ -23,7 +24,7 @@ export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContex
   placement: 'bottom'
 });
 
-export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>, RenderProps<OverlayArrowRenderProps> {}
+export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>, RenderProps<OverlayArrowRenderProps>, DOMProps {}
 
 export interface OverlayArrowRenderProps {
   /**
@@ -61,9 +62,11 @@ export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     Object.keys(renderProps.style).forEach(key => renderProps.style![key] === undefined && delete renderProps.style![key]);
   }
 
+  let DOMProps = filterDOMProps(props);
+
   return (
     <div
-      {...props}
+      {...DOMProps}
       {...renderProps}
       style={{
         ...style,

package/src/Popover.tsx

@@ -46,6 +46,7 @@ export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPo
   /**
    * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
    * @default document.body
+   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
    */
   UNSTABLE_portalContainer?: Element,
   /**
@@ -154,7 +155,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     ...props,
     offset: props.offset ?? 8,
     arrowSize: arrowWidth,
-    // If this is a submenu/subdialog, use the root popover's container 
+    // 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);

package/src/Separator.tsx

@@ -23,13 +23,14 @@ export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLE
 export const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
-  let {elementType, orientation, style, className} = props;
+  let {elementType, orientation, style, className, slot, ...otherProps} = props;
   let Element = (elementType as ElementType) || 'hr';
   if (Element === 'hr' && orientation === 'vertical') {
     Element = 'div';
   }
 
   let {separatorProps} = useSeparator({
+    ...otherProps,
     elementType,
     orientation
   });
@@ -41,6 +42,6 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function
       style={style}
       className={className ?? 'react-aria-Separator'}
       ref={ref}
-      slot={props.slot || undefined} />
+      slot={slot || undefined} />
   );
 });

package/src/Table.tsx

@@ -389,6 +389,9 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
   let dragHooksProvided = useRef(hasDragHooks);
   let dropHooksProvided = useRef(hasDropHooks);
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
     if (dragHooksProvided.current !== hasDragHooks) {
       console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
     }
@@ -701,7 +704,7 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
   let isResizing = false;
   if (layoutState) {
     isResizing = layoutState.resizingColumn === column.key;
-  } else {
+  } else if (process.env.NODE_ENV !== 'production') {
     for (let prop in ['width', 'defaultWidth', 'minWidth', 'maxWidth']) {
       if (prop in column.props) {
         console.warn(`The ${prop} prop on a <Column> only applies when a <Table> is wrapped in a <ResizableTableContainer>. If you aren't using column resizing, you can set the width of a column with CSS.`);
@@ -912,7 +915,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends CollectionProps<T>, StyleRenderProps<TableBodyRenderProps> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps> {
   /** Provides content to display when there are no rows in the table. */
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }
@@ -1067,7 +1070,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
 
     let dragButtonRef = useRef<HTMLButtonElement>(null);
     useEffect(() => {
-      if (dragState && !dragButtonRef.current) {
+      if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') {
         console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
       }
     // eslint-disable-next-line
@@ -1189,6 +1192,8 @@ export interface CellRenderProps {
 }
 
 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,
   /** Indicates how many columns the data cell spans. */

package/src/TableLayout.ts

@@ -17,7 +17,7 @@ import {useContext, useMemo} from 'react';
 
 export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends BaseTableLayout<T, O> implements LayoutOptionsDelegate<TableLayoutProps> {
   // Invalidate the layout whenever the column widths change.
-  useLayoutOptions() {
+  useLayoutOptions(): TableLayoutProps {
     // This is not a React class component, just a regular class.
     /* eslint-disable react-hooks/rules-of-hooks */
     let colResizeState = useContext(TableColumnResizeStateContext);

package/src/TagGroup.tsx

@@ -227,7 +227,7 @@ export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, f
   });
 
   useEffect(() => {
-    if (!item.textValue) {
+    if (!item.textValue && process.env.NODE_ENV !== 'production') {
       console.warn('A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.');
     }
   }, [item.textValue]);

package/src/TextArea.tsx

@@ -7,7 +7,7 @@ export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
 
 export const TextAreaContext = createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>({});
 
-let filterHoverProps = (props: TextAreaProps) => {
+let filterHoverProps = (props: TextAreaProps): TextAreaProps => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let {onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
   return otherProps;