Updated react-autosuggest for version 9.3.X (#20442)

`react-autosuggest` had some breaking changes.

Previously Autosuggest was defined with `any` props which meant no type checking was happening.

New definition enables type checking when using `Autosuggest` component.
```
declare class Autosuggest extends React.Component<Autosuggest.AutosuggestProps> {}
```

.github/CODEOWNERS

@@ -2504,7 +2504,7 @@
 /types/react/v15/                                        @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz
 /types/react/                                            @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @richseviora
 /types/react-app/                                        @prakarshpandey
-/types/react-autosuggest/                                @nicolas-schmitt @pjo256 @robessog @tbayne
+/types/react-autosuggest/                                @nicolas-schmitt @pjo256 @robessog @tbayne @cdeutsch
 /types/react-body-classname/                             @mhegazy
 /types/react-bootstrap/                                  @walkerburgin @vsiao @danilojrr @Batbold-Gansukh @octatone @chengsieuly @katbusch
 /types/react-bootstrap-date-picker/                      @LKay @ssi-hu-antal-bodnar

types/react-autosuggest/index.d.ts

@@ -1,18 +1,22 @@
-// Type definitions for react-autosuggest 8.0
+// Type definitions for react-autosuggest 9.3
 // Project: http://react-autosuggest.js.org/
-// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>, Robert Essig <https://github.com/robessog>, Terry Bayne <https://github.com/tbayne>
+// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>
+//                 Philip Ottesen <https://github.com/pjo256>
+//                 Robert Essig <https://github.com/robessog>
+//                 Terry Bayne <https://github.com/tbayne>
+//                 Christopher Deutsch <https://github.com/cdeutsch>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
 import * as React from 'react';
-declare class Autosuggest extends React.Component<any> {}
+declare class Autosuggest extends React.Component<Autosuggest.AutosuggestProps> {}
 
 export = Autosuggest;
 
 declare namespace Autosuggest {
   interface SuggestionsFetchRequest {
     value: string;
-    reason: string;
+    reason: 'input-changed' | 'input-focused' | 'escape-pressed' | 'suggestions-revealed' | 'suggestion-selected';
   }
 
   interface InputValues {
@@ -20,38 +24,54 @@ declare namespace Autosuggest {
     valueBeforeUpDown?: string;
   }
 
+  interface RenderSuggestionParams {
+    query: string;
+    isHighlighted: boolean;
+  }
+
+  interface SuggestionHighlightedParams {
+    suggestion: any;
+  }
+
   interface ChangeEvent {
     newValue: string;
     method: 'down' | 'up' | 'escape' | 'enter' | 'click' | 'type';
   }
 
   interface BlurEvent {
-    focusedSuggestion: any;
+    highlightedSuggestion: any;
   }
 
-  interface InputProps extends React.HTMLAttributes<any> {
+  interface InputProps extends React.InputHTMLAttributes<any> {
     value: string;
     onChange(event: React.FormEvent<any>, params?: ChangeEvent): void;
     onBlur?(event: React.FormEvent<any>, params?: BlurEvent): void;
+    [key: string]: any;
   }
 
   interface SuggestionSelectedEventData<TSuggestion> {
-    method: 'click' | 'enter';
-    sectionIndex: number | null;
     suggestion: TSuggestion;
     suggestionValue: string;
+    suggestionIndex: number;
+    sectionIndex: number | null;
+    method: 'click' | 'enter';
   }
 
   interface Theme {
     container?: string;
     containerOpen?: string;
     input?: string;
-    sectionContainer?: string;
-    sectionSuggestionsContainer?: string;
-    sectionTitle?: string;
-    suggestion?: string;
-    suggestionFocused?: string;
+    inputOpen?: string;
+    inputFocused?: string;
     suggestionsContainer?: string;
+    suggestionsContainerOpen?: string;
+    suggestionsList?: string;
+    suggestion?: string;
+    suggestionFirst?: string;
+    suggestionHighlighted?: string;
+    sectionContainer?: string;
+    sectionContainerFirst?: string;
+    sectionTitle?: string;
   }
 
   interface AutosuggestProps extends React.Props<Autosuggest> {
@@ -59,18 +79,19 @@ declare namespace Autosuggest {
     onSuggestionsFetchRequested(request: SuggestionsFetchRequest): void;
     onSuggestionsClearRequested?(): void;
     getSuggestionValue(suggestion: any): any;
-    renderSuggestion(suggestion: any, inputValues: InputValues): JSX.Element;
+    renderSuggestion(suggestion: any, params: RenderSuggestionParams): JSX.Element;
     inputProps: InputProps;
     onSuggestionSelected?(event: React.FormEvent<any>, data: SuggestionSelectedEventData<any>): void;
+    onSuggestionHighlighted?(params: SuggestionHighlightedParams): void;
     shouldRenderSuggestions?(value: string): boolean;
     alwaysRenderSuggestions?: boolean;
-    focusFirstSuggestion?: boolean;
+    highlightFirstSuggestion?: boolean;
     focusInputOnSuggestionClick?: boolean;
     multiSection?: boolean;
-    renderSectionTitle?(section: any, inputValues: InputValues): JSX.Element;
+    renderSectionTitle?(section: any): JSX.Element;
     getSectionSuggestions?(section: any): any[];
-    renderInputComponent?(): JSX.Element;
-    renderSuggestionsContainer?(children: any): JSX.Element;
+    renderInputComponent?(inputProps: InputProps): JSX.Element;
+    renderSuggestionsContainer?(containerProps: any, children: any, query: string): JSX.Element;
     theme?: Theme;
     id?: string;
   }

types/react-autosuggest/react-autosuggest-tests.tsx

@@ -105,8 +105,9 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
         alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`);
     }
 
-    protected renderSuggestion(suggestion: Language): JSX.Element {
-        return <span>{suggestion.name}</span>;
+    protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element {
+        const className = params.isHighlighted ? "highlighted" : undefined;
+        return <span className={className}>{suggestion.name}</span>;
     }
     // endregion region Event handlers
     protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
@@ -223,7 +224,8 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
 
         this.state = {
             value: '',
-            suggestions: this.getSuggestions('')
+            suggestions: this.getSuggestions(''),
+            highlighted: ''
         };
     }
     // endregion region Rendering methods
@@ -248,6 +250,10 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
             renderSuggestion={this.renderSuggestion}
             renderSectionTitle={this.renderSectionTitle}
             getSectionSuggestions={this.getSectionSuggestions}
+            onSuggestionHighlighted={this.onSuggestionHighlighted}
+            highlightFirstSuggestion={true}
+            renderInputComponent={this.renderInputComponent}
+            renderSuggestionsContainer={this.renderSuggestionsContainer}
             inputProps={inputProps}/>;
     }
 
@@ -256,13 +262,30 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
         alert(`Selected language is ${language.name} (${language.year}).`);
     }
 
-    protected renderSuggestion(suggestion: Language): JSX.Element {
-        return <span>{suggestion.name}</span>;
+    protected renderSuggestion(suggestion: Language, params: Autosuggest.RenderSuggestionParams): JSX.Element {
+        const className = params.isHighlighted ? "highlighted" : undefined;
+        return <span className={className}>{suggestion.name}</span>;
     }
 
     protected renderSectionTitle(section: LanguageGroup): JSX.Element {
         return <strong>{section.title}</strong>;
     }
+
+    protected renderInputComponent(inputProps: Autosuggest.InputProps): JSX.Element {
+        return (
+            <div>
+                <input {...inputProps} />
+            </div>
+        );
+    }
+
+    protected renderSuggestionsContainer(containerProps: any, children: any, query: string): JSX.Element {
+        return (
+            <div {...containerProps}>
+                <span>{children}</span>
+            </div>
+        );
+    }
     // endregion region Event handlers
     protected onChange(event: React.FormEvent<any>, {newValue, method}: any): void {
         this.setState({value: newValue});
@@ -303,6 +326,12 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
     protected getSectionSuggestions(section: LanguageGroup) {
         return section.languages;
     }
+
+    protected onSuggestionHighlighted(params: Autosuggest.SuggestionHighlightedParams): void {
+        this.setState({
+            highlighted: params.suggestion
+        });
+    }
     // endregion
 }
 
@@ -364,9 +393,9 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
             inputProps={inputProps}/>;
     }
 
-    protected renderSuggestion(suggestion: Person, {value, valueBeforeUpDown}: any): JSX.Element {
+    protected renderSuggestion(suggestion: Person, params: Autosuggest.RenderSuggestionParams): JSX.Element {
         const suggestionText = `${suggestion.first} ${suggestion.last}`;
-        const query = (valueBeforeUpDown || value).trim();
+        const query = params.query.trim();
         const parts = suggestionText
             .split(' ')
             .map((part: string) => {

types/react-autosuggest/tsconfig.json

@@ -22,4 +22,4 @@
         "index.d.ts",
         "react-autosuggest-tests.tsx"
     ]
-}
+}