Create a dropdown / contextual menu component

[lpatiny]

[stropitek]

Inspirations

• https://ant.design/components/dropdown/ for how it could look (I like the simple and compact design which is suitable for analysis-ui components)
• https://github.com/zakodium/components/blob/main/src/elements/dropdown/Dropdown.tsx for the API and implementation

Requirements

• Use Menu, Menu.Items from https://headlessui.com/ for keyboard navigation support
• Use a Portal when displaying the menu to prevent stacking context issues
• Use react-popper for the placement
• Works in 2 modes: as dropdown menu by clicking a button or as a contextual menu on context menu

API

I weighed between adopting an API similar to what Ant does and our API in zakodium/components and I favor the latter.

I would change the options to be a simple array, not array of array, as this can be confusing. A divider within the options can be defined with a special option type: 'divider' instead, like in Ant.

The new trigger prop allows to use it either on the click of a button or when right-clicking a zone.

when trigger='click', the user should set children to be the element which both acts as the element to be clicked and the reference for react-popper.

when trigger='contextMenu', the children act as the zone which respond to the context menu event. It will be probably required to setup a virtual element at the position where the mouse is (see docs and to use a boundary modifier to constrain the positioning of the contextual menu to be within the children.

API

export interface MenuOption<T> {
  type: 'option';
  label: ReactNode;
  icon?: ReactNode;
  disabled?: boolean;
  data?: T;
}

export interface MenuDivider {
  type: 'divider';
}

type MenuOptions<T> = Array<MenuOption<T> | MenuDivider>;

export interface DropdownMenuProps<T> {
  children: ReactNode; // The button contents
  options: MenuOptions<T>;
  onSelect: (selected: DropdownOption<T>) => void;
  placement?: Placement;
  trigger: 'click' | 'contextMenu'
}

Concerns / open questions

• ~How can we add styles to headless UI components? With emotion we can only pass styles to non-components (div, span etc...)~
• ~Should we have a open / close animation and how to implement it. Cannot use headlessui's Translation because based on class names.~

[targos]

emotion also creates classes, I don't see any issues with using it with headless ui

[stropitek]

@Sebastien-Ahkrin first step is:

• Have an internal component which renders the menu (the list of MenuOption rendered with Menu.Items). <MenuItems options={options} onSelect={onSelect} />
• Create a story which shows the component in various states, with an action on select
  • [x] With / without icons
  • [x] With dividers
  • [x] Enabled / disabled options
  • [x] The menu can be navigated with the keyboard (out of the box thanks to headless-ui)

The menu could be a grid with 2 columns:

• The icon
• The label

The idea is that later (not in this PR) we will want to add 2 other column:

• The keyboard shortcut
• The submenu arrow

[targos]

As an example of the full grid, here's the Edge menu:

[Sebastien-Ahkrin]

@stropitek @targos Do you want to keep the old styles from nmrium ?

[targos]

Not at all. You can take inspiration from my screenshot if you want.

[stropitek]

No you shouldn't, you can get inspired by the example in Ant (see link in my proposal)