// @flow
import type { StatelessFunctionalComponent } from 'react';
import { type TranslatedContent } from '../../../types';
import { type ColorPaletteColorNameKey } from '../../../mixins/branding';

export type ContextMenuItem<Id: string> = {|
  id: Id,
  label: TranslatedContent,
  textColorName?: ColorPaletteColorNameKey,
  danger?: boolean,
  onSelect: (item: ContextMenuItem<Id>) => void,
|};

export type TriggerButtonProps = {|
  onClick: (event: SyntheticEvent<HTMLElement>) => void,
  'aria-label'?: string,
|};

export type ContextMenuProps = {|
  TriggerButton?: StatelessFunctionalComponent<TriggerButtonProps>,
  justify?: 'left' | 'right',
  isLoading?: boolean,
  isExpanded?: boolean,
  items: ContextMenuItem<*>[],
  buttonLabel: string,
|};
