[React DOM Interactions] Question: Menu with custom groups

[blurbyte]

I had following API for Dropdown Menu React component in mind and was wondering if there is an easy way to achieve it with @floating-ui/react-dom-interactions:

<Menu>
  <Group label="Settings">
    <MenuItem label="Item 1" />
    <MenuItem label="Item 2" />
  </Group>
  <Group label="Account">
    <MenuItem label="Item 3" />
    <MenuItem label="Item 4" />
  </Group>
  <Text>Some custom stuff</Text> // Some custom component
</Menu>

Of course the trick here is to provide proper focus management when navigating with keyboard, so the only focusable elements are MenuItems (Item 1 through 4 in the example), not the Groups itself nor other custom components.

In the official example it is relaying on React Children API to provide index for MenuItem, but in this case it's quite tricky. Is there any handy way to do it (e.g. t relay on menuitem role for element).

[atomiks]

You could map the children and check if the child.type === MenuItem, if not, do another map to get to the children inside the Group

[blurbyte]

Thanks! That's what I had in mind. Though maybe there is other way around.