react-aria-components 1.10.1 → 1.11.0

package/src/GridList.tsx

@@ -14,12 +14,12 @@ import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
-import {filterDOMProps, inertValue, LoadMoreSentinelProps, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
@@ -56,13 +56,16 @@ export interface GridListRenderProps {
   state: ListState<unknown>
 }
 
-export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Whether typeahead navigation is disabled.
    * @default false
    */
   disallowTypeAhead?: boolean,
-  /** How multiple selection should behave in the collection. */
+  /**
+   * How multiple selection should behave in the collection.
+   * @default "toggle"
+   */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList. */
   dragAndDropHooks?: DragAndDropHooks,
@@ -194,8 +197,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   }
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  // TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
-  let isEmpty = state.collection.size === 0 || (state.collection.size === 1 && state.collection.getItem(state.collection.getFirstKey()!)?.type === 'loader');
+  let isEmpty = state.collection.size === 0;
   let renderValues = {
     isDropTarget: isRootDropTarget,
     isEmpty,
@@ -225,12 +227,12 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...renderProps}
-        {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
+        {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
         ref={ref}
         slot={props.slot || undefined}
         onScroll={props.onScroll}
@@ -261,7 +263,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
 export interface GridListItemRenderProps extends ItemRenderProps {}
 
-export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -356,6 +358,10 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
     }
   }, [item.textValue]);
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
   return (
     <>
       {dropIndicator && !dropIndicator.isHidden &&
@@ -366,8 +372,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
         </div>
       }
       <div
-        {...mergeProps(filterDOMProps(props as any), rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
         ref={ref}
         data-selected={states.isSelected || undefined}
         data-disabled={states.isDisabled || undefined}
@@ -497,7 +502,7 @@ function RootDropIndicator() {
   );
 }
 
-export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The load more spinner to render when loading additional items.
    */
@@ -508,7 +513,7 @@ export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps
   isLoading?: boolean
 }
 
-export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const GridListLoadMoreItem = createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -520,7 +525,7 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
     sentinelRef,
     scrollOffset
   }), [onLoadMore, scrollOffset, state?.collection]);
-  UNSTABLE_useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
+  useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
 
   let renderProps = useRenderProps({
     ...otherProps,
@@ -529,6 +534,9 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
     defaultClassName: 'react-aria-GridListLoadingIndicator',
     values: null
   });
+  // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+  // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+  // item count
 
   return (
     <>
@@ -540,9 +548,8 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
       {isLoading && renderProps.children && (
         <div
           {...renderProps}
-          {...mergeProps(filterDOMProps(props as any))}
+          {...filterDOMProps(props, {global: true})}
           role="row"
-          aria-rowindex={isVirtualized ? item.index + 1 : undefined}
           ref={ref}>
           <div
             aria-colindex={isVirtualized ? 1 : undefined}

package/src/HiddenDateInput.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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 {CalendarDate, CalendarDateTime, parseDate, parseDateTime} from '@internationalized/date';
+import {DateFieldState, DatePickerState, DateSegmentType} from 'react-stately';
+import React, {ReactNode} from 'react';
+import {useVisuallyHidden} from 'react-aria';
+
+interface AriaHiddenDateInputProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string,
+  /** HTML form input name. */
+  name?: string,
+  /** Sets the disabled state of the input. */
+  isDisabled?: boolean
+}
+
+interface HiddenDateInputProps extends AriaHiddenDateInputProps {
+  /**
+   * State for the input.
+   */
+  state: DateFieldState | DatePickerState
+}
+
+export interface HiddenDateAria {
+  /** Props for the container element. */
+  containerProps: React.HTMLAttributes<HTMLDivElement>,
+  /** Props for the hidden input element. */
+  inputProps: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+const dateSegments = ['day', 'month', 'year'];
+const granularityMap = {'hour': 1, 'minute': 2, 'second': 3};
+
+export function useHiddenDateInput(props: HiddenDateInputProps, state: DateFieldState | DatePickerState) : HiddenDateAria {
+  let {
+    autoComplete,
+    isDisabled,
+    name
+  } = props;
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      // Prevent page scrolling.
+      position: 'fixed',
+      top: 0,
+      left: 0
+    }
+  });
+
+  let inputStep = 60;
+  if (state.granularity === 'second') {
+    inputStep = 1;
+  } else if (state.granularity === 'hour') {
+    inputStep = 3600; 
+  }
+
+  let dateValue = state.value == null ? '' : state.value.toString();
+
+  let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
+
+  let timeSegments = ['hour', 'minute', 'second'];
+  // Depending on the granularity, we only want to validate certain time segments
+  let end = 0;
+  if (timeSegments.includes(state.granularity)) {
+    end = granularityMap[state.granularity];
+    timeSegments = timeSegments.slice(0, end);
+  }
+
+  return {
+    containerProps: {
+      ...visuallyHiddenProps,
+      'aria-hidden': true,
+      // @ts-ignore
+      ['data-react-aria-prevent-focus']: true,
+      // @ts-ignore
+      ['data-a11y-ignore']: 'aria-hidden-focus'
+    },
+    inputProps: {
+      tabIndex: -1,
+      autoComplete,
+      disabled: isDisabled,
+      type: inputType,
+      // We set the form prop to an empty string to prevent the hidden date input's value from being submitted
+      form: '',
+      name,
+      step: inputStep,
+      value: dateValue,
+      onChange: (e) => {
+        let targetString = e.target.value.toString();
+        if (targetString) {
+          try {
+            let targetValue: CalendarDateTime | CalendarDate = parseDateTime(targetString);
+            if (state.granularity === 'day') {
+              targetValue = parseDate(targetString);
+            }
+            // We check to to see if setSegment exists in the state since it only exists in DateFieldState and not DatePickerState.
+            // The setValue method has different behavior depending on if it's coming from DateFieldState or DatePickerState.
+            // In DateFieldState, setValue firsts checks to make sure that each segment is filled before committing the newValue 
+            // which is why in the code below we first set each segment to validate it before committing the new value. 
+            // However, in DatePickerState, since we have to be able to commit values from the Calendar popover, we are also able to 
+            // set a new value when the field itself is empty.
+            if ('setSegment' in state) {
+              for (let type in targetValue) {
+                if (dateSegments.includes(type)) {
+                  state.setSegment(type as DateSegmentType, targetValue[type]);
+                }
+                if (timeSegments.includes(type)) {
+                  state.setSegment(type as DateSegmentType, targetValue[type]);
+                }
+              }
+            }
+            state.setValue(targetValue);
+          } catch {
+            // ignore
+          }
+        }
+      }
+    }
+  };
+}
+
+export function HiddenDateInput(props: HiddenDateInputProps): ReactNode | null {
+  let {state} = props;
+  let {containerProps, inputProps} = useHiddenDateInput({...props}, state);
+  return (
+    <div {...containerProps} data-testid="hidden-dateinput-container">
+      <input {...inputProps} />
+    </div>
+  );
+}

