Flow types react-select v2 (incomplete version)

react-select_v2.x.x.js

// @flow
import type { ComponentType, Element as ReactElement, ElementRef, Node, Ref } from "react";

declare module 'react-select' {
  declare export default React.Component<$Shape<{
    /* Aria label (for assistive tech) */
    'aria-label'?: string,
    /* HTML ID of an element that should be used as the label (for assistive tech) */
    'aria-labelledby'?: string,
    /* Focus the control when it is mounted */
    autoFocus?: boolean,
    /* Remove the currently focused option when the user presses backspace */
    backspaceRemovesValue: boolean,
    /* Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */
    blurInputOnSelect: boolean,
    /* When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent  */
    captureMenuScroll: boolean,
    /* Sets a className attribute on the outer component */
    className?: string,
    /*
      If provided, all inner components will be given a prefixed className attribute.

      This is useful when styling via CSS classes instead of the Styles API approach.
    */
    classNamePrefix?: string | null,
    /* Close the select menu when the user selects an option */
    closeMenuOnSelect: boolean,
    /*
      If `true`, close the select menu when the user scrolls the document/body.

      If a function, takes a standard javascript `ScrollEvent` you return a boolean:

      `true` => The menu closes

      `false` => The menu stays open

      This is useful when you have a scrollable modal and want to portal the menu out,
      but want to avoid graphical issues.
     */
    closeMenuOnScroll: boolean | EventListener,
    /*
      This complex object includes all the compositional components that are used
      in `react-select`. If you wish to overwrite a component, pass in an object
      with the appropriate namespace.

      If you only wish to restyle a component, we recommend using the `styles` prop
      instead. For a list of the components that can be passed in, and the shape
      that will be passed to them, see [the components docs](/components)
    */
    components: any,
    /* Whether the value of the select, e.g. SingleValue, should be displayed in the control. */
    controlShouldRenderValue: boolean,
    /* Delimiter used to join multiple values into a single HTML Input value */
    delimiter?: string,
    /* Clear all values when the user presses escape AND the menu is closed */
    escapeClearsValue: boolean,
    /* Custom method to filter whether an option should be displayed in the menu */
    filterOption: ((Object, string) => boolean) | null,
    /*
      Formats group labels in the menu as React components

      An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
    */
    formatGroupLabel: any,
    /* Formats option labels in the menu and control as React components */
    formatOptionLabel?: (OptionType, any) => Node,
    /* Resolves option data to a string to be displayed as the label by components */
    getOptionLabel: any,
    /* Resolves option data to a string to compare options and specify value attributes */
    getOptionValue: any,
    /* Hide the selected option from the menu */
    hideSelectedOptions: boolean,
    /* The id to set on the SelectContainer component. */
    id?: string,
    /* The value of the search input */
    inputValue: string,
    /* The id of the search input */
    inputId?: string,
    /* Define an id prefix for the select components e.g. {your-id}-value */
    instanceId?: number | string,
    /* Is the select value clearable */
    isClearable?: boolean,
    /* Is the select disabled */
    isDisabled: boolean,
    /* Is the select in a state of loading (async) */
    isLoading: boolean,
    /*
      Override the built-in logic to detect whether an option is disabled

      An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
    */
    isOptionDisabled: (OptionType, OptionsType) => boolean | false,
    /* Override the built-in logic to detect whether an option is selected */
    isOptionSelected?: (OptionType, OptionsType) => boolean,
    /* Support multiple selected options */
    isMulti: boolean,
    /* Is the select direction right-to-left */
    isRtl: boolean,
    /* Whether to enable search functionality */
    isSearchable: boolean,
    /* Async: Text to display when loading options */
    loadingMessage: ({ inputValue: string }) => string | null,
    /* Minimum height of the menu before flipping */
    minMenuHeight: number,
    /* Maximum height of the menu before scrolling */
    maxMenuHeight: number,
    /* Whether the menu is open */
    menuIsOpen: boolean,
    /* Default placement of the menu in relation to the control. 'auto' will flip
       when there isn't enough space below the control. */
    menuPlacement: MenuPlacement,
    /* The CSS position value of the menu, when "fixed" extra layout management is required */
    menuPosition: MenuPosition,
    /*
      Whether the menu should use a portal, and where it should attach

      An example can be found in the [Portaling](/advanced#portaling) documentation
    */
    menuPortalTarget?: HTMLElement,
    /* Whether to block scroll events when the menu is open */
    menuShouldBlockScroll: boolean,
    /* Whether the menu should be scrolled into view when it opens */
    menuShouldScrollIntoView: boolean,
    /* Name of the HTML Input (optional - without this, no input will be rendered) */
    name?: string,
    /* Text to display when there are no options */
    noOptionsMessage: ({ inputValue: string }) => string | null,
    /* Handle blur events on the control */
    onBlur?: FocusEventHandler,
    /* Handle change events on the select */
    onChange: (ValueType, ActionMeta) => void,
    /* Handle focus events on the control */
    onFocus?: FocusEventHandler,
    /* Handle change events on the input */
    onInputChange: (string, InputActionMeta) => void,
    /* Handle key down events on the select */
    onKeyDown?: KeyboardEventHandler,
    /* Handle the menu opening */
    onMenuOpen: () => void,
    /* Handle the menu closing */
    onMenuClose: () => void,
    /* Fired when the user scrolls to the top of the menu */
    onMenuScrollToTop?: (SyntheticEvent<HTMLElement>) => void,
    /* Fired when the user scrolls to the bottom of the menu */
    onMenuScrollToBottom?: (SyntheticEvent<HTMLElement>) => void,
    /* Allows control of whether the menu is opened when the Select is focused */
    openMenuOnFocus: boolean,
    /* Allows control of whether the menu is opened when the Select is clicked */
    openMenuOnClick: boolean,
    /* Array of options that populate the select menu */
    options: OptionsType,
    /* Number of options to jump in menu when page{up|down} keys are used */
    pageSize: number,
    /* Placeholder text for the select value */
    placeholder: string,
    /* Status to relay to screen readers */
    screenReaderStatus: ({ count: number }) => string,
    /*
      Style modifier methods

      A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
    */
    styles: any,
    /* Theme modifier method */
    theme?: ThemeConfig,
    /* Sets the tabIndex attribute on the input */
    tabIndex: string,
    /* Select the currently focused option when the user presses tab */
    tabSelectsValue: boolean,
    /* The value of the select; reflected by the selected option */
    value: ValueType,
  }>>;
  declare export type OptionType = {
    [string]: any,
  };

