instantsearch.js 4.65.0 → 4.66.0

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.65.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.66.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -1825,6 +1825,9 @@
     name: 'answers',
     connector: true
   });
+  /**
+   * @deprecated the answers service is no longer offered, and this widget will be removed in InstantSearch.js v5
+   */
   var connectAnswers = function connectAnswers(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     checkRendering(renderFn, withUsage());
@@ -9702,7 +9705,8 @@
    * @return {undefined} function mutates the item
    */
   function setIsRefined(item, currentRefinement, depth) {
-    item.isRefined = item.name === currentRefinement[depth];
+    item.isRefined =
+      item.name === (currentRefinement[depth] && currentRefinement[depth].trim());
     if (item.data) {
       item.data.forEach(function (child) {
         setIsRefined(child, currentRefinement, depth + 1);
@@ -10103,7 +10107,7 @@
 
   var SearchResults_1 = SearchResults;
 
-  var version = '3.16.2';
+  var version = '3.16.3';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -14902,7 +14906,7 @@
     };
   }
 
-  var version$1 = '4.65.0';
+  var version$1 = '4.66.0';
 
   var withUsage$r = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -15640,8 +15644,6 @@
       Fragment: Fragment
     });
     return function Highlight(userProps) {
-      // Not destructured in function signature, to make sure it's not exposed in
-      // the type definition.
       var parts = userProps.parts,
         _userProps$highlighte = userProps.highlightedTagName,
         highlightedTagName = _userProps$highlighte === void 0 ? 'mark' : _userProps$highlighte,
@@ -15674,6 +15676,46 @@
     };
   }
 
+  var _excluded$a = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent"];
+
+  // Should be imported from a shared package in the future
+
+  function createHitsComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function Hits(userProps) {
+      var _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        hits = userProps.hits,
+        ItemComponent = userProps.itemComponent,
+        sendEvent = userProps.sendEvent,
+        EmptyComponent = userProps.emptyComponent,
+        props = _objectWithoutProperties$1(userProps, _excluded$a);
+      if (hits.length === 0 && EmptyComponent) {
+        return createElement(EmptyComponent, {
+          className: cx('ais-Hits', classNames.root, cx('ais-Hits--empty', classNames.emptyRoot), props.className)
+        });
+      }
+      return createElement("div", _extends$1({}, props, {
+        className: cx('ais-Hits', classNames.root, hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot), props.className)
+      }), createElement("ol", {
+        className: cx('ais-Hits-list', classNames.list)
+      }, hits.map(function (hit, index) {
+        return createElement(ItemComponent, {
+          key: hit.objectID,
+          hit: hit,
+          index: index,
+          className: cx('ais-Hits-item', classNames.item),
+          onClick: function onClick() {
+            sendEvent('click:internal', hit, 'Hit Clicked');
+          },
+          onAuxClick: function onAuxClick() {
+            sendEvent('click:internal', hit, 'Hit Clicked');
+          }
+        });
+      })));
+    };
+  }
+
   function prepareTemplates(
   // can not use = {} here, since the template could have different constraints
   defaultTemplates) {
@@ -16490,11 +16532,11 @@
     Fragment: p
   });
 
-  var _excluded$a = ["classNames"];
+  var _excluded$b = ["classNames"];
   function Highlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Highlight', classNames.root),
@@ -16505,12 +16547,12 @@
     }, props));
   }
 
-  var _excluded$b = ["hit", "attribute", "cssClasses"];
+  var _excluded$c = ["hit", "attribute", "cssClasses"];
   function Highlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable highlight for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -16524,11 +16566,11 @@
     }));
   }
 
-  var _excluded$c = ["classNames"];
+  var _excluded$d = ["classNames"];
   function ReverseHighlight(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseHighlight', classNames.root),
@@ -16539,13 +16581,13 @@
     }, props));
   }
 
-  var _excluded$d = ["hit", "attribute", "cssClasses"],
+  var _excluded$e = ["hit", "attribute", "cssClasses"],
     _excluded2$2 = ["isHighlighted"];
   function ReverseHighlight$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
     var property = getPropertyByPath(hit._highlightResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable highlight for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -16565,11 +16607,11 @@
     }));
   }
 
-  var _excluded$e = ["classNames"];
+  var _excluded$f = ["classNames"];
   function ReverseSnippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-ReverseSnippet', classNames.root),
@@ -16580,13 +16622,13 @@
     }, props));
   }
 
-  var _excluded$f = ["hit", "attribute", "cssClasses"],
+  var _excluded$g = ["hit", "attribute", "cssClasses"],
     _excluded2$3 = ["isHighlighted"];
   function ReverseSnippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$g);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable snippet for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -16606,11 +16648,11 @@
     }));
   }
 
