@appbaseio/reactivesearch-vue 1.16.0-alpha.56 → 1.16.0-alpha.57

package/dist/es/{DataSearch-a5aaa29e.js → DataSearch-1259f2fd.js}

@@ -1,18 +1,19 @@
 import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getQueryOptions } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled, { css, cx, injectGlobal } from '@appbaseio/vue-emotion';
 import { t as types } from './vueTypes-9326e0be.js';
-import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, m as hasQuerySuggestionsRenderer, c as connect } from './index-5daa8276.js';
-import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
-import { T as Title } from './Title-579f8d6c.js';
-import { F as Flex } from './Flex-aac91505.js';
+import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, m as hasQuerySuggestionsRenderer, c as connect } from './index-3d98f51b.js';
+import { C as ComponentWrapper } from './ComponentWrapper-6ad0997b.js';
+import { T as Title } from './Title-3342664a.js';
+import { F as Flex } from './Flex-1f0795c3.js';
 import hotkeys from 'hotkeys-js';
-import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-4d9e0857.js';
-import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-d1bb4868.js';
-import { C as Container } from './Container-4383c6f0.js';
+import { SEARCH_COMPONENTS_MODES } from '@appbaseio/reactivecore/src/utils/constants';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-4cfae5fd.js';
+import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-7a2a9fac.js';
+import { C as Container } from './Container-ba826e96.js';
 import Highlight from 'vue-highlight-words';
 
 var _templateObject;
@@ -898,6 +899,10 @@ var CustomSvg = {
   }
 };
 
