import type { HTMLAttributes, InputHTMLAttributes, ChangeEvent, ReactNode } from 'react';
import type PopperJs from 'popper.js';
import type { BaseProps, SizeType } from '@toptal/picasso-shared';
import type { OutlinedInputProps, Status } from '@toptal/picasso-outlined-input';
/**
 * Select props are generalized over possible values in the component and whether
 * Select should be a multiselect. If you want `onChange` to take a handler that
 * can take array (for multiselect) you should set `M` to `true`. By default it's
 * single select.
 *
 * @param T The type of the value in the `Select`, can be either `number` or `string`
 * @param M The `boolean` type of the `multiple` property to indicate whether `onChange` will expect handler to accept plain `T` or array of `T`
 * @param V Technical type, don't pass type argument to it directly
 */
export interface SelectProps<T extends ValueType = ValueType, M extends boolean = boolean, V = M extends true ? T[] : T> extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'color' | 'value'> {
    /** If true, the 'Select' will be disabled */
    disabled?: boolean;
    /** Whether to render select options in portal. Should be disabled in Modals */
    disablePortal?: boolean;
    /** Indicate whether `Select` is in `error`, `warning` or `default` state */
    status?: Extract<Status, 'error' | 'warning' | 'default'>;
    /** Component ID */
    id?: string;
    /** Width of the component */
    width?: 'full' | 'shrink' | 'auto';
    /** Width of the menu */
    menuWidth?: string;
    /** Shows the loading icon when options are loading */
    loading?: boolean;
    /** Placeholder option which is selected by default */
    placeholder?: string;
    /** Placeholder for search input */
    searchPlaceholder?: string;
    /** Whether icon should be placed at the beginning or end of the `Input` */
    iconPosition?: 'start' | 'end';
    /** Specify icon which should be rendered inside Input */
    icon?: ReactNode;
    /** Callback invoked when `Select` changes its state. */
    onChange?: (event: ChangeEvent<{
        name?: string | undefined;
        value: V;
    }>) => void;
    /** Label to show when no options were found */
    noOptionsText?: string;
    /** List of options or option groups to be rendered as `Select` */
    options: Option<T>[] | OptionGroups<T>;
    /** Callback responsible for rendering the option given the option and its index in the list of options */
    renderOption?: (option: Option<T>, index?: number) => ReactNode;
    /** A function that takes a display value from the option item */
    getDisplayValue?: (option: Option | null) => string;
    /** Selected value */
    value?: V;
    /** Allow selecting multiple values */
    multiple?: M;
    /** Whether to render native browser select or not */
    native?: boolean;
    /**
     * Component size
     * @default medium
     */
    size?: SizeType<'small' | 'medium' | 'large'>;
    /** Whether to render reset icon which clears selected value */
    enableReset?: boolean;
    /** Whether to render reset icon which clears search input value */
    enableResetSearch?: boolean;
    popperContainer?: HTMLElement;
    /** Defines the minimum options number to show the search
     * @default 10
     */
    searchThreshold?: number;
    /** Limits number of options to display on the list
     * @default 200
     */
    limit?: number;
    /** Specifies whether the autofill enabled or not, disabled by default */
    enableAutofill?: boolean;
    /** A function that is invoked during search. It takes an array of options and a search value and returns filtered options */
    filterOptions?: (options: Option[], searchValue: string, getDisplayValue?: (option: Option | null) => string) => Option[];
    ref?: React.Ref<HTMLInputElement>;
    testIds?: OutlinedInputProps['testIds'] & {
        noOptions?: string;
        loader?: string;
        limitFooter?: string;
        searchInput?: string;
    };
    highlight?: 'autofill';
}
export declare type ValueType = string | number;
export declare type Option<T extends string | number = string | number> = {
    key?: number;
    text: string;
    description?: string;
    value: T;
    disabled?: boolean;
    [prop: string]: string | number | undefined | boolean;
};
export declare type OptionGroups<T extends string | number = string | number> = {
    [group: string]: Option<T>[];
};
export declare type ItemProps = {
    onMouseEnter: () => void;
    onMouseDown: (event: React.MouseEvent) => void;
    onClick: (event: React.MouseEvent) => void;
};
export declare type FocusEventType = (event: React.FocusEvent<HTMLInputElement>) => void;
export declare type Selection = {
    isSelected: () => boolean;
    isOptionSelected: (option: Option) => boolean;
    display: (getDisplayValue: (option: Option | null) => string) => string;
};
export interface UseSelectStateProps {
    getDisplayValue: (option: Option | null) => string;
    options: Option[];
    disabled?: boolean;
    multiple?: boolean;
    value?: ValueType | ValueType[];
    searchThreshold?: number;
    limit?: number;
}
export declare type UseSelectStateOutput = {
    isOpen: boolean;
    canOpen: boolean;
    open: () => void;
    close: () => void;
    highlightedIndex: number;
    closeOnEnter: boolean;
    setHighlightedIndex: (index: number) => void;
    setFilterOptionsValue: (value: string) => void;
    showSearch: boolean;
    filterOptionsValue: string;
    displayValue: string;
    selection: Selection;
    filteredOptions: Option[] | OptionGroups;
    emptySelectValue: string | string[];
    selectedOptions: Option[];
};
export interface UseSelectProps<T extends ValueType = ValueType, M extends boolean = boolean, V = M extends true ? T[] : T> {
    searchInputRef?: React.Ref<HTMLInputElement>;
    selectRef: React.Ref<HTMLInputElement>;
    popperRef?: React.Ref<PopperJs>;
    selectProps: SelectProps<T, M, V>;
    selectState: UseSelectStateOutput;
}
declare type GetRootProps = () => {
    onFocus: FocusEventType;
    onClick: (event: React.MouseEvent<HTMLInputElement>) => void;
    onBlur: FocusEventType;
};
declare type GetInputProps = () => Partial<HTMLAttributes<HTMLInputElement>>;
declare type GetSearchInputProps = () => Partial<HTMLAttributes<HTMLInputElement>>;
export interface UseSelectOutput {
    getItemProps: (item: Option, index: number) => ItemProps;
    getRootProps: GetRootProps;
    getInputProps: GetInputProps;
    getSearchInputProps: GetSearchInputProps;
}
export {};
//# sourceMappingURL=types.d.ts.map