[menu] Close submenu on mouseout when parent opened on hover

[michaldudak]

When a menu is opened on hover, hovering out of the submenu now closes it.
It does not, however, close the whole tree, for two reasons:

• It might be annoying to open a whole tree of menus and inadvertently close the whole thing by accidentally moving your mouse outside
• Menus and submenus can be separated by a gap. When user wants to hover over the parent menu and moves the mouse over the gap, the whole menu would close. This could be avoided similarly to how "safe-polygon" is implemented for opening menus, but it would require quite complex custom logic.

Closes #1946

[pkg-pr-new]

Open in StackBlitz

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

commit: 2fea9b6

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	2fea9b6
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/683715e0cc59150008ca163d
😎 Deploy Preview	https://deploy-preview-1981--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 project configuration.

[atomiks]

It does not, however, close the whole tree, for two reasons:
It might be annoying to open a whole tree of menus and inadvertently close the whole thing by accidentally moving your mouse outside

This makes sense but also feels a bit confusing 🤔 I wonder if the current behavior is actually better