react-instantsearch 7.21.0 → 7.22.0

package/dist/umd/ReactInstantSearch.js

@@ -7,7 +7,7 @@
 
   var React__default = 'default' in React ? React['default'] : React;
 
-  var version = '7.21.0';
+  var version = '7.22.0';
 
   // Copyright Joyent, Inc. and other Node contributors.
   //
@@ -4651,7 +4651,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version$1 = '3.26.1';
+  var version$1 = '3.27.0';
 
   var escapeFacetValue$3 = escapeFacetValue_1.escapeFacetValue;
 
@@ -13355,7 +13355,7 @@
     };
   }
 
-  var version$3 = '4.85.2';
+  var version$3 = '4.86.0';
 
   function _typeof$q(o) {
     "@babel/helpers - typeof";
@@ -19259,10 +19259,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$1;
     checkRendering(renderFn, withUsage$m());
@@ -19277,14 +19300,38 @@
       if (!Array.isArray(items)) {
         throw new Error(withUsage$m('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$m("Item at index ".concat(index, " cannot have both \"value\" and \"strategy\" properties.")));
+        }
+        if (!hasValue && !hasStrategy) {
+          throw new Error(withUsage$m("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$m('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$1(items, function (item) {
-            return item.value === currentIndex;
+            return getItemValue(item) === currentIndex;
           });
           renderFn(_objectSpread$F(_objectSpread$F({}, widgetRenderState), {}, {
             instantSearchInstance: instantSearchInstance
@@ -19299,7 +19346,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 _objectSpread$F(_objectSpread$F({}, renderState), {}, {
@@ -19310,22 +19367,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
@@ -19333,14 +19422,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 _objectSpread$F(_objectSpread$F({}, 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);
         }
       };
     };
@@ -20921,7 +21021,7 @@
     };
   }
 
-  var _excluded$d = ["className", "onSelect"];
+  var _excluded$d = ["className", "onSelect", "onApply"];
   function createAutocompleteIndexComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteIndex(userProps) {
@@ -20943,6 +21043,7 @@
         var _getItemProps = getItemProps(item, index),
           className = _getItemProps.className,
           onSelect = _getItemProps.onSelect,
+          onApply = _getItemProps.onApply,
           itemProps = _objectWithoutProperties$d(_getItemProps, _excluded$d);
         return createElement("li", _extends$2({
           key: "".concat(itemProps.id, ":").concat(item.objectID)
@@ -20950,7 +21051,8 @@
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
           item: item,
-          onSelect: onSelect
+          onSelect: onSelect,
+          onApply: onApply
         }));
       })));
     };
@@ -21181,6 +21283,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;
@@ -21189,6 +21300,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", {
@@ -21213,6 +21325,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
       }))));
     };
   }
@@ -21286,8 +21407,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", {
@@ -21301,7 +21424,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
+      }))));
     };
   }
 
@@ -21316,6 +21451,7 @@
         indicesConfig = _ref2.indicesConfig,
         onRefine = _ref2.onRefine,
         globalOnSelect = _ref2.onSelect,
+        _onApply = _ref2.onApply,
         placeholder = _ref2.placeholder;
       var getElementId = createGetElementId(useId());
       var inputRef = useRef(null);
@@ -21483,6 +21619,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 : '');
             }
           };
         },
@@ -21502,10 +21645,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++) {
@@ -22546,7 +22689,7 @@
   }
 
   var _excluded$o = ["indices", "showSuggestions", "showRecent", "searchParameters"],
-    _excluded2$5 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions", "placeholder"];
+    _excluded2$5 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "recentSearchConfig", "showSuggestions", "placeholder"];
   var Autocomplete = createAutocompleteComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22580,6 +22723,7 @@
     useState: React.useState
   });
   function EXPERIMENTAL_Autocomplete(_ref) {
+    var _showRecent$className, _showRecent$className2, _showRecent$className3, _showRecent$className4;
     var _ref$indices = _ref.indices,
       indices = _ref$indices === void 0 ? [] : _ref$indices,
       showSuggestions = _ref.showSuggestions,
@@ -22605,10 +22749,12 @@
         headerComponent: showSuggestions.headerComponent,
         itemComponent: showSuggestions.itemComponent || function (_ref2) {
           var item = _ref2.item,
-            onSelect = _ref2.onSelect;
+            onSelect = _ref2.onSelect,
+            onApply = _ref2.onApply;
           return /*#__PURE__*/React__default.createElement(AutocompleteSuggestion, {
             item: item,
-            onSelect: onSelect
+            onSelect: onSelect,
+            onApply: onApply
           }, /*#__PURE__*/React__default.createElement(ConditionalReverseHighlight, {
             item: item
           }));
@@ -22625,6 +22771,16 @@
         getURL: showSuggestions.getURL
       });
     }
