instantsearch.js 4.54.0 → 4.55.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.54.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.55.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -748,10 +748,13 @@
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      var eventType = args[0],
-        facetValue = args[1],
+      var facetValue = args[1],
         _args$ = args[2],
         eventName = _args$ === void 0 ? 'Filter Applied' : _args$;
+      var _args$0$split = args[0].split(':'),
+        _args$0$split2 = _slicedToArray(_args$0$split, 2),
+        eventType = _args$0$split2[0],
+        eventModifier = _args$0$split2[1];
       var attribute = typeof attr === 'string' ? attr : attr(facetValue);
       if (args.length === 1 && _typeof(args[0]) === 'object') {
         instantSearchInstance.sendEventToInsights(args[0]);
@@ -762,6 +765,7 @@
             insightsMethod: 'clickedFilters',
             widgetType: widgetType,
             eventType: eventType,
+            eventModifier: eventModifier,
             payload: {
               eventName: eventName,
               index: helper.getIndex(),
@@ -792,7 +796,7 @@
     }
     return chunks;
   }
-  var buildPayloads = function buildPayloads(_ref) {
+  function _buildEventPayloadsForHits(_ref) {
     var index = _ref.index,
       widgetType = _ref.widgetType,
       methodName = _ref.methodName,
@@ -802,7 +806,10 @@
     if (args.length === 1 && _typeof(args[0]) === 'object') {
       return [args[0]];
     }
-    var eventType = args[0];
+    var _args$0$split = args[0].split(':'),
+      _args$0$split2 = _slicedToArray(_args$0$split, 2),
+      eventType = _args$0$split2[0],
+      eventModifier = _args$0$split2[1];
     var hits = args[1];
     var eventName = args[2];
     if (!hits) {
@@ -845,7 +852,8 @@
             index: index,
             objectIDs: objectIDsByChunk[i]
           },
-          hits: batch
+          hits: batch,
+          eventModifier: eventModifier
         };
       });
     } else if (eventType === 'click') {
@@ -855,13 +863,14 @@
           widgetType: widgetType,
           eventType: eventType,
           payload: {
-            eventName: eventName,
+            eventName: eventName || 'Hit Clicked',
             index: index,
             queryID: queryID,
             objectIDs: objectIDsByChunk[i],
             positions: positionsByChunk[i]
           },
-          hits: batch
+          hits: batch,
+          eventModifier: eventModifier
         };
       });
     } else if (eventType === 'conversion') {
@@ -871,27 +880,30 @@
           widgetType: widgetType,
           eventType: eventType,
           payload: {
-            eventName: eventName,
+            eventName: eventName || 'Hit Converted',
             index: index,
             queryID: queryID,
             objectIDs: objectIDsByChunk[i]
           },
-          hits: batch
+          hits: batch,
+          eventModifier: eventModifier
         };
       });
     } else {
       throw new Error("eventType(\"".concat(eventType, "\") is not supported.\n    If you want to send a custom payload, you can pass one object: ").concat(methodName, "(customPayload);\n    "));
     }
-  };
+  }
   function createSendEventForHits(_ref2) {
     var instantSearchInstance = _ref2.instantSearchInstance,
       index = _ref2.index,
       widgetType = _ref2.widgetType;
+    var sentEvents = {};
+    var timer = undefined;
     var sendEventForHits = function sendEventForHits() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      var payloads = buildPayloads({
+      var payloads = _buildEventPayloadsForHits({
         widgetType: widgetType,
         index: index,
         methodName: 'sendEvent',
@@ -899,8 +911,16 @@
         instantSearchInstance: instantSearchInstance
       });
       payloads.forEach(function (payload) {
-        return instantSearchInstance.sendEventToInsights(payload);
+        if (payload.eventType === 'click' && payload.eventModifier === 'internal' && sentEvents[payload.eventType]) {
+          return;
+        }
+        sentEvents[payload.eventType] = true;
+        instantSearchInstance.sendEventToInsights(payload);
       });
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        sentEvents = {};
+      }, 0);
     };
     return sendEventForHits;
   }
@@ -912,7 +932,7 @@
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
-      var payloads = buildPayloads({
+      var payloads = _buildEventPayloadsForHits({
         widgetType: widgetType,
         index: index,
         methodName: 'bindEvent',
@@ -2384,7 +2404,7 @@
           }
           if (!_refine) {
             _refine = function _refine(facetValue) {
-              sendEvent('click', facetValue);
+              sendEvent('click:internal', facetValue);
               helper.toggleFacetRefinement(hierarchicalFacetName, facetValue).search();
             };
           }
@@ -2490,7 +2510,7 @@
           renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
             instantSearchInstance: renderOptions.instantSearchInstance
           }), false);
