@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/components/Menu.parts.tsx

@@ -1,15 +1,6 @@
 'use client'
 
-import {
-  createContext,
-  isValidElement,
-  useContext,
-  useRef,
-  type ComponentProps,
-  type HTMLProps,
-  type ReactElement,
-  type ReactNode,
-} from 'react'
+import { createContext, useContext, useRef, type ComponentProps, type ReactNode } from 'react'
 import { Menu } from '@base-ui/react/menu'
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs'
 import type { Merge } from 'type-fest'
@@ -25,27 +16,23 @@ import {
   XIcon,
 } from '@graphprotocol/gds-react/icons'
 
-import { useAutoValue, useControlled, useCSSState, useGDS } from '../hooks/index.ts'
-import { cn, type OptionValue } from '../utils/index.ts'
+import {
+  useAutoValue,
+  useControlled,
+  useCSSPropsPolyfill,
+  useCSSState,
+  useGDS,
+} from '../hooks/index.ts'
+import { cn, getCSSPropsAttributes, splitProps, type OptionValue } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
-import { Render } from './base/Render.tsx'
+import { Render, type RenderFnProps, type RenderProp } from './base/Render.tsx'
 import { Button } from './Button.tsx'
 import { Checkbox } from './Checkbox.tsx'
-import type { MenuItemMeta, MenuMeta } from './Menu.meta.ts'
+import { MenuMeta, type MenuItemMeta } from './Menu.meta.js'
 
 const MenuTriggerContext = createContext<boolean>(false)
 
