@revikornmann/muka-ui 0.17.0 → 0.19.0

package/dist/cjs/components/Menu/Menu.js

@@ -34,132 +34,518 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuSubContent = exports.MenuSubTrigger = exports.MenuSub = exports.MenuRadioItem = exports.MenuRadioGroup = exports.MenuCheckboxItem = exports.MenuGroup = exports.MenuSeparator = exports.MenuItem = exports.MenuContent = exports.MenuTrigger = exports.Menu = void 0;
+exports.MenuSubContent = exports.MenuSubTrigger = exports.MenuSub = exports.MenuRadioItem = exports.MenuRadioGroup = exports.MenuCheckboxItem = exports.MenuGroup = exports.MenuSeparator = exports.MenuItem = exports.MenuSearch = exports.MenuContent = exports.MenuTrigger = exports.DropdownMenu = exports.Menu = void 0;
+exports.useMenuSearch = useMenuSearch;
+exports.highlightMenuMatch = highlightMenuMatch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const ContextMenuPrimitive = __importStar(require("@radix-ui/react-context-menu"));
 const Icon_1 = require("../Icon");
+const Scrollbar_1 = require("../Scrollbar");
 require("./Menu.css");
-const MenuContext = (0, react_1.createContext)({});
+const MenuContext = (0, react_1.createContext)({ trigger: 'click', open: false });
+const MenuSearchContext = (0, react_1.createContext)({
+    query: '',
+    setQuery: () => { },
+    searchable: false,
+    highlightedId: null,
+    registerSearchNavItem: () => () => { },
+    moveHighlight: () => { },
+    selectHighlighted: () => { },
+});
+const MenuSearchHitsContext = (0, react_1.createContext)(null);
+function useReportVisibleSearchResult(visible) {
+    const report = (0, react_1.useContext)(MenuSearchHitsContext);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!visible || !report)
+            return undefined;
+        report(1);
+        return () => report(-1);
+    }, [visible, report]);
+}
 /**
- * Menu Component
- *
- * A dropdown menu for displaying actions and options.
- * Built on Radix UI DropdownMenu for accessibility and keyboard navigation.
+ * Registers an enabled, visible row for MenuSearch arrow/Enter navigation.
+ * Returns whether this row is the current search highlight.
+ */
+function useSearchNavHighlight(options) {
+    const { enabled, disabled, select } = options;
+    const { searchable, highlightedId, registerSearchNavItem } = useMenuSearch();
+    const id = react_1.default.useId();
+    const selectRef = (0, react_1.useRef)(select);
+    selectRef.current = select;
+    (0, react_1.useLayoutEffect)(() => {
+        if (!searchable || !enabled || disabled)
+            return undefined;
+        return registerSearchNavItem({
+            id,
+            disabled: false,
+            select: () => selectRef.current(),
+        });
+    }, [searchable, enabled, disabled, id, registerSearchNavItem]);
+    return searchable && enabled && !disabled && highlightedId === id;
+}
+function useMenuSearch() {
+    return (0, react_1.useContext)(MenuSearchContext);
+}
+function useMenuPrimitives() {
+    const { trigger } = (0, react_1.useContext)(MenuContext);
+    return trigger === 'context' ? ContextMenuPrimitive : DropdownMenuPrimitive;
+}
+/** Bold the first case-insensitive match of `query` within `text`. */
+function highlightMenuMatch(text, query) {
+    if (!query)
+        return text;
+    const lower = text.toLowerCase();
+    const q = query.toLowerCase();
+    const index = lower.indexOf(q);
+    if (index === -1)
+        return text;
+    const before = text.slice(0, index);
+    const match = text.slice(index, index + query.length);
+    const after = text.slice(index + query.length);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [before, (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__match", children: match }), after] }));
+}
+function getSearchableText(children) {
+    if (typeof children === 'string' || typeof children === 'number') {
+        return String(children);
+    }
+    if (Array.isArray(children)) {
+        return children.map(getSearchableText).join('');
+    }
+    if (react_1.default.isValidElement(children)) {
+        const props = children.props;
+        return getSearchableText(props.children);
+    }
+    return '';
+}
+function matchesSearch(children, query) {
+    if (!query)
+        return true;
+    return getSearchableText(children).toLowerCase().includes(query.toLowerCase());
+}
+/**
+ * Menu (Dropdown Menu)
  *
- * @example
- * ```tsx
- * <Menu>
- *   <MenuTrigger asChild>
- *     <Button>Open Menu</Button>
- *   </MenuTrigger>
- *   <MenuContent>
- *     <MenuItem onSelect={() => console.log('Edit')}>Edit</MenuItem>
- *     <MenuItem onSelect={() => console.log('Delete')} destructive>Delete</MenuItem>
- *   </MenuContent>
- * </Menu>
- * ```
+ * Shared action-menu surface for click and right-click triggers.
+ * Built on Radix DropdownMenu / ContextMenu.
  */
-const Menu = ({ children, open, onOpenChange, defaultOpen, modal = true, }) => {
-    return ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { onOpenChange }, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Root, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, modal: modal, children: children }) }));
+const Menu = ({ children, trigger = 'click', open, onOpenChange, defaultOpen, modal = true, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(Boolean(defaultOpen));
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const value = (0, react_1.useMemo)(() => ({ trigger, open: isOpen }), [trigger, isOpen]);
+    if (trigger === 'context') {
+        return ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Root, { onOpenChange: handleOpenChange, modal: modal, children: children }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Root, { open: open, onOpenChange: handleOpenChange, defaultOpen: defaultOpen, modal: modal, children: children }) }));
 };
 exports.Menu = Menu;