+var _templateObject$6, _templateObject2;
+var TagsContainer = styled('div')(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
+var TagItem = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tcursor: default;\n\tbox-sizing: border-box;\n\tmargin: 0 4px 4px 0;\n\tcolor: #000000d9;\n\tfont-size: 14px;\n\tfont-variant: tabular-nums;\n\tline-height: 1.5715;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tdisplay: inline-block;\n\theight: auto;\n\tpadding: 0 2px 0 7px;\n\tfont-size: 12px;\n\tline-height: 22px;\n\twhite-space: nowrap;\n\tbackground: #fafafa;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 2px;\n\topacity: 1;\n\ttransition: all 0.3s;\n\n\tspan.close-icon {\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\theight: 15px;\n\t\t\tposition: relative;\n\t\t\ttop: 4px;\n\t\t\tfill: #262626;\n\t\t}\n\t}\n"])));
+
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
     setCustomQuery = Actions.setCustomQuery,
@@ -921,10 +926,12 @@ var debounce = helper.debounce,
     normalizeDataField = helper.normalizeDataField;
 var DataSearch = {
   name: 'DataSearch',
+  isTagsMode: false,
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: '',
+      selectedTags: [],
       isOpen: false,
       normalizedSuggestions: [],
       isPending: false
@@ -944,7 +951,13 @@ var DataSearch = {
         enableRecentSearches = _this$$props.enableRecentSearches,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index = _this$$props.index; // TODO: Remove in 2.0
+        index = _this$$props.index,
+        mode = _this$$props.mode;
+
+    if (mode === SEARCH_COMPONENTS_MODES.TAG) {
+      this.$options.isTagsMode = true;
+    } // TODO: Remove in 2.0
+
 
     if (enableQuerySuggestions) {
       console.warn('Warning(ReactiveSearch): The `enableQuerySuggestions` prop has been marked as deprecated, please use the `enablePopularSuggestions` prop instead.');
@@ -967,7 +980,12 @@ var DataSearch = {
       console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
 
-    this.currentValue = this.selectedValue || '';
+    this.currentValue = '';
+
+    if (this.$options.isTagsMode) {
+      this.currentValue = '';
+    }
+
     var shouldFetchInitialSuggestions = this.$props.enableDefaultSuggestions || this.currentValue;
 
     if (shouldFetchInitialSuggestions) {
@@ -1061,7 +1079,7 @@ var DataSearch = {
     debounce: VueTypes.number.def(0),
     defaultValue: types.string,
     excludeFields: types.excludeFields,
-    value: types.value,
+    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), types.value]),
     defaultSuggestions: types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
     enableQuerySuggestions: VueTypes.bool.def(false),
@@ -1110,7 +1128,9 @@ var DataSearch = {
     addonAfter: VueTypes.any,
     expandSuggestionsContainer: VueTypes.bool.def(true),
     index: VueTypes.string,
-    enableDefaultSuggestions: VueTypes.bool.def(true)
+    enableDefaultSuggestions: VueTypes.bool.def(true),
+    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
+    renderSelectedTags: VueTypes.any
   },
   beforeMount: function beforeMount() {
     if (this.$props.highlight) {
@@ -1127,11 +1147,11 @@ var DataSearch = {
     }
 
     if (this.selectedValue) {
-      this.setValue(this.selectedValue, true);
+      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
     } else if (this.$props.value) {
-      this.setValue(this.$props.value, true);
+      this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
     } else if (this.$props.defaultValue) {
-      this.setValue(this.$props.defaultValue, true);
+      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
     }
   },
   mounted: function mounted() {
@@ -1143,19 +1163,19 @@ var DataSearch = {
     },
     dataField: function dataField() {
       this.updateQueryOptions();
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+      this.updateQueryHandler(this.$props.componentId, this.$options.isTagsMode ? this.$data.selectedTags : this.$data.currentValue, this.$props);
     },
     highlightField: function highlightField() {
       this.updateQueryOptions();
     },
     fieldWeights: function fieldWeights() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+      this.updateQueryHandler(this.$props.componentId, this.$options.isTagsMode ? this.$data.selectedTags : this.$data.currentValue, this.$props);
     },
     fuzziness: function fuzziness() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+      this.updateQueryHandler(this.$props.componentId, this.$options.isTagsMode ? this.$data.selectedTags : this.$data.currentValue, this.$props);
     },
     queryFormat: function queryFormat() {
-      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+      this.updateQueryHandler(this.$props.componentId, this.$options.isTagsMode ? this.$data.selectedTags : this.$data.currentValue, this.$props);
     },
     defaultValue: function defaultValue(newVal) {
       this.setValue(newVal, true, this.$props);
@@ -1184,13 +1204,18 @@ var DataSearch = {
       }
     },
     selectedValue: function selectedValue(newVal, oldVal) {
-      if (oldVal !== newVal && this.$data.currentValue !== newVal) {
+      if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
         if (!newVal && this.$data.currentValue) {
           // selected value is cleared, call onValueSelected
           this.onValueSelectedHandler('', causes.CLEAR_VALUE);
         }
 
-        this.setValue(newVal || '', true, this.$props);
+        if (this.$options.isTagsMode) {
+          // handling reset of tags through SelectedFilters or URL
+          this.selectedTags = [];
+        }
+
+        this.setValue(newVal || '', true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -1317,14 +1342,47 @@ var DataSearch = {
       }
 
       var performUpdate = function performUpdate() {
-        // Refresh recent searches when value becomes empty
+        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+          return;
+        } // Refresh recent searches when value becomes empty
+
+
         if (!value && props.enableDefaultSuggestions === false) {
           _this.resetStoreForComponent(props.componentId);
         } else if (!value && _this.currentValue && _this.enableRecentSearches) {
           _this.getRecentSearches();
         }
 
-        _this.currentValue = value;
+        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
+            // check if value already present in selectedTags
+            if (typeof value === 'string' && _this.selectedTags.includes(value)) {
+              _this.isOpen = false;
+              return;
+            }
+
+            _this.selectedTags = [].concat(_this.selectedTags);
+
+            if (typeof value === 'string' && !!value) {
+              _this.selectedTags.push(value);
+            } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
+              var mergedArray = Array.from(new Set([].concat(_this.selectedTags, value)));
+              _this.selectedTags = mergedArray;
+            }
+          } else if (value) {
+            _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+          }
+
+          _this.currentValue = '';
+        } else {
+          _this.currentValue = value;
+        }
+
+        var queryHandlerValue = value;
+
+        if (_this.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
+        }
 
         if (isDefaultValue) {
           if (_this.$props.autosuggest) {
@@ -1332,19 +1390,19 @@ var DataSearch = {
               _this.isOpen = false;
             }
 
-            _this.updateDefaultQueryHandler(value, _this.$props);
+            if (typeof value === 'string') _this.updateDefaultQueryHandler(value, _this.$props);
           } // in case of strict selection only SUGGESTION_SELECT should be able
           // to set the query otherwise the value should reset
 
 
           if (props.strictSelection) {
-            if (cause === causes.SUGGESTION_SELECT || value === '') {
-              _this.updateQueryHandler(props.componentId, value, props);
+            if (cause === causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
+              _this.updateQueryHandler(props.componentId, queryHandlerValue, props);
             } else {
               _this.setValue('', true);
             }
           } else {
-            _this.updateQueryHandler(props.componentId, value, props);
+            _this.updateQueryHandler(props.componentId, queryHandlerValue, props);
           }
         } else {
           // debounce for handling text while typing
@@ -1490,7 +1548,8 @@ var DataSearch = {
 
 
       if (event.key === 'Enter' && highlightedIndex === null) {
-        this.setValue(event.target.value, true);
+        this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined // to handle tags
+        );
         this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
       } // Need to review
 
@@ -1521,11 +1580,23 @@ var DataSearch = {
 
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT);
+      } else if (this.$options.isTagsMode) {
+        var emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
+
+        if (this.selectedTags.includes(suggestion.value)) {
+          // avoid duplicates in tags array
+          this.isOpen = false;
+          return;
+        }
+
+        emitValue.push(suggestion.value);
+        this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, true);
+        this.$emit('change', emitValue, this.triggerQuery);
       } else {
-        this.isPending = false;
         this.$emit('change', suggestion.value, this.triggerQuery);
       }
 
+      this.isPending = false;
       this.onValueSelectedHandler(suggestion.value, causes.SUGGESTION_SELECT, suggestion.source);
     },
     onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
@@ -1631,6 +1702,75 @@ var DataSearch = {
 
       return null;
     },
+    renderTag: function renderTag(item) {
+      var _this2 = this;
+
+      var h = this.$createElement;
+      var innerClass = this.$props.innerClass;
+      return h(TagItem, {
+        "class": getClassName$1(innerClass, 'selected-tag') || ''
+      }, [h("span", [item]), h("span", {
+        "attrs": {
+          "role": "img",
+          "aria-label": "delete-tag"
+        },
+        "class": "close-icon",
+        "on": {
+          "click": function click() {
+            return _this2.clearTag(item);
+          }
+        }
+      }, [h(CancelSvg)])]);
+    },
+    clearAllTags: function clearAllTags() {
+      this.selectedTags = [];
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    clearTag: function clearTag(tagValue) {
+      this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
+        return tag !== tagValue;
+      }));
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    renderTags: function renderTags() {
+      var _this3 = this;
+
+      var h = this.$createElement;
+
+      if (!Array.isArray(this.selectedTags)) {
+        return null;
+      }
+
+      var tagsList = [].concat(this.selectedTags);
+      var shouldRenderClearAllTag = tagsList.length > 1;
+      var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
+      return renderSelectedTags ? renderSelectedTags({
+        values: this.selectedTags,
+        handleClear: this.clearTag,
+        handleClearAll: this.clearAllTags
+      }) : h(TagsContainer, [tagsList.map(function (item) {
+        return _this3.renderTag(item);
+      }), shouldRenderClearAllTag && h(TagItem, {
+        "class": getClassName$1(this.$props.innerClass, 'selected-tag') || ''
+      }, [h("span", ["Clear All"]), h("span", {
+        "attrs": {
+          "role": "img",
+          "aria-label": "delete-tag"
+        },
+        "class": "close-icon",
+        "on": {
+          "click": this.clearAllTags
+        }
+      }, [h(CancelSvg)])])]);
+    },
     renderInputAddonAfter: function renderInputAddonAfter() {
       var h = this.$createElement;
       var addonAfter = this.$scopedSlots.addonAfter;
@@ -1701,7 +1841,7 @@ var DataSearch = {
       (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this2 = this;
+      var _this4 = this;
 
       var _this$$props$focusSho = this.$props.focusShortcuts,
           focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
@@ -1719,7 +1859,7 @@ var DataSearch = {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
 
-        _this2.focusSearchBox(event);
+        _this4.focusSearchBox(event);
       }); // if one of modifier keys are used, they are handled below
 
       hotkeys('*', function (event) {
@@ -1730,7 +1870,7 @@ var DataSearch = {
           var element = modifierKeys[index];
 
           if (hotkeys[element]) {
-            _this2.focusSearchBox(event);
+            _this4.focusSearchBox(event);
 
             break;
           }
@@ -1739,7 +1879,7 @@ var DataSearch = {
     }
   },
   render: function render() {
-    var _this3 = this;
+    var _this5 = this;
 
     var h = arguments[0];
     var _this$$props4 = this.$props,
@@ -1778,14 +1918,14 @@ var DataSearch = {
               setHighlightedIndex = _ref3.setHighlightedIndex;
 
           var renderSuggestionsContainer = function renderSuggestionsContainer() {
-            return h("div", [_this3.hasCustomRenderer && _this3.getComponent({
+            return h("div", [_this5.hasCustomRenderer && _this5.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this3.renderErrorComponent(), !_this3.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": suggestions(_this3.themePreset, theme) + " " + getClassName$1(_this3.$props.innerClass, 'list')
-            }, [_this3.suggestionsList.slice(0, size || 10).map(function (item, index) {
+            }), _this5.renderErrorComponent(), !_this5.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this5.themePreset, theme) + " " + getClassName$1(_this5.$props.innerClass, 'list')
+            }, [_this5.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -1795,15 +1935,15 @@ var DataSearch = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, index)
+                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, index)
                 }
               }, [h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this3.currentValue,
+                  "currentValue": _this5.currentValue,
                   "suggestion": item
                 }
               })]);
-            }), _this3.defaultSearchSuggestions.map(function (sugg, index) {
+            }), _this5.defaultSearchSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -1811,9 +1951,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1822,28 +1962,28 @@ var DataSearch = {
                 }
               }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this3.$props.innerClass, 'recent-search-icon') || null,
+                  "className": getClassName$1(_this5.$props.innerClass, 'recent-search-icon') || null,
                   "icon": recentSearchesIcon,
                   "type": "recent-search-icon"
                 }
               }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this3.currentValue,
