@appbaseio/reactivesearch-vue 1.16.0-alpha.6 → 1.16.0-alpha.62

package/dist/cjs/ResultCard.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
-var Title = require('./Title-65d39104.js');
-var Card = require('./Card-9748fbb2.js');
+var Title = require('./Title-1de7d0f4.js');
+var Card = require('./Card-642547a8.js');
 
 var ResultCardTitle = {
   name: 'ResultCardTitle',
@@ -27,6 +27,7 @@ ResultCardTitle.install = function (Vue) {
   Vue.component(ResultCardTitle.name, ResultCardTitle);
 };
 
+var _excluded = ["src"];
 var ResultCardImage = {
   name: 'ResultCardImage',
   props: {
@@ -37,7 +38,7 @@ var ResultCardImage = {
 
     var _this$$props = this.$props,
         src = _this$$props.src,
-        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, ["src"]);
+        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, _excluded);
 
     return h(Card.Image, _mergeJSXProps([{
       "style": {
@@ -66,6 +67,7 @@ ResultCardDescription.install = function (Vue) {
   Vue.component(ResultCardDescription.name, ResultCardDescription);
 };
 
+var _excluded$1 = ["href", "target"];
 var ResultCard = {
   name: 'ResultCard',
   components: {
@@ -84,7 +86,7 @@ var ResultCard = {
     var _this$$props = this.$props,
         href = _this$$props.href,
         target = _this$$props.target,
-        rest = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, ["href", "target"]);
+        rest = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, _excluded$1);
 
     return h(Card.Card, _mergeJSXProps([{
       "attrs": {

package/dist/cjs/ResultList.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
-var Title = require('./Title-65d39104.js');
-var ListItem = require('./ListItem-84d185cf.js');
+var Title = require('./Title-1de7d0f4.js');
+var ListItem = require('./ListItem-8c9e0d68.js');
 
 var ResultListContent = {
   name: 'ResultListContent',
@@ -44,6 +44,7 @@ ResultListDescription.install = function (Vue) {
   Vue.component(ResultListDescription.name, ResultListDescription);
 };
 
+var _excluded = ["src", "small"];
 var ResultListImage = {
   name: 'ResultListImage',
   props: {
@@ -56,7 +57,7 @@ var ResultListImage = {
     var _this$$props = this.$props,
         src = _this$$props.src,
         small = _this$$props.small,
-        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, ["src", "small"]);
+        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, _excluded);
 
     return h(ListItem.Image, _mergeJSXProps([{
       "attrs": {
@@ -84,6 +85,7 @@ ResultListTitle.install = function (Vue) {
   Vue.component(ResultListTitle.name, ResultListTitle);
 };
 
+var _excluded$1 = ["href", "target"];
 var ResultList = {
   name: 'ResultList',
   props: {
@@ -123,7 +125,7 @@ var ResultList = {
     var _this$$props = this.$props,
         href = _this$$props.href,
         target = _this$$props.target,
-        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, ["href", "target"]);
+        props = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_this$$props, _excluded$1);
 
     var hasImage = this.hasImage,
         isSmall = this.isSmall;

package/dist/cjs/SelectedFilters.js

@@ -6,21 +6,22 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var Button = require('./Button-d48d4365.js');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var Button = require('./Button-446f819e.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('redux');
-var index = require('./index-baca18c4.js');
-var Title = require('./Title-65d39104.js');
-var Container = require('./Container-6cdd3864.js');
+var index = require('./index-6a167fe0.js');
+var Title = require('./Title-1de7d0f4.js');
+var Container = require('./Container-daf30918.js');
 
 var setValue = configureStore.Actions.setValue,
-    clearValues = configureStore.Actions.clearValues;
+    clearValues = configureStore.Actions.clearValues,
+    resetValuesToDefault = configureStore.Actions.resetValuesToDefault;
 var getClassName = configureStore.helper.getClassName,
     handleA11yAction = configureStore.helper.handleA11yAction;
 var SelectedFilters = {
@@ -30,7 +31,10 @@ var SelectedFilters = {
     clearAllLabel: VueTypes.string.def('Clear All'),
     innerClass: vueTypes.types.style,
     showClearAll: VueTypes.bool.def(true),
-    title: vueTypes.types.title
+    title: vueTypes.types.title,
+    resetToDefault: VueTypes.bool.def(false),
+    clearAllBlacklistComponents: VueTypes.array,
+    resetToValues: VueTypes.object
   },
   inject: {
     theme: {
@@ -47,7 +51,9 @@ var SelectedFilters = {
         components: this.components,
         selectedValues: this.selectedValues,
         clearValues: this.clearValues,
-        setValue: this.setValue
+        clearValue: this.clearValue,
+        setValue: this.setValue,
+        resetValuesToDefault: this.resetValuesToDefault
       });
     }
 
@@ -57,7 +63,7 @@ var SelectedFilters = {
       "class": Button.filters(this.theme) + " " + (this.$props.className || '')
     }, [this.$props.title && hasValues && h(Title.Title, {
       "class": getClassName(this.$props.innerClass, 'title') || ''
-    }, [this.$props.title]), filtersToRender, this.$props.showClearAll && hasValues ? h(Button.Button, {
+    }, [this.$props.title]), filtersToRender, this.$props.showClearAll && hasValues && filtersToRender.length > 1 ? h(Button.Button, {
       "class": getClassName(this.$props.innerClass, 'button') || '',
       "on": _rollupPluginBabelHelpers._extends({}, {
         click: this.clearValues,
@@ -82,8 +88,31 @@ var SelectedFilters = {
       this.$emit('clear', component, value);
     },
     clearValues: function clearValues() {
-      this.clearValuesAction();
-      this.$emit('clear', null);
+      var resetToDefault = this.resetToDefault,
+          resetToValues = this.resetToValues,
+          clearAllBlacklistComponents = this.clearAllBlacklistComponents;
+
+      if (resetToDefault) {
+        this.resetValuesToDefault(clearAllBlacklistComponents);
+      } else {
+        this.clearValuesAction(resetToValues, clearAllBlacklistComponents);
+      }
+
+      this.$emit('clear', resetToValues);
+    },
+    clearValue: function clearValue(componentId) {
+      var resetToDefault = this.resetToDefault,
+          resetToValues = this.resetToValues;
+
+      if (resetToDefault) {
+        this.resetValuesToDefault(this.components.filter(function (component) {
+          return component !== componentId;
+        }));
+      } else {
+        this.setValue(componentId, (resetToValues == null ? void 0 : resetToValues[componentId]) || null);
+      }
+
+      this.$emit('clear', resetToValues == null ? void 0 : resetToValues[componentId]);
     },
     renderValue: function renderValue(value, isArray) {
       var _this2 = this;
@@ -108,39 +137,41 @@ var SelectedFilters = {
 
       return value;
     },
+    renderFilterButton: function renderFilterButton(component, keyProp, handleRemove, label) {
+      var h = this.$createElement;
+      return h(Button.Button, {
+        "class": getClassName(this.$props.innerClass, 'button') || '',
+        "key": keyProp,
+        "on": _rollupPluginBabelHelpers._extends({}, {
+          click: handleRemove,
+          keypress: function keypress(event) {
+            return handleA11yAction(event, handleRemove);
+          }
+        }),
+        "attrs": {
+          "tabIndex": "0"
+        }
+      }, [h("span", [label]), h("span", ["\u2715"])]);
+    },
     renderFilters: function renderFilters() {
       var _this3 = this;
 
-      var h = this.$createElement;
       var selectedValues = this.selectedValues;
-      return Object.keys(selectedValues).filter(function (id) {
+      var filterComponents = Object.keys(selectedValues).filter(function (id) {
         return _this3.components.includes(id) && selectedValues[id].showFilter;
-      }).map(function (component, index) {
+      });
+      return filterComponents.map(function (component, index$1) {
         var _selectedValues$compo = selectedValues[component],
             label = _selectedValues$compo.label,
             value = _selectedValues$compo.value;
-        var isArray = Array.isArray(value);
+        var isArray = Array.isArray(value); // default behaviour
 
         if (label && (isArray && value.length || !isArray && value)) {
           var valueToRender = _this3.renderValue(value, isArray);
 
-          return h(Button.Button, {
-            "class": getClassName(_this3.$props.innerClass, 'button') || '',
-            "key": component + "-" + (index + 1),
-            "on": _rollupPluginBabelHelpers._extends({}, {
-              click: function click() {
-                return _this3.remove(component, value);
-              },
-              keypress: function keypress(event) {
-                return handleA11yAction(event, function () {
-                  return _this3.remove(component, value);
-                });
-              }
-            }),
-            "attrs": {
-              "tabIndex": "0"
-            }
-          }, [h("span", [selectedValues[component].label, ": ", valueToRender]), h("span", ["\u2715"])]);
+          return _this3.renderFilterButton(component, component + "-" + (index$1 + 1), function () {
+            return _this3.remove(component, value);
+          }, selectedValues[component].label + ": " + index.decodeHtml(valueToRender));
         }
 
         return null;
@@ -163,7 +194,8 @@ var mapStateToProps = function mapStateToProps(state) {
 
 var mapDispatchtoProps = {
   clearValuesAction: clearValues,
-  setValue: setValue
+  setValue: setValue,
+  resetValuesToDefault: resetValuesToDefault
 };
 var RcConnected = index.connect(mapStateToProps, mapDispatchtoProps)(SelectedFilters);
 

package/dist/cjs/SingleDropdownList.js

@@ -6,25 +6,27 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 require('emotion');
 require('@appbaseio/vue-emotion');
 require('polished');
-var Button = require('./Button-d48d4365.js');
-var vueTypes = require('./vueTypes-c21f265b.js');
+var Button = require('./Button-446f819e.js');
+var vueTypes = require('./vueTypes-6de9d2a9.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-baca18c4.js');
-var ComponentWrapper = require('./ComponentWrapper-603848ed.js');
-var Title = require('./Title-65d39104.js');
-require('./Input-95cb19f8.js');
+var index = require('./index-6a167fe0.js');
+var ComponentWrapper = require('./ComponentWrapper-ad3dad02.js');
+require('@vue/babel-helper-vue-jsx-merge-props');
+var Title = require('./Title-1de7d0f4.js');
+require('./CancelSvg-9f258f4f.js');
+require('./Input-e6603a7e.js');
 require('compute-scroll-into-view');
-require('./DownShift-966a58cb.js');
-var Container = require('./Container-6cdd3864.js');
-var utils = require('./utils-ea846a20.js');
-var DropDown = require('./DropDown-f6224ac8.js');
+var Container = require('./Container-daf30918.js');
+require('@appbaseio/reactivecore/lib/utils/suggestions');
+var utils = require('./utils-d6a52588.js');
+var DropDown = require('./DropDown-5513ea77.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -34,9 +36,10 @@ var getQueryOptions = configureStore.helper.getQueryOptions,
     checkValueChange = configureStore.helper.checkValueChange,
     checkPropChange = configureStore.helper.checkPropChange,
     getClassName = configureStore.helper.getClassName,
-    getOptionsFromQuery = configureStore.helper.getOptionsFromQuery,
     isEqual = configureStore.helper.isEqual,
-    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery;
+    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
+    extractQueryFromCustomQuery = configureStore.helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = configureStore.helper.getOptionsForCustomQuery;
 var SingleDropdownList = {
   name: 'SingleDropdownList',
   data: function data() {
@@ -73,19 +76,28 @@ var SingleDropdownList = {
     selectAllLabel: vueTypes.types.string,
     showCount: VueTypes.bool.def(true),
     showFilter: VueTypes.bool.def(true),
-    size: VueTypes.number.def(100),
+    size: VueTypes.number,
     sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
     title: vueTypes.types.title,
     URLParams: VueTypes.bool.def(false),
     showMissing: VueTypes.bool.def(false),
     missingLabel: VueTypes.string.def('N/A'),
     showSearch: VueTypes.bool.def(false),
+    showClear: VueTypes.bool.def(false),
     showLoadMore: VueTypes.bool.def(false),
     loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
-    nestedField: vueTypes.types.string
+    nestedField: vueTypes.types.string,
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   created: function created() {
-    // Set custom and default queries in store
+    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`.');
+    }
+
+    var props = this.$props;
+    this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : []; // Set custom and default queries in store
+
     index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
   },
@@ -104,33 +116,35 @@ var SingleDropdownList = {
     options: function options(newVal, oldVal) {
       var _this = this;
 
-      checkPropChange(oldVal, newVal, function () {
-        var _this$$props = _this.$props,
-            showLoadMore = _this$$props.showLoadMore,
-            dataField = _this$$props.dataField;
-        var modifiedOptions = _this.$data.modifiedOptions;
-
-        if (showLoadMore) {
-          // append options with showLoadMore
-          var buckets = newVal[dataField].buckets;
-          var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
-            return {
-              key: bucket.key[dataField],
-              doc_count: bucket.doc_count
+      if (newVal) {
+        checkPropChange(oldVal, newVal, function () {
+          var _this$$props = _this.$props,
+              showLoadMore = _this$$props.showLoadMore,
+              dataField = _this$$props.dataField;
+          var modifiedOptions = _this.$data.modifiedOptions;
+
+          if (showLoadMore) {
+            // append options with showLoadMore
+            var buckets = newVal[dataField].buckets;
+            var nextOptions = [].concat(modifiedOptions, buckets.map(function (bucket) {
+              return {
+                key: bucket.key[dataField],
+                doc_count: bucket.doc_count
+              };
+            }));
+            var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
+
+            var isLastBucket = !buckets.length;
+            _this.after = {
+              after: after
             };
-          }));
-          var after = newVal[dataField].after_key; // detect the last bucket by checking if the next set of buckets were empty
-
-          var isLastBucket = !buckets.length;
-          _this.after = {
-            after: after
-          };
-          _this.isLastBucket = isLastBucket;
-          _this.modifiedOptions = nextOptions;
-        } else {
-          _this.modifiedOptions = newVal[_this.$props.dataField] ? newVal[_this.$props.dataField].buckets : [];
-        }
-      });
+            _this.isLastBucket = isLastBucket;
+            _this.modifiedOptions = nextOptions;
+          } else {
+            _this.modifiedOptions = newVal[_this.$props.dataField] ? newVal[_this.$props.dataField].buckets : [];
+          }
+        });
+      }
     },
     size: function size() {
       this.updateQueryOptions(this.$props);
@@ -179,12 +193,21 @@ var SingleDropdownList = {
     var renderItemCalc = this.$scopedSlots.renderItem || renderItem;
     var renderErrorCalc = this.$scopedSlots.renderError || renderError;
     var renderLabelCalc = this.$scopedSlots.renderLabel || renderLabel;
+    var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
 
     if (renderErrorCalc && this.error) {
       return index.isFunction(renderErrorCalc) ? renderErrorCalc(this.error) : renderErrorCalc;
     }
 
-    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0) {
+    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
+      if (renderNoResults && index.isFunction(renderNoResults)) {
+        return h("div", [renderNoResults()]);
+      }
+
+      if (renderNoResults && !index.isFunction(renderNoResults)) {
+        return renderNoResults;
+      }
+
       return null;
     }
 
@@ -204,7 +227,7 @@ var SingleDropdownList = {
         "items": [].concat(selectAll, this.$data.modifiedOptions.filter(function (item) {
           return String(item.key).trim().length;
         }).map(function (item) {
-          return _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, item), {}, {
+          return _rollupPluginBabelHelpers._extends({}, item, {
             key: String(item.key)
           });
         })),
@@ -219,6 +242,8 @@ var SingleDropdownList = {
         "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
         "themePreset": this.themePreset,
         "showSearch": this.$props.showSearch,
+        "showClear": this.$props.showClear,
+        "searchPlaceholder": this.$props.searchPlaceholder,
         "transformData": this.$props.transformData,
         "footer": showLoadMore && !isLastBucket && h("div", {
           "attrs": {
@@ -263,22 +288,22 @@ var SingleDropdownList = {
       }
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
-      var defaultQueryOptions;
       var query = SingleDropdownList.defaultQuery(value, props);
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
-        }
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
+        } // Update calculated default query in store
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         index.updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
+        var defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet);
+        this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       }
 
-      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -289,17 +314,15 @@ var SingleDropdownList = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = SingleDropdownList.defaultQuery(value, props);
-      var customQueryOptions;
 
       if (customQuery) {
-        var _ref = customQuery(value, props) || {};
-
-        query = _ref.query;
-        customQueryOptions = getOptionsFromQuery(customQuery(value, props));
+        var customQueryCalc = customQuery(value, props);
+        query = extractQueryFromCustomQuery(customQueryCalc);
         index.updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
+        var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
+        this.setQueryOptions(props.componentId, customQueryOptions, false);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -333,8 +356,8 @@ var SingleDropdownList = {
 
       if (props.defaultQuery) {
         var value = this.$data.currentValue;
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
-        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends(_rollupPluginBabelHelpers._extends({}, queryOptions), defaultQueryOptions));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
+        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
       }
@@ -425,6 +448,10 @@ SingleDropdownList.generateQueryOptions = function (props, after) {
   }) : utils.getAggsQuery(queryOptions, props);
 };
 
+SingleDropdownList.hasInternalComponent = function () {
+  return true;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
@@ -433,7 +460,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || '',
     themePreset: state.config.themePreset,
     error: state.error[props.componentId],
-    componentProps: state.props[props.componentId]
+    componentProps: state.props[props.componentId],
+    enableAppbase: state.config.enableAppbase
   };
 };
 
@@ -445,7 +473,7 @@ var mapDispatchtoProps = {
 };
 var ListConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(SingleDropdownList), {
   componentType: constants.componentTypes.singleDropdownList,
-  internalComponent: true
+  internalComponent: SingleDropdownList.hasInternalComponent()
 });
 
 SingleDropdownList.install = function (Vue) {