instantsearch.js 4.84.0 → 4.85.1

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.84.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.85.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) :
@@ -1127,6 +1127,11 @@
     return insideBoundingBoxStringToBoundingBox(value);
   }
 
+  function getAlgoliaAgent(client) {
+    var clientTyped = client;
+    return clientTyped.transporter && clientTyped.transporter.userAgent ? clientTyped.transporter.userAgent.value : clientTyped._ua;
+  }
+
   // typed as any, since it accepts the _real_ js clients, not the interface we otherwise expect
   function getAppIdAndApiKey(searchClient) {
     if (searchClient.appId && searchClient.apiKey) {
@@ -14500,8 +14505,7 @@
         subscribe: function subscribe() {
           // using setTimeout here to delay extraction until widgets have been added in a tick (e.g. Vue)
           setTimeout(function () {
-            var client = instantSearchInstance.client;
-            payload.ua = client.transporter && client.transporter.userAgent ? client.transporter.userAgent.value : client._ua;
+            payload.ua = getAlgoliaAgent(instantSearchInstance.client);
             extractWidgetPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
             instantSearchInstance.middleware.forEach(function (middleware) {
               return payload.widgets.push({
@@ -16486,7 +16490,7 @@
     };
   }
 
-  var version$1 = '4.84.0';
+  var version$1 = '4.85.1';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -17262,7 +17266,7 @@
           onSelect = _getItemProps.onSelect,
           itemProps = _objectWithoutProperties$1(_getItemProps, _excluded$a);
         return createElement("li", _extends$1({
-          key: item.objectID
+          key: "".concat(itemProps.id, ":").concat(item.objectID)
         }, itemProps, {
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
@@ -17273,16 +17277,23 @@
     };
   }
 
-  var _excluded$b = ["children", "classNames"];
+  var _excluded$b = ["children", "classNames", "hidden"];
   function createAutocompletePanelComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompletePanel(userProps) {
       var children = userProps.children,
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        hidden = userProps.hidden,
         props = _objectWithoutProperties$1(userProps, _excluded$b);
       return createElement("div", _extends$1({}, props, {
-        className: cx('ais-AutocompletePanel', classNames.root, props.className)
+        "aria-hidden": hidden,
+        className: cx('ais-AutocompletePanel', !hidden && 'ais-AutocompletePanel--open', classNames.root, props.className),
+        onMouseDown: function onMouseDown(event) {
+          // Prevents the autocomplete panel from blurring the input when
+          // clicking inside the panel.
+          event.preventDefault();
+        }
       }), createElement("div", {
         className: cx('ais-AutocompletePanelLayout', classNames.layout)
       }, children));
@@ -17431,25 +17442,21 @@
 
   var _slicedToArray$1 = unwrapExports(slicedToArray);
 
-  function AutocompleteSubmitIcon(_ref) {
+  function SubmitIcon(_ref) {
     var createElement = _ref.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteSubmitIcon",
       viewBox: "0 0 24 24",
-      width: "20",
-      height: "20",
       fill: "currentColor"
     }, createElement("path", {
       d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
     }));
   }
-  function AutocompleteLoadingIcon(_ref2) {
+  function LoadingIcon(_ref2) {
     var createElement = _ref2.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteLoadingIcon",
-      viewBox: "0 0 100 100",
-      width: "20",
-      height: "20"
+      viewBox: "0 0 100 100"
     }, createElement("circle", {
       cx: "50",
       cy: "50",
@@ -17467,19 +17474,17 @@
       keyTimes: "0;0.40;0.65;1"
     })));
   }
-  function AutocompleteClearIcon(_ref3) {
+  function ClearIcon(_ref3) {
     var createElement = _ref3.createElement;
     return createElement("svg", {
       className: "ais-AutocompleteClearIcon",
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
       fill: "currentColor"
     }, createElement("path", {
       d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
     }));
   }
-  function AutocompleteClockIcon(_ref4) {
+  function ClockIcon(_ref4) {
     var createElement = _ref4.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -17488,7 +17493,7 @@
       d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
     }));
   }
-  function AutocompleteTrashIcon(_ref5) {
+  function TrashIcon(_ref5) {
     var createElement = _ref5.createElement;
     return createElement("svg", {
       viewBox: "0 0 24 24",
@@ -17500,13 +17505,13 @@
 
   function createAutocompleteRecentSearchComponent(_ref) {
     var createElement = _ref.createElement;
-    return function AutocompleteRecentSearch(_ref2) {
-      var item = _ref2.item,
-        children = _ref2.children,
-        onSelect = _ref2.onSelect,
-        onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
-        _ref2$classNames = _ref2.classNames,
-        classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
+    return function AutocompleteRecentSearch(userProps) {
+      var item = userProps.item,
+        children = userProps.children,
+        onSelect = userProps.onSelect,
+        onRemoveRecentSearch = userProps.onRemoveRecentSearch,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
       return createElement("div", {
         onClick: onSelect,
         className: cx('ais-AutocompleteItemWrapper ais-AutocompleteRecentSearchWrapper', classNames.root)
@@ -17514,7 +17519,7 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
-      }, createElement(AutocompleteClockIcon, {
+      }, createElement(ClockIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
@@ -17527,7 +17532,7 @@
           evt.stopPropagation();
           onRemoveRecentSearch();
         }
-      }, createElement(AutocompleteTrashIcon, {
+      }, createElement(TrashIcon, {
         createElement: createElement
       }))));
     };
@@ -17535,11 +17540,11 @@
 
   function createAutocompleteSearchComponent(_ref) {
     var createElement = _ref.createElement;
-    return function AutocompleteSearch(_ref2) {
-      var inputProps = _ref2.inputProps,
-        onClear = _ref2.onClear,
-        query = _ref2.query,
-        isSearchStalled = _ref2.isSearchStalled;
+    return function AutocompleteSearch(userProps) {
+      var inputProps = userProps.inputProps,
+        onClear = userProps.onClear,
+        query = userProps.query,
+        isSearchStalled = userProps.isSearchStalled;
       var inputRef = inputProps.ref;
       return createElement("form", {
         className: "ais-AutocompleteForm",
@@ -17564,12 +17569,12 @@
         className: "ais-AutocompleteSubmitButton",
         type: "submit",
         title: "Submit"
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteLoadingIndicator",
         hidden: !isSearchStalled
-      }, createElement(AutocompleteLoadingIcon, {
+      }, createElement(LoadingIcon, {
         createElement: createElement
       }))), createElement("div", {
         className: "ais-AutocompleteInputWrapper"
@@ -17582,7 +17587,6 @@
         autoCapitalize: "off",
         enterKeyHint: "search",
         spellCheck: "false",
-        placeholder: "",
         maxLength: 512,
         type: "search",
         value: query
@@ -17594,7 +17598,7 @@
         title: "Clear",
         hidden: query.length === 0 || isSearchStalled,
         onClick: onClear
-      }, createElement(AutocompleteClearIcon, {
+      }, createElement(ClearIcon, {
         createElement: createElement
       }))));
     };
@@ -17602,11 +17606,11 @@
 
   function createAutocompleteSuggestionComponent(_ref) {
     var createElement = _ref.createElement;
-    return function AutocompleteSuggestion(_ref2) {
-      var children = _ref2.children,
-        onSelect = _ref2.onSelect,
-        _ref2$classNames = _ref2.classNames,
-        classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
+    return function AutocompleteSuggestion(userProps) {
+      var children = userProps.children,
+        onSelect = userProps.onSelect,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
       return createElement("div", {
         onClick: onSelect,
         className: cx('ais-AutocompleteItemWrapper', 'ais-AutocompleteSuggestionWrapper', classNames.root)
@@ -17614,7 +17618,7 @@
         className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
       }, createElement("div", {
         className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
-      }, createElement(AutocompleteSubmitIcon, {
+      }, createElement(SubmitIcon, {
         createElement: createElement
       })), createElement("div", {
         className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
@@ -17632,7 +17636,8 @@
       var indices = _ref2.indices,
         indicesConfig = _ref2.indicesConfig,
         onRefine = _ref2.onRefine,
-        globalOnSelect = _ref2.onSelect;
+        globalOnSelect = _ref2.onSelect,
+        placeholder = _ref2.placeholder;
       var getElementId = createGetElementId(useId());
       var inputRef = useRef(null);
       var rootRef = useRef(null);
@@ -17728,6 +17733,7 @@
             'aria-haspopup': 'grid',
             'aria-controls': getElementId('panel'),
             'aria-activedescendant': activeDescendant,
+            placeholder: placeholder,
             onFocus: function onFocus() {
               return setIsOpen(true);
             },
@@ -18198,9 +18204,9 @@
           Fragment: Fragment
         }) : _userProps$itemCompon,
         _userProps$previousIc = userProps.previousIconComponent,
-        PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+        PreviousIcon = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
         _userProps$nextIconCo = userProps.nextIconComponent,
-        NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+        NextIcon = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
         HeaderComponent = userProps.headerComponent,
         _userProps$showNaviga = userProps.showNavigation,
         showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
@@ -18269,7 +18275,7 @@
           event.preventDefault();
           scrollLeft();
         }
-      }, createElement(PreviousIconComponent, {
+      }, createElement(PreviousIcon, {
         createElement: createElement
       })), createElement("ol", {
         className: cx(cssClasses.list),
@@ -18315,7 +18321,7 @@
           event.preventDefault();
           scrollRight();
         }
-      }, createElement(NextIconComponent, {
+      }, createElement(NextIcon, {
         createElement: createElement
       })));
     };
@@ -20477,13 +20483,14 @@
       indices = _ref.indices,
       getSearchPageURL = _ref.getSearchPageURL,
       userOnSelect = _ref.onSelect,
-      refine = _ref.refine,
+      refineAutocomplete = _ref.refine,
       cssClasses = _ref.cssClasses,
       renderState = _ref.renderState,
       instantSearchInstance = _ref.instantSearchInstance,
       showRecent = _ref.showRecent,
       showSuggestions = _ref.showSuggestions,
-      templates = _ref.templates;
+      templates = _ref.templates,
+      placeholder = _ref.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;
@@ -20502,6 +20509,7 @@
       return ['ais.hits', 'ais.infiniteHits'].includes($$type);
     })) !== null && _targetIndex$getWidge !== void 0 ? _targetIndex$getWidge : false;
     var onRefine = function onRefine(query) {
+      refineAutocomplete(query);
       instantSearchInstance.setUiState(function (uiState) {
         var _objectSpread2$1;
         return _objectSpread2(_objectSpread2({}, uiState), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, targetIndex.getIndexId(), _objectSpread2(_objectSpread2({}, uiState[targetIndex.getIndexId()]), {}, {
@@ -20532,7 +20540,8 @@
             return;
           }
           setQuery(query);
-        }
+        },
+        placeholder: placeholder
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
@@ -20631,11 +20640,16 @@
         }));
       };
       var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+      var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+        return !find(storageHits, function (storageHit) {
+          return storageHit.query === suggestionHit.query;
+        });
+      }) : hits;
       elements[elementId] = h(AutocompleteIndex, {
         key: indexId,
         HeaderComponent: headerComponent,
         ItemComponent: itemComponent,
-        items: hits.map(function (item) {
+        items: filteredHits.map(function (item) {
           return _objectSpread2(_objectSpread2({}, item), {}, {
             __indexName: indexId
           });
@@ -20649,13 +20663,12 @@
     }), 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);
+        onInput: function onInput(event) {
+          return refineAutocomplete(event.currentTarget.value);
         }
       }),
       onClear: function onClear() {
-        return onRefine('');
+        onRefine('');
       },
       isSearchStalled: instantSearchInstance.status === 'stalled'
     }), h(AutocompletePanel, getPanelProps(), templates.panel ? h(Template, _extends({}, renderState.templateProps, {
@@ -20683,7 +20696,8 @@
       _ref0$templates = _ref0.templates,
       templates = _ref0$templates === void 0 ? {} : _ref0$templates,
       _ref0$cssClasses = _ref0.cssClasses,
-      userCssClasses = _ref0$cssClasses === void 0 ? {} : _ref0$cssClasses;
+      userCssClasses = _ref0$cssClasses === void 0 ? {} : _ref0$cssClasses,
+      placeholder = _ref0.placeholder;
     if (!container) {
       throw new Error(withUsage$z('The `container` option is required.'));
     }
@@ -20734,6 +20748,7 @@
       cssClasses: cssClasses,
       showRecent: showRecent,
       showSuggestions: showSuggestions,
+      placeholder: placeholder,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,