-  var _excluded$g = ["classNames"];
+  var _excluded$h = ["classNames"];
   function Snippet(_ref) {
     var _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
     return h(InternalHighlight, _extends({
       classNames: {
         root: cx('ais-Snippet', classNames.root),
@@ -16621,12 +16663,12 @@
     }, props));
   }
 
-  var _excluded$h = ["hit", "attribute", "cssClasses"];
+  var _excluded$i = ["hit", "attribute", "cssClasses"];
   function Snippet$1(_ref) {
     var hit = _ref.hit,
       attribute = _ref.attribute,
       cssClasses = _ref.cssClasses,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$i);
     var property = getPropertyByPath(hit._snippetResult, attribute) || [];
     var properties = toArray(property);
      _warning(Boolean(properties.length), "Could not enable snippet for \"".concat(attribute.toString(), "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
@@ -16890,6 +16932,9 @@
       }), containerNode);
     };
   };
+  /**
+   * @deprecated the answers service is no longer offered, and this widget will be removed in InstantSearch.js v5
+   */
   var answersWidget = function answersWidget(widgetParams) {
     var _ref3 = widgetParams || {},
       container = _ref3.container,
@@ -16947,8 +16992,9 @@
       $$widgetType: 'ais.answers'
     });
   };
+  var answers = deprecate(answersWidget, 'The answers widget is deprecated and will be removed in InstantSearch.js 5.0');
 
-  var _excluded$i = ["container", "widgets", "fallbackWidget"];
+  var _excluded$j = ["container", "widgets", "fallbackWidget"];
   var withUsage$t = createDocumentationMessageGenerator({
     name: 'dynamic-widgets'
   });
@@ -16966,7 +17012,7 @@
       containerSelector = _ref.container,
       widgets = _ref.widgets,
       fallbackWidget = _ref.fallbackWidget,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$i);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$j);
     if (!containerSelector) {
       throw new Error(withUsage$t('The `container` option is required.'));
     }
@@ -17940,7 +17986,7 @@
     }), container.querySelector(".".concat(cssClasses.tree)));
   };
 
-  var _excluded$j = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
+  var _excluded$k = ["initialZoom", "initialPosition", "templates", "cssClasses", "builtInMarker", "customHTMLMarker", "enableRefine", "enableClearMapRefinement", "enableRefineControl", "container", "googleReference"],
     _excluded2$4 = ["item"],
     _excluded3 = ["item"];
   var withUsage$y = createDocumentationMessageGenerator({
@@ -17984,7 +18030,7 @@
       enableRefineControl = _ref$enableRefineCont === void 0 ? true : _ref$enableRefineCont,
       container = _ref.container,
       googleReference = _ref.googleReference,
-      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$j);
+      otherWidgetParams = _objectWithoutProperties(_ref, _excluded$k);
     var defaultBuiltInMarker = {
       createOptions: function createOptions() {
         return {};
@@ -18321,7 +18367,7 @@
     })), subItems);
   }
 
-  var _excluded$k = ["root"];
+  var _excluded$l = ["root"];
 
   // CSS types
 
@@ -18348,7 +18394,7 @@
         if (isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) {
           var _this$props$cssClasse = _this.props.cssClasses,
             root = _this$props$cssClasse.root,
-            cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$k);
+            cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$l);
           subItems = h(RefinementList, _extends({}, _this.props, {
             // We want to keep `root` required for external usage but not for the
             // sub items.
@@ -18727,60 +18773,6 @@
     });
   };
 
-  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),
-          onClick: handleInsightsClick
-        },
-        data: results
-      }));
-    }
-    return h("div", {
-      className: cssClasses.root
-    }, h("ol", {
-      className: cssClasses.list
-    }, hits.map(function (hit, index) {
-      return h(Template, _extends({}, templateProps, {
-        templateKey: "item",
-        rootTagName: "li",
-        rootProps: {
-          className: cssClasses.item,
-          onClick: function onClick(event) {
-            handleInsightsClick(event);
-            sendEvent('click:internal', hit, 'Hit Clicked');
-          },
-          onAuxClick: function onAuxClick(event) {
-            handleInsightsClick(event);
-            sendEvent('click:internal', hit, 'Hit Clicked');
-          }
-        },
-        key: hit.objectID,
-        data: _objectSpread2(_objectSpread2({}, hit), {}, {
-          get __hitIndex() {
-             _warning(false, 'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.') ;
-            return index;
-          }
-        }),
-        bindEvent: bindEvent,
-        sendEvent: sendEvent
-      }));
-    })));
-  }
-
   var defaultTemplates$5 = {
     empty: function empty() {
       return 'No results';
@@ -18790,10 +18782,14 @@
     }
   };
 
+  var _excluded$m = ["hit", "index"];
   var withUsage$A = createDocumentationMessageGenerator({
     name: 'hits'
   });
-  var suit$b = component('Hits');
+  var Hits = createHitsComponent({
+    createElement: h,
+    Fragment: p
+  });
   var renderer$6 = function renderer(_ref) {
     var renderState = _ref.renderState,
       cssClasses = _ref.cssClasses,
@@ -18814,42 +18810,70 @@
         });
         return;
       }
