instantsearch.js 4.85.2 → 4.86.1

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.85.2 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.86.1 | © 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) :
@@ -6573,7 +6573,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version = '3.26.1';
+  var version = '3.27.0';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -11800,10 +11800,33 @@
 
   /**
    * The **SortBy** connector provides the logic to build a custom widget that will display a
-   * list of indices. With Algolia, this is most commonly used for changing ranking strategy. This allows
-   * a user to change how the hits are being sorted.
+   * list of indices or sorting strategies. With Algolia, this is most commonly used for changing
+   * ranking strategy. This allows a user to change how the hits are being sorted.
+   *
+   * This connector supports two sorting modes:
+   * 1. **Index-based (traditional)**: Uses the `value` property to switch between different indices.
+   *    This is the standard behavior for non-composition setups.
+   *
+   * 2. **Strategy-based (composition mode)**: Uses the `strategy` property to apply sorting strategies
+   *    via the `sortBy` search parameter. This is only available when using Algolia Compositions.
+   *
+   * Items can mix both types in the same widget, allowing for flexible sorting options.
    */
 
+  function isStrategyItem(item) {
+    return 'strategy' in item && item.strategy !== undefined;
+  }
+  function getItemValue(item) {
+    if (isStrategyItem(item)) {
+      return item.strategy;
+    }
+    return item.value;
+  }
+  function isValidStrategy(itemsLookup, value) {
+    if (!value) return false;
+    var item = itemsLookup[value];
+    return item !== undefined && isStrategyItem(item);
+  }
   var connectSortBy = function connectSortBy(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     checkRendering(renderFn, withUsage$h());
@@ -11818,14 +11841,38 @@
       if (!Array.isArray(items)) {
         throw new Error(withUsage$h('The `items` option expects an array of objects.'));
       }
+      var itemsLookup = {};
+      items.forEach(function (item, index) {
+        var hasValue = 'value' in item && item.value !== undefined;
+        var hasStrategy = 'strategy' in item && item.strategy !== undefined;
+
+        // Validate mutual exclusivity
+        if (hasValue && hasStrategy) {
+          throw new Error(withUsage$h("Item at index ".concat(index, " cannot have both \"value\" and \"strategy\" properties.")));
+        }
+        if (!hasValue && !hasStrategy) {
+          throw new Error(withUsage$h("Item at index ".concat(index, " must have either a \"value\" or \"strategy\" property.")));
+        }
+        var itemValue = getItemValue(item);
+        itemsLookup[itemValue] = item;
+      });
+      connectorState.itemsLookup = itemsLookup;
       return {
         $$type: 'ais.sortBy',
         init: function init(initOptions) {
           var instantSearchInstance = initOptions.instantSearchInstance;
+
+          // Check if strategies are used outside composition mode
+          var hasStrategyItems = items.some(function (item) {
+            return 'strategy' in item && item.strategy;
+          });
+          if (hasStrategyItems && !instantSearchInstance.compositionID) {
+            throw new Error(withUsage$h('Sorting strategies can only be used in composition mode. Please provide a "compositionID" to your InstantSearch instance.'));
+          }
           var widgetRenderState = this.getWidgetRenderState(initOptions);
           var currentIndex = widgetRenderState.currentRefinement;
           var isCurrentIndexInItems = find(items, function (item) {
-            return item.value === currentIndex;
+            return getItemValue(item) === currentIndex;
           });
            _warning(isCurrentIndexInItems !== undefined, "The index named \"".concat(currentIndex, "\" is not listed in the `items` of `sortBy`.")) ;
           renderFn(_objectSpread2(_objectSpread2({}, widgetRenderState), {}, {
@@ -11841,7 +11888,17 @@
         dispose: function dispose(_ref2) {
           var state = _ref2.state;
           unmountFn();
-          return connectorState.initialIndex ? state.setIndex(connectorState.initialIndex) : state;
+
+          // Clear sortBy parameter if it was set
+          if (connectorState.isUsingComposition && state.sortBy) {
+            state = state.setQueryParameter('sortBy', undefined);
+          }
+
+          // Restore initial index if changed
+          if (connectorState.initialValue && state.index !== connectorState.initialValue) {
+            return state.setIndex(connectorState.initialValue);
+          }
+          return state;
         },
         getRenderState: function getRenderState(renderState, renderOptions) {
           return _objectSpread2(_objectSpread2({}, renderState), {}, {
@@ -11852,22 +11909,54 @@
           var results = _ref3.results,
             helper = _ref3.helper,
             state = _ref3.state,
-            parent = _ref3.parent;
-          if (!connectorState.initialIndex && parent) {
-            connectorState.initialIndex = parent.getIndexName();
+            parent = _ref3.parent,
+            instantSearchInstance = _ref3.instantSearchInstance;
+          // Capture initial value (composition ID or main index)
+          if (!connectorState.initialValue && parent) {
+            connectorState.initialValue = parent.getIndexName();
           }
-          if (!connectorState.setIndex) {
-            connectorState.setIndex = function (indexName) {
-              helper.setIndex(indexName).search();
+
+          // Create refine function if not exists
+          if (!connectorState.refine) {
+            // Cache composition mode status for lifecycle methods that don't have access to instantSearchInstance
+            connectorState.isUsingComposition = Boolean(instantSearchInstance === null || instantSearchInstance === void 0 ? void 0 : instantSearchInstance.compositionID);
+            connectorState.refine = function (value) {
+              // O(1) lookup using the items lookup table
+              var item = connectorState.itemsLookup[value];
+              if (item && isStrategyItem(item)) {
+                // Strategy-based: set sortBy parameter for composition API
+                // The composition backend will interpret this and apply the sorting strategy
+                helper.setQueryParameter('sortBy', item.strategy).search();
+              } else {
+                // Index-based: clear any existing sortBy parameter and switch to the new index
+                // Clearing sortBy is critical when transitioning from strategy to index-based sorting
+                helper.setQueryParameter('sortBy', undefined).setIndex(value).search();
+              }
             };
           }
+
+          // Transform items first (on original structure)
+          var transformedItems = transformItems(items, {
+            results: results
+          });
+
+          // Normalize items: all get a 'value' property for the render state
+          var normalizedItems = transformedItems.map(function (item) {
+            return {
+              label: item.label,
+              value: getItemValue(item)
+            };
+          });
+
+          // Determine current refinement
+          // In composition mode, prefer sortBy parameter if it corresponds to a valid strategy item
+          // Otherwise use the index (for index-based items or when no valid strategy is active)
+          var currentRefinement = connectorState.isUsingComposition && isValidStrategy(connectorState.itemsLookup, state.sortBy) ? state.sortBy : state.index;
           var hasNoResults = results ? results.nbHits === 0 : true;
           return {
-            currentRefinement: state.index,
-            options: transformItems(items, {
-              results: results
-            }),
-            refine: connectorState.setIndex,
+            currentRefinement: currentRefinement,
+            options: normalizedItems,
+            refine: connectorState.refine,
             hasNoResults: hasNoResults,
             canRefine: !hasNoResults && items.length > 0,
             widgetParams: widgetParams
@@ -11875,14 +11964,25 @@
         },
         getWidgetUiState: function getWidgetUiState(uiState, _ref4) {
           var searchParameters = _ref4.searchParameters;
-          var currentIndex = searchParameters.index;
+          // In composition mode with an active strategy, use sortBy parameter
+          // Otherwise use index-based behavior (traditional mode)
+          var currentValue = connectorState.isUsingComposition && isValidStrategy(connectorState.itemsLookup, searchParameters.sortBy) ? searchParameters.sortBy : searchParameters.index;
           return _objectSpread2(_objectSpread2({}, uiState), {}, {
-            sortBy: currentIndex !== connectorState.initialIndex ? currentIndex : undefined
+            sortBy: currentValue !== connectorState.initialValue ? currentValue : undefined
           });
         },
         getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref5) {
           var uiState = _ref5.uiState;
-          return searchParameters.setQueryParameter('index', uiState.sortBy || connectorState.initialIndex || searchParameters.index);
+          var sortByValue = uiState.sortBy || connectorState.initialValue || searchParameters.index;
+          if (isValidStrategy(connectorState.itemsLookup, sortByValue)) {
+            var item = connectorState.itemsLookup[sortByValue];
+            // Strategy-based: set the sortBy parameter for composition API
+            // The index remains as the compositionID
+            return searchParameters.setQueryParameter('sortBy', item.strategy);
+          }
+
+          // Index-based: set the index parameter (traditional behavior)
+          return searchParameters.setQueryParameter('index', sortByValue);
         }
       };
     };
@@ -16490,7 +16590,7 @@
     };
   }
 
-  var version$1 = '4.85.2';
+  var version$1 = '4.86.1';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -17242,7 +17342,7 @@
     };
   }
 
-  var _excluded$a = ["className", "onSelect"];
+  var _excluded$a = ["className", "onSelect", "onApply"];
   function createAutocompleteIndexComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteIndex(userProps) {
@@ -17264,6 +17364,7 @@
         var _getItemProps = getItemProps(item, index),
           className = _getItemProps.className,
           onSelect = _getItemProps.onSelect,
+          onApply = _getItemProps.onApply,
           itemProps = _objectWithoutProperties$1(_getItemProps, _excluded$a);
         return createElement("li", _extends$1({
           key: "".concat(itemProps.id, ":").concat(item.objectID)
@@ -17271,7 +17372,8 @@
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
           item: item,
-          onSelect: onSelect
+          onSelect: onSelect,
+          onApply: onApply
         }));
       })));
     };
@@ -17502,6 +17604,15 @@
       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 ApplyIcon(_ref6) {
+    var createElement = _ref6.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+    }));
+  }
 
   function createAutocompleteRecentSearchComponent(_ref) {
     var createElement = _ref.createElement;
@@ -17510,6 +17621,7 @@
         children = userProps.children,
         onSelect = userProps.onSelect,
         onRemoveRecentSearch = userProps.onRemoveRecentSearch,
+        onApply = userProps.onApply,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
       return createElement("div", {
@@ -17534,6 +17646,15 @@
         }
       }, createElement(TrashIcon, {
         createElement: createElement
+      })), createElement("button", {
+        className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemApplyButton', classNames.applyButton),
+        title: "Apply ".concat(item.query, " as search"),
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onApply();
+        }
+      }, createElement(ApplyIcon, {
+        createElement: createElement
       }))));
     };
   }
