instantsearch.js 4.83.0 → 4.84.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.83.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.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) :
@@ -15936,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;
       },
@@ -16001,8 +16007,7 @@
             }
           });
           if (isolated) {
-            var _helper2;
-            (_helper2 = helper) === null || _helper2 === void 0 ? void 0 : _helper2.search();
+            this.scheduleLocalSearch();
           } else {
             localInstantSearchInstance.scheduleSearch();
           }
@@ -16081,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();
             }
@@ -16336,7 +16340,7 @@
       },
       dispose: function dispose() {
         var _this5 = this,
-          _helper4,
+          _helper3,
           _derivedHelper3;
         localWidgets.forEach(function (widget) {
           if (widget.dispose && helper) {
@@ -16356,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;
@@ -16482,7 +16486,7 @@
     };
   }
 
-  var version$1 = '4.83.0';
+  var version$1 = '4.84.0';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -17498,6 +17502,7 @@
     var createElement = _ref.createElement;
     return function AutocompleteRecentSearch(_ref2) {
       var item = _ref2.item,
+        children = _ref2.children,
         onSelect = _ref2.onSelect,
         onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
         _ref2$classNames = _ref2.classNames,
@@ -17513,7 +17518,7 @@
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-      }, item.query)), createElement("div", {
+      }, children)), createElement("div", {
         className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
       }, createElement("button", {
         className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
@@ -17535,6 +17540,7 @@
         onClear = _ref2.onClear,
         query = _ref2.query,
         isSearchStalled = _ref2.isSearchStalled;
+      var inputRef = inputProps.ref;
       return createElement("form", {
         className: "ais-AutocompleteForm",
         action: "",
@@ -17542,6 +17548,10 @@
         role: "search",
         onSubmit: function onSubmit(e) {
           return e.preventDefault();
+        },
+        onReset: function onReset() {
+          var _inputRef$current;
+          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         }
       }, createElement("div", {
         className: "ais-AutocompleteInputWrapperPrefix"
@@ -17593,7 +17603,7 @@
   function createAutocompleteSuggestionComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteSuggestion(_ref2) {
-      var item = _ref2.item,
+      var children = _ref2.children,
         onSelect = _ref2.onSelect,
         _ref2$classNames = _ref2.classNames,
         classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -17608,7 +17618,7 @@
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-      }, item.query)));
+      }, children)));
     };
   }
 
@@ -17624,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),
@@ -17655,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':
@@ -17674,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,
@@ -17700,6 +17721,7 @@
         getInputProps: function getInputProps() {
           return {
             id: getElementId('input'),
+            ref: inputRef,
             role: 'combobox',
             'aria-autocomplete': 'list',
             'aria-expanded': isOpen,
@@ -17710,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;
               }
             },
@@ -17764,7 +17795,9 @@
             role: 'row',
             'aria-selected': id === activeDescendant,
             onSelect: function onSelect() {
-              return submit(id);
+              return submit({
+                activeDescendant: id
+              });
             }
           };
         },
@@ -17905,7 +17938,13 @@
         return {
           objectID: value,
           query: value,
-          __indexName: 'recent-searches'
+          __indexName: 'recent-searches',
+          _highlightResult: getHighlightedAttribute({
+            item: {
+              query: value
+            },
+            query: query || ''
+          })
         };
       });
       var indicesForPropGetters = _toConsumableArray$1(indices);
@@ -17941,6 +17980,24 @@
       return false;
     }
   }
+  function getHighlightedAttribute(_ref3) {
+    var item = _ref3.item,
+      query = _ref3.query;
+    if (!query.trim().length) {
+      return {
+        query: {
+          matchLevel: 'none'
+        }
+      };
+    }
+    return {
+      query: {
+        value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+          return "<mark>".concat(match, "</mark>");
+        })
+      }
+    };
+  }
   function getLocalStorage() {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
     if (!isLocalStorageSupported()) {
@@ -17965,10 +18022,10 @@
       }
     };
   }
