@appbaseio/reactivesearch-vue 1.24.3 → 1.25.0

package/dist/es/DataSearch.js

@@ -14,9 +14,9 @@ import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
 import { T as Title } from './Title-3522ff56.js';
 import { F as Flex } from './Flex-8770345d.js';
 import hotkeys from 'hotkeys-js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-e0cace2d.js';
 import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-08bb1bcf.js';
 import 'compute-scroll-into-view';
-import { D as Downshift } from './DownShift-3558d402.js';
 import { C as Container } from './Container-18b03fde.js';
 import Highlight from 'vue-highlight-words';
 
@@ -27,37 +27,11 @@ InputGroup.defaultProps = {
 };
 
 var _templateObject$1;
-var InputWrapper = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-
-var _templateObject$2;
-var InputAddon = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fafafa;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-weight: 400;\n  padding: 0 11px;\n  position: relative;\n  transition: all 0.3s;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  &:first-of-type {\n    border-right: none;\n  }\n  &:last-of-type {\n    border-left: none;\n  }\n"])));
+var InputAddon = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fafafa;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-weight: 400;\n  padding: 0 11px;\n  position: relative;\n  transition: all 0.3s;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  &:first-of-type {\n    border-right: none;\n  }\n  &:last-of-type {\n    border-left: none;\n  }\n"])));
 InputAddon.defaultProps = {
   className: 'input-addon'
 };
 
-var _templateObject$3, _templateObject2, _templateObject3, _templateObject4;
-var IconGroup = styled('div')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
-  var positionType = _ref.positionType;
-
-  if (positionType === 'absolute') {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t"])));
-  }
-
-  return null;
-}, function (_ref2) {
-  var groupPosition = _ref2.groupPosition;
-  return groupPosition === 'right' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t  "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t  "])));
-});
-
-var _templateObject$4;
-var IconWrapper = styled('div')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;min-width:20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform:scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.primaryColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.borderColor || '#000';
-});
-
 var getClassName = helper.getClassName;
 var SuggestionWrapper = {
   name: 'SuggestionWrapper',
@@ -78,14 +52,14 @@ var SuggestionWrapper = {
   }
 };
 
-var _templateObject$5;
+var _templateObject$2;
 var highlightStyle = {
   fontWeight: 600,
   padding: 0,
   backgroundColor: 'transparent',
   color: 'inherit'
 };
