react-aria-components 1.5.0 → 1.6.0

package/src/Disclosure.tsx

@@ -35,7 +35,11 @@ export interface DisclosureGroupRenderProps {
 
 export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
-function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
+ * It supports both single and multiple expanded items.
+ */
+export const DisclosureGroup = forwardRef(function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   let state = useDisclosureGroupState(props);
 
   let renderProps = useRenderProps({
@@ -60,14 +64,7 @@ function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivE
       </DisclosureGroupStateContext.Provider>
     </div>
   );
-}
-
-/**
- * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
- * It supports both single and multiple expanded items.
- */
-const _DisclosureGroup = forwardRef(DisclosureGroup);
-export {_DisclosureGroup as DisclosureGroup};
+});
 
 export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps {
   /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
@@ -106,7 +103,10 @@ interface InternalDisclosureContextValue {
 
 const InternalDisclosureContext = createContext<InternalDisclosureContextValue | null>(null);
 
-function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
+ */
+export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DisclosureContext);
   let groupState = useContext(DisclosureGroupStateContext)!;
   let {id, ...otherProps} = props;
@@ -179,7 +179,7 @@ function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
       </div>
     </Provider>
   );
-}
+});
 
 export interface DisclosurePanelRenderProps {
   /**
@@ -201,7 +201,10 @@ export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderP
   children: ReactNode
 }
 
-function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A DisclosurePanel provides the content for a disclosure.
+ */
+export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   let {role = 'group'} = props;
   let {panelProps, panelRef} = useContext(InternalDisclosureContext)!;
   let {
@@ -232,16 +235,4 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivE
       </Provider>
     </div>
   );
-}
-
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */
-const _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);
-export {_Disclosure as Disclosure};
-
-/**
- * A DisclosurePanel provides the content for a disclosure.
- */
-const _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);
-export {_DisclosurePanel as DisclosurePanel};
+});

package/src/DragAndDrop.tsx

@@ -37,16 +37,13 @@ interface DropIndicatorContextValue {
   render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
 }
 
-function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
-  let {render} = useContext(DropIndicatorContext)!;
-  return <>{render(props, ref)}</>;
-}
-
 /**
  * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
  */
-const _DropIndicator = forwardRef(DropIndicator);
-export {_DropIndicator as DropIndicator};
+export const DropIndicator = forwardRef(function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
+  let {render} = useContext(DropIndicatorContext)!;
+  return <>{render(props, ref)}</>;
+});
 
 export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
@@ -54,7 +51,7 @@ export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, drop
   let fn = useCallback((target: ItemDropTarget) => {
     // Only show drop indicators when virtual dragging or this is the current drop target.
     if (isVirtualDragging || dropState?.isDropTarget(target)) {
-      return renderDropIndicator ? renderDropIndicator(target) : <_DropIndicator target={target} />;
+      return renderDropIndicator ? renderDropIndicator(target) : <DropIndicator target={target} />;
     }
     // We invalidate whenever the target changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/DropZone.tsx

@@ -52,7 +52,10 @@ export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoi
 
 export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
 
-function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged and dropped.
+ */
+export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let {isDisabled = false} = props;
   [props, ref] = useContextProps(props, ref, DropZoneContext);
   let dropzoneRef = useObjectRef(ref);
@@ -127,10 +130,4 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
       </div>
     </Provider>
   );
-}
-
-/**
- * A drop zone is an area into which one or multiple objects can be dragged and dropped.
- */
-const _DropZone = forwardRef(DropZone);
-export {_DropZone as DropZone};
+});

package/src/FieldError.tsx

@@ -21,20 +21,17 @@ export const FieldErrorContext = createContext<ValidationResult | null>(null);
 export interface FieldErrorRenderProps extends ValidationResult {}
 export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
 
-function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
+/**
+ * A FieldError displays validation errors for a form field.
+ */
+export const FieldError = forwardRef(function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
   let validation = useContext(FieldErrorContext);
   if (!validation?.isInvalid) {
     return null;
   }
 
   return <FieldErrorInner {...props} ref={ref} />;
-}
-
-/**
- * A FieldError displays validation errors for a form field.
- */
-const _FieldError = forwardRef(FieldError);
-export {_FieldError as FieldError};
+});
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;

package/src/FileTrigger.tsx

@@ -42,7 +42,10 @@ export interface FileTriggerProps {
   acceptDirectory?: boolean
 }
 
-function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
+ */
+export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
   let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
@@ -71,10 +74,4 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         webkitdirectory={acceptDirectory ? '' : undefined} />
     </>
   );
-}
-
-/**
- * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
- */
-const _FileTrigger = forwardRef(FileTrigger);
-export {_FileTrigger  as FileTrigger};
+});

package/src/Form.tsx

@@ -27,7 +27,11 @@ export interface FormProps extends SharedFormProps, DOMProps {
 
 export const FormContext = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
 
-function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
   [props, ref] = useContextProps(props, ref, FormContext);
   let {validationErrors, validationBehavior = 'native', children, className, ...domProps} = props;
   return (
@@ -39,11 +43,4 @@ function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
       </FormContext.Provider>
     </form>
   );
-}
-
-/**
- * A form is a group of inputs that allows users to submit data to a server,
- * with support for providing field validation errors.
- */
-const _Form = forwardRef(Form);
-export {_Form as Form};
+});

package/src/GridList.tsx

@@ -73,7 +73,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 +86,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 +247,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;
 
@@ -92,10 +95,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

@@ -17,12 +17,13 @@ import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleRe
 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 {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,21 +102,19 @@ 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};
   let {layoutDelegate} = useContext(CollectionRendererContext);
-  let state = useListState({...props, layoutDelegate});
-  return <ListBoxInner state={state} props={props} listBoxRef={listBoxRef} />;
+  let {filterFn, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // 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 filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);
+  let state = useListState({...props, collection: filteredCollection, layoutDelegate});
+  return <ListBoxInner state={state} props={{...props, ...collectionProps}} 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>,
@@ -246,7 +248,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 +265,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 +300,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 {}
 

package/src/Menu.tsx

@@ -10,13 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-
 import {AriaMenuProps, FocusScope, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
+import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
-import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 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 {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';
@@ -33,12 +32,14 @@ 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 {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 import {useSubmenuTrigger} from '@react-aria/menu';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
@@ -151,7 +152,10 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
 
 export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps, ScrollableProps<HTMLDivElement> {}
 
-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.
@@ -160,23 +164,27 @@ function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivEl
       {collection => collection.size > 0 && <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 {filterFn, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
+  ref = useObjectRef(useMemo(() => mergeRefs(ref, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, ref]));
+  let filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);
   let 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,
@@ -197,13 +205,13 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
           values={[
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
-            [SectionContext, {name: 'MenuSection', render: MenuSection}],
+            [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
             [SubmenuTriggerContext, {parentMenuRef: ref}],
             [MenuItemContext, null],
             [SelectionManagerContext, state.selectionManager]
           ]}>
           <CollectionRoot
-            collection={collection}
+            collection={state.collection}
             persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)}
             scrollRef={ref} />
         </Provider>
@@ -212,12 +220,6 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
   );
 }
 
-/**
- * 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 +253,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 +292,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 {
   /**

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,
@@ -67,10 +70,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);