) => (
-
- {children}
-
-);
+}: ComponentProps<'div'>) => {
+ const { autocomplete } = useMenuContext();
+ const Component = autocomplete ? AutocompletePrimitive.Empty : 'div';
+
+ return (
+
+ {children}
+
+ );
+};
ContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';
diff --git a/packages/react/components/context-menu/context-menu.tsx b/packages/react/components/context-menu/context-menu.tsx
index 15ce97fce..b2dc28dae 100644
--- a/packages/react/components/context-menu/context-menu.tsx
+++ b/packages/react/components/context-menu/context-menu.tsx
@@ -2,7 +2,13 @@ import {
ContextMenuContent,
ContextMenuSubContent
} from './context-menu-content';
-import { ContextMenuItem } from './context-menu-item';
+import {
+ ContextMenuCheckboxItem,
+ ContextMenuItem,
+ ContextMenuLinkItem,
+ ContextMenuRadioGroup,
+ ContextMenuRadioItem
+} from './context-menu-item';
import {
ContextMenuEmptyState,
ContextMenuGroup,
@@ -19,6 +25,10 @@ export const ContextMenu = Object.assign(ContextMenuRoot, {
Trigger: ContextMenuTrigger,
Content: ContextMenuContent,
Item: ContextMenuItem,
+ CheckboxItem: ContextMenuCheckboxItem,
+ RadioGroup: ContextMenuRadioGroup,
+ RadioItem: ContextMenuRadioItem,
+ LinkItem: ContextMenuLinkItem,
Group: ContextMenuGroup,
Label: ContextMenuLabel,
Separator: ContextMenuSeparator,
diff --git a/packages/react/components/context-menu/index.ts b/packages/react/components/context-menu/index.ts
index b2276ee7e..571f06f84 100644
--- a/packages/react/components/context-menu/index.ts
+++ b/packages/react/components/context-menu/index.ts
@@ -1,6 +1,12 @@
export { ContextMenu } from './context-menu';
export type { ContextMenuContentProps } from './context-menu-content';
-export type { ContextMenuItemProps } from './context-menu-item';
+export type {
+ ContextMenuCheckboxItemProps,
+ ContextMenuItemProps,
+ ContextMenuLinkItemProps,
+ ContextMenuRadioGroupProps,
+ ContextMenuRadioItemProps
+} from './context-menu-item';
export type {
ContextMenuGroupProps,
ContextMenuLabelProps
diff --git a/packages/react/components/menu/__tests__/data-slots.test.tsx b/packages/react/components/menu/__tests__/data-slots.test.tsx
index 51aedf5a2..182756216 100644
--- a/packages/react/components/menu/__tests__/data-slots.test.tsx
+++ b/packages/react/components/menu/__tests__/data-slots.test.tsx
@@ -34,6 +34,11 @@ describe('Menu data-slot contract', () => {
Nested
+ Checkbox
+
+ Radio
+
+ Link
Nothing here
@@ -53,7 +58,13 @@ describe('Menu data-slot contract', () => {
'menu-cell-trailing-icon',
'menu-separator',
'menu-subtrigger',
- 'menu-empty-state'
+ 'menu-empty-state',
+ 'menu-checkbox-item',
+ 'menu-checkbox-item-indicator',
+ 'menu-radio-group',
+ 'menu-radio-item',
+ 'menu-radio-item-indicator',
+ 'menu-link-item'
]);
});
diff --git a/packages/react/components/menu/__tests__/menu.test.tsx b/packages/react/components/menu/__tests__/menu.test.tsx
index 3455b9c39..021b8b7eb 100644
--- a/packages/react/components/menu/__tests__/menu.test.tsx
+++ b/packages/react/components/menu/__tests__/menu.test.tsx
@@ -211,4 +211,202 @@ describe('Menu', () => {
expect(screen.getByText('Banana')).toBeInTheDocument();
});
});
+
+ describe('Checkbox Items', () => {
+ it('toggles the checked state and aria-checked', async () => {
+ const onCheckedChange = vi.fn();
+ await renderAndOpenDropdown(
+
+ );
+
+ const item = screen.getByRole('menuitemcheckbox');
+ expect(item).toHaveAttribute('aria-checked', 'false');
+
+ fireEvent.click(item);
+ expect(item).toHaveAttribute('aria-checked', 'true');
+ expect(onCheckedChange).toHaveBeenCalledWith(true, expect.anything());
+ expect(screen.getByRole('menu')).toBeInTheDocument();
+
+ fireEvent.click(item);
+ expect(item).toHaveAttribute('aria-checked', 'false');
+ });
+
+ it('respects the controlled checked prop', async () => {
+ await renderAndOpenDropdown(
+
+ );
+
+ const item = screen.getByRole('menuitemcheckbox');
+ fireEvent.click(item);
+ expect(item).toHaveAttribute('aria-checked', 'true');
+ });
+ });
+
+ describe('Radio Items', () => {
+ it('keeps a single item checked in a group', async () => {
+ const onValueChange = vi.fn();
+ await renderAndOpenDropdown(
+
+ );
+
+ const [list, board] = screen.getAllByRole('menuitemradio');
+ expect(list).toHaveAttribute('aria-checked', 'true');
+ expect(board).toHaveAttribute('aria-checked', 'false');
+
+ fireEvent.click(board);
+ expect(list).toHaveAttribute('aria-checked', 'false');
+ expect(board).toHaveAttribute('aria-checked', 'true');
+ expect(onValueChange).toHaveBeenCalledWith('board', expect.anything());
+ });
+ });
+
+ describe('Link Items', () => {
+ it('renders an anchor with role menuitem', async () => {
+ await renderAndOpenDropdown(
+
+ );
+
+ const link = screen.getByRole('menuitem', { name: 'Projects' });
+ expect(link.tagName).toBe('A');
+ expect(link).toHaveAttribute('href', '/projects');
+ });
+
+ it('renders a custom link element through render', async () => {
+ const RouterLink = (props: React.ComponentProps<'a'>) => (
+
+ );
+ await renderAndOpenDropdown(
+
+ );
+
+ const link = screen.getByRole('menuitem', { name: 'Settings' });
+ expect(link).toHaveAttribute('data-router');
+ expect(link).toHaveAttribute('href', '/settings');
+ });
+ });
+
+ describe('Autocomplete', () => {
+ const SearchMenu = () => (
+
+ );
+
+ const search = (value: string) => {
+ fireEvent.change(screen.getByRole('combobox'), { target: { value } });
+ };
+
+ it('filters items as the user types', async () => {
+ await renderAndOpenDropdown();
+ expect(screen.getAllByRole('option')).toHaveLength(9);
+
+ search('set');
+ const options = screen.getAllByRole('option');
+ expect(options).toHaveLength(1);
+ expect(options[0]).toHaveTextContent('Settings');
+
+ search('view');
+ expect(screen.getAllByRole('option')).toHaveLength(2);
+ });
+
+ it('toggles checkbox and radio items and keeps the search', async () => {
+ await renderAndOpenDropdown();
+
+ search('grid');
+ const checkbox = screen.getByRole('option', { name: 'Show grid' });
+ expect(checkbox).toHaveAttribute('aria-checked', 'false');
+ fireEvent.click(checkbox);
+ expect(checkbox).toHaveAttribute('aria-checked', 'true');
+ expect(screen.getByRole('combobox')).toHaveValue('grid');
+
+ search('view');
+ const board = screen.getByRole('option', { name: 'Board view' });
+ fireEvent.click(board);
+ expect(board).toHaveAttribute('aria-checked', 'true');
+ expect(screen.getByRole('option', { name: 'List view' })).toHaveAttribute(
+ 'aria-checked',
+ 'false'
+ );
+ });
+
+ it('keeps uncontrolled checkbox and radio state while filtering', async () => {
+ await renderAndOpenDropdown(
+
+ );
+ const option = (name: string) => screen.getByRole('option', { name });
+ fireEvent.click(option('Show grid'));
+ fireEvent.click(option('Show rulers'));
+ fireEvent.click(option('Board view'));
+
+ search('view');
+ expect(option('Board view')).toHaveAttribute('aria-checked', 'true');
+
+ search('');
+ expect(option('Show grid')).toHaveAttribute('aria-checked', 'false');
+ expect(option('Show rulers')).toHaveAttribute('aria-checked', 'false');
+ expect(option('Board view')).toHaveAttribute('aria-checked', 'true');
+ });
+
+ it('renders link items as anchors', async () => {
+ await renderAndOpenDropdown();
+ const link = screen.getByRole('option', { name: 'Docs' });
+ expect(link.tagName).toBe('A');
+ expect(link).toHaveAttribute('href', '/docs');
+ });
+ });
});
diff --git a/packages/react/components/menu/cell.module.css b/packages/react/components/menu/cell.module.css
index 47a53547e..8dbedbecd 100644
--- a/packages/react/components/menu/cell.module.css
+++ b/packages/react/components/menu/cell.module.css
@@ -39,3 +39,29 @@
color: var(--rs-color-foreground-base-secondary);
margin-left: auto;
}
+
+.indicator {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: var(--rs-space-5);
+ height: var(--rs-space-5);
+ color: var(--rs-color-foreground-base-primary);
+}
+
+.indicator[data-unchecked] > * {
+ visibility: hidden;
+}
+
+.radioDot {
+ width: var(--rs-space-3);
+ height: var(--rs-space-3);
+ border-radius: var(--rs-radius-full);
+ background-color: currentColor;
+}
+
+a.cell {
+ color: inherit;
+ text-decoration: none;
+}
diff --git a/packages/react/components/menu/cell.tsx b/packages/react/components/menu/cell.tsx
index fd46fec77..2d013274e 100644
--- a/packages/react/components/menu/cell.tsx
+++ b/packages/react/components/menu/cell.tsx
@@ -1,14 +1,16 @@
+import { mergeProps, useRender } from '@base-ui/react';
import { cx } from 'class-variance-authority';
-import { ComponentProps, ReactNode } from 'react';
+import { ReactNode } from 'react';
import styles from './cell.module.css';
export type CellBaseProps = {
leadingIcon?: ReactNode;
trailingIcon?: ReactNode;
};
-export type CellProps = ComponentProps<'div'> &
+export type CellProps = useRender.ComponentProps<'div'> &
CellBaseProps & {
- type?: 'select' | 'item';
+ /** Check or radio mark, rendered in a fixed-width column before the icon. */
+ indicator?: ReactNode;
};
export function Cell({
@@ -16,26 +18,40 @@ export function Cell({
children,
leadingIcon,
trailingIcon,
- type = 'item',
+ indicator,
+ render,
+ ref,
...props
}: CellProps) {
- return (
-
- {leadingIcon && (
-
- {leadingIcon}
-
- )}
- {children}
- {trailingIcon && (
-
- {trailingIcon}
-
- )}
-
- );
+ return useRender({
+ defaultTagName: 'div',
+ ref,
+ render,
+ props: mergeProps<'div'>(props, {
+ className: cx(styles.cell, className),
+ children: (
+ <>
+ {indicator}
+ {leadingIcon && (
+
+ {leadingIcon}
+
+ )}
+ {children}
+ {trailingIcon && (
+
+ {trailingIcon}
+
+ )}
+
+ )
+ })
+ });
}
Cell.displayName = 'Menu.Cell';
diff --git a/packages/react/components/menu/index.ts b/packages/react/components/menu/index.ts
index 53f7d3473..f681a2b01 100644
--- a/packages/react/components/menu/index.ts
+++ b/packages/react/components/menu/index.ts
@@ -1,6 +1,9 @@
export { Menu } from './menu';
+export type { MenuCheckboxItemProps } from './menu-checkbox-item';
export type { MenuContentProps } from './menu-content';
export type { MenuItemProps } from './menu-item';
+export type { MenuLinkItemProps } from './menu-link-item';
export type { MenuEmptyStateProps } from './menu-misc';
+export type { MenuRadioGroupProps, MenuRadioItemProps } from './menu-radio';
export type { MenuRootProps as MenuProps, MenuSubMenuProps } from './menu-root';
export type { MenuSubTriggerProps, MenuTriggerProps } from './menu-trigger';
diff --git a/packages/react/components/menu/menu-checkbox-item.tsx b/packages/react/components/menu/menu-checkbox-item.tsx
new file mode 100644
index 000000000..3271f6350
--- /dev/null
+++ b/packages/react/components/menu/menu-checkbox-item.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import {
+ Autocomplete as AutocompletePrimitive,
+ Menu as MenuPrimitive
+} from '@base-ui/react';
+import { useControlled } from '@base-ui/utils/useControlled';
+import { CheckIcon } from '~/icons';
+import { Cell, CellBaseProps } from './cell';
+import cellStyles from './cell.module.css';
+import { stopItemFocus, useMenuItemFilter } from './menu-item';
+
+export interface MenuCheckboxItemProps
+ extends MenuPrimitive.CheckboxItem.Props,
+ CellBaseProps {
+ /** Text used to match the search value. Defaults to the children text. */
+ value?: string;
+}
+
+/** @remarks Only for internal usage. */
+export function CheckboxItemBase({
+ slotPrefix,
+ children,
+ value,
+ leadingIcon,
+ trailingIcon,
+ render,
+ checked: checkedProp,
+ defaultChecked = false,
+ onCheckedChange,
+ ...props
+}: MenuCheckboxItemProps & { slotPrefix: string }) {
+ const { autocomplete, hidden } = useMenuItemFilter(value, children);
+ // The Base UI item unmounts while filtered out, so the state lives here.
+ const [checked, setCheckedUnwrapped] = useControlled({
+ controlled: checkedProp,
+ default: defaultChecked,
+ name: 'MenuCheckboxItem',
+ state: 'checked'
+ });
+
+ if (hidden) return null;
+
+ const itemProps = {
+ ...props,
+ checked,
+ onCheckedChange: (
+ next: boolean,
+ eventDetails: MenuPrimitive.CheckboxItem.ChangeEventDetails
+ ) => {
+ onCheckedChange?.(next, eventDetails);
+ if (eventDetails.isCanceled) return;
+ setCheckedUnwrapped(next);
+ }
+ };
+
+ const cell = render ?? (
+
+
+
+ }
+ leadingIcon={leadingIcon}
+ trailingIcon={trailingIcon}
+ />
+ );
+
+ if (autocomplete) {
+ return (
+ }
+ >
+ {children}
+ |