[context-menu] Add action function to context menu items

[sissbruecker]

Describe your motivation

When using context menus (or menu bars) through the items API it's currently not trivial to trigger actions for individual menu items. The component only has an item-selected event that gives you the item that was clicked. Based on that item you're supposed to figure out which action should now be triggered. So the current solutions are:

• Use the item's text as identifier in a switch statement and then call a function based on the value of the text. That solution is brittle for various reasons and doesn't work with menu items that use components.
• Add custom properties to menu items, for example an enum value or a function to call, and access those in the listener. That is not trivial with Typescript, as it requires casting the menu item so that you can access your custom property.

Describe the solution you'd like

Menu items should allow defining an action function that is called automatically when the item is clicked:

const items: MenuItem[] = [
  {
    text: 'Copy',
    action: (item) => {
      console.log('Copy action');
    },
  },
  ...
];

The action function should receive the menu item that was clicked, for example to:

• Toggle the checked state
• Get additional data from the menu item that is necessary for triggering the action

Describe alternatives you've considered

No response

Additional context

For Grid context menus you would also want to have the grid item on which the context menu was triggered. For the Flow Grid there is a custom context menu implementation that provides the item in the click event. For the web / React components we don't have this, so providing the item to an action function would require additional work.