@graphprotocol/gds-react 0.1.2 → 0.2.0

package/dist/components/Menu.parts.js

@@ -1,219 +1,216 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, isValidElement, useContext, useRef, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
 import { Menu } from '@base-ui/react/menu';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { twToPx } from '@graphprotocol/gds-css';
 import { ArrowRightInteractiveIcon, ArrowUpRightInteractiveIcon, CaretRightIcon, CheckIcon, LoadingIcon, MagnifyingGlassIcon, XIcon, } from '@graphprotocol/gds-react/icons';
-import { useAutoValue, useControlled, useCSSState, useGDS } from "../hooks/index.js";
-import { cn } from "../utils/index.js";
+import { useAutoValue, useControlled, useCSSPropsPolyfill, useCSSState, useGDS, } from "../hooks/index.js";
+import { cn, getCSSPropsAttributes, splitProps } from "../utils/index.js";
 import { renderAddon } from "./base/Addon.js";
 import { ButtonOrLink } from "./base/ButtonOrLink.js";
 import { Render } from "./base/Render.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
+import { MenuMeta } from './Menu.meta.js';
+import { Tooltip } from "./Tooltip.js";
 const MenuTriggerContext = createContext(false);
-export function MenuRoot({ ref: passedRef, open: controlledOpen, defaultOpen, onOpenChange, trigger, position: passedPosition = {}, header, footer, label, type, value, defaultValue, onChange, className, children, ...props }) {
-    useGDS();
-    const popupRef = useRef(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(trigger);
-    const [open, setOpen] = useControlled(controlledOpen, defaultOpen ?? false, onOpenChange);
-    const defaultPosition = {
-        align: 'start',
-        alignOffset: 0,
-        side: 'bottom',
-        gap: 1,
-        matchWidth: false,
-        matchHeight: false,
-        openOnHover: false,
-    };
-    const defaultNestedPosition = {
-        ...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 simulateKeyPress = (element, key, keyCode) => {
-        window.setTimeout(() => {
-            const newEvent = new KeyboardEvent('keydown', {
-                key,
-                code: key,
-                keyCode,
-                which: keyCode,
-                bubbles: true,
-                cancelable: true,
-            });
-            element.dispatchEvent(newEvent);
-        }, 0);
-    };
-    return (_jsxs(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, 
-        /**
-         * 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, closeParentOnEsc: true, children: [_jsx(MenuTriggerContext.Provider, { value: true, children: _jsx(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, 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) => {
-                            // 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 }) }), _jsx(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), children: _jsxs(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, onKeyDown: (event) => {
-                        props.onKeyDown?.(event);
-                        /**
-                         * 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 === 'Tab' && event.shiftKey) {
-                            const focusableElements = [
-                                ...event.currentTarget.querySelectorAll(`
-                  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 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('.gds-menu-item'),
-                                ];
-                                const highlightedMenuItem = menuItems.find((item) => item.matches('[data-highlighted]'));
+export function MenuRoot({ ref: passedRef, trigger, triggerMode: passedTriggerMode, side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight, open: controlledOpen, defaultOpen, onOpenChange, header, footer, label, type, value, defaultValue, onChange, className, style, children, ...props }) {
+    const { dirProps } = useGDS();
+    const { rootProps, nestedProps } = splitProps(props);
+    const portalRef = useRef(null);
+    const [cssPropsPolyfillRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(MenuMeta, {
+        side,
+        align,
+        matchTriggerWidth,
+        matchTriggerHeight,
+    }, {
+        returnPropValues: { side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight },
+    });
+    const isNested = useContext(MenuGroupContext) !== null;
+    const hasTrigger = trigger !== undefined;
+    const triggerIsElement = hasTrigger && typeof trigger !== 'function';
+    const triggerMode = passedTriggerMode ?? (isNested ? 'hover' : 'click');
+    const MenuRoot = isNested ? Menu.SubmenuRoot : Menu.Root;
+    const MenuTrigger = isNested ? Menu.SubmenuTrigger : Menu.Trigger;
+    const [open, setOpen] = useControlled(controlledOpen ?? (!hasTrigger ? true : undefined), defaultOpen ?? false, onOpenChange);
+    const initialOpen = useRef(open);
+    if (!open) {
+        initialOpen.current = false;
+    }
+    return (_jsx("div", { ref: cssPropsPolyfillRef, "data-nested": isNested || 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-nested:default-align-offset-[-2]
+        u:data-nested:default-gap-3
+        u:data-nested:default-side-end`, className), ...getCSSPropsAttributes(MenuMeta, { side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight }, style), ...cssPropsPolyfillAttributes, ...rootProps, children: _jsxs(MenuRoot, { 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: !isNested ? hasTrigger : undefined, closeParentOnEsc: true, children: [_jsx(MenuTriggerContext.Provider, { value: true, children: hasTrigger ? (
+                    // Hoist any tooltip used in `trigger` for its interactions to work properly
+                    _jsx(Tooltip, { children: _jsx(MenuTrigger, { nativeButton: !isNested, 
+                            // Ensure submenu triggers get disabled properly (see https://github.com/mui/base-ui/issues/3850)
+                            disabled: triggerIsElement && trigger.props.disabled === true, 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: triggerIsElement
+                                ? trigger
+                                : (renderProps) => {
+                                    // 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),
+                                    });
+                                } }) })) : (
+                    /**
+                     * 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).
+                     */
+                    _jsxs(_Fragment, { children: [_jsx(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
+                ` }), _jsx("div", { ref: portalRef, className: "contents *:contents" })] })) }), _jsx(Menu.Portal, { container: !hasTrigger
+                        ? portalRef
+                        : /**
+                           * 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
+                           * rendered inline (it can cause the nested menu to appear behind other elements).
+                           */
+                            document?.body, children: _jsx(Menu.Positioner, { side: cssProps.side === 'start'
+                            ? 'inline-start'
+                            : cssProps.side === 'end'
+                                ? 'inline-end'
+                                : cssProps.side, 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) => (_jsx("div", { ...renderProps, style: hasTrigger ? renderProps.style : undefined })), children: _jsxs(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, 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(`
+                      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('.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);
+                                        }
+                                    }
                                 }
-                            }
-                        }
-                    }, children: [_jsx("div", { className: "w-58" }), header ? (_jsx("div", { className: "nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4", children: header })) : null, _jsx("div", { className: "scrollbar-thin grow scroll-p-8 overflow-x-clip overflow-y-auto gradient-mask-y", children: _jsx("div", { className: "overflow-clip p-2", children: _jsx(MenuItemsContext.Provider, { value: { position }, children: _jsxs(MenuGroupContext.Provider, { value: null, children: [label !== undefined || type !== undefined ? (type === 'radio' ? (_jsx(MenuGroup, { label: label, type: type, value: value, defaultValue: defaultValue, onChange: onChange, children: children })) : (_jsx(MenuGroup, { label: label, type: type, children: children }))) : (children), _jsx("div", { className: "mt-[calc(-2*(--spacing(2))-1px)] not-preceded-by-peer/menu-group:hidden" })] }) }) }) }), footer ? (_jsx("div", { className: "nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4", children: footer })) : null, _jsx("div", { className: "pointer-events-none absolute inset-0 rounded-inherit border border-muted" })] }) })] }));
+                            }, children: [_jsx("div", { className: "w-58" }), header ? (_jsx("div", { className: "nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4", children: header })) : null, _jsx("div", { className: "scrollbar-thin grow scroll-p-8 overflow-x-clip overflow-y-auto gradient-mask-y", children: _jsx("div", { className: "overflow-clip p-2", children: _jsxs(MenuGroupContext.Provider, { value: "root", children: [label !== undefined || type !== undefined ? (type === 'radio' ? (_jsx(MenuGroup, { label: label, type: type, value: value, defaultValue: defaultValue, onChange: onChange, children: children })) : (_jsx(MenuGroup, { label: label, type: type, children: children }))) : (children), _jsx("div", { className: "mt-[calc(-2*(--spacing(2))-1px)] not-preceded-by-peer/menu-group:hidden" })] }) }) }), footer ? (_jsx("div", { className: "nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4", children: footer })) : null, _jsx("div", { className: "pointer-events-none absolute inset-0 rounded-inherit border border-muted" })] }) }) })] }, `${hasTrigger}-${triggerMode}`) }));
 }
 MenuRoot.displayName = 'Menu';