+/** Alias for Figma / docs naming parity with "Dropdown Menu". */
+exports.DropdownMenu = exports.Menu;
 /**
- * MenuTrigger - Button that opens the menu
+ * MenuTrigger — opens the menu on click or right-click depending on `Menu.trigger`.
  */
-exports.MenuTrigger = react_1.default.forwardRef(({ children, asChild = false, className = '' }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { ref: ref, asChild: asChild, className: className || undefined, children: children }));
+exports.MenuTrigger = react_1.default.forwardRef(({ children, asChild = false, disabled = false, className = '' }, ref) => {
+    const { trigger } = (0, react_1.useContext)(MenuContext);
+    const Primitives = useMenuPrimitives();
+    if (trigger === 'context') {
+        const triggerClasses = ['muka-context-menu__trigger', className]
+            .filter(Boolean)
+            .join(' ');
+        return ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Trigger, { ref: ref, asChild: asChild, disabled: disabled, className: triggerClasses || undefined, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Primitives.Trigger, { ref: ref, asChild: asChild, disabled: disabled, className: className || undefined, children: children }));
 });
 exports.MenuTrigger.displayName = 'MenuTrigger';
 /**
- * MenuContent - The dropdown container for menu items
+ * MenuContent — dropdown / context menu surface with optional search + scrollbar.
  */