  declare export type OptionsType = Array<OptionType>;

  declare export type GroupType = {
    options: OptionsType,
    [string]: any,
  };

  declare export type ValueType = OptionType | OptionsType | null | void;

  declare export type FocusEventHandler = (SyntheticFocusEvent<HTMLElement>) => void;
  declare export type MouseEventHandler = (SyntheticMouseEvent<HTMLElement>) => void;
  declare export type KeyboardEventHandler = (
    SyntheticKeyboardEvent<HTMLElement>
  ) => void;

  declare export type InnerRef = Ref<*>;
  declare export type PropsWithInnerRef = {
    /** The inner reference. */
    innerRef: Ref<*>,
  };

  declare export type ThemeSpacing = {
    baseUnit: number,
    controlHeight: number,
    menuGutter: number,
  };

  declare export type Theme = {
    borderRadius: number,
    colors: { [key: string]: string },
    spacing: ThemeSpacing,
  };

  declare export type PropsWithStyles = {
    /**
     Get the styles of a particular part of the select. Pass in the name of the
     property as the first argument, and the current props as the second argument.
     See the `styles` object for the properties available.
     */
    getStyles: (string, any) => {},
    theme: Theme,
  };

  declare export type ClassNameList = Array<string>;
  declare export type ClassNamesState = { [string]: boolean } | void;

  declare export type CommonProps = {
    clearValue: () => void,
    className?: string,
    cx: (?string | null, ClassNamesState | void, string | void) => string | void,
    /**
     Get the styles of a particular part of the select. Pass in the name of the
     property as the first argument, and the current props as the second argument.
     See the `styles` object for the properties available.
     */
    getStyles: (string, any) => {},
    theme: Theme,
    getValue: () => ValueType,
    hasValue: boolean,
    isMulti: boolean,
    options: OptionsType,
    selectOption: OptionType => void,
    selectProps: any,
    setValue: (ValueType, ActionTypes) => void,
  };

