instantsearch.js 4.85.2 → 4.86.0

package/cjs/connectors/sort-by/connectSortBy.js

@@ -18,10 +18,33 @@ var withUsage = (0, _utils.createDocumentationMessageGenerator)({
 
 /**
  * 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] : _utils.noop;
   (0, _utils.checkRendering)(renderFn, withUsage());
@@ -36,14 +59,38 @@ var connectSortBy = function connectSortBy(renderFn) {
     if (!Array.isArray(items)) {
       throw new Error(withUsage('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("Item at index ".concat(index, " cannot have both \"value\" and \"strategy\" properties.")));
+      }
+      if (!hasValue && !hasStrategy) {
+        throw new Error(withUsage("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('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 = (0, _utils.find)(items, function (item) {
-          return item.value === currentIndex;
+          return getItemValue(item) === currentIndex;
         });
         process.env.NODE_ENV === 'development' ? (0, _utils.warning)(isCurrentIndexInItems !== undefined, "The index named \"".concat(currentIndex, "\" is not listed in the `items` of `sortBy`.")) : void 0;
         renderFn(_objectSpread(_objectSpread({}, widgetRenderState), {}, {
@@ -59,7 +106,17 @@ var connectSortBy = function connectSortBy(renderFn) {
       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 _objectSpread(_objectSpread({}, renderState), {}, {
@@ -70,22 +127,54 @@ var connectSortBy = function connectSortBy(renderFn) {
         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
@@ -93,14 +182,25 @@ var connectSortBy = function connectSortBy(renderFn) {
       },
       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 _objectSpread(_objectSpread({}, 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);
       }
     };
   };

package/cjs/lib/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '4.85.2';
+var _default = exports.default = '4.86.0';

package/cjs/widgets/autocomplete/autocomplete.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +24,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -80,6 +80,7 @@ var createRenderer = function createRenderer(params) {
   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;
       (0, _utils.walkIndex)(targetIndex, function (childIndex) {
@@ -88,6 +89,56 @@ var createRenderer = function createRenderer(params) {
           targetIndex = childIndex.parent;
         }
       });
+      var RecentSearchComponent = function RecentSearchComponent(_ref) {
+        var item = _ref.item,
+          onSelect = _ref.onSelect,
+          onApply = _ref.onApply,
+          onRemoveRecentSearch = _ref.onRemoveRecentSearch;
+        return (0, _preact.h)(AutocompleteRecentSearch, {
+          item: item,
+          onSelect: onSelect,
+          onApply: onApply,
+          onRemoveRecentSearch: onRemoveRecentSearch
+        }, (0, _preact.h)(ConditionalReverseHighlight, {
+          item: item
+        }));
+      };
+      var recentSearchHeaderComponent = undefined;
+      if (showRecentObj && showRecentObj.templates) {
+        var recentTemplateProps = (0, _templating.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 (0, _preact.h)(_Template.default, _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 (0, _preact.h)(_Template.default, _extends({}, recentTemplateProps, {
+              templateKey: "header",
+              rootTagName: "fragment",
+              data: {
+                items: items
+              }
+            }));
+          };
+        }
+      }
       rendererParams.renderState = {
         indexTemplateProps: [],
         isolatedIndex: isolatedIndex,
@@ -96,7 +147,9 @@ var createRenderer = function createRenderer(params) {
           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;
@@ -104,20 +157,20 @@ var createRenderer = function createRenderer(params) {
     (0, _preact.render)((0, _preact.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;
@@ -131,8 +184,15 @@ function AutocompleteWrapper(_ref) {
     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: (0, _instantsearchUiComponents.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: (0, _instantsearchUiComponents.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: (0, _instantsearchUiComponents.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: (0, _instantsearchUiComponents.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) {
@@ -151,10 +211,10 @@ function AutocompleteWrapper(_ref) {
       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;
@@ -168,75 +228,44 @@ function AutocompleteWrapper(_ref) {
         }
         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 (0, _preact.h)(AutocompleteRecentSearch, {
-      item: item,
-      onSelect: onSelect,
-      onRemoveRecentSearch: onRemoveRecentSearch
-    }, (0, _preact.h)(ConditionalReverseHighlight, {
-      item: item
-    }));
-  };
-  if (_typeof(showRecent) === 'object' && (_showRecent$templates = showRecent.templates) !== null && _showRecent$templates !== void 0 && _showRecent$templates.item) {
-    var props = (0, _templating.prepareTemplateProps)({
-      defaultTemplates: {},
-      templatesConfig: instantSearchInstance.templatesConfig,
-      templates: showRecent.templates
-    });
-    AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref5) {
-      var item = _ref5.item,
-        onSelect = _ref5.onSelect,
-        onRemoveRecentSearch = _ref5.onRemoveRecentSearch;
-      return (0, _preact.h)(_Template.default, _extends({}, props, {
-        templateKey: "item",
-        rootTagName: "fragment",
-        data: {
-          item: item,
-          onSelect: onSelect,
-          onRemoveRecentSearch: onRemoveRecentSearch
-        }
-      }));
-    };
-  }
   var elements = {};
   if (showRecent) {
-    elements.recent = (0, _preact.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 (0, _preact.h)(AutocompleteRecentSearchComponent, {
+    elements.recent = (0, _preact.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 (0, _preact.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] = (0, _templating.prepareTemplateProps)({
         defaultTemplates: {},
@@ -244,8 +273,8 @@ function AutocompleteWrapper(_ref) {
         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 (0, _preact.h)(_Template.default, _extends({}, renderState.indexTemplateProps[i], {
         templateKey: "header",
         rootTagName: "fragment",
@@ -254,15 +283,17 @@ function AutocompleteWrapper(_ref) {
         }
       }));
     } : 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 (0, _preact.h)(_Template.default, _extends({}, renderState.indexTemplateProps[i], {
         templateKey: "item",
         rootTagName: "fragment",
         data: {
           item: item,
-          onSelect: onSelect
+          onSelect: onSelect,
+          onApply: onApply
         }
       }));
     };
@@ -310,21 +341,21 @@ function AutocompleteWrapper(_ref) {
   })));
 }
 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('The `container` option is required.'));
   }
@@ -342,12 +373,14 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
       indexName: showSuggestions.indexName,
       templates: _objectSpread({
         // @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 (0, _preact.h)(AutocompleteSuggestion, {
             item: _item,
-            onSelect: onSelectItem
+            onSelect: onSelectItem,
+            onApply: onApply
           }, (0, _preact.h)(ConditionalReverseHighlight, {
             item: _item
           }));
@@ -366,6 +399,8 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
     });
   }
   var instanceId = ++autocompleteInstanceId;
+  var shouldShowRecent = showRecent || undefined;
+  var showRecentOptions = typeof shouldShowRecent === 'boolean' ? {} : shouldShowRecent;
   var specializedRenderer = createRenderer({
     instanceId: instanceId,
     containerNode: containerNode,
@@ -373,14 +408,16 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
     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
   });
@@ -392,9 +429,9 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
   })({}), (0, _index2.default)({
     indexId: "ais-autocomplete-".concat(instanceId),
     EXPERIMENTAL_isolated: true
-  }).addWidgets([(0, _configure.default)(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref10) {
-    var indexName = _ref10.indexName,
-      indexSearchParameters = _ref10.searchParameters;
+  }).addWidgets([(0, _configure.default)(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref11) {
+    var indexName = _ref11.indexName,
+      indexSearchParameters = _ref11.searchParameters;
     return (0, _index2.default)({
       indexName: indexName,
       indexId: indexName
@@ -405,9 +442,9 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
     $$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') {