-var PredictiveSuggestion = styled('span')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
+var PredictiveSuggestion = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
 var SuggestionItem = {
   name: 'SuggestionItem',
   props: {
@@ -200,34 +174,9 @@ var SearchSvg = {
   }
 };
 
-var CancelSvg = {
-  functional: true,
-  render: function render(h) {
-    return h("svg", {
-      "attrs": {
-        "alt": "Clear",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "height": "20px",
-        "viewBox": "0 0 24 24",
-        "width": "20px"
-      },
-      "class": "cancel-icon"
-    }, [h("title", ["Clear"]), h("path", {
-      "attrs": {
-        "d": "M0 0h24v24H0V0z",
-        "fill": "none"
-      }
-    }), h("path", {
-      "attrs": {
-        "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-      }
-    })]);
-  }
-};
+var _templateObject$3;
 
-var _templateObject$6;
-
-injectGlobal(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
+injectGlobal(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
 var MicSvg = {
   name: 'MicSvg',
   props: ['className'],
@@ -272,9 +221,9 @@ var MicSvg = {
   }
 };
 
-var _templateObject$7;
+var _templateObject$4;
 
-injectGlobal(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
+injectGlobal(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
 var MuteSvg = {
   name: 'MuteSvg',
   props: ['className'],
@@ -330,9 +279,9 @@ var MuteSvg = {
   }
 };
 
-var _templateObject$8;
+var _templateObject$5;
 
-injectGlobal(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
+injectGlobal(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
 var ListenSvg = {
   name: 'ListenSvg',
   props: ['className'],
@@ -653,8 +602,8 @@ var Mic = {
   name: 'Mic',
   props: {
     children: types.title,
-    lang: types.string.def('en-US'),
-    iconPosition: types.string.def('left'),
+    lang: VueTypes.string.def('en-US'),
+    iconPosition: VueTypes.string.def('left'),
     handleResult: types.func,
     onNoMatch: types.func,
     onError: types.func,
@@ -1066,10 +1015,10 @@ var DataSearch = {
     })]),
     aggregationField: types.string,
     aggregationSize: VueTypes.number,
-    size: VueTypes.number.def(10),
+    size: VueTypes.number,
     debounce: VueTypes.number.def(0),
     defaultValue: types.string,
-    excludeFields: types.excludeFields.def([]),
+    excludeFields: types.excludeFields,
     value: types.value,
     defaultSuggestions: types.suggestions,
     enableSynonyms: VueTypes.bool.def(true),
@@ -1083,9 +1032,9 @@ var DataSearch = {
     highlightField: types.stringOrArray,
     icon: types.children,
     iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
-    includeFields: types.includeFields.def(['*']),
+    includeFields: types.includeFields,
     innerClass: types.style,
-    innerRef: types.string.def('searchInputField'),
+    innerRef: VueTypes.string.def('searchInputField'),
     render: types.func,
     renderQuerySuggestions: types.func,
     renderPopularSuggestions: types.func,
@@ -1117,7 +1066,7 @@ var DataSearch = {
     focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
     addonBefore: VueTypes.any,
     addonAfter: VueTypes.any,
-    expandSuggestionsContainer: types.bool.def(true),
+    expandSuggestionsContainer: VueTypes.bool.def(true),
     index: VueTypes.string
   },
   beforeMount: function beforeMount() {
@@ -1778,7 +1727,7 @@ var DataSearch = {
               highlightedIndex: highlightedIndex
             }), _this3.renderErrorComponent(), !_this3.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
               "class": suggestions(_this3.themePreset, theme) + " " + getClassName$1(_this3.$props.innerClass, 'list')
-            }, [_this3.suggestionsList.slice(0, size).map(function (item, index) {
+            }, [_this3.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item

package/dist/es/{DropDown-035c804f.js → DropDown-1ee01031.js}

@@ -5,8 +5,9 @@ import { css } from 'emotion';
 import styled from '@appbaseio/vue-emotion';
 import { t as types } from './vueTypes-fb61bb7b.js';
 import { a as isFunction } from './index-cb1950b6.js';
+import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-e0cace2d.js';
 import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-08bb1bcf.js';
-import { D as Downshift } from './DownShift-3558d402.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var small = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
@@ -68,7 +69,9 @@ var Dropdown = {
     single: VueTypes.bool,
     small: VueTypes.bool.def(false),
     themePreset: types.themePreset,
-    showSearch: VueTypes.bool
+    showSearch: VueTypes.bool,
+    showClear: VueTypes.bool,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   render: function render() {
     var _this = this;
@@ -96,7 +99,7 @@ var Dropdown = {
     var filteredItemsToRender = itemsToRender.filter(function (item) {
       if (String(item[labelField]).length) {
         if (_this.$props.showSearch && _this.$data.searchTerm) {
-          return String(item[labelField]).toLowerCase().includes(_this.$data.searchTerm.toLowerCase());
+          return replaceDiacritics(String(item[labelField])).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm.toLowerCase()));
         }
 
         return true;
@@ -142,25 +145,10 @@ var Dropdown = {
             getItemEvents: getItemEvents
           }) : isOpen && itemsToRender.length ? h("ul", {
             "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
-          }, [_this.$props.showSearch ? h(Input, {
-            "attrs": {
-              "id": _this.$props.componentId + "-input",
-              "showIcon": false,
-              "placeholder": "Type here to search...",
-              "value": _this.$data.searchTerm,
-              "themePreset": themePreset
-            },
-            "style": {
-              border: 0,
-              borderBottom: '1px solid #ddd'
-            },
-            "class": getClassName(_this.$props.innerClass, 'input'),
-            "on": {
-              "change": _this.handleInputChange
-            }
-          }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
+          }, [_this.$props.showSearch ? _this.renderSearchbox() : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
             var selected = _this.$props.multi // MultiDropdownList
-            && (selectedItem && !!selectedItem[item[keyField]] || Array.isArray(selectedItem) && selectedItem.find(function (value) {
+            && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
+            || Array.isArray(selectedItem) && selectedItem.find(function (value) {
               return value[labelField] === item[labelField];
             }));
             if (!_this.$props.multi) selected = item.key === selectedItem;
@@ -210,6 +198,7 @@ var Dropdown = {
 
       if (!this.$props.multi) {
         this.isOpen = false;
+        this.searchTerm = '';
       }
     },
     handleStateChange: function handleStateChange(_ref2) {
@@ -233,6 +222,9 @@ var Dropdown = {
       var value = e.target.value;
       this.searchTerm = value;
     },
+    clearSearchTerm: function clearSearchTerm() {
+      this.searchTerm = '';
+    },
     renderToString: function renderToString(value) {
       var _this2 = this;
 
@@ -273,6 +265,51 @@ var Dropdown = {
       return h("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
+    },
+    renderSearchbox: function renderSearchbox() {
+      var h = this.$createElement;
+      var _this$$props2 = this.$props,
+          componentId = _this$$props2.componentId,
+          searchPlaceholder = _this$$props2.searchPlaceholder,
+          showClear = _this$$props2.showClear,
+          themePreset = _this$$props2.themePreset,
+          innerClass = _this$$props2.innerClass;
+      var InputComponent = h(Input, {
+        "attrs": {
+          "id": componentId + "-input",
+          "showIcon": false,
+          "showClear": showClear,
+          "placeholder": searchPlaceholder,
+          "value": this.$data.searchTerm,
+          "themePreset": themePreset
+        },
+        "style": {
+          border: 0,
+          borderBottom: '1px solid #ddd'
+        },
+        "class": getClassName(innerClass, 'input'),
+        "on": {
+          "change": this.handleInputChange
+        }
+      });
+
+      if (showClear) {
+        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
+          "attrs": {
+            "groupPosition": "right",
+            "positionType": "absolute"
+          }
+        }, [h(IconWrapper, {
+          "on": {
+            "click": this.clearSearchTerm
+          },
+          "attrs": {
+            "isClearIcon": true
+          }
+        }, [h(CancelSvg)])])]);
+      }
+
+      return InputComponent;
     }
   }
 };

package/dist/es/MultiDropdownList.js

@@ -12,12 +12,13 @@ import 'redux';
 import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-cb1950b6.js';
 import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
 import { T as Title } from './Title-3522ff56.js';
+import './CancelSvg-e0cace2d.js';
 import './Input-08bb1bcf.js';
 import 'compute-scroll-into-view';
-import './DownShift-3558d402.js';
 import { C as Container } from './Container-18b03fde.js';
+import '@appbaseio/reactivecore/lib/utils/suggestions';
 import { g as getAggsQuery } from './utils-64a2e5f0.js';
-import { D as Dropdown } from './DropDown-035c804f.js';
+import { D as Dropdown } from './DropDown-1ee01031.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -74,10 +75,12 @@ var MultiDropdownList = {
     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: types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   created: function created() {
     if (!this.enableAppbase && this.$props.index) {
@@ -205,7 +208,9 @@ var MultiDropdownList = {
     if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
       if (renderNoResults && isFunction(renderNoResults)) {
         return h("div", [renderNoResults()]);
-      } else if (renderNoResults && !isFunction(renderNoResults)) {
+      }
+
+      if (renderNoResults && !isFunction(renderNoResults)) {
         return renderNoResults;
       }
 
@@ -244,6 +249,8 @@ var MultiDropdownList = {
         "renderItem": renderItemCalc,
         "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
         "showSearch": this.$props.showSearch,
+        "showClear": this.$props.showClear,
+        "searchPlaceholder": this.$props.searchPlaceholder,
         "transformData": this.$props.transformData,
         "footer": showLoadMore && !isLastBucket && h("div", {
           "attrs": {

package/dist/es/MultiList.js

@@ -13,6 +13,7 @@ import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
 import { T as Title } from './Title-3522ff56.js';
 import { I as Input } from './Input-08bb1bcf.js';
 import { C as Container } from './Container-18b03fde.js';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 import { U as UL, C as Checkbox } from './FormControlList-704f8dee.js';
 import { g as getAggsQuery } from './utils-64a2e5f0.js';
 
@@ -33,7 +34,7 @@ var MultiList = {
     queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
     showCheckbox: VueTypes.bool.def(true),
     beforeValueChange: types.func,
-    className: types.string.def(''),
+    className: VueTypes.string.def(''),
     componentId: types.stringRequired,
     customQuery: types.func,
     dataField: types.stringRequired,
@@ -180,7 +181,7 @@ var MultiList = {
     var filteredItemsToRender = itemsToRender.filter(function (item) {
       if (String(item.key).length) {
         if (_this2.$props.showSearch && _this2.$data.searchTerm) {
-          return String(item.key).toLowerCase().includes(_this2.$data.searchTerm.toLowerCase());
+          return replaceDiacritics(String(item.key)).toLowerCase().includes(replaceDiacritics(_this2.$data.searchTerm).toLowerCase());
         }
 
         return true;

package/dist/es/ReactiveBase.js

@@ -77,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;
@@ -225,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;

package/dist/es/ReactiveList.js

@@ -486,9 +486,14 @@ var ReactiveList = {
     }
 
     this.internalComponent = this.$props.componentId + "__internal";
-    this.sortOptionIndex = this.defaultSortOption ? this.sortOptions.findIndex(function (s) {
-      return s.label === _this.defaultSortOption;
-    }) : 0;
+    this.sortOptionIndex = 0;
+
+    if (this.defaultSortOption && this.sortOptions && Array.isArray(this.sortOptions)) {
+      this.sortOptionIndex = this.sortOptions.findIndex(function (s) {
+        return s.label === _this.defaultSortOption;
+      });
+    }
+
     this.updateComponentProps(this.componentId, {
       from: this.from
     }, componentTypes.reactiveList);
@@ -498,7 +503,7 @@ var ReactiveList = {
   },
   props: {
     currentPage: VueTypes.number.def(0),
-    includeFields: types.includeFields.def(['*']),
+    includeFields: types.includeFields,
     // component props
     className: types.string,
     componentId: types.stringRequired,
@@ -507,7 +512,7 @@ var ReactiveList = {
     aggregationSize: VueTypes.number,
     defaultQuery: types.func,
     defaultSortOption: types.string,
-    excludeFields: types.excludeFields.def([]),
+    excludeFields: types.excludeFields,
     innerClass: types.style,
     listClass: VueTypes.string.def(''),
     loader: types.title,
@@ -519,7 +524,7 @@ var ReactiveList = {
     pages: VueTypes.number.def(5),
     pagination: VueTypes.bool.def(false),
     infiniteScroll: VueTypes.bool.def(true),
-    paginationAt: types.paginationAt.def('bottom'),
+    paginationAt: VueTypes.oneOf(['top', 'bottom', 'both']).def('bottom'),
     react: types.react,
     scrollOnChange: VueTypes.bool.def(true),
     showResultStats: VueTypes.bool.def(true),
@@ -720,11 +725,11 @@ var ReactiveList = {
     var options = getQueryOptions(this.$props);
     options.from = this.$data.from;
 
-    if (this.$props.sortOptions) {
+    if (this.sortOptions && this.sortOptions[this.sortOptionIndex]) {
       var _ref2;
 
-      var sortField = this.$props.sortOptions[this.sortOptionIndex].dataField;
-      var sortBy = this.$props.sortOptions[this.sortOptionIndex].sortBy;
+      var sortField = this.sortOptions[this.sortOptionIndex].dataField;
+      var sortBy = this.sortOptions[this.sortOptionIndex].sortBy;
       options.sort = [(_ref2 = {}, _ref2[sortField] = {
         order: sortBy
       }, _ref2)]; // To handle sort options for RS API
@@ -794,10 +799,10 @@ var ReactiveList = {
       "class": this.$props.className
     }, [this.isLoading && this.shouldRenderPagination && this.showInfiniteScroll && (this.$scopedSlots.loader || this.$props.loader), this.renderErrorComponent(), h(Flex, {
       "attrs": {
-        "labelPosition": this.$props.sortOptions ? 'right' : 'left'
+        "labelPosition": this.sortOptions ? 'right' : 'left'
       },
       "class": getClassName$1(this.$props.innerClass, 'resultsInfo')
-    }, [this.$props.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && results.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
+    }, [this.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && results.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
       "attrs": {
         "pages": this.$props.pages,
         "totalPages": this.totalPages,
@@ -868,15 +873,18 @@ var ReactiveList = {
       var options = getQueryOptions(props);
       options.from = this.$data.from;
 
-      if (props.sortOptions) {
-        var _ref5;
-
+      if (props.sortOptions && Array.isArray(props.sortOptions)) {
         var sortOptionIndex = props.defaultSortOption ? props.sortOptions.findIndex(function (s) {
           return s.label === props.defaultSortOption;
         }) : 0;
-        options.sort = [(_ref5 = {}, _ref5[props.sortOptions[sortOptionIndex].dataField] = {
-          order: props.sortOptions[sortOptionIndex].sortBy
-        }, _ref5)];
+
+        if (props.sortOptions[sortOptionIndex]) {
+          var _ref5;
+
+          options.sort = [(_ref5 = {}, _ref5[props.sortOptions[sortOptionIndex].dataField] = {
+            order: props.sortOptions[sortOptionIndex].sortBy
+          }, _ref5)];
+        }
       } else if (props.sortBy) {
         var _ref6;
 
@@ -982,26 +990,29 @@ var ReactiveList = {
       }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
     },
     handleSortChange: function handleSortChange(e) {
-      var _ref7;
+      var index = e.target.value;
 
-      var index = e.target.value; // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
-
-      var options = getQueryOptions(this.$props);
-      options.from = 0;
-      var sortField = this.$props.sortOptions[index].dataField;
-      var sortBy = this.$props.sortOptions[index].sortBy;
-      options.sort = [(_ref7 = {}, _ref7[sortField] = {
-        order: sortBy
-      }, _ref7)];
-      this.sortOptionIndex = index; // To handle sort options for RS API
+      if (this.sortOptions && this.sortOptions[index]) {
+        var _ref7;
 
-      this.updateComponentProps(this.componentId, {
-        dataField: sortField,
-        sortBy: sortBy
-      }, componentTypes.reactiveList);
-      this.setQueryOptions(this.$props.componentId, options, true);
-      this.currentPageState = 0;
-      this.from = 0;
+        // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
+        var options = getQueryOptions(this.$props);
+        options.from = 0;
+        var sortField = this.sortOptions[index].dataField;
+        var sortBy = this.sortOptions[index].sortBy;
+        options.sort = [(_ref7 = {}, _ref7[sortField] = {
+          order: sortBy
+        }, _ref7)];
+        this.sortOptionIndex = index; // To handle sort options for RS API
+
+        this.updateComponentProps(this.componentId, {
+          dataField: sortField,
+          sortBy: sortBy
+        }, componentTypes.reactiveList);
+        this.setQueryOptions(this.$props.componentId, options, true);
+        this.currentPageState = 0;
+        this.from = 0;
+      }
     },
     triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
       var docId = documentId;
@@ -1035,7 +1046,7 @@ var ReactiveList = {
         "domProps": {
           "value": this.sortOptionIndex
         }
-      }, [this.$props.sortOptions.map(function (sort, index) {
+      }, [this.sortOptions.map(function (sort, index) {
         return h("option", {
           "key": sort.label,
           "domProps": {
@@ -1141,11 +1152,7 @@ var mapDispatchtoProps = {
 }; // Only used for SSR
 
 ReactiveList.generateQueryOptions = function (props) {
-  // simulate default (includeFields and excludeFields) props to generate consistent query
-  var options = getQueryOptions(_extends({
-    includeFields: ['*'],
-    excludeFields: []
-  }, props));
+  var options = getQueryOptions(props);
   var size = props.size,
       dataField = props.dataField,
       defaultSortOption = props.defaultSortOption,

package/dist/es/SingleDropdownList.js

@@ -12,12 +12,13 @@ import 'redux';
 import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, g as getComponent, h as hasCustomRenderer, c as connect } from './index-cb1950b6.js';
 import { C as ComponentWrapper } from './ComponentWrapper-4f85a67e.js';
 import { T as Title } from './Title-3522ff56.js';
+import './CancelSvg-e0cace2d.js';
 import './Input-08bb1bcf.js';
 import 'compute-scroll-into-view';
-import './DownShift-3558d402.js';
 import { C as Container } from './Container-18b03fde.js';
+import '@appbaseio/reactivecore/lib/utils/suggestions';
 import { g as getAggsQuery } from './utils-64a2e5f0.js';
-import { D as Dropdown } from './DropDown-035c804f.js';
+import { D as Dropdown } from './DropDown-1ee01031.js';
 
 var updateQuery = Actions.updateQuery,
     setQueryOptions = Actions.setQueryOptions,
@@ -73,10 +74,12 @@ var SingleDropdownList = {
     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: types.string,
-    index: VueTypes.string
+    index: VueTypes.string,
+    searchPlaceholder: VueTypes.string.def('Type here to search...')
   },
   created: function created() {
     if (!this.enableAppbase && this.$props.index) {
@@ -190,7 +193,9 @@ var SingleDropdownList = {
     if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
       if (renderNoResults && isFunction(renderNoResults)) {
         return h("div", [renderNoResults()]);
-      } else if (renderNoResults && !isFunction(renderNoResults)) {
+      }
+
+      if (renderNoResults && !isFunction(renderNoResults)) {
         return renderNoResults;
       }
 
@@ -228,6 +233,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": {