react-instantsearch 7.20.0 → 7.20.1

package/dist/cjs/widgets/Autocomplete.js

@@ -10,7 +10,7 @@ var _reactInstantsearchCore = require("react-instantsearch-core");
 var _AutocompleteSearch = require("../components/AutocompleteSearch");
 var _ReverseHighlight = require("./ReverseHighlight");
 var _excluded = ["indices", "showSuggestions", "showRecent", "searchParameters"],
-  _excluded2 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions"];
+  _excluded2 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions", "placeholder"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -134,6 +134,7 @@ function InnerAutocomplete(_ref3) {
     PanelComponent = _ref3.panelComponent,
     showRecent = _ref3.showRecent,
     showSuggestions = _ref3.showSuggestions,
+    placeholder = _ref3.placeholder,
     props = _objectWithoutProperties(_ref3, _excluded2);
   var _useAutocomplete = (0, _reactInstantsearchCore.useAutocomplete)(),
     indices = _useAutocomplete.indices,
@@ -172,7 +173,8 @@ function InnerAutocomplete(_ref3) {
           return;
         }
         setQuery(query);
-      }
+      },
+      placeholder: placeholder
     }),
     getInputProps = _usePropGetters.getInputProps,
     getItemProps = _usePropGetters.getItemProps,
@@ -203,7 +205,8 @@ function InnerAutocomplete(_ref3) {
         item: 'ais-AutocompleteRecentSearchesItem'
       },
       items: storageHits,
-      getItemProps: getItemProps
+      getItemProps: getItemProps,
+      key: "recentSearches"
     });
   }
   indices.forEach(function (_ref6, i) {
@@ -211,6 +214,11 @@ function InnerAutocomplete(_ref3) {
       indexName = _ref6.indexName,
       hits = _ref6.hits;
     var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+    var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+      return !storageHits.find(function (storageHit) {
+        return storageHit.query === suggestionHit.query;
+      });
+    }) : hits;
     elements[elementId] = /*#__PURE__*/_react.default.createElement(AutocompleteIndex, {
       key: indexId
       // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
@@ -219,7 +227,7 @@ function InnerAutocomplete(_ref3) {
       // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
       ,
       ItemComponent: indicesConfig[i].itemComponent,
-      items: hits.map(function (item) {
+      items: filteredHits.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
           __indexName: indexId
         });

package/dist/cjs/widgets/chat/tools/SearchIndexTool.js

@@ -89,7 +89,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
         window.location.href = getSearchPageURL(nextUiState);
       },
       className: "ais-ChatToolSearchIndexCarouselHeaderViewAll"
-    }, "View all", /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ArrowRightIconComponent, {
+    }, "View all", /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ArrowRightIcon, {
       createElement: _react.createElement
     }))), (hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0) > 2 && /*#__PURE__*/_react.default.createElement("div", {
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButtons"
@@ -100,7 +100,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
       onClick: scrollLeft,
       disabled: !canScrollLeft,
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-    }, /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ChevronLeftIconComponent, {
+    }, /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ChevronLeftIcon, {
       createElement: _react.createElement
     })), /*#__PURE__*/_react.default.createElement(Button, {
       variant: "outline",
@@ -109,7 +109,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
       onClick: scrollRight,
       disabled: !canScrollRight,
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-    }, /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ChevronRightIconComponent, {
+    }, /*#__PURE__*/_react.default.createElement(_instantsearchUiComponents.ChevronRightIcon, {
       createElement: _react.createElement
     }))));
   }

package/dist/es/widgets/Autocomplete.d.ts

@@ -39,6 +39,7 @@ export type AutocompleteProps<TItem extends BaseHit> = ComponentProps<'div'> & {
     }) => React.JSX.Element;
     searchParameters?: AutocompleteSearchParameters;
     classNames?: Partial<AutocompleteClassNames>;
+    placeholder?: string;
 };
 export declare function EXPERIMENTAL_Autocomplete<TItem extends BaseHit = BaseHit>({ indices, showSuggestions, showRecent, searchParameters: userSearchParameters, ...props }: AutocompleteProps<TItem>): React.JSX.Element;
 export {};

package/dist/es/widgets/Autocomplete.js

@@ -1,5 +1,5 @@
 var _excluded = ["indices", "showSuggestions", "showRecent", "searchParameters"],
