@findlane/browser 0.20.0 → 0.21.0

package/dist/index.d.ts

@@ -295,6 +295,12 @@ export type BrowserEvents = {
         position?: number;
         kind?: "typed" | "popular" | "recent";
     }): void;
+    /** A rule's banner was clicked: its rule (each banner in a response says which), the search's query, and
+     * its place. The Merchandising page shows each banner's clicks beside how often it was shown. */
+    bannerClick(rule: string, details?: {
+        query?: string;
+        position?: number;
+    }): void;
     addToCart(items: EventItem[], options?: {
         currency?: string;
     }): void;

package/dist/index.js

@@ -137,6 +137,7 @@ function eventSender(url, fetcher, mode, ids) {
         },
         click: (objectID, details) => add({ type: "click", objectID, ...details }),
         suggestion: (query, details) => add({ type: "suggestion", query, ...details }),
+        bannerClick: (rule, details) => add({ type: "bannerClick", rule, ...details }),
         addToCart: (items, options) => add({ type: "addToCart", items, ...options }),
         purchase: (order) => add({ type: "purchase", ...order }),
         consent(granted) {

package/dist/react/components.d.ts

@@ -73,7 +73,7 @@ export declare function DefaultBanner({ banner }: {
     banner: Banner;
 }): import("react").JSX.Element;
 /** The results. Following a link in a hit sends a click event, with its place and the query. Rules'
- * banners show at their places among the first page's hits. */
+ * banners show at their places among the first page's hits, and following a banner's link sends a banner click. */
 export declare function Hits<T = Record<string, unknown>>({ render, renderBanner, empty, relatedTitle, loading, className }: HitsProps<T>): import("react").JSX.Element;
 export type RefinementListProps = {
     field: string;

package/dist/react/components.js

@@ -79,9 +79,9 @@ export function DefaultBanner({ banner }) {
     return banner.link ? _jsx("a", { href: banner.link, children: content }) : content;
 }
 /** The results. Following a link in a hit sends a click event, with its place and the query. Rules'
- * banners show at their places among the first page's hits. */
+ * banners show at their places among the first page's hits, and following a banner's link sends a banner click. */
 export function Hits({ render, renderBanner, empty, relatedTitle, loading = null, className }) {
-    const { hits, related, isLoaded, isPending, error, click, response, request } = useHits();
+    const { hits, related, isLoaded, isPending, error, click, bannerClick, response, request } = useHits();
     const { query } = useSearchBox();
     if (error && !isLoaded)
         return _jsx("p", { "data-findlane-note": "", children: messageFor(error) });
@@ -94,7 +94,13 @@ export function Hits({ render, renderBanner, empty, relatedTitle, loading = null
     // Banners go before the hit at their place, on the first page; past the last hit, after it.
     const banners = hits.length && !request?.offset ? response?.banners ?? [] : [];
     const bannerAt = (place) => banners.filter((banner) => Math.min(Math.max(banner.position ?? 1, 1), shown.length) === place);
-    const bannerItems = (place) => bannerAt(place).map((banner, at) => (_jsx("li", { "data-findlane-banner": "", children: renderBanner ? renderBanner(banner) : _jsx(DefaultBanner, { banner: banner }) }, `banner-${banner.rule}-${at}`)));
+    // Following a banner's link sends a banner click, as a hit's sends a click.
+    const bannerItems = (place) => bannerAt(place).map((banner, at) => {
+        const clicked = (event) => { if (!event.defaultPrevented && onLink(event))
+            bannerClick(banner); };
+        return (_jsx("li", { "data-findlane-banner": "", onClick: clicked, onAuxClick: (event) => { if (event.button === 1)
+                clicked(event); }, children: renderBanner ? renderBanner(banner) : _jsx(DefaultBanner, { banner: banner }) }, `banner-${banner.rule}-${at}`));
+    });
     const list = (_jsx("ol", { className: className, "data-findlane-hits": "", "data-findlane-related": !hits.length || undefined, "data-pending": isPending || undefined, children: shown.map((hit, index) => {
             // A click, and a middle click that opens the link in a new tab.
             const clicked = (event) => { if (!event.defaultPrevented && onLink(event))

package/dist/react/search-provider.d.ts

@@ -54,6 +54,11 @@ export declare function useHits<T = Record<string, unknown>>(): {
     click: (hit: {
         id: string;
     }) => void;
+    /** Sends a click on a rule's banner. Hits does it for links in a banner; call it from your own banner. */
+    bannerClick: (banner: {
+        rule: string;
+        position?: number;
+    }) => void;
 };
 /** Did you mean, with the index's didYouMean setting: the query the results are for when typo tolerance
  * corrected some words (`applied`, "Showing results for"), or, when nothing matched, a query that

package/dist/react/search-provider.js

@@ -99,6 +99,8 @@ export function useHits() {
         /** Sends a click event for a hit, with its place and the query, for click-through in Analytics.
          * Hits does it for links in a hit; call it from a hit rendered without a link. */
         click: (hit) => store.click(hit.id),
+        /** Sends a click on a rule's banner. Hits does it for links in a banner; call it from your own banner. */
+        bannerClick: (banner) => store.bannerClick(banner),
     };
 }
 /** Did you mean, with the index's didYouMean setting: the query the results are for when typo tolerance

package/dist/react/store.d.ts

@@ -65,6 +65,11 @@ export declare class SearchStore<T = unknown> {
     /** Sends a click on a result: its place in the results, from 1, and the query they're for. A related
      * result's click says so (list "related"), with its place among them. */
     click(objectID: string): void;
+    /** Sends a click on a rule's banner, with the query it showed for. */
+    bannerClick(banner: {
+        rule: string;
+        position?: number;
+    }): void;
     /** Searches unless the results already answer the current state; with a state, such as the
      * URL's, adopts it first. */
     start(state?: SearchState): void;

package/dist/react/store.js

@@ -77,6 +77,11 @@ export class SearchStore {
             ...(index >= 0 ? { position: (results.request.offset ?? 0) + index + 1 } : {}),
             ...(related >= 0 ? { position: related + 1, list: "related" } : {}) });
     }
+    /** Sends a click on a rule's banner, with the query it showed for. */
+    bannerClick(banner) {
+        this.client.events.bannerClick(banner.rule, { query: this.snapshot.results?.request.q ?? "",
+            ...(banner.position ? { position: banner.position } : {}) });
+    }
     /** Searches unless the results already answer the current state; with a state, such as the
      * URL's, adopts it first. */
     start(state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@findlane/browser",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Findlane browser SDK: fast, typo-tolerant public search from the browser with an index's public ID, plus React hooks and components.",
   "keywords": ["findlane", "search", "full-text search", "typo tolerance", "instant search", "ecommerce search", "browser", "react", "autocomplete"],
   "license": "MIT",