-const MenuItemsContext = createContext(null);
-const MaybePortal = ({ position, ...props }) => {
-    const containerRef = useRef(null);
-    const { dirProps } = useGDS();
-    return (_jsxs(_Fragment, { children: [!position ? _jsx("div", { ref: containerRef, className: "contents *:contents" }) : null, _jsx(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, children: _jsx(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 _jsx("div", { ...allowedPositionerProps, ...props });
-                    } }) })] }));
-};
 const MenuGroupContext = createContext(null);
 export function MenuGroup({ label, type = 'plain', value, defaultValue, onChange, className, style, children, ...props }) {
-    const isNested = useContext(MenuGroupContext) !== null;
+    const groupContext = useContext(MenuGroupContext);
+    const isNested = groupContext !== null && groupContext !== 'root';
     if (isNested) {
         throw new Error(`[Menu] Groups cannot be nested, make sure you're not using \`Menu.Group\` in a \`Menu\` with a \`label\` and/or \`type\` prop (implicit group)`);
     }
@@ -235,112 +232,96 @@ export function MenuItem({ ref: passedRef, type: passedType, addonBefore: passed
     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 renderContent = (renderProps) => {
+        let addonBefore = passedAddonBefore;
+        let addonInside = undefined;
+        let addonAfter = passedAddonAfter;
+        if (type === 'checkbox') {
+            if (addonBefore)
+                addonInside = addonBefore;
+            addonBefore = (_jsx(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 };
-            case 'checkbox':
-                return {
-                    disabled,
-                    checked,
-                    defaultChecked,
-                    onCheckedChange: onChange,
-                    closeOnClick: false,
-                };
-            case 'radio':
-                return {
-                    value: passedValue !== undefined ? passedValue : autoValue,
-                    disabled,
-                    closeOnClick: true,
-                };
-            case 'submenu-trigger':
-                return {};
+        if (type === 'radio') {
+            if (addonBefore)
+                addonInside = addonBefore;
+            addonBefore = _jsx(CheckIcon, { alt: "", className: "@state-unchecked/menu-item:invisible" });
         }
-    })();
-    return (_jsx(Element, { ref: stateElementPassedRef, ...state.polyfillAttributes, ...elementProps, ...props, onKeyDown: (event) => {
-            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) => {
-            let addonBefore = passedAddonBefore;
-            let addonInside = undefined;
-            let addonAfter = passedAddonAfter;
-            if (type === 'checkbox') {
-                if (addonBefore)
-                    addonInside = addonBefore;
-                addonBefore = (_jsx(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 = _jsx(CheckIcon, { alt: "", className: "@state-unchecked/menu-item:invisible" });
-            }
-            if (loading) {
-                addonAfter = _jsx(LoadingIcon, {});
-            }
-            if (type === 'submenu-trigger' && addonAfter === undefined) {
-                addonAfter = _jsx(CaretRightIcon, { alt: "" });
-            }
-            if (href !== undefined && addonAfter === undefined) {
-                addonAfter = (_jsx(ButtonOrLink.Consumer, { render: (buttonOrLinkState) => buttonOrLinkState?.target === '_blank' ? (_jsx(ArrowUpRightInteractiveIcon, { hiddenByDefault: true })) : (_jsx(ArrowRightInteractiveIcon, { hiddenByDefault: true })) }));
-            }
-            return (_jsxs(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 ? (_jsx(ButtonOrLink, { href: href, target: target, disabled: disabled })) : (_jsx("div", {})), children: [_jsx("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 ? (_jsx(MenuItemAddon, { className: `
-                  me-2
-                  has-checkbox:@state-checked/menu-item:opacity-100
-                  has-checkbox:@state-checked/menu-item:filter-none
-                `, children: renderAddon(addonBefore) })) : null, addonInside ? (_jsx(MenuItemAddon, { className: "me-1", children: renderAddon(addonInside) })) : null, _jsx("span", { className: "grow truncate pe-1", children: children || _jsx(_Fragment, { children: "\u00A0" }) }), addonAfter ? (_jsx(MenuItemAddon, { className: "ms-2", children: renderAddon(addonAfter) })) : null] }));
-        } }));
+        if (loading) {
+            addonAfter = _jsx(LoadingIcon, {});
+        }
+        if (type === 'submenu-trigger' && addonAfter === undefined) {
+            addonAfter = _jsx(CaretRightIcon, { alt: "" });
+        }
+        if (href !== undefined && addonAfter === undefined) {
+            addonAfter = (_jsx(ButtonOrLink.Consumer, { render: (buttonOrLinkState) => buttonOrLinkState?.target === '_blank' ? (_jsx(ArrowUpRightInteractiveIcon, { hiddenByDefault: true })) : (_jsx(ArrowRightInteractiveIcon, { hiddenByDefault: true })) }));
+        }
+        return (_jsxs(Render, { render: href !== undefined ? (_jsx(ButtonOrLink, { href: href, target: target, disabled: disabled })) : (_jsx("div", {})), "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: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, children: [_jsx("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 ? (_jsx(MenuItemAddon, { className: `
+              me-2
+              has-checkbox:@state-checked/menu-item:opacity-100
+              has-checkbox:@state-checked/menu-item:filter-none
+            `, children: renderAddon(addonBefore) })) : null, addonInside ? (_jsx(MenuItemAddon, { className: "me-1", children: renderAddon(addonInside) })) : null, _jsx("span", { className: "grow truncate pe-1", children: children || _jsx(_Fragment, { children: "\u00A0" }) }), addonAfter ? (_jsx(MenuItemAddon, { className: "ms-2", children: renderAddon(addonAfter) })) : null] }));
+    };
+    // 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 renderContent(baseProps);
+    }
+    const 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 (_jsx(CheckboxItem, { ...baseProps, closeOnClick: false, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onChange, onKeyDown: onKeyDown, disabled: disabled, render: renderContent }));
+    }
+    if (type === 'radio') {
+        return (_jsx(Menu.RadioItem, { ...baseProps, closeOnClick: true, value: passedValue !== undefined ? passedValue : autoValue, onKeyDown: onKeyDown, disabled: disabled, render: renderContent }));
+    }
+    return (_jsx(Menu.Item, { ...baseProps, onKeyDown: onKeyDown, disabled: disabled, render: renderContent }));
 }
 MenuItem.displayName = 'Menu.Item';
 function MenuItemAddon({ className, children, ...props }) {
@@ -360,8 +341,8 @@ export function MenuSearch({ ref: passedRef, placeholder: passedPlaceholder, val
 }
 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, defaultChecked, onCheckedChange, ...props }) {
     const [checked, setChecked] = useControlled(controlledChecked, defaultChecked ?? false, onCheckedChange);