instantsearch.js 4.83.0 → 4.85.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.83.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.85.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -1127,6 +1127,11 @@
     return insideBoundingBoxStringToBoundingBox(value);
   }
 
+  function getAlgoliaAgent(client) {
+    var clientTyped = client;
+    return clientTyped.transporter && clientTyped.transporter.userAgent ? clientTyped.transporter.userAgent.value : clientTyped._ua;
+  }
+
   // typed as any, since it accepts the _real_ js clients, not the interface we otherwise expect
   function getAppIdAndApiKey(searchClient) {
     if (searchClient.appId && searchClient.apiKey) {
@@ -14500,8 +14505,7 @@
         subscribe: function subscribe() {
           // using setTimeout here to delay extraction until widgets have been added in a tick (e.g. Vue)
           setTimeout(function () {
-            var client = instantSearchInstance.client;
-            payload.ua = client.transporter && client.transporter.userAgent ? client.transporter.userAgent.value : client._ua;
+            payload.ua = getAlgoliaAgent(instantSearchInstance.client);
             extractWidgetPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
             instantSearchInstance.middleware.forEach(function (middleware) {
               return payload.widgets.push({
@@ -15936,6 +15940,12 @@
           helper: helper
         })));
       },
+      scheduleLocalSearch: defer(function () {
+        if (isolated) {
+          var _helper2;
+          (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+        }
+      }),
       getWidgets: function getWidgets() {
         return localWidgets;
       },
@@ -16001,8 +16011,7 @@
             }
           });
           if (isolated) {
-            var _helper2;
-            (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+            this.scheduleLocalSearch();
           } else {
             localInstantSearchInstance.scheduleSearch();
           }
@@ -16081,8 +16090,7 @@
           helper.recommendState = cleanedRecommendState;
           if (localWidgets.length) {
             if (isolated) {
-              var _helper3;
-              (_helper3 = helper) === null || _helper3 === void 0 ? void 0 : _helper3.search();
+              this.scheduleLocalSearch();
             } else {
               localInstantSearchInstance.scheduleSearch();
             }
@@ -16336,7 +16344,7 @@
       },
       dispose: function dispose() {
         var _this5 = this,
-          _helper4,
+          _helper3,
           _derivedHelper3;
         localWidgets.forEach(function (widget) {
           if (widget.dispose && helper) {
@@ -16356,7 +16364,7 @@
         });
         localInstantSearchInstance = null;
         localParent = null;
-        (_helper4 = helper) === null || _helper4 === void 0 ? void 0 : _helper4.removeAllListeners();
+        (_helper3 = helper) === null || _helper3 === void 0 ? void 0 : _helper3.removeAllListeners();
         helper = null;
         (_derivedHelper3 = derivedHelper) === null || _derivedHelper3 === void 0 ? void 0 : _derivedHelper3.detach();
         derivedHelper = null;
@@ -16482,7 +16490,7 @@
     };
   }
 
-  var version$1 = '4.83.0';
+  var version$1 = '4.85.0';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -17258,7 +17266,7 @@
           onSelect = _getItemProps.onSelect,
           itemProps = _objectWithoutProperties$1(_getItemProps, _excluded$a);
         return createElement("li", _extends$1({
-          key: item.objectID
+          key: "".concat(itemProps.id, ":").concat(item.objectID)
         }, itemProps, {
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
@@ -17269,16 +17277,23 @@
     };
   }
 
-  var _excluded$b = ["children", "classNames"];
+  var _excluded$b = ["children", "classNames", "hidden"];
   function createAutocompletePanelComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompletePanel(userProps) {
       var children = userProps.children,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        hidden = userProps.hidden,
         props = _objectWithoutProperties$1(userProps, _excluded$b);
       return createElement("div", _extends$1({}, props, {
-        className: cx('ais-AutocompletePanel', classNames.root, props.className)
+        "aria-hidden": hidden,
+        className: cx('ais-AutocompletePanel', !hidden && 'ais-AutocompletePanel--open', classNames.root, props.className),
+        onMouseDown: function onMouseDown(event) {
+          // Prevents the autocomplete panel from blurring the input when
+          // clicking inside the panel.
+          event.preventDefault();
+        }
       }), createElement("div", {
         className: cx('ais-AutocompletePanelLayout', classNames.layout)
       }, children));
@@ -17427,25 +17442,21 @@
 
   var _slicedToArray$1 = unwrapExports(slicedToArray);
 
-  function AutocompleteSubmitIcon(_ref) {
+  function SubmitIcon(_ref) {
     var createElement = _ref.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteSubmitIcon",
       viewBox: "0 0 24 24",
-      width: "20",
-      height: "20",
       fill: "currentColor"
     }, createElement("path", {
       d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
     }));
   }
-  function AutocompleteLoadingIcon(_ref2) {
+  function LoadingIcon(_ref2) {
     var createElement = _ref2.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteLoadingIcon",
-      viewBox: "0 0 100 100",
-      width: "20",
-      height: "20"
+      viewBox: "0 0 100 100"
     }, createElement("circle", {
       cx: "50",
       cy: "50",
@@ -17463,19 +17474,17 @@
       keyTimes: "0;0.40;0.65;1"
     })));
   }
-  function AutocompleteClearIcon(_ref3) {
+  function ClearIcon(_ref3) {
     var createElement = _ref3.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteClearIcon",
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
       fill: "currentColor"
     }, createElement("path", {
       d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
     }));
   }
-  function AutocompleteClockIcon(_ref4) {
+  function ClockIcon(_ref4) {
     var createElement = _ref4.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -17484,7 +17493,7 @@
       d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
     }));
   }
