@appbaseio/reactivesearch-vue 1.29.0-preview.1 → 1.31.0

package/dist/es/initReactivesearch.js

@@ -1,6 +1,6 @@
-import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-51ce1182.js';
 import { validProps, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import { pushToAndClause, buildQuery, extractQueryFromCustomQuery, getOptionsForCustomQuery } from '@appbaseio/reactivecore/lib/utils/helper';
+import { transformRequestUsingEndpoint, pushToAndClause, buildQuery, extractQueryFromCustomQuery, getOptionsForCustomQuery } from '@appbaseio/reactivecore/lib/utils/helper';
 import { isSearchComponent, getRSQuery, extractPropsFromState, getDependentQueries } from '@appbaseio/reactivecore/lib/utils/transform';
 import Appbase from 'appbase-js';
 import valueReducer from '@appbaseio/reactivecore/lib/reducers/valueReducer';
@@ -94,20 +94,51 @@ function initReactivesearch(componentCollection, searchState, settings) {
       'X-Search-Client': X_SEARCH_CLIENT
     }, enableTelemetry === false && {
       'X-Enable-Telemetry': false
-    }), settings.headers);
+    }), settings.headers, settings.enableAppbase && settings.endpoint && settings.endpoint.headers ? settings.endpoint.headers : {});
+
+    var url = settings.url && settings.url.trim() !== '' ? settings.url : 'https://scalr.api.appbase.io';
+    var transformRequest = settings.transformRequest || null;
+
+    if (settings.enableAppbase && settings.endpoint) {
+      if (settings.endpoint.url) {
+        // eslint-disable-next-line prefer-destructuring
+        url = settings.endpoint.url;
+      }
+
+      transformRequest = function transformRequest(request) {
+        var modifiedRequest = transformRequestUsingEndpoint(request, settings.endpoint);
+
+        if (settings.transformRequest) {
+          return settings.transformRequest(modifiedRequest);
+        }
+
+        return modifiedRequest;
+      };
+    }
 
     var config = {
-      url: settings.url && settings.url.trim() !== '' ? settings.url : 'https://scalr.api.appbase.io',
+      url: url,
       app: settings.app,
       credentials: credentials,
-      transformRequest: settings.transformRequest || null,
+      transformRequest: transformRequest,
       type: settings.type ? settings.type : '*',
       transformResponse: settings.transformResponse || null,
       graphQLUrl: settings.graphQLUrl || '',
       headers: headers,
-      analyticsConfig: settings.appbaseConfig || null
+      analyticsConfig: settings.appbaseConfig || null,
+      enableAppbase: settings.enableAppbase,
+      endpoint: settings.endpoint
     };
     var appbaseRef = Appbase(config);
+
+    if (config.transformRequest) {
+      appbaseRef.transformRequest = config.transformRequest;
+    }
+
+    if (config.transformResponse) {
+      appbaseRef.transformResponse = config.transformResponse;
+    }
+
     var components = [];
     var selectedValues = {};
     var internalValues = {};