@@ -17607,8 +17728,10 @@
   function createAutocompleteSuggestionComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteSuggestion(userProps) {
-      var children = userProps.children,
+      var item = userProps.item,
+        children = userProps.children,
         onSelect = userProps.onSelect,
+        onApply = userProps.onApply,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
       return createElement("div", {
@@ -17622,7 +17745,19 @@
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-      }, children)));
+      }, children)), createElement("div", {
+        className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteSuggestionItemActions', classNames.actions)
+      }, createElement("button", {
+        className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteSuggestionItemApplyButton', classNames.applyButton),
+        type: "button",
+        title: "Apply ".concat(item.query, " as search"),
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onApply();
+        }
+      }, createElement(ApplyIcon, {
+        createElement: createElement
+      }))));
     };
   }
 
@@ -17637,6 +17772,7 @@
         indicesConfig = _ref2.indicesConfig,
         onRefine = _ref2.onRefine,
         globalOnSelect = _ref2.onSelect,
+        _onApply = _ref2.onApply,
         placeholder = _ref2.placeholder;
       var getElementId = createGetElementId(useId());
       var inputRef = useRef(null);
@@ -17804,6 +17940,13 @@
               return submit({
                 activeDescendant: id
               });
+            },
+            onApply: function onApply() {
+              var _getQuery2;
+              var _ref4 = items.get(id),
+                currentItem = _ref4.item,
+                getQuery = _ref4.config.getQuery;
+              _onApply((_getQuery2 = getQuery === null || getQuery === void 0 ? void 0 : getQuery(currentItem)) !== null && _getQuery2 !== void 0 ? _getQuery2 : '');
             }
           };
         },
