// Type definitions for react-autosuggest 9.3 // Project: http://react-autosuggest.js.org/, https://github.com/moroshko/react-autosuggest // Definitions by: Nicolas Schmitt // Philip Ottesen // Robert Essig // Terry Bayne // Christopher Deutsch // Kevin Ross // Thomas den Hollander // ulrichb // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; declare class Autosuggest extends React.Component< Autosuggest.AutosuggestProps, Autosuggest.AutosuggestState > { /** * Autosuggest exposes these class properties to the parent component. * They can be accessed through `ref`. */ input: HTMLInputElement | undefined; } export = Autosuggest; declare namespace Autosuggest { /** * Utilies types based on: * https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-307871458 */ /** @internal */ type Omit = Pick; interface SuggestionsFetchRequestedParams { value: string; reason: | 'input-changed' | 'input-focused' | 'escape-pressed' | 'suggestions-revealed' | 'suggestion-selected'; } interface RenderSuggestionParams { query: string; isHighlighted: boolean; } interface SuggestionHighlightedParams { suggestion: any; } interface ChangeEvent { newValue: string; method: 'down' | 'up' | 'escape' | 'enter' | 'click' | 'type'; } interface BlurEvent { highlightedSuggestion: TSuggestion; } interface InputProps extends Omit, 'onChange' | 'onBlur'> { onChange(event: React.FormEvent, params: ChangeEvent): void; onBlur?(event: React.FocusEvent, params?: BlurEvent): void; value: string; } interface SuggestionSelectedEventData { suggestion: TSuggestion; suggestionValue: string; suggestionIndex: number; sectionIndex: number | null; method: 'click' | 'enter'; } type ThemeKey = | 'container' | 'containerOpen' | 'input' | 'inputOpen' | 'inputFocused' | 'suggestionsContainer' | 'suggestionsContainerOpen' | 'suggestionsList' | 'suggestion' | 'suggestionFirst' | 'suggestionHighlighted' | 'sectionContainer' | 'sectionContainerFirst' | 'sectionTitle'; type Theme = | Record | Partial>; interface RenderSuggestionsContainerParams { containerProps: { id: string; key: string; className: string; ref: any; role: string; }; children: React.ReactNode; query: string; } // types for functions - allowing reuse externally - e.g. as props and bound in the constructor type GetSectionSuggestions = (section: any) => TSuggestion[]; type GetSuggestionValue = (suggestion: TSuggestion) => string; type OnSuggestionHighlighted = (params: SuggestionHighlightedParams) => void; type SuggestionsFetchRequested = (request: SuggestionsFetchRequestedParams) => void; type OnSuggestionsClearRequested = () => void; type OnSuggestionSelected = ( event: React.FormEvent, data: SuggestionSelectedEventData, ) => void; type RenderInputComponent = (inputProps: InputProps) => React.ReactNode; type RenderSuggestionsContainer = (params: RenderSuggestionsContainerParams) => React.ReactNode; type RenderSectionTitle = (section: any) => React.ReactNode; type RenderSuggestion = ( suggestion: TSuggestion, params: RenderSuggestionParams, ) => React.ReactNode; type ShouldRenderSuggestions = (value: string) => boolean; interface AutosuggestProps { /** * Set it to true if you'd like to render suggestions even when the input is not focused. */ alwaysRenderSuggestions?: boolean; /** * Set it to false if you don't want Autosuggest to keep the input focused when suggestions are clicked/tapped. */ focusInputOnSuggestionClick?: boolean; /** * Implement it to teach Autosuggest where to find the suggestions for every section. */ getSectionSuggestions?: GetSectionSuggestions; /** * Implement it to teach Autosuggest what should be the input value when suggestion is clicked. */ getSuggestionValue: GetSuggestionValue; /** * Set it to true if you'd like Autosuggest to automatically highlight the first suggestion. */ highlightFirstSuggestion?: boolean; /** * Use it only if you have multiple Autosuggest components on a page. */ id?: string; /** * Pass through arbitrary props to the input. It must contain at least value and onChange. */ inputProps: InputProps; /** * Set it to true if you'd like to display suggestions in multiple sections (with optional titles). */ multiSection?: boolean; /** * Will be called every time the highlighted suggestion changes. */ onSuggestionHighlighted?: OnSuggestionHighlighted; /** * Will be called every time you need to recalculate suggestions. */ onSuggestionsFetchRequested: SuggestionsFetchRequested; /** * Will be called every time you need to set suggestions to []. */ onSuggestionsClearRequested?: OnSuggestionsClearRequested; /** * Will be called every time suggestion is selected via mouse or keyboard. */ onSuggestionSelected?: OnSuggestionSelected; /** * Use it only if you need to customize the rendering of the input. */ renderInputComponent?: RenderInputComponent; /** * Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. */ renderSuggestionsContainer?: RenderSuggestionsContainer; /** * Use your imagination to define how section titles are rendered. */ renderSectionTitle?: RenderSectionTitle; /** * Use your imagination to define how suggestions are rendered. */ renderSuggestion: RenderSuggestion; /** * When the input is focused, Autosuggest will consult this function when to render suggestions. * Use it, for example, if you want to display suggestions when input value is at least 2 characters long. */ shouldRenderSuggestions?: ShouldRenderSuggestions; /** * These are the suggestions that will be displayed. Items can take an arbitrary shape. */ suggestions: ReadonlyArray; /** * Use your imagination to style the Autosuggest. */ theme?: Theme; } interface AutosuggestState { isFocused: boolean; isCollapsed: boolean; highlightedSectionIndex: number | null; highlightedSuggestionIndex: number | null; highlightedSuggestion: TSuggestion | null; valueBeforeUpDown: TSuggestion | null; } }