-          renderState.sendEvent('view', renderState.hits);
+          renderState.sendEvent('view:internal', renderState.hits);
         },
         getRenderState: function getRenderState(renderState, renderOptions) {
           return _objectSpread2(_objectSpread2({}, renderState), {}, {
@@ -2667,6 +2687,7 @@
 
   var n,l,u,t,o,r,f={},e=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s(n,l){for(var u in l)n[u]=l[u];return n}function a(n){var l=n.parentNode;l&&l.removeChild(n);}function h(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v(l,f,t,o,null)}function v(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u:r};return null==r&&null!=l.vnode&&l.vnode(f),f}function y(){return {current:null}}function p(n){return n.children}function d(n,l){this.props=n,this.context=l;}function _(n,l){if(null==l)return n.__?_(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_(n):null}function k(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k(n)}}function b(n){(!n.__d&&(n.__d=!0)&&t.push(n)&&!g.__r++||o!==l.debounceRendering)&&((o=l.debounceRendering)||setTimeout)(g);}function g(){for(var n;g.__r=t.length;)n=t.sort(function(n,l){return n.__v.__b-l.__v.__b}),t=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s({},t)).__v=t.__v+1,j(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_(t):o,t.__h),z(u,t),t.__e!=o&&k(t)));});}function w(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v(null,k,null,null,k):Array.isArray(k)?v(p,{children:k},null,null,null):k.__b>0?v(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j(n,k,d=d||f,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m(k,s,n):s=A(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&("function"==typeof u.type&&null!=x[h].__e&&x[h].__e==u.__d&&(u.__d=_(i,h+1)),N(x[h],x[h]));if(w)for(h=0;h<w.length;h++)M(w[h],w[++h],w[++h]);}function m(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m(i,l,u):A(u,i,i,t,i.__e,l));return l}function A(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else{for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else{if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T:I,o):n.removeEventListener(l,o?T:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null!=u&&(!1!==u||"a"===l[0]&&"r"===l[1])?n.setAttribute(l,u):n.removeAttribute(l));}}function I(n){this.l[n.type+!1](l.event?l.event(n):n);}function T(n){this.l[n.type+!0](l.event?l.event(n):n);}function j(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l.__b)&&a(u);try{n:if("function"==typeof H){if(g=u.props,m=(a=H.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in H&&H.prototype.render?u.__c=h=new H(g,x):(u.__c=h=new d(g,x),h.constructor=H,h.render=O),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[]),null==h.__s&&(h.__s=h.state),null!=H.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s({},h.__s)),s(h.__s,H.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==H.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else{if(null==H.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,A=l.__r,C=0,"prototype"in H&&H.prototype.render)h.state=h.__s,h.__d=!1,A&&A(u),a=h.render(h.props,h.state,h.context);else do{h.__d=!1,A&&A(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++C<25);h.state=h.__s,null!=h.getChildContext&&(t=s(s({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),$=null!=a&&a.type===p&&null==a.key?a.props.children:a,w(n,Array.isArray($)?$:[$],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(a=l.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l.__e(n,u,i);}}function z(n,u){l.__c&&l.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l.__e(n,u.__v);}});}function L(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else{if(r=r&&n.call(l.childNodes),h=(y=i.props||f).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H(l,"checked",k,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l.__e(n,i);}}function N(n,u,i){var t,o;if(l.unmount&&l.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,"function"!=typeof n.type);i||null==n.__e||a(n.__e),n.__=n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l.__&&l.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j(i,u=(!o&&t||i).__k=h(p,null,[u]),r||f,f,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z(e,u);}n=e.slice,l={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u=0,d.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s({},this.state),"function"==typeof n&&(n=n(s({},u),this.props)),n&&s(u,n),null!=n&&this.__v&&(l&&this.__h.push(l),b(this));},d.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b(this));},d.prototype.render=p,t=[],g.__r=0,r=0;
 
+  /** @deprecated use bindEvent instead */
   function readDataAttributes(domElement) {
     var method = domElement.getAttribute('data-insights-method');
     var serializedPayload = domElement.getAttribute('data-insights-payload');
@@ -2683,9 +2704,8 @@
       throw new Error('The insights helper was unable to parse `data-insights-payload`.');
     }
   }
-  function hasDataAttributes(domElement) {
-    return domElement.hasAttribute('data-insights-method');
-  }
+
+  /** @deprecated use bindEvent instead */
   function writeDataAttributes(_ref) {
     var method = _ref.method,
       payload = _ref.payload;
@@ -2712,7 +2732,34 @@
     });
   }
 
-  var findInsightsTarget = function findInsightsTarget(startElement, endElement, validator) {
+  var createInsightsEventHandler = function createInsightsEventHandler(_ref) {
+    var insights = _ref.insights,
+      sendEvent = _ref.sendEvent;
+    return function (event) {
+      // new way, e.g. bindEvent("click", hit, "Hit clicked")
+      var insightsThroughSendEvent = findInsightsTarget(event.target, event.currentTarget, function (element) {
+        return element.hasAttribute('data-insights-event');
+      });
+      if (insightsThroughSendEvent) {
+        var payload = parseInsightsEvent(insightsThroughSendEvent);
+        payload.forEach(function (single) {
+          return sendEvent(single);
+        });
+      }
+
+      // old way, e.g. instantsearch.insights("clickedObjectIDsAfterSearch", { .. })
+      var insightsThroughFunction = findInsightsTarget(event.target, event.currentTarget, function (element) {
+        return element.hasAttribute('data-insights-method') && element.hasAttribute('data-insights-payload');
+      });
+      if (insightsThroughFunction) {
+        var _readDataAttributes = readDataAttributes(insightsThroughFunction),
+          method = _readDataAttributes.method,
+          _payload = _readDataAttributes.payload;
+        insights(method, _payload);
+      }
+    };
+  };
+  function findInsightsTarget(startElement, endElement, validator) {
     var element = startElement;
     while (element && !validator(element)) {
       if (element === endElement) {
@@ -2721,8 +2768,8 @@
       element = element.parentElement;
     }
     return element;
-  };
-  var parseInsightsEvent = function parseInsightsEvent(element) {
+  }
+  function parseInsightsEvent(element) {
     var serializedPayload = element.getAttribute('data-insights-event');
     if (typeof serializedPayload !== 'string') {
       throw new Error('The insights middleware expects `data-insights-event` to be a base64-encoded JSON string.');
@@ -2732,40 +2779,7 @@
     } catch (error) {
       throw new Error('The insights middleware was unable to parse `data-insights-event`.');
     }
-  };
-  var insightsListener = function insightsListener(BaseComponent) {
-    function WithInsightsListener(props) {
-      var handleClick = function handleClick(event) {
-        if (props.sendEvent) {
-          // new way with insights middleware
-          var targetWithEvent = findInsightsTarget(event.target, event.currentTarget, function (element) {
-            return element.hasAttribute('data-insights-event');
-          });
-          if (targetWithEvent) {
-            var payload = parseInsightsEvent(targetWithEvent);
-            payload.forEach(function (single) {
-              return props.sendEvent(single);
-            });
-          }
-        }
-
-        // old way, e.g. instantsearch.insights("clickedObjectIDsAfterSearch", { .. })
-        var insightsTarget = findInsightsTarget(event.target, event.currentTarget, function (element) {
-          return hasDataAttributes(element);
-        });
-        if (insightsTarget) {
-          var _readDataAttributes = readDataAttributes(insightsTarget),
-            method = _readDataAttributes.method,
-            _payload = _readDataAttributes.payload;
-          props.insights(method, _payload);
-        }
-      };
-      return h("div", {
-        onClick: handleClick
-      }, h(BaseComponent, props));
-    }
-    return WithInsightsListener;
-  };
+  }
 
   var connectHitsWithInsights = withInsights(connectHits);
 
@@ -2897,7 +2911,8 @@
     };
   };
 
-  var _excluded$2 = ["page"];
+  var _excluded$2 = ["page"],
+    _excluded2 = ["clickAnalytics", "userToken"];
   var withUsage$7 = createDocumentationMessageGenerator({
     name: 'infinite-hits',
     connector: true
@@ -2908,17 +2923,24 @@
       rest = _objectWithoutProperties(_ref, _excluded$2);
     return rest;
   }
+  function normalizeState(state) {
+    var _ref2 = state || {},
+      clickAnalytics = _ref2.clickAnalytics,
+      userToken = _ref2.userToken,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+    return rest;
+  }
   function getInMemoryCache() {
     var cachedHits = null;
     var cachedState = null;
     return {
-      read: function read(_ref2) {
-        var state = _ref2.state;
+      read: function read(_ref3) {
+        var state = _ref3.state;
         return isEqual(cachedState, getStateWithoutPage(state)) ? cachedHits : null;
       },
-      write: function write(_ref3) {
-        var state = _ref3.state,
-          hits = _ref3.hits;
+      write: function write(_ref4) {
+        var state = _ref4.state,
+          hits = _ref4.hits;
         cachedState = getStateWithoutPage(state);
         cachedHits = hits;
       }
@@ -2938,15 +2960,15 @@
     // @TODO: this should be a generic, but a Connector can not yet be generic itself
 
     return function (widgetParams) {
-      var _ref4 = widgetParams || {},
-        _ref4$escapeHTML = _ref4.escapeHTML,
-        escapeHTML = _ref4$escapeHTML === void 0 ? true : _ref4$escapeHTML,
-        _ref4$transformItems = _ref4.transformItems,
-        transformItems = _ref4$transformItems === void 0 ? function (items) {
+      var _ref5 = widgetParams || {},
+        _ref5$escapeHTML = _ref5.escapeHTML,
+        escapeHTML = _ref5$escapeHTML === void 0 ? true : _ref5$escapeHTML,
+        _ref5$transformItems = _ref5.transformItems,
+        transformItems = _ref5$transformItems === void 0 ? function (items) {
           return items;
-        } : _ref4$transformItems,
-        _ref4$cache = _ref4.cache,
-        cache = _ref4$cache === void 0 ? getInMemoryCache() : _ref4$cache;
+        } : _ref5$transformItems,
+        _ref5$cache = _ref5.cache,
+        cache = _ref5$cache === void 0 ? getInMemoryCache() : _ref5$cache;
       var showPrevious;
       var showMore;
       var sendEvent;
@@ -2977,7 +2999,7 @@
           // avoid updating the browser URL when the user displays the previous page.
           helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), {}, {
             page: getFirstReceivedPage(helper.state, cache.read({
-              state: helper.state
+              state: normalizeState(helper.state)
             }) || {}) - 1
           })).searchWithoutTriggeringOnStateChange();
         };
@@ -2985,7 +3007,7 @@
       var getShowMore = function getShowMore(helper) {
         return function () {
           helper.setPage(getLastReceivedPage(helper.state, cache.read({
-            state: helper.state
+            state: normalizeState(helper.state)
           }) || {}) + 1).search();
         };
       };
@@ -3002,19 +3024,19 @@
           renderFn(_objectSpread2(_objectSpread2({}, widgetRenderState), {}, {
             instantSearchInstance: instantSearchInstance
           }), false);
-          sendEvent('view', widgetRenderState.currentPageHits);
+          sendEvent('view:internal', widgetRenderState.currentPageHits);
         },
         getRenderState: function getRenderState(renderState, renderOptions) {
           return _objectSpread2(_objectSpread2({}, renderState), {}, {
             infiniteHits: this.getWidgetRenderState(renderOptions)
           });
         },
-        getWidgetRenderState: function getWidgetRenderState(_ref5) {
-          var results = _ref5.results,
-            helper = _ref5.helper,
-            parent = _ref5.parent,
-            existingState = _ref5.state,
-            instantSearchInstance = _ref5.instantSearchInstance;
+        getWidgetRenderState: function getWidgetRenderState(_ref6) {
+          var results = _ref6.results,
+            helper = _ref6.helper,
+            parent = _ref6.parent,
+            existingState = _ref6.state,
+            instantSearchInstance = _ref6.instantSearchInstance;
           var isFirstPage;
           var currentPageHits = [];
           /**
@@ -3024,7 +3046,7 @@
            */
           var state = parent.getPreviousState() || existingState;
           var cachedHits = cache.read({
-            state: state
+            state: normalizeState(state)
           }) || {};
           if (!results) {
             showPrevious = getShowPrevious(helper);
@@ -3054,7 +3076,7 @@
             if (cachedHits[_page] === undefined && !results.__isArtificial && instantSearchInstance.status === 'idle') {
               cachedHits[_page] = transformedHits;
               cache.write({
-                state: state,
+                state: normalizeState(state),
                 hits: cachedHits
               });
             }
@@ -3076,8 +3098,8 @@
             widgetParams: widgetParams
           };
         },
-        dispose: function dispose(_ref6) {
-          var state = _ref6.state;
+        dispose: function dispose(_ref7) {
+          var state = _ref7.state;
           unmountFn();
           var stateWithoutPage = state.setQueryParameter('page', undefined);
           if (!escapeHTML) {
@@ -3087,8 +3109,8 @@
             return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, key, undefined));
           }, {}));
         },
-        getWidgetUiState: function getWidgetUiState(uiState, _ref7) {
-          var searchParameters = _ref7.searchParameters;
+        getWidgetUiState: function getWidgetUiState(uiState, _ref8) {
+          var searchParameters = _ref8.searchParameters;
           var page = searchParameters.page || 0;
           if (!page) {
             // return without adding `page` to uiState
@@ -3101,8 +3123,8 @@
             page: page + 1
           });
         },
-        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref8) {
-          var uiState = _ref8.uiState;
+        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref9) {
+          var uiState = _ref9.uiState;
           var widgetSearchParameters = searchParameters;
           if (escapeHTML) {
             widgetSearchParameters = searchParameters.setQueryParameters(TAG_PLACEHOLDER);
@@ -3227,7 +3249,7 @@
               var _helper$getHierarchic = helper.getHierarchicalFacetBreadcrumb(attribute),
                 _helper$getHierarchic2 = _slicedToArray(_helper$getHierarchic, 1),
                 refinedItem = _helper$getHierarchic2[0];
-              sendEvent('click', facetValue ? facetValue : refinedItem);
+              sendEvent('click:internal', facetValue ? facetValue : refinedItem);
               helper.toggleFacetRefinement(attribute, facetValue ? facetValue : refinedItem).search();
             };
           }
@@ -3428,7 +3450,7 @@
           if (!connectorState.refine) {
             connectorState.refine = function (facetValue) {
               var refinedState = getRefinedState(helper.state, attribute, facetValue);
-              connectorState.sendEvent('click', facetValue);
+              connectorState.sendEvent('click:internal', facetValue);
               helper.setState(refinedState).search();
             };
           }
@@ -3992,7 +4014,7 @@
   };
 
   var _excluded$4 = ["name", "escapedValue"],
-    _excluded2 = ["escapedValue", "value"];
+    _excluded2$1 = ["escapedValue", "value"];
   var withUsage$c = createDocumentationMessageGenerator({
     name: 'refinement-list',
     connector: true
@@ -4101,7 +4123,7 @@
                 var normalizedFacetValues = transformItems(facetValues.map(function (_ref3) {
                   var escapedValue = _ref3.escapedValue,
                     value = _ref3.value,
-                    item = _objectWithoutProperties(_ref3, _excluded2);
+                    item = _objectWithoutProperties(_ref3, _excluded2$1);
                   return _objectSpread2(_objectSpread2({}, item), {}, {
                     value: escapedValue,
                     label: value
@@ -4156,7 +4178,7 @@
               widgetType: this.$$type
             });
             triggerRefine = function triggerRefine(facetValue) {
-              sendEvent('click', facetValue);
+              sendEvent('click:internal', facetValue);
               helper.toggleFacetRefinement(attribute, facetValue).search();
             };
             searchForFacetValues = createSearchForFacetValues(helper, this);
@@ -4459,10 +4481,13 @@
         instantSearchInstance.sendEventToInsights(args[0]);
         return;
       }
-      var eventType = args[0],
-        facetValue = args[1],
+      var facetValue = args[1],
         _args$ = args[2],
         eventName = _args$ === void 0 ? 'Filter Applied' : _args$;
+      var _args$0$split = args[0].split(':'),
+        _args$0$split2 = _slicedToArray(_args$0$split, 2),
+        eventType = _args$0$split2[0],
+        eventModifier = _args$0$split2[1];
       if (eventType !== 'click') {
         return;
       }
@@ -4472,6 +4497,7 @@
           insightsMethod: 'clickedFilters',
           widgetType: $$type$2,
           eventType: eventType,
+          eventModifier: eventModifier,
           payload: {
             eventName: eventName,
             index: helper.getIndex(),
@@ -4547,7 +4573,7 @@
         return emptyState;
       }
       var toggleRefinement = function toggleRefinement(helper, facetValue) {
-        sendEvent('click', facetValue);
+        sendEvent('click:internal', facetValue);
         helper.setState(getRefinedState(helper.state, facetValue)).search();
       };
       var connectorState = {
@@ -4776,10 +4802,13 @@
         instantSearchInstance.sendEventToInsights(args[0]);
         return;
       }
-      var eventType = args[0],
-        isRefined = args[1],
+      var isRefined = args[1],
         _args$ = args[2],
         eventName = _args$ === void 0 ? 'Filter Applied' : _args$;
+      var _args$0$split = args[0].split(':'),
+        _args$0$split2 = _slicedToArray(_args$0$split, 2),
+        eventType = _args$0$split2[0],
+        eventModifier = _args$0$split2[1];
       if (eventType !== 'click' || on === undefined) {
         return;
       }
@@ -4791,6 +4820,7 @@
           insightsMethod: 'clickedFilters',
           widgetType: $$type$3,
           eventType: eventType,
+          eventModifier: eventModifier,
           payload: {
             eventName: eventName,
             index: helper.getIndex(),
@@ -4837,7 +4867,7 @@
             },
             isRefined = _ref3.isRefined;
           if (!isRefined) {
-            sendEvent('click', isRefined);
+            sendEvent('click:internal', isRefined);
             if (hasAnOffValue) {
               off.forEach(function (v) {
                 return helper.removeDisjunctiveFacetRefinement(attribute, v);
@@ -5298,7 +5328,7 @@
           widgetState.internalToggleRefineOnMapMove = createInternalToggleRefinementOnMapMove(renderArgs, this.render.bind(this));
           widgetState.internalSetMapMoveSinceLastRefine = createInternalSetMapMoveSinceLastRefine(renderArgs, this.render.bind(this));
           var widgetRenderState = this.getWidgetRenderState(renderArgs);
-          sendEvent('view', widgetRenderState.items);
+          sendEvent('view:internal', widgetRenderState.items);
           renderFn(_objectSpread2(_objectSpread2({}, widgetRenderState), {}, {
             instantSearchInstance: instantSearchInstance
           }), isFirstRendering);
@@ -11109,7 +11139,7 @@
           renderState.indices.forEach(function (_ref3) {
             var sendEvent = _ref3.sendEvent,
               hits = _ref3.hits;
-            sendEvent('view', hits);
+            sendEvent('view:internal', hits);
           });
           renderFn(_objectSpread2(_objectSpread2({}, renderState), {}, {
             instantSearchInstance: instantSearchInstance
@@ -11707,6 +11737,10 @@
   };
 
   var suit = component('Highlight');
+
+  /**
+   * @deprecated use html tagged templates and the Highlight component instead
+   */
   function highlight(_ref) {
     var attribute = _ref.attribute,
       _ref$highlightedTagNa = _ref.highlightedTagName,
@@ -11714,6 +11748,7 @@
       hit = _ref.hit,
       _ref$cssClasses = _ref.cssClasses,
       cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+     _warning(false, "`instantsearch.highlight` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `Highlight` component.\n\nFor more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates") ;
     var highlightAttributeResult = getPropertyByPath(hit._highlightResult, attribute);
 
     // @MAJOR fallback to attribute value if highlight is not found
@@ -11730,6 +11765,10 @@
   }
 
   var suit$1 = component('ReverseHighlight');
+
+  /**
+   * @deprecated use html tagged templates and the ReverseHighlight component instead
+   */
   function reverseHighlight(_ref) {
     var attribute = _ref.attribute,
       _ref$highlightedTagNa = _ref.highlightedTagName,
@@ -11737,6 +11776,7 @@
       hit = _ref.hit,
       _ref$cssClasses = _ref.cssClasses,
       cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+     _warning(false, "`instantsearch.reverseHighlight` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `ReverseHighlight` component.\n\nFor more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates") ;
     var highlightAttributeResult = getPropertyByPath(hit._highlightResult, attribute);
 
     // @MAJOR fallback to attribute value if highlight is not found
@@ -11754,6 +11794,10 @@
   }
 
   var suit$2 = component('Snippet');
+
+  /**
+   * @deprecated use html tagged templates and the Snippet component instead
+   */
   function snippet(_ref) {
     var attribute = _ref.attribute,
       _ref$highlightedTagNa = _ref.highlightedTagName,
@@ -11761,6 +11805,7 @@
       hit = _ref.hit,
       _ref$cssClasses = _ref.cssClasses,
       cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+     _warning(false, "`instantsearch.snippet` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `Snippet` component.\n\nFor more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates") ;
     var snippetAttributeResult = getPropertyByPath(hit._snippetResult, attribute);
 
     // @MAJOR fallback to attribute value if snippet is not found
@@ -11777,6 +11822,10 @@
   }
 
   var suit$3 = component('ReverseSnippet');
+
+  /**
+   * @deprecated use html tagged templates and the ReverseSnippet component instead
+   */
   function reverseSnippet(_ref) {
     var attribute = _ref.attribute,
       _ref$highlightedTagNa = _ref.highlightedTagName,
@@ -11784,6 +11833,7 @@
       hit = _ref.hit,
       _ref$cssClasses = _ref.cssClasses,
       cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+     _warning(false, "`instantsearch.reverseSnippet` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `ReverseSnippet` component.\n\nFor more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates") ;
     var snippetAttributeResult = getPropertyByPath(hit._snippetResult, attribute);
 
     // @MAJOR fallback to attribute value if snippet is not found
@@ -11879,7 +11929,231 @@
     };
   }
 
-  function extractPayload(widgets, instantSearchInstance, payload) {
+  var ALGOLIA_INSIGHTS_VERSION = '2.6.0';
+  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@".concat(ALGOLIA_INSIGHTS_VERSION, "/dist/search-insights.min.js");
+  function createInsightsMiddleware() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _insightsClient = props.insightsClient,
+      insightsInitParams = props.insightsInitParams,
+      onEvent = props.onEvent,
+      _props$$$internal = props.$$internal,
+      $$internal = _props$$$internal === void 0 ? false : _props$$$internal;
+    var potentialInsightsClient = _insightsClient;
+    if (!_insightsClient && _insightsClient !== null) {
+      safelyRunOnBrowser(function (_ref) {
+        var window = _ref.window;
+        var pointer = window.AlgoliaAnalyticsObject || 'aa';
+        if (typeof pointer === 'string') {
+          potentialInsightsClient = window[pointer];
+        }
+        if (!potentialInsightsClient) {
+          window.AlgoliaAnalyticsObject = pointer;
+          if (!window[pointer]) {
+            window[pointer] = function () {
+              if (!window[pointer].queue) {
+                window[pointer].queue = [];
+              }
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              window[pointer].queue.push(args);
+            };
+            window[pointer].version = ALGOLIA_INSIGHTS_VERSION;
+            window[pointer].shouldAddScript = true;
+          }
+          potentialInsightsClient = window[pointer];
+        }
+      });
+    }
+    // if still no insightsClient was found, we use a noop
+    var insightsClient = potentialInsightsClient || noop;
+    return function (_ref2) {
+      var instantSearchInstance = _ref2.instantSearchInstance;
+      // remove existing default insights middleware
+      // user-provided insights middleware takes precedence
+      var existingInsightsMiddlewares = instantSearchInstance.middleware.filter(function (m) {
+        return m.instance.$$type === 'ais.insights' && m.instance.$$internal;
+      }).map(function (m) {
+        return m.creator;
+      });
+      instantSearchInstance.unuse.apply(instantSearchInstance, _toConsumableArray(existingInsightsMiddlewares));
+      var _getAppIdAndApiKey = getAppIdAndApiKey(instantSearchInstance.client),
+        _getAppIdAndApiKey2 = _slicedToArray(_getAppIdAndApiKey, 2),
+        appId = _getAppIdAndApiKey2[0],
+        apiKey = _getAppIdAndApiKey2[1];
+
+      // search-insights.js also throws an error so dev-only clarification is sufficient
+       _warning(Boolean(appId && apiKey), 'could not extract Algolia credentials from searchClient in insights middleware.') ;
+      var queuedUserToken = undefined;
+      var userTokenBeforeInit = undefined;
+      if (Array.isArray(insightsClient.queue)) {
+        // Context: The umd build of search-insights is asynchronously loaded by the snippet.
+        //
+        // When user calls `aa('setUserToken', 'my-user-token')` before `search-insights` is loaded,
+        // ['setUserToken', 'my-user-token'] gets stored in `aa.queue`.
+        // Whenever `search-insights` is finally loaded, it will process the queue.
+        //
+        // But here's the reason why we handle it here:
+        // At this point, even though `search-insights` is not loaded yet,
+        // we still want to read the token from the queue.
+        // Otherwise, the first search call will be fired without the token.
+        var _ref3 = find(insightsClient.queue.slice().reverse(), function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 1),
+            method = _ref6[0];
+          return method === 'setUserToken';
+        }) || [];
+        var _ref4 = _slicedToArray(_ref3, 2);
+        queuedUserToken = _ref4[1];
+      }
+      insightsClient('getUserToken', null, function (_error, userToken) {
+        // If user has called `aa('setUserToken', 'my-user-token')` before creating
+        // the `insights` middleware, we store them temporarily and
+        // set it later on.
+        //
+        // Otherwise, the `init` call might override it with anonymous user token.
+        userTokenBeforeInit = userToken;
+      });
+
+      // Only `init` if the `insightsInitParams` option is passed or
+      // if the `insightsClient` version doesn't supports optional `init` calling.
+      if (insightsInitParams || !isModernInsightsClient(insightsClient)) {
+        insightsClient('init', _objectSpread2({
+          appId: appId,
+          apiKey: apiKey,
+          partial: true
+        }, insightsInitParams));
+      }
+      var initialParameters;
+      var helper;
+      return {
+        $$type: 'ais.insights',
+        $$internal: $$internal,
+        onStateChange: function onStateChange() {},
+        subscribe: function subscribe() {
+          if (!insightsClient.shouldAddScript) return;
+          var errorMessage = '[insights middleware]: could not load search-insights.js. Please load it manually following https://alg.li/insights-init';
+          try {
+            var script = document.createElement('script');
+            script.async = true;
+            script.src = ALGOLIA_INSIGHTS_SRC;
+            script.onerror = function () {
+              instantSearchInstance.emit('error', new Error(errorMessage));
+            };
+            document.body.appendChild(script);
+            insightsClient.shouldAddScript = false;
+          } catch (cause) {
+            insightsClient.shouldAddScript = false;
+            instantSearchInstance.emit('error', new Error(errorMessage));
+          }
+        },
+        started: function started() {
+          insightsClient('addAlgoliaAgent', 'insights-middleware');
+          helper = instantSearchInstance.helper;
+          initialParameters = {
+            userToken: helper.state.userToken,
+            clickAnalytics: helper.state.clickAnalytics
+          };
+          helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), {}, {
+            clickAnalytics: true
+          }));
+          if (!$$internal) {
+            instantSearchInstance.scheduleSearch();
+          }
+          var setUserTokenToSearch = function setUserTokenToSearch(userToken) {
+            if (!userToken) {
+              return;
+            }
+            var existingToken = helper.state.userToken;
+            helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), {}, {
+              userToken: userToken
+            }));
+            if (existingToken && existingToken !== userToken) {
+              instantSearchInstance.scheduleSearch();
+            }
+          };
+          var anonymousUserToken = getInsightsAnonymousUserTokenInternal();
+          if (anonymousUserToken) {
+            // When `aa('init', { ... })` is called, it creates an anonymous user token in cookie.
+            // We can set it as userToken.
+            setUserTokenToSearch(anonymousUserToken);
+          }
+
+          // We consider the `userToken` coming from a `init` call to have a higher
+          // importance than the one coming from the queue.
+          if (userTokenBeforeInit) {
+            setUserTokenToSearch(userTokenBeforeInit);
+            insightsClient('setUserToken', userTokenBeforeInit);
+          } else if (queuedUserToken) {
+            setUserTokenToSearch(queuedUserToken);
+            insightsClient('setUserToken', queuedUserToken);
+          }
+
+          // This updates userToken which is set explicitly by `aa('setUserToken', userToken)`
+          insightsClient('onUserTokenChange', setUserTokenToSearch, {
+            immediate: true
+          });
+          var insightsClientWithLocalCredentials = insightsClient;
+          if (isModernInsightsClient(insightsClient)) {
+            insightsClientWithLocalCredentials = function insightsClientWithLocalCredentials(method, payload) {
+              var extraParams = {
+                headers: {
+                  'X-Algolia-Application-Id': appId,
+                  'X-Algolia-API-Key': apiKey
+                }
+              };
+
+              // @ts-ignore we are calling this only when we know that the client actually is correct
+              return insightsClient(method, payload, extraParams);
+            };
+          }
+          instantSearchInstance.sendEventToInsights = function (event) {
+            if (onEvent) {
+              onEvent(event, insightsClientWithLocalCredentials);
+            } else if (event.insightsMethod) {
+              // Source is used to differentiate events sent by instantsearch from those sent manually.
+              event.payload.algoliaSource = ['instantsearch'];
+              if (event.eventModifier === 'internal') {
+                event.payload.algoliaSource.push('instantsearch-internal');
+              }
+              insightsClientWithLocalCredentials(event.insightsMethod, event.payload);
+               _warning(Boolean(helper.state.userToken), "\nCannot send event to Algolia Insights because `userToken` is not set.\n\nSee documentation: https://www.algolia.com/doc/guides/building-search-ui/going-further/send-insights-events/js/#setting-the-usertoken\n") ;
+            } else {
+               _warning(false, 'Cannot send event to Algolia Insights because `insightsMethod` option is missing.') ;
+            }
+          };
+        },
+        unsubscribe: function unsubscribe() {
+          insightsClient('onUserTokenChange', undefined);
+          instantSearchInstance.sendEventToInsights = noop;
+          if (helper && initialParameters) {
+            helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), initialParameters));
+            instantSearchInstance.scheduleSearch();
+          }
+        }
+      };
+    };
+  }
+
+  /**
+   * Determines if a given insights `client` supports the optional call to `init`
+   * and the ability to set credentials via extra parameters when sending events.
+   */
+  function isModernInsightsClient(client) {
+    var _split$map = (client.version || '').split('.').map(Number),
+      _split$map2 = _slicedToArray(_split$map, 2),
+      major = _split$map2[0],
+      minor = _split$map2[1];
+
+    /* eslint-disable @typescript-eslint/naming-convention */
+    var v3 = major >= 3;
+    var v2_6 = major === 2 && minor >= 6;
+    var v1_10 = major === 1 && minor >= 10;
+    /* eslint-enable @typescript-eslint/naming-convention */
+
+    return v3 || v2_6 || v1_10;
+  }
+
+  function extractWidgetPayload(widgets, instantSearchInstance, payload) {
     var initOptions = createInitArgs(instantSearchInstance, instantSearchInstance.mainIndex, instantSearchInstance._initialUiState);
     widgets.forEach(function (widget) {
       var widgetParams = {};
@@ -11901,7 +12175,7 @@
         params: params
       });
       if (widget.$$type === 'ais.index') {
-        extractPayload(widget.getWidgets(), instantSearchInstance, payload);
+        extractWidgetPayload(widget.getWidgets(), instantSearchInstance, payload);
       }
     });
   }