@@ -17823,10 +17966,10 @@
       };
     };
   }
-  function buildItems(_ref4) {
-    var indices = _ref4.indices,
-      indicesConfig = _ref4.indicesConfig,
-      getElementId = _ref4.getElementId;
+  function buildItems(_ref5) {
+    var indices = _ref5.indices,
+      indicesConfig = _ref5.indicesConfig,
+      getElementId = _ref5.getElementId;
     var itemsIds = [];
     var items = new Map();
     for (var i = 0; i < indicesConfig.length; i++) {
@@ -20453,6 +20596,7 @@
     return function (connectorParams, isFirstRendering) {
       if (isFirstRendering) {
         var _targetIndex$getHelpe, _targetIndex$getHelpe2;
+        var showRecentObj = rendererParams.showRecent;
         var isolatedIndex = connectorParams.instantSearchInstance.mainIndex;
         var targetIndex = connectorParams.instantSearchInstance.mainIndex;
         walkIndex(targetIndex, function (childIndex) {
@@ -20461,6 +20605,56 @@
             targetIndex = childIndex.parent;
           }
         });
+        var RecentSearchComponent = function RecentSearchComponent(_ref) {
+          var item = _ref.item,
+            onSelect = _ref.onSelect,
+            onApply = _ref.onApply,
+            onRemoveRecentSearch = _ref.onRemoveRecentSearch;
+          return h(AutocompleteRecentSearch, {
+            item: item,
+            onSelect: onSelect,
+            onApply: onApply,
+            onRemoveRecentSearch: onRemoveRecentSearch
+          }, h(ConditionalReverseHighlight, {
+            item: item
+          }));
+        };
+        var recentSearchHeaderComponent = undefined;
+        if (showRecentObj && showRecentObj.templates) {
+          var recentTemplateProps = prepareTemplateProps({
+            defaultTemplates: {},
+            templatesConfig: connectorParams.instantSearchInstance.templatesConfig,
+            templates: showRecentObj.templates
+          });
+          if (showRecentObj.templates.item) {
+            RecentSearchComponent = function RecentSearchComponent(_ref2) {
+              var item = _ref2.item,
+                onSelect = _ref2.onSelect,
+                onRemoveRecentSearch = _ref2.onRemoveRecentSearch;
+              return h(Template, _extends({}, recentTemplateProps, {
+                templateKey: "item",
+                rootTagName: "fragment",
+                data: {
+                  item: item,
+                  onSelect: onSelect,
+                  onRemoveRecentSearch: onRemoveRecentSearch
+                }
+              }));
+            };
+          }
+          if (showRecentObj.templates.header) {
+            recentSearchHeaderComponent = function recentSearchHeaderComponent(_ref3) {
+              var items = _ref3.items;
+              return h(Template, _extends({}, recentTemplateProps, {
+                templateKey: "header",
+                rootTagName: "fragment",
+                data: {
+                  items: items
+                }
+              }));
+            };
+          }
+        }
         rendererParams.renderState = {
           indexTemplateProps: [],
           isolatedIndex: isolatedIndex,
@@ -20469,7 +20663,9 @@
             defaultTemplates: {},
             templatesConfig: connectorParams.instantSearchInstance.templatesConfig,
             templates: rendererParams.templates
-          })
+          }),
+          RecentSearchComponent: RecentSearchComponent,
+          recentSearchHeaderComponent: recentSearchHeaderComponent
         };
         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;
