react-aria-components 1.0.0-beta.0 → 1.0.0-beta.2

package/src/GridList.tsx

@@ -15,8 +15,9 @@ import {CheckboxContext} from './Checkbox';
 import {Collection, DraggableCollectionState, DroppableCollectionState, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {ContextValue, defaultSlot, forwardRefType, Provider, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
+import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
 import {filterDOMProps, isIOS, isWebKit, useObjectRef} from '@react-aria/utils';
+import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
@@ -56,15 +57,8 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
   renderEmptyState?: () => ReactNode
 }
 
-interface InternalGridListContextValue {
-  state: ListState<unknown>,
-  dragAndDropHooks?: DragAndDropHooks,
-  dragState?: DraggableCollectionState,
-  dropState?: DroppableCollectionState
-}
 
 export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
-const InternalGridListContext = createContext<InternalGridListContextValue | null>(null);
 
 function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
@@ -220,14 +214,15 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         {...renderProps}
         {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-drop-target={isRootDropTarget || undefined}
         data-empty={state.collection.size === 0 || undefined}
         data-focused={isFocused || undefined}
         data-focus-visible={isFocusVisible || undefined}>
         <Provider
           values={[
-            [InternalGridListContext, {state, dragAndDropHooks, dragState, dropState}],
+            [ListStateContext, state],
+            [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [DropIndicatorContext, {render: GridListDropIndicatorWrapper}]
           ]}>
           {isListDroppable && <RootDropIndicator />}
@@ -248,7 +243,8 @@ const _GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(GridList);
 export {_GridList as GridList};
 
 function GridListItem({item}) {
-  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalGridListContext)!;
+  let state = useContext(ListStateContext)!;
+  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
   let ref = useObjectRef<HTMLDivElement>(item.props.ref);
   let {rowProps, gridCellProps, descriptionProps, ...states} = useGridListItem(
     {
@@ -382,7 +378,7 @@ function GridListItem({item}) {
 
 function GridListDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext)!;
+  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
   let buttonRef = useRef<HTMLDivElement>(null);
   let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
@@ -438,7 +434,7 @@ function GridListDropIndicator(props: GridListDropIndicatorProps, ref: Forwarded
 const GridListDropIndicatorForwardRef = forwardRef(GridListDropIndicator);
 
 function RootDropIndicator() {
-  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext)!;
+  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
   let ref = useRef<HTMLDivElement>(null);
   let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
     target: {type: 'root'}

package/src/Group.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {mergeProps, useFocusRing, useHover} from 'react-aria';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
@@ -29,10 +30,33 @@ export interface GroupRenderProps {
    * Whether an element within the group is keyboard focused.
    * @selector [data-focus-visible]
    */
-  isFocusVisible: boolean
+  isFocusVisible: boolean,
+  /**
+   * Whether the group is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the group is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean
 }
 
-export interface GroupProps extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'style'>, StyleRenderProps<GroupRenderProps> {}
+export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'role'>, StyleRenderProps<GroupRenderProps> {
+  /** Whether the group is disabled. */
+  isDisabled?: boolean,
+  /** Whether the group is invalid. */
+  isInvalid?: boolean,
+  /**
+   * An accessibility role for the group. By default, this is set to `'group'`.
+   * Use `'region'` when the contents of the group is important enough to be
+   * included in the page table of contents. Use `'presentation'` if the group
+   * is visual only and does not represent a semantic grouping of controls.
+   * @default 'group'
+   */
+  role?: 'group' | 'region' | 'presentation'
+}
 
 export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
 
@@ -44,27 +68,33 @@ function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
     within: true
   });
 
+  let {isDisabled, isInvalid, ...otherProps} = props;
+  isDisabled ??= !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
+  isInvalid ??= !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
   let renderProps = useRenderProps({
     ...props,
-    values: {isHovered, isFocusWithin: isFocused, isFocusVisible},
+    values: {isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled, isInvalid},
     defaultClassName: 'react-aria-Group'
   });
 
   return (
     <div
-      {...mergeProps(props, focusProps, hoverProps)}
+      {...mergeProps(otherProps, focusProps, hoverProps)}
       {...renderProps}
       ref={ref}
+      role={props.role ?? 'group'}
       data-focus-within={isFocused || undefined}
       data-hovered={isHovered || undefined}
-      data-focus-visible={isFocusVisible || undefined}>
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-invalid={isInvalid || undefined}>
       {props.children}
     </div>
   );
 }
 
 /**
- * An group represents a set of related UI controls.
+ * A group represents a set of related UI controls, and supports interactive states for styling.
  */
 const _Group = forwardRef(Group);
 export {_Group as Group};

package/src/Link.tsx

@@ -12,8 +12,7 @@
 
 import {AriaLinkOptions, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
 import {ContextValue, forwardRefType, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {filterDOMProps, mergeRefs} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
+import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react';
 
 export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, RenderProps<LinkRenderProps>, SlotProps {}
 
@@ -55,8 +54,8 @@ export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorEleme
 function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
   [props, ref] = useContextProps(props, ref, LinkContext);
 
-  let elementType = typeof props.children === 'string' || typeof props.children === 'function' ? 'span' : 'a';
-  let {linkProps, isPressed} = useLink({...props, elementType}, ref);
+  let ElementType: ElementType = props.href ? 'a' : 'span';
+  let {linkProps, isPressed} = useLink({...props, elementType: ElementType}, ref);
 
   let {hoverProps, isHovered} = useHover(props);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
@@ -74,26 +73,20 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
     }
   });
 
-  let DOMProps = filterDOMProps(props);
-  delete DOMProps.id;
-
-  let element: any = typeof renderProps.children === 'string'
-    ? <span>{renderProps.children}</span>
-    : React.Children.only(renderProps.children);
-
-  return React.cloneElement(element, {
-    ref: useMemo(() => element.ref ? mergeRefs(element.ref, ref) : ref, [element.ref, ref]),
-    slot: props.slot,
-    ...mergeProps(DOMProps, renderProps, linkProps, hoverProps, focusProps, {
-      children: element.props.children,
-      'data-focused': isFocused || undefined,
-      'data-hovered': isHovered || undefined,
-      'data-pressed': isPressed || undefined,
-      'data-focus-visible': isFocusVisible || undefined,
-      'data-current': !!props['aria-current'] || undefined,
-      'data-disabled': props.isDisabled  || undefined
-    }, element.props)
-  });
+  return (
+    <ElementType
+      ref={ref}
+      slot={props.slot || undefined}
+      {...mergeProps(renderProps, linkProps, hoverProps, focusProps)}
+      data-focused={isFocused || undefined}
+      data-hovered={isHovered || undefined}
+      data-pressed={isPressed || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-current={!!props['aria-current'] || undefined}
+      data-disabled={props.isDisabled  || undefined}>
+      {renderProps.children}
+    </ElementType>
+  );
 }
 
 /**

package/src/ListBox.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
-import {CollectionProps, Document, ItemProps, useCachedChildren, useCollection, useCollectionPortal} from './Collection';
-import {ContextValue, forwardRefType, HiddenContext, Provider, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {CollectionDocumentContext, CollectionPortal, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
+import {ContextValue, forwardRefType, HiddenContext, Provider, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, useListState} from 'react-stately';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {Header} from './Header';
@@ -73,26 +73,14 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
   orientation?: Orientation
 }
 
-interface ListBoxContextValue<T> extends ListBoxProps<T> {
-  state?: ListState<T>,
-  document?: Document<any, any>
-}
-
-interface InternalListBoxContextValue {
-  state: ListState<unknown>,
-  shouldFocusOnHover?: boolean,
-  dragAndDropHooks?: DragAndDropHooks,
-  dragState?: DraggableCollectionState,
-  dropState?: DroppableCollectionState
-}
-
-export const ListBoxContext = createContext<ContextValue<ListBoxContextValue<any>, HTMLDivElement>>(null);
-const InternalListBoxContext = createContext<InternalListBoxContextValue | null>(null);
+export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
+export const ListStateContext = createContext<ListState<any> | null>(null);
 
-function ListBox<T>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
-  let ctx = props as ListBoxContextValue<T>;
   let isHidden = useContext(HiddenContext);
+  let state = useContext(ListStateContext);
+  let document = useContext(CollectionDocumentContext);
 
   // The structure of ListBox is a bit strange because it needs to work inside other components like ComboBox and Select.
   // Those components render two copies of their children so that the collection can be built even when the popover is closed.
@@ -100,12 +88,12 @@ function ListBox<T>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // The second copy sends a ListState object via context which we use to render the ListBox without rebuilding the state.
   // Otherwise, we have a standalone ListBox, so we need to create a collection and state ourselves.
 
-  if (ctx.document) {
-    return <ListBoxPortal {...props} />;
+  if (document) {
+    return <CollectionPortal {...props} />;
   }
 
-  if (ctx.state) {
-    return isHidden ? null : <ListBoxInner state={ctx.state} props={props} listBoxRef={ref} />;
+  if (state) {
+    return isHidden ? null : <ListBoxInner state={state} props={props} listBoxRef={ref} />;
   }
 
   return <StandaloneListBox props={props} listBoxRef={ref} />;
@@ -123,10 +111,6 @@ function StandaloneListBox({props, listBoxRef}) {
   );
 }
 
-function ListBoxPortal(props) {
-  return <>{useCollectionPortal(props, props.document)}</>;
-}
-
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
@@ -146,16 +130,18 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
   let {direction} = useLocale();
   let {disabledBehavior, disabledKeys} = selectionManager;
+  let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let keyboardDelegate = useMemo(() => (
     props.keyboardDelegate || new ListKeyboardDelegate({
       collection,
+      collator,
       ref: listBoxRef,
       disabledKeys: disabledBehavior === 'selection' ? new Set<React.Key>() : disabledKeys,
       layout,
       orientation,
       direction
     })
-  ), [collection, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]);
+  ), [collection, collator, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]);
 
   let {listBoxProps} = useListBox({
     ...props,
@@ -260,7 +246,7 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
         {...mergeProps(listBoxProps, focusProps, droppableCollection?.collectionProps)}
         {...renderProps}
         ref={listBoxRef}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-drop-target={isRootDropTarget || undefined}
         data-empty={state.collection.size === 0 || undefined}
         data-focused={isFocused || undefined}
@@ -269,7 +255,9 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
         data-orientation={props.orientation || 'vertical'}>
         <Provider
           values={[
-            [InternalListBoxContext, {state, shouldFocusOnHover: props.shouldFocusOnHover, dragAndDropHooks, dragState, dropState}],
+            [ListBoxContext, props],
+            [ListStateContext, state],
+            [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}]
           ]}>
@@ -287,7 +275,7 @@ interface ListBoxSectionProps<T> extends StyleProps {
 }
 
 function ListBoxSection<T>({section, className, style}: ListBoxSectionProps<T>) {
-  let {state} = useContext(InternalListBoxContext)!;
+  let state = useContext(ListStateContext)!;
   let [headingRef, heading] = useSlot();
   let {headingProps, groupProps} = useListBoxSection({
     heading,
@@ -344,8 +332,10 @@ interface OptionProps<T> {
 }
 
 function Option<T>({item}: OptionProps<T>) {
-  let ref = useObjectRef<HTMLDivElement>(item.props.ref);
-  let {state, shouldFocusOnHover, dragAndDropHooks, dragState, dropState} = useContext(InternalListBoxContext)!;
+  let ref = useObjectRef<any>(item.props.ref);
+  let state = useContext(ListStateContext)!;
+  let {shouldFocusOnHover} = useSlottedContext(ListBoxContext)! as AriaListBoxOptions<T>;
+  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
   let {optionProps, labelProps, descriptionProps, ...states} = useOption(
     {key: item.key},
     state,
@@ -399,13 +389,15 @@ function Option<T>({item}: OptionProps<T>) {
     }
   }, [item.textValue]);
 
+  let ElementType: React.ElementType = props.href ? 'a' : 'div';
+
   return (
     <>
       {dragAndDropHooks?.useDropIndicator &&
         renderDropIndicator({type: 'item', key: item.key, dropPosition: 'before'})
       }
-      <div
-        {...mergeProps(filterDOMProps(props as any), optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
+      <ElementType
+        {...mergeProps(optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
         {...renderProps}
         ref={ref}
         data-allows-dragging={!!dragState || undefined}
@@ -429,7 +421,7 @@ function Option<T>({item}: OptionProps<T>) {
           ]}>
           {renderProps.children}
         </Provider>
-      </div>
+      </ElementType>
       {dragAndDropHooks?.useDropIndicator && state.collection.getKeyAfter(item.key) == null &&
         renderDropIndicator({type: 'item', key: item.key, dropPosition: 'after'})
       }
@@ -439,7 +431,7 @@ function Option<T>({item}: OptionProps<T>) {
 
 function ListBoxDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {dragAndDropHooks, dropState} = useContext(InternalListBoxContext)!;
+  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
     dropState!,

package/src/Menu.tsx

@@ -14,18 +14,19 @@
 import {AriaMenuProps, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
 import {BaseCollection, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
-import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {Header} from './Header';
 import {KeyboardContext} from './Keyboard';
+import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
-const InternalMenuContext = createContext<TreeState<unknown> | null>(null);
+export const MenuStateContext = createContext<TreeState<unknown> | null>(null);
 
 export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children?: ReactNode
@@ -44,10 +45,12 @@ export function MenuTrigger(props: MenuTriggerProps) {
     <Provider
       values={[
         [MenuContext, menuProps],
-        [ButtonContext, {...menuTriggerProps, ref, isPressed: state.isOpen}],
-        [PopoverContext, {state, triggerRef: ref, placement: 'bottom start'}]
+        [OverlayTriggerStateContext, state],
+        [PopoverContext, {triggerRef: ref, placement: 'bottom start'}]
       ]}>
-      {props.children}
+      <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
+        {props.children}
+      </PressResponder>
     </Provider>
   );
 }
@@ -102,12 +105,12 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
       {...filterDOMProps(props)}
       {...menuProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       style={props.style}
       className={props.className ?? 'react-aria-Menu'}>
       <Provider
         values={[
-          [InternalMenuContext, state],
+          [MenuStateContext, state],
           [SeparatorContext, {elementType: 'div'}]
         ]}>
         {children}
@@ -127,7 +130,7 @@ interface MenuSectionProps<T> extends StyleProps {
 }
 
 function MenuSection<T>({section, className, style, ...otherProps}: MenuSectionProps<T>) {
-  let state = useContext(InternalMenuContext)!;
+  let state = useContext(MenuStateContext)!;
   let [headingRef, heading] = useSlot();
   let {headingProps, groupProps} = useMenuSection({
     heading,
@@ -174,8 +177,8 @@ interface MenuItemProps<T> {
 }
 
 function MenuItem<T>({item}: MenuItemProps<T>) {
-  let state = useContext(InternalMenuContext)!;
-  let ref = useObjectRef<HTMLDivElement>(item.props.ref);
+  let state = useContext(MenuStateContext)!;
+  let ref = useObjectRef<any>(item.props.ref);
   let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({key: item.key}, state, ref);
 
   let props: ItemProps<T> = item.props;
@@ -194,12 +197,11 @@ function MenuItem<T>({item}: MenuItemProps<T>) {
     }
   });
 
-  let DOMProps = filterDOMProps(props as any);
-  delete DOMProps.id;
+  let ElementType: React.ElementType = props.href ? 'a' : 'div';
 
   return (
-    <div
-      {...mergeProps(DOMProps, menuItemProps, focusProps)}
+    <ElementType
+      {...mergeProps(menuItemProps, focusProps)}
       {...renderProps}
       ref={ref}
       data-disabled={states.isDisabled || undefined}
@@ -221,6 +223,6 @@ function MenuItem<T>({item}: MenuItemProps<T>) {
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </ElementType>
   );
 }

package/src/Meter.tsx

@@ -58,7 +58,7 @@ function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
   });
 
   return (
-    <div {...meterProps} {...renderProps} ref={ref} slot={props.slot}>
+    <div {...meterProps} {...renderProps} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>

package/src/Modal.tsx

@@ -11,27 +11,23 @@
  */
 
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
-import {ContextValue, forwardRefType, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
 import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
+import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext, useMemo, useRef} from 'react';
 
 export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps {}
 
-interface ModalContextValue extends ModalOverlayProps {
-  state?: OverlayTriggerState
-}
-
 interface InternalModalContextValue {
   modalProps: DOMAttributes,
   modalRef: RefObject<HTMLDivElement>,
   isExiting: boolean,
-  isDismissable?: boolean,
-  state: OverlayTriggerState
+  isDismissable?: boolean
 }
 
-export const ModalContext = createContext<ContextValue<ModalContextValue, HTMLDivElement>>(null);
+export const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);
 const InternalModalContext = createContext<InternalModalContextValue | null>(null);
 
 export interface ModalRenderProps {
@@ -97,9 +93,9 @@ export {_Modal as Modal};
 
 function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ModalContext);
-  let ctx = props as ModalContextValue;
+  let contextState = useContext(OverlayTriggerStateContext);
   let localState = useOverlayTriggerState(props);
-  let state = props.isOpen != null || props.defaultOpen != null || !ctx?.state ? localState : ctx.state;
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
 
   let objectRef = useObjectRef(ref);
   let modalRef = useRef<HTMLDivElement>(null);
@@ -158,9 +154,13 @@ function ModalOverlayInner(props: ModalOverlayInnerProps) {
         ref={props.overlayRef}
         data-entering={entering || undefined}
         data-exiting={props.isExiting || undefined}>
-        <InternalModalContext.Provider value={{modalProps, modalRef, state, isExiting: props.isExiting, isDismissable: props.isDismissable}}>
+        <Provider
+          values={[
+            [InternalModalContext, {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}],
+            [OverlayTriggerStateContext, state]
+          ]}>
           {renderProps.children}
-        </InternalModalContext.Provider>
+        </Provider>
       </div>
     </Overlay>
   );
@@ -171,7 +171,8 @@ interface ModalContentProps extends RenderProps<ModalRenderProps> {
 }
 
 function ModalContent(props: ModalContentProps) {
-  let {modalProps, modalRef, isExiting, isDismissable, state} = useContext(InternalModalContext)!;
+  let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;
+  let state = useContext(OverlayTriggerStateContext)!;
   let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
 
   let ref = useObjectRef(mergedRefs);

package/src/NumberField.tsx

@@ -12,7 +12,7 @@
 
 import {AriaNumberFieldProps, useLocale, useNumberField} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
@@ -42,6 +42,7 @@ export interface NumberFieldRenderProps {
 export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState'>, InputDOMProps, RenderProps<NumberFieldRenderProps>, SlotProps {}
 
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
+export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
 function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, NumberFieldContext);
@@ -57,7 +58,7 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
     decrementButtonProps,
     descriptionProps,
     errorMessageProps
-  } = useNumberField({...props, label}, state, inputRef);
+  } = useNumberField({...removeDataAttributes(props), label}, state, inputRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -75,6 +76,7 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
   return (
     <Provider
       values={[
+        [NumberFieldStateContext, state],
         [GroupContext, groupProps],
         [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef}],
@@ -95,7 +97,7 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
         {...DOMProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-disabled={props.isDisabled || undefined}
         data-invalid={props.isInvalid || undefined} />
       {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}

package/src/OverlayArrow.tsx

@@ -10,18 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {forwardRefType, RenderProps, useRenderProps} from './utils';
-import {mergeProps} from '@react-aria/utils';
+import {ContextValue, forwardRefType, RenderProps, useContextProps, useRenderProps} from './utils';
 import {PlacementAxis} from 'react-aria';
-import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useContext} from 'react';
+import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
-interface OverlayArrowContextValue {
-  arrowProps: HTMLAttributes<HTMLElement>,
+interface OverlayArrowContextValue extends OverlayArrowProps {
   placement: PlacementAxis
 }
 
-export const OverlayArrowContext = createContext<OverlayArrowContextValue>({
-  arrowProps: {},
+export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
   placement: 'bottom'
 });
 
@@ -36,9 +33,9 @@ export interface OverlayArrowRenderProps {
 }
 
 function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {arrowProps, placement} = useContext(OverlayArrowContext)!;
+  [props, ref] = useContextProps(props, ref, OverlayArrowContext);
+  let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
-    ...arrowProps.style,
     position: 'absolute',
     [placement]: '100%',
     transform: placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'
@@ -54,7 +51,7 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
 
   return (
     <div
-      {...mergeProps(arrowProps, props)}
+      {...props}
       {...renderProps}
       style={{
         ...renderProps.style,