From a18b03e2f934e2ff0d9b09141b1057f7b56e2414 Mon Sep 17 00:00:00 2001
From: Maxi Cilauro <maxicilauro@gmail.com>
Date: Mon, 20 Jan 2020 17:37:57 -0300
Subject: [PATCH] Update react-tag-autocomplete definitions to 5.12 (#41684)

---
 types/react-tag-autocomplete/index.d.ts       | 22 +++++++-
 .../react-tag-autocomplete-tests.tsx          | 52 ++++++++++---------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/types/react-tag-autocomplete/index.d.ts b/types/react-tag-autocomplete/index.d.ts
index 80a088f8a8..530cf5bc59 100644
--- a/types/react-tag-autocomplete/index.d.ts
+++ b/types/react-tag-autocomplete/index.d.ts
@@ -1,11 +1,12 @@
-// Type definitions for react-tag-autocomplete 5.6
+// Type definitions for react-tag-autocomplete 5.12
 // Project: https://github.com/i-like-robots/react-tags#readme
 // Definitions by: James Lismore <https://github.com/jlismore>
 //                 Rahul Sagore <https://github.com/Rahul-Sagore>
+//                 Max Cilauro <https://github.com/MaxCilauro>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import { Component } from "react";
+import { Component } from 'react';
 
 export default class ReactTags extends Component<ReactTagsProps> {}
 
@@ -35,6 +36,10 @@ export interface ClassNames {
 }
 
 export interface ReactTagsProps {
+    /**
+     * Creates a tag from the current input value when focus on the input is lost. Default: false.
+     */
+    addOnBlur?: boolean;
     /**
      * Disables ability to delete the selected tags when backspace is pressed while focussed on the text input. Default: true.
      */
@@ -52,6 +57,10 @@ export interface ReactTagsProps {
      */
     autoresize?: boolean;
     classNames?: ClassNames;
+    /**
+     * Clear the text input when a tag is deleted. Default: true.
+     */
+    clearInputOnDelete?: boolean;
     /**
      * Array of characters matching keyboard event key values. This is useful when needing to support a specific character irrespective of the keyboard layout.
      * Note, that this list is separate from the one specified by the delimiters option, so you'll need to set the value there to [],
@@ -98,6 +107,10 @@ export interface ReactTagsProps {
      * How many characters are needed for suggestions to appear. Default: 2.
      */
     minQueryLength?: number;
+    /**
+     * Message shown if there are no matching suggestions. Default: null.
+     */
+    noSuggestionsText?: string;
     /**
      * The placeholder string shown for the input. Default: 'Add new tag'.
      */
@@ -106,6 +119,11 @@ export interface ReactTagsProps {
      * An array of suggestions that are used as basis for showing suggestions. Each suggestion must have an id and a name property and an optional disabled property. Default: []
      */
     suggestions?: Tag[];
+    /**
+     * A callback function to filter suggestion items with. The callback receives two arguments; a suggestion and the current query and must return a boolean value.
+     * If no function is supplied the default filter is applied. Default: null.
+     */
+    suggestionsFilter?: (suggestion: Tag, query: string) => boolean;
     /**
      * Provide a custom tag component to render. Default: null.
      */
diff --git a/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx b/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx
index d42f07ff8f..a9e80e8a85 100644
--- a/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx
+++ b/types/react-tag-autocomplete/react-tag-autocomplete-tests.tsx
@@ -1,29 +1,27 @@
-import * as React from "react";
-import ReactTags, { TagComponentProps } from "react-tag-autocomplete";
+import * as React from 'react';
+import ReactTags, { TagComponentProps } from 'react-tag-autocomplete';
 
 class TestRequired extends React.Component {
     render() {
         const onAddTag = (tag: { id: string | number; name: string }) => {};
         const onDeleteTag = (i: number) => {};
-        return (
-            <ReactTags handleAddition={onAddTag} handleDelete={onDeleteTag} />
-        );
+        return <ReactTags handleAddition={onAddTag} handleDelete={onDeleteTag} />;
     }
 }
 
 class TestAll extends React.Component {
     render() {
         const classNamesObj = {
-            root: "react-tags",
-            rootFocused: "is-focused",
-            selected: "react-tags__selected",
-            selectedTag: "react-tags__selected-tag",
-            selectedTagName: "react-tags__selected-tag-name",
-            search: "react-tags__search",
-            searchInput: "react-tags__search-input",
-            suggestions: "react-tags__suggestions",
-            suggestionActive: "is-active",
-            suggestionDisabled: "is-disabled"
+            root: 'react-tags',
+            rootFocused: 'is-focused',
+            selected: 'react-tags__selected',
+            selectedTag: 'react-tags__selected-tag',
+            selectedTagName: 'react-tags__selected-tag-name',
+            search: 'react-tags__search',
+            searchInput: 'react-tags__search-input',
+            suggestions: 'react-tags__suggestions',
+            suggestionActive: 'is-active',
+            suggestionDisabled: 'is-disabled',
         };
         const onAddTag = (tag: { id: string | number; name: string }) => {};
         const onDeleteTag = (i: number) => {};
@@ -33,23 +31,27 @@ class TestAll extends React.Component {
         const onValidate = (tag: { id: string | number; name: string }) => true;
         const inputAttributes = { maxLength: 10 };
         const suggestions = [
-            { id: 3, name: "Bananas" },
-            { id: 4, name: "Mangos" },
-            { id: 5, name: "Lemons" },
-            { id: 6, name: "Apricots", disabled: true }
+            { id: 3, name: 'Bananas' },
+            { id: 4, name: 'Mangos' },
+            { id: 5, name: 'Lemons' },
+            { id: 6, name: 'Apricots', disabled: true },
+        ];
+        const suggestionFilter = (tag: { id: string | number; name: string }, query: string) => true;
+        const tagComponent = (props: TagComponentProps) => <button onClick={props.onDelete}>{props.tag.name}</button>;
+        const tags = [
+            { id: 1, name: 'Apples' },
+            { id: 2, name: 'Pears' },
         ];
-        const tagComponent = (props: TagComponentProps) => (
-            <button onClick={props.onDelete}>{props.tag.name}</button>
-        );
-        const tags = [{ id: 1, name: "Apples" }, { id: 2, name: "Pears" }];
         return (
             <ReactTags
+                addOnBlur={true}
                 allowBackspace={false}
                 allowNew={false}
                 autofocus={false}
                 autoresize={false}
                 classNames={classNamesObj}
-                delimiterChars={[",", " "]}
+                clearInputOnDelete={false}
+                delimiterChars={[',', ' ']}
                 delimiters={[9, 13]}
                 handleAddition={onAddTag}
                 handleBlur={onBlur}
@@ -60,8 +62,10 @@ class TestAll extends React.Component {
                 inputAttributes={inputAttributes}
                 maxSuggestionsLength={10}
                 minQueryLength={5}
+                noSuggestionsText="no results"
                 placeholder=""
                 suggestions={suggestions}
+                suggestionsFilter={suggestionFilter}
                 tagComponent={tagComponent}
                 tags={tags}
             />