@appbaseio/reactivesearch-vue 1.34.0-alpha.1 → 1.34.0-alpha.2

package/dist/es/{ReactiveComponent-9352370c.js → ReactiveComponent-e2fb9eb4.js}

@@ -1,21 +1,23 @@
 import { Actions, helper, causes } from '@appbaseio/reactivecore';
 import { SEARCH_COMPONENTS_MODES, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { _ as _taggedTemplateLiteralLoose, a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, defineComponent, isVNode, createTextVNode, mergeProps, h } from 'vue';
 import VueTypes from 'vue-types';
 import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
-import styled from '@appbaseio/vue-emotion';
-import { B as Button } from './Button-153cd885.js';
-import { t as types } from './vueTypes-8986b709.js';
+import { styled } from '@appbaseio/vue-emotion';
+import { B as Button } from './Button-ebafa3d6.js';
+import { t as types } from './vueTypes-e4af6fe2.js';
 import { RLConnected } from './ReactiveList.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-0444a498.js';
-import { C as ComponentWrapper } from './ComponentWrapper-240450cc.js';
-import { P as PreferencesConsumer } from './PreferencesConsumer-bc097ebb.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-285a43a6.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bf443c0b.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-7ea7313a.js';
 import { T as Title } from './Title-863dfa42.js';
 import hotkeys from 'hotkeys-js';
-import { S as SearchSvg, b as SuggestionWrapper, I as InputAddon, M as Mic, T as TagItem, c as TagsContainer, d as InputGroup, C as CustomSvg, e as SuggestionItem, D as DSConnected } from './DataSearch-dcaa106b.js';
-import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-e40552a5.js';
-import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-c09c0b56.js';
+import { S as SearchSvg, b as SuggestionWrapper, I as InputAddon, M as Mic, T as TagItem, c as TagsContainer, d as InputGroup, C as CustomSvg, e as SuggestionItem, D as DSConnected } from './DataSearch-4f9a4e46.js';
+import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-14ebc9a1.js';
+import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-3b8408a6.js';
 import { C as Container } from './Container-d00219f7.js';
+import _transformOn from '@vue/babel-helper-vue-transform-on';
 import { ListConnected as ListConnected$3 } from './SingleList.js';
 import { ListConnected as ListConnected$2 } from './MultiList.js';
 import { ListConnected as ListConnected$1 } from './SingleDropdownList.js';
@@ -32,20 +34,17 @@ var AutofillSvgIcon = styled('button')(_templateObject || (_templateObject = _ta
 var AutoFillSvg = {
   name: 'AutoFillSvg',
   render: function render() {
-    var h = arguments[0];
-    return h(AutofillSvgIcon, {
-      "on": {
-        "click": this.$listeners.click
+    return createVNode(AutofillSvgIcon, {
+      "onClick": this.$attrs.click
+    }, {
+      "default": function _default() {
+        return [createVNode("svg", {
+          "viewBox": "0 0 24 24"
+        }, [createVNode("path", {
+          "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+        }, null)])];
       }
-    }, [h("svg", {
-      "attrs": {
-        "viewBox": "0 0 24 24"
-      }
-    }, [h("path", {
-      "attrs": {
-        "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
-      }
-    })])]);
+    });
   },
   methods: {
     clicked: function clicked(e) {
@@ -55,6 +54,9 @@ var AutoFillSvg = {
   }
 };
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
 var updateQuery = Actions.updateQuery,
   setCustomQuery = Actions.setCustomQuery,
   setDefaultQuery = Actions.setDefaultQuery,
@@ -67,7 +69,7 @@ var _debounce = helper.debounce,
   withClickIds = helper.withClickIds,
   getResultStats = helper.getResultStats,
   normalizeDataField = helper.normalizeDataField;
-var SearchBox = {
+var SearchBox = defineComponent({
   name: 'SearchBox',
   isTagsMode: false,
   data: function data() {
@@ -267,7 +269,6 @@ var SearchBox = {
           // 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 = [];
@@ -277,7 +278,6 @@ var SearchBox = {
           cause = causes.SUGGESTION_SELECT;
         }
         this.setValue(newVal || '', true, this.$props, cause);
-        // }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -420,8 +420,7 @@ var SearchBox = {
             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;
+              _this.selectedTags = value;
             }
           } else if (value) {
             _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
@@ -661,31 +660,31 @@ var SearchBox = {
       return highlightedIndex === index ? '#eee' : '#fff';
     },
     renderIcon: function renderIcon() {
-      var h = this.$createElement;
       if (this.$props.showIcon) {
-        return this.$props.icon || h(SearchSvg);
+        return this.$props.icon || createVNode(SearchSvg, null, null);
       }
       return null;
     },
     renderErrorComponent: function renderErrorComponent() {
-      var h = this.$createElement;
-      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+      var _this4 = this;
+      var renderError = this.$slots.renderError || this.$props.renderError;
       if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
-        return h(SuggestionWrapper, {
-          "attrs": {
-            "innerClass": this.$props.innerClass,
-            "innerClassName": "error",
-            "theme": this.theme,
-            "themePreset": this.themePreset
+        return createVNode(SuggestionWrapper, {
+          "innerClass": this.$props.innerClass,
+          "innerClassName": "error",
+          "theme": this.theme,
+          "themePreset": this.themePreset
+        }, {
+          "default": function _default() {
+            return [isFunction(renderError) ? renderError(_this4.error) : renderError];
           }
-        }, [isFunction(renderError) ? renderError(this.error) : renderError]);
+        });
       }
       return null;
     },
     renderCancelIcon: function renderCancelIcon() {
-      var h = this.$createElement;
       if (this.$props.showClear) {
-        return this.$props.clearIcon || h(CancelSvg);
+        return this.$props.clearIcon || createVNode(CancelSvg, null, null);
       }
       return null;
     },
@@ -693,49 +692,54 @@ var SearchBox = {
       if (finalSuggestionsList === void 0) {
         finalSuggestionsList = [];
       }
-      var h = this.$createElement;
       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 renderNoSuggestion = this.$slots.renderNoSuggestion || this.$props.renderNoSuggestion;
+      var renderError = this.$slots.renderError || this.$props.renderError;
       var _this$$data = this.$data,
         isOpen = _this$$data.isOpen,
         currentValue = _this$$data.currentValue;
       if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
-        return h(SuggestionWrapper, {
-          "attrs": {
-            "innerClass": innerClass,
-            "themePreset": this.themePreset,
-            "theme": theme,
-            "innerClassName": "noSuggestion"
-          },
+        return createVNode(SuggestionWrapper, {
+          "innerClass": innerClass,
+          "themePreset": this.themePreset,
+          "theme": theme,
+          "innerClassName": "noSuggestion",
           "scopedSlots": {
             "default": function _default() {
               return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
             }
           }
-        });
+        }, null);
       }
       return null;
     },
     renderInputAddonBefore: function renderInputAddonBefore() {
-      var h = this.$createElement;
-      var addonBefore = this.$scopedSlots.addonBefore;
+      var addonBefore = this.$slots.addonBefore;
       if (addonBefore) {
-        return h(InputAddon, {
+        var _slot;
+        return createVNode(InputAddon, {
           "class": "addon-before"
-        }, [addonBefore()]);
+        }, _isSlot(_slot = addonBefore()) ? _slot : {
+          "default": function _default() {
+            return [_slot];
+          }
+        });
       }
       return null;
     },
     renderInputAddonAfter: function renderInputAddonAfter() {
-      var h = this.$createElement;
-      var addonAfter = this.$scopedSlots.addonAfter;
+      var addonAfter = this.$slots.addonAfter;
       if (addonAfter) {
-        return h(InputAddon, {
+        var _slot2;
+        return createVNode(InputAddon, {
           "class": "addon-after"
-        }, [addonAfter()]);
+        }, _isSlot(_slot2 = addonAfter()) ? _slot2 : {
+          "default": function _default() {
+            return [_slot2];
+          }
+        });
       }
       return null;
     },
@@ -747,35 +751,35 @@ var SearchBox = {
       });
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this4 = this;
-      var h = this.$createElement;
+      var _this5 = this;
       var _this$$props4 = this.$props,
         enterButton = _this$$props4.enterButton,
         innerClass = _this$$props4.innerClass;
-      var renderEnterButton = this.$scopedSlots.renderEnterButton;
+      var renderEnterButton = this.$slots.renderEnterButton;
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this4.enterButtonOnClick);
+            return renderEnterButton(_this5.enterButtonOnClick);
           }
-          return h(Button, {
+          return createVNode(Button, {
             "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
-            "attrs": {
-              "primary": true
-            },
-            "on": {
-              "click": _this4.enterButtonOnClick
+            "primary": true,
+            "onClick": _this5.enterButtonOnClick
+          }, {
+            "default": function _default() {
+              return [createTextVNode("Search")];
             }
-          }, ["Search"]);
+          });
         };
-        return h("div", {
+        return createVNode("div", {
           "class": "enter-button-wrapper"
         }, [getEnterButtonMarkup()]);
       }
       return null;
     },
     renderIcons: function renderIcons() {
-      var h = this.$createElement;
+      var _this6 = this;
+      var _slot3, _slot4, _slot5;
       var _this$$props5 = this.$props,
         iconPosition = _this$$props5.iconPosition,
         showClear = _this$$props5.showClear,
@@ -783,42 +787,48 @@ var SearchBox = {
         getMicInstance = _this$$props5.getMicInstance,
         showVoiceSearch = _this$$props5.showVoiceSearch,
         showIcon = _this$$props5.showIcon;
-      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
+      var renderMic = this.$slots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
-      return h("div", [h(IconGroup, {
-        "attrs": {
-          "groupPosition": "right",
-          "positionType": "absolute"
-        }
-      }, [currentValue && showClear && h(IconWrapper, {
-        "on": {
-          "click": this.clearValue
-        },
-        "attrs": {
-          "showIcon": showIcon,
-          "isClearIcon": true
-        }
-      }, [this.renderCancelIcon()]), showVoiceSearch && h(Mic, {
-        "attrs": {
-          "getInstance": getMicInstance,
-          "render": renderMic,
-          "handleResult": this.handleVoiceResults,
-          "className": getClassName(innerClass, 'mic') || null
-        }
-      }), iconPosition === 'right' && showIcon && h(IconWrapper, {
-        "on": {
-          "click": this.handleSearchIconClick
-        }
-      }, [this.renderIcon()])]), h(IconGroup, {
-        "attrs": {
-          "groupPosition": "left",
-          "positionType": "absolute"
+      return createVNode("div", null, [createVNode(IconGroup, {
+        "groupPosition": "right",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [currentValue && showClear && createVNode(IconWrapper, {
+            "onClick": _this6.clearValue,
+            "showIcon": showIcon,
+            "isClearIcon": true
+          }, _isSlot(_slot3 = _this6.renderCancelIcon()) ? _slot3 : {
+            "default": function _default() {
+              return [_slot3];
+            }
+          }), showVoiceSearch && createVNode(Mic, {
+            "getInstance": getMicInstance,
+            "render": renderMic,
+            "handleResult": _this6.handleVoiceResults,
+            "className": getClassName(innerClass, 'mic') || null
+          }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
+            "onClick": _this6.handleSearchIconClick
+          }, _isSlot(_slot4 = _this6.renderIcon()) ? _slot4 : {
+            "default": function _default() {
+              return [_slot4];
+            }
+          })];
         }
-      }, [iconPosition === 'left' && showIcon && h(IconWrapper, {
-        "on": {
-          "click": this.handleSearchIconClick
+      }), createVNode(IconGroup, {
+        "groupPosition": "left",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
+            "onClick": _this6.handleSearchIconClick
+          }, _isSlot(_slot5 = _this6.renderIcon()) ? _slot5 : {
+            "default": function _default() {
+              return [_slot5];
+            }
+          })];
         }
-      }, [this.renderIcon()])])]);
+      })]);
     },
     focusSearchBox: function focusSearchBox(event) {
       var _this$$refs, _this$$refs$this$$pro;
@@ -831,7 +841,7 @@ var SearchBox = {
       (_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 _this5 = this;
+      var _this7 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (isEmpty(focusShortcuts)) {
@@ -846,7 +856,7 @@ var SearchBox = {
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this5.focusSearchBox(event);
+        _this7.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -856,7 +866,7 @@ var SearchBox = {
         for (var index = 0; index < modifierKeys.length; index += 1) {
           var element = modifierKeys[index];
           if (hotkeys[element]) {
-            _this5.focusSearchBox(event);
+            _this7.focusSearchBox(event);
             break;
           }
         }
@@ -869,37 +879,33 @@ var SearchBox = {
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
-      var _this6 = this;
-      var h = this.$createElement;
+      var _this8 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this6.onAutofillClick(suggestion);
+        _this8.onAutofillClick(suggestion);
       };
       /* 👇 avoid showing autofill for category suggestions👇 */
-      return suggestion._category ? null : h(AutoFillSvg, {
-        "on": {
-          "click": handleAutoFillClick
-        }
-      });
+      return suggestion._category ? null : createVNode(AutoFillSvg, {
+        "onClick": handleAutoFillClick
+      }, null);
     },
     renderTag: function renderTag(item) {
-      var _this7 = this;
-      var h = this.$createElement;
+      var _this9 = this;
       var innerClass = this.$props.innerClass;
-      return h(TagItem, {
+      return createVNode(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);
-          }
+      }, {
+        "default": function _default() {
+          return [createVNode("span", null, [item]), createVNode("span", {
+            "role": "img",
+            "aria-label": "delete-tag",
+            "class": "close-icon",
+            "onClick": function onClick() {
+              return _this9.clearTag(item);
+            }
+          }, [createVNode(CancelSvg, null, null)])];
         }
-      }, [h(CancelSvg)])]);
+      });
     },
     clearAllTags: function clearAllTags() {
       this.selectedTags = [];
@@ -918,211 +924,218 @@ var SearchBox = {
       }
     },
     renderTags: function renderTags() {
-      var _this8 = this;
-      var h = this.$createElement;
+      var _this10 = this;
       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;
+      var renderSelectedTags = this.$slots.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
+      }) : createVNode(TagsContainer, null, {
+        "default": function _default() {
+          return [tagsList.map(function (item) {
+            return _this10.renderTag(item);
+          }), shouldRenderClearAllTag && createVNode(TagItem, {
+            "class": getClassName(_this10.$props.innerClass, 'selected-tag') || ''
+          }, {
+            "default": function _default() {
+              return [createVNode("span", null, [createTextVNode("Clear All")]), createVNode("span", {
+                "role": "img",
+                "aria-label": "delete-tag",
+                "class": "close-icon",
+                "onClick": _this10.clearAllTags
+              }, [createVNode(CancelSvg, null, null)])];
+            }
+          })];
         }
-      }, [h(CancelSvg)])])]);
+      });
     }
   },
   render: function render() {
-    var _this9 = this;
-    var h = arguments[0];
+    var _this11 = this;
     var _this$$props6 = this.$props,
       theme = _this$$props6.theme,
       expandSuggestionsContainer = _this$$props6.expandSuggestionsContainer;
-    var _this$$scopedSlots = this.$scopedSlots,
-      recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
-      popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
+    var _this$$slots = this.$slots,
+      recentSearchesIcon = _this$$slots.recentSearchesIcon,
+      popularSearchesIcon = _this$$slots.popularSearchesIcon;
     var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
-    var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
-    return h(Container, {
+    var renderItem = this.$slots.renderItem || this.$props.renderItem;
+    return createVNode(Container, {
       "class": this.$props.className
-    }, [this.$props.title && h(Title, {
-      "class": getClassName(this.$props.innerClass, 'title') || ''
-    }, [this.$props.title]), this.$props.autosuggest ? h(Downshift, {
-      "attrs": {
-        "id": this.$props.componentId + "-downshift",
-        "handleChange": this.onSuggestionSelected,
-        "handleMouseup": this.handleStateChange,
-        "isOpen": this.$data.isOpen
-      },
-      "scopedSlots": {
-        "default": function _default(_ref5) {
-          var getInputEvents = _ref5.getInputEvents,
-            getInputProps = _ref5.getInputProps,
-            getItemProps = _ref5.getItemProps,
-            getItemEvents = _ref5.getItemEvents,
-            isOpen = _ref5.isOpen,
-            highlightedIndex = _ref5.highlightedIndex,
-            setHighlightedIndex = _ref5.setHighlightedIndex;
-          var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-            var getIcon = function getIcon(iconType) {
-              switch (iconType) {
-                case suggestionTypes.Recent:
-                  return recentSearchesIcon;
-                case suggestionTypes.Popular:
-                  return popularSearchesIcon;
-                default:
-                  return null;
-              }
-            };
-            return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
-              isOpen: isOpen,
-              getItemProps: getItemProps,
-              getItemEvents: getItemEvents,
-              highlightedIndex: highlightedIndex
-            }), _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({
+    }, {
+      "default": function _default() {
+        return [_this11.$props.title && createVNode(Title, {
+          "class": getClassName(_this11.$props.innerClass, 'title') || ''
+        }, {
+          "default": function _default() {
+            return [_this11.$props.title];
+          }
+        }), _this11.$props.autosuggest ? createVNode(Downshift, {
+          "id": _this11.$props.componentId + "-downshift",
+          "handleChange": _this11.onSuggestionSelected,
+          "handleMouseup": _this11.handleStateChange,
+          "isOpen": _this11.$data.isOpen
+        }, {
+          "default": function _default(_ref5) {
+            var getInputEvents = _ref5.getInputEvents,
+              getInputProps = _ref5.getInputProps,
+              getItemProps = _ref5.getItemProps,
+              getItemEvents = _ref5.getItemEvents,
+              isOpen = _ref5.isOpen,
+              highlightedIndex = _ref5.highlightedIndex,
+              setHighlightedIndex = _ref5.setHighlightedIndex;
+            var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
+              var getIcon = function getIcon(iconType) {
+                switch (iconType) {
+                  case suggestionTypes.Recent:
+                    return recentSearchesIcon;
+                  case suggestionTypes.Popular:
+                    return popularSearchesIcon;
+                  default:
+                    return null;
+                }
+              };
+              return createVNode("div", null, [_this11.hasCustomRenderer && _this11.getComponent({
+                isOpen: isOpen,
+                getItemProps: getItemProps,
+                getItemEvents: getItemEvents,
+                highlightedIndex: highlightedIndex
+              }), _this11.renderErrorComponent(), !_this11.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
+                "class": suggestions(_this11.themePreset, theme) + " " + getClassName(_this11.$props.innerClass, 'list')
+              }, [_this11.normalizedSuggestions.map(function (item, index) {
+                return renderItem ? createVNode("li", mergeProps(getItemProps({
                   item: item
-                })),
-                "on": _extends({}, getItemEvents({
+                }), getItemEvents({
                   item: item
-                })),
-                "key": index + 1 + "-" + item.value,
-                "style": {
-                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
-                  justifyContent: 'flex-start',
-                  alignItems: 'center'
-                }
-              }, [renderItem(item)]) : h("li", {
-                "domProps": _extends({}, getItemProps({
+                }), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [renderItem(item)]) : createVNode("li", mergeProps(getItemProps({
                   item: item
-                })),
-                "on": _extends({}, getItemEvents({
+                }), _transformOn(getItemEvents({
                   item: item
-                })),
-                "key": index + 1 + "-" + item.value,
-                "style": {
-                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
-                  justifyContent: 'flex-start',
-                  alignItems: 'center'
-                }
-              }, [h("div", {
-                "style": {
-                  padding: '0 10px 0 0',
-                  display: 'flex'
-                }
-              }, [h(CustomSvg, {
-                "attrs": {
-                  "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                })), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [createVNode("div", {
+                  "style": {
+                    padding: '0 10px 0 0',
+                    display: 'flex'
+                  }
+                }, [createVNode(CustomSvg, {
+                  "className": getClassName(_this11.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
-                }
-              })]), h(SuggestionItem, {
-                "attrs": {
-                  "currentValue": _this9.currentValue,
+                }, null)]), createVNode(SuggestionItem, {
+                  "currentValue": _this11.currentValue,
                   "suggestion": item
-                }
-              }), _this9.renderAutoFill(item)]);
-            })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
-          };
-          return h("div", {
-            "class": suggestionsContainer
-          }, [h(InputGroup, [_this9.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
-            "attrs": {
-              "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": _this9.$props.innerRef,
-            "class": getClassName(_this9.$props.innerClass, 'input'),
-            "on": _extends({}, getInputEvents({
-              onInput: _this9.onInputChange,
-              onBlur: function onBlur(e) {
-                _this9.$emit('blur', e, _this9.triggerQuery);
-              },
-              onFocus: _this9.handleFocus,
-              onKeyPress: function onKeyPress(e) {
-                _this9.$emit('keyPress', e, _this9.triggerQuery);
-                _this9.$emit('key-press', e, _this9.triggerQuery);
-              },
-              onKeyDown: function onKeyDown(e) {
-                return _this9.handleKeyDown(e, highlightedIndex);
-              },
-              onKeyUp: function onKeyUp(e) {
-                _this9.$emit('keyUp', e, _this9.triggerQuery);
-                _this9.$emit('key-up', e, _this9.triggerQuery);
-              },
-              onClick: function onClick() {
-                setHighlightedIndex(null);
+                }, null), _this11.renderAutoFill(item)]);
+              })]) : _this11.renderNoSuggestions(_this11.normalizedSuggestions)]);
+            };
+            return createVNode("div", {
+              "class": suggestionsContainer
+            }, [createVNode(InputGroup, null, {
+              "default": function _default() {
+                return [_this11.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+                  "default": function _default() {
+                    return [createVNode(Input, mergeProps(_transformOn(getInputEvents({
+                      onInput: _this11.onInputChange,
+                      onBlur: function onBlur(e) {
+                        _this11.$emit('blur', e, _this11.triggerQuery);
+                      },
+                      onFocus: _this11.handleFocus,
+                      onKeyPress: function onKeyPress(e) {
+                        _this11.$emit('keyPress', e, _this11.triggerQuery);
+                        _this11.$emit('key-press', e, _this11.triggerQuery);
+                      },
+                      onKeyDown: function onKeyDown(e) {
+                        return _this11.handleKeyDown(e, highlightedIndex);
+                      },
+                      onKeyUp: function onKeyUp(e) {
+                        _this11.$emit('keyUp', e, _this11.triggerQuery);
+                        _this11.$emit('key-up', e, _this11.triggerQuery);
+                      },
+                      onClick: function onClick() {
+                        setHighlightedIndex(null);
+                      }
+                    })), {
+                      "id": _this11.$props.componentId + "-input",
+                      "showIcon": _this11.$props.showIcon,
+                      "showClear": _this11.$props.showClear,
+                      "iconPosition": _this11.$props.iconPosition,
+                      "ref": _this11.$props.innerRef,
+                      "class": getClassName(_this11.$props.innerClass, 'input'),
+                      "placeholder": _this11.$props.placeholder,
+                      "autoFocus": _this11.$props.autoFocus
+                    }, getInputProps({
+                      value: _this11.$data.currentValue === null ? '' : _this11.$data.currentValue
+                    }), {
+                      "themePreset": _this11.themePreset,
+                      "autocomplete": "off"
+                    }), null), _this11.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
+                  }
+                }), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
               }
-            })),
-            "domProps": _extends({}, getInputProps({
-              value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
-            }))
-          }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
-        }
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this11.renderTags()]);
+          }
+        }) : createVNode("div", {
+          "class": suggestionsContainer
+        }, [createVNode(InputGroup, null, {
+          "default": function _default() {
+            return [_this11.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+              "default": function _default() {
+                return [createVNode(Input, mergeProps(_transformOn({
+                  blur: function blur(e) {
+                    _this11.$emit('blur', e, _this11.triggerQuery);
+                  },
+                  keypress: function keypress(e) {
+                    _this11.$emit('keyPress', e, _this11.triggerQuery);
+                    _this11.$emit('key-press', e, _this11.triggerQuery);
+                  },
+                  input: _this11.onInputChange,
+                  focus: function focus(e) {
+                    _this11.$emit('focus', e, _this11.triggerQuery);
+                  },
+                  keydown: _this11.handleKeyDown,
+                  keyup: function keyup(e) {
+                    _this11.$emit('keyUp', e, _this11.triggerQuery);
+                    _this11.$emit('key-up', e, _this11.triggerQuery);
+                  }
+                }), {
+                  "class": getClassName(_this11.$props.innerClass, 'input') || '',
+                  "placeholder": _this11.$props.placeholder,
+                  "autofocus": _this11.$props.autoFocus,
+                  "value": _this11.$data.currentValue ? _this11.$data.currentValue : '',
+                  "iconPosition": _this11.$props.iconPosition,
+                  "showIcon": _this11.$props.showIcon,
+                  "showClear": _this11.$props.showClear,
+                  "ref": _this11.$props.innerRef,
+                  "themePreset": _this11.themePreset
+                }), null), _this11.renderIcons()];
+              }
+            }), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
+          }
+        })])];
       }
-    }) : h("div", {
-      "class": suggestionsContainer
-    }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
-      "class": getClassName(this.$props.innerClass, 'input') || '',
-      "attrs": {
-        "placeholder": this.$props.placeholder,
-        "iconPosition": this.$props.iconPosition,
-        "showIcon": this.$props.showIcon,
-        "showClear": this.$props.showClear,
-        "themePreset": this.themePreset
-      },
-      "on": _extends({}, {
-        blur: function blur(e) {
-          _this9.$emit('blur', e, _this9.triggerQuery);
-        },
-        keypress: function keypress(e) {
-          _this9.$emit('keyPress', e, _this9.triggerQuery);
-          _this9.$emit('key-press', e, _this9.triggerQuery);
-        },
-        input: this.onInputChange,
-        focus: function focus(e) {
-          _this9.$emit('focus', e, _this9.triggerQuery);
-        },
-        keydown: this.handleKeyDown,
-        keyup: function keyup(e) {
-          _this9.$emit('keyUp', e, _this9.triggerQuery);
-          _this9.$emit('key-up', e, _this9.triggerQuery);
-        }
-      }),
-      "domProps": _extends({}, {
-        autofocus: this.$props.autoFocus,
-        value: this.$data.currentValue ? this.$data.currentValue : ''
-      }),
-      "ref": this.$props.innerRef
-    }), this.renderIcons()]), this.renderInputAddonAfter(), this.renderEnterButtonElement()])])]);
+    });
   },
   destroyed: function destroyed() {
     document.removeEventListener('keydown', this.onKeyDown);
   }
