@appbaseio/reactivesearch-vue 3.0.0-rc.7.1 → 3.0.0-rc.9

package/dist/cjs/{install-3821345b.js → install-e8141489.js}

@@ -25,10 +25,9 @@ var Flex = require('./Flex-ddde6d26.js');
 var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
-var xss = _interopDefault(require('xss'));
 var remarkable = require('remarkable');
-var DropDown = require('./DropDown-dcdaf54f.js');
-var Input = require('./Input-df30e5fc.js');
+var DropDown = require('./DropDown-aef75c14.js');
+var Input = require('./Input-56eba499.js');
 var Container = require('./Container-29f049b2.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 var query = require('@appbaseio/reactivecore/lib/actions/query');
@@ -53,9 +52,7 @@ var ResultList = require('./ResultList.js');
 var StateProvider = require('./StateProvider.js');
 
 var _templateObject;
-var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n};\n"])), function (props) {
-  return props.isOpen && 'box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;';
-});
+var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
 InputGroup.defaultProps = {
   className: 'input-group'
 };
@@ -1073,9 +1070,6 @@ var AIFeedback = vue.defineComponent({
   }
 });
 
-var _templateObject$8;
-var AutosuggestFooterContainer = vueEmotion.styled('div')(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
-
 var _excluded = ["_source"];
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
@@ -1112,8 +1106,7 @@ var SearchBox = vue.defineComponent({
       showAIScreen: false,
       showAIScreenFooter: false,
       showFeedbackComponent: false,
-      feedbackState: null,
-      prefilledAIAnswer: ''
+      feedbackState: null
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -1154,37 +1147,6 @@ var SearchBox = vue.defineComponent({
     },
     stats: function stats() {
       return getResultStats(this);
-    },
-    mergedAIAnswer: function mergedAIAnswer() {
-      return this.prefilledAIAnswer || this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text;
-    },
-    parsedSuggestions: function parsedSuggestions() {
-      var suggestionsArray = [];
-      if (Array.isArray(this.suggestions) && this.suggestions.length) {
-        suggestionsArray = [].concat(withClickIds(this.suggestions));
-      }
-      suggestionsArray = suggestionsArray.map(function (s) {
-        if (s.sectionId) {
-          return s;
-        }
-        return _rollupPluginBabelHelpers._extends({}, s, {
-          sectionId: s._suggestion_type
-        });
-      });
-      var sectionsAccumulated = [];
-      var sectionisedSuggestions = suggestionsArray.reduce(function (acc, d, currentIndex) {
-        if (sectionsAccumulated.includes(d.sectionId)) return acc;
-        if (d.sectionId) {
-          acc[currentIndex] = suggestionsArray.filter(function (g) {
-            return g.sectionId === d.sectionId;
-          });
-          sectionsAccumulated.push(d.sectionId);
-        } else {
-          acc[currentIndex] = d;
-        }
-        return acc;
-      }, {});
-      return Object.values(sectionisedSuggestions);
     }
   },
   props: {
@@ -1216,11 +1178,6 @@ var SearchBox = vue.defineComponent({
     enableQuerySuggestions: VueTypes.bool.def(false),
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSuggestions: VueTypes.bool.def(false),
-    enableFAQSuggestions: VueTypes.bool.def(false),
-    FAQSuggestionsConfig: VueTypes.shape({
-      sectionLabel: VueTypes.string,
-      size: VueTypes.number
-    }),
     fieldWeights: vueTypes.types.fieldWeights,
     filterLabel: vueTypes.types.string,
     fuzziness: vueTypes.types.fuzziness,
@@ -1256,20 +1213,12 @@ var SearchBox = vue.defineComponent({
     distinctFieldConfig: vueTypes.types.props,
     //
     focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
-    showFocusShortcutsIcon: VueTypes.bool.def(true),
     addonBefore: VueTypes.any,
     addonAfter: VueTypes.any,
-    showSuggestionsFooter: VueTypes.bool.def(true),
     expandSuggestionsContainer: VueTypes.bool.def(true),
-    renderSuggestionsFooter: VueTypes.func,
     index: VueTypes.string,
     popularSuggestionsConfig: VueTypes.object,
     recentSuggestionsConfig: VueTypes.object,
-    featuredSuggestionsConfig: VueTypes.shape({
-      maxSuggestionsPerSection: VueTypes.number,
-      sectionsOrder: VueTypes.arrayOf(VueTypes.string)
-    }),
-    customEvents: VueTypes.object,
     applyStopwords: VueTypes.bool,
     customStopwords: vueTypes.types.stringArray,
     onData: vueTypes.types.func,
@@ -1457,7 +1406,7 @@ var SearchBox = vue.defineComponent({
         resultStats: this.stats,
         AIData: {
           question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.mergedAIAnswerc,
+          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           showAIScreen: this.showAIScreen,
           sources: this.getAISourceObjects(),
@@ -1488,7 +1437,7 @@ var SearchBox = vue.defineComponent({
         this.onValueSelectedHandler(currentValue, reactivecore.causes.SEARCH_ICON_CLICK);
       }
     },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue, shouldExecuteQuery) {
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
       var _this2 = this;
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
@@ -1502,9 +1451,6 @@ var SearchBox = vue.defineComponent({
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       var performUpdate = function performUpdate() {
         if (_this2.$options.isTagsMode && isEqual(value, _this2.selectedTags)) {
           return;
@@ -1540,18 +1486,17 @@ var SearchBox = vue.defineComponent({
             }
             if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
               enableAI: true
-            } : {}, shouldExecuteQuery);
+            } : {});
           } // 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 === reactivecore.causes.SUGGESTION_SELECT || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
-              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
             } else {
               _this2.setValue('', true);
             }
           } else if (props.value === undefined || cause === reactivecore.causes.SUGGESTION_SELECT || cause === reactivecore.causes.CLEAR_VALUE) {
-            _this2.showAIScreen = false;
-            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
           // debounce for handling text while typing
@@ -1562,13 +1507,10 @@ var SearchBox = vue.defineComponent({
       };
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
-    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta, shouldExecuteQuery) {
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
       if (meta === void 0) {
         meta = {};
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       if (!this.$props.autosuggest) {
         return;
       }
@@ -1589,15 +1531,12 @@ var SearchBox = vue.defineComponent({
         value: value,
         componentType: constants.componentTypes.searchBox,
         meta: meta
-      }, shouldExecuteQuery);
+      });
     },
-    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue, shouldExecuteQuery) {
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       var _this$$props = this.$props,
         customQuery = _this$$props.customQuery,
         filterLabel = _this$$props.filterLabel,
@@ -1626,7 +1565,7 @@ var SearchBox = vue.defineComponent({
         URLParams: URLParams,
         componentType: constants.componentTypes.searchBox,
         category: categoryValue
-      }, shouldExecuteQuery);
+      });
     },
     handleFocus: function handleFocus(event) {
       if (this.$props.autosuggest) {
@@ -1725,60 +1664,12 @@ var SearchBox = vue.defineComponent({
         }, e);
       }
     },
-    handleFeaturedSuggestionClicked: function handleFeaturedSuggestionClicked(suggestion) {
-      try {
-        var _this$$refs2, _this$$refs2$this$$pr;
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.NAVIGATE) {
-          var _JSON$parse = JSON.parse(suggestion.subAction),
-            _JSON$parse$target = _JSON$parse.target,
-            target = _JSON$parse$target === void 0 ? '_self' : _JSON$parse$target,
-            _JSON$parse$link = _JSON$parse.link,
-            link = _JSON$parse$link === void 0 ? '/' : _JSON$parse$link;
-          if (typeof window !== 'undefined') {
-            window.open(link, target);
-          }
-        }
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
-          var matchedValues = suggestion.subAction.match(/function\s*\(.*\)(.|\n)*/);
-          var functionStr = matchedValues && matchedValues[0];
-          // eslint-disable-next-line no-new-func
-          var func = new Function("return " + functionStr)();
-          func(suggestion, this.$data.currentValue, this.$props.customEvents);
-        }
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.SELECT) {
-          this.setValue(suggestion.value, true, this.$props, this.$options.isTagsMode.current ? reactivecore.causes.SUGGESTION_SELECT : reactivecore.causes.ENTER_PRESS);
-          this.onValueSelectedHandler(suggestion.value, reactivecore.causes.SUGGESTION_SELECT);
-        }
-        // blur is important to close the dropdown
-        // on selecting one of featured suggestions
-        // else Downshift probably is focusing the dropdown
-        // and not letting it close
-        // eslint-disable-next-line no-unused-expressions
-        (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.blur();
-      } catch (e) {
-        console.error("Error: There was an error parsing the subAction for the featured suggestion with label, \"" + suggestion.label + "\"", e);
-      }
-    },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
       var _this4 = this;
-      // handle when FAQ suggestion is clicked
-      if (suggestion && suggestion._suggestion_type === helper.suggestionTypes.FAQ) {
-        this.prefilledAIAnswer = suggestion._answer;
-        this.setValue(suggestion.value, true, this.$props, reactivecore.causes.SUGGESTION_SELECT, true, false, suggestion._category, false);
-        this.isOpen = true;
-        this.showAIScreen = true;
-        return;
-      }
       if (!this.$props.enableAI) this.isOpen = false;else {
         this.showAIScreen = true;
       }
       var value = this.$props.value;
-
-      // handle featured suggestions click event
-      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
-        this.handleFeaturedSuggestionClicked(suggestion);
-        return;
-      }
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
@@ -1934,13 +1825,6 @@ var SearchBox = vue.defineComponent({
         customQuery: true
       });
     },
-    suggestionsFooter: function suggestionsFooter() {
-      return typeof renderSuggestionsFooter === 'function' ? this.$props.renderSuggestionsFooter() : vue.createVNode(AutosuggestFooterContainer, null, {
-        "default": function _default() {
-          return [vue.createVNode("div", null, [vue.createTextVNode("\u2191\u2193 Navigate")]), vue.createVNode("div", null, [vue.createTextVNode("\u21A9 Go")])];
-        }
-      });
-    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this6 = this;
       var _this$$props2 = this.$props,
@@ -1968,29 +1852,16 @@ var SearchBox = vue.defineComponent({
       }
       return null;
     },
-    renderShortcut: function renderShortcut() {
-      if (this.$props.focusShortcuts && this.$props.focusShortcuts.length) {
-        var shortcut = this.$props.focusShortcuts[0];
-        shortcut = shortcut.toLowerCase();
-        shortcut = shortcut.replace('shift', '⬆️');
-        shortcut = shortcut.replace('command', 'cmd');
-        shortcut = shortcut.replace('control', 'ctrl');
-        shortcut = shortcut.replace('option', 'alt');
-        return shortcut.toUpperCase();
-      }
-      return '/';
-    },
     renderIcons: function renderIcons() {
       var _this7 = this;
-      var _slot3, _slot4, _slot5, _slot6;
+      var _slot3, _slot4, _slot5;
       var _this$$props3 = this.$props,
         iconPosition = _this$$props3.iconPosition,
         showClear = _this$$props3.showClear,
         innerClass = _this$$props3.innerClass,
         getMicInstance = _this$$props3.getMicInstance,
         showVoiceSearch = _this$$props3.showVoiceSearch,
-        showIcon = _this$$props3.showIcon,
-        showFocusShortcutsIcon = _this$$props3.showFocusShortcutsIcon;
+        showIcon = _this$$props3.showIcon;
       var renderMic = this.$slots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
@@ -2006,14 +1877,6 @@ var SearchBox = vue.defineComponent({
             "default": function _default() {
               return [_slot3];
             }
-          }), showFocusShortcutsIcon && vue.createVNode(DropDown.ButtonIconWrapper, {
-            "onClick": function onClick(e) {
-              return _this7.focusSearchBox(e);
-            }
-          }, _isSlot(_slot4 = _this7.renderShortcut()) ? _slot4 : {
-            "default": function _default() {
-              return [_slot4];
-            }
           }), showVoiceSearch && vue.createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
@@ -2021,9 +1884,9 @@ var SearchBox = vue.defineComponent({
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && vue.createVNode(DropDown.IconWrapper, {
             "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
+          }, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
             "default": function _default() {
-              return [_slot5];
+              return [_slot4];
             }
           })];
         }
@@ -2034,23 +1897,23 @@ var SearchBox = vue.defineComponent({
         "default": function _default() {
           return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.IconWrapper, {
             "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot6 = _this7.renderIcon()) ? _slot6 : {
+          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
             "default": function _default() {
-              return [_slot6];
+              return [_slot5];
             }
           })];
         }
       })]);
     },
     focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs3, _this$$refs3$this$$pr;
