[menu] Add <Menu.LinkItem> part (#3400)

Author: mj12albert

docs/reference/generated/menu-link-item.json

@@ -0,0 +1,37 @@
+{
+  "name": "MenuLinkItem",
+  "description": "A link in the menu that can be used to navigate to a different page or section.\nRenders an `<a>` element.",
+  "props": {
+    "label": {
+      "type": "string",
+      "description": "Overrides the text label to use when the item is matched during keyboard text navigation.",
+      "detailedType": "string | undefined"
+    },
+    "closeOnClick": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to close the menu when the item is clicked.",
+      "detailedType": "boolean | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Menu.LinkItem.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Menu.LinkItem.State) => string | undefined)"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Menu.LinkItem.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Menu.LinkItem.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Menu.LinkItem.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Menu.LinkItem.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-highlighted": {
+      "description": "Present when the link is highlighted."
+    }
+  },
+  "cssVariables": {}
+}

docs/src/app/(docs)/react/components/context-menu/page.mdx

@@ -25,6 +25,7 @@ import { ContextMenu } from '@base-ui/react/context-menu';
       <ContextMenu.Popup>
         <ContextMenu.Arrow />
         <ContextMenu.Item />
+        <ContextMenu.LinkItem />
         <ContextMenu.Separator />
         <ContextMenu.Group>
           <ContextMenu.GroupLabel />
@@ -59,7 +60,7 @@ import { DemoContextMenuSubmenu } from './demos/submenu';
 <Reference component="ContextMenu" parts="Root, Trigger" />
 <Reference
   component="Menu"
