instantsearch.js 4.45.1 → 4.46.0

package/es/components/Hits/Hits.d.ts

@@ -15,5 +15,5 @@ export declare type HitsProps = {
     cssClasses: HitsComponentCSSClasses;
     templateProps: PreparedTemplateProps<HitsComponentTemplates>;
 };
-declare const Hits: ({ results, hits, bindEvent, cssClasses, templateProps, }: HitsProps) => h.JSX.Element;
+declare const Hits: ({ results, hits, bindEvent, sendEvent, cssClasses, templateProps, }: HitsProps) => h.JSX.Element;
 export default Hits;

package/es/components/Hits/Hits.js

@@ -15,6 +15,7 @@ var Hits = function Hits(_ref) {
   var results = _ref.results,
       hits = _ref.hits,
       bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps;
 
@@ -43,7 +44,8 @@ var Hits = function Hits(_ref) {
       data: _objectSpread(_objectSpread({}, hit), {}, {
         __hitIndex: index
       }),
-      bindEvent: bindEvent
+      bindEvent: bindEvent,
+      sendEvent: sendEvent
     }));
   })));
 };

package/es/components/InfiniteHits/InfiniteHits.d.ts

@@ -22,5 +22,5 @@ export declare type InfiniteHitsProps = {
     sendEvent: SendEventForHits;
     bindEvent: BindEventForHits;
 };
-declare const InfiniteHits: ({ results, hits, bindEvent, hasShowPrevious, showPrevious, showMore, isFirstPage, isLastPage, cssClasses, templateProps, }: InfiniteHitsProps) => h.JSX.Element;
+declare const InfiniteHits: ({ results, hits, bindEvent, sendEvent, hasShowPrevious, showPrevious, showMore, isFirstPage, isLastPage, cssClasses, templateProps, }: InfiniteHitsProps) => h.JSX.Element;
 export default InfiniteHits;

package/es/components/InfiniteHits/InfiniteHits.js

