instantsearch.js 4.54.1 → 4.56.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.54.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.56.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',
@@ -1426,6 +1446,18 @@
     return isMiddleClick || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
   }
 
+  /**
+   * Recurse over all child indices
+   */
+  function walkIndex(indexWidget, callback) {
+    callback(indexWidget);
+    indexWidget.getWidgets().forEach(function (widget) {
+      if (isIndexWidget(widget)) {
+        walkIndex(widget, callback);
+      }
+    });
+  }
+
   function uniq(array) {
     return array.filter(function (value, index, self) {
       return self.indexOf(value) === index;
@@ -1595,13 +1627,14 @@
   }
   function createRenderArgs(instantSearchInstance, parent) {
     var results = parent.getResults();
+    var helper = parent.getHelper();
     return {
-      helper: parent.getHelper(),
+      helper: helper,
       parent: parent,
       instantSearchInstance: instantSearchInstance,
       results: results,
       scopedResults: parent.getScopedResults(),
-      state: results._state,
+      state: results ? results._state : helper.state,
       renderState: instantSearchInstance.renderState,
       templatesConfig: instantSearchInstance.templatesConfig,
       createURL: parent.createURL,
@@ -2384,7 +2417,7 @@
           }
           if (!_refine) {
             _refine = function _refine(facetValue) {
-              sendEvent('click', facetValue);
+              sendEvent('click:internal', facetValue);
               helper.toggleFacetRefinement(hierarchicalFacetName, facetValue).search();
             };
           }
@@ -2490,7 +2523,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 +2700,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 +2717,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 +2745,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 +2781,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 +2792,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 +2924,8 @@
     };
   };
 
-  var _excluded$2 = ["page"];
+  var _excluded$2 = ["page"],
+    _excluded2 = ["clickAnalytics", "userToken"];
   var withUsage$7 = createDocumentationMessageGenerator({
     name: 'infinite-hits',
     connector: true
@@ -2908,17 +2936,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 +2973,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 +3012,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 +3020,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 +3037,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 +3059,7 @@
            */
           var state = parent.getPreviousState() || existingState;
           var cachedHits = cache.read({
-            state: state
+            state: normalizeState(state)
           }) || {};
           if (!results) {
             showPrevious = getShowPrevious(helper);
@@ -3041,6 +3076,7 @@
             });
             isFirstPage = state.page === undefined || getFirstReceivedPage(state, cachedHits) === 0;
           } else {
+            var _results$disjunctiveF, _results$facets, _results$hierarchical;
             var _state$page3 = state.page,
               _page = _state$page3 === void 0 ? 0 : _state$page3;
             if (escapeHTML && results.hits.length > 0) {
@@ -3051,10 +3087,24 @@
             var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID, {
               results: results
             });
-            if (cachedHits[_page] === undefined && !results.__isArtificial && instantSearchInstance.status === 'idle') {
+
+            /*
+              With dynamic widgets, facets are not included in the state before their relevant widgets are mounted. Until then, we need to bail out of writing this incomplete state representation in cache.
+            */
+            var hasDynamicWidgets = false;
+            walkIndex(instantSearchInstance.mainIndex, function (indexWidget) {
+              if (!hasDynamicWidgets && indexWidget.getWidgets().some(function (_ref7) {
+                var $$type = _ref7.$$type;
+                return $$type === 'ais.dynamicWidgets';
+              })) {
+                hasDynamicWidgets = true;
+              }
+            });
+            var hasNoFacets = !((_results$disjunctiveF = results.disjunctiveFacets) !== null && _results$disjunctiveF !== void 0 && _results$disjunctiveF.length) && !((_results$facets = results.facets) !== null && _results$facets !== void 0 && _results$facets.length) && !((_results$hierarchical = results.hierarchicalFacets) !== null && _results$hierarchical !== void 0 && _results$hierarchical.length);
+            if (cachedHits[_page] === undefined && !results.__isArtificial && instantSearchInstance.status === 'idle' && !(hasDynamicWidgets && hasNoFacets)) {
               cachedHits[_page] = transformedHits;
               cache.write({
-                state: state,
+                state: normalizeState(state),
                 hits: cachedHits
               });
             }
@@ -3076,8 +3126,8 @@
             widgetParams: widgetParams
           };
         },
-        dispose: function dispose(_ref6) {
-          var state = _ref6.state;
+        dispose: function dispose(_ref8) {
+          var state = _ref8.state;
           unmountFn();
           var stateWithoutPage = state.setQueryParameter('page', undefined);
           if (!escapeHTML) {
@@ -3087,8 +3137,8 @@
             return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, key, undefined));
           }, {}));
         },
-        getWidgetUiState: function getWidgetUiState(uiState, _ref7) {
-          var searchParameters = _ref7.searchParameters;
+        getWidgetUiState: function getWidgetUiState(uiState, _ref9) {
+          var searchParameters = _ref9.searchParameters;
           var page = searchParameters.page || 0;
           if (!page) {
             // return without adding `page` to uiState
@@ -3101,8 +3151,8 @@
             page: page + 1
           });
         },
