@appbaseio/reactivesearch-vue 1.29.0 → 1.30.0

package/dist/cjs/{DataSearch-eec21890.js → DataSearch-e550096e.js}

@@ -4,21 +4,21 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var vueTypes = require('./vueTypes-57d01f18.js');
-var index = require('./index-4509aa45.js');
-var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
-var Title = require('./Title-584a8cc8.js');
-var Flex = require('./Flex-f146cdad.js');
+var index = require('./index-2cd3650b.js');
+var ComponentWrapper = require('./ComponentWrapper-5cb08414.js');
+var Title = require('./Title-26661936.js');
+var Flex = require('./Flex-63774e4d.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var CancelSvg = require('./CancelSvg-4aa35935.js');
-var Input = require('./Input-0d7b25ad.js');
-var Container = require('./Container-526efa6a.js');
+var CancelSvg = require('./CancelSvg-c48c1085.js');
+var Input = require('./Input-43868594.js');
+var Container = require('./Container-cfd69a34.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 
 var _templateObject;
@@ -904,6 +904,10 @@ var CustomSvg = {
   }
 };
 
+var _templateObject$6, _templateObject2;
+var TagsContainer = styled__default('div')(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
+var TagItem = styled__default('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._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 = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
     setCustomQuery = configureStore.Actions.setCustomQuery,
@@ -911,7 +915,8 @@ var updateQuery = configureStore.Actions.updateQuery,
     setCustomHighlightOptions = configureStore.Actions.setCustomHighlightOptions,
     recordSuggestionClick = configureStore.Actions.recordSuggestionClick,
     loadPopularSuggestions = configureStore.Actions.loadPopularSuggestions,
-    getRecentSearches = configureStore.Actions.getRecentSearches;
+    getRecentSearches = configureStore.Actions.getRecentSearches,
+    resetStoreForComponent = configureStore.Actions.resetStoreForComponent;
 var debounce = configureStore.helper.debounce,
     checkValueChange = configureStore.helper.checkValueChange,
     getClassName$1 = configureStore.helper.getClassName,
@@ -926,10 +931,12 @@ var debounce = configureStore.helper.debounce,
     normalizeDataField = configureStore.helper.normalizeDataField;
 var DataSearch = {
   name: 'DataSearch',
+  isTagsMode: false,
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: '',
+      selectedTags: [],
       isOpen: false,
       normalizedSuggestions: [],
       isPending: false
@@ -949,7 +956,13 @@ var DataSearch = {
         enableRecentSearches = _this$$props.enableRecentSearches,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index$1 = _this$$props.index; // TODO: Remove in 2.0
+        index$1 = _this$$props.index,
+        mode = _this$$props.mode;
+
+    if (mode === constants.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.');
@@ -972,7 +985,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) {
@@ -1066,7 +1084,7 @@ var DataSearch = {
     debounce: VueTypes.number.def(0),
     defaultValue: vueTypes.types.string,
     excludeFields: vueTypes.types.excludeFields,
-    value: vueTypes.types.value,
+    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
     defaultSuggestions: vueTypes.types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
     enableQuerySuggestions: VueTypes.bool.def(false),
@@ -1115,7 +1133,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) {
@@ -1132,11 +1152,11 @@ var DataSearch = {
     }
 
     if (this.selectedValue) {
-      this.setValue(this.selectedValue, true);
+      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? configureStore.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 ? configureStore.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 ? configureStore.causes.SUGGESTION_SELECT : undefined);
     }
   },
   mounted: function mounted() {
@@ -1148,19 +1168,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);
@@ -1189,13 +1209,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('', configureStore.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 ? configureStore.causes.SUGGESTION_SELECT : undefined);
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -1322,12 +1347,47 @@ var DataSearch = {
       }
 
       var performUpdate = function performUpdate() {
-        // Refresh recent searches when value becomes empty
-        if (!value && _this.currentValue && _this.enableRecentSearches) {
+        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 === configureStore.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 === configureStore.causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
+        }
 
         if (isDefaultValue) {
           if (_this.$props.autosuggest) {
@@ -1335,19 +1395,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 === configureStore.causes.SUGGESTION_SELECT || value === '') {
-              _this.updateQueryHandler(props.componentId, value, props);
+            if (cause === configureStore.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
@@ -1374,6 +1434,12 @@ var DataSearch = {
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
+      if (!value && props.enableDefaultSuggestions === false) {
+        // clear Component data from store
+        this.resetStoreForComponent(props.componentId);
+        return;
+      }
+
       var defaultQueryOptions;
       var query = DataSearch.defaultQuery(value, props);
 
@@ -1487,7 +1553,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 ? configureStore.causes.SUGGESTION_SELECT : undefined // to handle tags
+        );
         this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
       } // Need to review
 
@@ -1518,11 +1585,23 @@ var DataSearch = {
 
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, configureStore.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, configureStore.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, configureStore.causes.SUGGESTION_SELECT, suggestion.source);
     },
     onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
@@ -1628,6 +1707,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.CancelSvg)])]);
+    },
+    clearAllTags: function clearAllTags() {
+      this.selectedTags = [];
+      this.setValue('', true, this.$props, configureStore.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, configureStore.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.CancelSvg)])])]);
+    },
     renderInputAddonAfter: function renderInputAddonAfter() {
       var h = this.$createElement;
       var addonAfter = this.$scopedSlots.addonAfter;
@@ -1698,7 +1846,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;
@@ -1716,7 +1864,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) {
@@ -1727,7 +1875,7 @@ var DataSearch = {
           var element = modifierKeys[index$1];
 
           if (hotkeys[element]) {
-            _this2.focusSearchBox(event);
+            _this4.focusSearchBox(event);
 
             break;
           }
@@ -1736,7 +1884,7 @@ var DataSearch = {
     }
   },
   render: function render() {
-    var _this3 = this;
+    var _this5 = this;
 
     var h = arguments[0];
     var _this$$props4 = this.$props,
@@ -1775,14 +1923,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": Input.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": Input.suggestions(_this5.themePreset, theme) + " " + getClassName$1(_this5.$props.innerClass, 'list')
+            }, [_this5.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
@@ -1792,15 +1940,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": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1808,9 +1956,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._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", {
@@ -1819,28 +1967,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
                 }
               })]);