-};
+});
 SearchBox.defaultQuery = function (value, props) {
   var finalQuery = null;
   var fields = normalizeDataField(props.dataField, props.fieldWeights);
@@ -1445,9 +1458,8 @@ var ReactiveComponent = {
     }
   },
   render: function render() {
-    var h = arguments[0];
     try {
-      var dom = this.$scopedSlots["default"];
+      var dom = this.$slots["default"];
       var error = this.error,
         isLoading = this.isLoading,
         selectedValue = this.selectedValue;
@@ -1458,7 +1470,7 @@ var ReactiveComponent = {
         value: selectedValue,
         setQuery: this.setQuery
       });
-      return h("div", [dom(propsToBePassed)]);
+      return createVNode("div", null, [dom(propsToBePassed)]);
     } catch (e) {
       return null;
     }
@@ -1541,7 +1553,7 @@ var ConnectedComponent = ComponentWrapper(connect(mapStateToProps$1, mapDispatch
 });
 var RcConnected = PreferencesConsumer({
   name: 'RcConnected',
-  render: function render(h) {
+  render: function render() {
     var component = ConnectedComponent;
     switch (this.$attrs.componentType) {
       case componentTypes.reactiveList:
@@ -1589,8 +1601,8 @@ var RcConnected = PreferencesConsumer({
     }
     return h(component, {
       attrs: this.$attrs,
-      on: this.$listeners,
-      scopedSlots: this.$scopedSlots,
+      on: this.$attrs,
+      scopedSlots: this.$slots,
       slots: this.$slots
     });
   }