@@ -20477,20 +20673,20 @@
       P(h(AutocompleteWrapper, _extends({}, rendererParams, connectorParams)), containerNode);
     };
   };
-  function AutocompleteWrapper(_ref) {
-    var _isolatedIndex$getHel, _targetIndex$getWidge, _showRecent$templates;
-    var indicesConfig = _ref.indicesConfig,
-      indices = _ref.indices,
-      getSearchPageURL = _ref.getSearchPageURL,
-      userOnSelect = _ref.onSelect,
-      refineAutocomplete = _ref.refine,
-      cssClasses = _ref.cssClasses,
-      renderState = _ref.renderState,
-      instantSearchInstance = _ref.instantSearchInstance,
-      showRecent = _ref.showRecent,
-      showSuggestions = _ref.showSuggestions,
-      templates = _ref.templates,
-      placeholder = _ref.placeholder;
+  function AutocompleteWrapper(_ref4) {
+    var _isolatedIndex$getHel, _showRecentObj$cssCla, _showRecentObj$cssCla2, _showRecentObj$cssCla3, _showRecentObj$cssCla4, _targetIndex$getWidge;
+    var indicesConfig = _ref4.indicesConfig,
+      indices = _ref4.indices,
+      getSearchPageURL = _ref4.getSearchPageURL,
+      userOnSelect = _ref4.onSelect,
+      refineAutocomplete = _ref4.refine,
+      cssClasses = _ref4.cssClasses,
+      renderState = _ref4.renderState,
+      instantSearchInstance = _ref4.instantSearchInstance,
+      showRecent = _ref4.showRecent,
+      showSuggestions = _ref4.showSuggestions,
+      templates = _ref4.templates,
+      placeholder = _ref4.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;
@@ -20504,8 +20700,15 @@
       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;
+    var showRecentObj = showRecent;
+    var recentSearchCssClasses = {
+      root: cx('ais-AutocompleteRecentSearches', showRecentObj === null || showRecentObj === void 0 ? void 0 : (_showRecentObj$cssCla = showRecentObj.cssClasses) === null || _showRecentObj$cssCla === void 0 ? void 0 : _showRecentObj$cssCla.root),
+      list: cx('ais-AutocompleteRecentSearchesList', showRecentObj === null || showRecentObj === void 0 ? void 0 : (_showRecentObj$cssCla2 = showRecentObj.cssClasses) === null || _showRecentObj$cssCla2 === void 0 ? void 0 : _showRecentObj$cssCla2.list),
+      header: cx('ais-AutocompleteRecentSearchesHeader', showRecentObj === null || showRecentObj === void 0 ? void 0 : (_showRecentObj$cssCla3 = showRecentObj.cssClasses) === null || _showRecentObj$cssCla3 === void 0 ? void 0 : _showRecentObj$cssCla3.header),
+      item: cx('ais-AutocompleteRecentSearchesItem', showRecentObj === null || showRecentObj === void 0 ? void 0 : (_showRecentObj$cssCla4 = showRecentObj.cssClasses) === null || _showRecentObj$cssCla4 === void 0 ? void 0 : _showRecentObj$cssCla4.item)
+    };
+    var isSearchPage = (_targetIndex$getWidge = targetIndex === null || targetIndex === void 0 ? void 0 : targetIndex.getWidgets().some(function (_ref5) {
+      var $$type = _ref5.$$type;
       return ['ais.hits', 'ais.infiniteHits'].includes($$type);
     })) !== null && _targetIndex$getWidge !== void 0 ? _targetIndex$getWidge : false;
     var onRefine = function onRefine(query) {
@@ -20524,10 +20727,10 @@
         indices: indicesForPropGetters,
         indicesConfig: indicesConfigForPropGetters,
         onRefine: onRefine,
-        onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function (_ref3) {
-          var query = _ref3.query,
-            setQuery = _ref3.setQuery,
-            url = _ref3.url;
+        onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function (_ref6) {
+          var query = _ref6.query,
+            setQuery = _ref6.setQuery,
+            url = _ref6.url;
           if (url) {
             window.location.href = url;
             return;
@@ -20541,75 +20744,44 @@
           }
           setQuery(query);
         },
+        onApply: function onApply(query) {
+          refineAutocomplete(query);
+        },
         placeholder: placeholder
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
-    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, {
+      elements.recent = h(AutocompleteIndex, {
+        HeaderComponent: renderState.recentSearchHeaderComponent
+        // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+        ,
+        ItemComponent: function ItemComponent(_ref7) {
+          var item = _ref7.item,
+            onSelect = _ref7.onSelect,
+            onApply = _ref7.onApply;
+          return h(renderState.RecentSearchComponent, {
             item: item,
             onSelect: onSelect,
+            onApply: onApply,
             onRemoveRecentSearch: function onRemoveRecentSearch() {
               return storage.onRemove(item.query);
             }
           });
         },
-        classNames: {
-          root: 'ais-AutocompleteRecentSearches',
-          list: 'ais-AutocompleteRecentSearchesList',
-          item: 'ais-AutocompleteRecentSearchesItem'
-        },
+        classNames: recentSearchCssClasses,
         items: storageHits,
         getItemProps: getItemProps
       });
     }
-    indices.forEach(function (_ref7, i) {
+    indices.forEach(function (_ref8, i) {
       var _indicesConfig$i$temp;
-      var indexId = _ref7.indexId,
-        indexName = _ref7.indexName,
-        hits = _ref7.hits;
+      var indexId = _ref8.indexId,
+        indexName = _ref8.indexName,
+        hits = _ref8.hits;
       if (!renderState.indexTemplateProps[i]) {
         renderState.indexTemplateProps[i] = prepareTemplateProps({
           defaultTemplates: {},
@@ -20617,8 +20789,8 @@
           templates: indicesConfig[i].templates
         });
       }
-      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref8) {
-        var items = _ref8.items;
+      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref9) {
+        var items = _ref9.items;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "header",
           rootTagName: "fragment",
@@ -20627,15 +20799,17 @@
           }
         }));
       } : undefined;
-      var itemComponent = function itemComponent(_ref9) {
-        var item = _ref9.item,
-          onSelect = _ref9.onSelect;
+      var itemComponent = function itemComponent(_ref0) {
+        var item = _ref0.item,
+          onSelect = _ref0.onSelect,
+          onApply = _ref0.onApply;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "item",
           rootTagName: "fragment",
           data: {
             item: item,
-            onSelect: onSelect
+            onSelect: onSelect,
+            onApply: onApply
           }
         }));
       };
@@ -20683,21 +20857,21 @@
     })));
   }
   function EXPERIMENTAL_autocomplete(widgetParams) {
-    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;
+    var _ref1 = widgetParams || {},
+      container = _ref1.container,
+      escapeHTML = _ref1.escapeHTML,
+      _ref1$indices = _ref1.indices,
+      indices = _ref1$indices === void 0 ? [] : _ref1$indices,
+      showSuggestions = _ref1.showSuggestions,
+      showRecent = _ref1.showRecent,
+      userSearchParameters = _ref1.searchParameters,
+      getSearchPageURL = _ref1.getSearchPageURL,
+      onSelect = _ref1.onSelect,
+      _ref1$templates = _ref1.templates,
+      templates = _ref1$templates === void 0 ? {} : _ref1$templates,
+      _ref1$cssClasses = _ref1.cssClasses,
+      userCssClasses = _ref1$cssClasses === void 0 ? {} : _ref1$cssClasses,
+      placeholder = _ref1.placeholder;
     if (!container) {
       throw new Error(withUsage$z('The `container` option is required.'));
     }
@@ -20715,12 +20889,14 @@
         indexName: showSuggestions.indexName,
         templates: _objectSpread2({
           // @ts-expect-error
-          item: function item(_ref1) {
-            var _item = _ref1.item,
-              onSelectItem = _ref1.onSelect;
+          item: function item(_ref10) {
+            var _item = _ref10.item,
+              onSelectItem = _ref10.onSelect,
+              onApply = _ref10.onApply;
             return h(AutocompleteSuggestion, {
               item: _item,
-              onSelect: onSelectItem
+              onSelect: onSelectItem,
+              onApply: onApply
             }, h(ConditionalReverseHighlight, {
               item: _item
             }));
@@ -20739,6 +20915,8 @@
       });
     }
     var instanceId = ++autocompleteInstanceId;
+    var shouldShowRecent = showRecent || undefined;
+    var showRecentOptions = typeof shouldShowRecent === 'boolean' ? {} : shouldShowRecent;
     var specializedRenderer = createRenderer({
       instanceId: instanceId,
       containerNode: containerNode,
@@ -20746,14 +20924,16 @@
       getSearchPageURL: getSearchPageURL,
       onSelect: onSelect,
       cssClasses: cssClasses,
-      showRecent: showRecent,
+      showRecent: showRecentOptions,
       showSuggestions: showSuggestions,
       placeholder: placeholder,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,
         targetIndex: undefined,
-        templateProps: undefined
+        templateProps: undefined,
+        RecentSearchComponent: AutocompleteRecentSearch,
+        recentSearchHeaderComponent: undefined
       },
       templates: templates
     });
@@ -20765,9 +20945,9 @@
     })({}), index({
       indexId: "ais-autocomplete-".concat(instanceId),
       EXPERIMENTAL_isolated: true
-    }).addWidgets([configure(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref10) {
-      var indexName = _ref10.indexName,
-        indexSearchParameters = _ref10.searchParameters;
+    }).addWidgets([configure(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref11) {
+      var indexName = _ref11.indexName,
+        indexSearchParameters = _ref11.searchParameters;
       return index({
         indexName: indexName,
         indexId: indexName
@@ -20778,9 +20958,9 @@
       $$widgetType: 'ais.autocomplete'
     })]))];
   }
-  function ConditionalReverseHighlight(_ref11) {
+  function ConditionalReverseHighlight(_ref12) {
     var _item$_highlightResul;
-    var item = _ref11.item;
+    var item = _ref12.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') {