instantsearch.js 4.82.0 → 4.84.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.82.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.84.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) :
@@ -6277,8 +6277,8 @@
 
     return recSort(
       function (data, facetName) {
+        var facetOrdering = getFacetOrdering(results, facetName);
         if (options.facetOrdering) {
-          var facetOrdering = getFacetOrdering(results, facetName);
           if (facetOrdering) {
             return sortViaFacetOrdering(data, facetOrdering);
           }
@@ -6286,7 +6286,24 @@
 
         if (Array.isArray(options.sortBy)) {
           var order = formatSort(options.sortBy, SearchResults.DEFAULT_SORT);
-          return orderBy_1(data, order[0], order[1]);
+          var items = orderBy_1(data, order[0], order[1]);
+
+          var hide =
+            facetOrdering && facetOrdering.hide ? facetOrdering.hide : [];
+          if (hide.length > 0) {
+            var visible = [];
+            items.forEach(function (item) {
+              // hierarchical facets get sorted using their raw name
+              var name = item.path || item.name;
+              if (hide.indexOf(name) === -1) {
+                visible.push(item);
+              }
+            });
+
+            return visible;
+          }
+
+          return items;
         } else if (typeof options.sortBy === 'function') {
           return vanillaSortFn(options.sortBy, data);
         }
@@ -6551,7 +6568,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version = '3.26.0';
+  var version = '3.26.1';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -7004,16 +7021,19 @@
 
         content = Array.isArray(content) ? content[0] : content;
 
-        content.facetHits.forEach(function (f, i) {
+        content.facetHits = content.facetHits.reduce(function (acc, f) {
           if (hide.indexOf(f.value) > -1) {
-            content.facetHits.splice(i, 1);
-            return;
+            return acc;
           }
+
           f.escapedValue = escapeFacetValue$4(f.value);
           f.isRefined = isDisjunctive
             ? state.isDisjunctiveFacetRefined(facet, f.escapedValue)
             : state.isFacetRefined(facet, f.escapedValue);
-        });
+
+          acc.push(f);
+          return acc;
+        }, []);
 
         return content;
       },
@@ -15916,6 +15936,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;
       },
@@ -15981,8 +16007,7 @@
             }
           });
           if (isolated) {
-            var _helper2;
-            (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+            this.scheduleLocalSearch();
           } else {
             localInstantSearchInstance.scheduleSearch();
           }
@@ -16061,8 +16086,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();
             }
@@ -16134,12 +16158,6 @@
         helper.searchWithoutTriggeringOnStateChange = function () {
           return mainHelper.search();
         };