package/src/Link.tsx

@@ -12,10 +12,11 @@
 
 import {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react';
 
-export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps {}
+export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {}
 
 export interface LinkRenderProps {
   /**
@@ -78,11 +79,14 @@ export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(p
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.onClick;
+
   return (
     <ElementType
       ref={ref}
       slot={props.slot || undefined}
-      {...mergeProps(renderProps, linkProps, hoverProps, focusProps)}
+      {...mergeProps(DOMProps, renderProps, linkProps, hoverProps, focusProps)}
       data-focused={isFocused || undefined}
       data-hovered={isHovered || undefined}
       data-pressed={isPressed || undefined}

package/src/ListBox.tsx

@@ -13,12 +13,12 @@
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
-import {filterDOMProps, inertValue, LoadMoreSentinelProps, mergeRefs, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {filterDOMProps, inertValue, LoadMoreSentinelProps, mergeRefs, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
@@ -57,8 +57,11 @@ export interface ListBoxRenderProps {
   state: ListState<unknown>
 }
 
-export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
-  /** How multiple selection should behave in the collection. */
+export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * How multiple selection should behave in the collection.
+   * @default "toggle"
+   */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox. */
   dragAndDropHooks?: DragAndDropHooks,
@@ -202,7 +205,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
   }
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
-  let isEmpty = state.collection.size === 0 || (state.collection.size === 1 && state.collection.getItem(state.collection.getFirstKey()!)?.type === 'loader');
+  let isEmpty = state.collection.size === 0;
   let renderValues = {
     isDropTarget: isRootDropTarget,
     isEmpty,
@@ -230,12 +233,12 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...mergeProps(listBoxProps, focusProps, droppableCollection?.collectionProps)}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, listBoxProps, focusProps, droppableCollection?.collectionProps)}
         ref={listBoxRef}
         slot={props.slot || undefined}
         onScroll={props.onScroll}
@@ -285,11 +288,12 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
     values: {}
   });
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <section
-      {...filterDOMProps(props as any)}
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
         <CollectionBranch
@@ -308,7 +312,7 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', Lis
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
-export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -383,10 +387,13 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
 
   let ElementType: React.ElementType = props.href ? 'a' : 'div';
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
   return (
     <ElementType
-      {...mergeProps(optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}
@@ -465,7 +472,7 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
 
 const ListBoxDropIndicatorForwardRef = forwardRef(ListBoxDropIndicator);
 
-export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The load more spinner to render when loading additional items.
    */
@@ -476,9 +483,8 @@ export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps,
   isLoading?: boolean
 }
 
-export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
-  let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
 
   let sentinelRef = useRef<HTMLDivElement>(null);
@@ -488,7 +494,7 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
     sentinelRef,
     scrollOffset
   }), [onLoadMore, scrollOffset, state?.collection]);