-        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref8) {
-          var uiState = _ref8.uiState;
+        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref10) {
+          var uiState = _ref10.uiState;
           var widgetSearchParameters = searchParameters;
           if (escapeHTML) {
             widgetSearchParameters = searchParameters.setQueryParameters(TAG_PLACEHOLDER);
@@ -3227,7 +3277,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 +3478,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 +4042,7 @@
   };
 
   var _excluded$4 = ["name", "escapedValue"],
-    _excluded2 = ["escapedValue", "value"];
+    _excluded2$1 = ["escapedValue", "value"];
   var withUsage$c = createDocumentationMessageGenerator({
     name: 'refinement-list',
     connector: true
@@ -4101,7 +4151,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 +4206,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 +4509,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 +4525,7 @@
           insightsMethod: 'clickedFilters',
           widgetType: $$type$2,
           eventType: eventType,
+          eventModifier: eventModifier,
           payload: {
             eventName: eventName,
             index: helper.getIndex(),
@@ -4547,7 +4601,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 +4830,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 +4848,7 @@
           insightsMethod: 'clickedFilters',
           widgetType: $$type$3,
           eventType: eventType,
+          eventModifier: eventModifier,
           payload: {
             eventName: eventName,
             index: helper.getIndex(),
@@ -4837,7 +4895,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 +5356,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);
@@ -9379,7 +9437,7 @@
 
   var requestBuilder_1 = requestBuilder;
 
-  var version = '3.11.3';
+  var version = '3.13.0';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -10645,7 +10703,9 @@
 
     var derivedQueries = this.derivedHelpers.map(function(derivedHelper) {
       var derivedState = derivedHelper.getModifiedState(state);
-      var derivedStateQueries = requestBuilder_1._getQueries(derivedState.index, derivedState);
+      var derivedStateQueries = derivedState.index
+        ? requestBuilder_1._getQueries(derivedState.index, derivedState)
+        : [];
 
       states.push({
         state: derivedState,
@@ -10662,10 +10722,16 @@
     });
 
     var queries = Array.prototype.concat.apply(mainQueries, derivedQueries);
-    var queryId = this._queryId++;
 
+    var queryId = this._queryId++;
     this._currentNbQueries++;
 
+    if (!queries.length) {
+      return Promise.resolve({results: []}).then(
+        this._dispatchAlgoliaResponse.bind(this, states, queryId)
+      );
+    }
+
     try {
       this.client.search(queries)
         .then(this._dispatchAlgoliaResponse.bind(this, states, queryId))
@@ -10710,6 +10776,14 @@
       var helper = s.helper;
       var specificResults = results.splice(0, queriesCount);
 
+      if (!state.index) {
+        helper.emit('result', {
+          results: null,
+          state: state
+        });
+        return;
+      }
+
       var formattedResponse = helper.lastResults = new SearchResults_1(state, specificResults);
 
       helper.emit('result', {
@@ -11109,7 +11183,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
@@ -11899,7 +11973,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 = {};
@@ -11921,7 +12219,7 @@
         params: params
       });
       if (widget.$$type === 'ais.index') {
-        extractPayload(widget.getWidgets(), instantSearchInstance, payload);
+        extractWidgetPayload(widget.getWidgets(), instantSearchInstance, payload);
       }
     });
   }
@@ -11945,8 +12243,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: []
       };
@@ -11954,13 +12255,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);
@@ -12796,6 +13106,48 @@
     }
   };
   var BrowserHistory = /*#__PURE__*/function () {
+    /**
+     * Transforms a UI state into a title for the page.
+     */
+
+    /**
+     * Time in milliseconds before performing a write in the history.
+     * It prevents from adding too many entries in the history and
+     * makes the back button more usable.
+     *
+     * @default 400
+     */
+
+    /**
+     * Creates a full URL based on the route state.
+     * The storage adaptor maps all syncable keys to the query string of the URL.
+     */
+
+    /**
+     * Parses the URL into a route state.
+     * It should be symmetrical to `createURL`.
+     */
+
+    /**
+     * Returns the location to store in the history.
+     * @default () => window.location
+     */
+
+    /**
+     * Indicates if last action was back/forward in the browser.
+     */
+
+    /**
+     * Indicates whether the history router is disposed or not.
+     */
+
+    /**
+     * Indicates the window.history.length before the last call to
+     * window.history.pushState (called in `write`).
+     * It allows to determine if a `pushState` has been triggered elsewhere,
+     * and thus to prevent the `write` method from calling `pushState`.
+     */
+
     /**
      * Initializes a new storage provider that syncs the search state to the URL
      * using web APIs (`window.location.pushState` and `onpopstate` event).
@@ -12812,12 +13164,14 @@
         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);
       _defineProperty(this, "parseURL", void 0);
       _defineProperty(this, "getLocation", void 0);
       _defineProperty(this, "writeTimer", void 0);
+      _defineProperty(this, "_onPopState", void 0);
       _defineProperty(this, "inPopState", false);
       _defineProperty(this, "isDisposed", false);
       _defineProperty(this, "latestAcknowledgedHistory", 0);
@@ -12923,11 +13277,21 @@
     }, {
       key: "createURL",
       value: function createURL(routeState) {
-        return this._createURL({
+        var url = this._createURL({
           qsModule: lib$1,
           routeState: routeState,
           location: this.getLocation()
         });
+        {
+          try {
+            // We just want to check if the URL is valid.
+            // eslint-disable-next-line no-new
+            new URL(url);
+          } catch (e) {
+             _warning(false, "The URL returned by the `createURL` function is invalid.\nPlease make sure it returns an absolute URL to avoid issues, e.g: `https://algolia.com/search?query=iphone`.") ;
+          }
+        }
+        return url;
       }
 
       /**
@@ -13064,6 +13428,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])));
@@ -13083,7 +13448,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) {
@@ -13100,6 +13467,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);
@@ -13443,7 +13812,7 @@
           // does not have access to lastResults, which it used to in pre-federated
           // search behavior.
           helper.lastResults = results;
-          lastValidSearchParameters = results._state;
+          lastValidSearchParameters = results === null || results === void 0 ? void 0 : results._state;
         });
 
         // We compute the render state before calling `init` in a separate loop
@@ -13499,16 +13868,16 @@
       render: function render(_ref5) {
         var _this4 = this;
         var instantSearchInstance = _ref5.instantSearchInstance;
-        if (!this.getResults()) {
-          return;
-        }
-
         // we can't attach a listener to the error event of search, as the error
         // then would no longer be thrown for global handlers.
-        if (instantSearchInstance.status === 'error' && !instantSearchInstance.mainHelper.hasPendingRequests()) {
+        if (instantSearchInstance.status === 'error' && !instantSearchInstance.mainHelper.hasPendingRequests() && lastValidSearchParameters) {
           helper.setState(lastValidSearchParameters);
         }
-        localWidgets.forEach(function (widget) {
+
+        // We only render index widgets if there are no results.
+        // This makes sure `render` is never called with `results` being `null`.
+        var widgetsToRender = this.getResults() ? localWidgets : localWidgets.filter(isIndexWidget);
+        widgetsToRender.forEach(function (widget) {
           if (widget.getRenderState) {
             var renderState = widget.getRenderState(instantSearchInstance.renderState[_this4.getIndexId()] || {}, createRenderArgs(instantSearchInstance, _this4));
             storeRenderState({
@@ -13518,7 +13887,7 @@
             });
           }
         });
-        localWidgets.forEach(function (widget) {
+        widgetsToRender.forEach(function (widget) {
           // At this point, all the variables used below are set. Both `helper`
           // and `derivedHelper` have been created at the `init` step. The attribute
           // `lastResults` might be `null` though. It's possible that a stalled render
@@ -13660,7 +14029,7 @@
     };
   }
 
-  var version$1 = '4.54.1';
+  var version$1 = '4.56.0';
 
   var withUsage$r = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -13739,12 +14108,14 @@
       }));
       _this.setMaxListeners(100);
       var _options$indexName = options.indexName,
-        indexName = _options$indexName === void 0 ? null : _options$indexName,
+        indexName = _options$indexName === void 0 ? '' : _options$indexName,
         numberLocale = options.numberLocale,
         _options$initialUiSta = options.initialUiState,
         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,
@@ -13754,9 +14125,6 @@
         insightsClient = _options$insightsClie === void 0 ? null : _options$insightsClie,
         _options$onStateChang = options.onStateChange,
         onStateChange = _options$onStateChang === void 0 ? null : _options$onStateChang;
-      if (indexName === null) {
-        throw new Error(withUsage$r('The `indexName` option is required.'));
-      }
       if (searchClient === null) {
         throw new Error(withUsage$r('The `searchClient` option is required.'));
       }
@@ -13800,11 +14168,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;
     }
@@ -13840,6 +14219,8 @@
         }
         var newMiddlewareList = middleware.map(function (fn) {
           var newMiddleware = _objectSpread2({
+            $$type: '__unknown__',
+            $$internal: false,
             subscribe: noop,
             started: noop,
             unsubscribe: noop,
@@ -13985,6 +14366,7 @@
         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.') ;
 
           // 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
@@ -14217,6 +14599,7 @@
   }
   function singleIndexStateMapping(indexName) {
     return {
+      $$type: 'ais.singleIndex',
       stateToRoute: function stateToRoute(uiState) {
         return getIndexStateWithoutConfigure$1(uiState[indexName] || {});
       },
@@ -14235,130 +14618,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({
@@ -15375,7 +15634,7 @@
   }
 
   var _excluded$d = ["hit", "attribute", "cssClasses"],
-    _excluded2$1 = ["isHighlighted"];
+    _excluded2$2 = ["isHighlighted"];
   function ReverseHighlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
@@ -15388,7 +15647,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
         });
@@ -15416,7 +15675,7 @@
   }
 
   var _excluded$f = ["hit", "attribute", "cssClasses"],
-    _excluded2$2 = ["isHighlighted"];
+    _excluded2$3 = ["isHighlighted"];
   function ReverseSnippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
@@ -15429,7 +15688,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
         });
@@ -15970,10 +16229,10 @@
       rootTagName: "a",
       rootProps: {
         className: cssClasses.link,
-        href: createURL(undefined),
+        href: createURL(null),
         onClick: function onClick(event) {
           event.preventDefault();
-          refine(undefined);
+          refine(null);
         }
       }
     }))), items.map(function (item, idx) {
@@ -16719,7 +16978,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'
@@ -16821,7 +17080,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,
@@ -17100,49 +17359,36 @@
   var RefinementList$1 = /*#__PURE__*/function (_Component) {
     _inherits(RefinementList, _Component);
     var _super = _createSuper(RefinementList);
-    function RefinementList(props) {
+    function RefinementList() {
       var _this;
       _classCallCheck(this, RefinementList);
-      _this = _super.call(this, props);
-      _defineProperty(_assertThisInitialized(_this), "searchBox", y());
-      _this.handleItemClick = _this.handleItemClick.bind(_assertThisInitialized(_this));
-      return _this;
-    }
-    _createClass(RefinementList, [{
-      key: "shouldComponentUpdate",
-      value: function shouldComponentUpdate(nextProps) {
-        var areFacetValuesDifferent = !isEqual(this.props.facetValues, nextProps.facetValues);
-        return areFacetValuesDifferent;
-      }
-    }, {
-      key: "refine",
-      value: function refine(facetValueToRefine) {
-        this.props.toggleRefinement(facetValueToRefine);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-    }, {
-      key: "_generateFacetItem",
-      value: function _generateFacetItem(facetValue) {
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "searchBox", y());
+      _defineProperty(_assertThisInitialized(_this), "_generateFacetItem", function (facetValue) {
         var subItems;
         if (isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) {
-          var _this$props$cssClasse = this.props.cssClasses,
+          var _this$props$cssClasse = _this.props.cssClasses,
             root = _this$props$cssClasse.root,
             cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$k);
-          subItems = h(RefinementList, _extends({}, this.props, {
+          subItems = h(RefinementList, _extends({}, _this.props, {
             // We want to keep `root` required for external usage but not for the
             // sub items.
             cssClasses: cssClasses,
-            depth: this.props.depth + 1,
+            depth: _this.props.depth + 1,
             facetValues: facetValue.data,
             showMore: false,
-            className: this.props.cssClasses.childList
+            className: _this.props.cssClasses.childList
           }));
         }
-        var url = this.props.createURL(facetValue.value);
+        var url = _this.props.createURL(facetValue.value);
         var templateData = _objectSpread2(_objectSpread2({}, facetValue), {}, {
           url: url,
-          attribute: this.props.attribute,
-          cssClasses: this.props.cssClasses,
-          isFromSearch: this.props.isFromSearch
+          attribute: _this.props.attribute,
+          cssClasses: _this.props.cssClasses,
+          isFromSearch: _this.props.isFromSearch
         });
         var key = facetValue.value;
         if (facetValue.isRefined !== undefined) {
@@ -17151,38 +17397,20 @@
         if (facetValue.count !== undefined) {
           key += "/".concat(facetValue.count);
         }
-        var refinementListItemClassName = cx(this.props.cssClasses.item, facetValue.isRefined && this.props.cssClasses.selectedItem, !facetValue.count && this.props.cssClasses.disabledItem, Boolean(isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) && this.props.cssClasses.parentItem);
+        var refinementListItemClassName = cx(_this.props.cssClasses.item, facetValue.isRefined && _this.props.cssClasses.selectedItem, !facetValue.count && _this.props.cssClasses.disabledItem, Boolean(isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) && _this.props.cssClasses.parentItem);
         return h(RefinementListItem, {
           templateKey: "item",
           key: key,
           facetValueToRefine: facetValue.value,
-          handleClick: this.handleItemClick,
+          handleClick: _this.handleItemClick,
           isRefined: facetValue.isRefined,
           className: refinementListItemClassName,
           subItems: subItems,
           templateData: templateData,
-          templateProps: this.props.templateProps
+          templateProps: _this.props.templateProps
         });
-      }
-
-      // Click events on DOM tree like LABEL > INPUT will result in two click events
-      // instead of one.
-      // No matter the framework, see https://www.google.com/search?q=click+label+twice
-      //
-      // Thus making it hard to distinguish activation from deactivation because both click events
-      // are very close. Debounce is a solution but hacky.
-      //
-      // So the code here checks if the click was done on or in a LABEL. If this LABEL
-      // has a checkbox inside, we ignore the first click event because we will get another one.
-      //
-      // We also check if the click was done inside a link and then e.preventDefault() because we already
-      // handle the url
-      //
-      // Finally, we always stop propagation of the event to avoid multiple levels RefinementLists to fail: click
-      // on child would click on parent also
-    }, {
-      key: "handleItemClick",
-      value: function handleItemClick(_ref) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleItemClick", function (_ref) {
         var facetValueToRefine = _ref.facetValueToRefine,
           isRefined = _ref.isRefined,
           originalEvent = _ref.originalEvent;
@@ -17199,7 +17427,7 @@
           return;
         }
         if (originalEvent.target.tagName === 'INPUT') {
-          this.refine(facetValueToRefine);
+          _this.refine(facetValueToRefine);
           return;
         }
         var parent = originalEvent.target;
@@ -17213,7 +17441,20 @@
           parent = parent.parentNode;
         }
         originalEvent.stopPropagation();
-        this.refine(facetValueToRefine);
+        _this.refine(facetValueToRefine);
+      });
+      return _this;
+    }
+    _createClass(RefinementList, [{
+      key: "shouldComponentUpdate",
+      value: function shouldComponentUpdate(nextProps) {
+        var areFacetValuesDifferent = !isEqual(this.props.facetValues, nextProps.facetValues);
+        return areFacetValuesDifferent;
+      }
+    }, {
+      key: "refine",
+      value: function refine(facetValueToRefine) {
+        this.props.toggleRefinement(facetValueToRefine);
       }
     }, {
       key: "componentWillReceiveProps",
@@ -17494,18 +17735,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
       }));
@@ -17519,7 +17766,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), {}, {
@@ -17532,7 +17783,7 @@
         sendEvent: sendEvent
       }));
     })));