-
-        // We use the same pattern for the `searchForFacetValues`.
-        helper.searchForFacetValues = function (facetName, facetValue, maxFacetHits, userState) {
-          var state = helper.state.setQueryParameters(userState);
-          return mainHelper.searchForFacetValues(facetName, facetValue, maxFacetHits, state);
-        };
         var isolatedHelper = indexName ? helper : algoliasearchHelper_1({}, '__empty_index__', {});
         var derivingHelper = isolated ? isolatedHelper : nearestIsolatedHelper(parent, mainHelper);
         derivedHelper = derivingHelper.derive(function () {
@@ -16322,7 +16340,7 @@
       },
       dispose: function dispose() {
         var _this5 = this,
-          _helper4,
+          _helper3,
           _derivedHelper3;
         localWidgets.forEach(function (widget) {
           if (widget.dispose && helper) {
@@ -16342,7 +16360,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;
@@ -16468,7 +16486,7 @@
     };
   }
 
-  var version$1 = '4.82.0';
+  var version$1 = '4.84.0';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -17271,117 +17289,6 @@
     };
   }
 
-  function AutocompleteSubmitIcon(_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) {
-    var createElement = _ref2.createElement;
-    return createElement("svg", {
-      className: "ais-AutocompleteLoadingIcon",
-      viewBox: "0 0 100 100",
-      width: "20",
-      height: "20"
-    }, createElement("circle", {
-      cx: "50",
-      cy: "50",
-      fill: "none",
-      r: "35",
-      stroke: "currentColor",
-      strokeDasharray: "164.93361431346415 56.97787143782138",
-      strokeWidth: "6"
-    }, createElement("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      repeatCount: "indefinite",
-      dur: "1s",
-      values: "0 50 50;90 50 50;180 50 50;360 50 50",
-      keyTimes: "0;0.40;0.65;1"
-    })));
-  }
-  function AutocompleteClearIcon(_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 createAutocompleteSearchComponent(_ref) {
-    var createElement = _ref.createElement;
-    return function AutocompleteSearch(_ref2) {
-      var inputProps = _ref2.inputProps,
-        onClear = _ref2.onClear,
-        query = _ref2.query,
-        isSearchStalled = _ref2.isSearchStalled;
-      return createElement("form", {
-        className: "ais-AutocompleteForm",
-        action: "",
-        noValidate: true,
-        role: "search",
-        onSubmit: function onSubmit(e) {
-          return e.preventDefault();
-        }
-      }, createElement("div", {
-        className: "ais-AutocompleteInputWrapperPrefix"
-      }, createElement("label", {
-        className: "ais-AutocompleteLabel",
-        "aria-label": "Submit",
-        htmlFor: inputProps.id,
-        id: "".concat(inputProps.id, "-label")
-      }, createElement("button", {
-        className: "ais-AutocompleteSubmitButton",
-        type: "submit",
-        title: "Submit"
-      }, createElement(AutocompleteSubmitIcon, {
-        createElement: createElement
-      }))), createElement("div", {
-        className: "ais-AutocompleteLoadingIndicator",
-        hidden: !isSearchStalled
-      }, createElement(AutocompleteLoadingIcon, {
-        createElement: createElement
-      }))), createElement("div", {
-        className: "ais-AutocompleteInputWrapper"
-      }, createElement("input", _extends$1({
-        className: "ais-AutocompleteInput",
-        "aria-autocomplete": "both",
-        "aria-labelledby": "".concat(inputProps.id, "-label"),
-        autoComplete: "off",
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        enterKeyHint: "search",
-        spellCheck: "false",
-        placeholder: "",
-        maxLength: 512,
-        type: "search",
-        value: query
-      }, inputProps))), createElement("div", {
-        className: "ais-AutocompleteInputWrapperSuffix"
-      }, createElement("button", {
-        className: "ais-AutocompleteClearButton",
-        type: "reset",
-        title: "Clear",
-        hidden: query.length === 0 || isSearchStalled,
-        onClick: onClear
-      }, createElement(AutocompleteClearIcon, {
-        createElement: createElement
-      }))));
-    };
-  }
-
   var _typeof_1 = createCommonjsModule(function (module) {
   function _typeof(o) {
     "@babel/helpers - typeof";
@@ -17524,17 +17431,194 @@
 
   var _slicedToArray$1 = unwrapExports(slicedToArray);
 
+  function AutocompleteSubmitIcon(_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) {
+    var createElement = _ref2.createElement;
+    return createElement("svg", {
+      className: "ais-AutocompleteLoadingIcon",
+      viewBox: "0 0 100 100",
+      width: "20",
+      height: "20"
+    }, createElement("circle", {
+      cx: "50",
+      cy: "50",
+      fill: "none",
+      r: "35",
+      stroke: "currentColor",
+      strokeDasharray: "164.93361431346415 56.97787143782138",
+      strokeWidth: "6"
+    }, createElement("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;90 50 50;180 50 50;360 50 50",
+      keyTimes: "0;0.40;0.65;1"
+    })));
+  }
+  function AutocompleteClearIcon(_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) {
+    var createElement = _ref4.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      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) {
+    var createElement = _ref5.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"
+    }));
+  }
+
+  function createAutocompleteRecentSearchComponent(_ref) {
+    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,
+        classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
+      return createElement("div", {
+        onClick: onSelect,
+        className: cx('ais-AutocompleteItemWrapper ais-AutocompleteRecentSearchWrapper', classNames.root)
+      }, createElement("div", {
+        className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
+      }, createElement("div", {
+        className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
+      }, createElement(AutocompleteClockIcon, {
+        createElement: createElement
+      })), createElement("div", {
+        className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
+      }, children)), createElement("div", {
+        className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
+      }, createElement("button", {
+        className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
+        title: "Remove ".concat(item.query, " from recent searches"),
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onRemoveRecentSearch();
+        }
+      }, createElement(AutocompleteTrashIcon, {
+        createElement: createElement
+      }))));
+    };
+  }
+
+  function createAutocompleteSearchComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function AutocompleteSearch(_ref2) {
+      var inputProps = _ref2.inputProps,
+        onClear = _ref2.onClear,
+        query = _ref2.query,
+        isSearchStalled = _ref2.isSearchStalled;
+      var inputRef = inputProps.ref;
+      return createElement("form", {
+        className: "ais-AutocompleteForm",
+        action: "",
+        noValidate: true,
+        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"
+      }, createElement("label", {
+        className: "ais-AutocompleteLabel",
+        "aria-label": "Submit",
+        htmlFor: inputProps.id,
+        id: "".concat(inputProps.id, "-label")
+      }, createElement("button", {
+        className: "ais-AutocompleteSubmitButton",
+        type: "submit",
+        title: "Submit"
+      }, createElement(AutocompleteSubmitIcon, {
+        createElement: createElement
+      }))), createElement("div", {
+        className: "ais-AutocompleteLoadingIndicator",
+        hidden: !isSearchStalled
+      }, createElement(AutocompleteLoadingIcon, {
+        createElement: createElement
+      }))), createElement("div", {
+        className: "ais-AutocompleteInputWrapper"
+      }, createElement("input", _extends$1({
+        className: "ais-AutocompleteInput",
+        "aria-autocomplete": "both",
+        "aria-labelledby": "".concat(inputProps.id, "-label"),
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        enterKeyHint: "search",
+        spellCheck: "false",
+        placeholder: "",
+        maxLength: 512,
+        type: "search",
+        value: query
+      }, inputProps))), createElement("div", {
+        className: "ais-AutocompleteInputWrapperSuffix"
+      }, createElement("button", {
+        className: "ais-AutocompleteClearButton",
+        type: "reset",
+        title: "Clear",
+        hidden: query.length === 0 || isSearchStalled,
+        onClick: onClear
+      }, createElement(AutocompleteClearIcon, {
+        createElement: createElement
+      }))));
+    };
+  }
+
   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;
       return createElement("div", {
         onClick: onSelect,
-        className: cx('ais-AutocompleteSuggestion', classNames.root)
-      }, item.query);
+        className: cx('ais-AutocompleteItemWrapper', 'ais-AutocompleteSuggestionWrapper', classNames.root)
+      }, createElement("div", {
+        className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
+      }, createElement("div", {
+        className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
+      }, createElement(AutocompleteSubmitIcon, {
+        createElement: createElement
+      })), createElement("div", {
+        className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
+      }, children)));
     };
   }
 
