@algolia/autocomplete-js 1.11.0 → 1.12.0

package/dist/esm/render.js

@@ -101,13 +101,12 @@ export function renderPanel(render, _ref2) {
     }, propGetters.getListProps(_objectSpread({
       state: state,
       props: autocomplete.getListProps({
-        sourceIndex: sourceIndex
+        source: source
       })
     }, autocompleteScopeApi))), items.map(function (item) {
       var itemProps = autocomplete.getItemProps({
         item: item,
-        source: source,
-        sourceIndex: sourceIndex
+        source: source
       });
       return renderer.createElement("li", _extends({
         key: itemProps.id,

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.11.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.12.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -347,7 +347,7 @@
     return undefined;
   }
 
-  var version = '1.11.0';
+  var version = '1.12.0';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -880,7 +880,8 @@
       providedInsightsClient = _getOptions.insightsClient,
       onItemsChange = _getOptions.onItemsChange,
       onSelectEvent = _getOptions.onSelect,
-      onActiveEvent = _getOptions.onActive;
+      onActiveEvent = _getOptions.onActive,
+      __autocomplete_clickAnalytics = _getOptions.__autocomplete_clickAnalytics;
     var insightsClient = providedInsightsClient;
     if (!providedInsightsClient) {
       safelyRunOnBrowser(function (_ref2) {
@@ -943,9 +944,9 @@
         function setInsightsContext(userToken) {
           setContext({
             algoliaInsightsPlugin: {
-              __algoliaSearchParameters: _objectSpread$f({
+              __algoliaSearchParameters: _objectSpread$f(_objectSpread$f({}, __autocomplete_clickAnalytics ? {
                 clickAnalytics: true
-              }, userToken ? {
+              } : {}), userToken ? {
                 userToken: userToken
               } : {}),
               insights: insights
@@ -1010,27 +1011,36 @@
       __autocomplete_pluginOptions: options
     };
   }
+  function getAlgoliaSources() {
+    var _context$algoliaInsig;
+    var algoliaSourceBase = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var context = arguments.length > 1 ? arguments[1] : undefined;
+    return [].concat(_toConsumableArray$5(algoliaSourceBase), ['autocomplete-internal'], _toConsumableArray$5((_context$algoliaInsig = context.algoliaInsightsPlugin) !== null && _context$algoliaInsig !== void 0 && _context$algoliaInsig.__automaticInsights ? ['autocomplete-automatic'] : []));
+  }
   function getOptions(options) {
     return _objectSpread$f({
       onItemsChange: function onItemsChange(_ref8) {
         var insights = _ref8.insights,
-          insightsEvents = _ref8.insightsEvents;
+          insightsEvents = _ref8.insightsEvents,
+          state = _ref8.state;
         insights.viewedObjectIDs.apply(insights, _toConsumableArray$5(insightsEvents.map(function (event) {
           return _objectSpread$f(_objectSpread$f({}, event), {}, {
-            algoliaSource: [].concat(_toConsumableArray$5(event.algoliaSource || []), ['autocomplete-internal'])
+            algoliaSource: getAlgoliaSources(event.algoliaSource, state.context)
           });
         })));
       },
       onSelect: function onSelect(_ref9) {
         var insights = _ref9.insights,
-          insightsEvents = _ref9.insightsEvents;
+          insightsEvents = _ref9.insightsEvents,
+          state = _ref9.state;
         insights.clickedObjectIDsAfterSearch.apply(insights, _toConsumableArray$5(insightsEvents.map(function (event) {
           return _objectSpread$f(_objectSpread$f({}, event), {}, {
-            algoliaSource: [].concat(_toConsumableArray$5(event.algoliaSource || []), ['autocomplete-internal'])
+            algoliaSource: getAlgoliaSources(event.algoliaSource, state.context)
           });
         })));
       },
-      onActive: noop
+      onActive: noop,
+      __autocomplete_clickAnalytics: true
     }, options);
   }
   function loadInsights(environment) {
@@ -1370,6 +1380,17 @@
     };
   }
 
+  /**
+   * Returns a full element id for an autocomplete element.
+   *
+   * @param autocompleteInstanceId The id of the autocomplete instance
+   * @param elementId The specific element id
+   * @param source The source of the element, when it needs to be scoped
+   */
+  function getAutocompleteElementId(autocompleteInstanceId, elementId, source) {
+    return [autocompleteInstanceId, source === null || source === void 0 ? void 0 : source.sourceId, elementId].filter(Boolean).join('-').replace(/\s/g, '');
+  }
+
   function isOrContainsNode(parent, child) {
     return parent === child || parent.contains(child);
   }
@@ -1680,7 +1701,7 @@
       autoFocus: false,
       defaultActiveItemId: null,
       stallThreshold: 300,
-      insights: false,
+      insights: undefined,
       environment: environment,
       shouldPanelOpen: function shouldPanelOpen(_ref) {
         var state = _ref.state;
@@ -2167,7 +2188,8 @@
       setIsOpen = setters.setIsOpen,
       setQuery = setters.setQuery,
       setActiveItemId = setters.setActiveItemId,
-      setStatus = setters.setStatus;
+      setStatus = setters.setStatus,
+      setContext = setters.setContext;
     setQuery(query);
     setActiveItemId(props.defaultActiveItemId);
     if (!query && props.openOnFocus === false) {
@@ -2217,6 +2239,20 @@
           return preResolve(itemsOrDescription, source.sourceId, store.getState());
         });
       })).then(resolve).then(function (responses) {
+        var __automaticInsights = responses.some(function (_ref2) {
+          var items = _ref2.items;
+          return isSearchResponseWithAutomaticInsightsFlag(items);
+        });
+
+        // No need to pollute the context if `__automaticInsights=false`
+        if (__automaticInsights) {
+          var _store$getState$conte;
+          setContext({
+            algoliaInsightsPlugin: _objectSpread$8(_objectSpread$8({}, ((_store$getState$conte = store.getState().context) === null || _store$getState$conte === void 0 ? void 0 : _store$getState$conte.algoliaInsightsPlugin) || {}), {}, {
+              __automaticInsights: __automaticInsights
+            })
+          });
+        }
         return postResolve(responses, sources, store);
       }).then(function (collections) {
         return reshape({
@@ -2262,6 +2298,9 @@
     });
     return store.pendingRequests.add(request);
   }
+  function isSearchResponseWithAutomaticInsightsFlag(items) {
+    return !Array.isArray(items) && Boolean(items === null || items === void 0 ? void 0 : items._automaticInsights);
+  }
 
   function _typeof$7(obj) {
     "@babel/helpers - typeof";
@@ -2358,7 +2397,8 @@
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       // eslint-disable-next-line no-inner-declarations
       var triggerScrollIntoView = function triggerScrollIntoView() {
-        var nodeItem = props.environment.document.getElementById("".concat(props.id, "-item-").concat(store.getState().activeItemId));
+        var highlightedItem = getActiveItem(store.getState());
+        var nodeItem = props.environment.document.getElementById(getAutocompleteElementId(props.id, "item-".concat(store.getState().activeItemId), highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.source));
         if (nodeItem) {
           if (nodeItem.scrollIntoViewIfNeeded) {
             nodeItem.scrollIntoViewIfNeeded(false);
@@ -2545,9 +2585,8 @@
     _excluded2 = ["inputElement", "formElement", "panelElement"],
     _excluded3 = ["inputElement"],
     _excluded4 = ["inputElement", "maxLength"],
-    _excluded5 = ["sourceIndex"],
-    _excluded6 = ["sourceIndex"],
-    _excluded7 = ["item", "source", "sourceIndex"];
+    _excluded5 = ["source"],
+    _excluded6 = ["item", "source"];
   function ownKeys$6(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
@@ -2692,8 +2731,11 @@
         role: 'combobox',
         'aria-expanded': store.getState().isOpen,
         'aria-haspopup': 'listbox',
-        'aria-owns': store.getState().isOpen ? "".concat(props.id, "-list") : undefined,
-        'aria-labelledby': "".concat(props.id, "-label")
+        'aria-owns': store.getState().isOpen ? store.getState().collections.map(function (_ref2) {
+          var source = _ref2.source;
+          return getAutocompleteElementId(props.id, 'list', source);
+        }).join(' ') : undefined,
+        'aria-labelledby': getAutocompleteElementId(props.id, 'label')
       }, rest);
     };
     var getFormProps = function getFormProps(providedProps) {
@@ -2743,22 +2785,25 @@
         }
         store.dispatch('focus', null);
       }
-      var _ref2 = providedProps || {};
-        _ref2.inputElement;
-        var _ref2$maxLength = _ref2.maxLength,
-        maxLength = _ref2$maxLength === void 0 ? 512 : _ref2$maxLength,
-        rest = _objectWithoutProperties$1(_ref2, _excluded4);
+      var _ref3 = providedProps || {};
+        _ref3.inputElement;
+        var _ref3$maxLength = _ref3.maxLength,
+        maxLength = _ref3$maxLength === void 0 ? 512 : _ref3$maxLength,
+        rest = _objectWithoutProperties$1(_ref3, _excluded4);
       var activeItem = getActiveItem(store.getState());
       var userAgent = ((_props$environment$na = props.environment.navigator) === null || _props$environment$na === void 0 ? void 0 : _props$environment$na.userAgent) || '';
       var shouldFallbackKeyHint = isSamsung(userAgent);
       var enterKeyHint = props.enterKeyHint || (activeItem !== null && activeItem !== void 0 && activeItem.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search');
       return _objectSpread$6({
         'aria-autocomplete': 'both',
-        'aria-activedescendant': store.getState().isOpen && store.getState().activeItemId !== null ? "".concat(props.id, "-item-").concat(store.getState().activeItemId) : undefined,
-        'aria-controls': store.getState().isOpen ? "".concat(props.id, "-list") : undefined,
-        'aria-labelledby': "".concat(props.id, "-label"),
+        'aria-activedescendant': store.getState().isOpen && store.getState().activeItemId !== null ? getAutocompleteElementId(props.id, "item-".concat(store.getState().activeItemId), activeItem === null || activeItem === void 0 ? void 0 : activeItem.source) : undefined,
+        'aria-controls': store.getState().isOpen ? store.getState().collections.map(function (_ref4) {
+          var source = _ref4.source;
+          return getAutocompleteElementId(props.id, 'list', source);
+        }).join(' ') : undefined,
+        'aria-labelledby': getAutocompleteElementId(props.id, 'label'),
         value: store.getState().completion || store.getState().query,
-        id: "".concat(props.id, "-input"),
+        id: getAutocompleteElementId(props.id, 'input'),
         autoComplete: 'off',
         autoCorrect: 'off',
         autoCapitalize: 'off',
@@ -2804,26 +2849,20 @@
         }
       }, rest);
     };
-    var getAutocompleteId = function getAutocompleteId(instanceId, sourceId) {
-      return typeof sourceId !== 'undefined' ? "".concat(instanceId, "-").concat(sourceId) : instanceId;
-    };
-    var getLabelProps = function getLabelProps(providedProps) {
-      var _ref3 = providedProps || {},
-        sourceIndex = _ref3.sourceIndex,
-        rest = _objectWithoutProperties$1(_ref3, _excluded5);
+    var getLabelProps = function getLabelProps(rest) {
       return _objectSpread$6({
-        htmlFor: "".concat(getAutocompleteId(props.id, sourceIndex), "-input"),
-        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-label")
+        htmlFor: getAutocompleteElementId(props.id, 'input'),
+        id: getAutocompleteElementId(props.id, 'label')
       }, rest);
     };
     var getListProps = function getListProps(providedProps) {
-      var _ref4 = providedProps || {},
-        sourceIndex = _ref4.sourceIndex,
-        rest = _objectWithoutProperties$1(_ref4, _excluded6);
+      var _ref5 = providedProps || {},
+        source = _ref5.source,
+        rest = _objectWithoutProperties$1(_ref5, _excluded5);
       return _objectSpread$6({
         role: 'listbox',
-        'aria-labelledby': "".concat(getAutocompleteId(props.id, sourceIndex), "-label"),
-        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-list")
+        'aria-labelledby': getAutocompleteElementId(props.id, 'label'),
+        id: getAutocompleteElementId(props.id, 'list', source)
       }, rest);
     };
     var getPanelProps = function getPanelProps(rest) {
@@ -2842,10 +2881,9 @@
     var getItemProps = function getItemProps(providedProps) {
       var item = providedProps.item,
         source = providedProps.source,
-        sourceIndex = providedProps.sourceIndex,
-        rest = _objectWithoutProperties$1(providedProps, _excluded7);
+        rest = _objectWithoutProperties$1(providedProps, _excluded6);
       return _objectSpread$6({
-        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-item-").concat(item.__autocomplete_id),
+        id: getAutocompleteElementId(props.id, "item-".concat(item.__autocomplete_id), source),
         role: 'option',
         'aria-selected': store.getState().activeItemId === item.__autocomplete_id,
         onMouseMove: function onMouseMove(event) {
@@ -3295,6 +3333,7 @@
       navigator: props.navigator
     }, setters));
     function onStoreStateChange(_ref) {
+      var _state$context, _state$context$algoli;
       var prevState = _ref.prevState,
         state = _ref.state;
       props.onStateChange(_objectSpread$3({
@@ -3303,6 +3342,13 @@
         refresh: refresh,
         navigator: props.navigator
       }, setters));
+      if (!isAlgoliaInsightsPluginEnabled() && (_state$context = state.context) !== null && _state$context !== void 0 && (_state$context$algoli = _state$context.algoliaInsightsPlugin) !== null && _state$context$algoli !== void 0 && _state$context$algoli.__automaticInsights && props.insights !== false) {
+        var plugin = createAlgoliaInsightsPlugin({
+          __autocomplete_clickAnalytics: false
+        });
+        props.plugins.push(plugin);
+        subscribePlugins([plugin]);
+      }
     }
     function refresh() {
       return onInput(_objectSpread$3({
@@ -3317,34 +3363,40 @@
         store: store
       }, setters));
     }
-    if (options.insights && !props.plugins.some(function (plugin) {
-      return plugin.name === 'aa.algoliaInsightsPlugin';
-    })) {
-      var insightsParams = typeof options.insights === 'boolean' ? {} : options.insights;
+    function subscribePlugins(plugins) {
+      plugins.forEach(function (plugin) {
+        var _plugin$subscribe;
+        return (_plugin$subscribe = plugin.subscribe) === null || _plugin$subscribe === void 0 ? void 0 : _plugin$subscribe.call(plugin, _objectSpread$3(_objectSpread$3({}, setters), {}, {
+          navigator: props.navigator,
+          refresh: refresh,
+          onSelect: function onSelect(fn) {
+            subscribers.push({
+              onSelect: fn
+            });
+          },
+          onActive: function onActive(fn) {
+            subscribers.push({
+              onActive: fn
+            });
+          },
+          onResolve: function onResolve(fn) {
+            subscribers.push({
+              onResolve: fn
+            });
+          }
+        }));
+      });
+    }
+    function isAlgoliaInsightsPluginEnabled() {
+      return props.plugins.some(function (plugin) {
+        return plugin.name === 'aa.algoliaInsightsPlugin';
+      });
+    }
+    if (props.insights && !isAlgoliaInsightsPluginEnabled()) {
+      var insightsParams = typeof props.insights === 'boolean' ? {} : props.insights;
       props.plugins.push(createAlgoliaInsightsPlugin(insightsParams));
     }
-    props.plugins.forEach(function (plugin) {
-      var _plugin$subscribe;
-      return (_plugin$subscribe = plugin.subscribe) === null || _plugin$subscribe === void 0 ? void 0 : _plugin$subscribe.call(plugin, _objectSpread$3(_objectSpread$3({}, setters), {}, {
-        navigator: props.navigator,
-        refresh: refresh,
-        onSelect: function onSelect(fn) {
-          subscribers.push({
-            onSelect: fn
-          });
-        },
-        onActive: function onActive(fn) {
-          subscribers.push({
-            onActive: fn
-          });
-        },
-        onResolve: function onResolve(fn) {
-          subscribers.push({
-            onResolve: fn
-          });
-        }
-      }));
-    });
+    subscribePlugins(props.plugins);
     injectMetadata({
       metadata: getMetadata({
         plugins: props.plugins,
@@ -4705,13 +4757,12 @@
       }, propGetters.getListProps(_objectSpread2({
         state: state,
         props: autocomplete.getListProps({
-          sourceIndex: sourceIndex
+          source: source
         })
       }, autocompleteScopeApi))), items.map(function (item) {
         var itemProps = autocomplete.getItemProps({
           item: item,
-          source: source,
-          sourceIndex: sourceIndex
+          source: source
         });
         return renderer.createElement("li", _extends({
           key: itemProps.id,