@@ -331,7 +362,7 @@ function initReactivesearch(componentCollection, searchState, settings) {
         queryLog = _extends({}, queryLog, (_extends2 = {}, _extends2[component.componentId] = currentQuery, _extends2));
 
         if (settings.enableAppbase) {
-          var query = getRSQuery(component.componentId, extractPropsFromState(state, component.componentId, queryOptions && queryOptions[component.componentId] ? {
+          var query = getRSQuery(component.componentId, extractPropsFromState(state, component.componentId, queryOptions && Object.keys(queryOptions[component.componentId]).length ? {
             from: queryOptions[component.componentId].from
           } : null));
 
@@ -436,9 +467,10 @@ function initReactivesearch(componentCollection, searchState, settings) {
               }
 
               timestamp[component] = res._timestamp;
+              var hitsObj = response.hits ? response.hits : response[component].hits;
               hits = _extends({}, hits, (_extends7 = {}, _extends7[component] = {
-                hits: response.hits.hits,
-                total: typeof response.hits.total === 'object' ? response.hits.total.value : response.hits.total,
+                hits: hitsObj.hits,
+                total: typeof hitsObj.total === 'object' ? hitsObj.total.value : hitsObj.total,
                 time: response.took
               }, _extends7));
               responseResolve();

package/dist/es/{install-bd448c02.js → install-5d9cb7ed.js}

@@ -1,21 +1,21 @@
 import { Actions, helper, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-51ce1182.js';
 import VueTypes from 'vue-types';
-import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled from '@appbaseio/vue-emotion';
-import { B as Button } from './Button-33de88e6.js';
-import { t as types } from './vueTypes-687b2304.js';
+import { B as Button } from './Button-e18ad90f.js';
+import { t as types } from './vueTypes-c0d8b875.js';
 import ReactiveList from './ReactiveList.js';
-import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-78920565.js';
-import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
-import { T as Title } from './Title-3522ff56.js';
+import { n as decodeHtml, h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-4715798c.js';
+import { C as ComponentWrapper } from './ComponentWrapper-ca0354ea.js';
+import { T as Title } from './Title-35edd732.js';
 import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
-import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, b as InputGroup, C as CustomSvg, c as SuggestionItem, D as DataSearch } from './DataSearch-42f547cd.js';
-import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-c2c03a35.js';
-import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-e339e63a.js';
-import { C as Container } from './Container-18b03fde.js';
+import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, T as TagItem, b as TagsContainer, c as InputGroup, C as CustomSvg, d as SuggestionItem, D as DataSearch } from './DataSearch-da9347f7.js';
+import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-e3b33cdd.js';
+import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-c9d757bc.js';
+import { C as Container } from './Container-421450dc.js';
 import SingleList from './SingleList.js';
 import MultiList from './MultiList.js';
 import SingleDropdownList from './SingleDropdownList.js';
@@ -74,10 +74,12 @@ var _debounce = helper.debounce,
     normalizeDataField = helper.normalizeDataField;
 var SearchBox = {
   name: 'SearchBox',
+  isTagsMode: false,
   data: function data() {
     var props = this.$props;
     this.__state = {
       currentValue: '',
+      selectedTags: [],
       isOpen: false,
       normalizedSuggestions: []
     };
@@ -93,7 +95,16 @@ var SearchBox = {
     var _this$$props = this.$props,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
-        index = _this$$props.index;
+        index = _this$$props.index,
+        mode = _this$$props.mode;
+
+    if (mode === SEARCH_COMPONENTS_MODES.TAG) {
+      this.$options.isTagsMode = true;
+    }
+
+    if (this.$options.isTagsMode) {
+      console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
+    }
 
     if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
       console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
@@ -107,9 +118,13 @@ var SearchBox = {
       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.value || this.defaultValue || '';
-    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
-    this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
+    this.currentValue = decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
+
+    if (this.$options.isTagsMode) {
+      this.currentValue = '';
+    }
+
+    this.handleTextChange = _debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
 
     this.triggerCustomQuery(this.currentValue, this.selectedCategory);
     this.triggerDefaultQuery(this.currentValue);
@@ -145,7 +160,7 @@ var SearchBox = {
     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),
@@ -198,7 +213,20 @@ var SearchBox = {
     onData: types.func,
     renderItem: types.func,
     enterButton: VueTypes.bool.def(false),
-    renderEnterButton: VueTypes.any
+    renderEnterButton: VueTypes.any,
+    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
+    renderSelectedTags: VueTypes.any,
+    searchboxId: VueTypes.string,
+    endpoint: types.endpointConfig
+  },
+  beforeMount: function beforeMount() {
+    if (this.selectedValue) {
+      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.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.defaultValue) {
+      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    }
   },
   mounted: function mounted() {
     this.listenForFocusShortcuts();
@@ -248,15 +276,25 @@ var SearchBox = {
       this.normalizedSuggestions = suggestionsList;
     },
     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);
+        } // if (this.$props.value === undefined) {
+
+
+        if (this.$options.isTagsMode) {
+          // handling reset of tags through SelectedFilters or URL
+          this.selectedTags = [];
         }
 
-        if (this.$props.value === undefined) {
-          this.setValue(newVal || '', true, this.$props);
+        var cause = !newVal ? causes.CLEAR_VALUE : undefined;
+
+        if (this.$options.isTagsMode) {
+          cause = causes.SUGGESTION_SELECT;
         }
+
+        this.setValue(newVal || '', true, this.$props, cause); // }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -397,7 +435,40 @@ var SearchBox = {
       }
 
       var performUpdate = function performUpdate() {
-        _this.currentValue = value;
+        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+          return;
+        }
+
+        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 = decodeHtml(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) {
@@ -405,19 +476,19 @@ var SearchBox = {
               _this.isOpen = false;
             }
 
-            _this.triggerDefaultQuery(value);
+            if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
           } // 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.triggerCustomQuery(value, categoryValue);
+            if (cause === causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
+              _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
             } else {
               _this.setValue('', true);
             }
-          } else if (props.value === undefined) {
-            _this.triggerCustomQuery(value, categoryValue);
+          } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
+            _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
           // debounce for handling text while typing
@@ -468,6 +539,11 @@ var SearchBox = {
           showFilter = _this$$props2.showFilter,
           URLParams = _this$$props2.URLParams;
       var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
+
+      if (this.$options.isTagsMode) {
+        value = paramValue;
+      }
+
       var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
       var query = defaultQueryTobeSet;
 
@@ -561,7 +637,8 @@ var SearchBox = {
         if (this.$props.autosuggest === false) {
           this.enterButtonOnClick();
         } else if (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
@@ -606,13 +683,29 @@ var SearchBox = {
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
       } else {
-        this.$emit('change', suggestion.value, function (_ref4) {
+        var emitValue = suggestion.value;
+
+        if (this.$options.isTagsMode) {
+          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, false, suggestion._category);
+        this.$emit('change', emitValue, function (_ref4) {
           var isOpen = _ref4.isOpen;
-          return _this3.triggerQuery({
+          return _this3.triggerQuery(_extends({
             isOpen: isOpen,
-            value: suggestion.value,
+            value: emitValue
+          }, !_this3.$options.isTagsMode && {
             categoryValue: suggestion._category
-          });
+          }));
         });
       }
 
@@ -758,7 +851,7 @@ var SearchBox = {
           }
 
           return h(Button, {
-            "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
+            "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
             "attrs": {
               "primary": true
             },
@@ -874,7 +967,7 @@ var SearchBox = {
     onAutofillClick: function onAutofillClick(suggestion) {
       var value = suggestion.value;
       this.isOpen = true;
-      this.currentValue = value;
+      this.currentValue = decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
@@ -895,10 +988,79 @@ var SearchBox = {
           "click": handleAutoFillClick
         }
       });
+    },
+    renderTag: function renderTag(item) {
+      var _this7 = this;
+
+      var h = this.$createElement;
+      var innerClass = this.$props.innerClass;
+      return h(TagItem, {
+        "class": getClassName(innerClass, 'selected-tag') || ''
+      }, [h("span", [item]), h("span", {
+        "attrs": {
+          "role": "img",
+          "aria-label": "delete-tag"
+        },
+        "class": "close-icon",
+        "on": {
+          "click": function click() {
+            return _this7.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 _this8 = 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 _this8.renderTag(item);
+      }), shouldRenderClearAllTag && h(TagItem, {
+        "class": getClassName(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)])])]);
     }
   },
   render: function render() {
-    var _this7 = this;
+    var _this9 = this;
 
     var h = arguments[0];
     var _this$$props6 = this.$props,
@@ -944,14 +1106,14 @@ var SearchBox = {
               }
             };
 
-            return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
+            return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
-            }, [_this7.normalizedSuggestions.map(function (item, index) {
+            }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
+            }, [_this9.normalizedSuggestions.map(function (item, index) {
               return renderItem ? h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -961,7 +1123,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -974,7 +1136,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -985,61 +1147,61 @@ var SearchBox = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this7.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this7.currentValue,
+                  "currentValue": _this9.currentValue,
                   "suggestion": item
                 }
-              }), _this7.renderAutoFill(item)]);
-            })]) : _this7.renderNoSuggestions(_this7.normalizedSuggestions)]);
+              }), _this9.renderAutoFill(item)]);
+            })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
           };
 
           return h("div", {
             "class": suggestionsContainer
-          }, [h(InputGroup, [_this7.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+          }, [h(InputGroup, [_this9.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
-              "id": _this7.$props.componentId + "-input",
-              "showIcon": _this7.$props.showIcon,
-              "showClear": _this7.$props.showClear,
-              "iconPosition": _this7.$props.iconPosition,
-              "placeholder": _this7.$props.placeholder,
-              "autoFocus": _this7.$props.autoFocus,
-              "themePreset": _this7.themePreset,
+              "id": _this9.$props.componentId + "-input",
+              "showIcon": _this9.$props.showIcon,
+              "showClear": _this9.$props.showClear,
+              "iconPosition": _this9.$props.iconPosition,
+              "placeholder": _this9.$props.placeholder,
+              "autoFocus": _this9.$props.autoFocus,
+              "themePreset": _this9.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this7.$props.innerRef,
-            "class": getClassName(_this7.$props.innerClass, 'input'),
+            "ref": _this9.$props.innerRef,
+            "class": getClassName(_this9.$props.innerClass, 'input'),
             "on": _extends({}, getInputEvents({
-              onInput: _this7.onInputChange,
+              onInput: _this9.onInputChange,
               onBlur: function onBlur(e) {
-                _this7.$emit('blur', e, _this7.triggerQuery);
+                _this9.$emit('blur', e, _this9.triggerQuery);
               },
-              onFocus: _this7.handleFocus,
+              onFocus: _this9.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this7.$emit('keyPress', e, _this7.triggerQuery);
+                _this9.$emit('keyPress', e, _this9.triggerQuery);
 
-                _this7.$emit('key-press', e, _this7.triggerQuery);
+                _this9.$emit('key-press', e, _this9.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this7.handleKeyDown(e, highlightedIndex);
+                return _this9.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this7.$emit('keyUp', e, _this7.triggerQuery);
+                _this9.$emit('keyUp', e, _this9.triggerQuery);
 
-                _this7.$emit('key-up', e, _this7.triggerQuery);
+                _this9.$emit('key-up', e, _this9.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this7.$data.currentValue === null ? '' : _this7.$data.currentValue
+              value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
             }))
-          }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this7.renderInputAddonAfter(), _this7.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
+          }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1055,22 +1217,22 @@ var SearchBox = {
       },
       "on": _extends({}, {
         blur: function blur(e) {
-          _this7.$emit('blur', e, _this7.triggerQuery);
+          _this9.$emit('blur', e, _this9.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this7.$emit('keyPress', e, _this7.triggerQuery);
+          _this9.$emit('keyPress', e, _this9.triggerQuery);
 
-          _this7.$emit('key-press', e, _this7.triggerQuery);
+          _this9.$emit('key-press', e, _this9.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this7.$emit('focus', e, _this7.triggerQuery);
+          _this9.$emit('focus', e, _this9.triggerQuery);
         },
         keydown: this.handleKeyDown,
         keyup: function keyup(e) {
-          _this7.$emit('keyUp', e, _this7.triggerQuery);
+          _this9.$emit('keyUp', e, _this9.triggerQuery);
 
-          _this7.$emit('key-up', e, _this7.triggerQuery);
+          _this9.$emit('key-up', e, _this9.triggerQuery);
         }
       }),
       "domProps": _extends({}, {

package/dist/es/install.js

@@ -1,41 +1,41 @@
 import '@appbaseio/reactivecore';
-import './_rollupPluginBabelHelpers-0f24d612.js';
+import './_rollupPluginBabelHelpers-51ce1182.js';
 import 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/reactivecore/lib/utils/helper';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-33de88e6.js';
-import './vueTypes-687b2304.js';
+import './Button-e18ad90f.js';
+import './vueTypes-c0d8b875.js';
 import './ReactiveList.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import './index-78920565.js';
-import './ComponentWrapper-0f3431d1.js';
+import './index-4715798c.js';
+import './ComponentWrapper-ca0354ea.js';
 import '@vue/babel-helper-vue-jsx-merge-props';
-import './Title-3522ff56.js';
-import './ListItem-8e8fb535.js';
-import './Card-6446f1b7.js';
-import './Flex-8770345d.js';
+import './Title-35edd732.js';
+import './ListItem-41d6ddd7.js';
+import './Card-ad6ba09f.js';
+import './Flex-09d40927.js';
 import '@appbaseio/reactivecore/lib/actions/analytics';
 import 'appbase-js';
 import 'url-search-params-polyfill';
 import './ReactiveBase.js';
 import 'hotkeys-js';
-import './DataSearch-42f547cd.js';
-import './CancelSvg-c2c03a35.js';
-import './Input-e339e63a.js';
+import './DataSearch-da9347f7.js';
+import './CancelSvg-e3b33cdd.js';
+import './Input-c9d757bc.js';
 import 'compute-scroll-into-view';
-import './Container-18b03fde.js';
+import './Container-421450dc.js';
 import 'vue-highlight-words';
-export { i as default } from './install-bd448c02.js';
+export { i as default } from './install-5d9cb7ed.js';
 import '@appbaseio/reactivecore/lib/utils/suggestions';
-import './FormControlList-704f8dee.js';
-import './utils-64a2e5f0.js';
+import './FormControlList-38ffe3d3.js';
+import './utils-9b45e0ab.js';
 import './SingleList.js';
 import './MultiList.js';
-import './DropDown-ff6ad982.js';
+import './DropDown-604374d2.js';
 import './SingleDropdownList.js';
 import './MultiDropdownList.js';
 import './ToggleButton.js';
@@ -46,8 +46,9 @@ import './MultiRange.js';
 import './ResultCard.js';
 import './ResultList.js';
 import 'vue-no-ssr';
-import './ssr-a41dfea9.js';
+import './ssr-ad57b0ad.js';
 import './RangeSlider.js';
 import './DynamicRangeSlider.js';
+import '@appbaseio/reactivecore/lib/actions/value';
 import './StateProvider.js';
 import './RangeInput.js';