[experiments] Fluent UI submenus

[mnajdova]

Preview: https://deploy-preview-1319--base-ui.netlify.app/experiments/menu-fluent-ui

This PR includes two experiments:

1. Having split like menu items in the menu (source):

2. Having Grid like navigation in a submenu (source):

For making the Grid like navigation possible, I needed to expor the Composite.* components. It took me some time to figure out that there is a cols prop that I can use to make the Composite behave like a bi-directional grid :) I think these components are awesome and we should export them so people can use them in their components too.

On the composite grids that have cols, we may need a different loop-behavior, looping trough rows/cols, vs looping trough all elements.

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	9315bfbf44f31a11607999ec8e26035a72eb04a0
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67811964d7122f00086f5bc6
😎 Deploy Preview	https://deploy-preview-1319--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.

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	8febc034669f13cc4897d56a9733ff340f56cedc
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/678a0b791517d400081706a3
😎 Deploy Preview	https://deploy-preview-1319--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.

[colmtuite]

On the composite grids that have cols, we may need a different loop-behavior, looping trough rows/cols, vs looping trough all elements.

When you're focused on "5" and press left arrow, I expected to move to "4". Is that an example of what you're talking about here?

Other notes:

• When using the pointer to hover menuitems in the grid, the focus doesn't move as you hover each menuitem.
• I can't move focus in the grid using the arrow keys while the pointer is hovering over the submenu.
• When you close the submenu using the left arrow key, number "4" becomes highlighted as the submenu is closing.

[mnajdova]

When you're focused on "5" and press left arrow, I expected to move to "4". Is that an example of what you're talking about here?

Yep exactly, we could build it as a new feature in the Composite component.

[mnajdova]

Other notes

I will look into what changes we would need to do to fix these things without doing any library changes

[mnajdova]

I was wrong initially on using Composition as we use useListNavigation from Floating UI in the menu. I tried extending a bit our API to add support for it, but there is more work involved in making the keyboard navigation work as expected. The mouse interactions work tough. If we want to support this, I would recommend adding an issue for a new feature and add this natively supported as building it on top of the existing primitives is not possible.

It's going to require some changes in Floating UI as well, as seems like this is not a supported feature, see https://codesandbox.io/p/sandbox/morning-haze-ztpr88?file=%2Fsrc%2FDropdownMenu.tsx&workspaceId=ws_LCQafiBEJ7ynffHYRMAZL

[mnajdova]

I investigated a bit the Floating UI repo and found the issue. When deciding on opening submenus/stepping inside etc, Floating UI uses the orientation of the submenu to decide whether it should open/step into instead of the orientation of the parent. This is why when those two are different it's behaving unexpectedly. I will talk with James to see if it makes sense to change this behavior and open a PR there.

[mnajdova]

I've created PR on the Floating UI side: https://github.com/floating-ui/floating-ui/pull/3199, I will test the changes here and see if everything work as expected, but this should fix all issues. @colmtuite you can check the behavior in the linked PR.