@appbaseio/reactivesearch-vue 3.0.0-alpha.7 → 3.0.0-rc.1

package/dist/cjs/{ReactiveComponent-8180c806.js → install-7cdf6798.js}

@@ -14,26 +14,38 @@ var css = require('@emotion/css');
 var Button = require('./Button-d4da7470.js');
 var vueTypes = require('./vueTypes-1bf00978.js');
 var ReactiveList = require('./ReactiveList.js');
-var index = require('./index-1481798c.js');
-var ComponentWrapper = require('./ComponentWrapper-2dc930e1.js');
-var PreferencesConsumer = require('./PreferencesConsumer-2c69ac61.js');
+var transform = require('@appbaseio/reactivecore/lib/utils/transform');
+var index = require('./index-779ed366.js');
+var ComponentWrapper = require('./ComponentWrapper-9146d811.js');
+var PreferencesConsumer = require('./PreferencesConsumer-85dee673.js');
 var Title = require('./Title-8802a218.js');
-var Flex = require('./Flex-d5675ea6.js');
+var ListItem = require('./ListItem-7a682970.js');
+var Flex = require('./Flex-ddde6d26.js');
+var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var DropDown = require('./DropDown-f48bea16.js');
+var DropDown = require('./DropDown-b16418e9.js');
 var Input = require('./Input-497be42a.js');
 var Container = require('./Container-29f049b2.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
+var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
+var FormControlList = require('./FormControlList-fadd792f.js');
+var utils = require('./utils-c9bd5628.js');
 var SingleList = require('./SingleList.js');
 var MultiList = require('./MultiList.js');
+var types = _interopDefault(require('@appbaseio/reactivecore/lib/utils/types'));
 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');
 var RangeSlider = require('./RangeSlider.js');
 var RangeInput = require('./RangeInput.js');
+var SelectedFilters = require('./SelectedFilters.js');
+var ResultCard = require('./ResultCard.js');
+var ResultList = require('./ResultList.js');
+var StateProvider = require('./StateProvider.js');
 
 var _templateObject;
 var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n"])));
@@ -1854,334 +1866,834 @@ SBConnected.install = function (Vue) {
 // Add componentType for SSR
 SBConnected.componentType = constants.componentTypes.searchBox;
 
-var _excluded = ["options"];
-var updateQuery$1 = reactivecore.Actions.updateQuery,
-  setQueryOptions = reactivecore.Actions.setQueryOptions,
-  setCustomQuery$1 = reactivecore.Actions.setCustomQuery,
-  setDefaultQuery$1 = reactivecore.Actions.setDefaultQuery;
-var parseHits = reactivecore.helper.parseHits,
-  isEqual$1 = reactivecore.helper.isEqual,
-  getCompositeAggsQuery$1 = reactivecore.helper.getCompositeAggsQuery,
-  getResultStats$1 = reactivecore.helper.getResultStats,
-  extractQueryFromCustomQuery = reactivecore.helper.extractQueryFromCustomQuery,
-  getOptionsForCustomQuery = reactivecore.helper.getOptionsForCustomQuery;
-var ReactiveComponent = {
-  name: 'ReactiveComponent',
+var _templateObject$8, _templateObject2$1;
+var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+var HierarchicalMenuListItem = vueEmotion.styled('li')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
+  return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
+});
+
+var HierarchicalMenuListItemComponent = {
+  name: 'HierarchicalMenuListItemComponent',
+  data: function data() {
+    return {
+      isExpanded: false,
+      newParentPath: ''
+    };
+  },
+  created: function created() {
+    var listItemLabel = this.listItem.key;
+    var newParentPath = listItemLabel;
+    if (this.parentPath) {
+      newParentPath = "" + this.parentPath + constants.TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
+    }
+    this.newParentPath = newParentPath;
+    this.isExpanded = !!helper.recLookup(this.selectedValues, newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
+  },
+  watch: {
+    listItem: function listItem(newVal) {
+      if (newVal.initiallyExpanded) {
+        this.isExpanded = newVal.initiallyExpanded;
+      }
+    },
+    selectedValues: function selectedValues(newVal) {
+      this.isExpanded = !!helper.recLookup(newVal, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
+    }
+  },
   props: {
-    componentId: vueTypes.types.stringRequired,
-    aggregationField: vueTypes.types.string,
-    aggregationSize: VueTypes.number,
-    size: VueTypes.number,
-    defaultQuery: vueTypes.types.func,
+    parentPath: types.string,
+    selectedValues: types.rawData,
+    mode: types.string,
+    searchTerm: types.string,
+    listItem: types.rawData,
+    showLine: types.bool,
+    renderItem: types.func,
+    handleListItemClick: types.func,
+    renderSwitcherIcon: types.func,
+    showCheckbox: VueTypes.bool,
+    innerClass: types.style,
+    showRadio: VueTypes.bool,
+    renderIcon: types.func,
+    showCount: VueTypes.bool,
+    showSwitcherIcon: types.bool,
+    switcherIcon: types.children
+  },
+  render: function render() {
+    var _this = this;
+    var _this$$props = this.$props,
+      selectedValues = _this$$props.selectedValues,
+      mode = _this$$props.mode,
+      searchTerm = _this$$props.searchTerm,
+      listItem = _this$$props.listItem,
+      parentPath = _this$$props.parentPath,
+      showLine = _this$$props.showLine,
+      renderItem = _this$$props.renderItem,
+      handleListItemClick = _this$$props.handleListItemClick,
+      showCheckbox = _this$$props.showCheckbox,
+      innerClass = _this$$props.innerClass,
+      showRadio = _this$$props.showRadio,
+      renderIcon = _this$$props.renderIcon,
+      showCount = _this$$props.showCount,
+      showSwitcherIcon = _this$$props.showSwitcherIcon;
+    if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
+      return null;
+    }
+    var listItemLabel = listItem.key;
+    var listItemCount = listItem.count;
+    var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
+    var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
+      if (showSwitcherIcon === false) {
+        return null;
+      }
+      var switcherIcon = _this.$props.switcherIcon;
+      if (switcherIcon) return switcherIcon(isExpandedProp);
+      return (
+        /* eslint-disable jsx-a11y/click-events-have-key-events
+        , jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
+        vue.createVNode("span", {
+          "tabIndex": "0",
+          "onClick": function onClick(e) {
+            e.stopPropagation();
+            _this.isExpanded = !_this.isExpanded;
+          },
+          "class": "--switcher-icon"
+        }, [vue.createTextVNode("\u27A4")])
+      );
+    };
+    var isSelected = false;
+    if (mode === 'single') {
+      if (helper.recLookup(selectedValues, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR) === true) {
+        isSelected = true;
+      }
+    } else {
+      isSelected = !!helper.recLookup(selectedValues, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
+    }
+    return vue.createVNode(HierarchicalMenuListItem, {
+      "class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
+      "key": this.newParentPath,
+      "showLine": showLine
+    }, {
+      "default": function _default() {
+        return [vue.createVNode(ListItem.ListItem, {
+          "isTreeListItem": true,
+          "onClick": function onClick() {
+            handleListItemClick(listItemLabel, parentPath);
+          },
+          "style": {
+            textDecoration: 'none'
+          }
+        }, {
+          "default": function _default() {
+            return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : vue.createVNode(Flex.Flex, {
+              "alignItems": "center",
+              "gap": "5px"
+            }, {
+              "default": function _default() {
+                return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && vue.createVNode(Flex.Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [vue.createVNode(FormControlList.Checkbox, {
+                      "type": "checkbox",
+                      "class": helper.getClassName(innerClass, 'checkbox') || null,
+                      "checked": isSelected,
+                      "id": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "name": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true
+                    }, null), vue.createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), mode === 'single' && showRadio && vue.createVNode(Flex.Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [vue.createVNode(FormControlList.Radio, {
+                      "checked": isSelected,
+                      "class": helper.getClassName(innerClass, 'radio') || null,
+                      "id": listItemLabel + "-radio-" + _this.newParentPath,
+                      "name": listItemLabel + "-radio-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true,
+                      "type": "radio"
+                    }, null), vue.createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), ' ', renderIcon(isLeafNode), vue.createVNode("div", {
+                  "class": "--list-item-label-count-wrapper"
+                }, [vue.createVNode("span", {
+                  "class": "--list-item-label " + (helper.getClassName(innerClass, 'label') || '')
+                }, [listItemLabel]), showCount && vue.createVNode("span", {
+                  "class": "--list-item-count " + (helper.getClassName(innerClass, 'count') || '')
+                }, [listItemCount])])];
+              }
+            })];
+          }
+        }), isLeafNode === false && vue.createVNode("div", {
+          "class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
+        }, [vue.createVNode(HierarchicalMenuComponent, {
+          "key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
+          "listArray": listItem.list,
+          "parentPath": _this.newParentPath,
+          "isExpanded": _this.isExpanded,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: selectedValues,
+            searchTerm: searchTerm,
+            showLine: showLine,
+            renderItem: renderItem,
+            handleListItemClick: handleListItemClick,
+            renderSwitcherIcon: renderSwitcherIcon,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: _this.$props.switcherIcon
+          }
+        }, null)])];
+      }
+    });
+  }
+};
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+var HierarchicalMenuComponent = {
+  name: 'HierarchicalMenuComponent',
+  props: {
+    listArray: VueTypes.arrayOf(VueTypes.object),
+    // array of objects
+    parentPath: VueTypes.string.def(''),
+    isExpanded: VueTypes.bool.def(false),
+    listItemProps: types.rawData
+  },
+  render: function render() {
+    var _slot;
+    var _this$$props = this.$props,
+      listArray = _this$$props.listArray,
+      isExpanded = _this$$props.isExpanded,
+      parentPath = _this$$props.parentPath,
+      listItemProps = _this$$props.listItemProps;
+    if (!Array.isArray(listArray) || listArray.length === 0) {
+      return null;
+    }
+    return vue.createVNode(HierarchicalMenuList, {
+      "class": "" + (isExpanded ? '--open' : ''),
+      "isSelected": isExpanded
+    }, _isSlot$1(_slot = listArray.map(function (listItem) {
+      return vue.createVNode(HierarchicalMenuListItemComponent, vue.mergeProps({
+        "key": parentPath + "__" + JSON.stringify(listItem),
+        "parentPath": parentPath,
+        "listItem": listItem
+      }, listItemProps), null);
+    })) ? _slot : {
+      "default": function _default() {
+        return [_slot];
+      }
+    });
+  }
+};
+
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+var updateQueryAction = reactivecore.Actions.updateQuery,
+  setQueryOptions = reactivecore.Actions.setQueryOptions;
+var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
+  var valueToSet = {};
+  if (valueArray.length) {
+    var newSelectedValues = {};
+    valueArray.forEach(function (valueItem) {
+      helper.setDeep(newSelectedValues, valueItem.split(' > '), !helper.recLookup(newSelectedValues, valueItem.split(' > '), constants.TREELIST_VALUES_PATH_SEPARATOR), true);
+    });
+    valueToSet = newSelectedValues;
+  }
+  return valueToSet;
+};
+var TreeList = {
+  name: 'TreeList',
+  props: {
+    selectedValue: vueTypes.types.selectedValue,
+    error: vueTypes.types.title,
+    rawData: vueTypes.types.rawData,
+    aggregationData: vueTypes.types.rawData,
+    themePreset: vueTypes.types.themePreset,
+    updateQueryAction: vueTypes.types.funcRequired,
+    setQueryOptions: vueTypes.types.funcRequired,
+    // component props
+    componentId: vueTypes.types.string.isRequired,
+    className: vueTypes.types.string,
+    style: vueTypes.types.style,
+    showRadio: VueTypes.bool.def(false),
+    showCheckbox: vueTypes.types.bool.def(false),
+    mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
+    showCount: VueTypes.bool.def(false),
+    showSearch: VueTypes.bool.def(false),
+    showIcon: VueTypes.bool.def(false),
+    icon: vueTypes.types.children,
+    showLeafIcon: VueTypes.bool.def(false),
+    leafIcon: vueTypes.types.children,
+    showLine: VueTypes.bool.def(false),
+    switcherIcon: vueTypes.types.func,
+    render: vueTypes.types.func,
+    renderItem: vueTypes.types.func,
+    innerClass: vueTypes.types.style,
+    placeholder: vueTypes.types.string,
+    title: vueTypes.types.title,
+    isLoading: vueTypes.types.bool,
+    dataField: vueTypes.types.stringArray.isRequired,
+    onQueryChange: vueTypes.types.func,
+    defaultValue: vueTypes.types.stringArray,
+    value: vueTypes.types.stringArray,
     customQuery: vueTypes.types.func,
+    defaultQuery: vueTypes.types.func,
+    enableAppbase: vueTypes.types.bool,
+    index: vueTypes.types.string,
+    showFilter: vueTypes.types.bool,
+    URLParams: vueTypes.types.bool,
     filterLabel: vueTypes.types.string,
+    onChange: vueTypes.types.func,
+    onValueChange: vueTypes.types.func,
+    beforeValueChange: vueTypes.types.func,
+    sortBy: vueTypes.types.sortByWithCount.def('count'),
+    onError: vueTypes.types.func,
+    showSwitcherIcon: vueTypes.types.bool.def(true),
+    renderError: vueTypes.types.title,
+    renderNoResults: vueTypes.types.func,
+    loader: vueTypes.types.title,
+    aggergationSize: vueTypes.types.number,
+    endpoint: vueTypes.types.endpoint,
+    queryFormat: vueTypes.types.queryFormatSearch.def('or'),
+    size: vueTypes.types.number.def(100),
+    nestedField: 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
+    transformData: vueTypes.types.func,
+    selectAllLabel: vueTypes.types.string,
+    showMissing: VueTypes.bool.def(false),
+    missingLabel: VueTypes.string.def('N/A')
+  },
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      selectedValues: {},
+      searchTerm: '',
+      aggregationData: []
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
   },
   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;
-    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
-      });
+    var componentId = props.componentId;
+    var defaultValue = this.defaultValue || this.value;
+    var currentValueArray = this.selectedValue || defaultValue || [];
+    // update local state for selected values
+    if (currentValueArray.length) {
+      var newSelectedValues = transformValueIntoLocalState(currentValueArray);
+      this.setValue(newSelectedValues, true);
     }
-    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
-      });
+    // Set custom and default queries in store
+    helper.updateCustomQuery(componentId, props, currentValueArray);
+    helper.updateDefaultQuery(componentId, props, currentValueArray);
+    this.updateQueryOptions();
+  },
+  mounted: function mounted() {
+    var _this$$props = this.$props,
+      enableAppbase = _this$$props.enableAppbase,
+      index = _this$$props.index;
+    if (!enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
   },
   watch: {
-    hits: function hits(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    defaultQuery: function defaultQuery() {
+      this.updateDefaultQuery();
+      this.updateQuery([]);
     },
-    rawData: function rawData(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    customQuery: function customQuery() {
+      var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQuery(valueArray);
+    },
+    sortBy: function sortBy() {
+      this.updateQueryOptions();
+    },
+    dataField: function dataField() {
+      var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQueryOptions();
+      this.updateQuery(valueArray);
+    },
+    value: function value(newVal, oldVal) {
+      if (!helper.isEqual(newVal, oldVal)) {
+        this.setValue(newVal);
       }
     },
-    aggregations: function aggregations(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    selectedValue: function selectedValue(newVal) {
+      if (!helper.isEqual(helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues), newVal)) {
+        var _this$$props2 = this.$props,
+          value = _this$$props2.value,
+          onChange = _this$$props2.onChange;
+        var valueToSet = [];
+        if (Array.isArray(newVal) && newVal.length) {
+          valueToSet = newVal;
+        }
+        if (value === undefined) {
+          this.setValue(valueToSet);
+        } else if (onChange && !helper.isEqual(value, valueToSet)) {
+          onChange(valueToSet);
+        }
       }
     },
     aggregationData: function aggregationData(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+      if (newVal && !helper.isEqual(newVal, oldVal)) {
+        this.$data.aggregationData = newVal;
       }
+    }
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer() {
+      return index.hasCustomRenderer(this);
+    }
+  },
+  methods: {
+    renderIcon: function renderIcon(isLeafNode) {
+      var _this$$props3 = this.$props,
+        showIcon = _this$$props3.showIcon,
+        showLeafIcon = _this$$props3.showLeafIcon,
+        icon = _this$$props3.icon;
+      if (isLeafNode) {
+        if (!showLeafIcon) return null;
+        var _ref = this.$slots || this.$props,
+          leafIcon = _ref.leafIcon;
+        if (leafIcon) return leafIcon();
+        return vue.createVNode("span", {
+          "role": "img",
+          "aria-label": "file",
+          "class": "--leaf-icon"
+        }, [vue.createVNode("svg", {
+          "viewBox": "64 64 896 896",
+          "focusable": "false",
+          "data-icon": "file",
+          "width": "1em",
+          "height": "1em",
+          "fill": "currentColor",
+          "aria-hidden": "true"
+        }, [vue.createVNode("path", {
+          "d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
+        }, null)])]);
+      }
+      if (!showIcon) return null;
+      if (icon) {
+        return icon;
+      }
+      if (this.$slots.icon) {
+        return this.$slots.icon();
+      }
+      return vue.createVNode("span", {
+        "role": "img",
+        "aria-label": "folder-open",
+        "class": "--folder-icon"
+      }, [vue.createVNode("svg", {
+        "viewBox": "64 64 896 896",
+        "focusable": "false",
+        "data-icon": "folder-open",
+        "width": "1em",
+        "height": "1em",
+        "fill": "currentColor",
+        "aria-hidden": "true"
+      }, [vue.createVNode("path", {
+        "d": "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"
+      }, null)])]);
     },
-    promotedResults: function promotedResults(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    getTransformedData: function getTransformedData() {
+      var _this$$props4 = this.$props,
+        dataField = _this$$props4.dataField,
+        showSearch = _this$$props4.showSearch;
+      var transformedData = helper.transformRawTreeListData(this.$data.aggregationData, dataField);
+      var filteredData = [];
+      if (showSearch && this.searchTerm) {
+        filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
+      }
+      return filteredData.length ? filteredData : transformedData;
     },
-    hidden: function hidden(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
-      }
+    handleInputChange: function handleInputChange(e) {
+      var value = e.target.value;
+      this.searchTerm = value;
     },
-    total: function total(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    renderSearch: function renderSearch() {
+      var _this$$props5 = this.$props,
+        showSearch = _this$$props5.showSearch,
+        innerClass = _this$$props5.innerClass,
+        placeholder = _this$$props5.placeholder,
+        componentId = _this$$props5.componentId,
+        themePreset = _this$$props5.themePreset;
+      if (showSearch) {
+        return vue.createVNode(Input.Input, {
+          "class": helper.getClassName(innerClass, 'input') || null,
+          "onInput": this.handleInputChange,
+          "value": this.searchTerm,
+          "placeholder": placeholder || 'Search',
+          "style": {
+            margin: '0 0 8px'
+          },
+          "aria-label": componentId + "-search",
+          "themePreset": themePreset
+        }, null);
       }
+      return null;
     },
-    time: function time(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        this.$emit('data', this.getData());
+    handleListItemClick: function handleListItemClick(key, parentPath) {
+      var path = key;
+      if (parentPath) {
+        path = "" + parentPath + constants.TREELIST_VALUES_PATH_SEPARATOR + key;
+      }
+      var newSelectedValues = _rollupPluginBabelHelpers._extends({}, this.selectedValues);
+      if (this.$props.mode === 'single') {
+        newSelectedValues = {};
+        helper.setDeep(newSelectedValues, path.split(constants.TREELIST_VALUES_PATH_SEPARATOR), true, true);
+      } else {
+        var newValue = !helper.recLookup(newSelectedValues, path, constants.TREELIST_VALUES_PATH_SEPARATOR);
+        helper.setDeep(newSelectedValues, path.split(constants.TREELIST_VALUES_PATH_SEPARATOR), newValue, true);
+      }
+      newSelectedValues = utils.sanitizeObject(_rollupPluginBabelHelpers._extends({}, newSelectedValues));
+      if (this.$props.value === undefined) {
+        this.setValue(newSelectedValues);
+      } else if (this.$props.onChange) {
+        var valueToSet = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(newSelectedValues);
+        this.$props.onChange(valueToSet);
       }
     },
-    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
-        });
+    filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
+      var _this = this;
+      if (!(listArray && Array.isArray(listArray) && listArray.length)) {
+        return null;
       }
+      var result = [];
+      listArray.forEach(function (ele) {
+        var isLeafItem = !ele.list;
+        var newParentPath = ele.key;
+        if (parentPath) {
+          newParentPath = parentPath + "." + ele.key;
+        }
+        var keyHasSearchTerm = suggestions.replaceDiacritics(ele.key).toLowerCase().includes(suggestions.replaceDiacritics(_this.$data.searchTerm).toLowerCase()) || helper.recLookup(_this.$data.selectedValues, newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
+        if (isLeafItem && keyHasSearchTerm) {
+          result.push(_rollupPluginBabelHelpers._extends({}, ele, {
+            initiallyExpanded: keyHasSearchTerm
+          }));
+        } else if (!isLeafItem) {
+          var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
+          if (keyHasSearchTerm || !!filteredChildrenItems.length) {
+            result.push(_rollupPluginBabelHelpers._extends({}, ele, {
+              initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
+              list: filteredChildrenItems
+            }));
+          }
+        }
+      });
+      return result;
     },
-    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
+    getComponent: function getComponent() {
+      var _this$$props6 = this.$props,
+        rawData = _this$$props6.rawData,
+        error = _this$$props6.error,
+        isLoading = _this$$props6.isLoading;
+      var data = {
+        data: this.getTransformedData(),
+        rawData: rawData,
+        error: error,
+        handleClick: this.handleListItemClick,
+        value: this.$data.selectedValues,
+        loading: isLoading,
+        PATH_SEPARATOR: constants.TREELIST_VALUES_PATH_SEPARATOR
+      };
+      return this.$slots.render(data) || helper.getComponent(data, this.$props);
+    },
+    getDefaultQuery: function getDefaultQuery(value) {
+      var _this2 = this;
+      var query = null;
+      var type = 'term';
+      var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+      if (value) {
+        var _bool;
+        // adds a sub-query with must as an array of objects for each term/value
+        var queryArray = value.map(function (item) {
+          return {
+            bool: {
+              must: item.split(' > ').map(function (subItem, i) {
+                var _type, _ref2;
+                return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
+              })
+            }
+          };
         });
+        var listQuery = {
+          bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
+        };
+        query = value.length ? listQuery : null;
       }
-    }
-  },
-  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) {
+      if (query && this.$props.nestedField) {
         return {
-          aggs: getCompositeAggsQuery$1({
-            props: this.$props,
-            showTopHits: true,
-            value: this.selectedValue
-          }).aggs
+          nested: {
+            path: this.$props.nestedField,
+            query: query
+          }
         };
       }
-      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 query;
+    },
+    updateQuery: function updateQuery(value) {
+      var customQuery = this.$props.customQuery;
+      var query = this.getDefaultQuery(value);
+      var customQueryOptions;
+      if (customQuery) {
+        var _ref3 = customQuery(value, this.$props) || {};
+        query = _ref3.query;
+        customQueryOptions = helper.getOptionsFromQuery(customQuery(value, this.$props));
+        helper.updateCustomQuery(this.$props.componentId, this.$props, value);
       }
-      return {
-        data: filteredResults,
-        aggregationData: aggregationData,
-        rawData: rawData,
-        aggregations: aggregations,
-        promotedData: promotedResults,
-        resultStats: this.stats
+      this.setQueryOptions(this.$props.componentId, _rollupPluginBabelHelpers._extends({}, this.generateQueryOptions(), customQueryOptions));
+      this.updateQueryAction({
+        componentId: this.$props.componentId,
+        query: query,
+        value: value,
+        label: this.$props.filterLabel,
+        showFilter: this.$props.showFilter,
+        URLParams: this.$props.URLParams,
+        componentType: constants.componentTypes.treeList
+      });
+    },
+    setValue: function setValue(value, hasMountedParam) {
+      var _this3 = this;
+      if (hasMountedParam === void 0) {
+        hasMountedParam = true;
+      }
+      var finalValues = Array.isArray(value) === false ? helper.transformTreeListLocalStateIntoQueryComptaibleFormat(value) : value;
+      var performUpdate = function performUpdate() {
+        var handleUpdates = function handleUpdates() {
+          _this3.updateQuery(finalValues);
+          if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
+        };
+        if (hasMountedParam) {
+          _this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
+          handleUpdates();
+        } else {
+          handleUpdates();
+        }
       };
+      helper.checkValueChange(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
+    },
+    generateQueryOptions: function generateQueryOptions() {
+      var queryOptions = helper.getQueryOptions(this.$props);
+      var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      return helper.getAggsQuery(valueArray, queryOptions, this.$props);
+    },
+    updateDefaultQuery: function updateDefaultQuery(queryOptions) {
+      var value = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      // Update default query for RS API
+      helper.updateDefaultQuery(this.$props.componentId, this.$props, value);
+      helper.updateInternalQuery(transform.getInternalComponentID(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
+    },
+    updateQueryOptions: function updateQueryOptions() {
+      // for a new query due to other changes don't append after to get fresh results
+      var queryOptions = this.generateQueryOptions(this.$props, {}, helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues));
+      if (this.$props.defaultQuery) {
+        // eslint-disable-next-line no-use-before-define
+        this.updateDefaultQuery(queryOptions);
+      } else {
+        this.setQueryOptions(transform.getInternalComponentID(this.$props.componentId), queryOptions);
+      }
     }
   },
-  computed: {
-    stats: function stats() {
-      return getResultStats$1(this);
+  render: function render() {
+    var _this4 = this;
+    var props = this.$props;
+    var style = props.style,
+      className = props.className,
+      mode = props.mode,
+      showLine = props.showLine,
+      renderItem = props.renderItem,
+      showCheckbox = props.showCheckbox,
+      innerClass = props.innerClass,
+      showRadio = props.showRadio,
+      showCount = props.showCount,
+      showSwitcherIcon = props.showSwitcherIcon,
+      switcherIcon = props.switcherIcon,
+      title = props.title,
+      loader = props.loader,
+      renderError = props.renderError;
+    if (this.isLoading) {
+      return (this.$slots.loader ? this.$slots.loader() : loader) || null;
     }
+    if (this.error) {
+      if (this.$slots.renderError) {
+        return this.$slots.renderError(this.error);
+      }
+      return helper.isFunction(renderError) ? renderError(this.error) : renderError;
+    }
+    var transformedData = this.getTransformedData();
+    if (!transformedData || transformedData.length === 0) {
+      return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
+    }
+    return vue.createVNode(Container.Container, {
+      "style": style,
+      "class": className
+    }, {
+      "default": function _default() {
+        return [props.title && vue.createVNode(Title.Title, {
+          "class": helper.getClassName(innerClass, 'title') || null
+        }, _isSlot$2(title) ? title : {
+          "default": function _default() {
+            return [title];
+          }
+        }), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : vue.createVNode(HierarchicalMenuComponent, {
+          "key": "initial-node",
+          "listArray": transformedData,
+          "parentPath": "",
+          "isExpanded": true,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: _this4.selectedValues,
+            searchTerm: _this4.searchTerm,
+            showLine: showLine,
+            renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
+            handleListItemClick: _this4.handleListItemClick,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: _this4.renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
+          }
+        }, null)];
+      }
+    });
   }
 };
-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],
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    rawData: state.rawData[props.componentId] || {},
+    aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
+    themePreset: state.config.themePreset,
     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
+  updateQueryAction: updateQueryAction
 };
-var ConnectedComponent = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveComponent), {
-  componentType: constants.componentTypes.reactiveComponent
-});
+TreeList.hasInternalComponent = function () {
+  return true;
+};
+var TreeListConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchtoProps)(TreeList), {
+  componentType: constants.componentTypes.treeList,
+  internalComponent: TreeList.hasInternalComponent()
+}));
+TreeListConnected.name = TreeList.name;
+TreeListConnected.install = function (Vue) {
+  Vue.component(TreeListConnected.name, TreeListConnected);
+};
+
+// Add componentType for SSR
+TreeListConnected.componentType = constants.componentTypes.treeList;
+
 var RcConnected = PreferencesConsumer.PreferencesConsumer({
   name: 'RcConnected',
   render: function render() {
-    var component = ConnectedComponent;
+    var component = ReactiveComponent.default;
     switch (this.$attrs.componentType) {
       case constants.componentTypes.reactiveList:
-        component = ReactiveList.RLConnected;
+        component = ReactiveList.default;
         break;
       case constants.componentTypes.searchBox:
         component = SBConnected;
         break;
       // list components
       case constants.componentTypes.singleList:
-        component = SingleList.ListConnected;
+        component = SingleList.default;
         break;
       case constants.componentTypes.multiList:
-        component = MultiList.ListConnected;
+        component = MultiList.default;
         break;
       case constants.componentTypes.singleDropdownList:
-        component = SingleDropdownList.ListConnected;
+        component = SingleDropdownList.default;
         break;
       case constants.componentTypes.multiDropdownList:
-        component = MultiDropdownList.ListConnected;
+        component = MultiDropdownList.default;
         break;
       // basic components
       case constants.componentTypes.toggleButton:
-        component = ToggleButton.TBConnected;
+        component = ToggleButton.default;
         break;
       // range components
       case constants.componentTypes.dynamicRangeSlider:
-        component = DynamicRangeSlider.RangeConnected;
+        component = DynamicRangeSlider.default;
         break;
       case constants.componentTypes.singleRange:
-        component = SingleRange.RangeConnected;
+        component = SingleRange.default;
         break;
       case constants.componentTypes.multiRange:
-        component = MultiRange.RangeConnected;
+        component = MultiRange.default;
         break;
       case constants.componentTypes.rangeSlider:
-        component = RangeSlider.RangeConnected;
+        component = RangeSlider.default;
         break;
       case constants.componentTypes.rangeInput:
-        component = RangeInput.RangeConnected;
+        component = RangeInput.default;
         break;
     }
     return vue.h(component, null, this.$slots);
   }
 });
-RcConnected.name = ReactiveComponent.name;
-RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
+RcConnected.name = ReactiveComponent.default.name;
+RcConnected.hasInternalComponent = ReactiveComponent.default.hasInternalComponent;
 // Add componentType for SSR
 RcConnected.componentType = constants.componentTypes.reactiveComponent;
 RcConnected.install = function (Vue) {
   Vue.component(RcConnected.name, RcConnected);
 };
 
-exports.ReactiveComponent = RcConnected;
+var components = [ReactiveList.default, ResultCard.default, ResultList.default, ReactiveBase.default, SBConnected, SingleList.default, MultiList.default, SingleRange.default, MultiRange.default, RangeSlider.default, DynamicRangeSlider.default, ReactiveComponent.default, RcConnected, SelectedFilters.default, ToggleButton.default, SingleDropdownList.default, MultiDropdownList.default, StateProvider.default, RangeInput.default, TreeListConnected];
+function install (Vue) {
+  components.map(function (component) {
+    Vue.use(component);
+    return null;
+  });
+}
+
+exports.ReactiveComponentPrivate = RcConnected;
 exports.SearchBox = SBConnected;
+exports.TreeList = TreeListConnected;
+exports.install = install;