/**
 * @file index.tsx
 *
 * @fileoverview Renders a multi element select component using the downshift library.
 */
import React, { FocusEvent } from 'react';
import { SelectItem } from 'src/models/forms';
interface Props {
    /**
     * The id for this select. It will be used for accessibility purposes.
     */
    id?: string;
    /**
     * Placeholder. The text displayed inside the input of the select box.
     *
     * @default "Search something here..."
     */
    placeholder?: string;
    /**
     * The values selected in the select widget.
     *
     * @default []
     */
    values: string[];
    /**
     * All possible items (the options) that are available inside the widget.
     *
     * @default []
     */
    items: SelectItem[];
    /**
     * The label for the widget.
     */
    label?: string;
    /**
     * If the element is required. Will map to the "required" HTML5 property.
     */
    required?: boolean;
    /**
     * The event to fire when something changes in the widget.
     */
    onChange?(items: string[]): any;
    /**
     * The event to fire when something changes in the widget.
     */
    onInputChange?(items: string): any;
    /**
     * The event to fire when the user clicks outside the widget.
     */
    onBlur?(event: FocusEvent<HTMLInputElement>): void;
}
interface State {
    input: string;
    selectedItems: string[];
}
/**
 * A multiple autotocomplet widget for when the user needs to select multiple elements in a select-style element.
 */
export declare class MultipleAutocomplete extends React.Component<Props, State> {
    static defaultProps: {
        placeholder: string;
        items: any[];
    };
    state: {
        input: string;
        selectedItems: any[];
    };
    /**
     * handles the key down event which will show all items in the dropdown.
     *
     * @param {any} evt
     *  The event of key down.
     */
    handleKeyDown: (evt: any) => void;
    /**
     * Handles an input change when we type something in the input box.
     *
     * Will set the internal state with what was typed.
     *
     * @param {any} evt
     *  The event.
     */
    handleInputChange: (evt: any) => void;
    /**
     * Handles a change event on the dropdwon element.
     *
     * When we actually choose something in the dropdown this will set the onChange event (fire external)
     * and will also clear the input.
     *
     * @param {SelectItem} item
     *  The item that was just selected.
     */
    handleChange: (item: SelectItem) => void;
    /**
     * Based on the key of a item return its full item with name as well.
     *
     * @param {string} key
     *  The key to get the item from.
     */
    getItemNameFormSelectedItem(key: string): string;
    render(): JSX.Element;
}
export default MultipleAutocomplete;