/** @jsx jsx */
import { ReactNode } from 'react';
import { InputProps } from 'theme-ui';
import { PopoverProps } from '../Popover';
export interface SearchBoxCallbackProps<ItemType> {
    /**
     * curent to be rendered
     */
    item: ItemType;
    /**
     * item index
     */
    index: number;
    /**
     * whether the popover is open
     */
    isOpen: boolean;
    /**
     * the search string
     */
    search: string;
    /**
     * selected item index
     */
    selected?: number;
    /**
     * select item function to be called when an item is selected
     */
    selectItem: (item: ItemType, index: number, close: boolean) => void;
}
export interface SearchInputItemType {
    [key: string]: any;
}
export interface SearchInputOwnProps<ItemType> {
    /**
     * callback on change of search input. user can retrieve items in this callback
     *
     */
    onSearch: (search: string) => Promise<void> | void;
    /**
     * on select a search item.
     */
    onSelect?: (item: ItemType) => void;
    /**
     * children is a render prop to allow custom rendering of items, one at a time
     */
    children?: (props: SearchBoxCallbackProps<ItemType>) => ReactNode;
    /**
     * items array
     */
    items?: ItemType[];
    /**
     * customize the popover
     */
    popoverProps?: PopoverProps;
    /**
     * custom renver of the search items popup
     */
    render?: (rendered: ReactNode) => ReactNode;
}
export declare type SearchInputProps<ItemType> = SearchInputOwnProps<ItemType> & Omit<InputProps, 'ref' | 'onSelect'>;
/**
 * an input component combined with a popover, can be used for incremental search.
 */
export declare const SearchInput: <ItemType extends SearchInputItemType>({ onSearch, items, children, onSelect, popoverProps, render, ...rest }: SearchInputProps<ItemType>) => JSX.Element;