@appbaseio/reactivesearch-vue 1.16.0-alpha.4 → 1.16.0-alpha.40

package/dist/es/RangeSlider.js

@@ -1,17 +1,17 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-1fe91a0a.js';
-import { C as ComponentWrapper } from './ComponentWrapper-d0b21b95.js';
-import { T as Title } from './Title-22c2f3bf.js';
-import { C as Container } from './Container-f5efec9e.js';
+import { f as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import { T as Title } from './Title-579f8d6c.js';
+import { C as Container } from './Container-4383c6f0.js';
 import NoSSR from 'vue-no-ssr';
-import { g as getComponents, S as Slider } from './ssr-2f57791d.js';
+import { g as getComponents, S as Slider } from './ssr-e3196de1.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -57,7 +57,8 @@ var RangeSlider = {
     title: types.title,
     URLParams: VueTypes.bool.def(false),
     sliderOptions: VueTypes.object.def({}),
-    nestedField: types.string
+    nestedField: types.string,
+    index: VueTypes.string
   },
   methods: {
     handleSliderChange: function handleSliderChange(values) {
@@ -72,32 +73,28 @@ var RangeSlider = {
         });
       }
     },
-    handleSlider: function handleSlider(values) {
-      var _this = this;
-
-      clearTimeout(this.handleSliderChange._tId);
-      this.handleSliderChange._tId = setTimeout(function () {
-        _this.handleSliderChange(values);
-      }, 100);
+    handleSlider: function handleSlider() {
+      var sliderValues = this.$refs.slider.getValue();
+      this.handleSliderChange(sliderValues);
     },
     handleChange: function handleChange(currentValue, props) {
-      var _this2 = this;
+      var _this = this;
 
       if (props === void 0) {
         props = this.$props;
       }
 
       var performUpdate = function performUpdate() {
-        _this2.currentValue = currentValue;
+        _this.currentValue = currentValue;
 
-        _this2.updateQueryHandler([currentValue[0], currentValue[1]], props);
+        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
 
-        _this2.$emit('valueChange', {
+        _this.$emit('valueChange', {
           start: currentValue[0],
           end: currentValue[1]
         });
 
-        _this2.$emit('value-change', {
+        _this.$emit('value-change', {
           start: currentValue[0],
           end: currentValue[1]
         });
@@ -129,7 +126,7 @@ var RangeSlider = {
           currentEnd = value[1]; // check if the slider is at its initial position
 
       var isInitialValue = currentStart === start && currentEnd === end;
-      this.setQueryOptions(props.componentId, customQueryOptions);
+      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -165,6 +162,10 @@ var RangeSlider = {
   created: function created() {
     if (!this.$props.range) {
       console.error('%crange is not defined. Read more about this at https://opensource.appbase.io/reactive-manual/vue/range-components/rangeslider.html#props', 'font-size: 12.5px;');
+    }
+
+    if (!this.enableAppbase && this.$props.index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     } // Set custom query in store
 
 
@@ -204,12 +205,13 @@ var RangeSlider = {
         "max": this.$props.range.end,
         "dotSize": 20,
         "height": 4,
-        "enable-cross": false
+        "enable-cross": false,
+        "tooltip": "always"
+      },
+      "on": {
+        "drag-end": this.handleSlider
       },
-      "props": _extends({}, this.$props.sliderOptions),
-      "on": _extends({}, {
-        input: this.handleSlider
-      })
+      "props": _extends({}, this.$props.sliderOptions)
     }), this.$props.rangeLabels && h("div", {
       "class": "label-container"
     }, [h("label", {
@@ -251,7 +253,7 @@ RangeSlider.defaultQuery = function (values, props) {
 
 RangeSlider.parseValue = function (value, props) {
   if (value) {
-    return [value.start, value.end];
+    return Array.isArray(value) ? value : [value.start, value.end];
   }
 
   if (props.range) {
@@ -266,7 +268,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
     : [],
     selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
-    componentProps: state.props[props.componentId]
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
   };
 };
 

package/dist/es/ReactiveBase.js

@@ -1,13 +1,13 @@
 import configureStore, { Actions, helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/constants';
+import { isEqual as isEqual$1 } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import 'redux';
-import { c as connect, e as composeThemeObject } from './index-1fe91a0a.js';
+import { c as connect, e as composeThemeObject, X as X_SEARCH_CLIENT } from './index-5daa8276.js';
 import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { isEqual as isEqual$1 } from '@appbaseio/reactivecore/lib/utils/helper';
 import { updateAnalyticsConfig } from '@appbaseio/reactivecore/lib/actions/analytics';
 import Appbase from 'appbase-js';
 import 'url-search-params-polyfill';
@@ -41,15 +41,7 @@ var Provider = {
   }
 };
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tcolor: ", ";\n\twidth: 100%;\n\n\tinput,\n\tbutton,\n\ttextarea,\n\tselect {\n\t\tfont-family: ", ";\n\t}\n\n\t*,\n\t*:before,\n\t*:after {\n\t\tbox-sizing: border-box;\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 var Base = {
   functional: true,
   render: function render(h, _ref) {
@@ -61,7 +53,7 @@ var Base = {
     return h(T, _mergeJSXProps([{}, props]), [children]);
   }
 };
-var Base$1 = styled(Base)(_templateObject(), function (_ref2) {
+var Base$1 = styled(Base)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tcolor: ", ";\n\twidth: 100%;\n\n\tinput,\n\tbutton,\n\ttextarea,\n\tselect {\n\t\tfont-family: ", ";\n\t}\n\n\t*,\n\t*:before,\n\t*:after {\n\t\tbox-sizing: border-box;\n\t}\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.typography.fontFamily;
 }, function (_ref3) {
@@ -85,7 +77,7 @@ var URLParamsProvider = {
     headers: types.headers,
     getSearchParams: types.func,
     setSearchParams: types.func,
-    as: types.string.def('div')
+    as: VueTypes.string.def('div')
   },
   mounted: function mounted() {
     var _this = this;
@@ -233,7 +225,9 @@ var URLParamsProvider = {
         return value.map(function (item) {
           return _this3.getValue(item);
         });
-      } else if (value && typeof value === 'object') {
+      }
+
+      if (value && typeof value === 'object') {
         // TODO: support for NestedList
         if (value.location) return value;
         if (value.category) return value;
@@ -358,11 +352,11 @@ var ReactiveBase = {
     }
   },
   props: {
-    app: types.stringRequired,
+    app: types.string,
     analytics: VueTypes.bool,
     analyticsConfig: types.analyticsConfig,
     appbaseConfig: types.appbaseConfig,
-    enableAppbase: types.bool.def(false),
+    enableAppbase: VueTypes.bool.def(false),
     credentials: types.string,
     headers: types.headers,
     queryParams: types.string,
@@ -371,13 +365,15 @@ var ReactiveBase = {
     type: types.string,
     url: types.string,
     mapKey: types.string,
+    initialQueriesSyncTime: types.number,
     className: types.string,
     initialState: VueTypes.object.def({}),
     transformRequest: types.func,
     transformResponse: types.func,
     as: VueTypes.string.def('div'),
     getSearchParams: types.func,
-    setSearchParams: types.func
+    setSearchParams: types.func,
+    mongodb: types.mongodb
   },
   provide: function provide() {
     return {
@@ -417,6 +413,27 @@ var ReactiveBase = {
           this.store.dispatch(updateAnalyticsConfig(newVal));
         }
       }
+    },
+    mongodb: function mongodb() {
+      this.updateState(this.$props);
+    }
+  },
+  computed: {
+    getHeaders: function getHeaders() {
+      var _this$$props = this.$props,
+          enableAppbase = _this$$props.enableAppbase,
+          headers = _this$$props.headers,
+          appbaseConfig = _this$$props.appbaseConfig,
+          mongodb = _this$$props.mongodb;
+
+      var _ref = appbaseConfig || {},
+          enableTelemetry = _ref.enableTelemetry;
+
+      return _extends({}, enableAppbase && !mongodb && _extends({
+        'X-Search-Client': X_SEARCH_CLIENT
+      }, enableTelemetry === false && {
+        'X-Enable-Telemetry': false
+      }), headers);
     }
   },
   methods: {
@@ -427,10 +444,10 @@ var ReactiveBase = {
     setStore: function setStore(props) {
       var credentials = props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
 
-      var appbaseConfig = _extends(_extends({}, props.analyticsConfig), props.appbaseConfig);
+      var appbaseConfig = _extends({}, props.analyticsConfig, props.appbaseConfig);
 
       var config = {
-        url: props.url && props.url.trim() !== '' ? props.url : 'https://scalr.api.appbase.io',
+        url: props.url && props.url.trim() !== '' ? props.url : '',
         app: props.app,
         credentials: credentials,
         type: props.type ? props.type : '*',
@@ -438,7 +455,8 @@ var ReactiveBase = {
         transformResponse: props.transformResponse,
         enableAppbase: props.enableAppbase,
         analytics: props.appbaseConfig ? props.appbaseConfig.recordAnalytics : props.analytics,
-        analyticsConfig: appbaseConfig
+        analyticsConfig: appbaseConfig,
+        mongodb: props.mongodb
       };
       var queryParams = '';
 
@@ -450,9 +468,10 @@ var ReactiveBase = {
 
       var params = new URLSearchParams(queryParams);
       var selectedValues = {};
+      var urlValues = {};
       Array.from(params.keys()).forEach(function (key) {
         try {
-          var _extends2;
+          var _extends2, _extends3;
 
           var parsedParams = JSON.parse(params.get(key));
           var selectedValue = {};
@@ -464,13 +483,13 @@ var ReactiveBase = {
           }
 
           if (parsedParams.category) selectedValue.category = parsedParams.category;
-          selectedValues = _extends(_extends({}, selectedValues), {}, (_extends2 = {}, _extends2[key] = selectedValue, _extends2));
+          selectedValue.reference = 'URL';
+          selectedValues = _extends({}, selectedValues, (_extends2 = {}, _extends2[key] = selectedValue, _extends2));
+          urlValues = _extends({}, urlValues, (_extends3 = {}, _extends3[key] = selectedValue.value, _extends3));
         } catch (e) {// Do not add to selectedValues if JSON parsing fails.
         }
       });
-      var _props$headers = props.headers,
-          headers = _props$headers === void 0 ? {} : _props$headers,
-          themePreset = props.themePreset;
+      var themePreset = props.themePreset;
       var appbaseRef = Appbase(config);
 
       if (this.$props.transformRequest) {
@@ -482,13 +501,16 @@ var ReactiveBase = {
       }
 
       var initialState = _extends({
-        config: _extends(_extends({}, config), {}, {
+        config: _extends({}, config, {
+          initialQueriesSyncTime: props.initialQueriesSyncTime,
+          initialTimestamp: new Date().getTime(),
           mapKey: props.mapKey,
           themePreset: themePreset
         }),
         appbaseRef: appbaseRef,
         selectedValues: selectedValues,
-        headers: headers
+        urlValues: urlValues,
+        headers: this.getHeaders
       }, this.$props.initialState);
 
       this.store = configureStore(initialState);
@@ -497,10 +519,9 @@ var ReactiveBase = {
   render: function render() {
     var h = arguments[0];
     var children = this.$slots["default"];
-    var _this$$props = this.$props,
-        headers = _this$$props.headers,
-        style = _this$$props.style,
-        className = _this$$props.className;
+    var _this$$props2 = this.$props,
+        style = _this$$props2.style,
+        className = _this$$props2.className;
     return h(Provider, {
       "attrs": {
         "store": this.store
@@ -508,7 +529,7 @@ var ReactiveBase = {
     }, [h(URLParamsProvider$1, {
       "attrs": {
         "as": this.$props.as,
-        "headers": headers,
+        "headers": this.getHeaders,
         "className": className,
         "getSearchParams": this.getSearchParams,
         "setSearchParams": this.setSearchParams

package/dist/es/ReactiveComponent.js

@@ -1,13 +1,14 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, c as connect } from './index-1fe91a0a.js';
-import { C as ComponentWrapper } from './ComponentWrapper-d0b21b95.js';
+import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, c as connect } from './index-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
 
+var _excluded = ["options"];
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
     setCustomQuery = Actions.setCustomQuery,
@@ -15,15 +16,16 @@ var updateQuery = Actions.updateQuery,
 var parseHits = helper.parseHits,
     isEqual = helper.isEqual,
     getCompositeAggsQuery = helper.getCompositeAggsQuery,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
-    getResultStats = helper.getResultStats;
+    getResultStats = helper.getResultStats,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var ReactiveComponent = {
   name: 'ReactiveComponent',
   props: {
     componentId: types.stringRequired,
     aggregationField: types.string,
     aggregationSize: VueTypes.number,
-    size: VueTypes.number.def(20),
+    size: VueTypes.number,
     defaultQuery: types.func,
     customQuery: types.func,
     filterLabel: types.string,
@@ -31,7 +33,8 @@ var ReactiveComponent = {
     showFilter: VueTypes.bool.def(true),
     URLParams: VueTypes.bool.def(false),
     distinctField: types.string,
-    distinctFieldConfig: types.props
+    distinctFieldConfig: types.props,
+    index: VueTypes.string
   },
   created: function created() {
     var _this = this;
@@ -40,33 +43,35 @@ var ReactiveComponent = {
     this.internalComponent = null;
     this.$defaultQuery = null; // Set custom query in store
 
-    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, undefined);
+    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;
+        distinctFieldConfig = props.distinctFieldConfig,
+        index = props.index;
 
-    if (this.config.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+    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.config.enableAppbase && (distinctField || distinctFieldConfig)) {
+    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 (customQuery) {
-      var calcCustomQuery = customQuery(props);
-
-      var _ref = calcCustomQuery || {},
-          query = _ref.query;
+    if (!this.enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
 
-      var customQueryOptions = calcCustomQuery ? getOptionsFromQuery(calcCustomQuery) : null;
+    if (customQuery) {
+      var calcCustomQuery = customQuery(this.selectedValue, props);
+      var query = extractQueryFromCustomQuery(calcCustomQuery);
+      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
 
       if (customQueryOptions) {
-        this.setQueryOptions(componentId, _extends(_extends({}, customQueryOptions), this.getAggsQuery()), false);
+        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
       } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
 
       this.updateQuery({
@@ -79,26 +84,37 @@ var ReactiveComponent = {
       });
     }
 
-    this.setQuery = function (_ref2) {
-      var options = _ref2.options,
-          obj = _objectWithoutPropertiesLoose(_ref2, ["options"]);
+    this.setQuery = function (_ref) {
+      var options = _ref.options,
+          obj = _objectWithoutPropertiesLoose(_ref, _excluded);
 
       if (options) {
-        _this.setQueryOptions(props.componentId, _extends(_extends({}, options), _this.getAggsQuery()), false);
-      } // Update customQuery field for RS API
+        _this.setQueryOptions(props.componentId, _extends({}, options, _this.getAggsQuery()), false);
+      }
+
+      var queryToBeSet = obj.query; // when enableAppbase is true, Backend throws error because of repeated query in request body
 
+      if (obj && obj.query && obj.query.query) {
+        queryToBeSet = obj.query.query;
+      }
 
-      if (obj && obj.query || options) {
-        var customQueryCalc = _extends({}, options);
+      var customQueryCalc = _extends({}, options); // Update customQuery field for RS API
 
-        if (obj && obj.query) {
-          customQueryCalc.query = obj.query;
+
+      if (queryToBeSet || options) {
+        if (queryToBeSet.query) {
+          if (queryToBeSet.id) {
+            customQueryCalc = queryToBeSet;
+          } else {
+            customQueryCalc.query = queryToBeSet;
+          }
         }
 
         _this.setCustomQuery(props.componentId, customQueryCalc);
       }
 
-      _this.updateQuery(_extends(_extends({}, obj), {}, {
+      _this.updateQuery(_extends({}, obj, {
+        query: customQueryCalc,
         componentId: props.componentId,
         label: props.filterLabel,
         showFilter: props.showFilter,
@@ -112,20 +128,18 @@ var ReactiveComponent = {
   },
   beforeMount: function beforeMount() {
     if (this.internalComponent && this.$props.defaultQuery) {
-      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, undefined);
-      this.$defaultQuery = this.$props.defaultQuery();
-
-      var _ref3 = this.$defaultQuery || {},
-          query = _ref3.query,
-          queryOptions = _objectWithoutPropertiesLoose(_ref3, ["query"]);
+      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, _extends(_extends({}, queryOptions), this.getAggsQuery()), false);
+        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
       } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
 
       this.updateQuery({
         componentId: this.internalComponent,
-        query: query || null
+        query: query
       });
     }
   },
@@ -171,43 +185,39 @@ var ReactiveComponent = {
       }
     },
     defaultQuery: function defaultQuery(newVal, oldVal) {
-      if (newVal && !isQueryIdentical(newVal, oldVal, undefined, this.$props)) {
-        this.$defaultQuery = newVal();
-
-        var _ref4 = this.$defaultQuery || {},
-            query = _ref4.query,
-            queryOptions = _objectWithoutPropertiesLoose(_ref4, ["query"]);
+      if (newVal && !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, _extends(_extends({}, queryOptions), this.getAggsQuery()), false);
+          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
         } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false); // Update default query for RS API
 
 
-        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, undefined);
+        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
         this.updateQuery({
           componentId: this.internalComponent,
-          query: query || null
+          query: query
         });
       }
     },
     customQuery: function customQuery(newVal, oldVal) {
-      if (newVal && !isQueryIdentical(newVal, oldVal, undefined, this.$props)) {
+      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
         var componentId = this.$props.componentId;
-        this.$customQuery = newVal(this.$props);
-
-        var _ref5 = this.$customQuery || {},
-            query = _ref5.query,
-            queryOptions = _objectWithoutPropertiesLoose(_ref5, ["query"]);
+        this.$customQuery = newVal(this.selectedValue, this.$props);
+        var query = extractQueryFromCustomQuery(this.$customQuery);
+        var queryOptions = getOptionsForCustomQuery(this.$customQuery);
 
         if (queryOptions) {
-          this.setQueryOptions(componentId, _extends(_extends({}, queryOptions), this.getAggsQuery()), false);
+          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
         } else this.setQueryOptions(componentId, this.getAggsQuery(), false); // Update custom query for RS API
 
 
-        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, undefined);
+        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
         this.updateQuery({
           componentId: componentId,
-          query: query || null
+          query: query
         });
       }
     }
@@ -221,10 +231,10 @@ var ReactiveComponent = {
           isLoading = this.isLoading,
           selectedValue = this.selectedValue;
 
-      var propsToBePassed = _extends(_extends({
+      var propsToBePassed = _extends({
         error: error,
         loading: isLoading
-      }, this.getData()), {}, {
+      }, this.getData(), {
         value: selectedValue,
         setQuery: this.setQuery
       });
@@ -287,6 +297,10 @@ var ReactiveComponent = {
   }
 };
 
+ReactiveComponent.hasInternalComponent = function (props) {
+  return !!props.defaultQuery;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
@@ -301,7 +315,7 @@ var mapStateToProps = function mapStateToProps(state, props) {
     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],
-    config: state.config
+    enableAppbase: state.config.enableAppbase
   };
 };