-exports.MenuContent = react_1.default.forwardRef(({ children, align = 'start', side = 'bottom', sideOffset = 4, alignOffset = 0, className = '', loop = true, onCloseAutoFocus, }, ref) => {
-    const contentClasses = ['muka-menu__content', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, align: align, side: side, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, onCloseAutoFocus: onCloseAutoFocus, children: children }) }));
+function isMenuSearchElement(child) {
+    return (react_1.default.isValidElement(child) &&
+        typeof child.type !== 'string' &&
+        Boolean(child.type &&
+            typeof child.type === 'object' &&
+            'displayName' in child.type &&
+            child.type.displayName === 'MenuSearch'));
+}
+function partitionMenuChildren(children) {
+    const search = [];
+    const items = [];
+    react_1.default.Children.forEach(children, (child) => {
+        if (isMenuSearchElement(child)) {
+            search.push(child);
+        }
+        else {
+            items.push(child);
+        }
+    });
+    return { search, items };
+}
+exports.MenuContent = react_1.default.forwardRef(({ children, align = 'start', side = 'bottom', sideOffset = 4, alignOffset = 0, className = '', style, loop = true, onOpenAutoFocus, onCloseAutoFocus, searchable = false, scrollbar = false, }, ref) => {
+    const { trigger, open } = (0, react_1.useContext)(MenuContext);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [searchHits, setSearchHits] = (0, react_1.useState)(0);
+    const [highlightedId, setHighlightedId] = (0, react_1.useState)(null);
+    const viewportRef = (0, react_1.useRef)(null);
+    const searchNavItemsRef = (0, react_1.useRef)([]);
+    // Clear search when the menu closes so the next open shows all options.
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setQuery('');
+            setHighlightedId(null);
+        }
+    }, [open]);
+    const reportSearchHits = (0, react_1.useCallback)((delta) => {
+        setSearchHits((count) => count + delta);
+    }, []);
+    const registerSearchNavItem = (0, react_1.useCallback)((item) => {
+        searchNavItemsRef.current.push(item);
+        return () => {
+            searchNavItemsRef.current = searchNavItemsRef.current.filter((entry) => entry.id !== item.id);
+        };
+    }, []);
+    const moveHighlight = (0, react_1.useCallback)((delta) => {
+        const enabled = searchNavItemsRef.current.filter((item) => !item.disabled);
+        if (enabled.length === 0) {
+            setHighlightedId(null);
+            return;
+        }
+        setHighlightedId((current) => {
+            const index = enabled.findIndex((item) => item.id === current);
+            const from = index === -1 ? (delta > 0 ? -1 : 0) : index;
+            const next = (from + delta + enabled.length) % enabled.length;
+            return enabled[next].id;
+        });
+    }, []);
+    const highlightedIdRef = (0, react_1.useRef)(null);
+    highlightedIdRef.current = highlightedId;
+    const selectHighlighted = (0, react_1.useCallback)(() => {
+        const enabled = searchNavItemsRef.current.filter((item) => !item.disabled);
+        const currentId = highlightedIdRef.current;
+        const target = enabled.find((item) => item.id === currentId) ?? enabled[0] ?? null;
+        target?.select();
+    }, []);
+    // After children register, pin highlight to the first enabled row (or keep
+    // the current one when it is still in the filtered list).
+    (0, react_1.useLayoutEffect)(() => {
+        if (!searchable) {
+            searchNavItemsRef.current = [];
+            if (highlightedIdRef.current !== null)
+                setHighlightedId(null);
+            return;
+        }
+        const enabled = searchNavItemsRef.current.filter((item) => !item.disabled);
+        setHighlightedId((current) => {
+            if (current && enabled.some((item) => item.id === current))
+                return current;
+            return enabled[0]?.id ?? null;
+        });
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        if (!highlightedId || !viewportRef.current)
+            return;
+        const active = viewportRef.current.querySelector('.muka-menu__item[data-highlighted]');
+        if (typeof active?.scrollIntoView === 'function') {
+            active.scrollIntoView({ block: 'nearest' });
+        }
+    }, [highlightedId]);
+    const handleQueryChange = (0, react_1.useCallback)((next) => {
+        setQuery(next);
+        // Force re-pin to the first match on the next layout pass.
+        setHighlightedId(null);
+    }, []);
+    const searchValue = (0, react_1.useMemo)(() => ({
+        query,
+        setQuery: handleQueryChange,
+        searchable,
+        highlightedId,
+        registerSearchNavItem,
+        moveHighlight,
+        selectHighlighted,
+    }), [
+        query,
+        handleQueryChange,
+        searchable,
+        highlightedId,
+        registerSearchNavItem,
+        moveHighlight,
+        selectHighlighted,
+    ]);
+    // Prefer the sticky search field so typing + arrow/Enter nav work immediately.
+    const handleOpenAutoFocus = (0, react_1.useCallback)((event) => {
+        if (onOpenAutoFocus) {
+            onOpenAutoFocus(event);
+            return;
+        }
+        if (!searchable)
+            return;
+        const content = event.currentTarget;
+        const input = content?.querySelector?.('.muka-menu__search-input');
+        if (input) {
+            event.preventDefault();
+            input.focus();
+        }
+    }, [onOpenAutoFocus, searchable]);
+    const { search, items } = partitionMenuChildren(children);
+    const searchNodes = search.length > 0 ? search : searchable ? (0, jsx_runtime_1.jsx)(exports.MenuSearch, {}) : null;
+    const contentClasses = [
+        'muka-menu__content',
+        searchable && 'muka-menu__content--searchable',
+        scrollbar && 'muka-menu__content--scrollbar',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const body = ((0, jsx_runtime_1.jsx)(MenuSearchContext.Provider, { value: searchValue, children: (0, jsx_runtime_1.jsxs)(MenuSearchHitsContext.Provider, { value: reportSearchHits, children: [searchNodes, (0, jsx_runtime_1.jsxs)("div", { className: "muka-menu__body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-menu__viewport", ref: viewportRef, children: [items, searchable && query && searchHits === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-menu__empty", role: "status", children: "No results" })) : null] }), scrollbar ? (0, jsx_runtime_1.jsx)(Scrollbar_1.Scrollbar, { viewportRef: viewportRef }) : null] })] }) }));
+    // Radix types omit onOpenAutoFocus from menu Content (private FocusScope prop),
+    // but it is supported at runtime — required so searchable menus focus the field.
+    if (trigger === 'context') {
+        const contextContentProps = {
+            ref,
+            alignOffset,
+            className: contentClasses,
+            style,
+            loop,
+            onOpenAutoFocus: handleOpenAutoFocus,
+            onCloseAutoFocus,
+            children: body,
+        };
+        return ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Content, { ...contextContentProps }) }));
+    }
+    const dropdownContentProps = {
+        ref,
+        align,
+        side,
+        sideOffset,
+        alignOffset,
+        className: contentClasses,
+        style,
+        loop,
+        onOpenAutoFocus: handleOpenAutoFocus,
+        onCloseAutoFocus,
+        children: body,
+    };
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ...dropdownContentProps }) }));
 });
 exports.MenuContent.displayName = 'MenuContent';