+    var recentSearchConfig = showRecent ? {
+      headerComponent: _typeof$S(showRecent) === 'object' ? showRecent.headerComponent : undefined,
+      itemComponent: _typeof$S(showRecent) === 'object' && showRecent.itemComponent ? showRecent.itemComponent : AutocompleteRecentSearch,
+      classNames: {
+        root: cx('ais-AutocompleteRecentSearches', _typeof$S(showRecent) === 'object' ? (_showRecent$className = showRecent.classNames) === null || _showRecent$className === void 0 ? void 0 : _showRecent$className.root : undefined),
+        list: cx('ais-AutocompleteRecentSearchesList', _typeof$S(showRecent) === 'object' ? (_showRecent$className2 = showRecent.classNames) === null || _showRecent$className2 === void 0 ? void 0 : _showRecent$className2.list : undefined),
+        header: cx('ais-AutocompleteRecentSearchesHeader', _typeof$S(showRecent) === 'object' ? (_showRecent$className3 = showRecent.classNames) === null || _showRecent$className3 === void 0 ? void 0 : _showRecent$className3.header : undefined),
+        item: cx('ais-AutocompleteRecentSearchesItem', _typeof$S(showRecent) === 'object' ? (_showRecent$className4 = showRecent.classNames) === null || _showRecent$className4 === void 0 ? void 0 : _showRecent$className4.item : undefined)
+      }
+    } : undefined;
     var isSearchPage = React.useMemo(function () {
       return typeof indexRenderState.hits !== 'undefined' || typeof indexRenderState.infiniteHits !== 'undefined';
     }, [indexRenderState]);
@@ -22641,6 +22797,7 @@
       indexUiState: indexUiState,
       isSearchPage: isSearchPage,
       showRecent: showRecent,
+      recentSearchConfig: recentSearchConfig,
       showSuggestions: showSuggestions
     }))));
   }
@@ -22653,6 +22810,7 @@
       isSearchPage = _ref3.isSearchPage,
       PanelComponent = _ref3.panelComponent,
       showRecent = _ref3.showRecent,
+      recentSearchConfig = _ref3.recentSearchConfig,
       showSuggestions = _ref3.showSuggestions,
       placeholder = _ref3.placeholder,
       props = _objectWithoutProperties$c(_ref3, _excluded2$5);
@@ -22678,6 +22836,9 @@
           refineSearchBox(query);
           storage.onAdd(query);
         },
+        onApply: function onApply(query) {
+          refineAutocomplete(query);
+        },
         onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function (_ref4) {
           var query = _ref4.query,
             setQuery = _ref4.setQuery,
@@ -22700,30 +22861,29 @@
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
-    var AutocompleteRecentSearchComponent = _typeof$S(showRecent) === 'object' && showRecent.itemComponent || AutocompleteRecentSearch;
     var elements = {};
-    if (showRecent) {
-      elements.recent = /*#__PURE__*/React__default.createElement(AutocompleteIndex
-      // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
-      , {
+    if (showRecent && recentSearchConfig) {
+      var RecentSearchItemComponent = recentSearchConfig.itemComponent;
+      elements.recent = /*#__PURE__*/React__default.createElement(AutocompleteIndex, {
+        HeaderComponent: recentSearchConfig.headerComponent
+        // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+        ,
         ItemComponent: function ItemComponent(_ref5) {
           var item = _ref5.item,
-            onSelect = _ref5.onSelect;
-          return /*#__PURE__*/React__default.createElement(AutocompleteRecentSearchComponent, {
+            onSelect = _ref5.onSelect,
+            onApply = _ref5.onApply;
+          return /*#__PURE__*/React__default.createElement(RecentSearchItemComponent, {
             item: item,
             onSelect: onSelect,
             onRemoveRecentSearch: function onRemoveRecentSearch() {
               return storage.onRemove(item.query);
-            }
+            },
+            onApply: onApply
           }, /*#__PURE__*/React__default.createElement(ConditionalReverseHighlight, {
             item: item
           }));
         },
-        classNames: {
-          root: 'ais-AutocompleteRecentSearches',
-          list: 'ais-AutocompleteRecentSearchesList',
-          item: 'ais-AutocompleteRecentSearchesItem'
-        },
+        classNames: recentSearchConfig.classNames,
         items: storageHits,
         getItemProps: getItemProps,
         key: "recentSearches"