-            }), index.hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
+            }), index.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": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1848,9 +1996,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._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", {
@@ -1859,61 +2007,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": Input.suggestionsContainer
-          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+          }, [h(InputGroup, [_this5.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.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": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._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", {
@@ -1929,26 +2077,26 @@ var DataSearch = {
       },
       "on": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._extends({}, {
@@ -2147,7 +2295,8 @@ var mapDispatchToProps = {
   setCustomHighlightOptions: setCustomHighlightOptions,
   recordSuggestionClick: recordSuggestionClick,
   loadPopularSuggestions: loadPopularSuggestions,
-  getRecentSearches: getRecentSearches
+  getRecentSearches: getRecentSearches,
+  resetStoreForComponent: resetStoreForComponent
 };
 var DSConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(DataSearch), {
   componentType: constants.componentTypes.dataSearch,
@@ -2169,3 +2318,5 @@ exports.Mic = Mic;
 exports.SearchSvg = SearchSvg;
 exports.SuggestionItem = SuggestionItem;
 exports.SuggestionWrapper = SuggestionWrapper;
+exports.TagItem = TagItem;
+exports.TagsContainer = TagsContainer;

package/dist/cjs/DataSearch.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('@appbaseio/reactivecore');
-require('./_rollupPluginBabelHelpers-f127c8b7.js');
+require('./_rollupPluginBabelHelpers-91d4b5a6.js');
 require('vue-types');
 require('@appbaseio/reactivecore/lib/utils/constants');
 require('@appbaseio/reactivecore/lib/utils/helper');
@@ -13,16 +13,16 @@ require('polished');
 require('./vueTypes-57d01f18.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-require('./index-4509aa45.js');
-require('./ComponentWrapper-10bad289.js');
-require('./Title-584a8cc8.js');
-require('./Flex-f146cdad.js');
+require('./index-2cd3650b.js');
+require('./ComponentWrapper-5cb08414.js');
+require('./Title-26661936.js');
+require('./Flex-63774e4d.js');
 require('hotkeys-js');
-var DataSearch = require('./DataSearch-eec21890.js');
-require('./CancelSvg-4aa35935.js');
-require('./Input-0d7b25ad.js');
+var DataSearch = require('./DataSearch-e550096e.js');
+require('./CancelSvg-c48c1085.js');
+require('./Input-43868594.js');
 require('compute-scroll-into-view');
-require('./Container-526efa6a.js');
+require('./Container-cfd69a34.js');
 require('vue-highlight-words');