+/**
+ * MenuSearch — sticky search header for filtering menu items.
+ * Must be used inside a `MenuContent` with `searchable`.
+ */
+exports.MenuSearch = react_1.default.forwardRef(({ placeholder = 'Search', size = 'md', className = '', 'aria-label': ariaLabel }, ref) => {
+    const { query, setQuery, searchable, moveHighlight, selectHighlighted, } = useMenuSearch();
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        // Keep typing from driving Radix typeahead, but own arrow/Enter for
+        // highlight + commit while focus stays in the search field.
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            moveHighlight(1);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            moveHighlight(-1);
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            selectHighlighted();
+            return;
+        }
+        e.stopPropagation();
+    }, [moveHighlight, selectHighlighted]);
+    if (!searchable) {
+        return null;
+    }
+    const iconSize = size === 'sm' ? 'xs' : 'sm';
+    const rootClasses = [
+        'muka-menu__search',
+        size === 'sm' && 'muka-menu__search--sm',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, "data-muka-menu-search": "", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-menu__search-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", variant: "line", size: iconSize }) }), (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "search", className: "muka-menu__search-input", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": ariaLabel || placeholder, autoComplete: "off", autoCorrect: "off", spellCheck: false }), query.length > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-menu__search-clear", onClick: () => setQuery(''), "aria-label": "Clear search", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: iconSize }) }))] }));
+});
+exports.MenuSearch.displayName = 'MenuSearch';
 /**
  * MenuItem - An action item within the menu
  */
-exports.MenuItem = react_1.default.forwardRef(({ children, onSelect, disabled = false, destructive = false, icon, shortcut, className = '', }, ref) => {
+exports.MenuItem = react_1.default.forwardRef(({ children, onSelect, disabled = false, destructive = false, icon, shortcut, hint, highlighted = false, id, className = '', textValue, }, ref) => {
+    const Primitives = useMenuPrimitives();
+    const { query, searchable } = useMenuSearch();
+    const labelText = textValue ?? getSearchableText(children);
+    const hidden = Boolean(searchable && query && !matchesSearch(labelText, query));
+    useReportVisibleSearchResult(searchable && Boolean(query) && !hidden);
+    const itemRef = (0, react_1.useRef)(null);
+    const setRefs = (0, react_1.useCallback)((node) => {
+        itemRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const searchHighlighted = useSearchNavHighlight({
+        enabled: searchable && !hidden,
+        disabled,
+        select: () => itemRef.current?.click(),
+    });
+    if (hidden) {
+        return null;
+    }
+    const isHighlighted = highlighted || searchHighlighted;
+    const showEnterHint = (hint === 'enter' || searchHighlighted) && !shortcut;
     const itemClasses = [
         'muka-menu__item',
+        showEnterHint && 'muka-menu__item--hint-enter',
+        shortcut && 'muka-menu__item--has-shortcut',
         destructive && 'muka-menu__item--destructive',
         disabled && 'muka-menu__item--disabled',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.Item, { ref: ref, className: itemClasses, onSelect: onSelect, disabled: disabled, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: children }), shortcut && (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-shortcut", children: shortcut })] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives.Item, { ref: setRefs, id: id, className: itemClasses, onSelect: onSelect, disabled: disabled, textValue: labelText, "aria-label": searchable && query ? labelText : undefined, "data-highlighted": isHighlighted ? '' : undefined, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: searchable && query ? highlightMenuMatch(labelText, query) : children }), shortcut ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-shortcut", children: shortcut })) : showEnterHint ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-hint", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-return", size: "md", color: "var(--color-text-muted-default)" }) })) : null] }));
 });
 exports.MenuItem.displayName = 'MenuItem';
 /**
  * MenuSeparator - A visual divider between menu items
  */
 exports.MenuSeparator = react_1.default.forwardRef(({ className = '' }, ref) => {
+    const Primitives = useMenuPrimitives();
     const separatorClasses = ['muka-menu__separator', className].filter(Boolean).join(' ');
-    return (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Separator, { ref: ref, className: separatorClasses });
+    return (0, jsx_runtime_1.jsx)(Primitives.Separator, { ref: ref, className: separatorClasses });
 });
 exports.MenuSeparator.displayName = 'MenuSeparator';
 /**
  * MenuGroup - A labeled group of menu items
  */
 exports.MenuGroup = react_1.default.forwardRef(({ children, label, className = '' }, ref) => {
+    const Primitives = useMenuPrimitives();
     const groupClasses = ['muka-menu__group', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.Group, { ref: ref, className: groupClasses, children: [label && ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Label, { className: "muka-menu__group-label", children: label })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives.Group, { ref: ref, className: groupClasses, children: [label && (0, jsx_runtime_1.jsx)(Primitives.Label, { className: "muka-menu__group-label", children: label }), children] }));
 });
 exports.MenuGroup.displayName = 'MenuGroup';
 /**
  * MenuCheckboxItem - A checkable menu item
  */
