import React, { Key, ReactNode, RefObject } from 'react';
import SuggestLayer from 'bloko/common/constants/layersCssClasses';
import { BoundingClientRect } from 'bloko/common/types';
import { TransitionStylesType } from 'bloko/blocks/suggest/utils';
export interface SuggestPickerItemType extends Record<string, unknown> {
    id?: string;
    text: string;
    additional?: Record<string, unknown>;
}
export interface SuggestPickerProps<T extends SuggestPickerItemType> {
    /**
     * Ref на DOM-элемент относительно которого будет спозиционирован SuggestPicker,
     * и на события которого он будет реагировать.
     */
    element: HTMLElement;
    /**
     * Ref для переопределения элемента, относительно которого будет спозиционирован SuggestPicker,
     * по умолчанию SuggestPicker будет позиционироваться относительно element
     */
    elementWrapperRef?: RefObject<HTMLElement>;
    /** Массив элементов списка для отображения */
    items?: Array<T>;
    /** Функция рендера блока со списком элементов.
     * Может добавлять в дропдаун произвольные компоненты.
     *
     * Для списка элементов используйте `<SuggestPickerItems>`.
     *
     * Для отступов используйте переменные из стилей саджеста.
     *
     * Принимает:
     * `items` — массив элементов для рендера
     * `renderItem(item, index)` — вывод `<SuggestPickerItemType>` со всеми обработчиками событий.
     *
     * Пример результата:
     *
     * <pre>
     * ```
     * <CustomBlock>
     *     <CustomHeader/>
     *     <SuggestPickerItems>
     *         <SuggestPickerItem/>
     *         <SuggestPickerItem/>
     *         <Banner/>
     *         <SuggestPickerItem/>
     *         ...
     *     </SuggestPickerItems>
     *     <CustomFooter/>
     * </CustomBlock>
     * ```
     * </pre>
     *
     * Ещё пример результата:
     *
     * <pre>
     * ```
     * <CustomBlock>
     *     ¯\_(ツ)_/¯ По вашему запросу ничего не нашлось.
     * </CustomBlock>
     * ```
     * </pre>
     */
    renderItems?: (items: Array<T>, renderItem: (item: T, index: number) => ReactNode) => ReactNode;
    /** Коллбэк, вызываемый при выборе элемента из списка */
    onItemSelect?: (item: T) => void;
    /**
     * Функция, которая должна вернуть содержимое переданного в нее item, по умолчанию возвращает
     * item[Defaults.FIELD]
     */
    itemContent?: (item: T) => ReactNode;
    /** Функция, которая должна вернуть key для переданного в нее item, по умолчанию возвращает item.id */
    itemKey?: (item: T) => Key;
    /** Положение dropdown по оси Z (устанавливает z-index). [Возможные варианты](#suggest-layers) */
    layer?: SuggestLayer;
    /** После отображения саджеста автоматически выделять первый пункт. По enter будет выбран этот вариант */
    autoHighlightFirstSuggest?: boolean;
    /** Время анимации открытия/закрытия SuggestPicker */
    fadeTime?: number;
    /** Коллбэк, вызываемый при нажатии ESC */
    onHide?: () => void;
    /** Коллбэк вызываемый, при нажатии клавиши вниз, когда пикер скрыт */
    onShow?: () => void;
    /** Определяет доступность и видимость компонента */
    enabled?: boolean;
    /** Выводить пикер внутри видимой области экрана — нужно для отображения внутри оверлеев */
    onScreen?: boolean;
}
export interface SuggestPickerDefaultProps<T extends SuggestPickerItemType> {
    items: Array<T>;
    itemContent: (item: T) => ReactNode;
    itemKey: (item: T) => Key;
    layer: SuggestLayer;
    autoHighlightFirstSuggest: boolean;
    fadeTime: number;
    enabled: boolean;
}
/**
 * Компонент позволяет отображать список элементов, один из которых можно выбрать, поддерживается работа
 * с клавиатурой и мышью, в качестве элементов могут выступать любые ноды или строки.
 */
declare class SuggestPicker<T extends SuggestPickerItemType> extends React.PureComponent<SuggestPickerDefaultProps<T> & SuggestPickerProps<T>> {
    static defaultProps: SuggestPickerDefaultProps<SuggestPickerItemType>;
    highlightedItemIndex: number;
    transitionStyles: TransitionStylesType;
    pickerRef: RefObject<HTMLDivElement>;
    elementMetrics: BoundingClientRect;
    unsubscribe: {
        resize?: () => void;
        keydown?: () => void;
    };
    startCheckingElementMetrics: () => void;
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(prevProps: SuggestPickerProps<T>): void;
    handleKeyDown: (event: KeyboardEvent) => void;
    handleMouseEnter: (index: number) => void;
    mouseMoveHandler: (index: number) => void;
    handleMouseMove: ((index: number) => void) | undefined;
    handleMouseDown: (event: React.MouseEvent, index: number) => void;
    emitHide: () => void;
    emitShow: () => void;
    selectItem: (item: T) => void;
    selectHighlighted: () => void;
    updateHighlight: (index: number) => void;
    keyboardHandler: (isHidden: boolean, event: KeyboardEvent, index: number) => void;
    updatePosition: () => void;
    renderItem: (item: T, index: number) => ReactNode;
    renderItems(items: Array<T>, renderItem: (item: T, index: number) => ReactNode): ReactNode;
    render(): ReactNode;
}
export default SuggestPicker;
export { SuggestLayer };