+                  "currentValue": _this5.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            }), hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
+            }), hasQuerySuggestionsRenderer(_this5) ? _this5.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }, true) : _this3.topSuggestions.map(function (sugg, index) {
+            }, true) : _this5.topSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -1851,9 +1991,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1862,61 +2002,61 @@ var DataSearch = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this3.currentValue,
+                  "currentValue": _this5.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            })]) : _this3.renderNoSuggestions(_this3.suggestionsList)]);
+            })]) : _this5.renderNoSuggestions(_this5.suggestionsList)]);
           };
 
           return h("div", {
             "class": suggestionsContainer
-          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+          }, [h(InputGroup, [_this5.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
-              "id": _this3.$props.componentId + "-input",
-              "showIcon": _this3.$props.showIcon,
-              "showClear": _this3.$props.showClear,
-              "iconPosition": _this3.$props.iconPosition,
-              "placeholder": _this3.$props.placeholder,
-              "autoFocus": _this3.$props.autoFocus,
-              "themePreset": _this3.themePreset,
+              "id": _this5.$props.componentId + "-input",
+              "showIcon": _this5.$props.showIcon,
+              "showClear": _this5.$props.showClear,
+              "iconPosition": _this5.$props.iconPosition,
+              "placeholder": _this5.$props.placeholder,
+              "autoFocus": _this5.$props.autoFocus,
+              "themePreset": _this5.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this3.$props.innerRef,
-            "class": getClassName$1(_this3.$props.innerClass, 'input'),
+            "ref": _this5.$props.innerRef,
+            "class": getClassName$1(_this5.$props.innerClass, 'input'),
             "on": _extends({}, getInputEvents({
-              onInput: _this3.onInputChange,
+              onInput: _this5.onInputChange,
               onBlur: function onBlur(e) {
-                _this3.$emit('blur', e, _this3.triggerQuery);
+                _this5.$emit('blur', e, _this5.triggerQuery);
               },
-              onFocus: _this3.handleFocus,
+              onFocus: _this5.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this3.$emit('keyPress', e, _this3.triggerQuery);
+                _this5.$emit('keyPress', e, _this5.triggerQuery);
 
-                _this3.$emit('key-press', e, _this3.triggerQuery);
+                _this5.$emit('key-press', e, _this5.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this3.handleKeyDown(e, highlightedIndex);
+                return _this5.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this3.$emit('keyUp', e, _this3.triggerQuery);
+                _this5.$emit('keyUp', e, _this5.triggerQuery);
 
-                _this3.$emit('key-up', e, _this3.triggerQuery);
+                _this5.$emit('key-up', e, _this5.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this3.$data.currentValue === null ? '' : _this3.$data.currentValue
+              value: _this5.$data.currentValue === null ? '' : _this5.$data.currentValue
             }))
-          }), _this3.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this3.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer()]);
+          }), _this5.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this5.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this5.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1932,26 +2072,26 @@ var DataSearch = {
       },
       "on": _extends({}, {
         blur: function blur(e) {
-          _this3.$emit('blur', e, _this3.triggerQuery);
+          _this5.$emit('blur', e, _this5.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this3.$emit('keyPress', e, _this3.triggerQuery);
+          _this5.$emit('keyPress', e, _this5.triggerQuery);
 
-          _this3.$emit('key-press', e, _this3.triggerQuery);
+          _this5.$emit('key-press', e, _this5.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this3.$emit('focus', e, _this3.triggerQuery);
+          _this5.$emit('focus', e, _this5.triggerQuery);
         },
         keydown: function keydown(e) {
-          _this3.$emit('keyDown', e, _this3.triggerQuery);
+          _this5.$emit('keyDown', e, _this5.triggerQuery);
 
-          _this3.$emit('key-down', e, _this3.triggerQuery);
+          _this5.$emit('key-down', e, _this5.triggerQuery);
         },
         keyup: function keyup(e) {
-          _this3.$emit('keyUp', e, _this3.triggerQuery);
+          _this5.$emit('keyUp', e, _this5.triggerQuery);
 
-          _this3.$emit('key-up', e, _this3.triggerQuery);
+          _this5.$emit('key-up', e, _this5.triggerQuery);
         }
       }),
       "domProps": _extends({}, {
@@ -2165,4 +2305,4 @@ DataSearch.install = function (Vue) {
 
 DataSearch.componentType = componentTypes.dataSearch;
 
-export { CustomSvg as C, DataSearch as D, InputAddon as I, Mic as M, SearchSvg as S, SuggestionWrapper as a, InputGroup as b, SuggestionItem as c };
+export { CustomSvg as C, DataSearch as D, InputAddon as I, Mic as M, SearchSvg as S, TagItem as T, SuggestionWrapper as a, TagsContainer as b, InputGroup as c, SuggestionItem as d };

package/dist/es/DataSearch.js

@@ -1,5 +1,5 @@
 import '@appbaseio/reactivecore';
-import './_rollupPluginBabelHelpers-ecf6c03c.js';
+import './_rollupPluginBabelHelpers-76660dab.js';
 import 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/reactivecore/lib/utils/helper';
@@ -9,14 +9,15 @@ import 'polished';
 import './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import './index-5daa8276.js';
-import './ComponentWrapper-bbb717bc.js';
-import './Title-579f8d6c.js';
-import './Flex-aac91505.js';
+import './index-3d98f51b.js';
+import './ComponentWrapper-6ad0997b.js';
+import './Title-3342664a.js';
+import './Flex-1f0795c3.js';
 import 'hotkeys-js';
-export { D as default } from './DataSearch-a5aaa29e.js';
-import './CancelSvg-4d9e0857.js';
-import './Input-d1bb4868.js';
+import '@appbaseio/reactivecore/src/utils/constants';
+export { D as default } from './DataSearch-1259f2fd.js';
+import './CancelSvg-4cfae5fd.js';
+import './Input-7a2a9fac.js';
 import 'compute-scroll-into-view';
-import './Container-4383c6f0.js';
+import './Container-ba826e96.js';
 import 'vue-highlight-words';

package/dist/es/{DropDown-7639f223.js → DropDown-2ddad7ae.js}

@@ -1,13 +1,13 @@
 import { helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
 import VueTypes from 'vue-types';
 import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import { t as types } from './vueTypes-9326e0be.js';
-import { a as isFunction } from './index-5daa8276.js';
+import { a as isFunction } from './index-3d98f51b.js';
 import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-4d9e0857.js';
-import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-d1bb4868.js';
+import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-4cfae5fd.js';
+import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-7a2a9fac.js';
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;