[context menu] Create new ContextMenu component

[atomiks]

Closes #51

Preview: https://deploy-preview-1665--base-ui.netlify.app/react/components/context-menu

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	0eb8abe
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/6823ecf95f082c00081ffd67
😎 Deploy Preview	https://deploy-preview-1665--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[michaldudak]

We haven't discussed the API of it. I'm wondering if an ordinary Menu with a different Trigger wouldn't be enough:

<Menu.Root>
  <Menu.ContextTrigger />
  ...

[atomiks]

@michaldudak discoverability-wise, it might be better as a component for Radix parity? The Root needs to know if it should act as a context menu, where a component provider works nicely in the API, since otherwise it would need a prop in conjunction with using Menu.ContextTrigger (unless we set the state in an effect to know it's been rendered, which is a bit annoying).

It's also better if it's part of ContextMenu for tree-shaking reasons. (Edit: if ContextTrigger isn't used, where most of the logic is contained, then tree-shaking still works under your suggestion) - I think many extraneous features, like Tooltip's trackCursorAxis may be better as a component/provider than a prop if it has non-negligible logic.

[mj12albert]

Testing on an iPhone SE (iOS 17.7.2), a long press on the trigger area when the context menu is already open will make a large text selection:

RPReplay_Final1744034094.mp4

I screen-capped Safari only but it repros on Firefox and Chrome as well

According to react-aria it requires quite a heavy handed approach to handle this for all browsers: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/textSelection.ts

[atomiks]

@mj12albert looks like WebkitUserSelect: none on the internal backdrop is enough to fix that

[mj12albert]

looks like WebkitUserSelect: none on the internal backdrop is enough to fix that

Nice, glad we can avoid that extra Safari handling ~

[michaldudak]

We could add an attribute indicating how the menu was open (touch or right-click). It seems that on mobile menus are often placed above the trigger (so they are not covered by user's hand). A callback variant of side/placement props could be useful here.

[michaldudak]

In the Menubar PR I implemented a more universal solution to determine the menu's parent and its capabilities: https://github.com/mui/base-ui/pull/1684/files#diff-6da7b84ff007a487d62a9d48ba9fb32ad4b286ef666fd3d0419b14e9ebbe472a.

[atomiks]

Context menus don't have any parents though, so I think this should suffice?

[michaldudak]

I'd like to avoid having all kinds of boolean values like nested, isInContextMenu, isInMenubar, (possibly) isInNavigationMenu. The approach I took in the Menubar PR lets a menu part know what kind of menu it's in in a standard way and provides a type-safe way to access the parent context (without having to check for its existence)

[atomiks]

Alright 👍 I'll wait for Menubar to be merged and then use its logic for Menu

[atomiks]

A callback variant of side/placement props could be useful here.

This could also be used instead of useMediaQuery to determine what side to use in narrower viewports. Would be good if we found a robust solution to #817 though.

[oliviertassinari]

From https://x.com/rsms/status/1522583516265029633, the click-drag-release flow doesn't work properly:

Screen.Recording.2025-05-01.at.01.07.20.mov

https://www.radix-ui.com/primitives/docs/components/context-menu, https://ariakit.org/examples/menu-context-menu don't support this correctly either. So maybe OK to ignore fore a v0

---

Great to see this, we will need this for 👍 mui/mui-x#12021

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1665

commit: 0eb8abe

[ImSingee]

Is it possible to stack two context menus? For example, can one context menu appear when clicking on a div and another when clicking outside of it?

I try to do it directly, but sadly it doesn't work:

https://codesandbox.io/p/sandbox/sweet-wave-h4lygt

I have two boxes here. Right-clicking the outer one displays the context menu as expected, but right-clicking the inner one does not show its context menu.