import React from 'react';
import { ExpandProps, CommonProps } from '@contentful/f36-core';
import { TextInputProps } from '@contentful/f36-forms';

interface GenericGroupType<ItemType> {
    groupTitle: string;
    options: ItemType[];
}
interface AutocompleteProps<ItemType> extends CommonProps, Pick<TextInputProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'id' | 'defaultValue'> {
    /**
     * It’s an array of data to be used as "options" by the autocomplete component.
     * This can either be a plain list of items or a list of groups of items.
     */
    items: ItemType[] | GenericGroupType<ItemType>[];
    /**
     * Boolean to control whether the Autocomplete menu is open
     */
    isOpen?: boolean;
    /**
     * Callback fired when the Autocomplete menu opens
     */
    onOpen?: () => void;
    /**
     * Callback fired when the Autocomplete menu closes
     */
    onClose?: () => void;
    /**
     * Set a custom icon for the text input
     */
    icon?: React.ReactElement;
    /**
     * Tells if the item is a object with groups
     */
    isGrouped?: boolean;
    /**
     * Set the value of the text input
     */
    inputValue?: string;
    /**
     * Function called whenever the input value changes
     */
    onInputValueChange?: (value: string) => void;
    /**
     * This is the function that will be called when the user selects one of the "options" in the list.
     * The component will pass the selected "item" as an argument to the function..
     */
    onSelectItem: (item: ItemType) => void;
    /**
     * Applying the selectedItem property turns autocomplete into a controlled component.
     * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.
     */
    selectedItem?: ItemType;
    /**
     * This is the function that will be called for each "item" passed in the `items` prop.
     * It receives the "item" and "inputValue" as arguments and returns a ReactNode.
     * The inputValue is passed in case you want to highlight the match on the render.
     */
    renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;
    /**
     * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string
     * from those objetcs to be used as inputValue
     */
    itemToString?: (item: ItemType) => string;
    /**
     * Text input behaviour after an item is selected
     * @default "replace"
     */
    textOnAfterSelect?: 'clear' | 'preserve' | 'replace';
    /**
     * If this is set to `false` the dropdown menu will stay open after selecting an item
     * @default true
     */
    closeAfterSelect?: boolean;
    /**
     * This is the value will be passed to the `placeholder` prop of the input.
     * @default "Search"
     */
    placeholder?: string;
    /**
     * Defines if the list should be shown even if empty, when input is focused
     * @default false
     */
    showEmptyList?: boolean;
    /**
     * A message that will be shown when it is not possible to find any option that matches the input value
     * @default "No matches"
     */
    noMatchesMessage?: string;
    /**
     * Use this prop to get a ref to the input element of the component
     */
    inputRef?: React.Ref<HTMLInputElement>;
    /**
     * Use this prop to get a ref to the toggle button of the component
     */
    toggleRef?: React.Ref<HTMLButtonElement>;
    /**
     * Use this prop to get a ref to the list of items of the component
     */
    listRef?: React.Ref<HTMLUListElement>;
    /**
     * It sets the width of the list
     * @default "auto"
     */
    listWidth?: 'auto' | 'full';
    /**
     * It sets the max-height, in pixels, of the list
     * The default value is the height of 5 single line items
     * @default 180
     */
    listMaxHeight?: number;
    /**
     * Sets the list to show its loading state
     * @default false
     */
    isLoading?: boolean;
    /**
     * Boolean to control whether or not to render the suggestions box in a React Portal.
     * Rendering content inside a Portal allows the suggestions box to escape the bounds
     * of its parent while still being positioned correctly.
     * Defaults to `false`
     */
    usePortal?: boolean;
    /**
     * A [data-test-id] attribute for the suggestions box used for testing purposes
     */
    popoverTestId?: string;
    /**
     * Function called when the input is focused
     *
     * @param event
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Function called when the input is blurred
     * @param event
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Manually control when the button to clear the input value is shown
     */
    showClearButton?: boolean;
    /**
     * Additional aria attributes
     */
    aria?: {
        showListIconLabel?: string;
        clearSelectionIconLabel?: string;
    };
}
declare function AutocompleteBase<ItemType>(props: AutocompleteProps<ItemType>, ref: React.Ref<HTMLDivElement>): React.JSX.Element;
/**
 * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used
 * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.
 * Once one of the options is selected, that option becomes the value of the `TextInput`.
 */
declare const Autocomplete: <T>(props: ExpandProps<AutocompleteProps<T>> & {
    ref?: React.Ref<HTMLDivElement>;
}) => ReturnType<typeof AutocompleteBase>;

export { Autocomplete, type AutocompleteProps };