@@ -11925,8 +12199,11 @@
    * - connector name
    */
   function createMetadataMiddleware() {
-    return function (_ref2) {
-      var instantSearchInstance = _ref2.instantSearchInstance;
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$$$internal = _ref2.$$internal,
+      $$internal = _ref2$$$internal === void 0 ? false : _ref2$$$internal;
+    return function (_ref3) {
+      var instantSearchInstance = _ref3.instantSearchInstance;
       var payload = {
         widgets: []
       };
@@ -11934,13 +12211,22 @@
       var refNode = document.querySelector('head');
       payloadContainer.name = 'instantsearch:widgets';
       return {
+        $$type: 'ais.metadata',
+        $$internal: $$internal,
         onStateChange: function onStateChange() {},
         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;
-            extractPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
+            extractWidgetPayload(instantSearchInstance.mainIndex.getWidgets(), instantSearchInstance, payload);
+            instantSearchInstance.middleware.forEach(function (middleware) {
+              return payload.widgets.push({
+                middleware: true,
+                type: middleware.instance.$$type,
+                internal: middleware.instance.$$internal
+              });
+            });
             payloadContainer.content = JSON.stringify(payload);
             refNode.appendChild(payloadContainer);
           }, 0);
@@ -12792,6 +13078,7 @@
         dispose = _ref.dispose,
         push = _ref.push;
       _classCallCheck(this, BrowserHistory);
+      _defineProperty(this, "$$type", 'ais.browser');
       _defineProperty(this, "windowTitle", void 0);
       _defineProperty(this, "writeDelay", void 0);
       _defineProperty(this, "_createURL", void 0);
@@ -13044,6 +13331,7 @@
   // which excludes "configure" as this function does.
   function simpleStateMapping() {
     return {
+      $$type: 'ais.simple',
       stateToRoute: function stateToRoute(uiState) {
         return Object.keys(uiState).reduce(function (state, indexId) {
           return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, indexId, getIndexStateWithoutConfigure(uiState[indexId])));
@@ -13063,7 +13351,9 @@
     var _props$router = props.router,
       router = _props$router === void 0 ? historyRouter() : _props$router,
       _props$stateMapping = props.stateMapping,
-      stateMapping = _props$stateMapping === void 0 ? simpleStateMapping() : _props$stateMapping;
+      stateMapping = _props$stateMapping === void 0 ? simpleStateMapping() : _props$stateMapping,
+      _props$$$internal = props.$$internal,
+      $$internal = _props$$$internal === void 0 ? false : _props$$$internal;
     return function (_ref) {
       var instantSearchInstance = _ref.instantSearchInstance;
       function topLevelCreateURL(nextState) {
@@ -13080,6 +13370,8 @@
       var lastRouteState = undefined;
       var initialUiState = instantSearchInstance._initialUiState;
       return {
+        $$type: "ais.router({router:".concat(router.$$type || '__unknown__', ", stateMapping:").concat(stateMapping.$$type || '__unknown__', "})"),
+        $$internal: $$internal,
         onStateChange: function onStateChange(_ref2) {
           var uiState = _ref2.uiState;
           var routeState = stateMapping.stateToRoute(uiState);
@@ -13640,7 +13932,7 @@
     };
   }
 
-  var version$1 = '4.54.0';
+  var version$1 = '4.55.0';
 
   var withUsage$r = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -13725,6 +14017,8 @@
         initialUiState = _options$initialUiSta === void 0 ? {} : _options$initialUiSta,
         _options$routing = options.routing,
         routing = _options$routing === void 0 ? null : _options$routing,
+        _options$insights = options.insights,
+        insights = _options$insights === void 0 ? false : _options$insights,
         searchFunction = options.searchFunction,
         _options$stalledSearc = options.stalledSearchDelay,
         stalledSearchDelay = _options$stalledSearc === void 0 ? 200 : _options$stalledSearc,
@@ -13780,11 +14074,22 @@
       }
       _this.sendEventToInsights = noop;
       if (routing) {
-        var routerOptions = typeof routing === 'boolean' ? undefined : routing;
+        var routerOptions = typeof routing === 'boolean' ? {} : routing;
+        routerOptions.$$internal = true;
         _this.use(createRouterMiddleware(routerOptions));
       }
+
+      // This is the default middleware,
+      // any user-provided middleware will be added later and override this one.
+      if (insights) {
+        var insightsOptions = typeof insights === 'boolean' ? {} : insights;
+        insightsOptions.$$internal = true;
+        _this.use(createInsightsMiddleware(insightsOptions));
+      }
       if (isMetadataEnabled()) {
-        _this.use(createMetadataMiddleware());
+        _this.use(createMetadataMiddleware({
+          $$internal: true
+        }));
       }
       return _this;
     }
@@ -13820,6 +14125,8 @@
         }
         var newMiddlewareList = middleware.map(function (fn) {
           var newMiddleware = _objectSpread2({
+            $$type: '__unknown__',
+            $$internal: false,
             subscribe: noop,
             started: noop,
             unsubscribe: noop,
@@ -14197,6 +14504,7 @@
   }
   function singleIndexStateMapping(indexName) {
     return {
+      $$type: 'ais.singleIndex',
       stateToRoute: function stateToRoute(uiState) {
         return getIndexStateWithoutConfigure$1(uiState[indexName] || {});
       },
@@ -14215,130 +14523,6 @@
     singleIndex: singleIndexStateMapping
   });
 
-  function createInsightsMiddleware(props) {
-    var _ref = props || {},
-      _insightsClient = _ref.insightsClient,
-      insightsInitParams = _ref.insightsInitParams,
-      onEvent = _ref.onEvent;
-    if (_insightsClient !== null && !_insightsClient) {
-      {
-        throw new Error("The `insightsClient` option is required if you want userToken to be automatically set in search calls. If you don't want this behaviour, set it to `null`.");
-      }
-    }
-    var hasInsightsClient = Boolean(_insightsClient);
-    var insightsClient = _insightsClient === null ? noop : _insightsClient;
-    return function (_ref2) {
-      var instantSearchInstance = _ref2.instantSearchInstance;
-      var _getAppIdAndApiKey = getAppIdAndApiKey(instantSearchInstance.client),
-        _getAppIdAndApiKey2 = _slicedToArray(_getAppIdAndApiKey, 2),
-        appId = _getAppIdAndApiKey2[0],
-        apiKey = _getAppIdAndApiKey2[1];
-
-      // search-insights.js also throws an error so dev-only clarification is sufficient
-      if ( !(appId && apiKey)) {
-        throw new Error('[insights middleware]: could not extract Algolia credentials from searchClient');
-      }
-      var queuedUserToken = undefined;
-      var userTokenBeforeInit = undefined;
-      if (Array.isArray(insightsClient.queue)) {
-        // Context: The umd build of search-insights is asynchronously loaded by the snippet.
-        //
-        // When user calls `aa('setUserToken', 'my-user-token')` before `search-insights` is loaded,
-        // ['setUserToken', 'my-user-token'] gets stored in `aa.queue`.
-        // Whenever `search-insights` is finally loaded, it will process the queue.
-        //
-        // But here's the reason why we handle it here:
-        // At this point, even though `search-insights` is not loaded yet,
-        // we still want to read the token from the queue.
-        // Otherwise, the first search call will be fired without the token.
-        var _ref3 = find(insightsClient.queue.slice().reverse(), function (_ref5) {
-          var _ref6 = _slicedToArray(_ref5, 1),
-            method = _ref6[0];
-          return method === 'setUserToken';
-        }) || [];
-        var _ref4 = _slicedToArray(_ref3, 2);
-        queuedUserToken = _ref4[1];
-      }
-      insightsClient('getUserToken', null, function (_error, userToken) {
-        // If user has called `aa('setUserToken', 'my-user-token')` before creating
-        // the `insights` middleware, we store them temporarily and
-        // set it later on.
-        //
-        // Otherwise, the `init` call might override it with anonymous user token.
-        userTokenBeforeInit = userToken;
-      });
-      insightsClient('init', _objectSpread2({
-        appId: appId,
-        apiKey: apiKey
-      }, insightsInitParams));
-      var initialParameters;
-      var helper;
-      return {
-        onStateChange: function onStateChange() {},
-        subscribe: function subscribe() {},
-        started: function started() {
-          insightsClient('addAlgoliaAgent', 'insights-middleware');
-          helper = instantSearchInstance.helper;
-          initialParameters = {
-            userToken: helper.state.userToken,
-            clickAnalytics: helper.state.clickAnalytics
-          };
-          helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), {}, {
-            clickAnalytics: true
-          }));
-          instantSearchInstance.scheduleSearch();
-          var setUserTokenToSearch = function setUserTokenToSearch(userToken) {
-            helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread2(_objectSpread2({}, helper.state), {}, {
-              userToken: userToken
-            }));
-            instantSearchInstance.scheduleSearch();
-          };
-          var anonymousUserToken = getInsightsAnonymousUserTokenInternal();
-          if (hasInsightsClient && anonymousUserToken) {
-            // When `aa('init', { ... })` is called, it creates an anonymous user token in cookie.
-            // We can set it as userToken.
-            setUserTokenToSearch(anonymousUserToken);
-          }
-
-          // We consider the `userToken` coming from a `init` call to have a higher
-          // importance than the one coming from the queue.
-          if (userTokenBeforeInit) {
-            insightsClient('setUserToken', userTokenBeforeInit);
-          } else if (queuedUserToken) {
-            insightsClient('setUserToken', queuedUserToken);
-          }
-
-          // This updates userToken which is set explicitly by `aa('setUserToken', userToken)`
-          insightsClient('onUserTokenChange', setUserTokenToSearch, {
-            immediate: true
-          });
-          instantSearchInstance.sendEventToInsights = function (event) {
-            if (onEvent) {
-              onEvent(event, _insightsClient);
-            } else if (event.insightsMethod) {
-              var hasUserToken = Boolean(helper.state.userToken);
-              if (hasUserToken) {
-                insightsClient(event.insightsMethod, event.payload);
-              } else {
-                 _warning(false, "\nCannot send event to Algolia Insights because `userToken` is not set.\n\nSee documentation: https://www.algolia.com/doc/guides/building-search-ui/going-further/send-insights-events/js/#setting-the-usertoken\n") ;
-              }
-            } else {
-               _warning(false, 'Cannot send event to Algolia Insights because `insightsMethod` option is missing.') ;
-            }
-          };
-        },
-        unsubscribe: function unsubscribe() {
-          insightsClient('onUserTokenChange', undefined);
-          instantSearchInstance.sendEventToInsights = noop;
-          if (helper && initialParameters) {
-            helper.setState(_objectSpread2(_objectSpread2({}, helper.state), initialParameters));
-            instantSearchInstance.scheduleSearch();
-          }
-        }
-      };
-    };
-  }
-
 
 
   var middlewares = /*#__PURE__*/Object.freeze({
@@ -15355,7 +15539,7 @@
   }
 
   var _excluded$d = ["hit", "attribute", "cssClasses"],
-    _excluded2$1 = ["isHighlighted"];
+    _excluded2$2 = ["isHighlighted"];
   function ReverseHighlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
@@ -15368,7 +15552,7 @@
       var value = _ref2.value;
       return getHighlightedParts(unescape$1(value || '')).map(function (_ref3) {
         var isHighlighted = _ref3.isHighlighted,
-          rest = _objectWithoutProperties(_ref3, _excluded2$1);
+          rest = _objectWithoutProperties(_ref3, _excluded2$2);
         return _objectSpread2(_objectSpread2({}, rest), {}, {
           isHighlighted: !isHighlighted
         });
@@ -15396,7 +15580,7 @@
   }
 
   var _excluded$f = ["hit", "attribute", "cssClasses"],
-    _excluded2$2 = ["isHighlighted"];
+    _excluded2$3 = ["isHighlighted"];
   function ReverseSnippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
@@ -15409,7 +15593,7 @@
       var value = _ref2.value;
       return getHighlightedParts(unescape$1(value || '')).map(function (_ref3) {
         var isHighlighted = _ref3.isHighlighted,
-          rest = _objectWithoutProperties(_ref3, _excluded2$2);
+          rest = _objectWithoutProperties(_ref3, _excluded2$3);
         return _objectSpread2(_objectSpread2({}, rest), {}, {
           isHighlighted: !isHighlighted
         });
@@ -15535,9 +15719,12 @@
       key: "render",
       value: function render() {
         var _this = this;
-         _warning(Object.keys(this.props.templates).every(function (key) {
-          return typeof _this.props.templates[key] === 'function';
-        }), "Hogan.js and string-based templates are deprecated and will not be supported in InstantSearch.js 5.x.\n\nYou can replace them with function-form templates and use either the provided `html` function or JSX templates.\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-templates") ;
+        {
+          var nonFunctionTemplates = Object.keys(this.props.templates).filter(function (key) {
+            return typeof _this.props.templates[key] !== 'function';
+          });
+           _warning(nonFunctionTemplates.length === 0, "Hogan.js and string-based templates are deprecated and will not be supported in InstantSearch.js 5.x.\n\nYou can replace them with function-form templates and use either the provided `html` function or JSX templates.\n\nString-based templates: ".concat(nonFunctionTemplates.join(', '), ".\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-templates")) ;
+        }
         var RootTagName = this.props.rootTagName;
         var useCustomCompileOptions = this.props.useCustomCompileOptions[this.props.templateKey];
         var compileOptions = useCustomCompileOptions ? this.props.templatesConfig.compileOptions : {};
@@ -16696,7 +16883,7 @@
   };
 
   var _excluded$j = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
-    _excluded2$3 = ["item"],
+    _excluded2$4 = ["item"],
     _excluded3 = ["item"];
   var withUsage$y = createDocumentationMessageGenerator({
     name: 'geo-search'
@@ -16798,7 +16985,7 @@
     var customHTMLMarker = isCustomHTMLMarker && _objectSpread2(_objectSpread2({}, defaultCustomHTMLMarker), userCustomHTMLMarker);
     var createBuiltInMarker = function createBuiltInMarker(_ref2) {
       var item = _ref2.item,
-        rest = _objectWithoutProperties(_ref2, _excluded2$3);
+        rest = _objectWithoutProperties(_ref2, _excluded2$4);
       return new googleReference.maps.Marker(_objectSpread2(_objectSpread2(_objectSpread2({}, builtInMarker.createOptions(item)), rest), {}, {
         // @ts-expect-error @types/googlemaps doesn't document this
         __id: item.objectID,
@@ -17471,18 +17658,24 @@
     });
   };
 
-  var Hits = function Hits(_ref) {
+  function Hits(_ref) {
     var results = _ref.results,
       hits = _ref.hits,
+      insights = _ref.insights,
       bindEvent = _ref.bindEvent,
       sendEvent = _ref.sendEvent,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps;
+    var handleInsightsClick = createInsightsEventHandler({
+      insights: insights,
+      sendEvent: sendEvent
+    });
     if (results.hits.length === 0) {
       return h(Template, _extends({}, templateProps, {
         templateKey: "empty",
         rootProps: {
-          className: cx(cssClasses.root, cssClasses.emptyRoot)
+          className: cx(cssClasses.root, cssClasses.emptyRoot),
+          onClick: handleInsightsClick
         },
         data: results
       }));
@@ -17496,7 +17689,11 @@
         templateKey: "item",
         rootTagName: "li",
         rootProps: {
-          className: cssClasses.item
+          className: cssClasses.item,
+          onClick: function onClick(event) {
+            handleInsightsClick(event);
+            sendEvent('click:internal', hit, 'Hit Clicked');
+          }
         },
         key: hit.objectID,
         data: _objectSpread2(_objectSpread2({}, hit), {}, {
@@ -17509,7 +17706,7 @@
         sendEvent: sendEvent
       }));
     })));
-  };
+  }
 
   var defaultTemplates$5 = {
     empty: function empty() {
@@ -17524,7 +17721,6 @@
     name: 'hits'
   });
   var suit$b = component('Hits');
-  var HitsWithInsightsListener = insightsListener(Hits);
   var renderer$6 = function renderer(_ref) {
     var renderState = _ref.renderState,
       cssClasses = _ref.cssClasses,
@@ -17545,7 +17741,7 @@
         });
         return;
       }
-      P(h(HitsWithInsightsListener, {
+      P(h(Hits, {
         cssClasses: cssClasses,
         hits: receivedHits,
         results: results,
@@ -17682,6 +17878,7 @@
   var InfiniteHits = function InfiniteHits(_ref) {
     var results = _ref.results,
       hits = _ref.hits,
+      insights = _ref.insights,
       bindEvent = _ref.bindEvent,
       sendEvent = _ref.sendEvent,
       hasShowPrevious = _ref.hasShowPrevious,
@@ -17691,11 +17888,16 @@
       isLastPage = _ref.isLastPage,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps;
+    var handleInsightsClick = createInsightsEventHandler({
+      insights: insights,
+      sendEvent: sendEvent
+    });
     if (results.hits.length === 0) {
       return h(Template, _extends({}, templateProps, {
         templateKey: "empty",
         rootProps: {
-          className: cx(cssClasses.root, cssClasses.emptyRoot)
+          className: cx(cssClasses.root, cssClasses.emptyRoot),
+          onClick: handleInsightsClick
         },
         data: results
       }));
@@ -17717,7 +17919,11 @@
         templateKey: "item",
         rootTagName: "li",
         rootProps: {
-          className: cssClasses.item
+          className: cssClasses.item,
+          onClick: function onClick(event) {
+            handleInsightsClick(event);
+            sendEvent('click:internal', hit, 'Hit Clicked');
+          }
         },
         key: hit.objectID,
         data: _objectSpread2(_objectSpread2({}, hit), {}, {
@@ -17759,7 +17965,6 @@
     name: 'infinite-hits'
   });
   var suit$d = component('InfiniteHits');
-  var InfiniteHitsWithInsightsListener = insightsListener(InfiniteHits);
   var renderer$8 = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -17785,7 +17990,7 @@
         });
         return;
       }
-      P(h(InfiniteHitsWithInsightsListener, {
+      P(h(InfiniteHits, {
         cssClasses: cssClasses,
         hits: hits,
         results: results,
@@ -18256,7 +18461,8 @@
       ariaLabel: "First",
       className: props.cssClasses.firstPageItem,
       isDisabled: props.isFirstPage,
-      label: props.templates.first,
+      templates: props.templates,
+      templateKey: "first",
       pageNumber: 0,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
@@ -18265,7 +18471,8 @@
       ariaLabel: "Previous",
       className: props.cssClasses.previousPageItem,
       isDisabled: props.isFirstPage,
-      label: props.templates.previous,
+      templates: props.templates,
+      templateKey: "previous",
       pageNumber: props.currentPage - 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
@@ -18276,7 +18483,8 @@
         ariaLabel: "Page ".concat(pageNumber + 1),
         className: props.cssClasses.pageItem,
         isSelected: pageNumber === props.currentPage,
-        label: "".concat(pageNumber + 1),
+        templates: props.templates,
+        templateKey: "page",
         pageNumber: pageNumber,
         createURL: props.createURL,
         cssClasses: props.cssClasses,
@@ -18286,7 +18494,8 @@
       ariaLabel: "Next",
       className: props.cssClasses.nextPageItem,
       isDisabled: props.isLastPage,
-      label: props.templates.next,
+      templates: props.templates,
+      templateKey: "next",
       pageNumber: props.currentPage + 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
@@ -18295,7 +18504,8 @@
       ariaLabel: "Last",
       className: props.cssClasses.lastPageItem,
       isDisabled: props.isLastPage,
-      label: props.templates.last,
+      templates: props.templates,
+      templateKey: "last",
       pageNumber: props.nbPages - 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
@@ -18303,7 +18513,8 @@
     })));
   }
   function PaginationLink(_ref) {
-    var label = _ref.label,
+    var templates = _ref.templates,
+      templateKey = _ref.templateKey,
       ariaLabel = _ref.ariaLabel,
       pageNumber = _ref.pageNumber,
       className = _ref.className,
@@ -18316,18 +18527,28 @@
       createClickHandler = _ref.createClickHandler;
     return h("li", {
       className: cx(cssClasses.item, className, isDisabled && cssClasses.disabledItem, isSelected && cssClasses.selectedItem)
-    }, isDisabled ? h("span", {
-      className: cssClasses.link,
-      dangerouslySetInnerHTML: {
-        __html: label
+    }, isDisabled ? h(Template, {
+      rootTagName: "span",
+      rootProps: {
+        className: cssClasses.link
+      },
+      templateKey: templateKey,
+      templates: templates,
+      data: {
+        page: pageNumber + 1
       }
-    }) : h("a", {
-      className: cssClasses.link,
-      "aria-label": ariaLabel,
-      href: createURL(pageNumber),
-      onClick: createClickHandler(pageNumber),
-      dangerouslySetInnerHTML: {
-        __html: label
+    }) : h(Template, {
+      rootTagName: "a",
+      rootProps: {
+        className: cssClasses.link,
+        'aria-label': ariaLabel,
+        href: createURL(pageNumber),
+        onClick: createClickHandler(pageNumber)
+      },
+      templateKey: templateKey,
+      templates: templates,
+      data: {
+        page: pageNumber + 1
       }
     }));
   }
@@ -18337,28 +18558,40 @@
     name: 'pagination'
   });
   var defaultTemplates$a = {
-    previous: '‹',
-    next: '›',
-    first: '«',
-    last: '»'
+    previous: function previous() {
+      return '‹';
+    },
+    next: function next() {
+      return '›';
+    },
+    page: function page(_ref) {
+      var _page = _ref.page;
+      return "".concat(_page);
+    },
+    first: function first() {
+      return '«';
+    },
+    last: function last() {
+      return '»';
+    }
   };
-  var renderer$c = function renderer(_ref) {
-    var containerNode = _ref.containerNode,
-      cssClasses = _ref.cssClasses,
-      templates = _ref.templates,
-      showFirst = _ref.showFirst,
-      showLast = _ref.showLast,
-      showPrevious = _ref.showPrevious,
-      showNext = _ref.showNext,
-      scrollToNode = _ref.scrollToNode;
-    return function (_ref2, isFirstRendering) {
-      var createURL = _ref2.createURL,
-        currentRefinement = _ref2.currentRefinement,
-        nbPages = _ref2.nbPages,
-        pages = _ref2.pages,
-        isFirstPage = _ref2.isFirstPage,
-        isLastPage = _ref2.isLastPage,
-        refine = _ref2.refine;
+  var renderer$c = function renderer(_ref2) {
+    var containerNode = _ref2.containerNode,
+      cssClasses = _ref2.cssClasses,
+      templates = _ref2.templates,
+      showFirst = _ref2.showFirst,
+      showLast = _ref2.showLast,
+      showPrevious = _ref2.showPrevious,
+      showNext = _ref2.showNext,
+      scrollToNode = _ref2.scrollToNode;
+    return function (_ref3, isFirstRendering) {
+      var createURL = _ref3.createURL,
+        currentRefinement = _ref3.currentRefinement,
+        nbPages = _ref3.nbPages,
+        pages = _ref3.pages,
+        isFirstPage = _ref3.isFirstPage,
+        isLastPage = _ref3.isLastPage,
+        refine = _ref3.refine;
       if (isFirstRendering) return;
       var setCurrentPage = function setCurrentPage(pageNumber) {
         refine(pageNumber);
@@ -18384,24 +18617,24 @@
     };
   };
   var pagination = function pagination(widgetParams) {
-    var _ref3 = widgetParams || {},
-      container = _ref3.container,
-      _ref3$templates = _ref3.templates,
-      userTemplates = _ref3$templates === void 0 ? {} : _ref3$templates,
-      _ref3$cssClasses = _ref3.cssClasses,
-      userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses,
-      totalPages = _ref3.totalPages,
-      padding = _ref3.padding,
-      _ref3$showFirst = _ref3.showFirst,
-      showFirst = _ref3$showFirst === void 0 ? true : _ref3$showFirst,
-      _ref3$showLast = _ref3.showLast,
-      showLast = _ref3$showLast === void 0 ? true : _ref3$showLast,
-      _ref3$showPrevious = _ref3.showPrevious,
-      showPrevious = _ref3$showPrevious === void 0 ? true : _ref3$showPrevious,
-      _ref3$showNext = _ref3.showNext,
-      showNext = _ref3$showNext === void 0 ? true : _ref3$showNext,
-      _ref3$scrollTo = _ref3.scrollTo,
-      userScrollTo = _ref3$scrollTo === void 0 ? 'body' : _ref3$scrollTo;
+    var _ref4 = widgetParams || {},
+      container = _ref4.container,
+      _ref4$templates = _ref4.templates,
+      userTemplates = _ref4$templates === void 0 ? {} : _ref4$templates,
+      _ref4$cssClasses = _ref4.cssClasses,
+      userCssClasses = _ref4$cssClasses === void 0 ? {} : _ref4$cssClasses,
+      totalPages = _ref4.totalPages,
+      padding = _ref4.padding,
+      _ref4$showFirst = _ref4.showFirst,
+      showFirst = _ref4$showFirst === void 0 ? true : _ref4$showFirst,
+      _ref4$showLast = _ref4.showLast,
+      showLast = _ref4$showLast === void 0 ? true : _ref4$showLast,
+      _ref4$showPrevious = _ref4.showPrevious,
+      showPrevious = _ref4$showPrevious === void 0 ? true : _ref4$showPrevious,
+      _ref4$showNext = _ref4.showNext,
+      showNext = _ref4$showNext === void 0 ? true : _ref4$showNext,
+      _ref4$scrollTo = _ref4.scrollTo,
+      userScrollTo = _ref4$scrollTo === void 0 ? 'body' : _ref4$scrollTo;
     if (!container) {
       throw new Error(withUsage$G('The `container` option is required.'));
     }
@@ -18619,8 +18852,6 @@
         }
         var containerNode = getContainerNode(widgetParams.container);
         var defaultTemplates = {
-          header: '',
-          footer: '',
           collapseButtonText: function collapseButtonText(_ref4) {
             var isCollapsed = _ref4.collapsed;
             return "<svg\n          class=\"".concat(cssClasses.collapseIcon, "\"\n          style=\"width: 1em; height: 1em;\"\n          viewBox=\"0 0 500 500\"\n        >\n        <path d=\"").concat(isCollapsed ? 'M100 250l300-150v300z' : 'M250 400l150-300H100z', "\" fill=\"currentColor\" />\n        </svg>");
@@ -18692,7 +18923,7 @@
   };
 
   var _excluded$l = ["placesReference", "defaultPosition"],
-    _excluded2$4 = ["places"];
+    _excluded2$5 = ["places"];
   /* Places.js is an optional dependency, no error should be reported if the package is missing */
   /** @ts-ignore */
 
@@ -18748,7 +18979,7 @@
         var hasPositionSet = position !== defaultPosition.join(',');
         if (!hasPositionSet && !state.query) {
           var places = uiState.places,
-            uiStateWithoutPlaces = _objectWithoutProperties(uiState, _excluded2$4);
+            uiStateWithoutPlaces = _objectWithoutProperties(uiState, _excluded2$5);
           return uiStateWithoutPlaces;
         }
         return _objectSpread2(_objectSpread2({}, uiState), {}, {