@appbaseio/reactivesearch-vue 1.30.0 → 1.32.0

package/dist/cjs/{Button-0e2e2c02.js → Button-0673191e.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
@@ -12,12 +12,12 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 var filters = function filters(_ref) {
   var borderColor = _ref.colors.borderColor;
-  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\ta {\n\t\tmargin: 2px 3px;\n\t\tpadding: 5px 8px;\n\t\tfont-size: 0.85rem;\n\t\tposition: relative;\n\n\t\tspan:first-child {\n\t\t\tmax-width: 260px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmargin-right: 26px;\n\t\t}\n\n\t\tspan:last-child {\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 8px;\n\t\t\tposition: absolute;\n\t\t\talign-items: center;\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tpadding-left: 8px;\n\t\t\tmargin-left: 8px;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tspan:first-child {\n\t\t\t\ttext-decoration: line-through;\n\t\t\t}\n\t\t}\n\t}\n"])), borderColor || '#fff');
+  return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 2px 3px;\n\t\tpadding: 5px 8px;\n\t\tfont-size: 0.85rem;\n\t\tposition: relative;\n\n\t\tspan:first-child {\n\t\t\tmax-width: 260px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmargin-right: 26px;\n\t\t}\n\n\t\tspan:last-child {\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 8px;\n\t\t\tposition: absolute;\n\t\t\talign-items: center;\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tpadding-left: 8px;\n\t\t\tmargin-left: 8px;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tspan:first-child {\n\t\t\t\ttext-decoration: line-through;\n\t\t\t}\n\t\t}\n\t}\n"])), borderColor || '#fff');
 };
 
-var pagination = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 10px -3px;\n\tmax-width: 100%;\n\ttext-align: center;\n\n\ta {\n\t\tmargin: 0 3px;\n\t}\n"])));
-var toggleButtons = emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\ta {\n\t\tmargin: 3px 3px;\n\t}\n"])));
-var numberBoxContainer = emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\ta {\n\t\tmargin: 5px;\n\t}\n\tspan {\n\t\tmargin: 0 5px;\n\t}\n"])));
+var pagination = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 10px -3px;\n\tmax-width: 100%;\n\ttext-align: center;\n\n\tbutton {\n\t\tmargin: 0 3px;\n\t}\n"])));
+var toggleButtons = emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\tbutton {\n\t\tmargin: 3px 3px;\n\t}\n"])));
+var numberBoxContainer = emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\tbutton {\n\t\tmargin: 5px;\n\t}\n\tspan {\n\t\tmargin: 0 5px;\n\t}\n"])));
 
 var primary = function primary(_ref2) {
   var theme = _ref2.theme;
@@ -33,7 +33,7 @@ var disabled = function disabled(_ref3) {
   return emotion.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fafafa', theme.colors.backgroundColor ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fafafa');
 };
 
