// @flow
import { type Node, type AbstractComponent } from 'react';
import { type StylableProps } from '../../../mixins/themes';
import { type TestingProps } from '../../../mixins/testing';
import { type AriaProps } from '../../../mixins/aria';
import type { SpaceProps } from '../../../mixins/spacing';
import type { ContainerProps } from '../../../mixins/container';
import type { StackeeProps } from '../../../mixins/stackee';
import type { TranslatedContent } from '../../../types';

export type ListSelectorItem<T> = {
  id: T,
  label: Node,
  disabled?: boolean,
  isNonOptionRow?: boolean,
};
export type ListSelectorProps<T> = {|
  ...StylableProps,
  ...TestingProps,
  ...AriaProps,
  ...SpaceProps,
  ...ContainerProps,
  ...StackeeProps,
  name?: string,

  /** List of IDs of all selected items. */
  value: T[],

  /** Updated list of IDs of all selected items. This is always an array:
   * if multiSelect === false, it will be a one-element array of the selected
   * id. Otherwise it will be the full list of selected IDs.
   */
  onChange: (T[]) => void,

  items: ListSelectorItem<T>[],
  label: TranslatedContent,
  hideLabel?: boolean,
  small?: boolean,
  multiSelect?: boolean,
  FormListComponent?: AbstractComponent<mixed>,
|};