@@ -15,6 +15,7 @@ var InfiniteHits = function InfiniteHits(_ref) {
   var results = _ref.results,
       hits = _ref.hits,
       bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent,
       hasShowPrevious = _ref.hasShowPrevious,
       showPrevious = _ref.showPrevious,
       showMore = _ref.showMore,
@@ -56,7 +57,8 @@ var InfiniteHits = function InfiniteHits(_ref) {
       data: _objectSpread(_objectSpread({}, hit), {}, {
         __hitIndex: position
       }),
-      bindEvent: bindEvent
+      bindEvent: bindEvent,
+      sendEvent: sendEvent
     }));
   })), h(Template, _extends({}, templateProps, {
     templateKey: "showMoreText",

package/es/components/Template/Template.d.ts

@@ -1,6 +1,7 @@
 /** @jsx h */
 import type { JSX } from 'preact';
 import { Component } from 'preact';
+import type { BindEventForHits, SendEventForHits } from '../../lib/utils';
 import type { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 import type { Templates } from '../../types';
 declare const defaultProps: {
@@ -10,12 +11,13 @@ declare const defaultProps: {
     templates: {};
     templatesConfig: {};
 };
-declare type TemplateProps = {
+export declare type TemplateProps = {
     data?: Record<string, any>;
     rootProps?: Record<string, any>;
     rootTagName?: keyof JSX.IntrinsicElements;
     templateKey: string;
-    bindEvent?: (...args: any[]) => string;
+    bindEvent?: BindEventForHits;
+    sendEvent?: SendEventForHits;
 } & PreparedTemplateProps<Templates> & Readonly<typeof defaultProps>;
 declare class Template extends Component<TemplateProps> {
     static readonly defaultProps: {

package/es/components/Template/Template.js

@@ -1,7 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -26,7 +26,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /** @jsx h */
 import { h, Component } from 'preact';
-import { renderTemplate, isEqual } from "../../lib/utils/index.js";
+import { warning, renderTemplate, isEqual } from "../../lib/utils/index.js";
 var defaultProps = {
   data: {},
   rootTagName: 'div',
@@ -55,6 +55,11 @@ var Template = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this = this;
+
+      process.env.NODE_ENV === 'development' ? warning(Object.keys(this.props.templates).every(function (key) {
+        return typeof _this.props.templates[key] === 'function';
+      }), "Hogan.js and string-based templates are deprecated and will not be supported in InstantSearch.js 5.x.\n\nYou can replace them with function-form templates and use either the provided `html` function or JSX templates.\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-templates") : void 0;
       var RootTagName = this.props.rootTagName;
       var useCustomCompileOptions = this.props.useCustomCompileOptions[this.props.templateKey];
       var compileOptions = useCustomCompileOptions ? this.props.templatesConfig.compileOptions : {};
@@ -64,7 +69,8 @@ var Template = /*#__PURE__*/function (_Component) {
         compileOptions: compileOptions,
         helpers: this.props.templatesConfig.helpers,
         data: this.props.data,
-        bindEvent: this.props.bindEvent
+        bindEvent: this.props.bindEvent,
+        sendEvent: this.props.sendEvent
       });
 
       if (content === null) {
@@ -73,6 +79,10 @@ var Template = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      if (_typeof(content) === 'object') {
+        return h(RootTagName, this.props.rootProps, content);
+      }
+
       return h(RootTagName, _extends({}, this.props.rootProps, {
         dangerouslySetInnerHTML: {
           __html: content

package/es/lib/createHelpers.js

@@ -5,11 +5,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 import { highlight as _highlight, reverseHighlight as _reverseHighlight, snippet as _snippet, reverseSnippet as _reverseSnippet, insights as _insights } from "../helpers/index.js";
+import { formatNumber as _formatNumber } from "./formatNumber.js";
 export default function hoganHelpers(_ref) {
   var numberLocale = _ref.numberLocale;
   return {
     formatNumber: function formatNumber(value, render) {
-      return Number(render(value)).toLocaleString(numberLocale);
+      return _formatNumber(Number(render(value)), numberLocale);
     },
     highlight: function highlight(options, render) {
       try {

package/es/lib/formatNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatNumber(value: number, numberLocale?: string): string;

package/es/lib/formatNumber.js

@@ -0,0 +1,3 @@
+export function formatNumber(value, numberLocale) {
+  return value.toLocaleString(numberLocale);
+}

package/es/lib/utils/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(cssClasses?: string | string[] | undefined): string;

package/es/lib/utils/cx.js

@@ -0,0 +1,3 @@
+export function cx(cssClasses) {
+  return Array.isArray(cssClasses) ? cssClasses.filter(Boolean).join(' ') : cssClasses || '';
+}

package/es/lib/utils/index.d.ts

@@ -45,3 +45,4 @@ export { debounce } from './debounce';
 export { serializePayload, deserializePayload } from './serializer';
 export { getWidgetAttribute } from './getWidgetAttribute';
 export { safelyRunOnBrowser } from './safelyRunOnBrowser';
+export { cx } from './cx';

package/es/lib/utils/index.js

@@ -44,4 +44,5 @@ export { createConcurrentSafePromise } from "./createConcurrentSafePromise.js";
 export { debounce } from "./debounce.js";
 export { serializePayload, deserializePayload } from "./serializer.js";
 export { getWidgetAttribute } from "./getWidgetAttribute.js";
-export { safelyRunOnBrowser } from "./safelyRunOnBrowser.js";
+export { safelyRunOnBrowser } from "./safelyRunOnBrowser.js";
+export { cx } from "./cx.js";

package/es/lib/utils/renderTemplate.d.ts

@@ -1,12 +1,13 @@
 import type { HoganOptions } from 'hogan.js';
 import type { Templates, HoganHelpers } from '../../types';
-import type { BindEventForHits } from './createSendEventForHits';
-declare function renderTemplate({ templates, templateKey, compileOptions, helpers, data, bindEvent, }: {
+import type { BindEventForHits, SendEventForHits } from './createSendEventForHits';
+declare function renderTemplate({ templates, templateKey, compileOptions, helpers, data, bindEvent, sendEvent, }: {
     templates: Templates;
     templateKey: string;
     compileOptions?: HoganOptions;
     helpers?: HoganHelpers;
     data?: Record<string, any>;
     bindEvent?: BindEventForHits;
-}): string;
+    sendEvent?: SendEventForHits;
+}): string | import("preact").VNode<{}> | import("preact").VNode<{}>[];
 export default renderTemplate;

package/es/lib/utils/renderTemplate.js

@@ -7,6 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 import hogan from 'hogan.js';
+import { Highlight, ReverseHighlight, ReverseSnippet, Snippet } from "../../helpers/components/index.js";
+import { html } from 'htm/preact';
 
 // We add all our template helper methods to the template as lambdas. Note
 // that lambdas in Mustache are supposed to accept a second argument of
@@ -37,7 +39,8 @@ function renderTemplate(_ref) {
       compileOptions = _ref.compileOptions,
       helpers = _ref.helpers,
       data = _ref.data,
-      bindEvent = _ref.bindEvent;
+      bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent;
   var template = templates[templateKey];
 
   if (typeof template !== 'string' && typeof template !== 'function') {
@@ -45,7 +48,17 @@ function renderTemplate(_ref) {
   }
 
   if (typeof template === 'function') {
-    return template(data, bindEvent);
+    // @MAJOR no longer pass bindEvent when string templates are removed
+    var params = bindEvent || {};
+    params.html = html;
+    params.sendEvent = sendEvent;
+    params.components = {
+      Highlight: Highlight,
+      ReverseHighlight: ReverseHighlight,
+      Snippet: Snippet,
+      ReverseSnippet: ReverseSnippet
+    };
+    return template(data, params);
   }
 
   var transformedHelpers = transformHelpersToHogan(helpers, compileOptions, data);

package/es/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "4.45.1";
+declare const _default: "4.46.0";
 export default _default;

package/es/lib/version.js

@@ -1 +1 @@
-export default '4.45.1';
+export default '4.46.0';

package/es/types/templates.d.ts

@@ -1,6 +1,19 @@
-import type { BindEventForHits } from '../lib/utils';
-export declare type Template<TTemplateData = void> = string | ((data: TTemplateData) => string);
-export declare type TemplateWithBindEvent<TTemplateData = void> = string | ((data: TTemplateData, bindEvent: BindEventForHits) => string);
+import type { VNode } from 'preact';
+import type { Highlight, ReverseHighlight, ReverseSnippet, Snippet } from '../helpers/components';
+import type { html } from 'htm/preact';
+import type { BindEventForHits, SendEventForHits } from '../lib/utils';
+export declare type Template<TTemplateData = void> = string | ((data: TTemplateData, params: TemplateParams) => VNode | VNode[] | string);
+export declare type TemplateParams = BindEventForHits & {
+    html: typeof html;
+    components: {
+        Highlight: typeof Highlight;
+        ReverseHighlight: typeof ReverseHighlight;
+        Snippet: typeof Snippet;
+        ReverseSnippet: typeof ReverseSnippet;
+    };
+    sendEvent?: SendEventForHits;
+};
+export declare type TemplateWithBindEvent<TTemplateData = void> = string | ((data: TTemplateData, params: TemplateParams) => VNode | VNode[] | string);
 export declare type Templates = {
     [key: string]: Template<any> | TemplateWithBindEvent<any> | undefined;
 };

package/es/widgets/answers/defaultTemplates.js

@@ -1,6 +1,10 @@
 var defaultTemplates = {
-  header: '',
-  loader: '',
+  header: function header() {
+    return '';
+  },
+  loader: function loader() {
+    return '';
+  },
   item: function item(_item) {
     return JSON.stringify(_item);
   }

package/es/widgets/breadcrumb/defaultTemplates.js

@@ -1,5 +1,9 @@
 var defaultTemplates = {
-  home: 'Home',
-  separator: '>'
+  home: function home() {
+    return 'Home';
+  },
+  separator: function separator() {
+    return '>';
+  }
 };
 export default defaultTemplates;

package/es/widgets/clear-refinements/clear-refinements.d.ts

@@ -19,7 +19,9 @@ export declare type ClearRefinementsTemplates = Partial<{
     /**
      * Template for the content of the button
      */
-    resetLabel: Template;
+    resetLabel: Template<{
+        hasRefinements: boolean;
+    }>;
 }>;
 export declare type ClearRefinementsWidgetParams = {
     /**

package/es/widgets/clear-refinements/defaultTemplates.js

@@ -1,4 +1,6 @@
 var defaultTemplates = {
-  resetLabel: 'Clear refinements'
+  resetLabel: function resetLabel() {
+    return 'Clear refinements';
+  }
 };
 export default defaultTemplates;

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<{