-  UNSTABLE_useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
+  useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
   let renderProps = useRenderProps({
     ...otherProps,
     id: undefined,
@@ -500,13 +506,11 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
   let optionProps = {
     // For Android talkback
     tabIndex: -1
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
   };
 
-  if (isVirtualized) {
-    optionProps['aria-posinset'] = item.index + 1;
-    optionProps['aria-setsize'] = state.collection.size;
-  }
-
   return (
     <>
       {/* Alway render the sentinel. For now onus is on the user for styling when using flex + gap (this would introduce a gap even though it doesn't take room) */}
@@ -516,12 +520,12 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
       </div>
       {isLoading && renderProps.children && (
         <div
-          {...mergeProps(filterDOMProps(props as any), optionProps)}
+          {...mergeProps(filterDOMProps(props, {global: true}), optionProps)}
           {...renderProps}
           // aria-selected isn't needed here since this option is not selectable.
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="option"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           {renderProps.children}
         </div>
       )}

package/src/Menu.tsx

@@ -14,9 +14,9 @@ import {AriaMenuProps, FocusScope, mergeProps, useHover, useMenu, useMenuItem, u
 import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 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, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, 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 {FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
@@ -156,7 +156,7 @@ export interface MenuRenderProps {
   isEmpty: boolean
 }
 
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /** Provides content to display when there are no items in the list. */
   renderEmptyState?: () => ReactNode
 }
@@ -214,12 +214,12 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...menuProps}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, menuProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-empty={state.collection.size === 0 || undefined}
@@ -301,11 +301,12 @@ function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: For
   let selectionState = useMultipleSelectionState(props);
   let manager = props.selectionMode != null ? new GroupSelectionManager(parent, selectionState) : parent;
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <section
-      {...filterDOMProps(props as any)}
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <Provider
         values={[
@@ -338,7 +339,7 @@ export interface MenuItemRenderProps extends ItemRenderProps {
   isOpen: boolean
 }
 
-export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -392,11 +393,13 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
   });
 
   let ElementType: React.ElementType = props.href ? 'a' : 'div';
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
 
   return (
     <ElementType
-      {...mergeProps(menuItemProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, menuItemProps, hoverProps)}
       ref={ref}
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}

package/src/Meter.tsx

@@ -13,11 +13,12 @@
 import {AriaMeterProps, useMeter} from 'react-aria';
 import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
-export interface MeterProps extends Omit<AriaMeterProps, 'label'>, RenderProps<MeterRenderProps>, SlotProps {}
+export interface MeterProps extends Omit<AriaMeterProps, 'label'>, RenderProps<MeterRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface MeterRenderProps {
   /**
@@ -65,8 +66,10 @@ export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
-    <div {...meterProps} {...renderProps} ref={ref} slot={props.slot || undefined}>
+    <div {...mergeProps(DOMProps, renderProps, meterProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>

package/src/Modal.tsx

@@ -12,13 +12,13 @@
 
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {DOMAttributes, forwardRefType, RefObject} from '@react-types/shared';
+import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
 
-export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps {
+export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Whether the modal is currently performing an entry animation.
    */
@@ -69,6 +69,12 @@ export const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal
   let ctx = useContext(InternalModalContext);
 
   if (ctx) {
+    if (process.env.NODE_ENV !== 'production' && (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)) {
+      // create a list of props that are passed in but not allowed when using an external ModalOverlay
+      const invalidSet = new Set(['isDismissable', 'isKeyboardDismissDisabled', 'isOpen', 'defaultOpen', 'onOpenChange', 'isEntering', 'isExiting', 'UNSTABLE_portalContainer', 'shouldCloseOnInteractOutside']);
+      const invalidProps = Object.keys(props).filter(key => invalidSet.has(key));
+      console.warn(`This modal is already wrapped in a ModalOverlay, props [${invalidProps.join(', ')}] should be placed on the ModalOverlay instead.`);
+    }
     return <ModalContent {...props} modalRef={ref}>{props.children}</ModalContent>;
   }
 
@@ -116,6 +122,11 @@ function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<
   let contextState = useContext(OverlayTriggerStateContext);
   let localState = useOverlayTriggerState(props);
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  if (state === contextState) {
+    if (process.env.NODE_ENV !== 'production' && (props.onOpenChange || props.defaultOpen !== undefined || props.isOpen !== undefined)) {
+      console.warn('This modals state is controlled by a trigger, place onOpenChange on the trigger instead.');
+    }
+  }
 
   let objectRef = useObjectRef(ref);
   let modalRef = useRef<HTMLDivElement>(null);
@@ -168,7 +179,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
       <div
-        {...mergeProps(filterDOMProps(props as any), underlayProps)}
+        {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}
         {...renderProps}
         style={style}
         ref={props.overlayRef}
@@ -186,7 +197,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   );
 }
 
-interface ModalContentProps extends RenderProps<ModalRenderProps> {
+interface ModalContentProps extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   modalRef: ForwardedRef<HTMLDivElement>
 }
 
@@ -209,7 +220,7 @@ function ModalContent(props: ModalContentProps) {
 
   return (
     <div
-      {...mergeProps(filterDOMProps(props as any), modalProps)}
+      {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
       {...renderProps}
       ref={ref}
       data-entering={entering || undefined}