@appbaseio/reactivesearch-vue 1.16.0-alpha.28 → 1.16.0-alpha.29

package/dist/cjs/{DownShift-d41f2442.js → CancelSvg-b14dd012.js}

@@ -3,8 +3,36 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4abdbfff.js');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
 var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));
 
+var _templateObject;
+var InputWrapper = styled__default('span')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
+var IconGroup = styled__default('div')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._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 styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._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' ? styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t  "]))) : styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t  "])));
+});
+
+var _templateObject$2;
+var IconWrapper = styled__default('div')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._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';
+});
+
 /**
  * Scroll node into view if necessary
  * @param {HTMLElement} node the element that should scroll into view
@@ -402,4 +430,33 @@ var Downshift = {
   }
 };
 
+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"
+      }
+    })]);
+  }
+};
+
+exports.CancelSvg = CancelSvg;
 exports.Downshift = Downshift;
+exports.IconGroup = IconGroup;
+exports.IconWrapper = IconWrapper;
+exports.InputWrapper = InputWrapper;

package/dist/cjs/DataSearch.js

@@ -22,9 +22,9 @@ var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
 var Title = require('./Title-39765ee6.js');
 var Flex = require('./Flex-699639d2.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
+var CancelSvg = require('./CancelSvg-b14dd012.js');
 var Input = require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-var DownShift = require('./DownShift-d41f2442.js');
 var Container = require('./Container-8a08d663.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 
@@ -35,37 +35,11 @@ InputGroup.defaultProps = {
 };
 
 var _templateObject$1;
-var InputWrapper = styled__default('span')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
-
-var _templateObject$2;
-var InputAddon = styled__default('span')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._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__default('span')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._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__default('div')(_templateObject$3 || (_templateObject$3 = _rollupPluginBabelHelpers._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 styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._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' ? styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t  "]))) : styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t  "])));
-});
-
-var _templateObject$4;
-var IconWrapper = styled__default('div')(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._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 = configureStore.helper.getClassName;
 var SuggestionWrapper = {
   name: 'SuggestionWrapper',
@@ -86,14 +60,14 @@ var SuggestionWrapper = {
   }
 };
 
-var _templateObject$5;
+var _templateObject$2;
 var highlightStyle = {
   fontWeight: 600,
   padding: 0,
   backgroundColor: 'transparent',
   color: 'inherit'
 };
-var PredictiveSuggestion = styled__default('span')(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._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__default('span')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._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: {
@@ -208,34 +182,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;
-
-styled.injectGlobal(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._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"])));
+styled.injectGlobal(_templateObject$3 || (_templateObject$3 = _rollupPluginBabelHelpers._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'],
@@ -280,9 +229,9 @@ var MicSvg = {
   }
 };
 
-var _templateObject$7;
+var _templateObject$4;
 
-styled.injectGlobal(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._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"])));
+styled.injectGlobal(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._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'],
@@ -338,9 +287,9 @@ var MuteSvg = {
   }
 };
 
-var _templateObject$8;
+var _templateObject$5;
 
-styled.injectGlobal(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._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"])));
+styled.injectGlobal(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._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'],
@@ -846,7 +795,7 @@ var Mic = {
       return this.getComponent();
     }
 
-    return h(IconWrapper, [this.Icon]);
+    return h(CancelSvg.IconWrapper, [this.Icon]);
   }
 };
 
@@ -1590,7 +1539,7 @@ var DataSearch = {
       var h = this.$createElement;
 
       if (this.$props.showClear) {
-        return this.$props.clearIcon || h(CancelSvg);
+        return this.$props.clearIcon || h(CancelSvg.CancelSvg);
       }
 
       return null;
@@ -1659,12 +1608,12 @@ var DataSearch = {
           showIcon = _this$$props3.showIcon;
       var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
-      return h("div", [h(IconGroup, {
+      return h("div", [h(CancelSvg.IconGroup, {
         "attrs": {
           "groupPosition": "right",
           "positionType": "absolute"
         }
-      }, [currentValue && showClear && h(IconWrapper, {
+      }, [currentValue && showClear && h(CancelSvg.IconWrapper, {
         "on": {
           "click": this.clearValue
         },
@@ -1679,16 +1628,16 @@ var DataSearch = {
           "handleResult": this.handleVoiceResults,
           "className": getClassName$1(innerClass, 'mic') || null
         }
-      }), iconPosition === 'right' && showIcon && h(IconWrapper, {
+      }), iconPosition === 'right' && showIcon && h(CancelSvg.IconWrapper, {
         "on": {
           "click": this.handleSearchIconClick
         }
-      }, [this.renderIcon()])]), h(IconGroup, {
+      }, [this.renderIcon()])]), h(CancelSvg.IconGroup, {
         "attrs": {
           "groupPosition": "left",
           "positionType": "absolute"
         }
-      }, [iconPosition === 'left' && showIcon && h(IconWrapper, {
+      }, [iconPosition === 'left' && showIcon && h(CancelSvg.IconWrapper, {
         "on": {
           "click": this.handleSearchIconClick
         }
@@ -1761,7 +1710,7 @@ var DataSearch = {
       "class": this.$props.className
     }, [this.$props.title && h(Title.Title, {
       "class": getClassName$1(this.$props.innerClass, 'title') || ''
-    }, [this.$props.title]), this.$props.defaultSuggestions || this.$props.autosuggest ? h(DownShift.Downshift, {
+    }, [this.$props.title]), this.$props.defaultSuggestions || this.$props.autosuggest ? h(CancelSvg.Downshift, {
       "attrs": {
         "id": this.$props.componentId + "-downshift",
         "handleChange": this.onSuggestionSelected,
@@ -1878,7 +1827,7 @@ var DataSearch = {
 
           return h("div", {
             "class": Input.suggestionsContainer
-          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(InputWrapper, [h(Input.Input, {
+          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
             "attrs": {
               "id": _this3.$props.componentId + "-input",
               "showIcon": _this3.$props.showIcon,
@@ -1922,7 +1871,7 @@ var DataSearch = {
       }
     }) : h("div", {
       "class": Input.suggestionsContainer
-    }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input.Input, {
+    }, [h(InputGroup, [this.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
       "class": getClassName$1(this.$props.innerClass, 'input') || '',
       "attrs": {
         "placeholder": this.$props.placeholder,

package/dist/cjs/{DropDown-3c343026.js → DropDown-dc042720.js}

@@ -11,8 +11,8 @@ var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
 var vueTypes = require('./vueTypes-829a5f2c.js');
 var index = require('./index-2a8358cd.js');
+var CancelSvg = require('./CancelSvg-b14dd012.js');
 var Input = require('./Input-c6f181d5.js');
-var DownShift = require('./DownShift-d41f2442.js');
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -75,7 +75,9 @@ var Dropdown = {
     single: VueTypes.bool,
     small: VueTypes.bool.def(false),
     themePreset: vueTypes.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;
@@ -111,7 +113,7 @@ var Dropdown = {
 
       return false;
     });
-    return h(DownShift.Downshift, {
+    return h(CancelSvg.Downshift, {
       "attrs": {
         "isOpen": this.$data.isOpen,
         "selectedItem": selectedItem,
@@ -149,23 +151,7 @@ var Dropdown = {
             getItemEvents: getItemEvents
           }) : isOpen && itemsToRender.length ? h("ul", {
             "class": Input.suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
-          }, [_this.$props.showSearch ? h(Input.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]] // MultiDropdownRange
             || Array.isArray(selectedItem) && selectedItem.find(function (value) {
@@ -218,6 +204,7 @@ var Dropdown = {
 
       if (!this.$props.multi) {
         this.isOpen = false;
+        this.searchTerm = '';
       }
     },
     handleStateChange: function handleStateChange(_ref2) {
@@ -241,6 +228,9 @@ var Dropdown = {
       var value = e.target.value;
       this.searchTerm = value;
     },
+    clearSearchTerm: function clearSearchTerm() {
+      this.searchTerm = '';
+    },
     renderToString: function renderToString(value) {
       var _this2 = this;
 
@@ -281,6 +271,51 @@ var Dropdown = {
       return h("p", {
         "class": getClassName(this.$props.innerClass, 'noResults') || null
       }, [index.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.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(CancelSvg.InputWrapper, [InputComponent, this.searchTerm && h(CancelSvg.IconGroup, {
+          "attrs": {
+            "groupPosition": "right",
+            "positionType": "absolute"
+          }
+        }, [h(CancelSvg.IconWrapper, {
+          "on": {
+            "click": this.clearSearchTerm
+          },
+          "attrs": {
+            "isClearIcon": true
+          }
+        }, [h(CancelSvg.CancelSvg)])])]);
+      }
+
+      return InputComponent;
     }
   }
 };

package/dist/cjs/MultiDropdownList.js

@@ -19,13 +19,13 @@ require('redux');
 var index = require('./index-2a8358cd.js');
 var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
 var Title = require('./Title-39765ee6.js');
+require('./CancelSvg-b14dd012.js');
 require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-require('./DownShift-d41f2442.js');
 var Container = require('./Container-8a08d663.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 var utils = require('./utils-23afb20b.js');
-var DropDown = require('./DropDown-3c343026.js');
+var DropDown = require('./DropDown-dc042720.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -82,10 +82,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: vueTypes.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) {
@@ -213,7 +215,9 @@ var MultiDropdownList = {
     if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
       if (renderNoResults && index.isFunction(renderNoResults)) {
         return h("div", [renderNoResults()]);
-      } else if (renderNoResults && !index.isFunction(renderNoResults)) {
+      }
+
+      if (renderNoResults && !index.isFunction(renderNoResults)) {
         return renderNoResults;
       }
 
@@ -252,6 +256,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/cjs/SingleDropdownList.js

@@ -19,13 +19,13 @@ require('redux');
 var index = require('./index-2a8358cd.js');
 var ComponentWrapper = require('./ComponentWrapper-ab813390.js');
 var Title = require('./Title-39765ee6.js');
+require('./CancelSvg-b14dd012.js');
 require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-require('./DownShift-d41f2442.js');
 var Container = require('./Container-8a08d663.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 var utils = require('./utils-23afb20b.js');
-var DropDown = require('./DropDown-3c343026.js');
+var DropDown = require('./DropDown-dc042720.js');
 
 var updateQuery = configureStore.Actions.updateQuery,
     setQueryOptions = configureStore.Actions.setQueryOptions,
@@ -81,10 +81,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: vueTypes.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) {
@@ -238,6 +240,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": {

package/dist/cjs/StateProvider.js

@@ -16,6 +16,10 @@ var getSearchState = configureStore.helper.getSearchState;
 var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
 
 var filterProps = function filterProps(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   return _rollupPluginBabelHelpers._extends({}, props, {
     props: props.componentProps
   });
@@ -35,7 +39,7 @@ var filterByComponentIds = function filterByComponentIds(state, props) {
     return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
   }
 
-  if (componentIds instanceof Array) {
+  if (Array.isArray(componentIds)) {
     var filteredState = {};
     componentIds.forEach(function (componentId) {
       filteredState[componentId] = state[componentId];
@@ -74,7 +78,7 @@ var StateProvider = {
     };
     return this.__state;
   },
-  mounted: function mounted() {
+  created: function created() {
     this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
   },
   computed: {

package/dist/cjs/index.js

@@ -29,9 +29,9 @@ require('url-search-params-polyfill');
 var ReactiveBase = require('./ReactiveBase.js');
 require('hotkeys-js');
 var DataSearch = require('./DataSearch.js');
+require('./CancelSvg-b14dd012.js');
 require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-require('./DownShift-d41f2442.js');
 require('./Container-8a08d663.js');
 require('vue-highlight-words');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
@@ -39,7 +39,7 @@ require('./FormControlList-73497794.js');
 require('./utils-23afb20b.js');
 var SingleList = require('./SingleList.js');
 var MultiList = require('./MultiList.js');
-require('./DropDown-3c343026.js');
+require('./DropDown-dc042720.js');
 var SingleDropdownList = require('./SingleDropdownList.js');
 var MultiDropdownList = require('./MultiDropdownList.js');
 var ToggleButton = require('./ToggleButton.js');

package/dist/cjs/install.js

@@ -29,9 +29,9 @@ require('url-search-params-polyfill');
 var ReactiveBase = require('./ReactiveBase.js');
 require('hotkeys-js');
 var DataSearch = require('./DataSearch.js');
+require('./CancelSvg-b14dd012.js');
 require('./Input-c6f181d5.js');
 require('compute-scroll-into-view');
-require('./DownShift-d41f2442.js');
 require('./Container-8a08d663.js');
 require('vue-highlight-words');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
@@ -39,7 +39,7 @@ require('./FormControlList-73497794.js');
 require('./utils-23afb20b.js');
 var SingleList = require('./SingleList.js');
 var MultiList = require('./MultiList.js');
-require('./DropDown-3c343026.js');
+require('./DropDown-dc042720.js');
 var SingleDropdownList = require('./SingleDropdownList.js');
 var MultiDropdownList = require('./MultiDropdownList.js');
 var ToggleButton = require('./ToggleButton.js');

package/dist/cjs/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.16.0-alpha.28";
+var version = "1.16.0-alpha.29";
 
 exports.default = version;