@@ -17550,6 +17634,7 @@
         onRefine = _ref2.onRefine,
         globalOnSelect = _ref2.onSelect;
       var getElementId = createGetElementId(useId());
+      var inputRef = useRef(null);
       var rootRef = useRef(null);
       var _useState = useState(false),
         _useState2 = _slicedToArray$1(_useState, 2),
@@ -17581,7 +17666,7 @@
           document.body.removeEventListener('click', onBodyClick);
         };
       }, [rootRef]);
-      var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      var getNextActiveDescendant = function getNextActiveDescendant(key) {
         switch (key) {
           case 'ArrowLeft':
           case 'ArrowUp':
@@ -17600,11 +17685,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,
@@ -17626,6 +17721,7 @@
         getInputProps: function getInputProps() {
           return {
             id: getElementId('input'),
+            ref: inputRef,
             role: 'combobox',
             'aria-autocomplete': 'list',
             'aria-expanded': isOpen,
@@ -17636,33 +17732,42 @@
               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;
               }
             },
@@ -17690,7 +17795,9 @@
             role: 'row',
             'aria-selected': id === activeDescendant,
             onSelect: function onSelect() {
-              return submit(id);
+              return submit({
+                activeDescendant: id
+              });
             }
           };
         },
@@ -17752,6 +17859,206 @@
     : ref.current; // React
   }
 
