Support onSelect for each MenuItem within Menu component

[wencyen]

Hi all, 👋

I am building a menu component using Menu. The requirement is that when I click on a menu item, a specific callback is invoked.

At the moment, the handler for when a menuItem is clicked is passed to Menu.onSelect. As a consumer of the Menu component, I'd like to attach a callback directly to each of the MenuItem instead. Otherwise, I believe, I'll have to write branching logic to determine based on the value of the callback to Menu.onSelect, then decide on which of the callbacks to invoke. Does anyone in the Ark community feel the same? If not, could someone help me understand what it is that I am missing. Thank you! 🌟

const MenuDemo = () => {
  const onDelete = () => console.log('deleting ...')
  const onEdit = () => console.log('editing ...')
  <Menu>
    <MenuTrigger>Open menu</MenuTrigger>
    <Portal>
      <MenuPositioner>
        <MenuContent>
          <MenuItem id="edit" onSelect={onDelete}>
            Edit
          </MenuItem>
          <MenuItem id="delete" onSelect={onEdit}>
            Delete
          </MenuItem>
        </MenuContent>
      </MenuPositioner>
    </Portal>
  </Menu>;
};

If possible, I'd like to avoid the following boilerplate

const onSelect = ({ value }) => {
  if (value === 'delete') onDelete()
  if (value === 'edit') onEdit()
}

[wencyen]

I realized that one possibility is to just attach onClick directly onto MenuItem 🕵️