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

package/dist/cjs/{ReactiveComponent-f0f486ca.js → ReactiveComponentPrivate-6f03f300.js}

@@ -6,28 +6,28 @@ var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
-var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
-var vueEmotion = require('@appbaseio/vue-emotion');
-var Button = require('./Button-626c5e8e.js');
-var vueTypes = require('./vueTypes-621a8143.js');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+var Button = require('./Button-841fd06d.js');
+var vueTypes = require('./vueTypes-568ce5e6.js');
 var ReactiveList = require('./ReactiveList.js');
-var index = require('./index-dc25b706.js');
-var ComponentWrapper = require('./ComponentWrapper-db45cc6d.js');
-var PreferencesConsumer = require('./PreferencesConsumer-034c55e3.js');
-var Title = require('./Title-8802a218.js');
+var index = require('./index-de136c17.js');
+var ComponentWrapper = require('./ComponentWrapper-94c50228.js');
+var PreferencesConsumer = require('./PreferencesConsumer-5e6e84a2.js');
+var Title = require('./Title-16042ea0.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var DataSearch = require('./DataSearch-7c71ec9f.js');
-var CancelSvg = require('./CancelSvg-062a42f0.js');
-var Input = require('./Input-4d278ca0.js');
-var Container = require('./Container-29f049b2.js');
-var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
+var Tags = require('./Tags-d464c22e.js');
+var CancelSvg = require('./CancelSvg-220a7cc3.js');
+var Input = require('./Input-ead4cd84.js');
+var Container = require('./Container-e699ea95.js');
 var SingleList = require('./SingleList.js');
 var MultiList = require('./MultiList.js');
 var SingleDropdownList = require('./SingleDropdownList.js');
 var MultiDropdownList = require('./MultiDropdownList.js');
 var ToggleButton = require('./ToggleButton.js');
+var ReactiveComponent = require('./ReactiveComponent.js');
 var DynamicRangeSlider = require('./DynamicRangeSlider.js');
 var SingleRange = require('./SingleRange.js');
 var MultiRange = require('./MultiRange.js');
@@ -35,21 +35,24 @@ var RangeSlider = require('./RangeSlider.js');
 var RangeInput = require('./RangeInput.js');
 
 var _templateObject;
-var AutofillSvgIcon = vueEmotion.styled('button')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
+var AutofillSvgIcon = styled__default('button')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
 var AutoFillSvg = {
   name: 'AutoFillSvg',
   render: function render() {
-    return vue.createVNode(AutofillSvgIcon, {
-      "onClick": this.$attrs.click
-    }, {
-      "default": function _default() {
-        return [vue.createVNode("svg", {
-          "viewBox": "0 0 24 24"
-        }, [vue.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)])];
+    var h = arguments[0];
+    return h(AutofillSvgIcon, {
+      "on": {
+        "click": this.$listeners.click
       }
-    });
+    }, [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) {
@@ -59,9 +62,6 @@ var AutoFillSvg = {
   }
 };
 
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
 var updateQuery = configureStore.Actions.updateQuery,
   setCustomQuery = configureStore.Actions.setCustomQuery,
   setDefaultQuery = configureStore.Actions.setDefaultQuery,
@@ -74,7 +74,7 @@ var _debounce = configureStore.helper.debounce,
   withClickIds = configureStore.helper.withClickIds,
   getResultStats = configureStore.helper.getResultStats,
   normalizeDataField = configureStore.helper.normalizeDataField;
-var SearchBox = vue.defineComponent({
+var SearchBox = {
   name: 'SearchBox',
   isTagsMode: false,
   data: function data() {
@@ -139,6 +139,7 @@ var SearchBox = vue.defineComponent({
     className: VueTypes.string.def(''),
     clearIcon: vueTypes.types.children,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customHighlight: vueTypes.types.func,
     customQuery: vueTypes.types.func,
     defaultQuery: vueTypes.types.func,
@@ -665,31 +666,31 @@ var SearchBox = vue.defineComponent({
       return highlightedIndex === index ? '#eee' : '#fff';
     },
     renderIcon: function renderIcon() {
+      var h = this.$createElement;
       if (this.$props.showIcon) {
-        return this.$props.icon || vue.createVNode(DataSearch.SearchSvg, null, null);
+        return this.$props.icon || h(Tags.SearchSvg);
       }
       return null;
     },
     renderErrorComponent: function renderErrorComponent() {
-      var _this4 = this;
-      var renderError = this.$slots.renderError || this.$props.renderError;
+      var h = this.$createElement;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
       if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
-        return vue.createVNode(DataSearch.SuggestionWrapper, {
-          "innerClass": this.$props.innerClass,
-          "innerClassName": "error",
-          "theme": this.theme,
-          "themePreset": this.themePreset
-        }, {
-          "default": function _default() {
-            return [index.isFunction(renderError) ? renderError(_this4.error) : renderError];
+        return h(Tags.SuggestionWrapper, {
+          "attrs": {
+            "innerClass": this.$props.innerClass,
+            "innerClassName": "error",
+            "theme": this.theme,
+            "themePreset": this.themePreset
           }
-        });
+        }, [index.isFunction(renderError) ? renderError(this.error) : renderError]);
       }
       return null;
     },
     renderCancelIcon: function renderCancelIcon() {
+      var h = this.$createElement;
       if (this.$props.showClear) {
-        return this.$props.clearIcon || vue.createVNode(CancelSvg.CancelSvg, null, null);
+        return this.$props.clearIcon || h(CancelSvg.CancelSvg);
       }
       return null;
     },
@@ -697,54 +698,49 @@ var SearchBox = vue.defineComponent({
       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.$slots.renderNoSuggestion || this.$props.renderNoSuggestion;
-      var renderError = this.$slots.renderError || this.$props.renderError;
+      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
+      var renderError = this.$scopedSlots.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 vue.createVNode(DataSearch.SuggestionWrapper, {
-          "innerClass": innerClass,
-          "themePreset": this.themePreset,
-          "theme": theme,
-          "innerClassName": "noSuggestion",
+        return h(Tags.SuggestionWrapper, {
+          "attrs": {
+            "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 addonBefore = this.$slots.addonBefore;
+      var h = this.$createElement;
+      var addonBefore = this.$scopedSlots.addonBefore;
       if (addonBefore) {
-        var _slot;
-        return vue.createVNode(DataSearch.InputAddon, {
+        return h(Tags.InputAddon, {
           "class": "addon-before"
-        }, _isSlot(_slot = addonBefore()) ? _slot : {
-          "default": function _default() {
-            return [_slot];
-          }
-        });
+        }, [addonBefore()]);
       }
       return null;
     },
     renderInputAddonAfter: function renderInputAddonAfter() {
-      var addonAfter = this.$slots.addonAfter;
+      var h = this.$createElement;
+      var addonAfter = this.$scopedSlots.addonAfter;
       if (addonAfter) {
-        var _slot2;
-        return vue.createVNode(DataSearch.InputAddon, {
+        return h(Tags.InputAddon, {
           "class": "addon-after"
-        }, _isSlot(_slot2 = addonAfter()) ? _slot2 : {
-          "default": function _default() {
-            return [_slot2];
-          }
-        });
+        }, [addonAfter()]);
       }
       return null;
     },
@@ -756,35 +752,35 @@ var SearchBox = vue.defineComponent({
       });
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this5 = this;
+      var _this4 = this;
+      var h = this.$createElement;
       var _this$$props4 = this.$props,
         enterButton = _this$$props4.enterButton,
         innerClass = _this$$props4.innerClass;
-      var renderEnterButton = this.$slots.renderEnterButton;
+      var renderEnterButton = this.$scopedSlots.renderEnterButton;
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this5.enterButtonOnClick);
+            return renderEnterButton(_this4.enterButtonOnClick);
           }
-          return vue.createVNode(Button.Button, {
+          return h(Button.Button, {
             "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
-            "primary": true,
-            "onClick": _this5.enterButtonOnClick
-          }, {
-            "default": function _default() {
-              return [vue.createTextVNode("Search")];
+            "attrs": {
+              "primary": true
+            },
+            "on": {
+              "click": _this4.enterButtonOnClick
             }
-          });
+          }, ["Search"]);
         };
-        return vue.createVNode("div", {
+        return h("div", {
           "class": "enter-button-wrapper"
         }, [getEnterButtonMarkup()]);
       }
       return null;
     },
     renderIcons: function renderIcons() {
-      var _this6 = this;
-      var _slot3, _slot4, _slot5;
+      var h = this.$createElement;
       var _this$$props5 = this.$props,
         iconPosition = _this$$props5.iconPosition,
         showClear = _this$$props5.showClear,
@@ -792,48 +788,42 @@ var SearchBox = vue.defineComponent({
         getMicInstance = _this$$props5.getMicInstance,
         showVoiceSearch = _this$$props5.showVoiceSearch,
         showIcon = _this$$props5.showIcon;
-      var renderMic = this.$slots.renderMic || this.$props.renderMic;
+      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
-      return vue.createVNode("div", null, [vue.createVNode(CancelSvg.IconGroup, {
-        "groupPosition": "right",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [currentValue && showClear && vue.createVNode(CancelSvg.IconWrapper, {
-            "onClick": _this6.clearValue,
-            "showIcon": showIcon,
-            "isClearIcon": true
-          }, _isSlot(_slot3 = _this6.renderCancelIcon()) ? _slot3 : {
-            "default": function _default() {
-              return [_slot3];
-            }
-          }), showVoiceSearch && vue.createVNode(DataSearch.Mic, {
-            "getInstance": getMicInstance,
-            "render": renderMic,
-            "handleResult": _this6.handleVoiceResults,
-            "className": getClassName(innerClass, 'mic') || null
-          }, null), iconPosition === 'right' && showIcon && vue.createVNode(CancelSvg.IconWrapper, {
-            "onClick": _this6.handleSearchIconClick
-          }, _isSlot(_slot4 = _this6.renderIcon()) ? _slot4 : {
-            "default": function _default() {
-              return [_slot4];
-            }
-          })];
+      return h("div", [h(CancelSvg.IconGroup, {
+        "attrs": {
+          "groupPosition": "right",
+          "positionType": "absolute"
         }
-      }), vue.createVNode(CancelSvg.IconGroup, {
-        "groupPosition": "left",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [iconPosition === 'left' && showIcon && vue.createVNode(CancelSvg.IconWrapper, {
-            "onClick": _this6.handleSearchIconClick
-          }, _isSlot(_slot5 = _this6.renderIcon()) ? _slot5 : {
-            "default": function _default() {
-              return [_slot5];
-            }
-          })];
+      }, [currentValue && showClear && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.clearValue
+        },
+        "attrs": {
+          "showIcon": showIcon,
+          "isClearIcon": true
+        }
+      }, [this.renderCancelIcon()]), showVoiceSearch && h(Tags.Mic, {
+        "attrs": {
+          "getInstance": getMicInstance,
+          "render": renderMic,
+          "handleResult": this.handleVoiceResults,
+          "className": getClassName(innerClass, 'mic') || null
         }
-      })]);
+      }), iconPosition === 'right' && showIcon && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])]), h(CancelSvg.IconGroup, {
+        "attrs": {
+          "groupPosition": "left",
+          "positionType": "absolute"
+        }
+      }, [iconPosition === 'left' && showIcon && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])])]);
     },
     focusSearchBox: function focusSearchBox(event) {
       var _this$$refs, _this$$refs$this$$pro;
@@ -846,7 +836,7 @@ var SearchBox = vue.defineComponent({
       (_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 _this7 = this;
+      var _this5 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (index.isEmpty(focusShortcuts)) {
@@ -861,7 +851,7 @@ var SearchBox = vue.defineComponent({
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this7.focusSearchBox(event);
+        _this5.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -871,7 +861,7 @@ var SearchBox = vue.defineComponent({
         for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
           var element = modifierKeys[index$1];
           if (hotkeys[element]) {
-            _this7.focusSearchBox(event);
+            _this5.focusSearchBox(event);
             break;
           }
         }
@@ -884,33 +874,37 @@ var SearchBox = vue.defineComponent({
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
-      var _this8 = this;
+      var _this6 = this;
+      var h = this.$createElement;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this8.onAutofillClick(suggestion);
+        _this6.onAutofillClick(suggestion);
       };
       /* 👇 avoid showing autofill for category suggestions👇 */
-      return suggestion._category ? null : vue.createVNode(AutoFillSvg, {
-        "onClick": handleAutoFillClick
-      }, null);
+      return suggestion._category ? null : h(AutoFillSvg, {
+        "on": {
+          "click": handleAutoFillClick
+        }
+      });
     },
     renderTag: function renderTag(item) {
-      var _this9 = this;
+      var _this7 = this;
+      var h = this.$createElement;
       var innerClass = this.$props.innerClass;
-      return vue.createVNode(DataSearch.TagItem, {
+      return h(Tags.TagItem, {
         "class": getClassName(innerClass, 'selected-tag') || ''
-      }, {
-        "default": function _default() {
-          return [vue.createVNode("span", null, [item]), vue.createVNode("span", {
-            "role": "img",
-            "aria-label": "delete-tag",
-            "class": "close-icon",
-            "onClick": function onClick() {
-              return _this9.clearTag(item);
-            }
-          }, [vue.createVNode(CancelSvg.CancelSvg, null, null)])];
+      }, [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.CancelSvg)])]);
     },
     clearAllTags: function clearAllTags() {
       this.selectedTags = [];
@@ -929,218 +923,214 @@ var SearchBox = vue.defineComponent({
       }
     },
     renderTags: function renderTags() {
-      var _this10 = this;
+      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.$slots.renderSelectedTags || this.$props.renderSelectedTags;
+      var renderSelectedTags = this.$scopedSlots.renderSelectedTags || this.$props.renderSelectedTags;
       return renderSelectedTags ? renderSelectedTags({
         values: this.selectedTags,
         handleClear: this.clearTag,
         handleClearAll: this.clearAllTags
-      }) : vue.createVNode(DataSearch.TagsContainer, null, {
-        "default": function _default() {
-          return [tagsList.map(function (item) {
-            return _this10.renderTag(item);
-          }), shouldRenderClearAllTag && vue.createVNode(DataSearch.TagItem, {
-            "class": getClassName(_this10.$props.innerClass, 'selected-tag') || ''
-          }, {
-            "default": function _default() {
-              return [vue.createVNode("span", null, [vue.createTextVNode("Clear All")]), vue.createVNode("span", {
-                "role": "img",
-                "aria-label": "delete-tag",
-                "class": "close-icon",
-                "onClick": _this10.clearAllTags
-              }, [vue.createVNode(CancelSvg.CancelSvg, null, null)])];
-            }
-          })];
+      }) : h(Tags.TagsContainer, [tagsList.map(function (item) {
+        return _this8.renderTag(item);
+      }), shouldRenderClearAllTag && h(Tags.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.CancelSvg)])])]);
     }
   },
   render: function render() {
-    var _this11 = this;
+    var _this9 = this;
+    var h = arguments[0];
     var _this$$props6 = this.$props,
       theme = _this$$props6.theme,
       expandSuggestionsContainer = _this$$props6.expandSuggestionsContainer;
-    var _this$$slots = this.$slots,
-      recentSearchesIcon = _this$$slots.recentSearchesIcon,
-      popularSearchesIcon = _this$$slots.popularSearchesIcon;
+    var _this$$scopedSlots = this.$scopedSlots,
+      recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
+      popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
     var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
-    var renderItem = this.$slots.renderItem || this.$props.renderItem;
-    return vue.createVNode(Container.Container, {
+    var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
+    return h(Container.Container, {
       "class": this.$props.className
-    }, {
-      "default": function _default() {
-        return [_this11.$props.title && vue.createVNode(Title.Title, {
-          "class": getClassName(_this11.$props.innerClass, 'title') || ''
-        }, {
-          "default": function _default() {
-            return [_this11.$props.title];
-          }
-        }), _this11.$props.autosuggest ? vue.createVNode(CancelSvg.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 helper.suggestionTypes.Recent:
-                    return recentSearchesIcon;
-                  case helper.suggestionTypes.Popular:
-                    return popularSearchesIcon;
-                  default:
-                    return null;
-                }
-              };
-              return vue.createVNode("div", null, [_this11.hasCustomRenderer && _this11.getComponent({
-                isOpen: isOpen,
-                getItemProps: getItemProps,
-                getItemEvents: getItemEvents,
-                highlightedIndex: highlightedIndex
-              }), _this11.renderErrorComponent(), !_this11.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
-                "class": Input.suggestions(_this11.themePreset, theme) + " " + getClassName(_this11.$props.innerClass, 'list')
-              }, [_this11.normalizedSuggestions.map(function (item, index) {
-                return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
+    }, [this.$props.title && h(Title.Title, {
+      "class": getClassName(this.$props.innerClass, 'title') || ''
+    }, [this.$props.title]), this.$props.autosuggest ? h(CancelSvg.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 helper.suggestionTypes.Recent:
+                  return recentSearchesIcon;
+                case helper.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": Input.suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
+            }, [_this9.normalizedSuggestions.map(function (item, index) {
+              return renderItem ? h("li", {
+                "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
-                }), getItemEvents({
+                })),
+                "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
                   item: item
-                }), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [renderItem(item)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
+                })),
+                "key": index + 1 + "-" + item.value,
+                "style": {
+                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
+                  justifyContent: 'flex-start',
+                  alignItems: 'center'
+                }
+              }, [renderItem(item)]) : h("li", {
+                "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
-                }), _transformOn(getItemEvents({
+                })),
+                "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
                   item: item
-                })), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this11.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [vue.createVNode("div", {
-                  "style": {
-                    padding: '0 10px 0 0',
-                    display: 'flex'
-                  }
-                }, [vue.createVNode(DataSearch.CustomSvg, {
-                  "className": getClassName(_this11.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                })),
+                "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(Tags.CustomSvg, {
+                "attrs": {
+                  "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
-                }, null)]), vue.createVNode(DataSearch.SuggestionItem, {
-                  "currentValue": _this11.currentValue,
+                }
+              })]), h(Tags.SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this9.currentValue,
                   "suggestion": item
-                }, null), _this11.renderAutoFill(item)]);
-              })]) : _this11.renderNoSuggestions(_this11.normalizedSuggestions)]);
-            };
-            return vue.createVNode("div", {
-              "class": Input.suggestionsContainer
-            }, [vue.createVNode(DataSearch.InputGroup, null, {
-              "default": function _default() {
-                return [_this11.renderInputAddonBefore(), vue.createVNode(CancelSvg.InputWrapper, null, {
-                  "default": function _default() {
-                    return [vue.createVNode(Input.Input, vue.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()];
-              }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this11.renderTags()]);
-          }
-        }) : vue.createVNode("div", {
-          "class": Input.suggestionsContainer
-        }, [vue.createVNode(DataSearch.InputGroup, null, {
-          "default": function _default() {
-            return [_this11.renderInputAddonBefore(), vue.createVNode(CancelSvg.InputWrapper, null, {
-              "default": function _default() {
-                return [vue.createVNode(Input.Input, vue.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()];
+                }
+              }), _this9.renderAutoFill(item)]);
+            })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
+          };
+          return h("div", {
+            "class": Input.suggestionsContainer
+          }, [h(Tags.InputGroup, [_this9.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.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": _rollupPluginBabelHelpers._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);
               }
-            }), _this11.renderInputAddonAfter(), _this11.renderEnterButtonElement()];
-          }
-        })])];
+            })),
+            "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
+              value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
+            }))
+          }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
+        }
       }