-  function AutocompleteTrashIcon(_ref5) {
+  function TrashIcon(_ref5) {
     var createElement = _ref5.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -17498,6 +17507,7 @@
     var createElement = _ref.createElement;
     return function AutocompleteRecentSearch(_ref2) {
       var item = _ref2.item,
+        children = _ref2.children,
         onSelect = _ref2.onSelect,
         onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
         _ref2$classNames = _ref2.classNames,
@@ -17509,11 +17519,11 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
-      }, createElement(AutocompleteClockIcon, {
+      }, createElement(ClockIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-      }, item.query)), createElement("div", {
+      }, children)), createElement("div", {
         className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
       }, createElement("button", {
         className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
@@ -17522,7 +17532,7 @@
           evt.stopPropagation();
           onRemoveRecentSearch();
         }
-      }, createElement(AutocompleteTrashIcon, {
+      }, createElement(TrashIcon, {
         createElement: createElement
       }))));
     };
@@ -17535,6 +17545,7 @@
         onClear = _ref2.onClear,
         query = _ref2.query,
         isSearchStalled = _ref2.isSearchStalled;
+      var inputRef = inputProps.ref;
       return createElement("form", {
         className: "ais-AutocompleteForm",
         action: "",
@@ -17542,6 +17553,10 @@
         role: "search",
         onSubmit: function onSubmit(e) {
           return e.preventDefault();
+        },
+        onReset: function onReset() {
+          var _inputRef$current;
+          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         }
       }, createElement("div", {
         className: "ais-AutocompleteInputWrapperPrefix"
@@ -17554,12 +17569,12 @@
         className: "ais-AutocompleteSubmitButton",
         type: "submit",
         title: "Submit"
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteLoadingIndicator",
         hidden: !isSearchStalled
-      }, createElement(AutocompleteLoadingIcon, {
+      }, createElement(LoadingIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteInputWrapper"
@@ -17572,7 +17587,6 @@
         autoCapitalize: "off",
         enterKeyHint: "search",
         spellCheck: "false",
-        placeholder: "",
         maxLength: 512,
         type: "search",
         value: query
@@ -17584,7 +17598,7 @@
         title: "Clear",
         hidden: query.length === 0 || isSearchStalled,
         onClick: onClear
-      }, createElement(AutocompleteClearIcon, {
+      }, createElement(ClearIcon, {
         createElement: createElement
       }))));
     };
