instantsearch.js 4.72.2 → 4.73.0

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

@@ -3,9 +3,9 @@ import { h } from 'preact';
 import type { SendEventForHits, BindEventForHits } from '../../lib/utils';
 import type { ComponentCSSClasses, Hit, InsightsClient } from '../../types';
 import type { InfiniteHitsCSSClasses, InfiniteHitsTemplates } from '../../widgets/infinite-hits/infinite-hits';
-import type { SearchResults } from 'algoliasearch-helper';
+import type { Banner, SearchResults } from 'algoliasearch-helper';
 export type InfiniteHitsComponentCSSClasses = ComponentCSSClasses<InfiniteHitsCSSClasses>;
-export type InfiniteHitsComponentTemplates = Required<InfiniteHitsTemplates>;
+export type InfiniteHitsComponentTemplates = InfiniteHitsTemplates;
 export type InfiniteHitsProps = {
     cssClasses: InfiniteHitsComponentCSSClasses;
     hits: Hit[];
@@ -22,6 +22,7 @@ export type InfiniteHitsProps = {
     insights?: InsightsClient;
     sendEvent: SendEventForHits;
     bindEvent: BindEventForHits;
+    banner?: Banner;
 };
-declare const InfiniteHits: ({ results, hits, insights, bindEvent, sendEvent, hasShowPrevious, showPrevious, showMore, isFirstPage, isLastPage, cssClasses, templateProps, }: InfiniteHitsProps) => h.JSX.Element;
+declare const InfiniteHits: ({ results, hits, insights, bindEvent, sendEvent, hasShowPrevious, showPrevious, showMore, isFirstPage, isLastPage, cssClasses, templateProps, banner, }: InfiniteHitsProps) => h.JSX.Element;
 export default InfiniteHits;

package/es/components/InfiniteHits/InfiniteHits.js

@@ -10,32 +10,65 @@ import { h } from 'preact';
 import { createInsightsEventHandler } from "../../lib/insights/listener.js";
 import { warning } from "../../lib/utils/index.js";
 import Template from "../Template/Template.js";
-var InfiniteHits = function InfiniteHits(_ref) {
-  var results = _ref.results,
-    hits = _ref.hits,
-    insights = _ref.insights,
-    bindEvent = _ref.bindEvent,
-    sendEvent = _ref.sendEvent,
-    hasShowPrevious = _ref.hasShowPrevious,
-    showPrevious = _ref.showPrevious,
-    showMore = _ref.showMore,
-    isFirstPage = _ref.isFirstPage,
-    isLastPage = _ref.isLastPage,
-    cssClasses = _ref.cssClasses,
-    templateProps = _ref.templateProps;
+var DefaultBanner = function DefaultBanner(_ref) {
+  var banner = _ref.banner,
+    classNames = _ref.classNames;
+  if (!banner.image.urls[0].url) {
+    return null;
+  }
+  return h("aside", {
+    className: cx(classNames.bannerRoot)
+  }, banner.link ? h("a", {
+    className: cx(classNames.bannerLink),
+    href: banner.link.url,
+    target: banner.link.target
+  }, h("img", {
+    className: cx(classNames.bannerImage),
+    src: banner.image.urls[0].url,
+    alt: banner.image.title
+  })) : h("img", {
+    className: cx(classNames.bannerImage),
+    src: banner.image.urls[0].url,
+    alt: banner.image.title
+  }));
+};
+var InfiniteHits = function InfiniteHits(_ref2) {
+  var results = _ref2.results,
+    hits = _ref2.hits,
+    insights = _ref2.insights,
+    bindEvent = _ref2.bindEvent,
+    sendEvent = _ref2.sendEvent,
+    hasShowPrevious = _ref2.hasShowPrevious,
+    showPrevious = _ref2.showPrevious,
+    showMore = _ref2.showMore,
+    isFirstPage = _ref2.isFirstPage,
+    isLastPage = _ref2.isLastPage,
+    cssClasses = _ref2.cssClasses,
+    templateProps = _ref2.templateProps,
+    banner = _ref2.banner;
   var handleInsightsClick = createInsightsEventHandler({
     insights: insights,
     sendEvent: sendEvent
   });
   if (results.hits.length === 0) {
-    return h(Template, _extends({}, templateProps, {
+    return h("div", {
+      className: cx(cssClasses.root, cssClasses.emptyRoot),
+      onClick: handleInsightsClick
+    }, banner && (templateProps.templates.banner ? h(Template, _extends({}, templateProps, {
+      templateKey: "banner",
+      rootTagName: "fragment",
+      data: {
+        banner: banner,
+        className: cssClasses.bannerRoot
+      }
+    })) : h(DefaultBanner, {
+      banner: banner,
+      classNames: cssClasses
+    })), h(Template, _extends({}, templateProps, {
       templateKey: "empty",
-      rootProps: {
-        className: cx(cssClasses.root, cssClasses.emptyRoot),
-        onClick: handleInsightsClick
-      },
+      rootTagName: "fragment",
       data: results
-    }));
+    })));
   }
   return h("div", {
     className: cssClasses.root
@@ -47,6 +80,16 @@ var InfiniteHits = function InfiniteHits(_ref) {
       disabled: isFirstPage,
       onClick: showPrevious
     }
+  })), banner && (templateProps.templates.banner ? h(Template, _extends({}, templateProps, {
+    templateKey: "banner",
+    rootTagName: "fragment",
+    data: {
+      banner: banner,
+      className: cssClasses.bannerRoot
+    }
+  })) : h(DefaultBanner, {
+    banner: banner,
+    classNames: cssClasses
   })), h("ol", {
     className: cssClasses.list
   }, hits.map(function (hit, index) {

package/es/components/Template/Template.js

@@ -129,7 +129,7 @@ var Template = /*#__PURE__*/function (_Component2) {
       if (RootTagName === Fragment) {
         return h(RawHtml, {
           content: content,
-          key: content
+          key: Math.random()
         });
       }
       return h(RootTagName, _extends({}, this.props.rootProps, {

package/es/connectors/pagination/Paginator.js

@@ -57,12 +57,12 @@ var Paginator = /*#__PURE__*/function () {
   }, {
     key: "isLastPage",
     value: function isLastPage() {
-      return this.currentPage === this.total - 1 || this.total === 0;
+      return this.currentPage >= this.total - 1;
     }
   }, {
     key: "isFirstPage",
     value: function isFirstPage() {
-      return this.currentPage === 0;
+      return this.currentPage <= 0;
     }
   }]);
   return Paginator;

package/es/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "4.72.2";
+declare const _default: "4.73.0";
 export default _default;

package/es/lib/version.js

@@ -1 +1 @@
-export default '4.72.2';
+export default '4.73.0';

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

@@ -35,6 +35,18 @@ export type InfiniteHitsCSSClasses = Partial<{
      * The disabled “Show more” button.
      */
     disabledLoadMore: string | string[];
+    /**
+     * Class names to apply to the banner element
+     */
+    bannerRoot: string | string[];
+    /**
+     * Class names to apply to the banner image element
+     */
+    bannerImage: string | string[];
+    /**
+     * Class names to apply to the banner link element
+     */
+    bannerLink: string | string[];
 }>;
 export type InfiniteHitsTemplates<THit extends NonNullable<object> = BaseHit> = Partial<{
     /**
@@ -56,6 +68,13 @@ export type InfiniteHitsTemplates<THit extends NonNullable<object> = BaseHit> =
         /** @deprecated the index in the hits array, use __position instead, which is the absolute position */
         __hitIndex: number;
     }>;
+    /**
+     * Template to use for the banner.
+     */
+    banner: Template<{
+        banner: Required<InfiniteHitsRenderState['banner']>;
+        className: string;
+    }>;
 }>;
 export type InfiniteHitsWidgetParams<THit extends NonNullable<object> = BaseHit> = {
     /**

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

@@ -33,7 +33,8 @@ var renderer = function renderer(_ref) {
       instantSearchInstance = _ref2.instantSearchInstance,
       insights = _ref2.insights,
       bindEvent = _ref2.bindEvent,
-      sendEvent = _ref2.sendEvent;
+      sendEvent = _ref2.sendEvent,
+      banner = _ref2.banner;
     if (isFirstRendering) {
       renderState.templateProps = prepareTemplateProps({
         defaultTemplates: defaultTemplates,
@@ -54,7 +55,8 @@ var renderer = function renderer(_ref) {
       isLastPage: isLastPage,
       insights: insights,
       sendEvent: sendEvent,
-      bindEvent: bindEvent
+      bindEvent: bindEvent,
+      banner: banner
     }), containerNode);
   };
 };
@@ -97,7 +99,16 @@ export default (function infiniteHits(widgetParams) {
     disabledLoadMore: cx(suit({
       descendantName: 'loadMore',
       modifierName: 'disabled'
-    }), userCssClasses.disabledLoadMore)
+    }), userCssClasses.disabledLoadMore),
+    bannerRoot: cx(suit({
+      descendantName: 'banner'
+    }), userCssClasses.bannerRoot),
+    bannerImage: cx(suit({
+      descendantName: 'banner-image'
+    }), userCssClasses.bannerImage),
+    bannerLink: cx(suit({
+      descendantName: 'banner-link'
+    }), userCssClasses.bannerLink)
   };
   var specializedRenderer = renderer({
     containerNode: containerNode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch.js",
-  "version": "4.72.2",
+  "version": "4.73.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",
@@ -31,7 +31,7 @@
     "@types/google.maps": "^3.45.3",
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
-    "algoliasearch-helper": "3.22.1",
+    "algoliasearch-helper": "3.22.2",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
     "instantsearch-ui-components": "0.7.0",
@@ -56,9 +56,9 @@
     "watch:es": "yarn --silent build:es:base --watch"
   },
   "devDependencies": {
-    "@instantsearch/mocks": "1.49.0",
-    "@instantsearch/tests": "1.49.0",
-    "@instantsearch/testutils": "1.38.0",
+    "@instantsearch/mocks": "1.50.0",
+    "@instantsearch/tests": "1.50.0",
+    "@instantsearch/testutils": "1.39.0",
     "@storybook/html": "5.3.9",
     "@types/scriptjs": "0.0.2",
     "algoliasearch": "4.23.2",
@@ -66,5 +66,5 @@
     "scriptjs": "2.5.9",
     "webpack": "4.47.0"
   },
-  "gitHead": "4b7875af7a48a1f193b81793e473b7463cb7330c"
+  "gitHead": "e7cf000edf9869be9d2e3df9b3e1c8fdb25a0040"
 }