SelectionGroup component for Menu to support more than one selection modes.

[intergalacticspacehighway]

🙋 Feature Request

SelectionGroup component will allow putting selection mode on groups. This is a fairly common use-case. See the screenshot attached in examples - there are 2 groups, one has a "single" selection mode and the other has "none".

🤔 Expected Behavior

A single menu component should support more than one selection mode.

😯 Current Behavior

Currently, selection mode can be specified only on the Menu component.

💁 Possible Solution

• Something like below. Credit - @devongovett

  <Menu>
  <Section title="Style">
  <SelectionGroup selectionMode="multiple" selectedKeys={selectedFormats}>
    <Item key="bold">Bold</Item>
    <Item key="italic">Italic</Item>
    <Item key="underline">Underline</Item>
  </SelectionGroup>
  </Section>
  <Section title="Align">
  <SelectionGroup selectionMode="single" selectedKeys={selectedFormats}>
    <Item key="left">Left</Item>
    <Item key="center">Center</Item>
    <Item key="right">Right</Item>
  </SelectionGroup>
  </Section>
  </Menu>

🔦 Context

Have discussed this with @devongovett and we found this is a fairly common use case.

💻 Examples

🧢 Your Company/Team

GeekyAnts

GeekyAnts/NativeBase

🎁 Tracking Ticket (optional)

[cmmartti]

Here are two more examples of mixed selection modes in a single menu in the wild. The first is on the Windows desktop, the second is in the Window menu of most document-oriented desktop programs:

[intergalacticspacehighway]

Got something working! If Items aren't wrapped with a SelectionGroup, it'll fallback to Menu's selectionMode

https://user-images.githubusercontent.com/23293248/112585266-7ef44480-8e1f-11eb-8ef0-5ef4cc8f2dcc.mov

[devongovett]

@intergalacticspacehighway are you still working on this? If not, is your code in a place where someone else could take it over?

[intergalacticspacehighway]

@devongovett I lost the code with my old system 😭 I can reimplement and create a PR by this weekend though.

[intergalacticspacehighway]

@devongovett created a draft PR https://github.com/adobe/react-spectrum/pull/2091. It's a bit rough right now, I've added some comments.

[ritz078]

Is this in the roadmap in the near future?