-var Button = styled__default('a')(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref4) {
+var Button = styled__default('button')(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.backgroundColor || '#eee';
 }, function (_ref5) {

package/dist/cjs/{CancelSvg-c48c1085.js → CancelSvg-9f258f4f.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));

package/dist/cjs/{Card-4fa0f769.js → Card-642547a8.js}

@@ -2,12 +2,12 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var emotion = require('emotion');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var polished = require('polished');
-require('./Title-26661936.js');
+require('./Title-1de7d0f4.js');
 
 var _templateObject, _templateObject2, _templateObject3;
 var container = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\tflex-wrap: wrap;\n\tmargin: 0 -8px;\n\n\t@media (max-width: 420px) {\n\t\tmargin: 0;\n\t}\n"])));

package/dist/cjs/{ComponentWrapper-5cb08414.js → ComponentWrapper-ad3dad02.js}

@@ -4,11 +4,11 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var transform = require('@appbaseio/reactivecore/lib/utils/transform');
-var index = require('./index-2cd3650b.js');
+var index = require('./index-6a167fe0.js');
 
 var addComponent = configureStore.Actions.addComponent,
     removeComponent = configureStore.Actions.removeComponent,

package/dist/cjs/{Container-cfd69a34.js → Container-daf30918.js}

@@ -2,7 +2,7 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 

package/dist/cjs/{DataSearch-e550096e.js → DataSearch-d389fbe7.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-91d4b5a6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.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-2cd3650b.js');
-var ComponentWrapper = require('./ComponentWrapper-5cb08414.js');
-var Title = require('./Title-26661936.js');
-var Flex = require('./Flex-63774e4d.js');
+var vueTypes = require('./vueTypes-727b7c63.js');
+var index = require('./index-6a167fe0.js');
+var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
+var Title = require('./Title-1de7d0f4.js');
+var Flex = require('./Flex-aa517a13.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var CancelSvg = require('./CancelSvg-c48c1085.js');
-var Input = require('./Input-43868594.js');
-var Container = require('./Container-cfd69a34.js');
+var CancelSvg = require('./CancelSvg-9f258f4f.js');
+var Input = require('./Input-e6603a7e.js');
+var Container = require('./Container-daf30918.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 
 var _templateObject;
@@ -951,8 +951,6 @@ var DataSearch = {
   },
   created: function created() {
     var _this$$props = this.$props,
-        enableQuerySuggestions = _this$$props.enableQuerySuggestions,
-        renderQuerySuggestions = _this$$props.renderQuerySuggestions,
         enableRecentSearches = _this$$props.enableRecentSearches,
         distinctField = _this$$props.distinctField,
         distinctFieldConfig = _this$$props.distinctFieldConfig,
@@ -961,16 +959,6 @@ var DataSearch = {
 
     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.');
-    } // TODO: Remove in 2.0
-
-
-    if (renderQuerySuggestions) {
-      console.warn('Warning(ReactiveSearch): The `renderQuerySuggestions` prop has been marked as deprecated, please use the `renderPopularSuggestions` prop instead.');
     }
 
     if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
@@ -1023,7 +1011,7 @@ var DataSearch = {
         return [];
       }
 
-      return this.enableQuerySuggestions || this.enablePopularSuggestions ? this.normalizedPopularSuggestions : [];
+      return this.enablePopularSuggestions ? this.normalizedPopularSuggestions : [];
     },
     normalizedRecentSearches: function normalizedRecentSearches() {
       return this.recentSearches || [];
@@ -1033,7 +1021,7 @@ var DataSearch = {
       this.currentValue ? this.popularSuggestions : this.defaultPopularSuggestions || [], this.currentValue, this.showDistinctSuggestions);
     },
     defaultSearchSuggestions: function defaultSearchSuggestions() {
-      var isPopularSuggestionsEnabled = this.enableQuerySuggestions || this.enablePopularSuggestions;
+      var isPopularSuggestionsEnabled = this.enablePopularSuggestions;
 
       if (this.currentValue || !this.enableDefaultSuggestions) {
         return [];
@@ -1087,7 +1075,6 @@ var DataSearch = {
     value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
     defaultSuggestions: vueTypes.types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
-    enableQuerySuggestions: VueTypes.bool.def(false),
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSearches: VueTypes.bool.def(false),
     fieldWeights: vueTypes.types.fieldWeights,
@@ -1101,7 +1088,6 @@ var DataSearch = {
     innerClass: vueTypes.types.style,
     innerRef: VueTypes.string.def('searchInputField'),
     render: vueTypes.types.func,
-    renderQuerySuggestions: vueTypes.types.func,
     renderPopularSuggestions: vueTypes.types.func,
     parseSuggestion: vueTypes.types.func,
     renderNoSuggestion: vueTypes.types.title,
@@ -1135,7 +1121,8 @@ var DataSearch = {
     index: VueTypes.string,
     enableDefaultSuggestions: VueTypes.bool.def(true),
     mode: VueTypes.oneOf(['select', 'tag']).def('select'),
-    renderSelectedTags: VueTypes.any
+    renderSelectedTags: VueTypes.any,
+    endpoint: vueTypes.types.endpointConfig
   },
   beforeMount: function beforeMount() {
     if (this.$props.highlight) {
@@ -1187,7 +1174,11 @@ var DataSearch = {
     },
     value: function value(newVal, oldVal) {
       if (!isEqual(newVal, oldVal)) {
-        this.setValue(newVal, true, this.$props, undefined, false);
+        if (this.isPending && this.$options.isTagsMode && Array.isArray(newVal)) {
+          this.isPending = false;
+        }
+
+        this.setValue(newVal, true, this.$props, undefined, false, typeof newVal !== 'string' && this.$options.isTagsMode);
       }
     },
     defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -1331,7 +1322,7 @@ var DataSearch = {
         this.onValueSelectedHandler(currentValue, configureStore.causes.SEARCH_ICON_CLICK);
       }
     },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen) {
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, isTagsMode) {
       var _this = this;
 
       if (isDefaultValue === void 0) {
@@ -1346,8 +1337,12 @@ var DataSearch = {
         toggleIsOpen = true;
       }
 
+      if (isTagsMode === void 0) {
+        isTagsMode = this.$options.isTagsMode;
+      }
+
       var performUpdate = function performUpdate() {
-        if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
+        if (isTagsMode && isEqual(value, _this.selectedTags)) {
           return;
         } // Refresh recent searches when value becomes empty
 
@@ -1358,7 +1353,7 @@ var DataSearch = {
           _this.getRecentSearches();
         }
 
-        if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
+        if (isTagsMode) {
           if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
             // check if value already present in selectedTags
             if (typeof value === 'string' && _this.selectedTags.includes(value)) {
@@ -1385,7 +1380,7 @@ var DataSearch = {
 
         var queryHandlerValue = value;
 
-        if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
+        if (isTagsMode) {
           queryHandlerValue = Array.isArray(_this.selectedTags) && _this.selectedTags.length ? _this.selectedTags : undefined;
         }
 
@@ -1563,19 +1558,40 @@ var DataSearch = {
       this.$emit('key-down', event, this.triggerQuery);
     },
     onInputChange: function onInputChange(e) {
+      var _this2 = this;
+
       var inputValue = e.target.value;
 
       if (!this.$data.isOpen) {
         this.isOpen = true;
       }
 
-      var value = this.$props.value;
+      var _this$$props2 = this.$props,
+          value = _this$$props2.value,
+          autosuggest = _this$$props2.autosuggest;
 
       if (value === undefined) {
-        this.setValue(inputValue);
+        this.setValue(inputValue, false, this.$props, undefined, true, false);
       } else {
         this.isPending = true;
-        this.$emit('change', inputValue, this.triggerQuery, e);
+        this.$emit('change', inputValue, function (_temp2) {
+          var _ref3 = _temp2 === void 0 ? {} : _temp2,
+              _ref3$isOpen = _ref3.isOpen,
+              isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
+
+          if (_this2.$options.isTagsMode && autosuggest) {
+            _this2.currentValue = value;
+            _this2.isOpen = isOpen;
+
+            _this2.updateDefaultQueryHandler(_this2.currentValue, _this2.$props);
+
+            return;
+          }
+
+          _this2.triggerQuery({
+            isOpen: isOpen
+          });
+        }, e);
       }
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
@@ -1670,9 +1686,9 @@ var DataSearch = {
       }
 
       var h = this.$createElement;
-      var _this$$props2 = this.$props,
-          theme = _this$$props2.theme,
-          innerClass = _this$$props2.innerClass;
+      var _this$$props3 = this.$props,
+          theme = _this$$props3.theme,
+          innerClass = _this$$props3.innerClass;
       var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
       var renderError = this.$scopedSlots.renderError || this.$props.renderError;
       var _this$$data = this.$data,
@@ -1708,7 +1724,7 @@ var DataSearch = {
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this2 = this;
+      var _this3 = this;
 
       var h = this.$createElement;
       var innerClass = this.$props.innerClass;
@@ -1722,7 +1738,7 @@ var DataSearch = {
         "class": "close-icon",
         "on": {
           "click": function click() {
-            return _this2.clearTag(item);
+            return _this3.clearTag(item);
           }
         }
       }, [h(CancelSvg.CancelSvg)])]);
@@ -1746,7 +1762,7 @@ var DataSearch = {
       }
     },
     renderTags: function renderTags() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
 
@@ -1762,7 +1778,7 @@ var DataSearch = {
         handleClear: this.clearTag,
         handleClearAll: this.clearAllTags
       }) : h(TagsContainer, [tagsList.map(function (item) {
-        return _this3.renderTag(item);
+        return _this4.renderTag(item);
       }), shouldRenderClearAllTag && h(TagItem, {
         "class": getClassName$1(this.$props.innerClass, 'selected-tag') || ''
       }, [h("span", ["Clear All"]), h("span", {
@@ -1788,13 +1804,13 @@ var DataSearch = {
     },
     renderIcons: function renderIcons() {
       var h = this.$createElement;
-      var _this$$props3 = this.$props,
-          iconPosition = _this$$props3.iconPosition,
-          showClear = _this$$props3.showClear,
-          innerClass = _this$$props3.innerClass,
-          getMicInstance = _this$$props3.getMicInstance,
-          showVoiceSearch = _this$$props3.showVoiceSearch,
-          showIcon = _this$$props3.showIcon;
+      var _this$$props4 = this.$props,
+          iconPosition = _this$$props4.iconPosition,
+          showClear = _this$$props4.showClear,
+          innerClass = _this$$props4.innerClass,
+          getMicInstance = _this$$props4.getMicInstance,
+          showVoiceSearch = _this$$props4.showVoiceSearch,
+          showIcon = _this$$props4.showIcon;
       var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return h("div", [h(CancelSvg.IconGroup, {
@@ -1846,7 +1862,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 _this4 = this;
+      var _this5 = this;
 
       var _this$$props$focusSho = this.$props.focusShortcuts,
           focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
@@ -1864,7 +1880,7 @@ var DataSearch = {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
 
-        _this4.focusSearchBox(event);
+        _this5.focusSearchBox(event);
       }); // if one of modifier keys are used, they are handled below
 
       hotkeys('*', function (event) {
@@ -1875,7 +1891,7 @@ var DataSearch = {
           var element = modifierKeys[index$1];
 
           if (hotkeys[element]) {
-            _this4.focusSearchBox(event);
+            _this5.focusSearchBox(event);
 
             break;
           }
@@ -1884,14 +1900,14 @@ var DataSearch = {
     }
   },
   render: function render() {
-    var _this5 = this;
+    var _this6 = this;
 
     var h = arguments[0];
-    var _this$$props4 = this.$props,
-        theme = _this$$props4.theme,
-        size = _this$$props4.size,
-        expandSuggestionsContainer = _this$$props4.expandSuggestionsContainer,
-        enableDefaultSuggestions = _this$$props4.enableDefaultSuggestions;
+    var _this$$props5 = this.$props,
+        theme = _this$$props5.theme,
+        size = _this$$props5.size,
+        expandSuggestionsContainer = _this$$props5.expandSuggestionsContainer,
+        enableDefaultSuggestions = _this$$props5.enableDefaultSuggestions;
     var _this$$scopedSlots = this.$scopedSlots,
         recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
         popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
@@ -1913,24 +1929,24 @@ var DataSearch = {
         "isOpen": this.$data.isOpen
       },
       "scopedSlots": {
-        "default": function _default(_ref3) {
-          var getInputEvents = _ref3.getInputEvents,
-              getInputProps = _ref3.getInputProps,
-              getItemProps = _ref3.getItemProps,
-              getItemEvents = _ref3.getItemEvents,
-              isOpen = _ref3.isOpen,
-              highlightedIndex = _ref3.highlightedIndex,
-              setHighlightedIndex = _ref3.setHighlightedIndex;
+        "default": function _default(_ref4) {
+          var getInputEvents = _ref4.getInputEvents,
+              getInputProps = _ref4.getInputProps,
+              getItemProps = _ref4.getItemProps,
+              getItemEvents = _ref4.getItemEvents,
+              isOpen = _ref4.isOpen,
+              highlightedIndex = _ref4.highlightedIndex,
+              setHighlightedIndex = _ref4.setHighlightedIndex;
 
           var renderSuggestionsContainer = function renderSuggestionsContainer() {
-            return h("div", [_this5.hasCustomRenderer && _this5.getComponent({
+            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _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) {
+            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": Input.suggestions(_this6.themePreset, theme) + " " + getClassName$1(_this6.$props.innerClass, 'list')
+            }, [_this6.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
@@ -1940,15 +1956,15 @@ var DataSearch = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, index)
+                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index)
                 }
               }, [h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this5.currentValue,
+                  "currentValue": _this6.currentValue,
                   "suggestion": item
                 }
               })]);
-            }), _this5.defaultSearchSuggestions.map(function (sugg, index) {
+            }), _this6.defaultSearchSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1956,9 +1972,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
+                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1967,28 +1983,28 @@ var DataSearch = {
                 }
               }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'recent-search-icon') || null,
+                  "className": getClassName$1(_this6.$props.innerClass, 'recent-search-icon') || null,
                   "icon": recentSearchesIcon,
                   "type": "recent-search-icon"
                 }
               }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_this6.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this5.currentValue,
+                  "currentValue": _this6.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            }), index.hasQuerySuggestionsRenderer(_this5) ? _this5.getComponent({
+            }), index.hasQuerySuggestionsRenderer(_this6) ? _this6.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }, true) : _this5.topSuggestions.map(function (sugg, index) {
+            }, true) : _this6.topSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: sugg
@@ -1996,9 +2012,9 @@ var DataSearch = {
                 "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this5.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this5.getBackgroundColor(highlightedIndex, _this5.suggestionsList.length + index),
+                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -2007,61 +2023,61 @@ var DataSearch = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName$1(_this5.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName$1(_this6.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this5.currentValue,
+                  "currentValue": _this6.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            })]) : _this5.renderNoSuggestions(_this5.suggestionsList)]);
+            })]) : _this6.renderNoSuggestions(_this6.suggestionsList)]);
           };
 
           return h("div", {
             "class": Input.suggestionsContainer
-          }, [h(InputGroup, [_this5.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
             "attrs": {
-              "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,
+              "id": _this6.$props.componentId + "-input",
+              "showIcon": _this6.$props.showIcon,
+              "showClear": _this6.$props.showClear,
+              "iconPosition": _this6.$props.iconPosition,
+              "placeholder": _this6.$props.placeholder,
+              "autoFocus": _this6.$props.autoFocus,
+              "themePreset": _this6.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this5.$props.innerRef,
-            "class": getClassName$1(_this5.$props.innerClass, 'input'),
+            "ref": _this6.$props.innerRef,
+            "class": getClassName$1(_this6.$props.innerClass, 'input'),
             "on": _rollupPluginBabelHelpers._extends({}, getInputEvents({
-              onInput: _this5.onInputChange,
+              onInput: _this6.onInputChange,
               onBlur: function onBlur(e) {
-                _this5.$emit('blur', e, _this5.triggerQuery);
+                _this6.$emit('blur', e, _this6.triggerQuery);
               },
-              onFocus: _this5.handleFocus,
+              onFocus: _this6.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this5.$emit('keyPress', e, _this5.triggerQuery);
+                _this6.$emit('keyPress', e, _this6.triggerQuery);
 
-                _this5.$emit('key-press', e, _this5.triggerQuery);
+                _this6.$emit('key-press', e, _this6.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this5.handleKeyDown(e, highlightedIndex);
+                return _this6.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this5.$emit('keyUp', e, _this5.triggerQuery);
+                _this6.$emit('keyUp', e, _this6.triggerQuery);
 
-                _this5.$emit('key-up', e, _this5.triggerQuery);
+                _this6.$emit('key-up', e, _this6.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
-              value: _this5.$data.currentValue === null ? '' : _this5.$data.currentValue
+              value: _this6.$data.currentValue === null ? '' : _this6.$data.currentValue
             }))
-          }), _this5.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this5.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this5.renderTags()]);
+          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this6.renderTags()]);
         }
       }
     }) : h("div", {
@@ -2077,26 +2093,26 @@ var DataSearch = {
       },
       "on": _rollupPluginBabelHelpers._extends({}, {
         blur: function blur(e) {
-          _this5.$emit('blur', e, _this5.triggerQuery);
+          _this6.$emit('blur', e, _this6.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this5.$emit('keyPress', e, _this5.triggerQuery);
+          _this6.$emit('keyPress', e, _this6.triggerQuery);
 
-          _this5.$emit('key-press', e, _this5.triggerQuery);
+          _this6.$emit('key-press', e, _this6.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this5.$emit('focus', e, _this5.triggerQuery);
+          _this6.$emit('focus', e, _this6.triggerQuery);
         },
         keydown: function keydown(e) {
-          _this5.$emit('keyDown', e, _this5.triggerQuery);
+          _this6.$emit('keyDown', e, _this6.triggerQuery);
 
-          _this5.$emit('key-down', e, _this5.triggerQuery);
+          _this6.$emit('key-down', e, _this6.triggerQuery);
         },
         keyup: function keyup(e) {
-          _this5.$emit('keyUp', e, _this5.triggerQuery);
+          _this6.$emit('keyUp', e, _this6.triggerQuery);
 
-          _this5.$emit('key-up', e, _this5.triggerQuery);
+          _this6.$emit('key-up', e, _this6.triggerQuery);
         }
       }),
       "domProps": _rollupPluginBabelHelpers._extends({}, {