instantsearch.js 4.44.1 → 4.46.0

package/es/widgets/geo-search/createHTMLMarker.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="google.maps" />
+import type { renderTemplate } from '../../lib/utils';
 export declare type HTMLMarkerArguments = {
     __id: string;
     position: google.maps.LatLngLiteral;
     map: google.maps.Map;
-    template: string;
+    template: ReturnType<typeof renderTemplate>;
     title?: string;
     className: string;
     anchor?: {

package/es/widgets/geo-search/createHTMLMarker.js

@@ -23,6 +23,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /* global google EventListener */
+import { render } from 'preact';
+
 var createHTMLMarker = function createHTMLMarker(googleReference) {
   var HTMLMarker = /*#__PURE__*/function (_googleReference$maps) {
     _inherits(HTMLMarker, _googleReference$maps);
@@ -66,7 +68,12 @@ var createHTMLMarker = function createHTMLMarker(googleReference) {
       _this.element = document.createElement('div');
       _this.element.className = className;
       _this.element.style.position = 'absolute';
-      _this.element.innerHTML = template;
+
+      if (_typeof(template) === 'object') {
+        render(template, _this.element);
+      } else {
+        _this.element.innerHTML = template;
+      }
 
       _this.setMap(map);
 

package/es/widgets/geo-search/defaultTemplates.d.ts

@@ -1,3 +1,4 @@
+/** @jsx h */
 import type { GeoSearchComponentTemplates } from './geo-search';
 declare const defaultTemplates: GeoSearchComponentTemplates;
 export default defaultTemplates;

package/es/widgets/geo-search/defaultTemplates.js

@@ -1,7 +1,20 @@
+/** @jsx h */
+import { h } from 'preact';
+
+var _ref = h("p", null, "Your custom HTML Marker");
+
 var defaultTemplates = {
-  HTMLMarker: '<p>Your custom HTML Marker</p>',
-  reset: 'Clear the map refinement',
-  toggle: 'Search as I move the map',
-  redo: 'Redo search here'
+  HTMLMarker: function HTMLMarker() {
+    return _ref;
+  },
+  reset: function reset() {
+    return 'Clear the map refinement';
+  },
+  toggle: function toggle() {
+    return 'Search as I move the map';
+  },
+  redo: function redo() {
+    return 'Redo search here';
+  }
 };
 export default defaultTemplates;

package/es/widgets/hierarchical-menu/defaultTemplates.js

@@ -1,5 +1,25 @@
+/** @jsx h */
+import { h } from 'preact';
+import { formatNumber } from "../../lib/formatNumber.js";
+import { cx } from "../../lib/utils/index.js";
 var defaultTemplates = {
-  item: '<a class="{{cssClasses.link}}" href="{{url}}">' + '<span class="{{cssClasses.label}}">{{label}}</span>' + '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' + '</a>',
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n  "
+  item: function item(_ref) {
+    var url = _ref.url,
+        label = _ref.label,
+        count = _ref.count,
+        cssClasses = _ref.cssClasses;
+    return h("a", {
+      className: cx(cssClasses.link),
+      href: url
+    }, h("span", {
+      className: cx(cssClasses.label)
+    }, label), h("span", {
+      className: cx(cssClasses.count)
+    }, formatNumber(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  }
 };
 export default defaultTemplates;

package/es/widgets/hierarchical-menu/hierarchical-menu.d.ts

@@ -10,6 +10,8 @@ declare type HierarchicalMenuTemplates = Partial<{
         count: number;
         isRefined: boolean;
         url: string;
+        label: string;
+        cssClasses: HierarchicalMenuCSSClasses;
     }>;
     /**
      * Template used for the show more text, provided with `isShowingMore` data property.

package/es/widgets/hits/defaultTemplates.js

@@ -1,5 +1,7 @@
 var defaultTemplates = {
-  empty: 'No results',
+  empty: function empty() {
+    return 'No results';
+  },
   item: function item(data) {
     return JSON.stringify(data, null, 2);
   }

package/es/widgets/hits/hits.d.ts

@@ -1,6 +1,7 @@
 /** @jsx h */
 import type { HitsConnectorParams, HitsWidgetDescription } from '../../connectors/hits/connectHits';
 import type { Template, TemplateWithBindEvent, Hit, WidgetFactory } from '../../types';
+import type { SearchResults } from 'algoliasearch-helper';
 export declare type HitsCSSClasses = Partial<{
     /**
      * CSS class to add to the wrapping element.
@@ -25,7 +26,7 @@ export declare type HitsTemplates = Partial<{
      *
      * @default 'No Results'
      */
-    empty: Template;
+    empty: Template<SearchResults>;
     /**
      * Template to use for each result. This template will receive an object containing a single record.
      *

package/es/widgets/infinite-hits/defaultTemplates.js

@@ -1,7 +1,13 @@
 var defaultTemplates = {
-  empty: 'No results',
-  showPreviousText: 'Show previous results',
-  showMoreText: 'Show more results',
+  empty: function empty() {
+    return 'No results';
+  },
+  showPreviousText: function showPreviousText() {
+    return 'Show previous results';
+  },
+  showMoreText: function showMoreText() {
+    return 'Show more results';
+  },
   item: function item(data) {
     return JSON.stringify(data, null, 2);
   }

package/es/widgets/infinite-hits/infinite-hits.d.ts

@@ -40,9 +40,7 @@ export declare type InfiniteHitsTemplates = Partial<{
     /**
      * The template to use when there are no results.
      */
-    empty: Template<{
-        results: SearchResults;
-    }>;
+    empty: Template<SearchResults>;
     /**
      * The template to use for the “Show previous” label.
      */

package/es/widgets/menu/defaultTemplates.js

@@ -1,5 +1,25 @@
+/** @jsx h */
+import { h } from 'preact';
+import { formatNumber } from "../../lib/formatNumber.js";
+import { cx } from "../../lib/utils/index.js";
 var defaultTemplates = {
-  item: '<a class="{{cssClasses.link}}" href="{{url}}">' + '<span class="{{cssClasses.label}}">{{label}}</span>' + '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' + '</a>',
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n  "
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        url = _ref.url,
+        label = _ref.label,
+        count = _ref.count;
+    return h("a", {
+      className: cx(cssClasses.link),
+      href: url
+    }, h("span", {
+      className: cx(cssClasses.label)
+    }, label), h("span", {
+      className: cx(cssClasses.count)
+    }, formatNumber(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  }
 };
 export default defaultTemplates;

package/es/widgets/menu-select/defaultTemplates.js

@@ -1,5 +1,12 @@
+import { formatNumber } from "../../lib/formatNumber.js";
 var defaultTemplates = {
-  item: '{{label}} ({{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}})',
-  defaultOption: 'See all'
+  item: function item(_ref) {
+    var label = _ref.label,
+        count = _ref.count;
+    return "".concat(label, " (").concat(formatNumber(count), ")");
+  },
+  defaultOption: function defaultOption() {
+    return 'See all';
+  }
 };
 export default defaultTemplates;

package/es/widgets/numeric-menu/defaultTemplates.js

@@ -1,4 +1,21 @@
+/** @jsx h */
+import { h } from 'preact';
 var defaultTemplates = {
-  item: "<label class=\"{{cssClasses.label}}\">\n  <input type=\"radio\" class=\"{{cssClasses.radio}}\" name=\"{{attribute}}\"{{#isRefined}} checked{{/isRefined}} />\n  <span class=\"{{cssClasses.labelText}}\">{{label}}</span>\n</label>"
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        attribute = _ref.attribute,
+        label = _ref.label,
+        isRefined = _ref.isRefined;
+    return h("label", {
+      className: cssClasses.label
+    }, h("input", {
+      type: "radio",
+      className: cssClasses.radio,
+      name: attribute,
+      defaultChecked: isRefined
+    }), h("span", {
+      className: cssClasses.labelText
+    }, label));
+  }
 };
 export default defaultTemplates;

package/es/widgets/range-input/range-input.js

@@ -28,8 +28,12 @@ var withUsage = createDocumentationMessageGenerator({
 });
 var suit = component('RangeInput');
 var defaultTemplates = {
-  separatorText: 'to',
-  submitText: 'Go'
+  separatorText: function separatorText() {
+    return 'to';
+  },
+  submitText: function submitText() {
+    return 'Go';
+  }
 };
 
 var renderer = function renderer(_ref) {

package/es/widgets/rating-menu/defaultTemplates.js

@@ -1,4 +1,57 @@
+/** @jsx h */
+import { h } from 'preact';
+import { formatNumber } from "../../lib/formatNumber.js";
+import { cx } from "../../lib/utils/index.js";
+
+function ItemWrapper(_ref) {
+  var children = _ref.children,
+      count = _ref.count,
+      value = _ref.value,
+      url = _ref.url,
+      cssClasses = _ref.cssClasses;
+
+  if (count) {
+    return h("a", {
+      className: cx(cssClasses.link),
+      "aria-label": "".concat(value, " & up"),
+      href: url
+    }, children);
+  }
+
+  return h("div", {
+    className: cx(cssClasses.link),
+    "aria-label": "".concat(value, " & up"),
+    disabled: true
+  }, children);
+}
+
 var defaultTemplates = {
-  item: "{{#count}}<a class=\"{{cssClasses.link}}\" aria-label=\"{{value}} & up\" href=\"{{url}}\">{{/count}}{{^count}}<div class=\"{{cssClasses.link}}\" aria-label=\"{{value}} & up\" disabled>{{/count}}\n  {{#stars}}<svg class=\"{{cssClasses.starIcon}} {{#.}}{{cssClasses.fullStarIcon}}{{/.}}{{^.}}{{cssClasses.emptyStarIcon}}{{/.}}\" aria-hidden=\"true\" width=\"24\" height=\"24\">\n    {{#.}}<use xlink:href=\"#ais-RatingMenu-starSymbol\"></use>{{/.}}{{^.}}<use xlink:href=\"#ais-RatingMenu-starEmptySymbol\"></use>{{/.}}\n  </svg>{{/stars}}\n  <span class=\"{{cssClasses.label}}\">& Up</span>\n  {{#count}}<span class=\"{{cssClasses.count}}\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>{{/count}}\n{{#count}}</a>{{/count}}{{^count}}</div>{{/count}}"
+  item: function item(_ref2) {
+    var count = _ref2.count,
+        value = _ref2.value,
+        url = _ref2.url,
+        stars = _ref2.stars,
+        cssClasses = _ref2.cssClasses;
+    return h(ItemWrapper, {
+      count: count,
+      value: value,
+      url: url,
+      cssClasses: cssClasses
+    }, stars.map(function (isFull, index) {
+      return h("svg", {
+        key: index,
+        className: cx([cx(cssClasses.starIcon), cx(isFull ? cssClasses.fullStarIcon : cssClasses.emptyStarIcon)]),
+        "aria-hidden": "true",
+        width: "24",
+        height: "24"
+      }, h("use", {
+        xlinkHref: isFull ? '#ais-RatingMenu-starSymbol' : '#ais-RatingMenu-starEmptySymbol'
+      }));
+    }), h("span", {
+      className: cx(cssClasses.label)
+    }, "& Up"), count && h("span", {
+      className: cx(cssClasses.count)
+    }, formatNumber(count)));
+  }
 };
 export default defaultTemplates;

package/es/widgets/rating-menu/rating-menu.d.ts

@@ -7,9 +7,15 @@ export declare type RatingMenuTemplates = Partial<{
      */
     item: Template<{
         name: string;
+        label: string;
+        value: string;
         count: number;
         isRefined: boolean;
         url: string;
+        stars: [boolean, boolean, boolean, boolean, boolean];
+        cssClasses: RatingMenuCSSClasses;
+        attribute?: string;
+        isFromSearch?: boolean;
     }>;
 }>;
 export declare type RatingMenuCSSClasses = Partial<{

package/es/widgets/refinement-list/defaultTemplates.js

@@ -1,6 +1,37 @@
+/** @jsx h */
+import { h } from 'preact';
+import { formatNumber } from "../../lib/formatNumber.js";
+import { cx } from "../../lib/utils/index.js";
 var defaultTemplates = {
-  item: "<label class=\"{{cssClasses.label}}\">\n  <input type=\"checkbox\"\n         class=\"{{cssClasses.checkbox}}\"\n         value=\"{{value}}\"\n         {{#isRefined}}checked{{/isRefined}} />\n  <span class=\"{{cssClasses.labelText}}\">{{#isFromSearch}}{{{highlighted}}}{{/isFromSearch}}{{^isFromSearch}}{{highlighted}}{{/isFromSearch}}</span>\n  <span class=\"{{cssClasses.count}}\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>\n</label>",
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n    ",
-  searchableNoResults: 'No results'
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        count = _ref.count,
+        value = _ref.value,
+        highlighted = _ref.highlighted,
+        isRefined = _ref.isRefined,
+        isFromSearch = _ref.isFromSearch;
+    return h("label", {
+      className: cx(cssClasses.label)
+    }, h("input", {
+      type: "checkbox",
+      className: cx(cssClasses.checkbox),
+      value: value,
+      defaultChecked: isRefined
+    }), h("span", {
+      className: cx(cssClasses.labelText),
+      dangerouslySetInnerHTML: isFromSearch ? {
+        __html: highlighted
+      } : undefined
+    }, !isFromSearch && highlighted), h("span", {
+      className: cx(cssClasses.count)
+    }, formatNumber(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  },
+  searchableNoResults: function searchableNoResults() {
+    return 'No results';
+  }
 };
 export default defaultTemplates;

package/es/widgets/refinement-list/refinement-list.d.ts

@@ -97,6 +97,10 @@ export declare type RefinementListItemData = {
      * Object containing all the classes computed for the item.
      */
     cssClasses: RefinementListCSSClasses;
+    /**
+     * Whether the `items` prop contains facet values from the global search or from the search inside the items.
+     */
+    isFromSearch: boolean;
 };
 export declare type RefinementListOwnTemplates = Partial<{
     /**
@@ -106,7 +110,9 @@ export declare type RefinementListOwnTemplates = Partial<{
     /**
      * Template used for the show more text, provided with `isShowingMore` data property.
      */
-    showMoreText: Template;
+    showMoreText: Template<{
+        isShowingMore: boolean;
+    }>;
     /**
      * Templates to use for search for facet values when there are no results.
      */

package/es/widgets/relevant-sort/defaultTemplates.js

@@ -1,5 +1,7 @@
 var defaultTemplates = {
-  text: '',
+  text: function text() {
+    return '';
+  },
   button: function button(_ref) {
     var isRelevantSorted = _ref.isRelevantSorted;
     return isRelevantSorted ? 'See all results' : 'See relevant results';

package/es/widgets/search-box/defaultTemplates.js

@@ -1,6 +1,64 @@
+/** @jsx h */
+import { h } from 'preact';
+
+var _ref2 = h("path", {
+  d: "M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
+});
+
+var _ref4 = h("path", {
+  d: "M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+});
+
+var _ref6 = h("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, h("g", {
+  transform: "translate(1 1)",
+  strokeWidth: "2"
+}, h("circle", {
+  strokeOpacity: ".5",
+  cx: "18",
+  cy: "18",
+  r: "18"
+}), h("path", {
+  d: "M36 18c0-9.94-8.06-18-18-18"
+}, h("animateTransform", {
+  attributeName: "transform",
+  type: "rotate",
+  from: "0 18 18",
+  to: "360 18 18",
+  dur: "1s",
+  repeatCount: "indefinite"
+}))));
+
 var defaultTemplate = {
-  reset: "\n<svg class=\"{{cssClasses.resetIcon}}\" viewBox=\"0 0 20 20\" width=\"10\" height=\"10\">\n  <path d=\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\"></path>\n</svg>\n  ",
-  submit: "\n<svg class=\"{{cssClasses.submitIcon}}\" width=\"10\" height=\"10\" viewBox=\"0 0 40 40\">\n  <path d=\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\"></path>\n</svg>\n  ",
-  loadingIndicator: "\n<svg class=\"{{cssClasses.loadingIcon}}\" width=\"16\" height=\"16\" viewBox=\"0 0 38 38\" stroke=\"#444\">\n  <g fill=\"none\" fillRule=\"evenodd\">\n    <g transform=\"translate(1 1)\" strokeWidth=\"2\">\n      <circle strokeOpacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\" />\n      <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n        <animateTransform\n          attributeName=\"transform\"\n          type=\"rotate\"\n          from=\"0 18 18\"\n          to=\"360 18 18\"\n          dur=\"1s\"\n          repeatCount=\"indefinite\"\n        />\n      </path>\n    </g>\n  </g>\n</svg>\n  "
+  reset: function reset(_ref) {
+    var cssClasses = _ref.cssClasses;
+    return h("svg", {
+      className: cssClasses.resetIcon,
+      viewBox: "0 0 20 20",
+      width: "10",
+      height: "10"
+    }, _ref2);
+  },
+  submit: function submit(_ref3) {
+    var cssClasses = _ref3.cssClasses;
+    return h("svg", {
+      className: cssClasses.submitIcon,
+      width: "10",
+      height: "10",
+      viewBox: "0 0 40 40"
+    }, _ref4);
+  },
+  loadingIndicator: function loadingIndicator(_ref5) {
+    var cssClasses = _ref5.cssClasses;
+    return h("svg", {
+      className: cssClasses.loadingIcon,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 38 38",
+      stroke: "#444"
+    }, _ref6);
+  }
 };
 export default defaultTemplate;

package/es/widgets/search-box/search-box.d.ts

@@ -1,19 +1,26 @@
 /** @jsx h */
 import type { WidgetFactory, Template } from '../../types';
 import type { SearchBoxConnectorParams, SearchBoxWidgetDescription } from '../../connectors/search-box/connectSearchBox';
+import type { SearchBoxComponentCSSClasses } from '../../components/SearchBox/SearchBox';
 export declare type SearchBoxTemplates = Partial<{
     /**
      * Template used for displaying the submit button. Can accept a function or a Hogan string.
      */
-    submit: Template;
+    submit: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
     /**
      * Template used for displaying the reset button. Can accept a function or a Hogan string.
      */
-    reset: Template;
+    reset: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
     /**
      * Template used for displaying the loading indicator. Can accept a function or a Hogan string.
      */
-    loadingIndicator: Template;
+    loadingIndicator: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
 }>;
 export declare type SearchBoxCSSClasses = Partial<{
     /**

package/es/widgets/stats/stats.d.ts

@@ -2,6 +2,14 @@
 import type { StatsComponentTemplates } from '../../components/Stats/Stats';
 import type { StatsConnectorParams, StatsRenderState, StatsWidgetDescription } from '../../connectors/stats/connectStats';
 import type { Template, WidgetFactory } from '../../types';
+declare type TextTemplateProps = {
+    hasManyResults: boolean;
+    hasNoResults: boolean;
+    hasOneResult: boolean;
+    hasNoSortedResults: boolean;
+    hasOneSortedResults: boolean;
+    hasManySortedResults: boolean;
+};
 export declare type StatsCSSClasses = Partial<{
     /**
      * CSS class to add to the root element.
@@ -14,13 +22,9 @@ export declare type StatsCSSClasses = Partial<{
 }>;
 export declare type StatsTemplates = Partial<{
     /**
-     * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
+     * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hasNoSortedResults`, `hasOneSortedResults`, `hasManySortedResults`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
      */
-    text: Template<{
-        hasManyResults: boolean;
-        hasNoResults: boolean;
-        hasOneResult: boolean;
-    } & StatsRenderState>;
+    text: Template<TextTemplateProps & StatsRenderState>;
 }>;
 export declare type StatsWidgetParams = {
     /**

package/es/widgets/stats/stats.js

@@ -11,29 +11,76 @@ import Stats from "../../components/Stats/Stats.js";
 import connectStats from "../../connectors/stats/connectStats.js";
 import { prepareTemplateProps, getContainerNode, createDocumentationMessageGenerator } from "../../lib/utils/index.js";
 import { component } from "../../lib/suit.js";
+import { formatNumber } from "../../lib/formatNumber.js";
 var withUsage = createDocumentationMessageGenerator({
   name: 'stats'
 });
 var suit = component('Stats');
 export var defaultTemplates = {
-  text: "\n    {{#areHitsSorted}}\n      {{#hasNoSortedResults}}No relevant results{{/hasNoSortedResults}}\n      {{#hasOneSortedResults}}1 relevant result{{/hasOneSortedResults}}\n      {{#hasManySortedResults}}{{#helpers.formatNumber}}{{nbSortedHits}}{{/helpers.formatNumber}} relevant results{{/hasManySortedResults}}\n      sorted out of {{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}}\n    {{/areHitsSorted}}\n    {{^areHitsSorted}}\n      {{#hasNoResults}}No results{{/hasNoResults}}\n      {{#hasOneResult}}1 result{{/hasOneResult}}\n      {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}\n    {{/areHitsSorted}}\n    found in {{processingTimeMS}}ms"
+  text: function text(props) {
+    return "".concat(props.areHitsSorted ? getSortedResultsSentence(props) : getResultsSentence(props), " found in ").concat(props.processingTimeMS, "ms");
+  }
 };
 
-var renderer = function renderer(_ref) {
-  var renderState = _ref.renderState,
-      cssClasses = _ref.cssClasses,
-      containerNode = _ref.containerNode,
-      templates = _ref.templates;
-  return function (_ref2, isFirstRendering) {
-    var hitsPerPage = _ref2.hitsPerPage,
-        nbHits = _ref2.nbHits,
-        nbSortedHits = _ref2.nbSortedHits,
-        areHitsSorted = _ref2.areHitsSorted,
-        nbPages = _ref2.nbPages,
-        page = _ref2.page,
-        processingTimeMS = _ref2.processingTimeMS,
-        query = _ref2.query,
-        instantSearchInstance = _ref2.instantSearchInstance;
+function getSortedResultsSentence(_ref) {
+  var nbHits = _ref.nbHits,
+      hasNoSortedResults = _ref.hasNoSortedResults,
+      hasOneSortedResults = _ref.hasOneSortedResults,
+      hasManySortedResults = _ref.hasManySortedResults,
+      nbSortedHits = _ref.nbSortedHits;
+  var suffix = "sorted out of ".concat(formatNumber(nbHits));
+
+  if (hasNoSortedResults) {
+    return "No relevant results ".concat(suffix);
+  }
+
+  if (hasOneSortedResults) {
+    return "1 relevant result ".concat(suffix);
+  }
+
+  if (hasManySortedResults) {
+    return "".concat(formatNumber(nbSortedHits || 0), " relevant results ").concat(suffix);
+  }
+
+  return '';
+}
+
+function getResultsSentence(_ref2) {
+  var nbHits = _ref2.nbHits,
+      hasNoResults = _ref2.hasNoResults,
+      hasOneResult = _ref2.hasOneResult,
+      hasManyResults = _ref2.hasManyResults;
+
+  if (hasNoResults) {
+    return 'No results';
+  }
+
+  if (hasOneResult) {
+    return '1 result';
+  }
+
+  if (hasManyResults) {
+    return "".concat(formatNumber(nbHits), " results");
+  }
+
+  return '';
+}
+
+var renderer = function renderer(_ref3) {
+  var renderState = _ref3.renderState,
+      cssClasses = _ref3.cssClasses,
+      containerNode = _ref3.containerNode,
+      templates = _ref3.templates;
+  return function (_ref4, isFirstRendering) {
+    var hitsPerPage = _ref4.hitsPerPage,
+        nbHits = _ref4.nbHits,
+        nbSortedHits = _ref4.nbSortedHits,
+        areHitsSorted = _ref4.areHitsSorted,
+        nbPages = _ref4.nbPages,
+        page = _ref4.page,
+        processingTimeMS = _ref4.processingTimeMS,
+        query = _ref4.query,
+        instantSearchInstance = _ref4.instantSearchInstance;
 
     if (isFirstRendering) {
       renderState.templateProps = prepareTemplateProps({
@@ -67,12 +114,12 @@ var renderer = function renderer(_ref) {
 
 
 var stats = function stats(widgetParams) {
-  var _ref3 = widgetParams || {},
-      container = _ref3.container,
-      _ref3$cssClasses = _ref3.cssClasses,
-      userCssClasses = _ref3$cssClasses === void 0 ? {} : _ref3$cssClasses,
-      _ref3$templates = _ref3.templates,
-      templates = _ref3$templates === void 0 ? {} : _ref3$templates;
+  var _ref5 = widgetParams || {},
+      container = _ref5.container,
+      _ref5$cssClasses = _ref5.cssClasses,
+      userCssClasses = _ref5$cssClasses === void 0 ? {} : _ref5$cssClasses,
+      _ref5$templates = _ref5.templates,
+      templates = _ref5$templates === void 0 ? {} : _ref5$templates;
 
   if (!container) {
     throw new Error(withUsage('The `container` option is required.'));

package/es/widgets/toggle-refinement/defaultTemplates.js

@@ -1,4 +1,7 @@
 var defaultTemplates = {
-  labelText: '{{name}}'
+  labelText: function labelText(_ref) {
+    var name = _ref.name;
+    return name;
+  }
 };
 export default defaultTemplates;