-  _excluded2 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions"];
+  _excluded2 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions", "placeholder"];
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -127,6 +127,7 @@ function InnerAutocomplete(_ref3) {
     PanelComponent = _ref3.panelComponent,
     showRecent = _ref3.showRecent,
     showSuggestions = _ref3.showSuggestions,
+    placeholder = _ref3.placeholder,
     props = _objectWithoutProperties(_ref3, _excluded2);
   var _useAutocomplete = useAutocomplete(),
     indices = _useAutocomplete.indices,
@@ -165,7 +166,8 @@ function InnerAutocomplete(_ref3) {
           return;
         }
         setQuery(query);
-      }
+      },
+      placeholder: placeholder
     }),
     getInputProps = _usePropGetters.getInputProps,
     getItemProps = _usePropGetters.getItemProps,
@@ -196,7 +198,8 @@ function InnerAutocomplete(_ref3) {
         item: 'ais-AutocompleteRecentSearchesItem'
       },
       items: storageHits,
-      getItemProps: getItemProps
+      getItemProps: getItemProps,
+      key: "recentSearches"
     });
   }
   indices.forEach(function (_ref6, i) {
@@ -204,6 +207,11 @@ function InnerAutocomplete(_ref3) {
       indexName = _ref6.indexName,
       hits = _ref6.hits;
     var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+    var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+      return !storageHits.find(function (storageHit) {
+        return storageHit.query === suggestionHit.query;
+      });
+    }) : hits;
     elements[elementId] = /*#__PURE__*/React.createElement(AutocompleteIndex, {
       key: indexId
       // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
@@ -212,7 +220,7 @@ function InnerAutocomplete(_ref3) {
       // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
       ,
       ItemComponent: indicesConfig[i].itemComponent,
-      items: hits.map(function (item) {
+      items: filteredHits.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
           __indexName: indexId
         });

package/dist/es/widgets/chat/tools/SearchIndexTool.js

@@ -5,7 +5,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { ChevronLeftIconComponent, ChevronRightIconComponent, ArrowRightIconComponent, createButtonComponent } from 'instantsearch-ui-components';
+import { ChevronLeftIcon, ChevronRightIcon, ArrowRightIcon, createButtonComponent } from 'instantsearch-ui-components';
 import React, { createElement } from 'react';
 import { Carousel } from "../../../components/index.js";
 function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
@@ -82,7 +82,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
         window.location.href = getSearchPageURL(nextUiState);
       },
       className: "ais-ChatToolSearchIndexCarouselHeaderViewAll"
-    }, "View all", /*#__PURE__*/React.createElement(ArrowRightIconComponent, {
+    }, "View all", /*#__PURE__*/React.createElement(ArrowRightIcon, {
       createElement: createElement
     }))), (hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0) > 2 && /*#__PURE__*/React.createElement("div", {
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButtons"
@@ -93,7 +93,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
       onClick: scrollLeft,
       disabled: !canScrollLeft,
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-    }, /*#__PURE__*/React.createElement(ChevronLeftIconComponent, {
+    }, /*#__PURE__*/React.createElement(ChevronLeftIcon, {
       createElement: createElement
     })), /*#__PURE__*/React.createElement(Button, {
       variant: "outline",
@@ -102,7 +102,7 @@ function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
       onClick: scrollRight,
       disabled: !canScrollRight,
       className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-    }, /*#__PURE__*/React.createElement(ChevronRightIconComponent, {
+    }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
       createElement: createElement
     }))));
   }

package/dist/umd/ReactInstantSearch.js

@@ -7,7 +7,7 @@
 
   var React__default = 'default' in React ? React['default'] : React;
 
-  var version = '7.20.0';
+  var version = '7.20.1';
 
   // Copyright Joyent, Inc. and other Node contributors.
   //