  declare export type ActionTypes =
    | 'select-option'
    | 'deselect-option'
    | 'remove-value'
    | 'pop-value'
    | 'set-value'
    | 'clear'
    | 'create-option';

  declare export type ActionMeta = {
    action: ActionTypes,
  };

  declare export type InputActionTypes =
    | 'set-value'
    | 'input-change'
    | 'input-blur'
    | 'menu-close';

  declare export type InputActionMeta = {|
    action: InputActionTypes,
  |};

  declare export type MenuPlacement = 'auto' | 'bottom' | 'top';
  declare export type MenuPosition = 'absolute' | 'fixed';

  declare export type FocusDirection =
    | 'up'
    | 'down'
    | 'pageup'
    | 'pagedown'
    | 'first'
    | 'last';

  declare export type OptionProps = CommonProps & PropsWithInnerRef & {
    children: Node,
    innerProps: any,
    data: any,
    id: number,
    index: number,
    isDisabled: boolean,
    isFocused: boolean,
    isSelected: boolean,
    label: string,
    onClick: MouseEventHandler,
    onMouseOver: MouseEventHandler,
    value: any,
  };

  declare export type IndicatorProps = CommonProps & {
    /** The children to be rendered inside the indicator. */
    children: Node,
    /** Props that will be passed on to the children. */
    innerProps: any,
    /** The focused state of the select. */
    isFocused: boolean,
    /** Whether the text is right to left */
    isRtl: boolean,
  };

  declare export type GroupProps = CommonProps & {
    /** The children to be rendered. */
    children: Node,
    /** Component to wrap the label, recieves headingProps. */
    Heading: ComponentType<any>,
    /** Props to pass to Heading. */
    headingProps: any,
    /** Label to be displayed in the heading component. */
    label: Node,
  }
  declare export type InputProps = PropsWithStyles & {
    cx: (?string | null, ?ClassNamesState, ?string) => string | void,
    /** Reference to the internal element */
    innerRef: (ElementRef<*>) => void,
    /** Set whether the input should be visible. Does not affect input size. */
    isHidden: boolean,
    /** Whether the input is disabled */
    isDisabled?: boolean,
    className?: string,
  };

  declare export type MenuListProps = {
    /** The children to be rendered. */
    children: Node,
    /** Inner ref to DOM Node */
    innerRef: InnerRef,
  };
  declare export type MenuListState = {
    /** Set classname for isMulti */
    isMulti: boolean,
    /* Set the max height of the Menu component  */
    maxHeight: number,
  };
  declare export type MenuListComponentProps = CommonProps &
    MenuListProps &
    MenuListState

  declare export type MultiValueProps = CommonProps & {
    children: Node,
    components: any,
    cropWithEllipsis: boolean,
    data: any,
    innerProps: any,
    isFocused: boolean,
    isDisabled: boolean,
    removeProps: {
      onTouchEnd: any => void,
      onClick: any => void,
      onMouseDown: any => void,
    },
  };
  declare export type MultiValueGenericProps = {
    children: Node,
    data: any,
    innerProps: { className?: string },
    selectProps: any,
  };
  declare export type MultiValueRemoveProps = CommonProps & {
    children: Node,
    data: any,
    innerProps: {
      className: string,
      onTouchEnd: any => void,
      onClick: any => void,
      onMouseDown: any => void,
    },
    selectProps: any,
  };

  declare type ContainerState = {
    /** Whether the select is disabled. */
    isDisabled: boolean,
    /** Whether the text in the select is indented from right to left. */
    isRtl: boolean,
  };