-  };
+  }
 
   var defaultTemplates$5 = {
     empty: function empty() {
@@ -17547,7 +17798,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,
@@ -17568,7 +17818,7 @@
         });
         return;
       }
-      P(h(HitsWithInsightsListener, {
+      P(h(Hits, {
         cssClasses: cssClasses,
         hits: receivedHits,
         results: results,
@@ -17662,7 +17912,9 @@
       }, h(Selector, {
         cssClasses: cssClasses,
         currentValue: currentValue,
-        options: items,
+        options: items
+        // @ts-expect-error: the refine function expects a number, but setValue will call it with a string. We don't want to change the type of the refine function because it's part of the connector API.
+        ,
         setValue: refine
       })), containerNode);
     };
@@ -17705,6 +17957,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,
@@ -17714,11 +17967,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
       }));
@@ -17740,7 +17998,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), {}, {
@@ -17782,7 +18044,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,
@@ -17808,7 +18069,7 @@
         });
         return;
       }
-      P(h(InfiniteHitsWithInsightsListener, {
+      P(h(InfiniteHits, {
         cssClasses: cssClasses,
         hits: hits,
         results: results,
@@ -18741,7 +19002,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 */
 
@@ -18797,7 +19058,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), {}, {
@@ -19012,10 +19273,17 @@
     });
   };
 
+  // Strips leading `0` from a positive number value
+  function stripLeadingZeroFromInput(value) {
+    return value.replace(/^(0+)\d/, function (part) {
+      return Number(part).toString();
+    });
+  }
   var RangeInput = /*#__PURE__*/function (_Component) {
     _inherits(RangeInput, _Component);
     var _super = _createSuper(RangeInput);
     function RangeInput() {
+      var _this$props$values$mi, _this$props$values$ma;
       var _this;
       _classCallCheck(this, RangeInput);
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -19023,36 +19291,40 @@
       }
       _this = _super.call.apply(_super, [this].concat(args));
       _defineProperty(_assertThisInitialized(_this), "state", {
-        min: _this.props.values.min,
-        max: _this.props.values.max
+        min: (_this$props$values$mi = _this.props.values.min) === null || _this$props$values$mi === void 0 ? void 0 : _this$props$values$mi.toString(),
+        max: (_this$props$values$ma = _this.props.values.max) === null || _this$props$values$ma === void 0 ? void 0 : _this$props$values$ma.toString()
       });
       _defineProperty(_assertThisInitialized(_this), "onInput", function (key) {
         return function (event) {
           var _ref = event.currentTarget,
             value = _ref.value;
-          _this.setState(_defineProperty({}, key, Number(value)));
+          _this.setState(_defineProperty({}, key, value));
         };
       });
       _defineProperty(_assertThisInitialized(_this), "onSubmit", function (event) {
         event.preventDefault();
-        _this.props.refine([_this.state.min, _this.state.max]);
+        var _this$state = _this.state,
+          min = _this$state.min,
+          max = _this$state.max;
+        _this.props.refine([min ? Number(min) : undefined, max ? Number(max) : undefined]);
       });
       return _this;
     }
     _createClass(RangeInput, [{
       key: "componentWillReceiveProps",
       value: function componentWillReceiveProps(nextProps) {
+        var _nextProps$values$min, _nextProps$values$max;
         this.setState({
-          min: nextProps.values.min,
-          max: nextProps.values.max
+          min: (_nextProps$values$min = nextProps.values.min) === null || _nextProps$values$min === void 0 ? void 0 : _nextProps$values$min.toString(),
+          max: (_nextProps$values$max = nextProps.values.max) === null || _nextProps$values$max === void 0 ? void 0 : _nextProps$values$max.toString()
         });
       }
     }, {
       key: "render",
       value: function render() {
-        var _this$state = this.state,
-          minValue = _this$state.min,
-          maxValue = _this$state.max;
+        var _this$state2 = this.state,
+          minValue = _this$state2.min,
+          maxValue = _this$state2.max;
         var _this$props = this.props,
           min = _this$props.min,
           max = _this$props.max,
@@ -19075,7 +19347,7 @@
           min: min,
           max: max,
           step: step,
-          value: minValue !== null && minValue !== void 0 ? minValue : '',
+          value: stripLeadingZeroFromInput(minValue !== null && minValue !== void 0 ? minValue : ''),
           onInput: this.onInput('min'),
           placeholder: min === null || min === void 0 ? void 0 : min.toString(),
           disabled: isDisabled
@@ -19093,7 +19365,7 @@
           min: min,
           max: max,
           step: step,
-          value: maxValue !== null && maxValue !== void 0 ? maxValue : '',
+          value: stripLeadingZeroFromInput(maxValue !== null && maxValue !== void 0 ? maxValue : ''),
           onInput: this.onInput('max'),
           placeholder: max === null || max === void 0 ? void 0 : max.toString(),
           disabled: isDisabled
@@ -19296,10 +19568,16 @@
   var Rheostat = /*#__PURE__*/function (_Component) {
     _inherits(Rheostat, _Component);
     var _super = _createSuper(Rheostat);
-    function Rheostat(props) {
+    function Rheostat() {
       var _this;
       _classCallCheck(this, Rheostat);
-      _this = _super.call(this, props);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "x", [0, 0].map(function (y) {
+        return y;
+      }));
       _defineProperty(_assertThisInitialized(_this), "state", {
         className: getClassName(_this.props),
         // non-null thanks to defaultProps
@@ -19314,44 +19592,14 @@
         values: _this.props.values
       });
       _defineProperty(_assertThisInitialized(_this), "rheostat", y());
-      _this.getPublicState = _this.getPublicState.bind(_assertThisInitialized(_this));
-      _this.getSliderBoundingBox = _this.getSliderBoundingBox.bind(_assertThisInitialized(_this));
-      _this.getProgressStyle = _this.getProgressStyle.bind(_assertThisInitialized(_this));
-      _this.getMinValue = _this.getMinValue.bind(_assertThisInitialized(_this));
-      _this.getMaxValue = _this.getMaxValue.bind(_assertThisInitialized(_this));
-      _this.getHandleDimensions = _this.getHandleDimensions.bind(_assertThisInitialized(_this));
-      _this.getClosestSnapPoint = _this.getClosestSnapPoint.bind(_assertThisInitialized(_this));
-      _this.getSnapPosition = _this.getSnapPosition.bind(_assertThisInitialized(_this));
-      _this.getNextPositionForKey = _this.getNextPositionForKey.bind(_assertThisInitialized(_this));
-      _this.getNextState = _this.getNextState.bind(_assertThisInitialized(_this));
-      _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-      _this.getClosestHandle = _this.getClosestHandle.bind(_assertThisInitialized(_this));
-      _this.setStartSlide = _this.setStartSlide.bind(_assertThisInitialized(_this));
-      _this.startMouseSlide = _this.startMouseSlide.bind(_assertThisInitialized(_this));
-      _this.startTouchSlide = _this.startTouchSlide.bind(_assertThisInitialized(_this));
-      _this.handleMouseSlide = _this.handleMouseSlide.bind(_assertThisInitialized(_this));
-      _this.handleTouchSlide = _this.handleTouchSlide.bind(_assertThisInitialized(_this));
-      _this.handleSlide = _this.handleSlide.bind(_assertThisInitialized(_this));
-      _this.endSlide = _this.endSlide.bind(_assertThisInitialized(_this));
-      _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this));
-      _this.validatePosition = _this.validatePosition.bind(_assertThisInitialized(_this));
-      _this.validateValues = _this.validateValues.bind(_assertThisInitialized(_this));
-      _this.canMove = _this.canMove.bind(_assertThisInitialized(_this));
-      _this.fireChangeEvent = _this.fireChangeEvent.bind(_assertThisInitialized(_this));
-      _this.slideTo = _this.slideTo.bind(_assertThisInitialized(_this));
-      _this.updateNewValues = _this.updateNewValues.bind(_assertThisInitialized(_this));
-      return _this;
-    }
-    _createClass(Rheostat, [{
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
-        var _this$props = this.props,
+      _defineProperty(_assertThisInitialized(_this), "componentWillReceiveProps", function (nextProps) {
+        var _this$props = _this.props,
           className = _this$props.className,
           disabled = _this$props.disabled,
           min = _this$props.min,
           max = _this$props.max,
           orientation = _this$props.orientation;
-        var _this$state = this.state,
+        var _this$state = _this.state,
           values = _this$state.values,
           slidingIndex = _this$state.slidingIndex;
         var minMaxChanged = nextProps.min !== min || nextProps.max !== max;
@@ -19361,33 +19609,29 @@
         var orientationChanged = nextProps.className !== className || nextProps.orientation !== orientation;
         var willBeDisabled = nextProps.disabled && !disabled;
         if (orientationChanged) {
-          this.setState({
+          _this.setState({
             className: getClassName(nextProps)
           });
         }
-        if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
+        if (minMaxChanged || valuesChanged) _this.updateNewValues(nextProps);
         if (willBeDisabled && slidingIndex !== null) {
-          this.endSlide();
+          _this.endSlide();
         }
-      }
-    }, {
-      key: "getPublicState",
-      value: function getPublicState() {
-        var _this$props2 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getPublicState", function () {
+        var _this$props2 = _this.props,
           min = _this$props2.min,
           max = _this$props2.max;
-        var values = this.state.values;
+        var values = _this.state.values;
         return {
           max: max,
           min: min,
           values: values
         };
-      }
-    }, {
-      key: "getSliderBoundingBox",
-      value: function getSliderBoundingBox() {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getSliderBoundingBox", function () {
         // only gets called after render, so it will always be defined
-        var node = this.rheostat.current;
+        var node = _this.rheostat.current;
         var rect = node.getBoundingClientRect();
         return {
           height: rect.height || node.clientHeight,
@@ -19395,14 +19639,12 @@
           top: rect.top,
           width: rect.width || node.clientWidth
         };
-      }
-    }, {
-      key: "getProgressStyle",
-      value: function getProgressStyle(idx) {
-        var handlePos = this.state.handlePos;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getProgressStyle", function (idx) {
+        var handlePos = _this.state.handlePos;
         var value = handlePos[idx];
         if (idx === 0) {
-          return this.props.orientation === 'vertical' ? {
+          return _this.props.orientation === 'vertical' ? {
             height: "".concat(value, "%"),
             top: 0
           } : {
@@ -19412,63 +19654,51 @@
         }
         var prevValue = handlePos[idx - 1];
         var diffValue = value - prevValue;
-        return this.props.orientation === 'vertical' ? {
+        return _this.props.orientation === 'vertical' ? {
           height: "".concat(diffValue, "%"),
           top: "".concat(prevValue, "%")
         } : {
           left: "".concat(prevValue, "%"),
           width: "".concat(diffValue, "%")
         };
-      }
-    }, {
-      key: "getMinValue",
-      value: function getMinValue(idx) {
-        return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
-      }
-    }, {
-      key: "getMaxValue",
-      value: function getMaxValue(idx) {
-        return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
-      }
-    }, {
-      key: "getHandleDimensions",
-      value: function getHandleDimensions(ev, sliderBox) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getMinValue", function (idx) {
+        return _this.state.values[idx - 1] ? Math.max(_this.props.min, _this.state.values[idx - 1]) : _this.props.min;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getMaxValue", function (idx) {
+        return _this.state.values[idx + 1] ? Math.min(_this.props.max, _this.state.values[idx + 1]) : _this.props.max;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getHandleDimensions", function (ev, sliderBox) {
         var handleNode = ev.currentTarget || null;
         if (!handleNode) return 0;
-        return this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
-      }
-    }, {
-      key: "getClosestSnapPoint",
-      value: function getClosestSnapPoint(value) {
+        return _this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getClosestSnapPoint", function (value) {
         // non-null thanks to defaultProps
-        if (!this.props.snapPoints.length) return value;
-        return this.props.snapPoints.reduce(function (snapTo, snap) {
+        if (!_this.props.snapPoints.length) return value;
+        return _this.props.snapPoints.reduce(function (snapTo, snap) {
           return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
         });
-      }
-    }, {
-      key: "getSnapPosition",
-      value: function getSnapPosition(positionPercent) {
-        if (!this.props.snap) return positionPercent;
-        var _ref = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getSnapPosition", function (positionPercent) {
+        if (!_this.props.snap) return positionPercent;
+        var _ref = _this.props,
           max = _ref.max,
           min = _ref.min;
         var value = getValue$1(positionPercent, min, max);
-        var snapValue = this.getClosestSnapPoint(value);
+        var snapValue = _this.getClosestSnapPoint(value);
         return getPosition(snapValue, min, max);
-      }
-    }, {
-      key: "getNextPositionForKey",
-      value: function getNextPositionForKey(idx, keyCode) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getNextPositionForKey", function (idx, keyCode) {
         var _stepMultiplier;
-        var _this$state2 = this.state,
+        var _this$state2 = _this.state,
           handlePos = _this$state2.handlePos,
           values = _this$state2.values;
-        var _ref2 = this.props,
+        var _ref2 = _this.props,
           max = _ref2.max,
           min = _ref2.min,
           snapPoints = _ref2.snapPoints;
-        var shouldSnap = this.props.snap;
+        var shouldSnap = _this.props.snap;
         var proposedValue = values[idx];
         var proposedPercentage = handlePos[idx];
         var originalPercentage = proposedPercentage;
@@ -19480,7 +19710,7 @@
         }
         var currentIndex = null;
         if (shouldSnap) {
-          currentIndex = snapPoints.indexOf(this.getClosestSnapPoint(values[idx]));
+          currentIndex = snapPoints.indexOf(_this.getClosestSnapPoint(values[idx]));
         }
         var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, KEYS.LEFT, function (v) {
           return v * -1;
@@ -19522,15 +19752,13 @@
           return null;
         }
         return shouldSnap ? getPosition(proposedValue, min, max) : proposedPercentage;
-      }
-    }, {
-      key: "getNextState",
-      value: function getNextState(idx, proposedPosition) {
-        var handlePos = this.state.handlePos;
-        var _ref3 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getNextState", function (idx, proposedPosition) {
+        var handlePos = _this.state.handlePos;
+        var _ref3 = _this.props,
           max = _ref3.max,
           min = _ref3.min;
-        var actualPosition = this.validatePosition(idx, proposedPosition);
+        var actualPosition = _this.validatePosition(idx, proposedPosition);
         var nextHandlePos = handlePos.map(function (pos, index) {
           return index === idx ? actualPosition : pos;
         });
@@ -19540,23 +19768,19 @@
             return getValue$1(pos, min, max);
           })
         };
-      }
-    }, {
-      key: "getClosestHandle",
-      value: function getClosestHandle(positionPercent) {
-        var handlePos = this.state.handlePos;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getClosestHandle", function (positionPercent) {
+        var handlePos = _this.state.handlePos;
         return handlePos.reduce(function (closestIdx, _node, idx) {
           var challenger = Math.abs(handlePos[idx] - positionPercent);
           var current = Math.abs(handlePos[closestIdx] - positionPercent);
           return challenger < current ? idx : closestIdx;
         }, 0);
-      }
-    }, {
-      key: "setStartSlide",
-      value: function setStartSlide(ev, x, y) {
-        var sliderBox = this.getSliderBoundingBox();
-        this.setState({
-          handleDimensions: this.getHandleDimensions(ev, sliderBox),
+      });
+      _defineProperty(_assertThisInitialized(_this), "setStartSlide", function (ev, x, y) {
+        var sliderBox = _this.getSliderBoundingBox();
+        _this.setState({
+          handleDimensions: _this.getHandleDimensions(ev, sliderBox),
           mousePos: {
             x: x,
             y: y
@@ -19564,144 +19788,118 @@
           sliderBox: sliderBox,
           slidingIndex: getHandleFor(ev)
         });
-      }
-    }, {
-      key: "startMouseSlide",
-      value: function startMouseSlide(ev) {
-        this.setStartSlide(ev, ev.clientX, ev.clientY);
-        document.addEventListener('mousemove', this.handleMouseSlide, false);
-        document.addEventListener('mouseup', this.endSlide, false);
+      });
+      _defineProperty(_assertThisInitialized(_this), "startMouseSlide", function (ev) {
+        _this.setStartSlide(ev, ev.clientX, ev.clientY);
+        document.addEventListener('mousemove', _this.handleMouseSlide, false);
+        document.addEventListener('mouseup', _this.endSlide, false);
         killEvent(ev);
-      }
-    }, {
-      key: "startTouchSlide",
-      value: function startTouchSlide(ev) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "startTouchSlide", function (ev) {
         if (ev.changedTouches.length > 1) return;
         var touch = ev.changedTouches[0];
-        this.setStartSlide(ev, touch.clientX, touch.clientY);
-        document.addEventListener('touchmove', this.handleTouchSlide, false);
-        document.addEventListener('touchend', this.endSlide, false);
-        if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+        _this.setStartSlide(ev, touch.clientX, touch.clientY);
+        document.addEventListener('touchmove', _this.handleTouchSlide, false);
+        document.addEventListener('touchend', _this.endSlide, false);
+        if (_this.props.onSliderDragStart) _this.props.onSliderDragStart();
         killEvent(ev);
-      }
-    }, {
-      key: "handleMouseSlide",
-      value: function handleMouseSlide(ev) {
-        if (this.state.slidingIndex === null) return;
-        this.handleSlide(ev.clientX, ev.clientY);
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleMouseSlide", function (ev) {
+        if (_this.state.slidingIndex === null) return;
+        _this.handleSlide(ev.clientX, ev.clientY);
         killEvent(ev);
-      }
-    }, {
-      key: "handleTouchSlide",
-      value: function handleTouchSlide(ev) {
-        if (this.state.slidingIndex === null) return;
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleTouchSlide", function (ev) {
+        if (_this.state.slidingIndex === null) return;
         if (ev.changedTouches.length > 1) {
-          this.endSlide();
+          _this.endSlide();
           return;
         }
         var touch = ev.changedTouches[0];
-        this.handleSlide(touch.clientX, touch.clientY);
+        _this.handleSlide(touch.clientX, touch.clientY);
         killEvent(ev);
-      }
-    }, {
-      key: "handleSlide",
-      value: function handleSlide(x, y) {
-        var _this$state3 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleSlide", function (x, y) {
+        var _this$state3 = _this.state,
           idx = _this$state3.slidingIndex,
           sliderBox = _this$state3.sliderBox;
-        var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
-        this.slideTo(idx, positionPercent);
-        if (this.canMove(idx, positionPercent)) {
+        var positionPercent = _this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
+        _this.slideTo(idx, positionPercent);
+        if (_this.canMove(idx, positionPercent)) {
           // update mouse positions
-          this.setState({
+          _this.setState({
             mousePos: {
               x: x,
               y: y
             }
           });
-          if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+          if (_this.props.onSliderDragMove) _this.props.onSliderDragMove();
         }
-      }
-    }, {
-      key: "endSlide",
-      value: function endSlide() {
-        var _this2 = this;
-        var idx = this.state.slidingIndex;
-        this.setState({
+      });
+      _defineProperty(_assertThisInitialized(_this), "endSlide", function () {
+        var idx = _this.state.slidingIndex;
+        _this.setState({
           slidingIndex: null
         });
-        document.removeEventListener('mouseup', this.endSlide, false);
-        document.removeEventListener('touchend', this.endSlide, false);
-        document.removeEventListener('touchmove', this.handleTouchSlide, false);
-        document.removeEventListener('mousemove', this.handleMouseSlide, false);
-        if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
-        if (this.props.snap) {
-          var positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
-          this.slideTo(idx, positionPercent, function () {
-            return _this2.fireChangeEvent();
+        document.removeEventListener('mouseup', _this.endSlide, false);
+        document.removeEventListener('touchend', _this.endSlide, false);
+        document.removeEventListener('touchmove', _this.handleTouchSlide, false);
+        document.removeEventListener('mousemove', _this.handleMouseSlide, false);
+        if (_this.props.onSliderDragEnd) _this.props.onSliderDragEnd();
+        if (_this.props.snap) {
+          var positionPercent = _this.getSnapPosition(_this.state.handlePos[idx]);
+          _this.slideTo(idx, positionPercent, function () {
+            return _this.fireChangeEvent();
           });
         } else {
-          this.fireChangeEvent();
+          _this.fireChangeEvent();
         }
-      }
-    }, {
-      key: "handleClick",
-      value: function handleClick(ev) {
-        var _this3 = this;
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleClick", function (ev) {
         if (ev.target.getAttribute('data-handle-key')) {
           return;
         }
 
         // Calculate the position of the slider on the page so we can determine
         // the position where you click in relativity.
-        var sliderBox = this.getSliderBoundingBox();
-        var positionDecimal = this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+        var sliderBox = _this.getSliderBoundingBox();
+        var positionDecimal = _this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
         var positionPercent = positionDecimal * PERCENT_FULL;
-        var handleId = this.getClosestHandle(positionPercent);
-        var validPositionPercent = this.getSnapPosition(positionPercent);
+        var handleId = _this.getClosestHandle(positionPercent);
+        var validPositionPercent = _this.getSnapPosition(positionPercent);
 
         // Move the handle there
-        this.slideTo(handleId, validPositionPercent, function () {
-          return _this3.fireChangeEvent();
+        _this.slideTo(handleId, validPositionPercent, function () {
+          return _this.fireChangeEvent();
         });
-        if (this.props.onClick) this.props.onClick();
-      }
-    }, {
-      key: "handleKeydown",
-      value: function handleKeydown(ev) {
-        var _this4 = this;
+        if (_this.props.onClick) _this.props.onClick();
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleKeydown", function (ev) {
         var idx = getHandleFor(ev);
         if (ev.keyCode === KEYS.ESC) {
           ev.currentTarget.blur();
           return;
         }
-        var proposedPercentage = this.getNextPositionForKey(idx, ev.keyCode);
+        var proposedPercentage = _this.getNextPositionForKey(idx, ev.keyCode);
         if (proposedPercentage === null) return;
-        if (this.canMove(idx, proposedPercentage)) {
-          this.slideTo(idx, proposedPercentage, function () {
-            return _this4.fireChangeEvent();
+        if (_this.canMove(idx, proposedPercentage)) {
+          _this.slideTo(idx, proposedPercentage, function () {
+            return _this.fireChangeEvent();
           });
-          if (this.props.onKeyPress) this.props.onKeyPress();
+          if (_this.props.onKeyPress) _this.props.onKeyPress();
         }
         killEvent(ev);
-      }
-
-      // Make sure the proposed position respects the bounds and
-      // does not collide with other handles too much.
-    }, {
-      key: "validatePosition",
-      value: function validatePosition(idx, proposedPosition) {
-        var _this$state4 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "validatePosition", function (idx, proposedPosition) {
+        var _this$state4 = _this.state,
           handlePos = _this$state4.handlePos,
           handleDimensions = _this$state4.handleDimensions;
         return Math.max(Math.min(proposedPosition, handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : PERCENT_FULL // 100% is the highest value
         ), handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : PERCENT_EMPTY // 0% is the lowest value
         );
-      }
-    }, {
-      key: "validateValues",
-      value: function validateValues(proposedValues, props) {
-        var _ref4 = props || this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "validateValues", function (proposedValues, props) {
+        var _ref4 = props || _this.props,
           max = _ref4.max,
           min = _ref4.min;
         return proposedValues.map(function (value, idx, values) {
@@ -19711,11 +19909,9 @@
           }
           return realValue;
         });
-      }
-    }, {
-      key: "canMove",
-      value: function canMove(idx, proposedPosition) {
-        var _this$state5 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "canMove", function (idx, proposedPosition) {
+        var _this$state5 = _this.state,
           handlePos = _this$state5.handlePos,
           handleDimensions = _this$state5.handleDimensions;
         if (proposedPosition < PERCENT_EMPTY) return false;
@@ -19725,29 +19921,21 @@
         var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
         if (proposedPosition < prevHandlePosition) return false;
         return true;
-      }
-    }, {
-      key: "fireChangeEvent",
-      value: function fireChangeEvent() {
-        var onChange = this.props.onChange;
-        if (onChange) onChange(this.getPublicState());
-      }
-    }, {
-      key: "slideTo",
-      value: function slideTo(idx, proposedPosition, onAfterSet) {
-        var _this5 = this;
-        var nextState = this.getNextState(idx, proposedPosition);
-        this.setState(nextState, function () {
-          var onValuesUpdated = _this5.props.onValuesUpdated;
-          if (onValuesUpdated) onValuesUpdated(_this5.getPublicState());
+      });
+      _defineProperty(_assertThisInitialized(_this), "fireChangeEvent", function () {
+        var onChange = _this.props.onChange;
+        if (onChange) onChange(_this.getPublicState());
+      });
+      _defineProperty(_assertThisInitialized(_this), "slideTo", function (idx, proposedPosition, onAfterSet) {
+        var nextState = _this.getNextState(idx, proposedPosition);
+        _this.setState(nextState, function () {
+          var onValuesUpdated = _this.props.onValuesUpdated;
+          if (onValuesUpdated) onValuesUpdated(_this.getPublicState());
           if (onAfterSet) onAfterSet();
         });
-      }
-    }, {
-      key: "updateNewValues",
-      value: function updateNewValues(nextProps) {
-        var _this6 = this;
-        var slidingIndex = this.state.slidingIndex;
+      });
+      _defineProperty(_assertThisInitialized(_this), "updateNewValues", function (nextProps) {
+        var slidingIndex = _this.state.slidingIndex;
 
         // Don't update while the slider is sliding
         if (slidingIndex !== null) {
@@ -19756,21 +19944,18 @@
         var max = nextProps.max,
           min = nextProps.min,
           values = nextProps.values;
-        var nextValues = this.validateValues(values, nextProps);
-        this.setState({
+        var nextValues = _this.validateValues(values, nextProps);
+        _this.setState({
           handlePos: nextValues.map(function (value) {
             return getPosition(value, min, max);
           }),
           values: nextValues
         }, function () {
-          return _this6.fireChangeEvent();
+          return _this.fireChangeEvent();
         });
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this7 = this;
-        var _ref5 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _ref5 = _this.props,
           children = _ref5.children,
           disabled = _ref5.disabled,
           Handle = _ref5.handle,
@@ -19780,14 +19965,14 @@
           PitComponent = _ref5.pitComponent,
           pitPoints = _ref5.pitPoints,
           ProgressBar = _ref5.progressBar; // all required thanks to defaultProps
-        var _this$state6 = this.state,
+        var _this$state6 = _this.state,
           className = _this$state6.className,
           handlePos = _this$state6.handlePos,
           values = _this$state6.values;
         return h("div", {
           className: className,
-          ref: this.rheostat,
-          onClick: disabled ? undefined : this.handleClick,
+          ref: _this.rheostat,
+          onClick: disabled ? undefined : _this.handleClick,
           style: {
             position: 'relative'
           }
@@ -19800,17 +19985,17 @@
             position: 'absolute'
           };
           return h(Handle, {
-            "aria-valuemax": _this7.getMaxValue(idx),
-            "aria-valuemin": _this7.getMinValue(idx),
+            "aria-valuemax": _this.getMaxValue(idx),
+            "aria-valuemin": _this.getMinValue(idx),
             "aria-valuenow": values[idx],
             "aria-disabled": disabled,
             "data-handle-key": idx,
             className: "rheostat-handle",
             key: "handle-".concat(idx),
             onClick: killEvent,
-            onKeyDown: disabled ? undefined : _this7.handleKeydown,
-            onMouseDown: disabled ? undefined : _this7.startMouseSlide,
-            onTouchStart: disabled ? undefined : _this7.startTouchSlide,
+            onKeyDown: disabled ? undefined : _this.handleKeydown,
+            onMouseDown: disabled ? undefined : _this.startMouseSlide,
+            onTouchStart: disabled ? undefined : _this.startTouchSlide,
             role: "slider",
             style: handleStyle,
             tabIndex: 0
@@ -19822,7 +20007,7 @@
           return h(ProgressBar, {
             className: "rheostat-progress",
             key: "progress-bar-".concat(idx),
-            style: _this7.getProgressStyle(idx)
+            style: _this.getProgressStyle(idx)
           });
         }), PitComponent && pitPoints.map(function (n) {
           var pos = getPosition(n, min, max);
@@ -19838,9 +20023,10 @@
             style: pitStyle
           }, n);
         }), children);
-      }
-    }]);
-    return Rheostat;
+      });
+      return _this;
+    }
+    return _createClass(Rheostat);
   }(d);
   _defineProperty(Rheostat, "defaultProps", {
     className: '',