+      var handleInsightsClick = createInsightsEventHandler({
+        insights: insights,
+        sendEvent: sendEvent
+      });
+      var emptyComponent = function emptyComponent(_ref3) {
+        var rootProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+        return h(Template, _extends({}, renderState.templateProps, {
+          rootProps: rootProps,
+          templateKey: "empty",
+          data: results
+        }));
+      };
+
+      // @MAJOR: Move default hit component back to the UI library
+      // once flavour specificities are erased
+      var itemComponent = function itemComponent(_ref4) {
+        var hit = _ref4.hit,
+          index = _ref4.index,
+          rootProps = _objectWithoutProperties(_ref4, _excluded$m);
+        return h(Template, _extends({}, renderState.templateProps, {
+          templateKey: "item",
+          rootTagName: "li",
+          rootProps: _objectSpread2(_objectSpread2({}, rootProps), {}, {
+            onClick: function onClick(event) {
+              handleInsightsClick(event);
+              rootProps.onClick();
+            },
+            onAuxClick: function onAuxClick(event) {
+              handleInsightsClick(event);
+              rootProps.onAuxClick();
+            }
+          }),
+          data: _objectSpread2(_objectSpread2({}, hit), {}, {
+            get __hitIndex() {
+               _warning(false, 'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.') ;
+              return index;
+            }
+          }),
+          bindEvent: bindEvent,
+          sendEvent: sendEvent
+        }));
+      };
       P(h(Hits, {
-        cssClasses: cssClasses,
         hits: receivedHits,
-        results: results,
-        templateProps: renderState.templateProps,
-        insights: insights,
+        itemComponent: itemComponent,
         sendEvent: sendEvent,
-        bindEvent: bindEvent
+        classNames: cssClasses,
+        emptyComponent: emptyComponent
       }), containerNode);
     };
   };
   var hits = function hits(widgetParams) {
-    var _ref3 = widgetParams || {},
-      container = _ref3.container,
-      escapeHTML = _ref3.escapeHTML,
-      transformItems = _ref3.transformItems,
-      _ref3$templates = _ref3.templates,
-      templates = _ref3$templates === void 0 ? {} : _ref3$templates,
-      _ref3$cssClasses = _ref3.cssClasses,
-      userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses;
+    var _ref5 = widgetParams || {},
+      container = _ref5.container,
+      escapeHTML = _ref5.escapeHTML,
+      transformItems = _ref5.transformItems,
+      _ref5$templates = _ref5.templates,
+      templates = _ref5$templates === void 0 ? {} : _ref5$templates,
+      _ref5$cssClasses = _ref5.cssClasses,
+      cssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses;
     if (!container) {
       throw new Error(withUsage$A('The `container` option is required.'));
     }
     var containerNode = getContainerNode(container);
-    var cssClasses = {
-      root: cx(suit$b(), userCssClasses.root),
-      emptyRoot: cx(suit$b({
-        modifierName: 'empty'
-      }), userCssClasses.emptyRoot),
-      list: cx(suit$b({
-        descendantName: 'list'
-      }), userCssClasses.list),
-      item: cx(suit$b({
-        descendantName: 'item'
-      }), userCssClasses.item)
-    };
     var specializedRenderer = renderer$6({
       containerNode: containerNode,
       cssClasses: cssClasses,
@@ -18892,7 +18916,7 @@
   var withUsage$B = createDocumentationMessageGenerator({
     name: 'hits-per-page'
   });
-  var suit$c = component('HitsPerPage');
+  var suit$b = component('HitsPerPage');
   var renderer$7 = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses;
@@ -18929,11 +18953,11 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$c(), userCssClasses.root),
-      select: cx(suit$c({
+      root: cx(suit$b(), userCssClasses.root),
+      select: cx(suit$b({
         descendantName: 'select'
       }), userCssClasses.select),
-      option: cx(suit$c({
+      option: cx(suit$b({
         descendantName: 'option'
       }), userCssClasses.option)
     };
@@ -19045,7 +19069,7 @@
   var withUsage$C = createDocumentationMessageGenerator({
     name: 'infinite-hits'
   });
-  var suit$d = component('InfiniteHits');
+  var suit$c = component('InfiniteHits');
   var renderer$8 = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -19103,27 +19127,27 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$d(), userCssClasses.root),
-      emptyRoot: cx(suit$d({
+      root: cx(suit$c(), userCssClasses.root),
+      emptyRoot: cx(suit$c({
         modifierName: 'empty'
       }), userCssClasses.emptyRoot),
-      item: cx(suit$d({
+      item: cx(suit$c({
         descendantName: 'item'
       }), userCssClasses.item),
-      list: cx(suit$d({
+      list: cx(suit$c({
         descendantName: 'list'
       }), userCssClasses.list),
-      loadPrevious: cx(suit$d({
+      loadPrevious: cx(suit$c({
         descendantName: 'loadPrevious'
       }), userCssClasses.loadPrevious),
-      disabledLoadPrevious: cx(suit$d({
+      disabledLoadPrevious: cx(suit$c({
         descendantName: 'loadPrevious',
         modifierName: 'disabled'
       }), userCssClasses.disabledLoadPrevious),
-      loadMore: cx(suit$d({
+      loadMore: cx(suit$c({
         descendantName: 'loadMore'
       }), userCssClasses.loadMore),
-      disabledLoadMore: cx(suit$d({
+      disabledLoadMore: cx(suit$c({
         descendantName: 'loadMore',
         modifierName: 'disabled'
       }), userCssClasses.disabledLoadMore)
@@ -19172,7 +19196,7 @@
   var withUsage$D = createDocumentationMessageGenerator({
     name: 'menu'
   });
-  var suit$e = component('Menu');
+  var suit$d = component('Menu');
   var renderer$9 = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -19231,33 +19255,33 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$e(), userCssClasses.root),
-      noRefinementRoot: cx(suit$e({
+      root: cx(suit$d(), userCssClasses.root),
+      noRefinementRoot: cx(suit$d({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      list: cx(suit$e({
+      list: cx(suit$d({
         descendantName: 'list'
       }), userCssClasses.list),
-      item: cx(suit$e({
+      item: cx(suit$d({
         descendantName: 'item'
       }), userCssClasses.item),
-      selectedItem: cx(suit$e({
+      selectedItem: cx(suit$d({
         descendantName: 'item',
         modifierName: 'selected'
       }), userCssClasses.selectedItem),
-      link: cx(suit$e({
+      link: cx(suit$d({
         descendantName: 'link'
       }), userCssClasses.link),
-      label: cx(suit$e({
+      label: cx(suit$d({
         descendantName: 'label'
       }), userCssClasses.label),
-      count: cx(suit$e({
+      count: cx(suit$d({
         descendantName: 'count'
       }), userCssClasses.count),
-      showMore: cx(suit$e({
+      showMore: cx(suit$d({
         descendantName: 'showMore'
       }), userCssClasses.showMore),
-      disabledShowMore: cx(suit$e({
+      disabledShowMore: cx(suit$d({
         descendantName: 'showMore',
         modifierName: 'disabled'
       }), userCssClasses.disabledShowMore)
@@ -19338,7 +19362,7 @@
   var withUsage$E = createDocumentationMessageGenerator({
     name: 'menu-select'
   });
-  var suit$f = component('MenuSelect');
+  var suit$e = component('MenuSelect');
   var renderer$a = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -19382,14 +19406,14 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$f(), userCssClasses.root),
-      noRefinementRoot: cx(suit$f({
+      root: cx(suit$e(), userCssClasses.root),
+      noRefinementRoot: cx(suit$e({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      select: cx(suit$f({
+      select: cx(suit$e({
         descendantName: 'select'
       }), userCssClasses.select),
-      option: cx(suit$f({
+      option: cx(suit$e({
         descendantName: 'option'
       }), userCssClasses.option)
     };
@@ -19434,7 +19458,7 @@
   var withUsage$F = createDocumentationMessageGenerator({
     name: 'numeric-menu'
   });
-  var suit$g = component('NumericMenu');
+  var suit$f = component('NumericMenu');
   var renderer$b = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       attribute = _ref.attribute,
@@ -19479,27 +19503,27 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$g(), userCssClasses.root),
-      noRefinementRoot: cx(suit$g({
+      root: cx(suit$f(), userCssClasses.root),
+      noRefinementRoot: cx(suit$f({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      list: cx(suit$g({
+      list: cx(suit$f({
         descendantName: 'list'
       }), userCssClasses.list),
-      item: cx(suit$g({
+      item: cx(suit$f({
         descendantName: 'item'
       }), userCssClasses.item),
-      selectedItem: cx(suit$g({
+      selectedItem: cx(suit$f({
         descendantName: 'item',
         modifierName: 'selected'
       }), userCssClasses.selectedItem),
-      label: cx(suit$g({
+      label: cx(suit$f({
         descendantName: 'label'
       }), userCssClasses.label),
-      radio: cx(suit$g({
+      radio: cx(suit$f({
         descendantName: 'radio'
       }), userCssClasses.radio),
-      labelText: cx(suit$g({
+      labelText: cx(suit$f({
         descendantName: 'labelText'
       }), userCssClasses.labelText)
     };
@@ -19635,7 +19659,7 @@
     }));
   }
 
-  var suit$h = component('Pagination');
+  var suit$g = component('Pagination');
   var withUsage$G = createDocumentationMessageGenerator({
     name: 'pagination'
   });
@@ -19724,45 +19748,45 @@
     var scrollTo = userScrollTo === true ? 'body' : userScrollTo;
     var scrollToNode = scrollTo !== false ? getContainerNode(scrollTo) : false;
     var cssClasses = {
-      root: cx(suit$h(), userCssClasses.root),
-      noRefinementRoot: cx(suit$h({
+      root: cx(suit$g(), userCssClasses.root),
+      noRefinementRoot: cx(suit$g({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      list: cx(suit$h({
+      list: cx(suit$g({
         descendantName: 'list'
       }), userCssClasses.list),
-      item: cx(suit$h({
+      item: cx(suit$g({
         descendantName: 'item'
       }), userCssClasses.item),
-      firstPageItem: cx(suit$h({
+      firstPageItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'firstPage'
       }), userCssClasses.firstPageItem),
-      lastPageItem: cx(suit$h({
+      lastPageItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'lastPage'
       }), userCssClasses.lastPageItem),
-      previousPageItem: cx(suit$h({
+      previousPageItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'previousPage'
       }), userCssClasses.previousPageItem),
-      nextPageItem: cx(suit$h({
+      nextPageItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'nextPage'
       }), userCssClasses.nextPageItem),
-      pageItem: cx(suit$h({
+      pageItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'page'
       }), userCssClasses.pageItem),
-      selectedItem: cx(suit$h({
+      selectedItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'selected'
       }), userCssClasses.selectedItem),
-      disabledItem: cx(suit$h({
+      disabledItem: cx(suit$g({
         descendantName: 'item',
         modifierName: 'disabled'
       }), userCssClasses.disabledItem),
-      link: cx(suit$h({
+      link: cx(suit$g({
         descendantName: 'link'
       }), userCssClasses.link)
     };
@@ -19856,7 +19880,7 @@
   var withUsage$H = createDocumentationMessageGenerator({
     name: 'panel'
   });
-  var suit$i = component('Panel');
+  var suit$h = component('Panel');
   var renderer$d = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       bodyContainerNode = _ref.bodyContainerNode,
@@ -19901,29 +19925,29 @@
       return false;
     };
     var cssClasses = {
-      root: cx(suit$i(), userCssClasses.root),
-      noRefinementRoot: cx(suit$i({
+      root: cx(suit$h(), userCssClasses.root),
+      noRefinementRoot: cx(suit$h({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      collapsibleRoot: cx(suit$i({
+      collapsibleRoot: cx(suit$h({
         modifierName: 'collapsible'
       }), userCssClasses.collapsibleRoot),
-      collapsedRoot: cx(suit$i({
+      collapsedRoot: cx(suit$h({
         modifierName: 'collapsed'
       }), userCssClasses.collapsedRoot),
-      collapseButton: cx(suit$i({
+      collapseButton: cx(suit$h({
         descendantName: 'collapseButton'
       }), userCssClasses.collapseButton),
-      collapseIcon: cx(suit$i({
+      collapseIcon: cx(suit$h({
         descendantName: 'collapseIcon'
       }), userCssClasses.collapseIcon),
-      body: cx(suit$i({
+      body: cx(suit$h({
         descendantName: 'body'
       }), userCssClasses.body),
-      header: cx(suit$i({
+      header: cx(suit$h({
         descendantName: 'header'
       }), userCssClasses.header),
-      footer: cx(suit$i({
+      footer: cx(suit$h({
         descendantName: 'footer'
       }), userCssClasses.footer)
     };
@@ -20004,21 +20028,23 @@
     };
   };
 
-  var _excluded$l = ["placesReference", "defaultPosition"],
+  var _excluded$n = ["placesReference", "defaultPosition"],
     _excluded2$5 = ["places"];
+
   /* Places.js is an optional dependency, no error should be reported if the package is missing */
   /** @ts-ignore */
   // using the type like this requires only one ts-ignore
   /**
    * This widget sets the geolocation value for the search based on the selected
    * result in the Algolia Places autocomplete.
+   * @deprecated the places service is no longer offered, and this widget will be removed in InstantSearch.js v5
    */
   var placesWidget = function placesWidget(widgetParams) {
     var _ref = widgetParams || {},
       placesReference = _ref.placesReference,
       _ref$defaultPosition = _ref.defaultPosition,
       defaultPosition = _ref$defaultPosition === void 0 ? [] : _ref$defaultPosition,
-      placesOptions = _objectWithoutProperties(_ref, _excluded$l);
+      placesOptions = _objectWithoutProperties(_ref, _excluded$n);
     if (typeof placesReference !== 'function') {
       throw new Error('The `placesReference` option requires a valid Places.js reference.');
     }
@@ -20097,6 +20123,7 @@
       }
     };
   };
+  var places = deprecate(placesWidget, 'The places widget is deprecated and will be removed in InstantSearch.js 5.0.');
 
   var PoweredBy = function PoweredBy(_ref) {
     var url = _ref.url,
@@ -20129,7 +20156,7 @@
     }))));
   };
 
-  var suit$j = component('PoweredBy');
+  var suit$i = component('PoweredBy');
   var withUsage$I = createDocumentationMessageGenerator({
     name: 'powered-by'
   });
@@ -20163,13 +20190,13 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$j(), suit$j({
+      root: cx(suit$i(), suit$i({
         modifierName: theme === 'dark' ? 'dark' : 'light'
       }), userCssClasses.root),
-      link: cx(suit$j({
+      link: cx(suit$i({
         descendantName: 'link'
       }), userCssClasses.link),
-      logo: cx(suit$j({
+      logo: cx(suit$i({
         descendantName: 'logo'
       }), userCssClasses.logo)
     };
@@ -20225,7 +20252,7 @@
   var withUsage$K = createDocumentationMessageGenerator({
     name: 'query-rule-custom-data'
   });
-  var suit$k = component('QueryRuleCustomData');
+  var suit$j = component('QueryRuleCustomData');
   var renderer$f = function renderer(_ref2) {
     var containerNode = _ref2.containerNode,
       cssClasses = _ref2.cssClasses,
@@ -20254,7 +20281,7 @@
       throw new Error(withUsage$K('The `container` option is required.'));
     }
     var cssClasses = {
-      root: cx(suit$k(), userCssClasses.root)
+      root: cx(suit$j(), userCssClasses.root)
     };
     var containerNode = getContainerNode(container);
     var templates = _objectSpread2(_objectSpread2({}, defaultTemplates$b), userTemplates);
@@ -20387,7 +20414,7 @@
   var withUsage$L = createDocumentationMessageGenerator({
     name: 'range-input'
   });
-  var suit$l = component('RangeInput');
+  var suit$k = component('RangeInput');
   var defaultTemplates$c = {
     separatorText: function separatorText() {
       return 'to';
@@ -20453,31 +20480,31 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$l(), userCssClasses.root),
-      noRefinement: cx(suit$l({
+      root: cx(suit$k(), userCssClasses.root),
+      noRefinement: cx(suit$k({
         modifierName: 'noRefinement'
       })),
-      form: cx(suit$l({
+      form: cx(suit$k({
         descendantName: 'form'
       }), userCssClasses.form),
-      label: cx(suit$l({
+      label: cx(suit$k({
         descendantName: 'label'
       }), userCssClasses.label),
-      input: cx(suit$l({
+      input: cx(suit$k({
         descendantName: 'input'
       }), userCssClasses.input),
-      inputMin: cx(suit$l({
+      inputMin: cx(suit$k({
         descendantName: 'input',
         modifierName: 'min'
       }), userCssClasses.inputMin),
-      inputMax: cx(suit$l({
+      inputMax: cx(suit$k({
         descendantName: 'input',
         modifierName: 'max'
       }), userCssClasses.inputMax),
-      separator: cx(suit$l({
+      separator: cx(suit$k({
         descendantName: 'separator'
       }), userCssClasses.separator),
-      submit: cx(suit$l({
+      submit: cx(suit$k({
         descendantName: 'submit'
       }), userCssClasses.submit)
     };
@@ -21175,7 +21202,7 @@
   var withUsage$M = createDocumentationMessageGenerator({
     name: 'range-slider'
   });
-  var suit$m = component('RangeSlider');
+  var suit$l = component('RangeSlider');
   var renderer$h = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -21245,8 +21272,8 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$m(), userCssClasses.root),
-      disabledRoot: cx(suit$m({
+      root: cx(suit$l(), userCssClasses.root),
+      disabledRoot: cx(suit$l({
         modifierName: 'disabled'
       }), userCssClasses.disabledRoot)
     };
@@ -21323,7 +21350,7 @@
   var withUsage$N = createDocumentationMessageGenerator({
     name: 'rating-menu'
   });
-  var suit$n = component('RatingMenu');
+  var suit$m = component('RatingMenu');
   var _ref3 = h("path", {
     d: "M12 .288l2.833 8.718h9.167l-7.417 5.389 2.833 8.718-7.416-5.388-7.417 5.388 2.833-8.718-7.416-5.389h9.167z"
   });
@@ -21357,12 +21384,12 @@
       }, h("svg", {
         style: "display:none;"
       }, h("symbol", {
-        id: suit$n({
+        id: suit$m({
           descendantName: 'starSymbol'
         }),
         viewBox: "0 0 24 24"
       }, _ref3), h("symbol", {
-        id: suit$n({
+        id: suit$m({
           descendantName: 'starEmptySymbol'
         }),
         viewBox: "0 0 24 24"
@@ -21412,42 +21439,42 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$n(), userCssClasses.root),
-      noRefinementRoot: cx(suit$n({
+      root: cx(suit$m(), userCssClasses.root),
+      noRefinementRoot: cx(suit$m({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      list: cx(suit$n({
+      list: cx(suit$m({
         descendantName: 'list'
       }), userCssClasses.list),
-      item: cx(suit$n({
+      item: cx(suit$m({
         descendantName: 'item'
       }), userCssClasses.item),
-      selectedItem: cx(suit$n({
+      selectedItem: cx(suit$m({
         descendantName: 'item',
         modifierName: 'selected'
       }), userCssClasses.selectedItem),
-      disabledItem: cx(suit$n({
+      disabledItem: cx(suit$m({
         descendantName: 'item',
         modifierName: 'disabled'
       }), userCssClasses.disabledItem),
-      link: cx(suit$n({
+      link: cx(suit$m({
         descendantName: 'link'
       }), userCssClasses.link),
-      starIcon: cx(suit$n({
+      starIcon: cx(suit$m({
         descendantName: 'starIcon'
       }), userCssClasses.starIcon),
-      fullStarIcon: cx(suit$n({
+      fullStarIcon: cx(suit$m({
         descendantName: 'starIcon',
         modifierName: 'full'
       }), userCssClasses.fullStarIcon),
-      emptyStarIcon: cx(suit$n({
+      emptyStarIcon: cx(suit$m({
         descendantName: 'starIcon',
         modifierName: 'empty'
       }), userCssClasses.emptyStarIcon),
-      label: cx(suit$n({
+      label: cx(suit$m({
         descendantName: 'label'
       }), userCssClasses.label),
-      count: cx(suit$n({
+      count: cx(suit$m({
         descendantName: 'count'
       }), userCssClasses.count)
     };
@@ -21571,7 +21598,7 @@
   var withUsage$O = createDocumentationMessageGenerator({
     name: 'refinement-list'
   });
-  var suit$o = component('RefinementList');
+  var suit$n = component('RefinementList');
   var searchBoxSuit = component('SearchBox');
   var renderer$j = function renderer(_ref) {
     var containerNode = _ref.containerNode,
@@ -21673,42 +21700,42 @@
     var escapeFacetValues = searchable ? Boolean(searchableEscapeFacetValues) : false;
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$o(), userCssClasses.root),
-      noRefinementRoot: cx(suit$o({
+      root: cx(suit$n(), userCssClasses.root),
+      noRefinementRoot: cx(suit$n({
         modifierName: 'noRefinement'
       }), userCssClasses.noRefinementRoot),
-      list: cx(suit$o({
+      list: cx(suit$n({
         descendantName: 'list'
       }), userCssClasses.list),
-      item: cx(suit$o({
+      item: cx(suit$n({
         descendantName: 'item'
       }), userCssClasses.item),
-      selectedItem: cx(suit$o({
+      selectedItem: cx(suit$n({
         descendantName: 'item',
         modifierName: 'selected'
       }), userCssClasses.selectedItem),
-      searchBox: cx(suit$o({
+      searchBox: cx(suit$n({
         descendantName: 'searchBox'
       }), userCssClasses.searchBox),
-      label: cx(suit$o({
+      label: cx(suit$n({
         descendantName: 'label'
       }), userCssClasses.label),
-      checkbox: cx(suit$o({
+      checkbox: cx(suit$n({
         descendantName: 'checkbox'
       }), userCssClasses.checkbox),
-      labelText: cx(suit$o({
+      labelText: cx(suit$n({
         descendantName: 'labelText'
       }), userCssClasses.labelText),
-      count: cx(suit$o({
+      count: cx(suit$n({
         descendantName: 'count'
       }), userCssClasses.count),
-      noResults: cx(suit$o({
+      noResults: cx(suit$n({
         descendantName: 'noResults'
       }), userCssClasses.noResults),
-      showMore: cx(suit$o({
+      showMore: cx(suit$n({
         descendantName: 'showMore'
       }), userCssClasses.showMore),
-      disabledShowMore: cx(suit$o({
+      disabledShowMore: cx(suit$n({
         descendantName: 'showMore',
         modifierName: 'disabled'
       }), userCssClasses.disabledShowMore),
@@ -21822,7 +21849,7 @@
   var withUsage$P = createDocumentationMessageGenerator({
     name: 'relevant-sort'
   });
-  var suit$p = component('RelevantSort');
+  var suit$o = component('RelevantSort');
   var renderer$k = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -21851,11 +21878,11 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$p(), userCssClasses.root),
-      text: cx(suit$p({
+      root: cx(suit$o(), userCssClasses.root),
+      text: cx(suit$o({
         descendantName: 'text'
       }), userCssClasses.text),
-      button: cx(suit$p({
+      button: cx(suit$o({
         descendantName: 'button'
       }), userCssClasses.button)
     };
@@ -21877,7 +21904,7 @@
   var withUsage$Q = createDocumentationMessageGenerator({
     name: 'search-box'
   });
-  var suit$q = component('SearchBox');
+  var suit$p = component('SearchBox');
   var renderer$l = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -21946,29 +21973,29 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$q(), userCssClasses.root),
-      form: cx(suit$q({
+      root: cx(suit$p(), userCssClasses.root),
+      form: cx(suit$p({
         descendantName: 'form'
       }), userCssClasses.form),
-      input: cx(suit$q({
+      input: cx(suit$p({
         descendantName: 'input'
       }), userCssClasses.input),
-      submit: cx(suit$q({
+      submit: cx(suit$p({
         descendantName: 'submit'
       }), userCssClasses.submit),
-      submitIcon: cx(suit$q({
+      submitIcon: cx(suit$p({
         descendantName: 'submitIcon'
       }), userCssClasses.submitIcon),
-      reset: cx(suit$q({
+      reset: cx(suit$p({
         descendantName: 'reset'
       }), userCssClasses.reset),
-      resetIcon: cx(suit$q({
+      resetIcon: cx(suit$p({
         descendantName: 'resetIcon'
       }), userCssClasses.resetIcon),
-      loadingIndicator: cx(suit$q({
+      loadingIndicator: cx(suit$p({
         descendantName: 'loadingIndicator'
       }), userCssClasses.loadingIndicator),
-      loadingIcon: cx(suit$q({
+      loadingIcon: cx(suit$p({
         descendantName: 'loadingIcon'
       }), userCssClasses.loadingIcon)
     };
@@ -21998,7 +22025,7 @@
   var withUsage$R = createDocumentationMessageGenerator({
     name: 'sort-by'
   });
-  var suit$r = component('SortBy');
+  var suit$q = component('SortBy');
   var renderer$m = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses;
@@ -22037,11 +22064,11 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$r(), userCssClasses.root),
-      select: cx(suit$r({
+      root: cx(suit$q(), userCssClasses.root),
+      select: cx(suit$q({
         descendantName: 'select'
       }), userCssClasses.select),
-      option: cx(suit$r({
+      option: cx(suit$q({
         descendantName: 'option'
       }), userCssClasses.option)
     };
@@ -22061,13 +22088,13 @@
     });
   };
 
-  var _excluded$m = ["nbHits", "nbSortedHits", "cssClasses", "templateProps"];
+  var _excluded$o = ["nbHits", "nbSortedHits", "cssClasses", "templateProps"];
   var Stats = function Stats(_ref) {
     var nbHits = _ref.nbHits,
       nbSortedHits = _ref.nbSortedHits,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps,
-      rest = _objectWithoutProperties(_ref, _excluded$m);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
     return h("div", {
       className: cx(cssClasses.root)
     }, h(Template, _extends({}, templateProps, {
@@ -22093,7 +22120,7 @@
   var withUsage$S = createDocumentationMessageGenerator({
     name: 'stats'
   });
-  var suit$s = component('Stats');
+  var suit$r = component('Stats');
   var defaultTemplates$g = {
     text: function text(props) {
       return "".concat(props.areHitsSorted ? getSortedResultsSentence(props) : getResultsSentence(props), " found in ").concat(props.processingTimeMS, "ms");
@@ -22189,8 +22216,8 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$s(), userCssClasses.root),
-      text: cx(suit$s({
+      root: cx(suit$r(), userCssClasses.root),
+      text: cx(suit$r({
         descendantName: 'text'
       }), userCssClasses.text)
     };
@@ -22246,7 +22273,7 @@
   var withUsage$T = createDocumentationMessageGenerator({
     name: 'toggle-refinement'
   });
-  var suit$t = component('ToggleRefinement');
+  var suit$s = component('ToggleRefinement');
   var renderer$o = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -22300,14 +22327,14 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$t(), userCssClasses.root),
-      label: cx(suit$t({
+      root: cx(suit$s(), userCssClasses.root),
+      label: cx(suit$s({
         descendantName: 'label'
       }), userCssClasses.label),
-      checkbox: cx(suit$t({
+      checkbox: cx(suit$s({
         descendantName: 'checkbox'
       }), userCssClasses.checkbox),
-      labelText: cx(suit$t({
+      labelText: cx(suit$s({
         descendantName: 'labelText'
       }), userCssClasses.labelText)
     };
@@ -22466,7 +22493,7 @@
   var withUsage$U = createDocumentationMessageGenerator({
     name: 'voice-search'
   });
-  var suit$u = component('VoiceSearch');
+  var suit$t = component('VoiceSearch');
   var renderer$p = function renderer(_ref) {
     var containerNode = _ref.containerNode,
       cssClasses = _ref.cssClasses,
@@ -22503,11 +22530,11 @@
     }
     var containerNode = getContainerNode(container);
     var cssClasses = {
-      root: cx(suit$u(), userCssClasses.root),
-      button: cx(suit$u({
+      root: cx(suit$t(), userCssClasses.root),
+      button: cx(suit$t({
         descendantName: 'button'
       }), userCssClasses.button),
-      status: cx(suit$u({
+      status: cx(suit$t({
         descendantName: 'status'
       }), userCssClasses.status)
     };
@@ -22534,7 +22561,7 @@
   };
 
   /** @deprecated answers is no longer supported */
-  var EXPERIMENTAL_answers = deprecate(answersWidget, 'answers is no longer supported');
+  var EXPERIMENTAL_answers = deprecate(answers, 'answers is no longer supported');
 
   /** @deprecated use dynamicWidgets */
   var EXPERIMENTAL_dynamicWidgets = deprecate(dynamicWidgets, 'use dynamicWidgets');
@@ -22561,7 +22588,7 @@
     numericMenu: numericMenu,
     pagination: pagination,
     panel: panel,
-    places: placesWidget,
+    places: places,
     poweredBy: poweredBy,
     queryRuleContext: queryRuleContext,
     queryRuleCustomData: queryRuleCustomData,