-  parts="Portal, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
+  parts="Portal, Positioner, Popup, Arrow, Item, LinkItem, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
 />
 
 export const metadata = {

docs/src/app/(docs)/react/components/menu/page.mdx

@@ -25,6 +25,7 @@ import { Menu } from '@base-ui/react/menu';
       <Menu.Popup>
         <Menu.Arrow />
         <Menu.Item />
+        <Menu.LinkItem />
         <Menu.Separator />
         <Menu.Group>
           <Menu.GroupLabel />
@@ -125,10 +126,10 @@ import { DemoMenuSubmenu } from './demos/submenu';
 
 ### Navigate to another page
 
-Use the `render` prop to compose a menu item with an anchor element.
+Use the `<Menu.LinkItem>` part to create a link.
 
 ```jsx title="A menu item that opens a link"
-<Menu.Item render={<a href="/projects">Go to Projects</a>} />
+<Menu.LinkItem href="/projects">Go to Projects</<Menu.LinkItem>
 ```
 
 ### Open a dialog
@@ -277,7 +278,7 @@ import { DemoMenuDetachedTriggersControlled } from './demos/detached-triggers-co
 
 <Reference
   component="Menu"
-  parts="Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
+  parts="Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Item, LinkItem, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
 />
 
 export const metadata = {

docs/src/app/(docs)/react/components/page.mdx

@@ -603,13 +603,16 @@ A list of actions in a dropdown, enhanced with keyboard navigation.
   - Menu - CheckboxItemIndicator
     - Props: className, keepMounted, render, style
     - Data Attributes: data-checked, data-disabled, data-ending-style, data-starting-style, data-unchecked
-  - Menu - Group
-    - Props: children, className, render, style
   - Menu - GroupLabel
     - Props: className, render, style
+  - Menu - Group
+    - Props: children, className, render, style
   - Menu - Item
     - Props: className, closeOnClick, disabled, label, nativeButton, onClick, render, style
     - Data Attributes: data-disabled, data-highlighted
+  - Menu - LinkItem
+    - Props: className, closeOnClick, label, render, style
+    - Data Attributes: data-highlighted
   - Menu - Popup
     - Props: children, className, finalFocus, render, style
     - Data Attributes: data-align, data-closed, data-ending-style, data-instant, data-open, data-side, data-starting-style

docs/src/app/(private)/experiments/menu/menu-fully-featured.tsx

@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
+import clsx from 'clsx';
+import NextLink from 'next/link';
 import {
   SettingsMetadata,
   useExperimentSettings,
@@ -62,6 +64,23 @@ export default function MenuFullyFeatured() {
               <Menu.Item className={classes.Item} onClick={handleItemClick}>
                 Item 2
               </Menu.Item>
+              <Menu.LinkItem
+                href="https://base-ui.com"
+                className={clsx(classes.Item, 'hover:cursor-pointer!')}
+              >
+                Link 1 (base-ui.com)
+              </Menu.LinkItem>
+              <Menu.LinkItem
+                render={<a href="https://github.com">Link 2 (github.com)</a>}
+                className={clsx(classes.Item, 'hover:cursor-pointer!')}
+              />
+              <Menu.LinkItem
+                render={<NextLink href="/experiments">Link 3 (/experiments)</NextLink>}
+                className={clsx(classes.Item, 'hover:cursor-pointer!')}
+              />
+              <Menu.Item className={classes.Item} onClick={handleItemClick}>
+                Item 3
+              </Menu.Item>
               <Menu.Separator className={classes.Separator} />
               <Menu.Item className={classes.Item} closeOnClick={false} onClick={handleItemClick}>
                 Item (close on click disabled)
@@ -80,7 +99,9 @@ export default function MenuFullyFeatured() {
                 <Menu.Portal>
                   <Menu.Positioner className={classes.Positioner} sideOffset={8}>
                     <Menu.Popup className={classes.Popup}>
-                      <div>Non-focusable text</div>
+                      <div className="flex items-center py-2 pl-7.5 text-xs">
+                        Non-focusable text
+                      </div>
                       <Menu.Group>
                         <Menu.GroupLabel className={classes.GroupLabel}>
                           Radio items

packages/react/src/context-menu/index.parts.ts

@@ -11,6 +11,7 @@ export { MenuGroupLabel as GroupLabel } from '../menu/group-label/MenuGroupLabel
 export { MenuItem as Item } from '../menu/item/MenuItem';
 export { MenuCheckboxItem as CheckboxItem } from '../menu/checkbox-item/MenuCheckboxItem';
 export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from '../menu/checkbox-item-indicator/MenuCheckboxItemIndicator';
+export { MenuLinkItem as LinkItem } from '../menu/link-item/MenuLinkItem';
 export { MenuRadioGroup as RadioGroup } from '../menu/radio-group/MenuRadioGroup';
 export { MenuRadioItem as RadioItem } from '../menu/radio-item/MenuRadioItem';
 export { MenuRadioItemIndicator as RadioItemIndicator } from '../menu/radio-item-indicator/MenuRadioItemIndicator';

packages/react/src/context-menu/index.ts

@@ -32,6 +32,10 @@ export type {
   MenuItemProps as ContextMenuItemProps,
   MenuItemState as ContextMenuItemState,
 } from '../menu/item/MenuItem';
+export type {
+  MenuLinkItemProps as ContextMenuLinkItemProps,
+  MenuLinkItemState as ContextMenuLinkItemState,
+} from '../menu/link-item/MenuLinkItem';
 export type {
   MenuCheckboxItemProps as ContextMenuCheckboxItemProps,
   MenuCheckboxItemState as ContextMenuCheckboxItemState,

packages/react/src/menu/index.parts.ts

@@ -5,6 +5,7 @@ export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './checkbox-i
 export { MenuGroup as Group } from './group/MenuGroup';
 export { MenuGroupLabel as GroupLabel } from './group-label/MenuGroupLabel';
 export { MenuItem as Item } from './item/MenuItem';
+export { MenuLinkItem as LinkItem } from './link-item/MenuLinkItem';
 export { MenuPopup as Popup } from './popup/MenuPopup';
 export { MenuPortal as Portal } from './portal/MenuPortal';
 export { MenuPositioner as Positioner } from './positioner/MenuPositioner';

packages/react/src/menu/index.ts

@@ -5,9 +5,10 @@ export type * from './arrow/MenuArrow';
 export type * from './backdrop/MenuBackdrop';
 export type * from './checkbox-item/MenuCheckboxItem';
 export type * from './checkbox-item-indicator/MenuCheckboxItemIndicator';
-export type * from './group/MenuGroup';
 export type * from './group-label/MenuGroupLabel';
+export type * from './group/MenuGroup';
 export type * from './item/MenuItem';
+export type * from './link-item/MenuLinkItem';
 export type * from './popup/MenuPopup';
 export type * from './portal/MenuPortal';
 export type * from './positioner/MenuPositioner';

packages/react/src/menu/item/MenuItem.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { MemoryRouter, Route, Routes, Link, useLocation } from 'react-router';
 import { act, fireEvent, screen, waitFor } from '@mui/internal-test-utils';
 import { Menu } from '@base-ui/react/menu';
 import { describeConformance, createRenderer, isJSDOM } from '#test-utils';
@@ -170,75 +169,6 @@ describe('<Menu.Item />', () => {
     });
   });
 
-  describe('rendering links', () => {
-    function One() {
-      return <div>page one</div>;
-    }
-    function Two() {
-      return <div>page two</div>;
-    }
-    function LocationDisplay() {
-      const location = useLocation();
-      return <div data-testid="location">{location.pathname}</div>;
-    }
-
-    it('react-router <Link>', async () => {
-      const { user } = await render(
-        <MemoryRouter initialEntries={['/']}>
-          <Routes>
-            <Route path="/" element={<One />} />
-            <Route path="/two" element={<Two />} />
-          </Routes>
-
-          <LocationDisplay />
-
-          <Menu.Root open>
-            <Menu.Portal>
-              <Menu.Positioner>
-                <Menu.Popup>
-                  <Menu.Item render={<Link to="/" />}>link 1</Menu.Item>
-                  <Menu.Item render={<Link to="/two" />}>link 2</Menu.Item>
-                </Menu.Popup>
-              </Menu.Positioner>
-            </Menu.Portal>
-          </Menu.Root>
-        </MemoryRouter>,
-      );
-
-      const [link1, link2] = screen.getAllByRole('menuitem');
-
-      const locationDisplay = screen.getByTestId('location');
-
-      expect(screen.getByText(/page one/i)).not.to.equal(null);
-
-      expect(locationDisplay).to.have.text('/');
-
-      await act(async () => {
-        link2.focus();
-      });
-
-      await waitFor(() => {
-        expect(link2).toHaveFocus();
-      });
-
-      await user.keyboard('[Enter]');
-
-      expect(locationDisplay).to.have.text('/two');
-
-      expect(screen.getByText(/page two/i)).not.to.equal(null);
-
-      await act(async () => {
-        link1.focus();
-      });
-
-      await user.keyboard('[Enter]');
-
-      expect(screen.getByText(/page one/i)).not.to.equal(null);
-
-      expect(locationDisplay).to.have.text('/');
-    });
-  });
-
   describe('disabled state', () => {
     it('can be focused but not interacted with when disabled', async () => {
       const handleClick = spy();