react-aria-components 1.5.0 → 1.7.0

package/src/GridList.tsx

@@ -57,6 +57,11 @@ export interface GridListRenderProps {
 }
 
 export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+  /**
+   * Whether typeahead navigation is disabled.
+   * @default false
+   */
+  disallowTypeAhead?: boolean,
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList. */
@@ -73,7 +78,11 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
 
 export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
 
-function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A grid list displays a list of interactive items, with support for keyboard navigation,
+ * single or multiple selection, and row actions.
+ */
+export const GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(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.
   [props, ref] = useContextProps(props, ref, GridListContext);
 
@@ -82,7 +91,7 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
       {collection => <GridListInner props={props} collection={collection} gridListRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface GridListInnerProps<T extends object> {
   props: GridListProps<T>,
@@ -243,13 +252,6 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   );
 }
 
-/**
- * A grid list displays a list of interactive items, with support for keyboard navigation,
- * single or multiple selection, and row actions.
- */
-const _GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(GridList);
-export {_GridList as GridList};
-
 export interface GridListItemRenderProps extends ItemRenderProps {}
 
 export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents {

package/src/Group.tsx

@@ -60,7 +60,10 @@ export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLE
 
 export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
 
-function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A group represents a set of related UI controls, and supports interactive states for styling.
+ */
+export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GroupContext);
   let {isDisabled, isInvalid, onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
 
@@ -71,6 +74,7 @@ function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
 
   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, isDisabled, isInvalid},
@@ -92,10 +96,4 @@ function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
       {renderProps.children}
     </div>
   );
-}
-
-/**
- * A group represents a set of related UI controls, and supports interactive states for styling.
- */
-const _Group = /*#__PURE__*/ (forwardRef as forwardRefType)(Group);
-export {_Group as Group};
+});

package/src/Heading.tsx

@@ -18,7 +18,7 @@ export interface HeadingProps extends HTMLAttributes<HTMLElement> {
   level?: number
 }
 
-function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
+export const Heading = forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   let {children, level = 3, className, ...domProps} = props;
   let Element = `h${level}` as ElementType;
@@ -28,7 +28,4 @@ function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
       {children}
     </Element>
   );
-}
-
-const _Heading = forwardRef(Heading);
-export {_Heading as Heading};
+});

package/src/Input.tsx

@@ -53,7 +53,10 @@ let filterHoverProps = (props: InputProps) => {
   return otherProps;
 };
 
-function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+/**
+ * An input allows a user to input text.
+ */
+export const Input = /*#__PURE__*/ createHideableComponent(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   [props, ref] = useContextProps(props, ref, InputContext);
 
   let {hoverProps, isHovered} = useHover(props);
@@ -86,10 +89,4 @@ function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
       data-focus-visible={isFocusVisible || undefined}
       data-invalid={isInvalid || undefined} />
   );
-}
-
-/**
- * An input allows a user to input text.
- */
-const _Input = /*#__PURE__*/ createHideableComponent(Input);
-export {_Input as Input};
+});

package/src/Keyboard.tsx

@@ -15,10 +15,7 @@ import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 're
 
 export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const Keyboard = forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, KeyboardContext);
   return <kbd dir="ltr" {...props} ref={ref} />;
-}
-
-const _Keyboard = forwardRef(Keyboard);
-export {_Keyboard as Keyboard};
+});

package/src/Label.tsx

@@ -20,12 +20,9 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 
 export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
 
-function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, LabelContext);
   let {elementType: ElementType = 'label', ...labelProps} = props;
   // @ts-ignore
   return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
-}
-
-const _Label = /*#__PURE__*/ createHideableComponent(Label);
-export {_Label as Label};
+});

package/src/Link.tsx

@@ -52,7 +52,11 @@ export interface LinkRenderProps {
 
 export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
 
-function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ */
+export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
   [props, ref] = useContextProps(props, ref, LinkContext);
 
   let ElementType: ElementType = props.href && !props.isDisabled ? 'a' : 'span';
@@ -88,11 +92,4 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
       {renderProps.children}
     </ElementType>
   );
-}
-
-/**
- * A link allows a user to navigate to another page or resource within a web page
- * or application.
- */
-const _Link = /*#__PURE__*/ (forwardRef as forwardRefType)(Link);
-export {_Link as Link};
+});

package/src/ListBox.tsx

