Improve autocomplete types/interface

[tomaskikutis]

Use generics in order to return correct types

onSelect?(suggestion: string): void;

suggestion parameter has incorrect type. In case of auto tagging, it has a type of ITagUi, and not a string.

At the Autocomplete component level, we don't know the types of objects and should use generics in order for types to be resolved correctly:

interface IProps<T> {
    search?(searhString: string, callback: (result: Array<T>) => void): {cancel: () => void};
    onSelect?(suggestion: T): void;
    // ...
}

Replace keyValue with a function

keyValue is typed as a string and won't be type-checked. Also it limits supported data structures, for example, I wouldn't be able to pass a tuple or a map. If we used getValue(item: T): string; it would be type safe and work for any kind of data structure. It should also probably be called getLabel if the result will be displayed in the UI. It's more clear when value is used for IDs which don't appear in the UI and label for things which do.

Better type definition for listItemTemplate

listItemTemplate?(value: any): any; --> listItemTemplate?: React.ComponentType<{item: T}>;

Naming suggestion for search

To keep it clear and consistent, I suggest prefixing functions that get called when a certain event happens with on. Like onClick, onSelect I would name it onSearch

Drop items prop

I would keep props to a minimum so the component is easy to use. It was unclear to me on how I was supposed to use the component since it includes both search and items. Sure, I could try read the docs, but it's even better if we can avoid the confusion in the first place. In case we want synchronous behavior without fetching results from the network, we can still use the same search API:

const items = ['one', 'two', 'three', 'four'];

return (
    <Autocomplete
        search={(searchString, callback) => {
            callback(items.filter((item) => item.includes(searchString)));

            return {
                cancel: () => {},
            };
        }}
    />
);