Function MenuInner

packages/react-aria-components/src/Menu.tsx:325–405

({props, collection, menuRef: ref}: MenuInnerProps<T>)

}

function MenuInner<T>({props, collection, menuRef: ref}: MenuInnerProps<T>) {
  [props, ref] = useContextProps(props, ref, SelectableCollectionContext);
  let {filter, ...autocompleteMenuProps} = props;
  let filteredCollection = useMemo(
    () => (filter ? collection.filter(filter) : collection),
    [collection, filter]
  );
  let state = useTreeState({
    ...props,
    collection: filteredCollection,
    children: undefined
  });
  let triggerState = useContext(RootMenuTriggerStateContext);
  let {isVirtualized, CollectionRoot} = useContext(CollectionRendererContext);
  let {menuProps} = useMenu(
    {...props, isVirtualized, onClose: props.onClose || triggerState?.close},
    state,
    ref
  );
  let renderProps = useRenderProps({
    ...props,
    children: undefined,
    defaultClassName: 'react-aria-Menu',
    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>
    );
  }

  let DOMProps = filterDOMProps(props, {global: true});

  return (
    <FocusScope>
      <dom.div
        {...mergeProps(DOMProps, renderProps, menuProps)}
        ref={ref as RefObject<HTMLDivElement>}
        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: MenuSectionInner}],
            [
              SubmenuTriggerContext,
              {
                parentMenuRef: ref,
                shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus
              }