@@ -13,16 +13,17 @@
 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, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, 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, useListState} from 'react-stately';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
+import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, 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';
 import {TextContext} from './Text';
+import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 
 export interface ListBoxRenderProps {
   /**
@@ -79,7 +80,10 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
 export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
 export const ListStateContext = createContext<ListState<any> | null>(null);
 
-function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ */
+export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
   let state = useContext(ListStateContext);
 
@@ -98,7 +102,7 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
       {collection => <StandaloneListBox props={props} listBoxRef={ref} collection={collection} />}
     </CollectionBuilder>
   );
-}
+});
 
 function StandaloneListBox({props, listBoxRef, collection}) {
   props = {...props, collection, children: null, items: null};
@@ -107,20 +111,19 @@ function StandaloneListBox({props, listBoxRef, collection}) {
   return <ListBoxInner state={state} props={props} listBoxRef={listBoxRef} />;
 }
 
-/**
- * A listbox displays a list of options and allows a user to select one or more of them.
- */
-const _ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ListBox);
-export {_ListBox as ListBox};
-
 interface ListBoxInnerProps<T> {
   state: ListState<T>,
   props: ListBoxProps<T> & AriaListBoxOptions<T>,
   listBoxRef: RefObject<HTMLDivElement | null>
 }
 
-function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
+function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}: ListBoxInnerProps<T>) {
+  let {filter, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  props = useMemo(() => collectionProps ? ({...props, ...collectionProps}) : props, [props, collectionProps]);
   let {dragAndDropHooks, layout = 'stack', orientation = 'vertical'} = props;
+  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
+  listBoxRef = useObjectRef(useMemo(() => mergeRefs(listBoxRef, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, listBoxRef]));
+  let state = UNSTABLE_useFilteredListState(inputState, filter);
   let {collection, selectionManager} = state;
   let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
@@ -246,7 +249,7 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
             [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
-            [SectionContext, {name: 'ListBoxSection', render: ListBoxSection}]
+            [SectionContext, {name: 'ListBoxSection', render: ListBoxSectionInner}]
           ]}>
           <CollectionRoot
             collection={collection}
@@ -263,7 +266,7 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
 
 export interface ListBoxSectionProps<T> extends SectionProps<T> {}
 
-function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
+function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
@@ -298,8 +301,7 @@ function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: Fo
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-const _ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSection);
-export {_ListBoxSection as ListBoxSection};
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner);
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
@@ -397,6 +399,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
         values={[
           [TextContext, {
             slots: {
+              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }

package/src/Menu.tsx

@@ -10,20 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-
-import {AriaMenuProps, FocusScope, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
-import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
-import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
+import {AriaMenuProps, FocusScope, mergeProps, useHover, useMenu, useMenuItem, useMenuSection, useMenuTrigger, useSubmenuTrigger} from 'react-aria';
+import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
+import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, RootMenuTriggerState, TreeState, useMenuTriggerState, useSubmenuTriggerState, useTreeState} from 'react-stately';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
-import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
-import {filterDOMProps, useObjectRef, useResizeObserver} from '@react-aria/utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {FocusStrategy, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
-import {PressResponder, useHover} from '@react-aria/interactions';
+import {PressResponder} from '@react-aria/interactions';
 import React, {
   createContext,
   ForwardedRef,
@@ -33,13 +32,13 @@ import React, {
   RefObject,
   useCallback,
   useContext,
+  useMemo,
   useRef,
   useState
 } from 'react';
-import {RootMenuTriggerState, useSubmenuTriggerState} from '@react-stately/menu';
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
-import {useSubmenuTrigger} from '@react-aria/menu';
+import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 export const MenuStateContext = createContext<TreeState<any> | null>(null);
@@ -69,7 +68,6 @@ export function MenuTrigger(props: MenuTriggerProps) {
     ref: ref,
     onResize: onResize
   });
-
   let scrollRef = useRef(null);
 
   return (
@@ -83,7 +81,8 @@ export function MenuTrigger(props: MenuTriggerProps) {
           triggerRef: ref,
           scrollRef,
           placement: 'bottom start',
-          style: {'--trigger-width': buttonWidth} as React.CSSProperties
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties,
+          'aria-labelledby': menuProps['aria-labelledby']
         }]
       ]}>
       <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
@@ -105,7 +104,7 @@ export interface SubmenuTriggerProps {
   delay?: number
 }
 
-const SubmenuTriggerContext = createContext<{parentMenuRef: RefObject<HTMLElement | null>} | null>(null);
+const SubmenuTriggerContext = createContext<{parentMenuRef: RefObject<HTMLElement | null>, shouldUseVirtualFocus?: boolean} | null>(null);
 
 /**
  * A submenu trigger is used to wrap a submenu's trigger item and the submenu itself.
@@ -119,11 +118,12 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
   let submenuTriggerState = useSubmenuTriggerState({triggerKey: item.key}, rootMenuTriggerState);
   let submenuRef = useRef<HTMLDivElement>(null);
   let itemRef = useObjectRef(ref);
-  let {parentMenuRef} = useContext(SubmenuTriggerContext)!;
+  let {parentMenuRef, shouldUseVirtualFocus} = useContext(SubmenuTriggerContext)!;
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
     submenuRef,
-    delay: props.delay
+    delay: props.delay,
+    shouldUseVirtualFocus
   }, submenuTriggerState, itemRef);
 
   return (
@@ -137,9 +137,7 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
           trigger: 'SubmenuTrigger',
           triggerRef: itemRef,
           placement: 'end top',
-          // Prevent parent popover from hiding submenu.
-          // @ts-ignore
-          'data-react-aria-top-layer': true,
+          'aria-labelledby': submenuProps['aria-labelledby'],
           ...popoverProps
         }]
       ]}>
@@ -149,41 +147,72 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
   );
 }, props => props.children[0]);
 
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps, ScrollableProps<HTMLDivElement> {}
+export interface MenuRenderProps {
+  /**
+   * Whether the menu has no items and should display its empty state.
+   * @selector [data-empty]
+   */
+  isEmpty: boolean
+}
+
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+  /** Provides content to display when there are no items in the list. */
+  renderEmptyState?: () => ReactNode
+}
 