-  function createStorage(_ref3) {
-    var _ref3$limit = _ref3.limit,
-      limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-      storageKey = _ref3.storageKey;
+  function createStorage(_ref4) {
+    var _ref4$limit = _ref4.limit,
+      limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+      storageKey = _ref4.storageKey;
     var storage = getLocalStorage(storageKey);
     var updateListener = null;
     return {
@@ -20401,7 +20458,12 @@
         rendererParams.renderState = {
           indexTemplateProps: [],
           isolatedIndex: isolatedIndex,
-          targetIndex: targetIndex
+          targetIndex: targetIndex,
+          templateProps: prepareTemplateProps({
+            defaultTemplates: {},
+            templatesConfig: connectorParams.instantSearchInstance.templatesConfig,
+            templates: rendererParams.templates
+          })
         };
         connectorParams.refine((_targetIndex$getHelpe = (_targetIndex$getHelpe2 = targetIndex.getHelper()) === null || _targetIndex$getHelpe2 === void 0 ? void 0 : _targetIndex$getHelpe2.state.query) !== null && _targetIndex$getHelpe !== void 0 ? _targetIndex$getHelpe : '');
         return;
@@ -20419,7 +20481,9 @@
       cssClasses = _ref.cssClasses,
       renderState = _ref.renderState,
       instantSearchInstance = _ref.instantSearchInstance,
-      showRecent = _ref.showRecent;
+      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;
@@ -20474,17 +20538,28 @@
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
       getRootProps = _usePropGetters.getRootProps;
-    var AutocompleteRecentSearchComponent = AutocompleteRecentSearch;
+    var AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref4) {
+      var item = _ref4.item,
+        onSelect = _ref4.onSelect,
+        onRemoveRecentSearch = _ref4.onRemoveRecentSearch;
+      return h(AutocompleteRecentSearch, {
+        item: item,
+        onSelect: onSelect,
+        onRemoveRecentSearch: onRemoveRecentSearch
+      }, h(ConditionalReverseHighlight, {
+        item: item
+      }));
+    };
     if (_typeof(showRecent) === 'object' && (_showRecent$templates = showRecent.templates) !== null && _showRecent$templates !== void 0 && _showRecent$templates.item) {
       var props = prepareTemplateProps({
         defaultTemplates: {},
         templatesConfig: instantSearchInstance.templatesConfig,
         templates: showRecent.templates
       });
-      AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref4) {
-        var item = _ref4.item,
-          onSelect = _ref4.onSelect,
-          onRemoveRecentSearch = _ref4.onRemoveRecentSearch;
+      AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref5) {
+        var item = _ref5.item,
+          onSelect = _ref5.onSelect,
+          onRemoveRecentSearch = _ref5.onRemoveRecentSearch;
         return h(Template, _extends({}, props, {
           templateKey: "item",
           rootTagName: "fragment",
@@ -20496,45 +20571,36 @@
         }));
       };
     }
-    return h(Autocomplete, _extends({}, getRootProps(), {
-      classNames: cssClasses
-    }), h(AutocompleteSearchBox, {
-      query: searchboxQuery || '',
-      inputProps: _objectSpread2(_objectSpread2({}, getInputProps()), {}, {
-        // @ts-ignore - This clashes with some ambient React JSX declarations.
-        onInput: function onInput(evt) {
-          return refine(evt.currentTarget.value);
-        }
-      }),
-      onClear: function onClear() {
-        return onRefine('');
-      },
-      isSearchStalled: instantSearchInstance.status === 'stalled'
-    }), h(AutocompletePanel, getPanelProps(), showRecent && h(AutocompleteIndex
-    // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
-    , {
-      ItemComponent: function ItemComponent(_ref5) {
-        var item = _ref5.item,
-          onSelect = _ref5.onSelect;
-        return h(AutocompleteRecentSearchComponent, {
-          item: item,
-          onSelect: onSelect,
-          onRemoveRecentSearch: function onRemoveRecentSearch() {
-            return storage.onRemove(item.query);
-          }
-        });
-      },
-      classNames: {
-        root: 'ais-AutocompleteRecentSearches',
-        list: 'ais-AutocompleteRecentSearchesList',
-        item: 'ais-AutocompleteRecentSearchesItem'
-      },
-      items: storageHits,
-      getItemProps: getItemProps
-    }), indices.map(function (_ref6, i) {
+    var elements = {};
+    if (showRecent) {
+      elements.recent = h(AutocompleteIndex
+      // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+      , {
+        ItemComponent: function ItemComponent(_ref6) {
+          var item = _ref6.item,
+            onSelect = _ref6.onSelect;
+          return h(AutocompleteRecentSearchComponent, {
+            item: item,
+            onSelect: onSelect,
+            onRemoveRecentSearch: function onRemoveRecentSearch() {
+              return storage.onRemove(item.query);
+            }
+          });
+        },
+        classNames: {
+          root: 'ais-AutocompleteRecentSearches',
+          list: 'ais-AutocompleteRecentSearchesList',
+          item: 'ais-AutocompleteRecentSearchesItem'
+        },
+        items: storageHits,
+        getItemProps: getItemProps
+      });
+    }
+    indices.forEach(function (_ref7, i) {
       var _indicesConfig$i$temp;
-      var indexId = _ref6.indexId,
-        hits = _ref6.hits;
+      var indexId = _ref7.indexId,
+        indexName = _ref7.indexName,
+        hits = _ref7.hits;
       if (!renderState.indexTemplateProps[i]) {
         renderState.indexTemplateProps[i] = prepareTemplateProps({
           defaultTemplates: {},
@@ -20542,8 +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 (_ref7) {
-        var items = _ref7.items;
+      var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref8) {
+        var items = _ref8.items;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "header",
           rootTagName: "fragment",
@@ -20552,9 +20618,9 @@
           }
         }));
       } : undefined;
-      var itemComponent = function itemComponent(_ref8) {
-        var item = _ref8.item,
-          onSelect = _ref8.onSelect;
+      var itemComponent = function itemComponent(_ref9) {
+        var item = _ref9.item,
+          onSelect = _ref9.onSelect;
         return h(Template, _extends({}, renderState.indexTemplateProps[i], {
           templateKey: "item",
           rootTagName: "fragment",
@@ -20564,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,
@@ -20576,26 +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 _ref9 = widgetParams || {},
-      container = _ref9.container,
-      escapeHTML = _ref9.escapeHTML,
-      _ref9$indices = _ref9.indices,
-      indices = _ref9$indices === void 0 ? [] : _ref9$indices,
-      showSuggestions = _ref9.showSuggestions,
-      showRecent = _ref9.showRecent,
-      getSearchPageURL = _ref9.getSearchPageURL,
-      onSelect = _ref9.onSelect,
-      _ref9$templates = _ref9.templates,
-      templates = _ref9$templates === void 0 ? {} : _ref9$templates,
-      _ref9$cssClasses = _ref9.cssClasses,
-      userCssClasses = _ref9$cssClasses === void 0 ? {} : _ref9$cssClasses;
+    var _ref0 = widgetParams || {},
+      container = _ref0.container,
+      escapeHTML = _ref0.escapeHTML,
+      _ref0$indices = _ref0.indices,
+      indices = _ref0$indices === void 0 ? [] : _ref0$indices,
+      showSuggestions = _ref0.showSuggestions,
+      showRecent = _ref0.showRecent,
+      userSearchParameters = _ref0.searchParameters,
+      getSearchPageURL = _ref0.getSearchPageURL,
+      onSelect = _ref0.onSelect,
+      _ref0$templates = _ref0.templates,
+      templates = _ref0$templates === void 0 ? {} : _ref0$templates,
+      _ref0$cssClasses = _ref0.cssClasses,
+      userCssClasses = _ref0$cssClasses === void 0 ? {} : _ref0$cssClasses;
     if (!container) {
       throw new Error(withUsage$z('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
+    var searchParameters = _objectSpread2({
+      hitsPerPage: 5
+    }, userSearchParameters);
     var cssClasses = {
       root: cx(suit$6(), userCssClasses.root)
     };
@@ -20606,7 +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),
@@ -20629,10 +20733,12 @@
       onSelect: onSelect,
       cssClasses: cssClasses,
       showRecent: showRecent,
+      showSuggestions: showSuggestions,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,
-        targetIndex: undefined
+        targetIndex: undefined,
+        templateProps: undefined
       },
       templates: templates
     });
@@ -20644,20 +20750,32 @@
     })({}), index({
       indexId: "ais-autocomplete-".concat(instanceId),
       EXPERIMENTAL_isolated: true
-    }).addWidgets([].concat(_toConsumableArray(indicesConfig.map(function (_ref0) {
-      var indexName = _ref0.indexName;
+    }).addWidgets([configure(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref10) {
+      var indexName = _ref10.indexName,
+        indexSearchParameters = _ref10.searchParameters;
       return index({
         indexName: indexName,
         indexId: indexName
-      }).addWidgets([configure({
-        hitsPerPage: 5
-      })]);
+      }).addWidgets([configure(indexSearchParameters || {})]);
     })), [_objectSpread2(_objectSpread2({}, makeWidget({
       escapeHTML: escapeHTML
     })), {}, {
       $$widgetType: 'ais.autocomplete'
     })]))];
   }
+  function ConditionalReverseHighlight(_ref11) {
+    var _item$_highlightResul;
+    var item = _ref11.item;
+    if (!((_item$_highlightResul = item._highlightResult) !== null && _item$_highlightResul !== void 0 && _item$_highlightResul.query) ||
+    // @ts-expect-error - we should not have matchLevel as arrays here
+    item._highlightResult.query.matchLevel === 'none') {
+      return item.query;
+    }
+    return h(ReverseHighlight$1, {
+      attribute: "query",
+      hit: item
+    });
+  }
 
   var Breadcrumb = function Breadcrumb(_ref) {
     var items = _ref.items,