@appbaseio/reactivesearch-vue 1.16.0-alpha.3 → 1.16.0-alpha.32

package/dist/es/DataSearch.js

@@ -1,92 +1,36 @@
 import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { getQueryOptions } from '@appbaseio/reactivecore/lib/utils/helper';
 import 'emotion';
 import styled, { css, cx, injectGlobal } from '@appbaseio/vue-emotion';
 import 'polished';
-import { t as types } from './vueTypes-98d938a9.js';
+import { t as types } from './vueTypes-9326e0be.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as hasQuerySuggestionsRenderer, c as connect } from './index-1fe91a0a.js';
-import { C as ComponentWrapper } from './ComponentWrapper-d0b21b95.js';
-import { T as Title } from './Title-22c2f3bf.js';
-import { F as Flex } from './Flex-40a74d8a.js';
-import { getQueryOptions } from '@appbaseio/reactivecore/lib/utils/helper';
-import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-dfd9dd40.js';
+import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, m as hasQuerySuggestionsRenderer, c as connect } from './index-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import { T as Title } from './Title-579f8d6c.js';
+import { F as Flex } from './Flex-aac91505.js';
+import hotkeys from 'hotkeys-js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-4d9e0857.js';
+import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-d8519224.js';
 import 'compute-scroll-into-view';
-import { D as Downshift } from './DownShift-d8f2500f.js';
-import { C as Container } from './Container-f5efec9e.js';
+import { C as Container } from './Container-4383c6f0.js';
 import Highlight from 'vue-highlight-words';
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: ", ";\n\tcursor: pointer;\n\t", ";\n\t", ";\n\t", ";\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t}\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-right: 29px;\n\tright: 0;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-right: 12px;\n\tright: 0;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding-left: 12px;\n\tleft: 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var left = css(_templateObject());
-var right = css(_templateObject2());
-var clear = css(_templateObject3());
-var InputIcon = styled('div')(_templateObject4(), function (_ref) {
-  var isClearIcon = _ref.isClearIcon;
-  return isClearIcon ? '12px' : '13px';
-}, function (_ref2) {
-  var iconPosition = _ref2.iconPosition;
-
-  if (iconPosition === 'left') {
-    return left;
-  } else if (iconPosition === 'right') {
-    return right;
-  }
+var _templateObject;
+var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n"])));
+InputGroup.defaultProps = {
+  className: 'input-group'
+};
 
-  return null;
-}, function (_ref3) {
-  var clearIcon = _ref3.clearIcon;
-  return clearIcon && clear;
-}, function (_ref4) {
-  var showIcon = _ref4.showIcon;
-  return !showIcon && 'padding-right:10px';
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.primaryColor;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.borderColor;
-});
+var _templateObject$1;
+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 getClassName = helper.getClassName;
 var SuggestionWrapper = {
@@ -108,22 +52,14 @@ var SuggestionWrapper = {
   }
 };
 
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject$2;
 var highlightStyle = {
   fontWeight: 600,
   padding: 0,
   backgroundColor: 'transparent',
   color: 'inherit'
 };
-var PredictiveSuggestion = styled('span')(_templateObject$1());
+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: {
@@ -238,75 +174,9 @@ var SearchSvg = {
   }
 };
 