-type MenuPosition = {
-  align: 'start' | 'center' | 'end'
-  alignOffset: number
-  side: 'top' | 'bottom' | 'inline-start' | 'inline-end'
-  gap: number
-  matchWidth: boolean | 'at-least' | 'at-most'
-  matchHeight: boolean | 'at-least' | 'at-most'
-  openOnHover: boolean | number
-}
-
 type MenuItemType = 'plain' | 'checkbox' | 'radio'
 
 declare namespace GroupProps {
@@ -71,37 +58,28 @@ declare namespace MenuProps {
     extends
       Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>,
       GDSComponentProps<typeof MenuMeta> {
-    open?: boolean | undefined
-    defaultOpen?: boolean | undefined
-    onOpenChange?: ((open: boolean) => void) | undefined
-    /** Element that opens the menu when clicked, or function that returns such an element. */
-    trigger:
-      | ReactElement
-      | ((
-          renderProps: Record<string, unknown>,
-          state: {
-            open: boolean
-            setOpen: (open: boolean) => void
-            openMenu: () => void
-          },
-        ) => ReactElement)
     /**
-     * How the menu should be positioned relative to the trigger. Can be set to `false` to render
-     * the menu inline instead of in a portal. Nested menus have a different default position (they
-     * appear to the right of the parent menu), so in that case, `false` means to use the regular
-     * default position.
+     * Element that opens the menu when clicked or hovered (depending on `triggerMode`), or a
+     * function that returns such an element. If not provided, the menu is rendered inline rather
+     * than as a floating overlay, and all positioning props are ignored (`side`, `gap`, `align`,
+     * `alignOffset`, `matchTriggerWidth`, and `matchTriggerHeight`).
+     */
+    trigger?:
+      | RenderProp<{ open: boolean; setOpen: (open: boolean) => void; openMenu: () => void }>
+      | undefined
+    /**
+     * Controls how the menu is opened when `trigger` is an element. Ignored if `trigger` is a
+     * function, since you can fully customize the interaction that opens the menu (e.g.
+     * `trigger={(props, { openMenu }) => <button {...props} onMouseEnter={openMenu} />}`). Also
+     * ignored for submenus, which always open on hover.
      *
-     * @default {
-     *   align: 'start'
-     *   alignOffset: 0
-     *   side: 'bottom'
-     *   gap: 1
-     *   matchWidth: false
-     *   matchHeight: false
-     *   openOnHover: false
-     * }
+     * @default 'click'
      */
-    position?: Partial<MenuPosition> | false | undefined
+    triggerMode?: 'click' | 'hover' | undefined
+    /** Defaults to `true` if `trigger` is not provided, or `undefined` otherwise. */
+    open?: boolean | undefined
+    defaultOpen?: boolean | undefined
+    onOpenChange?: ((open: boolean) => void) | undefined
     header?: ReactNode | undefined
     footer?: ReactNode | undefined
   }
@@ -115,11 +93,17 @@ export type MenuProps<T extends OptionValue = OptionValue> =
 
 export function MenuRoot<T extends OptionValue>({
   ref: passedRef,
+  trigger,
+  triggerMode,
+  side,
+  gap,
+  align,
+  alignOffset,
+  matchTriggerWidth,
+  matchTriggerHeight,
   open: controlledOpen,
   defaultOpen,
   onOpenChange,
-  trigger,
-  position: passedPosition = {},
   header,
   footer,
   label,
@@ -128,351 +112,377 @@ export function MenuRoot<T extends OptionValue>({
   defaultValue,
   onChange,
   className,
+  style,
   children,
   ...props
 }: MenuProps<T>) {
-  useGDS()
-
-  const popupRef = useRef<HTMLDivElement>(null)
-  const popupPassedRef = useMergedRefs(popupRef, passedRef)
-
-  const isNested = useContext(MenuItemsContext) !== null
-  const Root = isNested ? Menu.SubmenuRoot : Menu.Root
-  const Trigger = isNested ? Menu.SubmenuTrigger : Menu.Trigger
-  const triggerIsElement = isValidElement<{ disabled?: boolean }>(trigger)
-
-  const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? false, onOpenChange)
-
-  const defaultPosition: MenuPosition = {
-    align: 'start',
-    alignOffset: 0,
-    side: 'bottom',
-    gap: 1,
-    matchWidth: false,
-    matchHeight: false,
-    openOnHover: false,
-  }
-  const defaultNestedPosition: MenuPosition = {
-    ...defaultPosition,
-    alignOffset:
-      passedPosition &&
-      (passedPosition.side === 'top' ||
-        passedPosition.side === 'bottom' ||
-        passedPosition.align === 'center')
-        ? 0
-        : -2,
-    side: 'inline-end',
-    gap:
-      passedPosition && (passedPosition.side === 'top' || passedPosition.side === 'bottom') ? 0 : 3,
-    openOnHover: true,
-  }
-  const position = isNested
-    ? passedPosition === false
-      ? defaultPosition
-      : { ...defaultNestedPosition, ...passedPosition }
-    : passedPosition === false
-      ? false
-      : {
-          ...defaultPosition,
-          ...passedPosition,
-        }
+  const { dirProps } = useGDS()
 
-  const simulateKeyPress = (element: Element, key: string, keyCode: number) => {
-    window.setTimeout(() => {
-      const newEvent = new KeyboardEvent('keydown', {
-        key,
-        code: key,
-        keyCode,
-        which: keyCode,
-        bubbles: true,
-        cancelable: true,
-      })
-      element.dispatchEvent(newEvent)
-    }, 0)
-  }
+  const { rootProps, nestedProps } = splitProps(props)
 
-  return (
-    <Root
-      open={open}
-      onOpenChange={(newOpen, eventDetails) => {
-        // Don't let a non-positioned menu close automatically when interacting outside of it, since it's not modal
-        if (
-          !newOpen &&
-          !position &&
-          (eventDetails.reason === 'trigger-focus' ||
-            eventDetails.reason === 'trigger-hover' ||
-            eventDetails.reason === 'outside-press')
-        ) {
-          return
-        }
-        setOpen(newOpen)
-      }}
-      modal={!isNested ? position !== false : (undefined as never)}
-      /**
-       * This seems to be the only way to disable a `Menu.SubmenuTrigger` (see
-       * https://github.com/mui/base-ui/issues/1976#issuecomment-2914529452).
-       */
-      disabled={triggerIsElement ? Boolean(trigger.props.disabled) : (undefined as never)}
-      closeParentOnEsc
-    >
-      <MenuTriggerContext.Provider value={true}>
-        <Trigger
-          nativeButton={isNested ? false : triggerIsElement}
-          openOnHover={position && position.openOnHover !== false}
-          delay={position && typeof position.openOnHover === 'number' ? position.openOnHover : 100}
-          data-open-on-hover={Boolean(position && position.openOnHover) || undefined}
+  const portalRef = useRef<HTMLDivElement>(null)
+
+  const [cssPropsPolyfillRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+    MenuMeta,
+    {
+      side,
+      align,
+      matchTriggerWidth,
+      matchTriggerHeight,
+    },
+    {
+      returnPropValues: { side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight },
+    },
+  )
+
+  const isSubmenu = useContext(MenuGroupContext) !== null
+  const MenuRoot = isSubmenu ? Menu.SubmenuRoot : Menu.Root
+
+  const hasTrigger = trigger !== undefined
+  const triggerElement = (() => {
+    if (!hasTrigger) return null
+    const renderTrigger =
+      typeof trigger !== 'function'
+        ? trigger
+        : (renderProps: RenderFnProps) => {
+            // Don't pass event handlers and other potentially too specific props (e.g. `type`)
+            const filteredRenderProps = Object.fromEntries(
+              Object.entries(renderProps).filter(
+                ([prop]) =>
+                  prop === 'ref' ||
+                  prop === 'id' ||
+                  prop === 'className' ||
+                  prop.startsWith('aria-') ||
+                  prop.startsWith('data-'),
+              ),
+            )
+            return trigger(filteredRenderProps, {
+              open,
+              setOpen,
+              openMenu: () => setOpen(true),
+            })
+          }
+    if (isSubmenu) {
+      return <Render render={renderTrigger} />
+    } else {
+      return (
+        <Menu.Trigger
+          nativeButton
+          openOnHover={triggerMode === 'hover'}
+          data-open-on-hover={triggerMode === 'hover' || undefined}
           className={`
             u:i:open:data-open-on-hover:state-hover
             u:iii:open:not-data-open-on-hover:state-active
           `}
-          render={
-            typeof trigger === 'function'
-              ? (renderProps: HTMLProps<unknown>) => {
-                  // Don't pass event handlers and other potentially too specific props (e.g. `type`)
-                  const filteredRenderProps = Object.fromEntries(
-                    Object.entries(renderProps).filter(
-                      ([prop]) =>
-                        prop === 'ref' ||
-                        prop === 'id' ||
-                        prop.startsWith('aria-') ||
-                        prop.startsWith('data-'),
-                    ),
-                  )
-                  return trigger(filteredRenderProps, {
-                    open,
-                    setOpen,
-                    openMenu: () => setOpen(true),
-                  })
-                }
-              : // oxlint-disable-next-line no-explicit-any
-                (trigger satisfies ReactElement<any> as ReactElement<any>)
-          }
+          render={renderTrigger}
         />
-      </MenuTriggerContext.Provider>
-      <MaybePortal
-        position={position}
-        data-positioned={position !== false || undefined}
-        data-match-width={position ? position.matchWidth || undefined : undefined}
-        data-match-height={position ? position.matchHeight || undefined : undefined}
-        className={cn(
-          `gds-menu root-flex
-          [--available-height-but-not-too-small:max(var(--available-height),--spacing(16))]
-          has-nested/menu-footer:[--available-height-but-not-too-small:max(var(--available-height),--spacing(32))]
-          has-nested/menu-header:[--available-height-but-not-too-small:max(var(--available-height),--spacing(32))]
-          u:w-max
-          u:max-w-full
-          u:rounded-12
-          u:data-positioned:max-h-(--available-height-but-not-too-small)
-          u:data-positioned:max-w-(--available-width)
-          u:i:data-[match-height=at-least]:min-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
-          u:i:data-[match-height=at-most]:max-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
-          u:i:data-[match-height=true]:h-(--anchor-height)
-          u:i:data-[match-width=at-least]:min-w-[min(var(--anchor-width),var(--available-width))]
-          u:i:data-[match-width=at-most]:max-w-[min(var(--anchor-width),var(--available-width))]
-          u:i:data-[match-width=true]:w-(--anchor-width)`,
-          className,
-        )}
+      )
+    }
+  })()
+
+  const [open, setOpen] = useControlled(
+    controlledOpen ?? (!hasTrigger ? true : undefined),
+    defaultOpen ?? false,
+    onOpenChange,
+  )
+  const initialOpen = useRef(open)
+  if (!open) {
+    initialOpen.current = false
+  }
+
+  return (
+    <div
+      ref={cssPropsPolyfillRef}
+      data-is-submenu={isSubmenu || undefined}
+      data-has-trigger={hasTrigger || undefined}
+      className={cn(
+        `gds-menu root-contents [anchor-scope:all]
+        not-data-has-trigger:**:data-base-ui-focus-guard:hidden
+        u:rounded-12
+        u:data-is-submenu:default-align-offset-[-2]
+        u:data-is-submenu:default-gap-3
+        u:data-is-submenu:default-side-end`,
+        // Very imperfect workaround for https://bugs.webkit.org/show_bug.cgi?id=301871
+        `safari:root-block
+        i:safari:not-data-is-submenu:size-max`,
+        className,
+      )}
+      {...getCSSPropsAttributes(
+        MenuMeta,
+        { side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight },
+        style,
+      )}
+      {...cssPropsPolyfillAttributes}
+      {...rootProps}
+    >
+      <MenuRoot
+        key={`${hasTrigger}-${triggerMode}`}
+        open={open}
+        onOpenChange={(newOpen) => {
+          // A menu with no trigger can still be opened/closed by the consumer, but it should not send events
+          if (hasTrigger) setOpen(newOpen)
+        }}
+        modal={!isSubmenu ? hasTrigger : (undefined as never)}
+        closeParentOnEsc
       >
-        <Menu.Popup
-          ref={popupPassedRef}
-          className={`
-            flex grow origin-(--transform-origin) flex-col overflow-clip rounded-inherit bg-muted outline-0 transition
-            data-ending-style:scale-95
-            data-ending-style:opacity-0
-            data-starting-style:scale-95
-            data-starting-style:opacity-0
-          `}
-          {...(props as ComponentProps<typeof Menu.Popup>)}
-          onKeyDown={(event) => {
-            props.onKeyDown?.(event)
+        <MenuTriggerContext.Provider value={true}>
+          {triggerElement ?? (
             /**
-             * Ensure Shift + Tab doesn't close the menu if there is a previous focusable element
-             * that is not a menu item (or if the previous focusable element is a menu item while
-             * the element that is currently focused is not).
+             * Base UI doesn't explicitly support menus with no `Menu.Trigger`, `Menu.Portal`, or
+             * `Menu.Positioner`, so we work around it. We render an invisible trigger to satisfy
+             * focus and keyboard expectations (note that it is visible when focused, as an
+             * outline). Then, to ensure the menu is rendered inline and not anchored to that
+             * trigger, we customize the portal container to be a sibling element (with `contents
+             * *:contents` so it's a transparent wrapper), and we apply positioning styles only when
+             * a trigger is provided (see `Menu.Positioner`'s `render` prop below). Finally, to
+             * prevent focus-trapping behavior that assumes a floating menu, we disable `modal` and
+             * hide Base UI’s focus guards with CSS (see root styles above).
              */
-            if (event.key === 'Tab' && event.shiftKey) {
-              const focusableElements = [
-                ...event.currentTarget.querySelectorAll<HTMLElement>(`
-                  a[href],
-                  button:enabled,
-                  input:enabled,
-                  select:enabled,
-                  textarea:enabled,
-                  summary,
-                  [tabindex]:not([tabindex="-1"]),
-                  [contenteditable="true"]
-                `),
-              ]
-              const previousElement = focusableElements.reverse().find((element) => {
-                return (
-                  element.compareDocumentPosition(document.activeElement!) &
-                  Node.DOCUMENT_POSITION_FOLLOWING
-                )
-              })
-              const activeElementIsMenuItem =
-                document.activeElement?.classList.contains('gds-menu-item')
-              const previousElementIsMenuItem = previousElement?.classList.contains('gds-menu-item')
-              if (
-                (previousElement && !previousElementIsMenuItem) ||
-                (!activeElementIsMenuItem && previousElementIsMenuItem)
-              ) {
-                event.preventBaseUIHandler()
-                return
-              }
+            <>
+              <Menu.Trigger
+                aria-label={
+                  props['aria-label'] ||
+                  (label && typeof label === 'string' ? label : undefined) ||
+                  'Menu'
+                }
+                className={`
+                  pointer-events-none absolute inset-[anchor(inside)] rounded-inherit [position-anchor:--gds-menu]
+                  not-open:hidden
+                `}
+              />
+              <div ref={portalRef} className="contents *:contents" />
+            </>
+          )}
+        </MenuTriggerContext.Provider>
+        <Menu.Portal
+          container={
+            !hasTrigger
+              ? portalRef
+              : /**
+                 * Specifying `document.body` because while it is the default for top-level menus, a submenu
+                 * defaults to using the same portal as its parent, which is not desirable when the parent is
+                 * rendered inline (it can cause the submenu to appear behind other elements).
+                 */
+                document?.body
+          }
+        >
+          <Menu.Positioner
+            side={
+              cssProps.side === 'start'
+                ? 'inline-start'
+                : cssProps.side === 'end'
+                  ? 'inline-end'
+                  : cssProps.side
             }
-            // If there is a search input in the menu...
-            const searchInput = event.currentTarget.querySelector('input[type="search"]')
-            if (searchInput instanceof HTMLInputElement) {
-              // If the user typed some text, ensure it goes in the input instead of Base UI focusing the item that matches
-              if (
-                (event.key.length === 1 && event.key !== ' ') ||
-                event.key === 'Backspace' ||
-                event.key === 'ArrowLeft' ||
-                event.key === 'ArrowRight'
-              ) {
-                event.preventBaseUIHandler()
-                searchInput.focus()
-              } else {
-                const searchInputIsFocused = document.activeElement === searchInput
-                const menuItems = [
-                  ...event.currentTarget.querySelectorAll<HTMLElement>('.gds-menu-item'),
-                ]
-                const highlightedMenuItem = menuItems.find((item) =>
-                  item.matches('[data-highlighted]'),
-                )
+            sideOffset={twToPx(cssProps.gap)}
+            align={cssProps.align}
+            alignOffset={twToPx(cssProps.alignOffset)}
+            collisionPadding={8}
+            collisionAvoidance={{
+              side: 'flip',
+              align: 'flip',
+              fallbackAxisSide:
+                cssProps.side === 'start' || cssProps.side === 'end' ? 'end' : 'none',
+            }}
+            data-has-trigger={hasTrigger || undefined}
+            data-match-trigger-width={cssProps.matchTriggerWidth || undefined}
+            data-match-trigger-height={cssProps.matchTriggerHeight || undefined}
+            className={cn(
+              `root-flex
+              [--available-height-but-not-too-small:max(var(--available-height),--spacing(16))]
+              [anchor-name:--gds-menu]
+              has-nested/menu-footer:[--available-height-but-not-too-small:max(var(--available-height),--spacing(32))]
+              has-nested/menu-header:[--available-height-but-not-too-small:max(var(--available-height),--spacing(32))]
+              u:w-max
+              u:max-w-full
+              u:rounded-12
+              u:data-has-trigger:max-h-(--available-height-but-not-too-small)
+              u:data-has-trigger:max-w-(--available-width)
+              u:i:data-[match-trigger-height=at-least]:min-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
+              u:i:data-[match-trigger-height=at-most]:max-h-[min(var(--anchor-height),var(--available-height-but-not-too-small))]
+              u:i:data-[match-trigger-height=true]:h-(--anchor-height)
+              u:i:data-[match-trigger-width=at-least]:min-w-[min(var(--anchor-width),var(--available-width))]
+              u:i:data-[match-trigger-width=at-most]:max-w-[min(var(--anchor-width),var(--available-width))]
+              u:i:data-[match-trigger-width=true]:w-(--anchor-width)`,
+              className,
+            )}
+            {...dirProps}
+            render={(renderProps) => (
+              <div {...renderProps} style={hasTrigger ? renderProps.style : undefined} />
+            )}
+          >
+            <Menu.Popup
+              ref={passedRef}
+              data-initial-open={initialOpen.current || undefined}
+              className={`
+                flex grow origin-(--transform-origin) flex-col overflow-clip rounded-inherit bg-muted outline-0 transition
+                data-ending-style:scale-95
+                data-ending-style:opacity-0
+                data-starting-style:not-data-initial-open:scale-95
+                data-starting-style:not-data-initial-open:opacity-0
+              `}
+              {...(nestedProps as ComponentProps<typeof Menu.Popup>)}
+              onKeyDown={(event) => {
+                nestedProps.onKeyDown?.(event)
                 /**
-                 * If the user pressed the down arrow while the search input is focused and there is
-                 * a single menu item in the results, move the focus to it because it may already be
-                 * highlighted, which would prevent Base UI from focusing it.
+                 * Ensure Shift + Tab doesn't close the menu if there is a previous focusable
+                 * element that is not a menu item (or if the previous focusable element is a menu
+                 * item while the element that is currently focused is not).
                  */
-                if (event.key === 'ArrowDown' && searchInputIsFocused && menuItems.length === 1) {
-                  event.preventBaseUIHandler()
-                  menuItems[0]!.focus()
-                }
-                // Inversely, if the user pressed the up arrow and the focus is on the only menu item, move it back to the search input
-                else if (
-                  event.key === 'ArrowUp' &&
-                  menuItems.length === 1 &&
-                  document.activeElement === menuItems[0]
-                ) {
-                  event.preventDefault()
-                  searchInput.focus()
+                if (event.key === 'Tab' && event.shiftKey) {
+                  const focusableElements = [
+                    ...event.currentTarget.querySelectorAll<HTMLElement>(`
+                      a[href],
+                      button:enabled,
+                      input:enabled,
+                      select:enabled,
+                      textarea:enabled,
+                      summary,
+                      [tabindex]:not([tabindex="-1"]),
+                      [contenteditable="true"]
+                    `),
+                  ]
+                  const previousElement = focusableElements.reverse().find((element) => {
+                    return (
+                      element.compareDocumentPosition(document.activeElement!) &
+                      Node.DOCUMENT_POSITION_FOLLOWING
+                    )
+                  })
+                  const activeElementIsMenuItem =
+                    document.activeElement?.classList.contains('gds-menu-item')
+                  const previousElementIsMenuItem =
+                    previousElement?.classList.contains('gds-menu-item')
+                  if (
+                    (previousElement && !previousElementIsMenuItem) ||
+                    (!activeElementIsMenuItem && previousElementIsMenuItem)
+                  ) {
+                    event.preventBaseUIHandler()
+                    return
+                  }
                 }
-                // If the user pressed Enter while the search input is focused and a menu item is highlighted, select it
-                else if (event.key === 'Enter' && searchInputIsFocused && highlightedMenuItem) {
-                  highlightedMenuItem.focus()
-                  simulateKeyPress(highlightedMenuItem, 'Enter', 13)
+                // If there is a search input in the menu...
+                const searchInput = event.currentTarget.querySelector('input[type="search"]')
+                if (searchInput instanceof HTMLInputElement) {
+                  // If the user typed some text, ensure it goes in the input instead of Base UI focusing the item that matches
+                  if (
+                    (event.key.length === 1 && event.key !== ' ') ||
+                    event.key === 'Backspace' ||
+                    event.key === 'ArrowLeft' ||
+                    event.key === 'ArrowRight'
+                  ) {
+                    event.preventBaseUIHandler()
+                    searchInput.focus()
+                  } else {
+                    const searchInputIsFocused = document.activeElement === searchInput
+                    const menuItems = [
+                      ...event.currentTarget.querySelectorAll<HTMLElement>('.gds-menu-item'),
+                    ]
+                    const highlightedMenuItem = menuItems.find((item) =>
+                      item.matches('[data-highlighted]'),
+                    )
+                    /**
+                     * If the user pressed the down arrow while the search input is focused and
+                     * there is a single menu item in the results, move the focus to it because it
+                     * may already be highlighted, which would prevent Base UI from focusing it.
+                     */
+                    if (
+                      event.key === 'ArrowDown' &&
+                      searchInputIsFocused &&
+                      menuItems.length === 1
+                    ) {
+                      event.preventBaseUIHandler()
+                      menuItems[0]!.focus()
+                    }
+                    // Inversely, if the user pressed the up arrow and the focus is on the only menu item, move it back to the search input
+                    else if (
+                      event.key === 'ArrowUp' &&
+                      menuItems.length === 1 &&
+                      document.activeElement === menuItems[0]
+                    ) {
+                      event.preventDefault()
+                      searchInput.focus()
+                    }
+                    // If the user pressed Enter while the search input is focused and a menu item is highlighted, select it
+                    else if (event.key === 'Enter' && searchInputIsFocused && highlightedMenuItem) {
+                      highlightedMenuItem.focus()
+                      window.setTimeout(() => {
+                        highlightedMenuItem.dispatchEvent(
+                          new KeyboardEvent('keydown', {
+                            key: 'Enter',
+                            code: 'Enter',
+                            keyCode: 13,
+                            which: 13,
+                            bubbles: true,
+                            cancelable: true,
+                          }),
+                        )
+                      }, 0)
+                    }
+                  }
                 }
-              }
-            }
-          }}
-        >
-          {/**
-           * This div gives the menu a "minimum width" that is not as strict as `min-width` (a fixed width
-           * overrides it, for example). A more elegant way to do this would be to change `u:w-max` to
-           * `u:w-[calc-size(max-content,max(size,theme(spacing.58)))]`, which would also allow to override
-           * that min width if needed, but `calc-size()` is not supported in Safari or Firefox yet.
-           */}
-          <div className="w-58" />
-          {header ? (
-            <div className="nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4">
-              {header}
-            </div>
-          ) : null}
-          <div className="scrollbar-thin grow scroll-p-8 overflow-x-clip overflow-y-auto gradient-mask-y">
-            <div className="overflow-clip p-2">
-              <MenuItemsContext.Provider value={{ position }}>
-                <MenuGroupContext.Provider value={null}>
-                  {/* When `label` or `type` is provided at the root level, automatically wrap `children` in a group */}
-                  {label !== undefined || type !== undefined ? (
-                    type === 'radio' ? (
-                      <MenuGroup
-                        label={label}
-                        type={type}
-                        value={value}
-                        defaultValue={defaultValue}
-                        onChange={onChange}
-                      >
-                        {children}
-                      </MenuGroup>
+              }}
+            >
+              {/**
+               * This div gives the menu a "minimum width" that is not as strict as `min-width` (a fixed width
+               * overrides it, for example). A more elegant way to do this would be to change `u:w-max` to
+               * `u:w-[calc-size(max-content,max(size,theme(spacing.58)))]`, which would also allow to override
+               * that min width if needed, but `calc-size()` is not supported in Safari or Firefox yet.
+               */}
+              <div className="w-58" />
+              {header ? (
+                <div className="nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4">
+                  {header}
+                </div>
+              ) : null}
+              <div className="scrollbar-thin grow scroll-p-8 overflow-x-clip overflow-y-auto gradient-mask-y">
+                <div className="overflow-clip p-2">
+                  <MenuGroupContext.Provider value="root">
+                    {/* When `label` or `type` is provided at the root level, automatically wrap `children` in a group */}
+                    {label !== undefined || type !== undefined ? (
+                      type === 'radio' ? (
+                        <MenuGroup
+                          label={label}
+                          type={type}
+                          value={value}
+                          defaultValue={defaultValue}
+                          onChange={onChange}
+                        >
+                          {children}
+                        </MenuGroup>
+                      ) : (
+                        <MenuGroup label={label} type={type}>
+                          {children}
+                        </MenuGroup>
+                      )
                     ) : (
-                      <MenuGroup label={label} type={type}>
-                        {children}
-                      </MenuGroup>
-                    )
-                  ) : (
-                    children
-                  )}
-                  <div className="mt-[calc(-2*(--spacing(2))-1px)] not-preceded-by-peer/menu-group:hidden" />
-                </MenuGroupContext.Provider>
-              </MenuItemsContext.Provider>
-            </div>
-          </div>
-          {footer ? (
-            <div className="nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4">
-              {footer}
-            </div>
-          ) : null}
-          <div className="pointer-events-none absolute inset-0 rounded-inherit border border-muted" />
-        </Menu.Popup>
-      </MaybePortal>
-    </Root>
+                      children
+                    )}
+                    <div className="mt-[calc(-2*(--spacing(2))-1px)] not-preceded-by-peer/menu-group:hidden" />
+                  </MenuGroupContext.Provider>
+                </div>
+              </div>
+              {footer ? (
+                <div className="nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4">
+                  {footer}
+                </div>
+              ) : null}
+              <div className="pointer-events-none absolute inset-0 rounded-inherit border border-muted" />
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </MenuRoot>
+    </div>
   )
 }
 MenuRoot.displayName = 'Menu'
 
-const MenuItemsContext = createContext<{
-  position: MenuPosition | false
-} | null>(null)
-
-const MaybePortal = ({
-  position,
-  ...props
-}: ComponentProps<'div'> & { position: MenuPosition | false }) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const { dirProps } = useGDS()
-
-  return (
-    <>
-      {/**
-       * Ideally, we simply wouldn't render a `Menu.Portal` or `Menu.Positioner` when `position` is
-       * `false`, but they are required by Base UI, so we hack our way around them.
-       */}
-      {!position ? <div ref={containerRef} className="contents *:contents" /> : null}
-      <Menu.Portal
-        container={
-          !position
-            ? containerRef
-            : /**
-               * Specifying `document.body` because while it is the default for top-level menus, a nested menu
-               * defaults to using the same portal as its parent, which is not desirable when the parent is not
-               * positioned (it can cause the nested menu to appear behind other elements).
-               */
-              document?.body
-        }
-      >
-        <Menu.Positioner
-          align={position ? position.align : 'start'}
-          alignOffset={position ? twToPx(position.alignOffset) : 0}
-          side={position ? position.side : 'bottom'}
-          sideOffset={position ? twToPx(position.gap) : 0}
-          collisionPadding={8}
-          {...dirProps}
-          render={({ style, ...otherPositionerProps }) => {
-            const allowedPositionerProps = position
-              ? { style, ...otherPositionerProps }
-              : otherPositionerProps
-            return <div {...allowedPositionerProps} {...props} />
-          }}
-        />
-      </Menu.Portal>
-    </>
-  )
-}
-
-const MenuGroupContext = createContext<{
-  type: MenuItemType
-} | null>(null)
+const MenuGroupContext = createContext<
+  | {
+      type: MenuItemType
+    }
+  | 'root'
+  | null
+>(null)
 
 declare namespace MenuGroupProps {
   interface BaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {}
@@ -495,7 +505,8 @@ export function MenuGroup<T extends OptionValue>({
   children,
   ...props
 }: MenuGroupProps<T>) {
-  const isNested = useContext(MenuGroupContext) !== null
+  const groupContext = useContext(MenuGroupContext)
+  const isNested = groupContext !== null && groupContext !== 'root'
 
   if (isNested) {
     throw new Error(
@@ -617,178 +628,174 @@ export function MenuItem<T extends OptionValue>({
   const hasAncestorMenuTrigger = useContext(MenuTriggerContext) !== false
   const type = hasAncestorMenuTrigger
     ? 'submenu-trigger'
-    : (passedType ?? groupContext?.type ?? 'plain')
-
-  const Element = (() => {
-    switch (type) {
-      case 'plain':
-        return Menu.Item
-      case 'checkbox':
-        return CheckboxItem
-      case 'radio':
-        return Menu.RadioItem
-      case 'submenu-trigger':
-        return Render
+    : (passedType ??
+      (groupContext !== null && groupContext !== 'root' ? groupContext.type : undefined) ??
+      'plain')
+
+  const renderItem = (renderProps: RenderFnProps) => {
+    let addonBefore: AddonValue = passedAddonBefore
+    let addonInside: AddonValue = undefined
+    let addonAfter: AddonValue = passedAddonAfter
+    if (type === 'checkbox') {
+      if (addonBefore) addonInside = addonBefore
+      addonBefore = (
+        <Checkbox
+          inert={true}
+          aria-label="" // Prevent console warning about missing label
+          className={`
+            @state-checked/menu-item:state-checked
+            @state-indeterminate/menu-item:state-indeterminate
+            @state-hover/menu-item:state-hover
+            @state-active/menu-item:state-active
+            @state-disabled/menu-item:state-idle
+            @state-disabled/menu-item:@state-checked/menu-item:state-disabled
+          `}
+        />
+      )
     }
-  })()
-  const elementProps = (() => {
-    switch (type) {
-      case 'plain':
-        return { disabled } satisfies ComponentProps<typeof Menu.Item>
-      case 'checkbox':
-        return {
-          disabled,
-          checked,
-          defaultChecked,
-          onCheckedChange: onChange,
-          closeOnClick: false,
-        } satisfies ComponentProps<typeof CheckboxItem>
-      case 'radio':
-        return {
-          value: passedValue !== undefined ? passedValue : autoValue,
-          disabled,
-          closeOnClick: true,
-        } satisfies ComponentProps<typeof Menu.RadioItem>
-      case 'submenu-trigger':
-        return {}
+    if (type === 'radio') {
+      if (addonBefore) addonInside = addonBefore
+      addonBefore = <CheckIcon alt="" className="@state-unchecked/menu-item:invisible" />
     }
-  })()
+    if (loading) {
+      addonAfter = <LoadingIcon />
+    }
+    if (type === 'submenu-trigger' && addonAfter === undefined) {
+      addonAfter = <CaretRightIcon alt="" />
+    }
+    if (href !== undefined && addonAfter === undefined) {
+      addonAfter = (
+        <ButtonOrLink.Consumer
+          render={(buttonOrLinkState) =>
+            buttonOrLinkState?.target === '_blank' ? (
+              <ArrowUpRightInteractiveIcon hiddenByDefault />
+            ) : (
+              <ArrowRightInteractiveIcon hiddenByDefault />
+            )
+          }
+        />
+      )
+    }
+    return (
+      <Render
+        render={<ButtonOrLink href={href} target={target as undefined} />}
+        data-type={type}
+        data-variant={variant}
+        className={cn(
+          `gds-menu-item root-flex w-full items-center outline-0 select-none u:rounded-6 u:p-2 u:text-16
+          u:state-idle
+          u:checked:state-checked
+          u:indeterminate:state-indeterminate
+          u:disabled:pointer-events-none
+          u:disabled:state-disabled
+          u:data-highlighted:state-hover
+          u:data-[variant=danger]:text-status-error-default
+          u:ii:not-disabled:active:state-active
+          u:ii:data-[type=submenu-trigger]:not-[a]:cursor-default
+          u:ii:data-[type=submenu-trigger]:not-[a]:active:state-hover
+          ${/* Disabled styles */ ''}
+          u:*:transition-opacity
+          u:disabled:*:opacity-disabled
+          u:disabled:*:grayscale`,
+          className,
+        )}
+        {...renderProps}
+      >
+        <span
+          className={`
+            absolute inset-0 rounded-inherit opacity-100 filter-none transition
+            @state-hover/menu-item:bg-elevated
+            @state-active/menu-item:bg-default
+            @state-active/menu-item:transition-none
+          `}
+        />
+        {addonBefore ? (
+          <MenuItemAddon
+            className={`
+              me-2
+              has-checkbox:@state-checked/menu-item:opacity-100
+              has-checkbox:@state-checked/menu-item:filter-none
+            `}
+          >
+            {renderAddon(addonBefore)}
+          </MenuItemAddon>
+        ) : null}
+        {addonInside ? (
+          <MenuItemAddon className="me-1">{renderAddon(addonInside)}</MenuItemAddon>
+        ) : null}
+        <span className="grow truncate pe-1">{children || <>&nbsp;</>}</span>
+        {addonAfter ? (
+          <MenuItemAddon className="ms-2">{renderAddon(addonAfter)}</MenuItemAddon>
+        ) : null}
+      </Render>
+    )
+  }
+
+  // Filter out undefined values to satisfy Base UI's `exactOptionalPropertyTypes`
+  // TODO: Remove when https://github.com/mui/base-ui/pull/3302 is released
+  const definedProps = Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  )
+  const baseProps = {
+    ref: stateElementPassedRef,
+    ...state.polyfillAttributes,
+    ...definedProps,
+  }
+
+  if (type === 'submenu-trigger') {
+    return <Menu.SubmenuTrigger nativeButton disabled={disabled} render={renderItem(baseProps)} />
+  }
+
+  const nativeButton = href === undefined
+  const onKeyDown: ComponentProps<typeof Menu.Item>['onKeyDown'] = (event) => {
+    props.onKeyDown?.(event)
+    /**
+     * Allow Space to activate menu items that are links. This may not be needed in the future (see
+     * https://github.com/mui/base-ui/issues/1746).
+     */
+    if (!event.baseUIHandlerPrevented && event.key === ' ' && href !== undefined) {
+      event.preventBaseUIHandler()
+      elementRef.current?.click()
+    }
+  }
+
+  if (type === 'checkbox') {
+    return (
+      <CheckboxItem
+        {...baseProps}
+        nativeButton={nativeButton}
+        closeOnClick={false}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onChange}
+        onKeyDown={onKeyDown}
+        disabled={disabled}
+        render={renderItem}
+      />
+    )
+  }
+
+  if (type === 'radio') {
+    return (
+      <Menu.RadioItem
+        {...baseProps}
+        nativeButton={nativeButton}
+        closeOnClick={true}
+        value={passedValue !== undefined ? passedValue : autoValue}
+        onKeyDown={onKeyDown}
+        disabled={disabled}
+        render={renderItem}
+      />
+    )
+  }
 
   return (
-    <Element
-      ref={stateElementPassedRef}
-      {...state.polyfillAttributes}
-      {...elementProps}
-      {...(props as ComponentProps<typeof Element>)}
-      onKeyDown={(
-        event: Parameters<
-          NonNullable<
-            ComponentProps<
-              typeof Menu.Item | typeof CheckboxItem | typeof Menu.RadioItem
-            >['onKeyDown']
-          >
-        >[0],
-      ) => {
-        props.onKeyDown?.(event)
-        /**
-         * Allow Space to activate menu items that are links. TODO: This may not be needed in the
-         * future (see https://github.com/mui/base-ui/issues/1746).
-         */
-        if (
-          'preventBaseUIHandler' in event &&
-          !event.baseUIHandlerPrevented &&
-          event.key === ' ' &&
-          href !== undefined
-        ) {
-          event.preventBaseUIHandler()
-          elementRef.current?.click()
-        }
-      }}
-      render={(renderProps: Record<string, unknown>) => {
-        let addonBefore: AddonValue = passedAddonBefore
-        let addonInside: AddonValue = undefined
-        let addonAfter: AddonValue = passedAddonAfter
-        if (type === 'checkbox') {
-          if (addonBefore) addonInside = addonBefore
-          addonBefore = (
-            <Checkbox
-              inert={true}
-              aria-label="" // Prevent console warning about missing label
-              className={`
-                @state-checked/menu-item:state-checked
-                @state-indeterminate/menu-item:state-indeterminate
-                @state-hover/menu-item:state-hover
-                @state-active/menu-item:state-active
-                @state-disabled/menu-item:state-idle
-                @state-disabled/menu-item:@state-checked/menu-item:state-disabled
-              `}
-            />
-          )
-        }
-        if (type === 'radio') {
-          if (addonBefore) addonInside = addonBefore
-          addonBefore = <CheckIcon alt="" className="@state-unchecked/menu-item:invisible" />
-        }
-        if (loading) {
-          addonAfter = <LoadingIcon />
-        }
-        if (type === 'submenu-trigger' && addonAfter === undefined) {
-          addonAfter = <CaretRightIcon alt="" />
-        }
-        if (href !== undefined && addonAfter === undefined) {
-          addonAfter = (
-            <ButtonOrLink.Consumer
-              render={(buttonOrLinkState) =>
-                buttonOrLinkState?.target === '_blank' ? (
-                  <ArrowUpRightInteractiveIcon hiddenByDefault />
-                ) : (
-                  <ArrowRightInteractiveIcon hiddenByDefault />
-                )
-              }
-            />
-          )
-        }
-        return (
-          <Render
-            data-type={type}
-            data-variant={variant}
-            className={cn(
-              // TODO: Replace `active:` with `data-pressed:` when https://github.com/mui/base-ui/issues/1726 is added, to style Space presses as well
-              `gds-menu-item root-flex w-full items-center outline-0 select-none u:rounded-6 u:p-2 u:text-16 u:text-default
-              u:state-idle
-              u:checked:state-checked
-              u:indeterminate:state-indeterminate
-              u:disabled:pointer-events-none
-              u:disabled:state-disabled
-              u:data-highlighted:state-hover
-              u:data-[variant=danger]:text-status-error-default
-              u:ii:active:state-active
-              u:ii:data-[type=submenu-trigger]:not-[a]:cursor-default
-              u:ii:data-[type=submenu-trigger]:not-[a]:active:state-hover
-              ${/* Disabled styles */ ''}
-              u:*:transition-opacity
-              u:disabled:*:opacity-disabled
-              u:disabled:*:grayscale`,
-              className,
-            )}
-            {...renderProps}
-            render={
-              href !== undefined ? (
-                <ButtonOrLink href={href} target={target} disabled={disabled} />
-              ) : (
-                <div />
-              )
-            }
-          >
-            <span
-              className={`
-                absolute inset-0 rounded-inherit opacity-100 filter-none transition
-                @state-hover/menu-item:bg-elevated
-                @state-active/menu-item:bg-default
-                @state-active/menu-item:transition-none
-              `}
-            />
-            {addonBefore ? (
-              <MenuItemAddon
-                className={`
-                  me-2
-                  has-checkbox:@state-checked/menu-item:opacity-100
-                  has-checkbox:@state-checked/menu-item:filter-none
-                `}
-              >
-                {renderAddon(addonBefore)}
-              </MenuItemAddon>
-            ) : null}
-            {addonInside ? (
-              <MenuItemAddon className="me-1">{renderAddon(addonInside)}</MenuItemAddon>
-            ) : null}
-            <span className="grow truncate pe-1">{children || <>&nbsp;</>}</span>
-            {addonAfter ? (
-              <MenuItemAddon className="ms-2">{renderAddon(addonAfter)}</MenuItemAddon>
-            ) : null}
-          </Render>
-        )
-      }}
+    <Menu.Item
+      {...baseProps}
+      nativeButton={nativeButton}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      render={renderItem}
     />
   )
 }
@@ -869,8 +876,8 @@ export function MenuSearch({
 MenuSearch.displayName = 'Menu.Search'
 
 /**
- * Transparent wrapper for `Menu.CheckboxItem` to support `indeterminate`. TODO: This may not be
- * needed in the future (see https://github.com/mui/base-ui/issues/1983).
+ * Transparent wrapper for `Menu.CheckboxItem` to support `indeterminate`. This may not be needed in
+ * the future (see https://github.com/mui/base-ui/issues/1983).
  */
 function CheckboxItem({
   checked: controlledChecked,