instantsearch.js 4.45.1 → 4.46.0

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;

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

@@ -23,7 +23,9 @@ export declare type ToggleRefinementTemplates = Partial<{
     /**
      * the text that describes the toggle action
      */
-    labelText: Template<ToggleRefinementValue>;
+    labelText: Template<ToggleRefinementValue & {
+        name: string;
+    }>;
 }>;
 export declare type ToggleRefinementWidgetParams = {
     /**

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

@@ -1,18 +1,90 @@
-var getButtonInnerElement = function getButtonInnerElement(status, errorCode, isListening) {
+/** @jsx h */
+import { Fragment, h } from 'preact';
+
+var _ref2 = h(Fragment, null, h("line", {
+  x1: "1",
+  y1: "1",
+  x2: "23",
+  y2: "23"
+}), h("path", {
+  d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"
+}), h("path", {
+  d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"
+}), h("line", {
+  x1: "12",
+  y1: "19",
+  x2: "12",
+  y2: "23"
+}), h("line", {
+  x1: "8",
+  y1: "23",
+  x2: "16",
+  y2: "23"
+}));
+
+var _ref3 = h("path", {
+  d: "M19 10v2a7 7 0 0 1-14 0v-2"
+});
+
+var _ref4 = h("line", {
+  x1: "12",
+  y1: "19",
+  x2: "12",
+  y2: "23"
+});
+
+var _ref5 = h("line", {
+  x1: "8",
+  y1: "23",
+  x2: "16",
+  y2: "23"
+});
+
+var ButtonInnerElement = function ButtonInnerElement(_ref) {
+  var status = _ref.status,
+      errorCode = _ref.errorCode,
+      isListening = _ref.isListening;
+
   if (status === 'error' && errorCode === 'not-allowed') {
-    return "<line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\n            <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6\"></path>\n            <path d=\"M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23\"></path>\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n            <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>";
+    return _ref2;
   }
 
-  return "<path\n            d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\n            fill=\"".concat(isListening ? 'currentColor' : 'none', "\">\n          </path>\n          <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n          <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n          <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>");
+  return h(Fragment, null, h("path", {
+    d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z",
+    fill: isListening ? 'currentColor' : 'none'
+  }), _ref3, _ref4, _ref5);
 };
 
 var defaultTemplates = {
-  buttonText: function buttonText(_ref) {
-    var status = _ref.status,
-        errorCode = _ref.errorCode,
-        isListening = _ref.isListening;
-    return "<svg\n       width=\"16\"\n       height=\"16\"\n       viewBox=\"0 0 24 24\"\n       fill=\"none\"\n       stroke=\"currentColor\"\n       stroke-width=\"2\"\n       stroke-linecap=\"round\"\n       stroke-linejoin=\"round\"\n     >\n       ".concat(getButtonInnerElement(status, errorCode, isListening), "\n     </svg>");
+  buttonText: function buttonText(_ref6) {
+    var status = _ref6.status,
+        errorCode = _ref6.errorCode,
+        isListening = _ref6.isListening;
+    return h("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor"
+      /* eslint-disable react/no-unknown-property */
+      // Preact supports kebab case attributes, and using camel case would
+      // require using `preact/compat`.
+      // @TODO: reconsider using the `react` ESLint preset
+      ,
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+      /* eslint-enable react/no-unknown-property */
+
+    }, h(ButtonInnerElement, {
+      status: status,
+      errorCode: errorCode,
+      isListening: isListening
+    }));
   },
-  status: "<p>{{transcript}}</p>"
+  status: function status(_ref7) {
+    var transcript = _ref7.transcript;
+    return h("p", null, transcript);
+  }
 };
 export default defaultTemplates;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch.js",
-  "version": "4.45.1",
+  "version": "4.46.0",
   "description": "InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.",
   "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/",
   "types": "es/index.d.ts",
@@ -63,7 +63,7 @@
     "classnames": "^2.2.5",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
-    "preact": "^10.6.0",
+    "preact": "^10.10.0",
     "qs": "^6.5.1 < 6.10",
     "search-insights": "^2.1.0"
   },
@@ -76,12 +76,13 @@
     "@babel/preset-env": "7.9.6",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@googlemaps/jest-mocks": "2.7.5",
     "@microsoft/api-extractor": "7.18.0",
     "@storybook/addon-actions": "5.3.9",
     "@storybook/html": "5.3.9",
     "@storybook/theming": "5.3.9",
     "@testing-library/dom": "7.9.0",
-    "@testing-library/jest-dom": "4.1.0",
+    "@testing-library/jest-dom": "4.2.0",
     "@testing-library/preact": "1.0.2",
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.1.15",
@@ -158,11 +159,11 @@
   "bundlesize": [
     {
       "path": "./dist/instantsearch.production.min.js",
-      "maxSize": "70.50 kB"
+      "maxSize": "72.25 kB"
     },
     {
       "path": "./dist/instantsearch.development.js",
-      "maxSize": "152.00 kB"
+      "maxSize": "155.25 kB"
     }
   ]
 }