-exports.MenuCheckboxItem = react_1.default.forwardRef(({ children, checked, onCheckedChange, disabled = false, icon, className = '' }, ref) => {
+exports.MenuCheckboxItem = react_1.default.forwardRef(({ children, checked, onCheckedChange, disabled = false, icon, indicator: indicatorPlacement = 'leading', className = '', textValue, }, ref) => {
+    const Primitives = useMenuPrimitives();
+    const { query, searchable } = useMenuSearch();
+    const labelText = textValue ?? getSearchableText(children);
+    const hidden = Boolean(searchable && query && !matchesSearch(labelText, query));
+    useReportVisibleSearchResult(searchable && Boolean(query) && !hidden);
+    const itemRef = (0, react_1.useRef)(null);
+    const setRefs = (0, react_1.useCallback)((node) => {
+        itemRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const searchHighlighted = useSearchNavHighlight({
+        enabled: searchable && !hidden,
+        disabled,
+        select: () => itemRef.current?.click(),
+    });
+    if (hidden) {
+        return null;
+    }
+    const trailing = indicatorPlacement === 'trailing' || Boolean(icon);
+    // Search highlight owns the trailing slot for the return affordance.
+    const showTrailingCheck = trailing && !searchHighlighted;
     const itemClasses = [
         'muka-menu__item',
         'muka-menu__item--checkbox',
+        trailing && 'muka-menu__item--checkbox-trailing',
+        searchHighlighted && 'muka-menu__item--hint-enter',
         disabled && 'muka-menu__item--disabled',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    const indicator = ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-indicator", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: "sm" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: itemClasses, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }) : indicator, (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: children }), icon ? indicator : null] }));
+    const indicator = ((0, jsx_runtime_1.jsx)("span", { className: [
+            'muka-menu__item-indicator',
+            trailing && 'muka-menu__item-indicator--trailing',
+        ]
+            .filter(Boolean)
+            .join(' '), children: (0, jsx_runtime_1.jsx)(Primitives.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: "md", color: trailing
+                    ? 'var(--color-text-subtle-default)'
+                    : undefined }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives.CheckboxItem, { ref: setRefs, className: itemClasses, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, textValue: labelText, "aria-label": searchable && query ? labelText : undefined, "data-highlighted": searchHighlighted ? '' : undefined, children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }) : null, !trailing ? indicator : null, (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: searchable && query ? highlightMenuMatch(labelText, query) : children }), showTrailingCheck ? indicator : null, searchHighlighted ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-hint", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-return", size: "md", color: "var(--color-text-muted-default)" }) })) : null] }));
 });
 exports.MenuCheckboxItem.displayName = 'MenuCheckboxItem';
 /**
  * MenuRadioGroup - A group of radio menu items
  */
 exports.MenuRadioGroup = react_1.default.forwardRef(({ children, value, onValueChange, className = '' }, ref) => {
+    const Primitives = useMenuPrimitives();
     const groupClasses = ['muka-menu__radio-group', className].filter(Boolean).join(' ');
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.RadioGroup, { ref: ref, className: groupClasses, value: value, onValueChange: onValueChange, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Primitives.RadioGroup, { ref: ref, className: groupClasses, value: value, onValueChange: onValueChange, children: children }));
 });
 exports.MenuRadioGroup.displayName = 'MenuRadioGroup';
 /**
  * MenuRadioItem - A radio option within a MenuRadioGroup
  */