-    });
+    }) : h("div", {
+      "class": Input.suggestionsContainer
+    }, [h(Tags.InputGroup, [this.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.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": _rollupPluginBabelHelpers._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": _rollupPluginBabelHelpers._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.hasInternalComponent = function () {
+  return true;
+};
 SearchBox.defaultQuery = function (value, props) {
   var finalQuery = null;
   var fields = normalizeDataField(props.dataField, props.fieldWeights);
@@ -1264,309 +1254,23 @@ var SBConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.Compo
   internalComponent: true
 }));
 SBConnected.name = SearchBox.name;
+SBConnected.defaultQuery = SearchBox.defaultQuery;
+SBConnected.shouldQuery = SearchBox.shouldQuery;
+SBConnected.hasInternalComponent = SearchBox.hasInternalComponent;
 SBConnected.install = function (Vue) {
   Vue.component(SBConnected.name, SBConnected);
 };
 // Add componentType for SSR
 SBConnected.componentType = constants.componentTypes.searchBox;
 
-var _excluded = ["options"];
-var updateQuery$1 = configureStore.Actions.updateQuery,
-  setQueryOptions = configureStore.Actions.setQueryOptions,
-  setCustomQuery$1 = configureStore.Actions.setCustomQuery,
-  setDefaultQuery$1 = configureStore.Actions.setDefaultQuery;
-var parseHits = configureStore.helper.parseHits,
-  isEqual$1 = configureStore.helper.isEqual,
-  getCompositeAggsQuery$1 = configureStore.helper.getCompositeAggsQuery,
-  getResultStats$1 = configureStore.helper.getResultStats,
-  extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
-  getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
-var ReactiveComponent = {
-  name: 'ReactiveComponent',
-  props: {
-    componentId: vueTypes.types.stringRequired,
-    aggregationField: vueTypes.types.string,
-    aggregationSize: VueTypes.number,
-    size: VueTypes.number,
-    defaultQuery: vueTypes.types.func,
-    customQuery: vueTypes.types.func,
-    filterLabel: vueTypes.types.string,
-    react: vueTypes.types.react,
-    showFilter: VueTypes.bool.def(true),
-    URLParams: VueTypes.bool.def(false),
-    distinctField: vueTypes.types.string,
-    distinctFieldConfig: vueTypes.types.props,
-    index: VueTypes.string,
-    endpoint: vueTypes.types.endpointConfig
-  },
-  created: function created() {
-    var _this = this;
-    var props = this.$props;
-    this.internalComponent = null;
-    this.$defaultQuery = null;
-    // Set custom query in store
-    index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-    var customQuery = props.customQuery,
-      componentId = props.componentId,
-      filterLabel = props.filterLabel,
-      showFilter = props.showFilter,
-      URLParams = props.URLParams,
-      distinctField = props.distinctField,
-      distinctFieldConfig = props.distinctFieldConfig,
-      index$1 = props.index;
-    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.');
-    }
-    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
-      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    }
-    if (!this.enableAppbase && index$1) {
-      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-    }
-    if (customQuery) {
-      var calcCustomQuery = customQuery(this.selectedValue, props);
-      var query = extractQueryFromCustomQuery(calcCustomQuery);
-      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
-      if (customQueryOptions) {
-        this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, customQueryOptions, this.getAggsQuery()), false);
-      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-      this.updateQuery({
-        componentId: componentId,
-        query: query,
-        value: this.selectedValue || null,
-        label: filterLabel,
-        showFilter: showFilter,
-        URLParams: URLParams
-      });
-    }
-    this.setQuery = function (_ref) {
-      var options = _ref.options,
-        obj = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_ref, _excluded);
-      var queryToBeSet = obj.query;
-
-      // when enableAppbase is true, Backend throws error because of repeated query in request body
-      if (queryToBeSet && queryToBeSet.query) {
-        queryToBeSet = queryToBeSet.query;
-      }
-      var customQueryCalc = _rollupPluginBabelHelpers._extends({}, options, {
-        query: queryToBeSet
-      });
-      var rsAPIQuery = customQueryCalc;
-      // handle stored queries
-      if (queryToBeSet && queryToBeSet.id) {
-        rsAPIQuery = queryToBeSet;
-      }
-      // Update customQuery field for RS API
-      _this.setCustomQuery(props.componentId, rsAPIQuery);
-      if (options) {
-        _this.setQueryOptions(props.componentId, _rollupPluginBabelHelpers._extends({}, _this.getAggsQuery(), options), false);
-      }
-      _this.updateQuery(_rollupPluginBabelHelpers._extends({}, obj, {
-        query: customQueryCalc.query,
-        componentId: props.componentId,
-        label: props.filterLabel,
-        showFilter: props.showFilter,
-        URLParams: props.URLParams
-      }));
-    };
-    if (props.defaultQuery) {
-      this.internalComponent = props.componentId + "__internal";
-    }
-    if (this.internalComponent && this.$props.defaultQuery) {
-      index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
-      var _query = extractQueryFromCustomQuery(this.$defaultQuery);
-      var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
-      if (queryOptions) {
-        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
-      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-      this.updateQuery({
-        componentId: this.internalComponent,
-        query: _query
-      });
-    }
-  },
-  watch: {
-    hits: function hits(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    rawData: function rawData(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    aggregations: function aggregations(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    aggregationData: function aggregationData(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    promotedResults: function promotedResults(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    hidden: function hidden(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    total: function total(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    time: function time(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
-    },
-    defaultQuery: function defaultQuery(newVal, oldVal) {
-      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-        this.$defaultQuery = newVal(this.selectedValue, this.$props);
-        var query = extractQueryFromCustomQuery(this.$defaultQuery);
-        var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
-        if (queryOptions) {
-          this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
-        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-        // Update default query for RS API
-        index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-        this.updateQuery({
-          componentId: this.internalComponent,
-          query: query
-        });
-      }
-    },
-    customQuery: function customQuery(newVal, oldVal) {
-      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-        var componentId = this.$props.componentId;
-        this.$customQuery = newVal(this.selectedValue, this.$props);
-        var query = extractQueryFromCustomQuery(this.$customQuery);
-        var queryOptions = getOptionsForCustomQuery(this.$customQuery);
-        if (queryOptions) {
-          this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
-        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-
-        // Update custom query for RS API
-        index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-        this.updateQuery({
-          componentId: componentId,
-          query: query
-        });
-      }
-    }
-  },
-  render: function render() {
-    try {
-      var dom = this.$slots["default"];
-      var error = this.error,
-        isLoading = this.isLoading,
-        selectedValue = this.selectedValue;
-      var propsToBePassed = _rollupPluginBabelHelpers._extends({
-        error: error,
-        loading: isLoading
-      }, this.getData(), {
-        value: selectedValue,
-        setQuery: this.setQuery
-      });
-      return vue.createVNode("div", null, [dom(propsToBePassed)]);
-    } catch (e) {
-      return null;
-    }
-  },
-  methods: {
-    getAggsQuery: function getAggsQuery() {
-      if (this.aggregationField) {
-        return {
-          aggs: getCompositeAggsQuery$1({
-            props: this.$props,
-            showTopHits: true,
-            value: this.selectedValue
-          }).aggs
-        };
-      }
-      return {};
-    },
-    getData: function getData() {
-      var hits = this.hits,
-        aggregations = this.aggregations,
-        aggregationData = this.aggregationData,
-        promotedResults = this.promotedResults,
-        rawData = this.rawData;
-      var filteredResults = parseHits(hits);
-      if (promotedResults.length) {
-        var ids = promotedResults.map(function (item) {
-          return item._id;
-        }).filter(Boolean);
-        if (ids) {
-          filteredResults = filteredResults.filter(function (item) {
-            return !ids.includes(item._id);
-          });
-        }
-        filteredResults = [].concat(promotedResults, filteredResults);
-      }
-      return {
-        data: filteredResults,
-        aggregationData: aggregationData,
-        rawData: rawData,
-        aggregations: aggregations,
-        promotedData: promotedResults,
-        resultStats: this.stats
-      };
-    }
-  },
-  computed: {
-    stats: function stats() {
-      return getResultStats$1(this);
-    }
-  }
-};
-ReactiveComponent.hasInternalComponent = function (props) {
-  return !!props.defaultQuery;
-};
-var mapStateToProps$1 = function mapStateToProps(state, props) {
-  return {
-    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
-    aggregationData: state.compositeAggregations[props.componentId] || [],
-    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
-    rawData: state.rawData[props.componentId],
-    error: state.error[props.componentId],
-    isLoading: state.isLoading[props.componentId],
-    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-    promotedResults: state.promotedResults[props.componentId] || [],
-    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
-    total: state.hits[props.componentId] && state.hits[props.componentId].total,
-    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
-    componentProps: state.props[props.componentId],
-    enableAppbase: state.config.enableAppbase
-  };
-};
-var mapDispatchtoProps = {
-  setQueryOptions: setQueryOptions,
-  updateQuery: updateQuery$1,
-  setCustomQuery: setCustomQuery$1,
-  setDefaultQuery: setDefaultQuery$1
-};
-var ConnectedComponent = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveComponent), {
-  componentType: constants.componentTypes.reactiveComponent
-});
 var RcConnected = PreferencesConsumer.PreferencesConsumer({
   name: 'RcConnected',
-  render: function render() {
-    var component = ConnectedComponent;
+  render: function render(h) {
+    var component = ReactiveComponent.default;
     switch (this.$attrs.componentType) {
       case constants.componentTypes.reactiveList:
         component = ReactiveList.RLConnected;
         break;
-      case constants.componentTypes.dataSearch:
-        component = DataSearch.DSConnected;
-        break;
       case constants.componentTypes.searchBox:
         component = SBConnected;
         break;
@@ -1604,21 +1308,21 @@ var RcConnected = PreferencesConsumer.PreferencesConsumer({
         component = RangeInput.RangeConnected;
         break;
     }
-    return vue.h(component, {
+    return h(component, {
       attrs: this.$attrs,
-      on: this.$attrs,
-      scopedSlots: this.$slots,
+      on: this.$listeners,
+      scopedSlots: this.$scopedSlots,
       slots: this.$slots
     });
   }
 });
-RcConnected.name = ReactiveComponent.name;
+RcConnected.name = 'ReactiveComponentPrivate';
+RcConnected.hasInternalComponent = ReactiveComponent.default.hasInternalComponent;
+// Add componentType for SSR
+RcConnected.componentType = constants.componentTypes.reactiveComponent;
 RcConnected.install = function (Vue) {
   Vue.component(RcConnected.name, RcConnected);
 };
 
-// Add componentType for SSR
-RcConnected.componentType = constants.componentTypes.reactiveComponent;
-
-exports.ReactiveComponent = RcConnected;
+exports.ReactiveComponentPrivate = RcConnected;
 exports.SearchBox = SBConnected;