+  var arrayWithoutHoles = createCommonjsModule(function (module) {
+  function _arrayWithoutHoles(r) {
+    if (Array.isArray(r)) return arrayLikeToArray(r);
+  }
+  module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(arrayWithoutHoles);
+
+  var iterableToArray = createCommonjsModule(function (module) {
+  function _iterableToArray(r) {
+    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+  }
+  module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(iterableToArray);
+
+  var nonIterableSpread = createCommonjsModule(function (module) {
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(nonIterableSpread);
+
+  var toConsumableArray = createCommonjsModule(function (module) {
+  function _toConsumableArray(r) {
+    return arrayWithoutHoles(r) || iterableToArray(r) || unsupportedIterableToArray(r) || nonIterableSpread();
+  }
+  module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  var _toConsumableArray$1 = unwrapExports(toConsumableArray);
+
+  function createAutocompleteStorage(_ref) {
+    var useEffect = _ref.useEffect,
+      useMemo = _ref.useMemo,
+      useState = _ref.useState;
+    return function useStorage(_ref2) {
+      var showRecent = _ref2.showRecent,
+        query = _ref2.query,
+        indices = _ref2.indices,
+        indicesConfig = _ref2.indicesConfig;
+      var storageKey = showRecent && _typeof$1(showRecent) === 'object' ? showRecent.storageKey : undefined;
+      var storage = useMemo(function () {
+        return createStorage({
+          limit: 5,
+          storageKey: storageKey
+        });
+      }, [storageKey]);
+      var _useState = useState(storage.getSnapshot()),
+        _useState2 = _slicedToArray$1(_useState, 2),
+        snapshot = _useState2[0],
+        setSnapshot = _useState2[1];
+      useEffect(function () {
+        storage.registerUpdateListener(function () {
+          setSnapshot(storage.getSnapshot());
+        });
+        return function () {
+          storage.unregisterUpdateListener();
+        };
+      }, [storage]);
+      if (!showRecent) {
+        return {
+          storage: {
+            onAdd: function onAdd() {},
+            onRemove: function onRemove() {}
+          },
+          storageHits: [],
+          indicesForPropGetters: indices,
+          indicesConfigForPropGetters: indicesConfig
+        };
+      }
+      var storageHits = snapshot.getAll(query).map(function (value) {
+        return {
+          objectID: value,
+          query: value,
+          __indexName: 'recent-searches',
+          _highlightResult: getHighlightedAttribute({
+            item: {
+              query: value
+            },
+            query: query || ''
+          })
+        };
+      });
+      var indicesForPropGetters = _toConsumableArray$1(indices);
+      var indicesConfigForPropGetters = _toConsumableArray$1(indicesConfig);
+      indicesForPropGetters.unshift({
+        indexName: 'recent-searches',
+        indexId: 'recent-searches',
+        hits: storageHits
+      });
+      indicesConfigForPropGetters.unshift({
+        indexName: 'recent-searches',
+        // @ts-expect-error - we know it has query as it's generated from storageHits
+        getQuery: function getQuery(item) {
+          return item.query;
+        }
+      });
+      return {
+        storage: storage,
+        storageHits: storageHits,
+        indicesForPropGetters: indicesForPropGetters,
+        indicesConfigForPropGetters: indicesConfigForPropGetters
+      };
+    };
+  }
+  var LOCAL_STORAGE_KEY_TEST = 'test-localstorage-support';
+  var LOCAL_STORAGE_KEY = 'autocomplete-recent-searches';
+  function isLocalStorageSupported() {
+    try {
+      localStorage.setItem(LOCAL_STORAGE_KEY_TEST, '');
+      localStorage.removeItem(LOCAL_STORAGE_KEY_TEST);
+      return true;
+    } catch (error) {
+      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()) {
+      return {
+        setItems: function setItems() {},
+        getItems: function getItems() {
+          return [];
+        }
+      };
+    }
+    return {
+      setItems: function setItems(items) {
+        try {
+          window.localStorage.setItem(key, JSON.stringify(items));
+        } catch (_unused) {
+          // do nothing, this likely means the storage is full
+        }
+      },
+      getItems: function getItems() {
+        var items = window.localStorage.getItem(key);
+        return items ? JSON.parse(items) : [];
+      }
+    };
+  }
+  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 {
+      onAdd: function onAdd(query) {
+        this.onRemove(query);
+        storage.setItems([query].concat(_toConsumableArray$1(storage.getItems())));
+      },
+      onRemove: function onRemove(query) {
+        var _updateListener;
+        storage.setItems(storage.getItems().filter(function (q) {
+          return q !== query;
+        }));
+        (_updateListener = updateListener) === null || _updateListener === void 0 ? void 0 : _updateListener();
+      },
+      registerUpdateListener: function registerUpdateListener(callback) {
+        updateListener = callback;
+      },
+      unregisterUpdateListener: function unregisterUpdateListener() {
+        updateListener = null;
+      },
+      getSnapshot: function getSnapshot() {
+        return {
+          getAll: function getAll() {
+            var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+            return storage.getItems().filter(function (q) {
+              return q.includes(query);
+            }).slice(0, limit);
+          }
+        };
+      }
+    };
+  }
+
   function createDefaultEmptyComponent(_ref) {
     var createElement = _ref.createElement,
       Fragment = _ref.Fragment;
@@ -20117,6 +20424,10 @@
     createElement: h,
     Fragment: p
   });
+  var AutocompleteRecentSearch = createAutocompleteRecentSearchComponent({
+    createElement: h,
+    Fragment: p
+  });
   var usePropGetters = createAutocompletePropGetters({
     useEffect: s$1,
     useId: b$1,
@@ -20124,12 +20435,18 @@
     useRef: A$1,
     useState: y$1
   });
+  var useStorage = createAutocompleteStorage({
+    useEffect: s$1,
+    useState: y$1,
+    useMemo: T$1
+  });
   var createRenderer = function createRenderer(params) {
     var instanceId = params.instanceId,
       containerNode = params.containerNode,
       rendererParams = _objectWithoutProperties(params, _excluded$s);
     return function (connectorParams, isFirstRendering) {
       if (isFirstRendering) {
+        var _targetIndex$getHelpe, _targetIndex$getHelpe2;
         var isolatedIndex = connectorParams.instantSearchInstance.mainIndex;
         var targetIndex = connectorParams.instantSearchInstance.mainIndex;
         walkIndex(targetIndex, function (childIndex) {
@@ -20141,15 +20458,21 @@
         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;
       }
       P(h(AutocompleteWrapper, _extends({}, rendererParams, connectorParams)), containerNode);
     };
   };
   function AutocompleteWrapper(_ref) {
-    var _targetIndex$getWidge, _isolatedIndex$getHel;
+    var _isolatedIndex$getHel, _targetIndex$getWidge, _showRecent$templates;
     var indicesConfig = _ref.indicesConfig,
       indices = _ref.indices,
       getSearchPageURL = _ref.getSearchPageURL,
@@ -20157,9 +20480,23 @@
       refine = _ref.refine,
       cssClasses = _ref.cssClasses,
       renderState = _ref.renderState,
-      instantSearchInstance = _ref.instantSearchInstance;
+      instantSearchInstance = _ref.instantSearchInstance,
+      showRecent = _ref.showRecent,
+      showSuggestions = _ref.showSuggestions,
+      templates = _ref.templates;
     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;
+    var _useStorage = useStorage({
+        query: searchboxQuery,
+        showRecent: showRecent,
+        indices: indices,
+        indicesConfig: indicesConfig
+      }),
+      storage = _useStorage.storage,
+      storageHits = _useStorage.storageHits,
+      indicesConfigForPropGetters = _useStorage.indicesConfigForPropGetters,
+      indicesForPropGetters = _useStorage.indicesForPropGetters;
     var isSearchPage = (_targetIndex$getWidge = targetIndex === null || targetIndex === void 0 ? void 0 : targetIndex.getWidgets().some(function (_ref2) {
       var $$type = _ref2.$$type;
       return ['ais.hits', 'ais.infiniteHits'].includes($$type);
@@ -20173,10 +20510,11 @@
           query: query
         }), _objectSpread2$1));
       });
+      query.length > 0 && storage.onAdd(query);
     };
     var _usePropGetters = usePropGetters({
-        indices: indices,
-        indicesConfig: indicesConfig,
+        indices: indicesForPropGetters,
+        indicesConfig: indicesConfigForPropGetters,
         onRefine: onRefine,
         onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function (_ref3) {
           var query = _ref3.query,
@@ -20200,25 +20538,69 @@
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
-    var query = isolatedIndex === null || isolatedIndex === void 0 ? void 0 : (_isolatedIndex$getHel = isolatedIndex.getHelper()) === null || _isolatedIndex$getHel === void 0 ? void 0 : _isolatedIndex$getHel.state.query;
-    return h(Autocomplete, _extends({}, getRootProps(), {
-      classNames: cssClasses
-    }), h(AutocompleteSearchBox, {
-      query: query || '',
-      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(), indices.map(function (_ref4, i) {
+    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(_ref5) {
+        var item = _ref5.item,
+          onSelect = _ref5.onSelect,
+          onRemoveRecentSearch = _ref5.onRemoveRecentSearch;
+        return h(Template, _extends({}, props, {
+          templateKey: "item",
+          rootTagName: "fragment",
+          data: {
+            item: item,
+            onSelect: onSelect,
+            onRemoveRecentSearch: onRemoveRecentSearch
+          }
+        }));
+      };
+    }
+    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 = _ref4.indexId,
-        hits = _ref4.hits;
+      var indexId = _ref7.indexId,
+        indexName = _ref7.indexName,
+        hits = _ref7.hits;
       if (!renderState.indexTemplateProps[i]) {
         renderState.indexTemplateProps[i] = prepareTemplateProps({
           defaultTemplates: {},
@@ -20226,8 +20608,8 @@
           templates: indicesConfig[i].templates
         });
       }
-      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref5) {
-        var items = _ref5.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",
@@ -20236,9 +20618,9 @@
           }
         }));
       } : undefined;
-      var itemComponent = function itemComponent(_ref6) {
-        var item = _ref6.item,
-          onSelect = _ref6.onSelect;
+      var itemComponent = function itemComponent(_ref9) {
+        var item = _ref9.item,
+          onSelect = _ref9.onSelect;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "item",
           rootTagName: "fragment",
@@ -20248,7 +20630,8 @@
           }
         }));
       };
-      return h(AutocompleteIndex, {
+      var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+      elements[elementId] = h(AutocompleteIndex, {
         key: indexId,
         HeaderComponent: headerComponent,
         ItemComponent: itemComponent,
@@ -20260,25 +20643,54 @@
         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 refine(evt.currentTarget.value);
+        }
+      }),
+      onClear: function onClear() {
+        return 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 _ref7 = widgetParams || {},
-      container = _ref7.container,
-      escapeHTML = _ref7.escapeHTML,
-      _ref7$indices = _ref7.indices,
-      indices = _ref7$indices === void 0 ? [] : _ref7$indices,
-      showSuggestions = _ref7.showSuggestions,
-      getSearchPageURL = _ref7.getSearchPageURL,
-      onSelect = _ref7.onSelect,
-      _ref7$templates = _ref7.templates,
-      templates = _ref7$templates === void 0 ? {} : _ref7$templates,
-      _ref7$cssClasses = _ref7.cssClasses,
-      userCssClasses = _ref7$cssClasses === void 0 ? {} : _ref7$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;
     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)
     };
@@ -20289,7 +20701,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),
@@ -20311,10 +20732,13 @@
       getSearchPageURL: getSearchPageURL,
       onSelect: onSelect,
       cssClasses: cssClasses,
+      showRecent: showRecent,
+      showSuggestions: showSuggestions,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,
-        targetIndex: undefined
+        targetIndex: undefined,
+        templateProps: undefined
       },
       templates: templates
     });
@@ -20326,20 +20750,32 @@
     })({}), index({
       indexId: "ais-autocomplete-".concat(instanceId),
       EXPERIMENTAL_isolated: true
-    }).addWidgets([configure({
-      hitsPerPage: 5
-    })].concat(_toConsumableArray(indicesConfig.map(function (_ref8) {
-      var indexName = _ref8.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({})]);
+      }).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,