[menu] Allow `Menu.RadioGroup` to be labelled by a `Menu.GroupLabel`
Feature request
Summary
The Group Labels example is great, but it can be even better IMO: Menu.RadioGroup is nested inside a Menu.Group whose sole purpose seems to be providing a label. I might be missing something, but since both Menu.Group and Menu.RadioGroup render a role="group" div, couldn't we combine them in this example so that a single group is used both for the label, and as the radio items container/provider? It would look like this:
<Menu.RadioGroup value={value} onValueChange={setValue}>
<Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
Sort
</Menu.GroupLabel>
<Menu.RadioItem
value="date"
className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
>
<Menu.RadioItemIndicator className="col-start-1">
<CheckIcon className="size-3" />
</Menu.RadioItemIndicator>
<span className="col-start-2">Date</span>
</Menu.RadioItem>
{/* other radio items... */}
</Menu.RadioGroup>
Unfortunately, that currently crashes because Menu.GroupLabel expects a Menu.Group parent:
Base UI: Missing MenuGroupRootContext provider
Thanks for your consideration!
Motivation
Makes sense!
In mean time, this seems to work as a workaround: https://codesandbox.io/p/sandbox/dank-cookies-44t3z7
<Menu.Group render={<Menu.RadioGroup />} value={value} onValueChange={setValue} />
<Menu.GroupLabel>
Sort
</Menu.GroupLabel>
{/* Menu.RadioItems */}
</Menu.Group>