instantsearch.js 4.84.0 → 4.85.0

package/cjs/connectors/chat/connectChat.js

@@ -80,7 +80,8 @@ var connectChat = exports.default = function connectChat(renderFn) {
           api: "https://".concat(appId, ".algolia.net/agent-studio/1/agents/").concat(agentId, "/completions?compatibilityMode=ai-sdk-5"),
           headers: {
             'x-algolia-application-id': appId,
-            'x-algolia-api-Key': apiKey
+            'x-algolia-api-Key': apiKey,
+            'x-algolia-agent': (0, _utils.getAlgoliaAgent)(instantSearchInstance.client)
           }
         });
       }

package/cjs/lib/utils/getAlgoliaAgent.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAlgoliaAgent = getAlgoliaAgent;
+function getAlgoliaAgent(client) {
+  var clientTyped = client;
+  return clientTyped.transporter && clientTyped.transporter.userAgent ? clientTyped.transporter.userAgent.value : clientTyped._ua;
+}

package/cjs/lib/utils/index.js

@@ -223,6 +223,17 @@ Object.keys(_geoSearch).forEach(function (key) {
     }
   });
 });
+var _getAlgoliaAgent = require("./getAlgoliaAgent");
+Object.keys(_getAlgoliaAgent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getAlgoliaAgent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getAlgoliaAgent[key];
+    }
+  });
+});
 var _getAppIdAndApiKey = require("./getAppIdAndApiKey");
 Object.keys(_getAppIdAndApiKey).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/lib/version.js

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

package/cjs/middlewares/createMetadataMiddleware.js

@@ -70,8 +70,7 @@ function createMetadataMiddleware() {
       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 = (0, _utils.getAlgoliaAgent)(instantSearchInstance.client);
           extractWidgetPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
           instantSearchInstance.middleware.forEach(function (middleware) {
             return payload.widgets.push({

package/cjs/widgets/autocomplete/autocomplete.js

@@ -110,13 +110,14 @@ function AutocompleteWrapper(_ref) {
     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;
@@ -135,6 +136,7 @@ function AutocompleteWrapper(_ref) {
     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;
       return _objectSpread(_objectSpread({}, uiState), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, targetIndex.getIndexId(), _objectSpread(_objectSpread({}, uiState[targetIndex.getIndexId()]), {}, {
@@ -165,7 +167,8 @@ function AutocompleteWrapper(_ref) {
           return;
         }
         setQuery(query);
-      }
+      },
+      placeholder: placeholder
     }),
     getInputProps = _usePropGetters.getInputProps,
     getItemProps = _usePropGetters.getItemProps,
@@ -264,11 +267,16 @@ function AutocompleteWrapper(_ref) {
       }));
     };
     var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+    var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function (suggestionHit) {
+      return !(0, _utils.find)(storageHits, function (storageHit) {
+        return storageHit.query === suggestionHit.query;
+      });
+    }) : hits;
     elements[elementId] = (0, _preact.h)(AutocompleteIndex, {
       key: indexId,
       HeaderComponent: headerComponent,
       ItemComponent: itemComponent,
-      items: hits.map(function (item) {
+      items: filteredHits.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
           __indexName: indexId
         });
@@ -284,11 +292,11 @@ function AutocompleteWrapper(_ref) {
     inputProps: _objectSpread(_objectSpread({}, getInputProps()), {}, {
       // @ts-ignore - This clashes with some ambient React JSX declarations.
       onInput: function onInput(evt) {
-        return refine(evt.currentTarget.value);
+        return refineAutocomplete(evt.currentTarget.value);
       }
     }),
     onClear: function onClear() {
-      return onRefine('');
+      onRefine('');
     },
     isSearchStalled: instantSearchInstance.status === 'stalled'
   }), (0, _preact.h)(AutocompletePanel, getPanelProps(), templates.panel ? (0, _preact.h)(_Template.default, _extends({}, renderState.templateProps, {
@@ -316,7 +324,8 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
     _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('The `container` option is required.'));
   }
@@ -367,6 +376,7 @@ function EXPERIMENTAL_autocomplete(widgetParams) {
     cssClasses: cssClasses,
     showRecent: showRecent,
     showSuggestions: showSuggestions,
+    placeholder: placeholder,
     renderState: {
       indexTemplateProps: [],
       isolatedIndex: undefined,

package/cjs/widgets/chat/chat.js

@@ -57,13 +57,13 @@ function getDefinedProperties(obj) {
     return value !== undefined;
   }));
 }
-var _ref6 = (0, _preact.h)(_instantsearchUiComponents.ArrowRightIconComponent, {
+var _ref6 = (0, _preact.h)(_instantsearchUiComponents.ArrowRightIcon, {
   createElement: _preact.h
 });
-var _ref7 = (0, _preact.h)(_instantsearchUiComponents.ChevronLeftIconComponent, {
+var _ref7 = (0, _preact.h)(_instantsearchUiComponents.ChevronLeftIcon, {
   createElement: _preact.h
 });
-var _ref8 = (0, _preact.h)(_instantsearchUiComponents.ChevronRightIconComponent, {
+var _ref8 = (0, _preact.h)(_instantsearchUiComponents.ChevronRightIcon, {
   createElement: _preact.h
 });
 function createCarouselTool(showViewAll, templates, getSearchPageURL) {

package/dist/instantsearch.development.d.ts

@@ -379,6 +379,10 @@ declare type AutocompleteWidgetParams<TItem extends BaseHit> = {
      * CSS classes to add.
      */
     cssClasses?: AutocompleteCSSClasses;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder?: string;
 };
 
 declare type BaseHit = Record<string, any>;

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.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) :
@@ -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.0';
 
   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",
@@ -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
       }))));
     };
@@ -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
       }))));
     };
@@ -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
           });
@@ -20651,11 +20665,11 @@
       inputProps: _objectSpread2(_objectSpread2({}, getInputProps()), {}, {
         // @ts-ignore - This clashes with some ambient React JSX declarations.
         onInput: function onInput(evt) {
-          return refine(evt.currentTarget.value);
+          return refineAutocomplete(evt.currentTarget.value);
         }
       }),
       onClear: function onClear() {
-        return onRefine('');
+        onRefine('');
       },
       isSearchStalled: instantSearchInstance.status === 'stalled'
     }), h(AutocompletePanel, getPanelProps(), templates.panel ? h(Template, _extends({}, renderState.templateProps, {
@@ -20683,7 +20697,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 +20749,7 @@
       cssClasses: cssClasses,
       showRecent: showRecent,
       showSuggestions: showSuggestions,
+      placeholder: placeholder,
       renderState: {
         indexTemplateProps: [],
         isolatedIndex: undefined,