-exports.MenuRadioItem = react_1.default.forwardRef(({ children, value, disabled = false, className = '' }, ref) => {
+exports.MenuRadioItem = react_1.default.forwardRef(({ children, value, disabled = false, className = '', indicator = 'dot', textValue, }, ref) => {
+    const Primitives = useMenuPrimitives();
+    const { query, searchable } = useMenuSearch();
+    const labelText = textValue ?? getSearchableText(children);
+    const hidden = Boolean(searchable && query && !matchesSearch(labelText, query));
+    useReportVisibleSearchResult(searchable && Boolean(query) && !hidden);
+    const itemRef = (0, react_1.useRef)(null);
+    const setRefs = (0, react_1.useCallback)((node) => {
+        itemRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const searchHighlighted = useSearchNavHighlight({
+        enabled: searchable && !hidden,
+        disabled,
+        select: () => itemRef.current?.click(),
+    });
+    if (hidden) {
+        return null;
+    }
+    const showTrailingCheck = indicator === 'check' && !searchHighlighted;
     const itemClasses = [
         'muka-menu__item',
         'muka-menu__item--radio',
+        indicator === 'check' && 'muka-menu__item--radio-check',
+        searchHighlighted && 'muka-menu__item--hint-enter',
         disabled && 'muka-menu__item--disabled',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.RadioItem, { ref: ref, className: itemClasses, value: value, disabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-indicator", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__radio-dot" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives.RadioItem, { ref: setRefs, className: itemClasses, value: value, disabled: disabled, textValue: labelText, "aria-label": searchable && query ? labelText : undefined, "data-highlighted": searchHighlighted ? '' : undefined, children: [indicator === 'dot' && ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-indicator", children: (0, jsx_runtime_1.jsx)(Primitives.ItemIndicator, { children: (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__radio-dot" }) }) })), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: searchable && query ? highlightMenuMatch(labelText, query) : children }), showTrailingCheck && ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-indicator muka-menu__item-indicator--trailing", children: (0, jsx_runtime_1.jsx)(Primitives.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: "md", color: "var(--color-text-subtle-default)" }) }) })), searchHighlighted ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-hint", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-return", size: "md", color: "var(--color-text-muted-default)" }) })) : null] }));
 });
 exports.MenuRadioItem.displayName = 'MenuRadioItem';
 /**
  * MenuSub - A submenu container
  */
 const MenuSub = ({ children, open, onOpenChange, defaultOpen, }) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Sub, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, children: children }));
+    const Primitives = useMenuPrimitives();
+    return ((0, jsx_runtime_1.jsx)(Primitives.Sub, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, children: children }));
 };
 exports.MenuSub = MenuSub;
 /**
  * MenuSubTrigger - Trigger that opens a submenu
  */
 exports.MenuSubTrigger = react_1.default.forwardRef(({ children, icon, disabled = false, className = '' }, ref) => {
+    const Primitives = useMenuPrimitives();
     const itemClasses = [
         'muka-menu__item',
         'muka-menu__item--sub-trigger',
@@ -168,16 +554,20 @@ exports.MenuSubTrigger = react_1.default.forwardRef(({ children, icon, disabled
     ]
         .filter(Boolean)
         .join(' ');
-    return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: itemClasses, disabled: disabled, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-chevron", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", variant: "line", size: "sm" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives.SubTrigger, { ref: ref, className: itemClasses, disabled: disabled, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-icon", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-label", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "muka-menu__item-chevron", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", variant: "line", size: "sm" }) })] }));
 });
 exports.MenuSubTrigger.displayName = 'MenuSubTrigger';
 /**
  * MenuSubContent - The dropdown container for submenu items
  */
 exports.MenuSubContent = react_1.default.forwardRef(({ children, sideOffset = 2, alignOffset = -4, className = '', loop = true }, ref) => {
+    const { trigger } = (0, react_1.useContext)(MenuContext);
     const contentClasses = ['muka-menu__content', 'muka-menu__content--sub', className]
         .filter(Boolean)
         .join(' ');
+    if (trigger === 'context') {
+        return ((0, jsx_runtime_1.jsx)(ContextMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(ContextMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
+    }
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
 });
 exports.MenuSubContent.displayName = 'MenuSubContent';