Types 2.0 (#13261)

* updating typing of the latest 7.0 react-autosuggest

* updating typing of react-autosuggest 7.0

* update typings for react-autosuggest 7.0

react-autosuggest/index.d.ts

@@ -1,12 +1,11 @@
-// Type definitions for react-autosuggest v3.7.3
+// Type definitions for react-autosuggest 7.0
 // Project: http://react-autosuggest.js.org/
-// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>
+// Definitions by: Nicolas Schmitt <https://github.com/nicolas-schmitt>, Philip Ottesen <https://github.com/pjo256>, Robert Essig <https://github.com/robessog>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-/// <reference types="react"/>
+import * as React from 'react';
 
-declare namespace ReactAutosuggest {
-  interface SuggestionUpdateRequest {
+  interface SuggestionsFetchRequest {
     value: string;
     reason: string;
   }
@@ -31,16 +30,13 @@ declare namespace ReactAutosuggest {
     onBlur?: (event: React.FormEvent<any>, params?: BlurEvent) => void;
   }
 
-  interface ExplicitSuggestionSelectedEventData<TSuggestion> {
+ export interface SuggestionSelectedEventData<TSuggestion> {
     method: 'click' | 'enter';
     sectionIndex: number | null;
     suggestion: TSuggestion;
     suggestionValue: string;
   }
 
-  interface SuggestionSelectedEventData extends ExplicitSuggestionSelectedEventData<any> {
-  }
-
   interface Theme {
     container?: string;
     containerOpen?: string;
@@ -55,25 +51,23 @@ declare namespace ReactAutosuggest {
 
   interface AutosuggestProps extends React.Props<Autosuggest> {
     suggestions: any[];
-    onSuggestionsUpdateRequested?: (request: SuggestionUpdateRequest) => void;
-    getSuggestionValue: (suggestion: any) => string;
+    onSuggestionsFetchRequested: (request: SuggestionsFetchRequest) => void;
+    onSuggestionsClearRequested?: () => void;
+    getSuggestionValue: (suggestion: any) => any;
     renderSuggestion: (suggestion: any, inputValues: InputValues) => JSX.Element;
     inputProps: InputProps;
-    alwaysRenderSuggestions?: boolean;
+    onSuggestionSelected?: (event: React.FormEvent<any>, data: SuggestionSelectedEventData<any>) => void;
     shouldRenderSuggestions?: (value: string) => boolean;
+    alwaysRenderSuggestions?: boolean;
+    focusFirstSuggestion?: boolean;
+    focusInputOnSuggestionClick?: boolean;
     multiSection?: boolean;
     renderSectionTitle?: (section: any, inputValues: InputValues) => JSX.Element;
     getSectionSuggestions?: (section: any) => any[];
-    onSuggestionSelected?: (event: React.FormEvent<any>, data: SuggestionSelectedEventData | ExplicitSuggestionSelectedEventData<any>) => void;
-    focusInputOnSuggestionClick?: boolean;
+    renderInputComponent?: () => JSX.Element;
+    renderSuggestionsContainer?: (children: any) => JSX.Element;
     theme?: Theme;
     id?: string;
   }
 
-  class Autosuggest extends React.Component<AutosuggestProps, any> {}
-}
-
-declare module 'react-autosuggest' {
-  import Autosuggest = ReactAutosuggest.Autosuggest;
-  export = Autosuggest;
-}
+  export class Autosuggest extends React.Component<any, any> {}

react-autosuggest/react-autosuggest-tests.tsx

@@ -1,7 +1,7 @@
 //region Imports
 import React = require('react');
 import ReactDOM = require('react-dom');
-import Autosuggest = require('react-autosuggest');
+import { Autosuggest, SuggestionSelectedEventData } from 'react-autosuggest';
 //endregion
 
 interface Language {
@@ -62,7 +62,7 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
         }
 
         return <Autosuggest suggestions={suggestions}
-                            onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested.bind(this)}
+                            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
                             getSuggestionValue={this.getSuggestionValue}
                             renderSuggestion={this.renderSuggestion}
                             onSuggestionSelected={this.onSuggestionsSelected}
@@ -72,7 +72,7 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
                             />;
     }
 
-    protected onSuggestionsSelected(event: React.FormEvent<any>, data: ReactAutosuggest.ExplicitSuggestionSelectedEventData<Language>): void {
+    protected onSuggestionsSelected(event: React.FormEvent<any>, data: SuggestionSelectedEventData<Language>): void {
         alert(`Selected language is ${data.suggestion.name} (${data.suggestion.year}).`);
     }
 
@@ -88,7 +88,7 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
         });
     }
 
-    protected onSuggestionsUpdateRequested({ value }: any): void {
+    protected onSuggestionsFetchRequested({ value }: any): void {
         this.setState({
             suggestions: this.getSuggestions(value)
         });
@@ -188,7 +188,7 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
 
         return <Autosuggest multiSection={true}
                             suggestions={suggestions}
-                            onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested.bind(this)}
+                            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
                             onSuggestionSelected={this.onSuggestionSelected}
                             getSuggestionValue={this.getSuggestionValue}
                             renderSuggestion={this.renderSuggestion}
@@ -197,7 +197,7 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
                             inputProps={inputProps} />;
     }
 
-    protected onSuggestionSelected(event: React.FormEvent<any>, data: ReactAutosuggest.SuggestionSelectedEventData): void {
+    protected onSuggestionSelected(event: React.FormEvent<any>, data: SuggestionSelectedEventData<Language>): void {
         const language = data.suggestion as Language;
 
         alert(`Selected language is ${language.name} (${language.year}).`);
@@ -219,7 +219,7 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
         });
     }
 
-    protected onSuggestionsUpdateRequested({ value }: any): void {
+    protected onSuggestionsFetchRequested({ value }: any): void {
         this.setState({
             suggestions: this.getSuggestions(value)
         });
@@ -295,7 +295,7 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
         };
 
         return <Autosuggest suggestions={suggestions}
-                            onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested}
+                            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                             getSuggestionValue={this.getSuggestionValue}
                             renderSuggestion={this.renderSuggestion}
                             inputProps={inputProps} />;
@@ -332,7 +332,7 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
         });
     }
 
-    protected onSuggestionsUpdateRequested({ value }: any): void {
+    protected onSuggestionsFetchRequested({ value }: any): void {
         this.setState({
             suggestions: this.getSuggestions(value)
         });

react-autosuggest/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../tslint.json"
+}