@@ -17593,7 +17607,7 @@
   function createAutocompleteSuggestionComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteSuggestion(_ref2) {
-      var item = _ref2.item,
+      var children = _ref2.children,
         onSelect = _ref2.onSelect,
         _ref2$classNames = _ref2.classNames,
         classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -17604,11 +17618,11 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-      }, item.query)));
+      }, children)));
     };
   }
 
@@ -17622,8 +17636,10 @@
       var indices = _ref2.indices,
         indicesConfig = _ref2.indicesConfig,
         onRefine = _ref2.onRefine,
-        globalOnSelect = _ref2.onSelect;
+        globalOnSelect = _ref2.onSelect,
+        placeholder = _ref2.placeholder;
       var getElementId = createGetElementId(useId());
+      var inputRef = useRef(null);
       var rootRef = useRef(null);
       var _useState = useState(false),
         _useState2 = _slicedToArray$1(_useState, 2),
@@ -17655,7 +17671,7 @@
           document.body.removeEventListener('click', onBodyClick);
         };
       }, [rootRef]);
-      var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      var getNextActiveDescendant = function getNextActiveDescendant(key) {
         switch (key) {
           case 'ArrowLeft':
           case 'ArrowUp':
@@ -17674,11 +17690,21 @@
         }
       };
       var submit = function submit() {
-        var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
-        setIsOpen(false);
-        if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+        var _override$activeDesce;
+        var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        if (isOpen) {
+          setIsOpen(false);
+        } else {
+          var _inputRef$current;
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+        }
+        var actualDescendant = (_override$activeDesce = override.activeDescendant) !== null && _override$activeDesce !== void 0 ? _override$activeDesce : activeDescendant;
+        if (!actualDescendant && override.query) {
+          onRefine(override.query);
+        }
+        if (actualDescendant && items.has(actualDescendant)) {
           var _getQuery;
-          var _ref3 = items.get(actualActiveDescendant),
+          var _ref3 = items.get(actualDescendant),
             _item = _ref3.item,
             _ref3$config = _ref3.config,
             indexOnSelect = _ref3$config.onSelect,
@@ -17700,43 +17726,54 @@
         getInputProps: function getInputProps() {
           return {
             id: getElementId('input'),
+            ref: inputRef,
             role: 'combobox',
             'aria-autocomplete': 'list',
             'aria-expanded': isOpen,
             'aria-haspopup': 'grid',
             'aria-controls': getElementId('panel'),
             'aria-activedescendant': activeDescendant,
+            placeholder: placeholder,
             onFocus: function onFocus() {
               return setIsOpen(true);
             },
             onKeyDown: function onKeyDown(event) {
-              if (event.key === 'Escape') {
-                setActiveDescendant(undefined);
-                setIsOpen(false);
-                return;
-              }
               switch (event.key) {
+                case 'Escape':
+                  {
+                    if (isOpen) {
+                      setIsOpen(false);
+                      event.preventDefault();
+                    } else {
+                      setActiveDescendant(undefined);
+                    }
+                    break;
+                  }
                 case 'ArrowLeft':
                 case 'ArrowUp':
                 case 'ArrowRight':
                 case 'ArrowDown':
                   {
                     var _document$getElementB;
-                    var nextActiveDescendent = getNextActiveDescendent(event.key);
-                    setActiveDescendant(nextActiveDescendent);
-                    (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                    setIsOpen(true);
+                    var nextActiveDescendant = getNextActiveDescendant(event.key);
+                    setActiveDescendant(nextActiveDescendant);
+                    (_document$getElementB = document.getElementById(nextActiveDescendant)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
                     event.preventDefault();
                     break;
                   }
                 case 'Enter':
                   {
-                    submit();
+                    submit({
+                      query: event.target.value
+                    });
                     break;
                   }
                 case 'Tab':
                   setIsOpen(false);
                   break;
                 default:
+                  setIsOpen(true);
                   return;
               }
             },
@@ -17764,7 +17801,9 @@
             role: 'row',
             'aria-selected': id === activeDescendant,
             onSelect: function onSelect() {
-              return submit(id);
+              return submit({
+                activeDescendant: id
+              });
             }
           };
         },
@@ -17905,7 +17944,13 @@
         return {
           objectID: value,
           query: value,
-          __indexName: 'recent-searches'
+          __indexName: 'recent-searches',
+          _highlightResult: getHighlightedAttribute({
+            item: {
+              query: value
+            },
+            query: query || ''
+          })
         };
       });
       var indicesForPropGetters = _toConsumableArray$1(indices);
@@ -17941,6 +17986,24 @@
       return false;
     }
   }
