import { ReactElement, ReactNode, CSSProperties, FocusEvent } from 'react';
import { BaseOption, GroupedOption } from './types';
import { CommonProps } from '../common';
export interface MultiSelectProps<T extends BaseOption> extends Omit<CommonProps, 'id'> {
    /**
     * Specify the [automated assistance](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) in filling out form field values by the browser.
     */
    autoComplete?: string;
    /**
     * Whether the select is disabled.
     */
    disabled?: boolean;
    /**
     * Id of <input> element.
     */
    id?: string;
    /**
     * Whether the input is invalid.
     */
    invalid?: boolean;
    /**
     * Loading state of Select, which will render a spinner at bottom of the option list.
     */
    loading?: boolean;
    /**
     * Name of <input> element, is used to refer to the form data for submission.
     */
    name?: string;
    /**
     * Content to render when filtering items returns zero results.
     */
    noResults?: ReactNode;
    /**
     * Blur event handler.
     */
    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
    /**
     * onChange event handler.
     */
    onChange: (value: (string | number)[]) => void;
    /**
     * Callback to allow to create new option when option not found based on query (only when the callback is defined).
     */
    onCreateNewOption?: (optionText: string) => void;
    /**
     * Focus event handler.
     */
    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback invoked when the query string changes.
     */
    onQueryChange?: (query?: string) => void;
    /**
     * Handle scroll event when scrolling to the bottom of the option list.
     */
    onScrollListToBottom?: () => void;
    /**
     * Additonal inline style for option menu dropdown.
     */
    optionMenuStyle?: CSSProperties;
    /**
     * Customise option renderer.
     */
    optionRenderer?: (renderOpts: {
        index: number;
        option: T;
    }) => ReactElement;
    /**
     * An array of (grouped) options to be selected.
     *
     * The generic parameter T should extend BaseOption:
     *
     * type BaseOption = {
     *   disabled?: boolean;
     *   helpText?: string;
     *   text: string;
     *   value: string | number;
     * };
     *
     * type GroupedOption<T> = {
     *   category: string;
     *   options: T[];
     * };
     */
    options: Array<GroupedOption<T>> | Array<T>;
    /**
     * Placeholder text in the absence of any value.
     */
    placeholder?: string;
    /**
     * Name of Icon or an Icon element to render on the left side of the input.
     */
    prefix?: string | ReactElement;
    /**
     * Query string to filter options. This value is controlled: its state if defined must be managed externally.
     */
    query?: string;
    /**
     * Customise selected option renderer.
     */
    selectedOptionRenderer?: (renderOpts: {
        option: T;
    }) => string | ReactElement;
    /**
     * The size of the input box.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Current selected value.
     */
    value?: (string | number)[];
}
declare const MultiSelect: <T extends BaseOption>({ options, value, onBlur, onChange, onFocus, optionRenderer, selectedOptionRenderer, disabled, size, invalid, placeholder, prefix, onScrollListToBottom, loading, query, onQueryChange, noResults, name, onCreateNewOption, id, className, style, sx, autoComplete, optionMenuStyle, "data-test-id": dataTestId, }: MultiSelectProps<T>) => ReactElement;
export default MultiSelect;