-var CancelSvg = {
-  functional: true,
-  render: function render(h) {
-    return h("svg", {
-      "attrs": {
-        "alt": "Clear",
-        "height": "10",
-        "width": "8",
-        "xmlns": "http://www.w3.org/2000/svg",
-        "viewBox": "0 0 212.982 212.982"
-      },
-      "class": "cancel-icon"
-    }, [h("title", ["Clear"]), h("path", {
-      "attrs": {
-        "d": 'M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z'
-      }
-    })]);
-  }
-};
-
-function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n\theight: 40px;\n\tposition: absolute;\n\ttop: 8px;\n\tcursor: pointer;\n\tright: 15px;\n\t", "\n\t", "\n  width: 11px;\n"]);
+var _templateObject$3;
 
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tright: 35px;\n"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var right$1 = css(_templateObject$2());
-var MicIcon = styled('div')(_templateObject2$1(), function (_ref) {
-  var iconPosition = _ref.iconPosition,
-      showClear = _ref.showClear;
-  if (showClear && iconPosition !== 'left') return 'right: 51px;';
-
-  if (iconPosition === 'right' || showClear) {
-    return right$1;
-  }
-
-  return null;
-}, function (_ref2) {
-  var showIcon = _ref2.showIcon,
-      showClear = _ref2.showClear;
-  if (!showIcon && showClear) return 'right: 32px;';
-  if (!showIcon && !showClear) return 'right: 15px;';
-  return null;
-});
-
-function _templateObject$3() {
-  var data = _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"]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$3());
+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'],
@@ -320,6 +190,9 @@ var MicSvg = {
         "width": 28,
         "height": 28,
         "className": this.$props.className
+      },
+      "style": {
+        transform: 'scale(1.5)'
       }
     }, [h("g", {
       "attrs": {
@@ -348,23 +221,18 @@ var MicSvg = {
   }
 };
 
-function _templateObject$4() {
-  var data = _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 _templateObject$4;
 
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$4());
+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'],
   render: function render() {
     var h = arguments[0];
     return h("svg", {
+      "style": {
+        transform: 'scale(1.5)'
+      },
       "attrs": {
         "viewBox": "0 0 480 480",
         "xmlns": "http://www.w3.org/2000/svg",
@@ -411,17 +279,9 @@ var MuteSvg = {
   }
 };
 
-function _templateObject$5() {
-  var data = _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 _templateObject$5;
 
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-injectGlobal(_templateObject$5());
+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'],
@@ -436,6 +296,9 @@ var ListenSvg = {
         "width": 28,
         "height": 29,
         "className": this.$props.className
+      },
+      "style": {
+        transform: 'scale(1.5)'
       }
     }, [h("defs", [h("path", {
       "attrs": {
@@ -739,16 +602,16 @@ 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,
     getInstance: types.func,
     render: types.func,
     className: types.string,
-    applyClearStyle: types.bool,
-    showIcon: types.bool
+    applyClearStyle: VueTypes.bool,
+    showIcon: VueTypes.bool
   },
   methods: {
     getComponent: function getComponent$1() {
@@ -919,22 +782,12 @@ var Mic = {
   },
   render: function render() {
     var h = arguments[0];
-    var _this$$props2 = this.$props,
-        iconPosition = _this$$props2.iconPosition,
-        applyClearStyle = _this$$props2.applyClearStyle,
-        showIcon = _this$$props2.showIcon;
 
     if (this.hasCustomRenderer) {
       return this.getComponent();
     }
 
-    return h(MicIcon, {
-      "attrs": {
-        "showIcon": showIcon,
-        "showClear": applyClearStyle,
-        "iconPosition": iconPosition
-      }
-    }, [this.Icon]);
+    return h(IconWrapper, [this.Icon]);
   }
 };
 
@@ -1026,7 +879,8 @@ var debounce = helper.debounce,
     withClickIds = helper.withClickIds,
     getResultStats = helper.getResultStats,
     handleOnSuggestions = helper.handleOnSuggestions,
-    getTopSuggestions = helper.getTopSuggestions;
+    getTopSuggestions = helper.getTopSuggestions,
+    normalizeDataField = helper.normalizeDataField;
 var DataSearch = {
   name: 'DataSearch',
   data: function data() {
@@ -1046,14 +900,13 @@ var DataSearch = {
     }
   },
   created: function created() {
-    var _this = this;
-
     var _this$$props = this.$props,
         enableQuerySuggestions = _this$$props.enableQuerySuggestions,
         renderQuerySuggestions = _this$$props.renderQuerySuggestions,
         enableRecentSearches = _this$$props.enableRecentSearches,
         distinctField = _this$$props.distinctField,
-        distinctFieldConfig = _this$$props.distinctFieldConfig; // TODO: Remove in 2.0
+        distinctFieldConfig = _this$$props.distinctFieldConfig,
+        index = _this$$props.index; // TODO: Remove in 2.0
 
     if (enableQuerySuggestions) {
       console.warn('Warning(ReactiveSearch): The `enableQuerySuggestions` prop has been marked as deprecated, please use the `enablePopularSuggestions` prop instead.');
@@ -1064,14 +917,18 @@ var DataSearch = {
       console.warn('Warning(ReactiveSearch): The `renderQuerySuggestions` prop has been marked as deprecated, please use the `renderPopularSuggestions` prop instead.');
     }
 
-    if (this.config.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
       console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
     }
 
-    if (!this.config.enableAppbase && (distinctField || distinctFieldConfig)) {
+    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
       console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
     }
 
+    if (!this.enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+
     this.loadPopularSuggestions(this.$props.componentId);
     this.currentValue = this.selectedValue || '';
 
@@ -1079,13 +936,7 @@ var DataSearch = {
       this.getRecentSearches();
     }
 
-    this.handleTextChange = debounce(function (value) {
-      if (_this.$props.autosuggest) {
-        _this.updateDefaultQueryHandler(value, _this.$props);
-      } else {
-        _this.updateQueryHandler(_this.$props.componentId, value, _this.$props);
-      }
-    }, this.$props.debounce); // Set custom and default queries in store
+    this.handleTextChange = debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
 
     updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
     updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
@@ -1124,12 +975,12 @@ var DataSearch = {
       }
 
       var customDefaultPopularSuggestions = (this.defaultPopularSuggestions || []).map(function (suggestion) {
-        return _extends(_extends({}, suggestion), {}, {
+        return _extends({}, suggestion, {
           _popular_suggestion: true
         });
       });
       var customNormalizedRecentSearches = (this.normalizedRecentSearches || []).map(function (search) {
-        return _extends(_extends({}, search), {}, {
+        return _extends({}, search, {
           _recent_search: true
         });
       });
@@ -1146,7 +997,7 @@ var DataSearch = {
   },
   props: {
     options: types.options,
-    autoFocus: types.bool,
+    autoFocus: VueTypes.bool,
     autosuggest: VueTypes.bool.def(true),
     beforeValueChange: types.func,
     className: VueTypes.string.def(''),
@@ -1155,29 +1006,35 @@ var DataSearch = {
     customHighlight: types.func,
     customQuery: types.func,
     defaultQuery: types.func,
-    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
+    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    })]),
     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: types.bool.def(true),
+    enableSynonyms: VueTypes.bool.def(true),
     enableQuerySuggestions: VueTypes.bool.def(false),
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSearches: VueTypes.bool.def(false),
     fieldWeights: types.fieldWeights,
     filterLabel: types.string,
     fuzziness: types.fuzziness,
-    highlight: types.bool,
+    highlight: VueTypes.bool,
     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,
+    innerRef: VueTypes.string.def('searchInputField'),
     render: types.func,
     renderQuerySuggestions: types.func,
     renderPopularSuggestions: types.func,
@@ -1200,11 +1057,17 @@ var DataSearch = {
     recentSearchesIcon: VueTypes.any,
     popularSearchesIcon: VueTypes.any,
     //	mic props
-    showVoiceSearch: types.bool.def(false),
+    showVoiceSearch: VueTypes.bool.def(false),
     getMicInstance: types.func,
     renderMic: types.func,
     distinctField: types.string,
-    distinctFieldConfig: types.props
+    distinctFieldConfig: types.props,
+    //
+    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+    addonBefore: VueTypes.any,
+    addonAfter: VueTypes.any,
+    expandSuggestionsContainer: VueTypes.bool.def(true),
+    index: VueTypes.string
   },
   beforeMount: function beforeMount() {
     if (this.$props.highlight) {
@@ -1213,7 +1076,7 @@ var DataSearch = {
       }
 
       var queryOptions = DataSearch.highlightQuery(this.$props) || {};
-      this.queryOptions = _extends(_extends({}, queryOptions), this.getBasicQueryOptions());
+      this.queryOptions = _extends({}, queryOptions, this.getBasicQueryOptions());
       this.setQueryOptions(this.$props.componentId, this.queryOptions);
     } else {
       this.queryOptions = this.getBasicQueryOptions();
@@ -1228,6 +1091,9 @@ var DataSearch = {
       this.setValue(this.$props.defaultValue, true);
     }
   },
+  mounted: function mounted() {
+    this.listenForFocusShortcuts();
+  },
   watch: {
     highlight: function highlight() {
       this.updateQueryOptions();
@@ -1278,14 +1144,24 @@ var DataSearch = {
       if (oldVal !== newVal && this.$data.currentValue !== newVal) {
         if (!newVal && this.$data.currentValue) {
           // selected value is cleared, call onValueSelected
-          this.onValueSelectedHandler("", causes.CLEAR_VALUE);
+          this.onValueSelectedHandler('', causes.CLEAR_VALUE);
         }
 
         this.setValue(newVal || '', true, this.$props);
       }
+    },
+    focusShortcuts: function focusShortcuts() {
+      this.listenForFocusShortcuts();
     }
   },
   methods: {
+    handleText: function handleText(value) {
+      if (this.$props.autosuggest) {
+        this.updateDefaultQueryHandler(value, this.$props);
+      } else {
+        this.updateQueryHandler(this.$props.componentId, value, this.$props);
+      }
+    },
     validateDataField: function validateDataField() {
       var propName = 'dataField';
       var componentName = DataSearch.name;
@@ -1293,13 +1169,13 @@ var DataSearch = {
       var requiredError = propName + " supplied to " + componentName + " is required. Validation failed.";
       var propValue = props[propName];
 
-      if (this.config && !this.config.enableAppbase) {
+      if (!this.enableAppbase) {
         if (!propValue) {
           console.error(requiredError);
           return;
         }
 
-        if (typeof propValue !== 'string' && !Array.isArray(propValue)) {
+        if (typeof propValue !== 'string' && typeof propValue !== 'object' && !Array.isArray(propValue)) {
           console.error("Invalid " + propName + " supplied to " + componentName + ". Validation failed.");
           return;
         }
@@ -1315,7 +1191,7 @@ var DataSearch = {
       }
 
       var queryOptions = DataSearch.highlightQuery(this.$props) || {};
-      this.queryOptions = _extends(_extends({}, queryOptions), this.getBasicQueryOptions());
+      this.queryOptions = _extends({}, queryOptions, this.getBasicQueryOptions());
       this.setQueryOptions(this.$props.componentId, this.queryOptions);
     },
     getComponent: function getComponent$1(downshiftProps, isQuerySuggestionsRender) {
@@ -1383,7 +1259,7 @@ var DataSearch = {
       }
     },
     setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen) {
-      var _this2 = this;
+      var _this = this;
 
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
@@ -1399,51 +1275,51 @@ var DataSearch = {
 
       var performUpdate = function performUpdate() {
         // Refresh recent searches when value becomes empty
-        if (!value && _this2.currentValue && _this2.enableRecentSearches) {
-          _this2.getRecentSearches();
+        if (!value && _this.currentValue && _this.enableRecentSearches) {
+          _this.getRecentSearches();
         }
 
-        _this2.currentValue = value;
+        _this.currentValue = value;
 
         if (isDefaultValue) {
-          if (_this2.$props.autosuggest) {
+          if (_this.$props.autosuggest) {
             if (toggleIsOpen) {
-              _this2.isOpen = false;
+              _this.isOpen = false;
             }
 
-            _this2.updateDefaultQueryHandler(value, _this2.$props);
+            _this.updateDefaultQueryHandler(value, _this.$props);
           } // in case of strict selection only SUGGESTION_SELECT should be able
           // to set the query otherwise the value should reset
 
 
           if (props.strictSelection) {
             if (cause === causes.SUGGESTION_SELECT || value === '') {
-              _this2.updateQueryHandler(props.componentId, value, props);
+              _this.updateQueryHandler(props.componentId, value, props);
             } else {
-              _this2.setValue('', true);
+              _this.setValue('', true);
             }
           } else {
-            _this2.updateQueryHandler(props.componentId, value, props);
+            _this.updateQueryHandler(props.componentId, value, props);
           }
         } else {
           // debounce for handling text while typing
-          _this2.handleTextChange(value);
+          _this.handleTextChange(value);
         }
 
-        _this2.$emit('valueChange', value);
+        _this.$emit('valueChange', value);
 
-        _this2.$emit('value-change', value); // Set the already fetched suggestions if query is same as used last to fetch the hits
+        _this.$emit('value-change', value); // Set the already fetched suggestions if query is same as used last to fetch the hits
 
 
-        if (value === _this2.lastUsedQuery) {
-          _this2.suggestions = _this2.onSuggestions(_this2.suggestions); // invoke on suggestions
+        if (value === _this.lastUsedQuery) {
+          _this.suggestions = _this.onSuggestions(_this.suggestions); // invoke on suggestions
 
-          _this2.$emit('suggestions', _this2.suggestions);
+          _this.$emit('suggestions', _this.suggestions);
         } else if (!value) {
           // reset suggestions
-          _this2.suggestions = []; // invoke on suggestions
+          _this.suggestions = []; // invoke on suggestions
 
-          _this2.$emit('suggestions', _this2.suggestions);
+          _this.$emit('suggestions', _this.suggestions);
         }
       };
 
@@ -1465,7 +1341,7 @@ var DataSearch = {
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
 
-      this.setQueryOptions(this.internalComponent, _extends(_extends({}, this.queryOptions), defaultQueryOptions));
+      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), false);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -1492,7 +1368,7 @@ var DataSearch = {
 
         customQueryOptions = getOptionsFromQuery(customQueryTobeSet);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
-        this.setQueryOptions(componentId, _extends(_extends({}, this.queryOptions), customQueryOptions));
+        this.setQueryOptions(componentId, _extends({}, this.queryOptions, customQueryOptions), false);
       }
 
       if (!this.isPending) {
@@ -1510,10 +1386,7 @@ var DataSearch = {
     // need to review
     handleFocus: function handleFocus(event) {
       this.isOpen = true;
-
-      if (this.$props.onFocus) {
-        this.$emit('focus', event);
-      }
+      this.$emit('focus', event);
     },
     handleVoiceResults: function handleVoiceResults(_ref) {
       var results = _ref.results;
@@ -1521,18 +1394,18 @@ var DataSearch = {
       if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
         this.isPending = false;
         this.setValue(results[0][0].transcript.trim(), true);
-
-        if (this.$props.autosuggest) {
-          this.isOpen = true;
-        }
       }
     },
-    triggerQuery: function triggerQuery() {
+    triggerQuery: function triggerQuery(_temp) {
+      var _ref2 = _temp === void 0 ? false : _temp,
+          _ref2$isOpen = _ref2.isOpen,
+          isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen;
+
       var value = this.$props.value;
 
       if (value !== undefined) {
         this.isPending = false;
-        this.setValue(this.$props.value, true);
+        this.setValue(this.$props.value, !isOpen);
       }
     },
     triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
@@ -1554,7 +1427,7 @@ var DataSearch = {
     clearValue: function clearValue() {
       this.isPending = false;
       this.setValue('', true);
-      this.onValueSelectedHandler("", causes.CLEAR_VALUE);
+      this.onValueSelectedHandler('', causes.CLEAR_VALUE);
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
       var value = this.$props.value;
@@ -1570,11 +1443,8 @@ var DataSearch = {
       } // Need to review
 
 
-      if (this.$props.onKeyDown) {
-        // TODO: Remove camelCase events in 2.0
-        this.$emit('keyDown', event, this.triggerQuery);
-        this.$emit('key-down', event, this.triggerQuery);
-      }
+      this.$emit('keyDown', event, this.triggerQuery);
+      this.$emit('key-down', event, this.triggerQuery);
     },
     onInputChange: function onInputChange(e) {
       var inputValue = e.target.value;
@@ -1600,6 +1470,7 @@ var DataSearch = {
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT);
       } else {
+        this.isPending = false;
         this.$emit('change', suggestion.value, this.triggerQuery);
       }
 
@@ -1698,6 +1569,26 @@ var DataSearch = {
 
       return null;
     },
+    renderInputAddonBefore: function renderInputAddonBefore() {
+      var h = this.$createElement;
+      var addonBefore = this.$scopedSlots.addonBefore;
+
+      if (addonBefore) {
+        return h(InputAddon, [addonBefore()]);
+      }
+
+      return null;
+    },
+    renderInputAddonAfter: function renderInputAddonAfter() {
+      var h = this.$createElement;
+      var addonAfter = this.$scopedSlots.addonAfter;
+
+      if (addonAfter) {
+        return h(InputAddon, [addonAfter()]);
+      }
+
+      return null;
+    },
     renderIcons: function renderIcons() {
       var h = this.$createElement;
       var _this$$props3 = this.$props,
@@ -1709,13 +1600,16 @@ var DataSearch = {
           showIcon = _this$$props3.showIcon;
       var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
-      return h("div", [currentValue && showClear && h(InputIcon, {
+      return h("div", [h(IconGroup, {
+        "attrs": {
+          "groupPosition": "right",
+          "positionType": "absolute"
+        }
+      }, [currentValue && showClear && h(IconWrapper, {
         "on": {
           "click": this.clearValue
         },
         "attrs": {
-          "iconPosition": "right",
-          "clearIcon": iconPosition === 'right',
           "showIcon": showIcon,
           "isClearIcon": true
         }
@@ -1723,21 +1617,73 @@ var DataSearch = {
         "attrs": {
           "getInstance": getMicInstance,
           "render": renderMic,
-          "iconPosition": iconPosition,
           "handleResult": this.handleVoiceResults,
-          "className": getClassName$1(innerClass, 'mic') || null,
-          "applyClearStyle": !!currentValue && showClear,
-          "showIcon": showIcon
+          "className": getClassName$1(innerClass, 'mic') || null
         }
-      }), h(InputIcon, {
+      }), iconPosition === 'right' && showIcon && h(IconWrapper, {
         "on": {
           "click": this.handleSearchIconClick
-        },
+        }
+      }, [this.renderIcon()])]), h(IconGroup, {
         "attrs": {
-          "showIcon": showIcon,
-          "iconPosition": iconPosition
+          "groupPosition": "left",
+          "positionType": "absolute"
+        }
+      }, [iconPosition === 'left' && showIcon && h(IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])])]);
+    },
+    focusSearchBox: function focusSearchBox(event) {
+      var _this$$refs, _this$$refs$this$$pro;
+
+      var elt = event.target || event.srcElement;
+      var tagName = elt.tagName;
+
+      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
+        // already in an input
+        return;
+      }
+
+      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
+    },
+    listenForFocusShortcuts: function listenForFocusShortcuts() {
+      var _this2 = this;
+
+      var _this$$props$focusSho = this.$props.focusShortcuts,
+          focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
+
+      if (isEmpty(focusShortcuts)) {
+        return;
+      }
+
+      var shortcutsString = parseFocusShortcuts(focusShortcuts).join(','); // handler for alphabets and other key combinations
+
+      hotkeys(shortcutsString, // eslint-disable-next-line no-unused-vars
+
+      /* eslint-disable no-shadow */
+      function (event, handler) {
+        // Prevent the default refresh event under WINDOWS system
+        event.preventDefault();
+
+        _this2.focusSearchBox(event);
+      }); // if one of modifier keys are used, they are handled below
+
+      hotkeys('*', function (event) {
+        var modifierKeys = extractModifierKeysFromFocusShortcuts(focusShortcuts);
+        if (modifierKeys.length === 0) return;
+
+        for (var index = 0; index < modifierKeys.length; index += 1) {
+          var element = modifierKeys[index];
+
+          if (hotkeys[element]) {
+            _this2.focusSearchBox(event);
+
+            break;
+          }
         }
-      }, [this.renderIcon()])]);
+      });
     }
   },
   render: function render() {
@@ -1746,7 +1692,8 @@ var DataSearch = {
     var h = arguments[0];
     var _this$$props4 = this.$props,
         theme = _this$$props4.theme,
-        size = _this$$props4.size;
+        size = _this$$props4.size,
+        expandSuggestionsContainer = _this$$props4.expandSuggestionsContainer;
     var _this$$scopedSlots = this.$scopedSlots,
         recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
         popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
@@ -1763,25 +1710,125 @@ var DataSearch = {
         "isOpen": this.$data.isOpen
       },
       "scopedSlots": {
-        "default": function _default(_ref2) {
-          var getInputEvents = _ref2.getInputEvents,
-              getInputProps = _ref2.getInputProps,
-              getItemProps = _ref2.getItemProps,
-              getItemEvents = _ref2.getItemEvents,
-              isOpen = _ref2.isOpen,
-              highlightedIndex = _ref2.highlightedIndex,
-              setHighlightedIndex = _ref2.setHighlightedIndex;
+        "default": function _default(_ref3) {
+          var getInputEvents = _ref3.getInputEvents,
+              getInputProps = _ref3.getInputProps,
+              getItemProps = _ref3.getItemProps,
+              getItemEvents = _ref3.getItemEvents,
+              isOpen = _ref3.isOpen,
+              highlightedIndex = _ref3.highlightedIndex,
+              setHighlightedIndex = _ref3.setHighlightedIndex;
+
+          var renderSuggestionsContainer = function renderSuggestionsContainer() {
+            return h("div", [_this3.hasCustomRenderer && _this3.getComponent({
+              isOpen: isOpen,
+              getItemProps: getItemProps,
+              getItemEvents: getItemEvents,
+              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 || 10).map(function (item, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: item
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: item
+                })),
+                "key": index + 1 + "-" + item.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, index)
+                }
+              }, [h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": item
+                }
+              })]);
+            }), _this3.defaultSearchSuggestions.map(function (sugg, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: sugg
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: sugg
+                })),
+                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  justifyContent: 'flex-start'
+                }
+              }, [h("div", {
+                "style": {
+                  padding: '0 10px 0 0'
+                }
+              }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'recent-search-icon') || null,
+                  "icon": recentSearchesIcon,
+                  "type": "recent-search-icon"
+                }
+              }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "icon": popularSearchesIcon,
+                  "type": "popular-search-icon"
+                }
+              })]), h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": sugg
+                }
+              })]);
+            }), hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
+              isOpen: isOpen,
+              getItemProps: getItemProps,
+              getItemEvents: getItemEvents,
+              highlightedIndex: highlightedIndex
+            }, true) : _this3.topSuggestions.map(function (sugg, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: sugg
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: sugg
+                })),
+                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  justifyContent: 'flex-start'
+                }
+              }, [h("div", {
+                "style": {
+                  padding: '0 10px 0 0'
+                }
+              }, [h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "icon": popularSearchesIcon,
+                  "type": "popular-search-icon"
+                }
+              })]), h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": sugg
+                }
+              })]);
+            })]) : _this3.renderNoSuggestions(_this3.suggestionsList)]);
+          };
+
           return h("div", {
             "class": suggestionsContainer
-          }, [h(Input, {
+          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
               "id": _this3.$props.componentId + "-input",
               "showIcon": _this3.$props.showIcon,
               "showClear": _this3.$props.showClear,
               "iconPosition": _this3.$props.iconPosition,
               "placeholder": _this3.$props.placeholder,
+              "autoFocus": _this3.$props.autoFocus,
               "themePreset": _this3.themePreset,
-              "autocomplete": 'off'
+              "autocomplete": "off"
             },
             "ref": _this3.$props.innerRef,
             "class": getClassName$1(_this3.$props.innerClass, 'input'),
@@ -1811,113 +1858,18 @@ var DataSearch = {
             "domProps": _extends({}, getInputProps({
               value: _this3.$data.currentValue === null ? '' : _this3.$data.currentValue
             }))
-          }), _this3.renderIcons(), _this3.hasCustomRenderer && _this3.getComponent({
-            isOpen: isOpen,
-            getItemProps: getItemProps,
-            getItemEvents: getItemEvents,
-            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) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: item
-              })),
-              "on": _extends({}, getItemEvents({
-                item: item
-              })),
-              "key": index + 1 + "-" + item.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, index)
-              }
-            }, [h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": item
-              }
-            })]);
-          }), _this3.defaultSearchSuggestions.map(function (sugg, index) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: sugg
-              })),
-              "on": _extends({}, getItemEvents({
-                item: sugg
-              })),
-              "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
-                justifyContent: 'flex-start'
-              }
-            }, [h("div", {
-              "style": {
-                padding: '0 10px 0 0'
-              }
-            }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'recent-search-icon') || null,
-                "icon": recentSearchesIcon,
-                "type": "recent-search-icon"
-              }
-            }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
-                "icon": popularSearchesIcon,
-                "type": "popular-search-icon"
-              }
-            })]), h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": sugg
-              }
-            })]);
-          }), hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
-            isOpen: isOpen,
-            getItemProps: getItemProps,
-            getItemEvents: getItemEvents,
-            highlightedIndex: highlightedIndex
-          }, true) : _this3.topSuggestions.map(function (sugg, index) {
-            return h("li", {
-              "domProps": _extends({}, getItemProps({
-                item: sugg
-              })),
-              "on": _extends({}, getItemEvents({
-                item: sugg
-              })),
-              "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
-              "style": {
-                backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
-                justifyContent: 'flex-start'
-              }
-            }, [h("div", {
-              "style": {
-                padding: '0 10px 0 0'
-              }
-            }, [h(CustomSvg, {
-              "attrs": {
-                "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
-                "icon": popularSearchesIcon,
-                "type": "popular-search-icon"
-              }
-            })]), h(SuggestionItem, {
-              "attrs": {
-                "currentValue": _this3.currentValue,
-                "suggestion": sugg
-              }
-            })]);
-          })]) : _this3.renderNoSuggestions(_this3.suggestionsList), ' ']);
+          }), _this3.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this3.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer()]);
         }
       }
     }) : h("div", {
       "class": suggestionsContainer
-    }, [h(Input, {
+    }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
       "class": getClassName$1(this.$props.innerClass, 'input') || '',
       "attrs": {
         "placeholder": this.$props.placeholder,
         "iconPosition": this.$props.iconPosition,
         "showIcon": this.$props.showIcon,
         "showClear": this.$props.showClear,
-        "innerRef": this.$props.innerRef,
         "themePreset": this.themePreset
       },
       "on": _extends({}, {
@@ -1947,22 +1899,20 @@ var DataSearch = {
       "domProps": _extends({}, {
         autofocus: this.$props.autoFocus,
         value: this.$data.currentValue ? this.$data.currentValue : ''
-      })
-    }), this.renderIcons()])]);
+      }),
+      "ref": this.$props.innerRef
+    }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
+  },
+  destroyed: function destroyed() {
+    document.removeEventListener('keydown', this.onKeyDown);
   }
 };
 
 DataSearch.defaultQuery = function (value, props) {
   var finalQuery = null;
-  var fields = [];
 
   if (value) {
-    if (Array.isArray(props.dataField)) {
-      fields = props.dataField;
-    } else if (props.dataField) {
-      fields = [props.dataField];
-    }
-
+    var fields = normalizeDataField(props.dataField, props.fieldWeights);
     finalQuery = {
       bool: {
         should: DataSearch.shouldQuery(value, fields, props),
@@ -1992,10 +1942,10 @@ DataSearch.defaultQuery = function (value, props) {
 DataSearch.shouldQuery = function (value, dataFields, props) {
   var finalQuery = [];
   var phrasePrefixFields = [];
-  var fields = (dataFields || []).map(function (field, index) {
-    var queryField = "" + field + (Array.isArray(props.fieldWeights) && props.fieldWeights[index] ? "^" + props.fieldWeights[index] : '');
+  var fields = dataFields.map(function (dataField) {
+    var queryField = "" + dataField.field + (dataField.weight ? "^" + dataField.weight : '');
 
-    if (!(field.endsWith('.keyword') || field.endsWith('.autosuggest') || field.endsWith('.search'))) {
+    if (!(dataField.field.endsWith('.keyword') || dataField.field.endsWith('.autosuggest') || dataField.field.endsWith('.search'))) {
       phrasePrefixFields.push(queryField);
     }
 
@@ -2115,7 +2065,7 @@ var mapStateToProps = function mapStateToProps(state, props) {
     themePreset: state.config.themePreset,
     error: state.error[props.componentId],
     analytics: state.analytics,
-    config: state.config,
+    enableAppbase: state.config.enableAppbase,
     headers: state.appbaseRef.headers,
     promotedResults: state.promotedResults[props.componentId] || [],
     customData: state.customData[props.componentId],