+  function getHighlightedAttribute(_ref3) {
+    var item = _ref3.item,
+      query = _ref3.query;
+    if (!query.trim().length) {
+      return {
+        query: {
+          matchLevel: 'none'
+        }
+      };
+    }
+    return {
+      query: {
+        value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+          return "<mark>".concat(match, "</mark>");
+        })
+      }
+    };
+  }
   function getLocalStorage() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
     if (!isLocalStorageSupported()) {
@@ -17965,10 +18028,10 @@
       }
     };
   }
-  function createStorage(_ref3) {
-    var _ref3$limit = _ref3.limit,
-      limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-      storageKey = _ref3.storageKey;
+  function createStorage(_ref4) {
+    var _ref4$limit = _ref4.limit,
+      limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+      storageKey = _ref4.storageKey;
     var storage = getLocalStorage(storageKey);
     var updateListener = null;
     return {
@@ -18141,9 +18204,9 @@
           Fragment: Fragment
         }) : _userProps$itemCompon,
         _userProps$previousIc = userProps.previousIconComponent,
-        PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+        PreviousIcon = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
         _userProps$nextIconCo = userProps.nextIconComponent,
-        NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+        NextIcon = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
         HeaderComponent = userProps.headerComponent,
         _userProps$showNaviga = userProps.showNavigation,
         showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
@@ -18212,7 +18275,7 @@
           event.preventDefault();
           scrollLeft();
         }
-      }, createElement(PreviousIconComponent, {
+      }, createElement(PreviousIcon, {
         createElement: createElement
       })), createElement("ol", {
         className: cx(cssClasses.list),
@@ -18258,7 +18321,7 @@
           event.preventDefault();
           scrollRight();
         }
-      }, createElement(NextIconComponent, {
+      }, createElement(NextIcon, {
         createElement: createElement
       })));
     };
@@ -20401,7 +20464,12 @@
         rendererParams.renderState = {
           indexTemplateProps: [],
           isolatedIndex: isolatedIndex,
-          targetIndex: targetIndex
+          targetIndex: targetIndex,
+          templateProps: prepareTemplateProps({
+            defaultTemplates: {},
+            templatesConfig: connectorParams.instantSearchInstance.templatesConfig,
+            templates: rendererParams.templates
+          })
         };
         connectorParams.refine((_targetIndex$getHelpe = (_targetIndex$getHelpe2 = targetIndex.getHelper()) === null || _targetIndex$getHelpe2 === void 0 ? void 0 : _targetIndex$getHelpe2.state.query) !== null && _targetIndex$getHelpe !== void 0 ? _targetIndex$getHelpe : '');
         return;
@@ -20415,11 +20483,14 @@
       indices = _ref.indices,
       getSearchPageURL = _ref.getSearchPageURL,
       userOnSelect = _ref.onSelect,
-      refine = _ref.refine,
+      refineAutocomplete = _ref.refine,
       cssClasses = _ref.cssClasses,
       renderState = _ref.renderState,
       instantSearchInstance = _ref.instantSearchInstance,
-      showRecent = _ref.showRecent;
+      showRecent = _ref.showRecent,
+      showSuggestions = _ref.showSuggestions,
+      templates = _ref.templates,
+      placeholder = _ref.placeholder;
     var isolatedIndex = renderState.isolatedIndex,
       targetIndex = renderState.targetIndex;
     var searchboxQuery = isolatedIndex === null || isolatedIndex === void 0 ? void 0 : (_isolatedIndex$getHel = isolatedIndex.getHelper()) === null || _isolatedIndex$getHel === void 0 ? void 0 : _isolatedIndex$getHel.state.query;
