instantsearch.js 4.75.7 → 4.77.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.75.7 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.77.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) :
@@ -17,62 +17,76 @@
     return text.toString().charAt(0).toUpperCase() + text.toString().slice(1);
   }
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-    if (null != _i) {
-      var _s,
-        _e,
-        _x,
-        _r,
-        _arr = [],
-        _n = !0,
-        _d = !1;
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
       try {
-        if (_x = (_i = _i.call(arr)).next, 0 === i) {
-          if (Object(_i) !== _i) return;
-          _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-      } catch (err) {
-        _d = !0, _e = err;
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
       } finally {
         try {
-          if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
         } finally {
-          if (_d) throw _e;
+          if (o) throw n;
         }
       }
-      return _arr;
+      return a;
     }
   }
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
-  function _typeof(obj) {
+  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 _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+  }
+  function _typeof(o) {
     "@babel/helpers - typeof";
 
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
+    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 _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -307,20 +321,6 @@
       }
     };
   }
-  function _toPrimitive(input, hint) {
-    if (typeof input !== "object" || input === null) return input;
-    var prim = input[Symbol.toPrimitive];
-    if (prim !== undefined) {
-      var res = prim.call(input, hint || "default");
-      if (typeof res !== "object") return res;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (hint === "string" ? String : Number)(input);
-  }
-  function _toPropertyKey(arg) {
-    var key = _toPrimitive(arg, "string");
-    return typeof key === "symbol" ? key : String(key);
-  }
 
   function noop() {}
 
@@ -1182,9 +1182,9 @@
       var queryParameters = transporter.queryParameters || transporter.baseQueryParameters;
       var APP_ID = 'x-algolia-application-id';
       var API_KEY = 'x-algolia-api-key';
-      var appId = headers[APP_ID] || queryParameters[APP_ID];
-      var apiKey = headers[API_KEY] || queryParameters[API_KEY];
-      return [appId, apiKey];
+      var _appId = headers[APP_ID] || queryParameters[APP_ID];
+      var _apiKey = headers[API_KEY] || queryParameters[API_KEY];
+      return [_appId, _apiKey];
     } else {
       // searchClient v3
       return [searchClient.applicationID, searchClient.apiKey];
@@ -1479,16 +1479,19 @@
     if ('transporter' in client && !client._cacheHydrated) {
       client._cacheHydrated = true;
       var baseMethod = client.search.bind(client);
-      // @ts-ignore wanting type checks for v3 on this would make this too complex
       client.search = function (requests) {
         for (var _len = arguments.length, methodArgs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           methodArgs[_key - 1] = arguments[_key];
         }
-        var requestsWithSerializedParams = requests.map(function (request) {
+        var requestsWithSerializedParams = Array.isArray(requests) ?
+        // search client
+        requests.map(function (request) {
           return _objectSpread2(_objectSpread2({}, request), {}, {
             params: serializeQueryParameters(request.params)
           });
-        });
+        }) :
+        // composition client
+        serializeQueryParameters(requests.requestBody.params);
         return client.transporter.responsesCache.get({
           method: 'search',
           args: [requestsWithSerializedParams].concat(methodArgs)
@@ -2697,6 +2700,24 @@
       return queries;
     },
 
+    /**
+     * Get all the queries to send to the client, those queries can used directly
+     * with the Algolia client.
+     * @private
+     * @param  {SearchParameters} state The state from which to get the queries
+     * @return {object[]} The queries
+     */
+    _getCompositionQueries: function getQueries(state) {
+      return [
+        {
+          compositionID: state.index,
+          requestBody: {
+            params: requestBuilder._getCompositionHitsSearchParams(state),
+          },
+        },
+      ];
+    },
+
     /**
      * Build search parameters used to fetch hits
      * @private
@@ -2733,6 +2754,53 @@
       return sortObject(merge_1({}, state.getQueryParams(), additionalParams));
     },
 
+    /**
+     * Build search parameters used to fetch hits
+     * @private
+     * @param  {SearchParameters} state The state from which to get the queries
+     * @return {object.<string, any>} The search parameters for hits
+     */
+    _getCompositionHitsSearchParams: function (state) {
+      var facets = state.facets
+        .concat(
+          state.disjunctiveFacets.map(function (value) {
+            return 'disjunctive(' + value + ')';
+          })
+        )
+        .concat(requestBuilder._getHitsHierarchicalFacetsAttributes(state))
+        .sort();
+
+      var facetFilters = requestBuilder._getFacetFilters(state);
+      var numericFilters = requestBuilder._getNumericFilters(state);
+      var tagFilters = requestBuilder._getTagFilters(state);
+      var additionalParams = {};
+
+      if (facets.length > 0) {
+        additionalParams.facets = facets.indexOf('*') > -1 ? ['*'] : facets;
+      }
+
+      if (tagFilters.length > 0) {
+        additionalParams.tagFilters = tagFilters;
+      }
+
+      if (facetFilters.length > 0) {
+        additionalParams.facetFilters = facetFilters;
+      }
+
+      if (numericFilters.length > 0) {
+        additionalParams.numericFilters = numericFilters;
+      }
+
+      var params = state.getQueryParams();
+
+      delete params.highlightPreTag;
+      delete params.highlightPostTag;
+      // not a valid search parameter, it is handled in _getCompositionQueries
+      delete params.index;
+
+      return sortObject(merge_1({}, params, additionalParams));
+    },
+
     /**
      * Build search parameters used to fetch a disjunctive facet
      * @private
@@ -6487,7 +6555,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version = '3.22.6';
+  var version = '3.23.0';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -6654,6 +6722,10 @@
     return this;
   };
 
+  AlgoliaSearchHelper.prototype.searchWithComposition = function () {
+    this._runComposition({ onlyWithDerivedHelpers: true });
+    return this;
+  };
   /**
    * Sends the recommendation queries set in the state. When the method is
    * called, it triggers a `fetch` event. The results will be available through
@@ -6943,6 +7015,81 @@
     );
   };
 
+  /**
+   * Search for facet values using the Composition API & based on a query and the name of a faceted attribute.
+   * This triggers a search and will return a promise. On top of using the query, it also sends
+   * the parameters from the state so that the search is narrowed down to only the possible values.
+   *
+   * See the description of [FacetSearchResult](reference.html#FacetSearchResult)
+   * @param {string} facet the name of the faceted attribute
+   * @param {string} query the string query for the search
+   * @param {number} [maxFacetHits] the maximum number values returned. Should be > 0 and <= 100
+   * @param {object} [userState] the set of custom parameters to use on top of the current state. Setting a property to `undefined` removes
+   * it in the generated query.
+   * @return {promise.<FacetSearchResult>} the results of the search
+   */
+  AlgoliaSearchHelper.prototype.searchForCompositionFacetValues = function (
+    facet,
+    query,
+    maxFacetHits,
+    userState
+  ) {
+    if (typeof this.client.searchForFacetValues !== 'function') {
+      throw new Error(
+        'search for facet values (searchable) was called, but this client does not have a function client.searchForFacetValues'
+      );
+    }
+
+    var state = this.state.setQueryParameters(userState || {});
+    var isDisjunctive = state.isDisjunctiveFacet(facet);
+
+    this._currentNbQueries++;
+    // eslint-disable-next-line consistent-this
+    var self = this;
+    var searchForFacetValuesPromise;
+
+    searchForFacetValuesPromise = this.client.searchForFacetValues({
+      compositionID: state.index,
+      facetName: facet,
+      searchForFacetValuesRequest: {
+        params: {
+          query: query,
+          maxFacetHits: maxFacetHits,
+          searchQuery: requestBuilder_1._getCompositionHitsSearchParams(state),
+        },
+      },
+    });
+
+    this.emit('searchForFacetValues', {
+      state: state,
+      facet: facet,
+      query: query,
+    });
+
+    return searchForFacetValuesPromise.then(
+      function addIsRefined(content) {
+        self._currentNbQueries--;
+        if (self._currentNbQueries === 0) self.emit('searchQueueEmpty');
+
+        content = content.results[0];
+
+        content.facetHits.forEach(function (f) {
+          f.escapedValue = escapeFacetValue$4(f.value);
+          f.isRefined = isDisjunctive
+            ? state.isDisjunctiveFacetRefined(facet, f.escapedValue)
+            : state.isFacetRefined(facet, f.escapedValue);
+        });
+
+        return content;
+      },
+      function (e) {
+        self._currentNbQueries--;
+        if (self._currentNbQueries === 0) self.emit('searchQueueEmpty');
+        throw e;
+      }
+    );
+  };
+
   /**
    * Sets the text query used for the search.
    *
@@ -8064,6 +8211,71 @@
     return undefined;
   };
 
+  /**
+   * Perform the underlying queries
+   * @private
+   * @param {boolean} [options.onlyWithDerivedHelpers=false] if true, only the derived helpers will be queried
+   * @return {undefined} does not return anything
+   * @fires search
+   * @fires result
+   * @fires error
+   */
+  AlgoliaSearchHelper.prototype._runComposition = function () {
+    var state = this.state;
+    var states = [];
+    var mainQueries = [];
+
+    var derivedQueries = this.derivedHelpers.map(function (derivedHelper) {
+      var derivedState = derivedHelper.getModifiedState(state);
+      var derivedStateQueries =
+        requestBuilder_1._getCompositionQueries(derivedState);
+
+      states.push({
+        state: derivedState,
+        queriesCount: derivedStateQueries.length,
+        helper: derivedHelper,
+      });
+
+      derivedHelper.emit('search', {
+        state: derivedState,
+        results: derivedHelper.lastResults,
+      });
+
+      return derivedStateQueries;
+    });
+
+    var queries = Array.prototype.concat.apply(mainQueries, derivedQueries);
+
+    var queryId = this._queryId++;
+    this._currentNbQueries++;
+
+    if (!queries.length) {
+      return Promise.resolve({ results: [] }).then(
+        this._dispatchAlgoliaResponse.bind(this, states, queryId)
+      );
+    }
+
+    if (queries.length > 1) {
+      throw new Error('Only one query is allowed when using a composition.');
+    }
+
+    var query = queries[0];
+
+    try {
+      this.client
+        .search(query)
+        .then(this._dispatchAlgoliaResponse.bind(this, states, queryId))
+        .catch(this._dispatchAlgoliaError.bind(this, queryId));
+    } catch (error) {
+      // If we reach this part, we're in an internal error state
+      this.emit('error', {
+        error: error,
+      });
+    }
+
+    return undefined;
+  };
+
   AlgoliaSearchHelper.prototype._recommend = function () {
     var searchState = this.state;
     var recommendState = this.recommendState;
@@ -11353,6 +11565,7 @@
       if (!objectIDs || objectIDs.length === 0) {
         throw new Error(withUsage$f('The `objectIDs` option is required.'));
       }
+      var sendEvent;
       return {
         dependsOn: 'recommend',
         $$type: 'ais.relatedProducts',
@@ -11371,21 +11584,37 @@
           return renderState;
         },
         getWidgetRenderState: function getWidgetRenderState(_ref2) {
-          var results = _ref2.results;
+          var results = _ref2.results,
+            helper = _ref2.helper,
+            instantSearchInstance = _ref2.instantSearchInstance;
+          if (!sendEvent) {
+            sendEvent = createSendEventForHits({
+              instantSearchInstance: instantSearchInstance,
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
+              widgetType: this.$$type
+            });
+          }
           if (results === null || results === undefined) {
             return {
               items: [],
-              widgetParams: widgetParams
+              widgetParams: widgetParams,
+              sendEvent: sendEvent
             };
           }
           if (escapeHTML && results.hits.length > 0) {
             results.hits = escapeHits(results.hits);
           }
+          var itemsWithAbsolutePosition = addAbsolutePosition(results.hits, 0, 1);
+          var itemsWithAbsolutePositionAndQueryID = addQueryID(itemsWithAbsolutePosition, results.queryID);
+          var transformedItems = transformItems(itemsWithAbsolutePositionAndQueryID, {
+            results: results
+          });
           return {
-            items: transformItems(results.hits, {
-              results: results
-            }),
-            widgetParams: widgetParams
+            items: transformedItems,
+            widgetParams: widgetParams,
+            sendEvent: sendEvent
           };
         },
         dispose: function dispose(_ref3) {
@@ -12262,6 +12491,7 @@
       if (facetName && !facetValue || !facetName && facetValue) {
         throw new Error(withUsage$l("When you provide facetName (received type ".concat(getObjectType(facetName), "), you must also provide facetValue (received type ").concat(getObjectType(facetValue), ").")));
       }
+      var sendEvent;
       return {
         dependsOn: 'recommend',
         $$type: 'ais.trendingItems',
@@ -12280,21 +12510,37 @@
           return renderState;
         },
         getWidgetRenderState: function getWidgetRenderState(_ref2) {
-          var results = _ref2.results;
+          var results = _ref2.results,
+            helper = _ref2.helper,
+            instantSearchInstance = _ref2.instantSearchInstance;
+          if (!sendEvent) {
+            sendEvent = createSendEventForHits({
+              instantSearchInstance: instantSearchInstance,
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
+              widgetType: this.$$type
+            });
+          }
           if (results === null || results === undefined) {
             return {
               items: [],
-              widgetParams: widgetParams
+              widgetParams: widgetParams,
+              sendEvent: sendEvent
             };
           }
           if (escapeHTML && results.hits.length > 0) {
             results.hits = escapeHits(results.hits);
           }
+          var itemsWithAbsolutePosition = addAbsolutePosition(results.hits, 0, 1);
+          var itemsWithAbsolutePositionAndQueryID = addQueryID(itemsWithAbsolutePosition, results.queryID);
+          var transformedItems = transformItems(itemsWithAbsolutePositionAndQueryID, {
+            results: results
+          });
           return {
-            items: transformItems(results.hits, {
-              results: results
-            }),
-            widgetParams: widgetParams
+            items: transformedItems,
+            widgetParams: widgetParams,
+            sendEvent: sendEvent
           };
         },
         dispose: function dispose(_ref3) {
@@ -13347,6 +13593,7 @@
       if (!objectIDs || objectIDs.length === 0) {
         throw new Error(withUsage$s('The `objectIDs` option is required.'));
       }
+      var sendEvent;
       return {
         dependsOn: 'recommend',
         $$type: 'ais.frequentlyBoughtTogether',
@@ -13365,22 +13612,37 @@
           return renderState;
         },
         getWidgetRenderState: function getWidgetRenderState(_ref2) {
-          var results = _ref2.results;
+          var results = _ref2.results,
+            helper = _ref2.helper,
+            instantSearchInstance = _ref2.instantSearchInstance;
+          if (!sendEvent) {
+            sendEvent = createSendEventForHits({
+              instantSearchInstance: instantSearchInstance,
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
+              widgetType: this.$$type
+            });
+          }
           if (results === null || results === undefined) {
             return {
               items: [],
-              widgetParams: widgetParams
+              widgetParams: widgetParams,
+              sendEvent: sendEvent
             };
           }
           if (escapeHTML && results.hits.length > 0) {
             results.hits = escapeHits(results.hits);
           }
-          var transformedItems = transformItems(results.hits, {
+          var itemsWithAbsolutePosition = addAbsolutePosition(results.hits, 0, 1);
+          var itemsWithAbsolutePositionAndQueryID = addQueryID(itemsWithAbsolutePosition, results.queryID);
+          var transformedItems = transformItems(itemsWithAbsolutePositionAndQueryID, {
             results: results
           });
           return {
             items: transformedItems,
-            widgetParams: widgetParams
+            widgetParams: widgetParams,
+            sendEvent: sendEvent
           };
         },
         dispose: function dispose(_ref3) {
@@ -13427,6 +13689,7 @@
       if (!objectIDs || objectIDs.length === 0) {
         throw new Error(withUsage$t('The `objectIDs` option is required.'));
       }
+      var sendEvent;
       return {
         dependsOn: 'recommend',
         $$type: 'ais.lookingSimilar',
@@ -13445,21 +13708,37 @@
           return renderState;
         },
         getWidgetRenderState: function getWidgetRenderState(_ref2) {
-          var results = _ref2.results;
+          var results = _ref2.results,
+            helper = _ref2.helper,
+            instantSearchInstance = _ref2.instantSearchInstance;
+          if (!sendEvent) {
+            sendEvent = createSendEventForHits({
+              instantSearchInstance: instantSearchInstance,
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
+              widgetType: this.$$type
+            });
+          }
           if (results === null || results === undefined) {
             return {
               items: [],
-              widgetParams: widgetParams
+              widgetParams: widgetParams,
+              sendEvent: sendEvent
             };
           }
           if (escapeHTML && results.hits.length > 0) {
             results.hits = escapeHits(results.hits);
           }
+          var itemsWithAbsolutePosition = addAbsolutePosition(results.hits, 0, 1);
+          var itemsWithAbsolutePositionAndQueryID = addQueryID(itemsWithAbsolutePosition, results.queryID);
+          var transformedItems = transformItems(itemsWithAbsolutePositionAndQueryID, {
+            results: results
+          });
           return {
-            items: transformItems(results.hits, {
-              results: results
-            }),
-            widgetParams: widgetParams
+            items: transformedItems,
+            widgetParams: widgetParams,
+            sendEvent: sendEvent
           };
         },
         dispose: function dispose(_ref3) {
@@ -16101,7 +16380,7 @@
     };
   }
 
-  var version$1 = '4.75.7';
+  var version$1 = '4.77.0';
 
   var withUsage$v = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -16140,6 +16419,7 @@
       // prevent `render` event listening from causing a warning
       _defineProperty(_assertThisInitialized(_this), "client", void 0);
       _defineProperty(_assertThisInitialized(_this), "indexName", void 0);
+      _defineProperty(_assertThisInitialized(_this), "compositionID", void 0);
       _defineProperty(_assertThisInitialized(_this), "insightsClient", void 0);
       _defineProperty(_assertThisInitialized(_this), "onStateChange", null);
       _defineProperty(_assertThisInitialized(_this), "future", void 0);
@@ -16203,6 +16483,7 @@
       _this.setMaxListeners(100);
       var _options$indexName = options.indexName,
         indexName = _options$indexName === void 0 ? '' : _options$indexName,
+        compositionID = options.compositionID,
         numberLocale = options.numberLocale,
         _options$initialUiSta = options.initialUiState,
         initialUiState = _options$initialUiSta === void 0 ? {} : _options$initialUiSta,
@@ -16247,10 +16528,13 @@
       _this.future = future;
       _this.insightsClient = insightsClient;
       _this.indexName = indexName;
+      _this.compositionID = compositionID;
       _this.helper = null;
       _this.mainHelper = null;
       _this.mainIndex = index({
-        indexName: indexName
+        // we use an index widget to render compositions
+        // this only works because there's only one composition index allow for now
+        indexName: _this.compositionID || _this.indexName
       });
       _this.onStateChange = onStateChange;
       _this.started = false;
@@ -16400,6 +16684,9 @@
         })) {
           throw new Error(withUsage$v('The widget definition expects a `render` and/or an `init` method.'));
         }
+        if (this.compositionID && widgets.some(isIndexWidget)) {
+          throw new Error(withUsage$v('The `index` widget cannot be used with a composition-based InstantSearch implementation.'));
+        }
         this.mainIndex.addWidgets(widgets);
         return this;
       }
@@ -16459,17 +16746,24 @@
         var mainHelper = this.mainHelper || algoliasearchHelper_1(this.client, this.indexName, undefined, {
           persistHierarchicalRootCount: this.future.persistHierarchicalRootCount
         });
+        if (this.compositionID) {
+          mainHelper.searchForFacetValues = mainHelper.searchForCompositionFacetValues.bind(mainHelper);
+        }
         mainHelper.search = function () {
           _this3.status = 'loading';
           _this3.scheduleRender(false);
-           _warning(Boolean(_this3.indexName) || _this3.mainIndex.getWidgets().some(isIndexWidget), 'No indexName provided, nor an explicit index widget in the widgets tree. This is required to be able to display results.') ;
+           _warning(Boolean(_this3.indexName) || Boolean(_this3.compositionID) || _this3.mainIndex.getWidgets().some(isIndexWidget), 'No indexName provided, nor an explicit index widget in the widgets tree. This is required to be able to display results.') ;
 
           // This solution allows us to keep the exact same API for the users but
           // under the hood, we have a different implementation. It should be
           // completely transparent for the rest of the codebase. Only this module
           // is impacted.
           if (_this3._hasSearchWidget) {
-            mainHelper.searchOnlyWithDerivedHelpers();
+            if (_this3.compositionID) {
+              mainHelper.searchWithComposition();
+            } else {
+              mainHelper.searchOnlyWithDerivedHelpers();
+            }
           }
           if (_this3._hasRecommendWidget) {
             mainHelper.recommend();
@@ -16946,8 +17240,12 @@
         return createElement("li", {
           key: item.objectID,
           className: classNames.item,
-          onClick: sendEvent,
-          onAuxClick: sendEvent
+          onClick: function onClick() {
+            sendEvent('click:internal', item, 'Item Clicked');
+          },
+          onAuxClick: function onAuxClick() {
+            sendEvent('click:internal', item, 'Item Clicked');
+          }
         }, createElement(ItemComponent, {
           item: item
         }));
@@ -16955,27 +17253,27 @@
     };
   }
 
-  var _excluded$9 = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations"];
-  function ownKeys$1(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  var _excluded$9 = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations", "sendEvent"];
+  function ownKeys$1(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
   var lastCarouselId = 0;
   function generateCarouselId() {
@@ -17030,6 +17328,7 @@
         NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
         items = userProps.items,
         userTranslations = userProps.translations,
+        sendEvent = userProps.sendEvent,
         props = _objectWithoutProperties$1(userProps, _excluded$9);
       var translations = _objectSpread({
         listLabel: 'Items',
@@ -17104,7 +17403,13 @@
           key: item.objectID,
           className: cx(cssClasses.item),
           "aria-roledescription": "slide",
-          "aria-label": "".concat(index + 1, " of ").concat(items.length)
+          "aria-label": "".concat(index + 1, " of ").concat(items.length),
+          onClick: function onClick() {
+            sendEvent('click:internal', item, 'Item Clicked');
+          },
+          onAuxClick: function onAuxClick() {
+            sendEvent('click:internal', item, 'Item Clicked');
+          }
         }, createElement(ItemComponent, {
           item: item
         }));
@@ -17125,26 +17430,26 @@
   }
 
   var _excluded$a = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$2(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  function ownKeys$2(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread$1(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread$1(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
   function createFrequentlyBoughtTogetherComponent(_ref) {
     var createElement = _ref.createElement,
@@ -17338,26 +17643,26 @@
   }
 
   var _excluded$d = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$3(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  function ownKeys$3(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread$2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread$2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
   function createLookingSimilarComponent(_ref) {
     var createElement = _ref.createElement,
@@ -17423,26 +17728,26 @@
   }
 
   var _excluded$e = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$4(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  function ownKeys$4(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread$3(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread$3(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
   function createRelatedProductsComponent(_ref) {
     var createElement = _ref.createElement,
@@ -17508,26 +17813,26 @@
   }
 
   var _excluded$f = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
-  function ownKeys$5(object, enumerableOnly) {
-    var keys = Object.keys(object);
+  function ownKeys$5(e, r) {
+    var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread$4(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread$4(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
-    return target;
+    return e;
   }
   function createTrendingItemsComponent(_ref) {
     var createElement = _ref.createElement,
@@ -17616,11 +17921,14 @@
       var items = _ref2.items,
         widgetTemplates = _ref2.templates,
         _ref2$cssClasses = _ref2.cssClasses,
-        widgetCssClasses = _ref2$cssClasses === void 0 ? {} : _ref2$cssClasses;
+        widgetCssClasses = _ref2$cssClasses === void 0 ? {} : _ref2$cssClasses,
+        _ref2$sendEvent = _ref2.sendEvent,
+        sendEvent = _ref2$sendEvent === void 0 ? function () {} : _ref2$sendEvent;
       var previous = templates.previous,
         next = templates.next;
       return h(CarouselWithRefs, {
         items: items,
+        sendEvent: sendEvent,
         itemComponent: widgetTemplates.item,
         previousIconComponent: previous ? function () {
           return previous({
@@ -22348,7 +22656,8 @@
     return function renderer(_ref2, isFirstRendering) {
       var items = _ref2.items,
         results = _ref2.results,
-        instantSearchInstance = _ref2.instantSearchInstance;
+        instantSearchInstance = _ref2.instantSearchInstance,
+        sendEvent = _ref2.sendEvent;
       if (isFirstRendering) {
         renderState.templateProps = prepareTemplateProps({
           defaultTemplates: {},
@@ -22372,7 +22681,8 @@
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
-          data: item
+          data: item,
+          sendEvent: sendEvent
         }));
       } : undefined;
       var emptyComponent = templates.empty ? function () {
@@ -22387,6 +22697,7 @@
           templateKey: "layout",
           rootTagName: "fragment",
           data: {
+            sendEvent: sendEvent,
             items: data.items,
             templates: {
               item: templates.item ? function (_ref4) {
@@ -22394,7 +22705,8 @@
                 return h(Template, _extends({}, renderState.templateProps, {
                   templateKey: "item",
                   rootTagName: "fragment",
-                  data: item
+                  data: item,
+                  sendEvent: sendEvent
                 }));
               } : undefined
             },
@@ -22402,12 +22714,13 @@
               list: data.classNames.list,
               item: data.classNames.item
             }
-          }
+          },
+          sendEvent: sendEvent
         }));
       } : undefined;
       P(h(RelatedProducts, {
         items: items,
-        sendEvent: function sendEvent() {},
+        sendEvent: sendEvent,
         classNames: cssClasses,
         headerComponent: headerComponent,
         itemComponent: itemComponent,
@@ -24528,7 +24841,8 @@
     return function renderer(_ref2, isFirstRendering) {
       var items = _ref2.items,
         results = _ref2.results,
-        instantSearchInstance = _ref2.instantSearchInstance;
+        instantSearchInstance = _ref2.instantSearchInstance,
+        sendEvent = _ref2.sendEvent;
       if (isFirstRendering) {
         renderState.templateProps = prepareTemplateProps({
           defaultTemplates: {},
@@ -24552,7 +24866,8 @@
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
-          data: item
+          data: item,
+          sendEvent: sendEvent
         }));
       } : undefined;
       var emptyComponent = templates.empty ? function () {
@@ -24567,6 +24882,7 @@
           templateKey: "layout",
           rootTagName: "fragment",
           data: {
+            sendEvent: sendEvent,
             items: data.items,
             templates: {
               item: templates.item ? function (_ref4) {
@@ -24574,7 +24890,8 @@
                 return h(Template, _extends({}, renderState.templateProps, {
                   templateKey: "item",
                   rootTagName: "fragment",
-                  data: item
+                  data: item,
+                  sendEvent: sendEvent
                 }));
               } : undefined
             },
@@ -24582,12 +24899,13 @@
               list: data.classNames.list,
               item: data.classNames.item
             }
-          }
+          },
+          sendEvent: sendEvent
         }));
       } : undefined;
       P(h(TrendingItems, {
         items: items,
-        sendEvent: function sendEvent() {},
+        sendEvent: sendEvent,
         classNames: cssClasses,
         headerComponent: headerComponent,
         itemComponent: itemComponent,
@@ -24860,7 +25178,8 @@
     return function (_ref2, isFirstRendering) {
       var items = _ref2.items,
         results = _ref2.results,
-        instantSearchInstance = _ref2.instantSearchInstance;
+        instantSearchInstance = _ref2.instantSearchInstance,
+        sendEvent = _ref2.sendEvent;
       if (isFirstRendering) {
         renderState.templateProps = prepareTemplateProps({
           defaultTemplates: {},
@@ -24884,7 +25203,8 @@
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
-          data: item
+          data: item,
+          sendEvent: sendEvent
         }));
       } : undefined;
       var emptyComponent = templates.empty ? function () {
@@ -24899,6 +25219,7 @@
           templateKey: "layout",
           rootTagName: "fragment",
           data: {
+            sendEvent: sendEvent,
             items: data.items,
             templates: {
               item: templates.item ? function (_ref4) {
@@ -24906,7 +25227,8 @@
                 return h(Template, _extends({}, renderState.templateProps, {
                   templateKey: "item",
                   rootTagName: "fragment",
-                  data: item
+                  data: item,
+                  sendEvent: sendEvent
                 }));
               } : undefined
             },
@@ -24914,14 +25236,15 @@
               list: data.classNames.list,
               item: data.classNames.item
             }
-          }
+          },
+          sendEvent: sendEvent
         }));
       } : undefined;
       P(h(FrequentlyBoughtTogether, {
         items: items,
         headerComponent: headerComponent,
         itemComponent: itemComponent,
-        sendEvent: function sendEvent() {},
+        sendEvent: sendEvent,
         classNames: cssClasses,
         emptyComponent: emptyComponent,
         layout: layoutComponent,
@@ -24982,7 +25305,8 @@
     return function (_ref2, isFirstRendering) {
       var items = _ref2.items,
         results = _ref2.results,
-        instantSearchInstance = _ref2.instantSearchInstance;
+        instantSearchInstance = _ref2.instantSearchInstance,
+        sendEvent = _ref2.sendEvent;
       if (isFirstRendering) {
         renderState.templateProps = prepareTemplateProps({
           defaultTemplates: {},
@@ -25006,7 +25330,8 @@
         return h(Template, _extends({}, renderState.templateProps, {
           templateKey: "item",
           rootTagName: "fragment",
-          data: item
+          data: item,
+          sendEvent: sendEvent
         }));
       } : undefined;
       var emptyComponent = templates.empty ? function () {
@@ -25021,6 +25346,7 @@
           templateKey: "layout",
           rootTagName: "fragment",
           data: {
+            sendEvent: sendEvent,
             items: data.items,
             templates: {
               item: templates.item ? function (_ref4) {
@@ -25028,7 +25354,8 @@
                 return h(Template, _extends({}, renderState.templateProps, {
                   templateKey: "item",
                   rootTagName: "fragment",
-                  data: item
+                  data: item,
+                  sendEvent: sendEvent
                 }));
               } : undefined
             },
@@ -25036,7 +25363,8 @@
               list: data.classNames.list,
               item: data.classNames.item
             }
-          }
+          },
+          sendEvent: sendEvent
         }));
       } : undefined;
       P(h(LookingSimilar, {