-function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A menu displays a list of actions or options that a user can choose.
+ */
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MenuContext);
 
   // Delay rendering the actual menu until we have the collection so that auto focus works properly.
   return (
     <CollectionBuilder content={<Collection {...props} />}>
-      {collection => collection.size > 0 && <MenuInner props={props} collection={collection} menuRef={ref} />}
+      {collection => <MenuInner props={props} collection={collection} menuRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface MenuInnerProps<T> {
   props: MenuProps<T>,
-  collection: ICollection<Node<object>>,
+  collection: BaseCollection<object>,
   menuRef: RefObject<HTMLDivElement | null>
 }
 
 function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInnerProps<T>) {
+  let {filter, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
+  ref = useObjectRef(useMemo(() => mergeRefs(ref, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, ref]));
+  let filteredCollection = useMemo(() => filter ? collection.UNSTABLE_filter(filter) : collection, [collection, filter]);
   let state = useTreeState({
     ...props,
-    collection,
+    collection: filteredCollection as ICollection<Node<object>>,
     children: undefined
   });
   let triggerState = useContext(RootMenuTriggerStateContext);
   let {isVirtualized, CollectionRoot} = useContext(CollectionRendererContext);
-  let {menuProps} = useMenu({...props, isVirtualized, onClose: props.onClose || triggerState?.close}, state, ref);
+  let {menuProps} = useMenu({...props, ...autocompleteMenuProps, isVirtualized, onClose: props.onClose || triggerState?.close}, state, ref);
   let renderProps = useRenderProps({
     defaultClassName: 'react-aria-Menu',
     className: props.className,
     style: props.style,
-    values: {}
+    values: {
+      isEmpty: state.collection.size === 0
+    }
   });
 
+  let emptyState: ReactElement | null = null;
+  if (state.collection.size === 0 && props.renderEmptyState) {
+    emptyState = (
+      <div
+        role="menuitem"
+        style={{display: 'contents'}}>
+        {props.renderEmptyState()}
+      </div>
+    );
+  }
+
   return (
     <FocusScope>
       <div
@@ -192,32 +221,33 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
+        data-empty={state.collection.size === 0 || undefined}
         onScroll={props.onScroll}>
         <Provider
           values={[
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
-            [SectionContext, {name: 'MenuSection', render: MenuSection}],
-            [SubmenuTriggerContext, {parentMenuRef: ref}],
+            [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
+            [SubmenuTriggerContext, {parentMenuRef: ref, shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus}],
             [MenuItemContext, null],
-            [SelectionManagerContext, state.selectionManager]
+            [UNSTABLE_InternalAutocompleteContext, null],
+            [SelectionManagerContext, state.selectionManager],
+            /* Ensure root MenuTriggerState is defined, in case Menu is rendered outside a MenuTrigger. */
+            /* We assume the context can never change between defined and undefined. */
+            /* eslint-disable-next-line react-hooks/rules-of-hooks */
+            [RootMenuTriggerStateContext, triggerState ?? useMenuTriggerState({})]
           ]}>
           <CollectionRoot
-            collection={collection}
+            collection={state.collection}
             persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)}
             scrollRef={ref} />
         </Provider>
+        {emptyState}
       </div>
     </FocusScope>
   );
 }
 
-/**
- * A menu displays a list of actions or options that a user can choose.
- */
-const _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
-export {_Menu as Menu};
-
 export interface MenuSectionProps<T> extends SectionProps<T>, MultipleSelection {}
 
 // A subclass of SelectionManager that forwards focus-related properties to the parent,
@@ -251,7 +281,7 @@ class GroupSelectionManager extends SelectionManager {
   }
 }
 