@@ -20438,6 +20509,7 @@
       return ['ais.hits', 'ais.infiniteHits'].includes($$type);
     })) !== null && _targetIndex$getWidge !== void 0 ? _targetIndex$getWidge : false;
     var onRefine = function onRefine(query) {
+      refineAutocomplete(query);
       instantSearchInstance.setUiState(function (uiState) {
         var _objectSpread2$1;
         return _objectSpread2(_objectSpread2({}, uiState), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, targetIndex.getIndexId(), _objectSpread2(_objectSpread2({}, uiState[targetIndex.getIndexId()]), {}, {
@@ -20468,23 +20540,35 @@
             return;
           }
           setQuery(query);
-        }
+        },
+        placeholder: placeholder
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
-    var AutocompleteRecentSearchComponent = AutocompleteRecentSearch;
+    var AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref4) {
+      var item = _ref4.item,
+        onSelect = _ref4.onSelect,
+        onRemoveRecentSearch = _ref4.onRemoveRecentSearch;
+      return h(AutocompleteRecentSearch, {
+        item: item,
+        onSelect: onSelect,
+        onRemoveRecentSearch: onRemoveRecentSearch
+      }, h(ConditionalReverseHighlight, {
+        item: item
+      }));
+    };
     if (_typeof(showRecent) === 'object' && (_showRecent$templates = showRecent.templates) !== null && _showRecent$templates !== void 0 && _showRecent$templates.item) {
       var props = prepareTemplateProps({
         defaultTemplates: {},
         templatesConfig: instantSearchInstance.templatesConfig,
         templates: showRecent.templates
       });
-      AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref4) {
-        var item = _ref4.item,
-          onSelect = _ref4.onSelect,
-          onRemoveRecentSearch = _ref4.onRemoveRecentSearch;
+      AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref5) {
+        var item = _ref5.item,
+          onSelect = _ref5.onSelect,
+          onRemoveRecentSearch = _ref5.onRemoveRecentSearch;
         return h(Template, _extends({}, props, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -20496,45 +20580,36 @@
         }));
       };
     }
-    return h(Autocomplete, _extends({}, getRootProps(), {
-      classNames: cssClasses
-    }), h(AutocompleteSearchBox, {
-      query: searchboxQuery || '',
-      inputProps: _objectSpread2(_objectSpread2({}, getInputProps()), {}, {
-        // @ts-ignore - This clashes with some ambient React JSX declarations.
-        onInput: function onInput(evt) {
-          return refine(evt.currentTarget.value);
-        }
-      }),
-      onClear: function onClear() {
-        return onRefine('');
-      },
-      isSearchStalled: instantSearchInstance.status === 'stalled'
-    }), h(AutocompletePanel, getPanelProps(), showRecent && h(AutocompleteIndex
-    // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
-    , {
-      ItemComponent: function ItemComponent(_ref5) {
-        var item = _ref5.item,
-          onSelect = _ref5.onSelect;
-        return h(AutocompleteRecentSearchComponent, {
-          item: item,
-          onSelect: onSelect,
-          onRemoveRecentSearch: function onRemoveRecentSearch() {
-            return storage.onRemove(item.query);
-          }
-        });
-      },
-      classNames: {
-        root: 'ais-AutocompleteRecentSearches',
-        list: 'ais-AutocompleteRecentSearchesList',
-        item: 'ais-AutocompleteRecentSearchesItem'
-      },
-      items: storageHits,
-      getItemProps: getItemProps
-    }), indices.map(function (_ref6, i) {
+    var elements = {};
+    if (showRecent) {
+      elements.recent = h(AutocompleteIndex
+      // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+      , {
+        ItemComponent: function ItemComponent(_ref6) {
+          var item = _ref6.item,
+            onSelect = _ref6.onSelect;
+          return h(AutocompleteRecentSearchComponent, {
+            item: item,
+            onSelect: onSelect,
+            onRemoveRecentSearch: function onRemoveRecentSearch() {
+              return storage.onRemove(item.query);
+            }
+          });
+        },
+        classNames: {
+          root: 'ais-AutocompleteRecentSearches',
+          list: 'ais-AutocompleteRecentSearchesList',
+          item: 'ais-AutocompleteRecentSearchesItem'
+        },
+        items: storageHits,
+        getItemProps: getItemProps
+      });
+    }
+    indices.forEach(function (_ref7, i) {
       var _indicesConfig$i$temp;
-      var indexId = _ref6.indexId,
-        hits = _ref6.hits;
+      var indexId = _ref7.indexId,
+        indexName = _ref7.indexName,
+        hits = _ref7.hits;
       if (!renderState.indexTemplateProps[i]) {
         renderState.indexTemplateProps[i] = prepareTemplateProps({
           defaultTemplates: {},
@@ -20542,8 +20617,8 @@
           templates: indicesConfig[i].templates
         });
       }
-      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref7) {
-        var items = _ref7.items;
+      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref8) {
+        var items = _ref8.items;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "header",
           rootTagName: "fragment",
@@ -20552,9 +20627,9 @@
           }
         }));
       } : undefined;