@@ -8068,6 +8068,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) {
@@ -11827,8 +11832,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({
@@ -13351,7 +13355,7 @@
     };
   }
 
-  var version$3 = '4.84.0';
+  var version$3 = '4.85.0';
 
   function _typeof$q(o) {
     "@babel/helpers - typeof";
@@ -20941,7 +20945,7 @@
           onSelect = _getItemProps.onSelect,
           itemProps = _objectWithoutProperties$d(_getItemProps, _excluded$d);
         return createElement("li", _extends$2({
-          key: item.objectID
+          key: "".concat(itemProps.id, ":").concat(item.objectID)
         }, itemProps, {
           className: cx('ais-AutocompleteIndexItem', classNames.item, className)
         }), createElement(ItemComponent, {
@@ -20952,16 +20956,23 @@
     };
   }
 
-  var _excluded$e = ["children", "classNames"];
+  var _excluded$e = ["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$d(userProps, _excluded$e);
       return createElement("div", _extends$2({}, 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));
@@ -21110,25 +21121,21 @@
 
   var _slicedToArray$h = 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",
@@ -21146,19 +21153,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",
@@ -21167,7 +21172,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",
@@ -21193,7 +21198,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)
@@ -21206,7 +21211,7 @@
           evt.stopPropagation();
           onRemoveRecentSearch();
         }
-      }, createElement(AutocompleteTrashIcon, {
+      }, createElement(TrashIcon, {
         createElement: createElement
       }))));
     };
@@ -21243,12 +21248,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"
@@ -21261,7 +21266,6 @@
         autoCapitalize: "off",
         enterKeyHint: "search",
         spellCheck: "false",
-        placeholder: "",
         maxLength: 512,
         type: "search",
         value: query
@@ -21273,7 +21277,7 @@
         title: "Clear",
         hidden: query.length === 0 || isSearchStalled,
         onClick: onClear
-      }, createElement(AutocompleteClearIcon, {
+      }, createElement(ClearIcon, {
         createElement: createElement
       }))));
     };
@@ -21293,7 +21297,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)
@@ -21311,7 +21315,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);
@@ -21407,6 +21412,7 @@
             'aria-haspopup': 'grid',
             'aria-controls': getElementId('panel'),
             'aria-activedescendant': activeDescendant,
+            placeholder: placeholder,
             onFocus: function onFocus() {
               return setIsOpen(true);
             },
@@ -21877,9 +21883,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,
@@ -21948,7 +21954,7 @@
           event.preventDefault();
           scrollLeft();
         }
-      }, createElement(PreviousIconComponent, {
+      }, createElement(PreviousIcon, {
         createElement: createElement
       })), createElement("ol", {
         className: cx(cssClasses.list),
@@ -21994,7 +22000,7 @@
           event.preventDefault();
           scrollRight();
         }
-      }, createElement(NextIconComponent, {
+      }, createElement(NextIcon, {
         createElement: createElement
       })));
     };
@@ -22540,7 +22546,7 @@
   }
 
   var _excluded$o = ["indices", "showSuggestions", "showRecent", "searchParameters"],
-    _excluded2$5 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions"];
+    _excluded2$5 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "showSuggestions", "placeholder"];
   var Autocomplete = createAutocompleteComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -22648,6 +22654,7 @@
       PanelComponent = _ref3.panelComponent,
       showRecent = _ref3.showRecent,
       showSuggestions = _ref3.showSuggestions,
+      placeholder = _ref3.placeholder,
       props = _objectWithoutProperties$c(_ref3, _excluded2$5);
     var _useAutocomplete = useAutocomplete(),
       indices = _useAutocomplete.indices,
@@ -22686,7 +22693,8 @@
             return;
           }
           setQuery(query);
-        }
+        },
+        placeholder: placeholder
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
@@ -22717,7 +22725,8 @@
           item: 'ais-AutocompleteRecentSearchesItem'
         },
         items: storageHits,
-        getItemProps: getItemProps
+        getItemProps: getItemProps,
+        key: "recentSearches"
       });
     }
     indices.forEach(function (_ref6, i) {
@@ -22725,6 +22734,11 @@
         indexName = _ref6.indexName,
         hits = _ref6.hits;
       var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+      var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+        return !storageHits.find(function (storageHit) {
+          return storageHit.query === suggestionHit.query;
+        });
+      }) : hits;
       elements[elementId] = /*#__PURE__*/React__default.createElement(AutocompleteIndex, {
         key: indexId
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
@@ -22733,7 +22747,7 @@
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
         ,
         ItemComponent: indicesConfig[i].itemComponent,
-        items: hits.map(function (item) {
+        items: filteredHits.map(function (item) {
           return _objectSpread2(_objectSpread2({}, item), {}, {
             __indexName: indexId
           });