  declare export type ContainerProps = CommonProps &
    ContainerState & {
    /** The children to be rendered. */
    children: Node,
    /** Inner props to be passed down to the container. */
    innerProps: { onKeyDown: KeyboardEventHandler },
  };
  declare export type SingleValueProps = CommonProps & {
    /** Whether this is disabled. */
    isDisabled: boolean,
    /** The children to be rendered. */
    children: string,
    /* The data of the selected option rendered in the Single Value component. */
    data: any,
    /** Props passed to the wrapping element for the group. */
    innerProps: any,
  };
  declare export type NoticeProps = CommonProps & {
    /** The children to be rendered. */
    children: Node,
    /** Props to be passed on to the wrapper. */
    innerProps: { [string]: any },
  };
  declare export type PlaceholderProps = CommonProps & {
    /** The children to be rendered. */
    children: Node,
    /** props passed to the wrapping element for the group. */
    innerProps: { [string]: any },
  };
  declare export type ThemeConfig = Theme | ((theme: Theme) => Theme);
  declare export type ControlProps = CommonProps &
    PropsWithStyles &
    {
      /** Whether the select is disabled. */
      isDisabled: boolean,
      /** Whether the select is focused. */
      isFocused: boolean,
    /** Children to render. */
    children: Node,
    innerRef: ElementRef<*>,
    /** The mouse down event and the innerRef to pass down to the controller element. */
    innerProps: {
      onMouseDown: (SyntheticMouseEvent<HTMLElement>) => void,
    },
  };
  declare export type ValueContainerProps = CommonProps & {
    /** Set when the value container should hold multiple values */
    isMulti: boolean,
    /** Whether the value container currently holds a value. */
    hasValue: boolean,
    /** The children to be rendered. */
    children: Node,
  };
  declare export type MenuState = {
    placement: 'bottom' | 'top' | null,
    maxHeight: number,
  };
  declare export type MenuAndPlacerCommon = CommonProps & {
    /** Callback to update the portal after possible flip. */
    getPortalPlacement: MenuState => void,
    /** Props to be passed to the menu wrapper. */
    innerProps: Object,
    /** Set the maximum height of the menu. */
    maxMenuHeight: number,
    /** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
    menuPlacement: MenuPlacement,
    /* The CSS position value of the menu, when "fixed" extra layout management is required */
    menuPosition: MenuPosition,
    /** Set the minimum height of the menu. */
    minMenuHeight: number,
    /** Set whether the page should scroll to show the menu. */
    menuShouldScrollIntoView: boolean,
  };
  declare export type MenuProps = MenuAndPlacerCommon & {
    /** Reference to the internal element, consumed by the MenuPlacer component */
    innerRef: ElementRef<*>,
    /** The children to be rendered. */
    children: ReactElement<*>,
  };

  declare export var components: {
    ClearIndicator: ComponentType<IndicatorProps>,
    Control: ComponentType<ControlProps>,
    DropdownIndicator: ComponentType<IndicatorProps>,
    DownChevron: ComponentType<any>,
    CrossIcon: ComponentType<any>,
    Group: ComponentType<GroupProps>,
    GroupHeading: ComponentType<any>,
    Input: ComponentType<InputProps>,
    LoadingIndicator: ComponentType<{
      /** Props that will be passed on to the children. */
      innerProps: any,
      /** The focused state of the select. */
      isFocused: boolean,
      /** Whether the text is right to left */
      isRtl: boolean,
    } & CommonProps & {
      /** Set size of the container. */
      size: number,
    }>,
    Menu: ComponentType<MenuProps>,
    MenuList: ComponentType<MenuListComponentProps>,
    MenuPortal: ComponentType<CommonProps & {
      appendTo: HTMLElement,
      children: Node, // ideally Menu<MenuProps>
      controlElement: HTMLElement,
      menuPlacement: MenuPlacement,
      menuPosition: MenuPosition,
    }>,
    LoadingMessage: ComponentType<NoticeProps>,
    NoOptionsMessage: ComponentType<NoticeProps>,
    MultiValue: ComponentType<MultiValueProps>,
    MultiValueContainer: ComponentType<any>,
    MultiValueLabel: ComponentType<any>,
    MultiValueRemove: ComponentType<any>,
    Option: ComponentType<OptionProps>,
    Placeholder: ComponentType<PlaceholderProps>,
    SelectContainer: ComponentType<ContainerProps>,
    SingleValue: ComponentType<SingleValueProps>,
    ValueContainer: ComponentType<ValueContainerProps>,
  };
}