-      var itemComponent = function itemComponent(_ref8) {
-        var item = _ref8.item,
-          onSelect = _ref8.onSelect;
+      var itemComponent = function itemComponent(_ref9) {
+        var item = _ref9.item,
+          onSelect = _ref9.onSelect;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "item",
           rootTagName: "fragment",
@@ -20564,11 +20639,17 @@
           }
         }));
       };
-      return h(AutocompleteIndex, {
+      var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+      var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+        return !find(storageHits, function (storageHit) {
+          return storageHit.query === suggestionHit.query;
+        });
+      }) : hits;
+      elements[elementId] = h(AutocompleteIndex, {
         key: indexId,
         HeaderComponent: headerComponent,
         ItemComponent: itemComponent,
-        items: hits.map(function (item) {
+        items: filteredHits.map(function (item) {
           return _objectSpread2(_objectSpread2({}, item), {}, {
             __indexName: indexId
           });
@@ -20576,26 +20657,55 @@
         getItemProps: getItemProps,
         classNames: indicesConfig[i].cssClasses
       });
+    });
+    return h(Autocomplete, _extends({}, getRootProps(), {
+      classNames: cssClasses
+    }), h(AutocompleteSearchBox, {
+      query: searchboxQuery || '',
+      inputProps: _objectSpread2(_objectSpread2({}, getInputProps()), {}, {
+        // @ts-ignore - This clashes with some ambient React JSX declarations.
+        onInput: function onInput(evt) {
+          return refineAutocomplete(evt.currentTarget.value);
+        }
+      }),
+      onClear: function onClear() {
+        onRefine('');
+      },
+      isSearchStalled: instantSearchInstance.status === 'stalled'
+    }), h(AutocompletePanel, getPanelProps(), templates.panel ? h(Template, _extends({}, renderState.templateProps, {
+      templateKey: "panel",
+      rootTagName: "fragment",
+      data: {
+        elements: elements,
+        indices: indices
+      }
+    })) : Object.keys(elements).map(function (elementId) {
+      return elements[elementId];
     })));
   }
   function EXPERIMENTAL_autocomplete(widgetParams) {
-    var _ref9 = widgetParams || {},
-      container = _ref9.container,
-      escapeHTML = _ref9.escapeHTML,
-      _ref9$indices = _ref9.indices,
-      indices = _ref9$indices === void 0 ? [] : _ref9$indices,
-      showSuggestions = _ref9.showSuggestions,
-      showRecent = _ref9.showRecent,
-      getSearchPageURL = _ref9.getSearchPageURL,
-      onSelect = _ref9.onSelect,
-      _ref9$templates = _ref9.templates,
-      templates = _ref9$templates === void 0 ? {} : _ref9$templates,
-      _ref9$cssClasses = _ref9.cssClasses,
-      userCssClasses = _ref9$cssClasses === void 0 ? {} : _ref9$cssClasses;
+    var _ref0 = widgetParams || {},
+      container = _ref0.container,
+      escapeHTML = _ref0.escapeHTML,
+      _ref0$indices = _ref0.indices,
+      indices = _ref0$indices === void 0 ? [] : _ref0$indices,
+      showSuggestions = _ref0.showSuggestions,
+      showRecent = _ref0.showRecent,
+      userSearchParameters = _ref0.searchParameters,
+      getSearchPageURL = _ref0.getSearchPageURL,
+      onSelect = _ref0.onSelect,
+      _ref0$templates = _ref0.templates,
+      templates = _ref0$templates === void 0 ? {} : _ref0$templates,
+      _ref0$cssClasses = _ref0.cssClasses,
+      userCssClasses = _ref0$cssClasses === void 0 ? {} : _ref0$cssClasses,
+      placeholder = _ref0.placeholder;
     if (!container) {
       throw new Error(withUsage$z('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
+    var searchParameters = _objectSpread2({
+      hitsPerPage: 5
+    }, userSearchParameters);
     var cssClasses = {
       root: cx(suit$6(), userCssClasses.root)
     };
@@ -20606,7 +20716,16 @@
         indexName: showSuggestions.indexName,
         templates: _objectSpread2({
           // @ts-expect-error
-          item: AutocompleteSuggestion
+          item: function item(_ref1) {
+            var _item = _ref1.item,
+              onSelectItem = _ref1.onSelect;
+            return h(AutocompleteSuggestion, {
+              item: _item,
+              onSelect: onSelectItem
+            }, h(ConditionalReverseHighlight, {
+              item: _item
+            }));
+          }
         }, showSuggestions.templates),
         cssClasses: {
           root: cx('ais-AutocompleteSuggestions', (_showSuggestions$cssC = showSuggestions.cssClasses) === null || _showSuggestions$cssC === void 0 ? void 0 : _showSuggestions$cssC.root),
@@ -20629,10 +20748,13 @@
       onSelect: onSelect,
       cssClasses: cssClasses,
       showRecent: showRecent,
+      showSuggestions: showSuggestions,
+      placeholder: placeholder,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,
-        targetIndex: undefined
+        targetIndex: undefined,
+        templateProps: undefined
       },
       templates: templates
     });
@@ -20644,20 +20766,32 @@
     })({}), index({
       indexId: "ais-autocomplete-".concat(instanceId),
       EXPERIMENTAL_isolated: true
-    }).addWidgets([].concat(_toConsumableArray(indicesConfig.map(function (_ref0) {
-      var indexName = _ref0.indexName;
+    }).addWidgets([configure(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref10) {
+      var indexName = _ref10.indexName,
+        indexSearchParameters = _ref10.searchParameters;
       return index({
         indexName: indexName,
         indexId: indexName
-      }).addWidgets([configure({
-        hitsPerPage: 5
-      })]);
+      }).addWidgets([configure(indexSearchParameters || {})]);
     })), [_objectSpread2(_objectSpread2({}, makeWidget({
       escapeHTML: escapeHTML
     })), {}, {
       $$widgetType: 'ais.autocomplete'
     })]))];
   }
+  function ConditionalReverseHighlight(_ref11) {
+    var _item$_highlightResul;
+    var item = _ref11.item;
+    if (!((_item$_highlightResul = item._highlightResult) !== null && _item$_highlightResul !== void 0 && _item$_highlightResul.query) ||
+    // @ts-expect-error - we should not have matchLevel as arrays here
+    item._highlightResult.query.matchLevel === 'none') {
+      return item.query;
+    }
+    return h(ReverseHighlight$1, {
+      attribute: "query",
+      hit: item
+    });
+  }
 
   var Breadcrumb = function Breadcrumb(_ref) {
     var items = _ref.items,