+      var _this$$refs2, _this$$refs2$this$$pr;
       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$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$this$$pr = _this$$refs3[this.$props.innerRef]) == null ? void 0 : _this$$refs3$this$$pr.focus(); // eslint-disable-line
+      (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
       var _this8 = this;
@@ -2090,31 +1953,16 @@ var SearchBox = vue.defineComponent({
       this.currentValue = index.decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
-    renderActionIcon: function renderActionIcon(suggestion) {
+    renderAutoFill: function renderAutoFill(suggestion) {
       var _this9 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
         _this9.onAutofillClick(suggestion);
       };
-      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
-        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
-          return vue.createVNode(AutoFillSvg, {
-            "style": {
-              transform: 'rotate(135deg)',
-              pointerEvents: 'none'
-            }
-          }, null);
-        }
-        return null;
-      }
-      if (!suggestion._category) {
-        /* 👇 avoid showing autofill for category suggestions👇 */
-
-        return vue.createVNode(AutoFillSvg, {
-          "onClick": handleAutoFillClick
-        }, null);
-      }
-      return null;
+      /* 👇 avoid showing autofill for category suggestions👇 */
+      return suggestion._category ? null : vue.createVNode(AutoFillSvg, {
+        "onClick": handleAutoFillClick
+      }, null);
     },
     renderTag: function renderTag(item) {
       var _this10 = this;
@@ -2221,7 +2069,7 @@ var SearchBox = vue.defineComponent({
       return vue.createVNode(HorizontalSkeletonLoader, null, null);
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
-      var _slot7;
+      var _slot6;
       var _this12 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
@@ -2236,7 +2084,7 @@ var SearchBox = vue.defineComponent({
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot7 = _this12.getAISourceObjects().map(function (el) {
+          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
             return vue.createVNode(Button.Button, {
               "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
               "title": el[sourceDocumentLabel],
@@ -2249,9 +2097,9 @@ var SearchBox = vue.defineComponent({
                 return [el[sourceDocumentLabel]];
               }
             });
-          })) ? _slot7 : {
+          })) ? _slot6 : {
             "default": function _default() {
-              return [_slot7];
+              return [_slot6];
             }
           })];
         }
@@ -2263,7 +2111,7 @@ var SearchBox = vue.defineComponent({
       if (customAIRenderer) {
         return customAIRenderer({
           question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.mergedAIAnswer,
+          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           loading: this.isAIResponseLoading || this.isLoading,
           sources: this.getAISourceObjects(),
@@ -2274,7 +2122,7 @@ var SearchBox = vue.defineComponent({
         return this.renderAIScreenLoader();
       }
       return vue.createVNode("div", null, [vue.createVNode(Answer, {
-        "innerHTML": md.render(this.mergedAIAnswer)
+        "innerHTML": md.render(this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text)
       }, null), this.renderAIScreenFooter(), this.showFeedbackComponent && vue.createVNode("div", {
         "class": "" + (getClassName$1(this.$props.innerClass, 'ai-feedback') || '')
       }, [vue.createVNode(AIFeedback, {
@@ -2383,58 +2231,23 @@ var SearchBox = vue.defineComponent({
               highlightedIndex = _ref8.highlightedIndex,
               setHighlightedIndex = _ref8.setHighlightedIndex;
             var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-              var getIcon = function getIcon(iconType, item, leaveSpaceForIcon) {
+              var getIcon = function getIcon(iconType) {
                 switch (iconType) {
                   case helper.suggestionTypes.Recent:
                     return recentSearchesIcon;
                   case helper.suggestionTypes.Popular:
                     return popularSearchesIcon;
-                  case helper.suggestionTypes.Featured:
-                    if (item.icon) {
-                      return function () {
-                        return vue.createVNode("div", {
-                          "style": {
-                            display: 'flex'
-                          },
-                          "innerHTML": xss(item.icon)
-                        }, null);
-                      };
-                    }
-                    if (item.iconURL) {
-                      return function () {
-                        return (// When you change below also change the empty icon below
-                          vue.createVNode("img", {
-                            "style": {
-                              maxHeight: '25px'
-                            },
-                            "src": xss(item.iconURL),
-                            "alt": item.value
-                          }, null)
-                        );
-                      };
-                    }
-                    // Render an empty icon when no icon is provided from the dashboard
-                    return function () {
-                      return vue.createVNode("span", {
-                        "style": {
-                          display: 'inline-block',
-                          height: '25px',
-                          width: leaveSpaceForIcon ? '25px' : 0
-                        }
-                      }, null);
-                    };
                   default:
                     return null;
                 }
               };
-              var indexOffset = 0;
               return vue.createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
                 isOpen: isOpen,
                 getItemProps: getItemProps,
                 getItemEvents: getItemEvents,
                 highlightedIndex: highlightedIndex
               }), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
-                "class": Input.suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list') + " " + Input.searchboxSuggestions(_this15.themePreset, _this15.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
+                "class": Input.suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
                 "ref": _dropdownULRef
               }, [_this15.showAIScreen && vue.createVNode(SearchBoxAISection, {
                 "themePreset": _this15.$props.themePreset
@@ -2442,63 +2255,43 @@ var SearchBox = vue.defineComponent({
                 "default": function _default() {
                   return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
                 }
-              }), !_this15.showAIScreen && _this15.parsedSuggestions.map(function (item, itemIndex) {
-                var index = indexOffset + itemIndex;
-                if (Array.isArray(item)) {
-                  var sectionHtml = xss(item[0].sectionLabel);
-                  indexOffset += item.length - 1;
-                  return vue.createVNode("div", {
-                    "class": "section-container"
-                  }, [sectionHtml ? vue.createVNode("div", {
-                    "class": "section-header " + getClassName$1(_this15.$props.innerClass, 'section-label'),
-                    "key": "" + item[0].sectionId,
-                    "innerHTML": sectionHtml
-                  }, null) : null, vue.createVNode("ul", {
-                    "class": "section-list"
-                  }, [item.map(function (sectionItem, sectionIndex) {
-                    var suggestionsHaveIcon = item.some(function (s) {
-                      return s.icon || s.iconURL;
-                    });
-                    return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
-                      item: sectionItem
-                    }), _transformOn(getItemEvents({
-                      item: sectionItem
-                    })), {
-                      "key": index + sectionIndex,
-                      "style": {
-                        justifyContent: 'flex-start',
-                        alignItems: 'center'
-                      },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
-                    }), [renderItem(sectionItem)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
-                      item: sectionItem
-                    }), _transformOn(getItemEvents({
-                      item: sectionItem
-                    })), {
-                      "key": index + sectionIndex,
-                      "style": {
-                        justifyContent: 'flex-start',
-                        alignItems: 'center'
-                      },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
-                    }), [vue.createVNode("div", {
-                      "style": {
-                        padding: '0 10px 0 0',
-                        display: 'flex'
-                      }
-                    }, [vue.createVNode(CustomSvg, {
-                      "key": sectionItem._suggestion_type + "-" + sectionIndex,
-                      "className": getClassName$1(_this15.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
-                      "icon": getIcon(sectionItem._suggestion_type, sectionItem, suggestionsHaveIcon),
-                      "type": sectionItem._suggestion_type + "-search-icon"
-                    }, null)]), vue.createVNode(SuggestionItem, {
-                      "currentValue": _this15.currentValue,
-                      "suggestion": sectionItem
-                    }, null), _this15.renderActionIcon(sectionItem)]);
-                  })])]);
-                }
-                return vue.createVNode("div", null, [vue.createTextVNode("No suggestions")]);
-              }), _this15.$props.showSuggestionsFooter ? _this15.suggestionsFooter() : null]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
+              }), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
+                return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
+                  item: item
+                }), getItemEvents({
+                  item: item
+                }), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [renderItem(item)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
+                  item: item
+                }), _transformOn(getItemEvents({
+                  item: item
+                })), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [vue.createVNode("div", {
+                  "style": {
+                    padding: '0 10px 0 0',
+                    display: 'flex'
+                  }
+                }, [vue.createVNode(CustomSvg, {
+                  "className": getClassName$1(_this15.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "icon": getIcon(item._suggestion_type),
+                  "type": item._suggestion_type + "-search-icon"
+                }, null)]), vue.createVNode(SuggestionItem, {
+                  "currentValue": _this15.currentValue,
+                  "suggestion": item
+                }, null), _this15.renderAutoFill(item)]);
+              })]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
             };
             return vue.createVNode("div", {
               "class": Input.suggestionsContainer
@@ -2538,8 +2331,7 @@ var SearchBox = vue.defineComponent({
                       "placeholder": _this15.$props.placeholder,
                       "autoFocus": _this15.$props.autoFocus,
                       "showFocusShortcutsIcon": _this15.$props.showFocusShortcutsIcon,
-                      "showVoiceSearch": _this15.$props.showVoiceSearch,
-                      "searchBox": true
+                      "showVoiceSearch": _this15.$props.showVoiceSearch
                     }, getInputProps({
                       value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
                     }), {
@@ -3273,8 +3065,8 @@ AIConnected.install = function (Vue) {
 // Add componentType for SSR
 AIConnected.componentType = constants.componentTypes.AIAnswer;
 
-var _templateObject$9, _templateObject2$4;
-var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$9 || (_templateObject$9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+var _templateObject$8, _templateObject2$4;
+var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
 var HierarchicalMenuListItem = vueEmotion.styled('li')(_templateObject2$4 || (_templateObject2$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
   return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
 });

package/dist/cjs/install.js

@@ -32,11 +32,10 @@ require('@appbaseio/analytics');
 require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
-require('xss');
 require('remarkable');
-var install = require('./install-3821345b.js');
-require('./DropDown-dcdaf54f.js');
-require('./Input-df30e5fc.js');
+var install = require('./install-e8141489.js');
+require('./DropDown-aef75c14.js');
+require('./Input-56eba499.js');
 require('compute-scroll-into-view');
 require('./Container-29f049b2.js');
 require('vue-highlight-words');

package/dist/cjs/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-rc.7.1";
+var version = "3.0.0-rc.9";
 
 exports.default = version;