-function MenuSection<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
+function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
   let state = useContext(MenuStateContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let [headingRef, heading] = useSlot();
@@ -290,8 +320,7 @@ function MenuSection<T extends object>(props: MenuSectionProps<T>, ref: Forwarde
 /**
  * A MenuSection represents a section within a Menu.
  */
-const _MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSection);
-export {_MenuSection as MenuSection};
+export const MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSectionInner);
 
 export interface MenuItemRenderProps extends ItemRenderProps {
   /**
@@ -342,7 +371,6 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
     selectionManager
   }, state, ref);
 
-  let {isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
     isDisabled: states.isDisabled
   });
@@ -354,7 +382,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
     values: {
       ...states,
       isHovered,
-      isFocusVisible,
+      isFocusVisible: states.isFocusVisible,
       selectionMode: selectionManager.selectionMode,
       selectionBehavior: selectionManager.selectionBehavior,
       hasSubmenu: !!props['aria-haspopup'],
@@ -366,13 +394,13 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
 
   return (
     <ElementType
-      {...mergeProps(menuItemProps, focusProps, hoverProps)}
+      {...mergeProps(menuItemProps, hoverProps)}
       {...renderProps}
       ref={ref}
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}
       data-focused={states.isFocused || undefined}
-      data-focus-visible={isFocusVisible || undefined}
+      data-focus-visible={states.isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
       data-selected={states.isSelected || undefined}
       data-selection-mode={selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode}
@@ -382,6 +410,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
         values={[
           [TextContext, {
             slots: {
+              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }

package/src/Meter.tsx

@@ -33,7 +33,10 @@ export interface MeterRenderProps {
 
 export const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
 
-function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A meter represents a quantity within a known range, or a fractional value.
+ */
+export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MeterContext);
   let {
     value = 0,
@@ -42,7 +45,9 @@ function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
   } = props;
   value = clamp(value, minValue, maxValue);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     meterProps,
     labelProps
@@ -67,10 +72,4 @@ function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
       </LabelContext.Provider>
     </div>
   );
-}
-
-/**
- * A meter represents a quantity within a known range, or a fractional value.
- */
-const _Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(Meter);
-export {_Meter as Meter};
+});

package/src/Modal.tsx

@@ -11,9 +11,9 @@
  */
 
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
+import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DOMAttributes, forwardRefType, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useObjectRef, useViewportSize} from '@react-aria/utils';
+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';
@@ -61,7 +61,10 @@ export interface ModalRenderProps {
   state: OverlayTriggerState
 }
 
-function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A modal is an overlay element which blocks interaction with elements outside it.
+ */
+export const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   let ctx = useContext(InternalModalContext);
 
   if (ctx) {
@@ -98,7 +101,7 @@ function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
       </ModalContent>
     </ModalOverlay>
   );
-}
+});
 
 interface ModalOverlayInnerProps extends ModalOverlayProps {
   overlayRef: RefObject<HTMLDivElement | null>,
@@ -107,12 +110,6 @@ interface ModalOverlayInnerProps extends ModalOverlayProps {
   isExiting: boolean
 }
 
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */
-const _Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(Modal);
-export {_Modal as Modal};
-
 function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ModalContext);
   let contextState = useContext(OverlayTriggerStateContext);