fix: added typings for react-autosuggest (#200)

Author: tmkn

package.json

@@ -213,5 +213,8 @@
     "type": "opencollective",
     "url": "https://opencollective.com/verdaccio",
     "logo": "https://opencollective.com/verdaccio/logo.txt"
+  },
+  "dependencies": {
+    "@types/react-autosuggest": "9.3.11"
   }
 }

src/components/AutoComplete/AutoComplete.tsx

@@ -1,6 +1,6 @@
 import React, { KeyboardEvent } from 'react';
 import { css } from 'emotion';
-import Autosuggest from 'react-autosuggest';
+import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -20,12 +20,12 @@ interface Props {
   placeholder?: string;
   startAdornment?: JSX.Element;
   disableUnderline?: boolean;
-  onChange?: (event: KeyboardEvent<HTMLInputElement>, { newValue, method }: { newValue: string; method: string }) => void;
-  onSuggestionsFetch?: ({ value: string }) => Promise<void>;
+  onChange: (event: React.FormEvent<HTMLInputElement>, params: ChangeEvent) => void;
+  onSuggestionsFetch: ({ value: string }) => Promise<void>;
   onCleanSuggestions?: () => void;
-  onClick?: (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: string[]; method: string }) => void;
+  onClick?: (event: React.FormEvent<HTMLInputElement>, data: SuggestionSelectedEventData<unknown>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
-  onBlur?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FormEvent<HTMLInputElement>) => void;
 }
 
 /* eslint-disable react/jsx-sort-props  */
@@ -113,7 +113,7 @@ const AutoComplete = ({
     onSuggestionsFetchRequested: onSuggestionsFetch,
     onSuggestionsClearRequested: onCleanSuggestions,
   };
-  const inputProps = {
+  const inputProps: InputProps<unknown> = {
     value,
     onChange,
     placeholder,

src/components/Search/Search.tsx

@@ -1,5 +1,6 @@
 import React, { KeyboardEvent, Component, ReactElement } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
 import { css } from 'emotion';
 import { default as IconSearch } from '@material-ui/icons/Search';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -19,10 +20,10 @@ export interface State {
 
 export type cancelAllSearchRequests = () => void;
 export type handlePackagesClearRequested = () => void;
-export type handleSearch = (event: KeyboardEvent<HTMLInputElement>, { newValue, method }: { newValue: string; method: string }) => void;
+export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
 export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
 export type handleFetchPackages = ({ value: string }) => Promise<void>;
-export type onBlur = (event: KeyboardEvent<HTMLInputElement>) => void;
+export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;
 
 const CONSTANTS = {
   API_DELAY: 300,
@@ -117,8 +118,8 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
    * When an user select any package by clicking or pressing return key.
    */
   private handleClickSearch = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    { suggestionValue, method }: { suggestionValue: string[]; method: string }
+    event: React.FormEvent<HTMLInputElement>,
+    { suggestionValue, method }: SuggestionSelectedEventData<unknown>
   ): void | undefined => {
     const { history } = this.props;
     // stops event bubbling

yarn.lock

@@ -1699,6 +1699,13 @@
   resolved "https://registry.verdaccio.org/@types%2fq/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react-autosuggest@9.3.11":
+  version "9.3.11"
+  resolved "https://registry.yarnpkg.com/@types/react-autosuggest/-/react-autosuggest-9.3.11.tgz#2b554a4ac350da5bcd50ad368972f2e80e879232"
+  integrity sha512-OY0N0BZ2MiD4W3oTquRvpqYucExiLNgXgu4JkXZ2gKs4lONiS7B+fSotiQnjLdGIy+4sW3tzTvfbQfPgTZGInA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@*":
   version "16.9.1"
   resolved "https://registry.verdaccio.org/@types%2freact-dom/-/react-dom-16.9.1.tgz#79206237cba9532a9f870b1cd5428bef6b66378c"