@searchcraft/javascript-sdk 0.10.6 → 0.10.7

package/dist/hydrate/index.mjs

@@ -3179,7 +3179,7 @@ Object.keys(react).forEach(function (k) {
 var B = Object.defineProperty;
 var N = (a, e, n) => e in a ? B(a, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : a[e] = n;
 var h = (a, e, n) => N(a, typeof e != "symbol" ? e + "" : e, n);
-var O = /* @__PURE__ */ ((a) => (a[a.DEBUG = 0] = "DEBUG", a[a.INFO = 1] = "INFO", a[a.WARN = 2] = "WARN", a[a.ERROR = 3] = "ERROR", a))(O || {});
+var D = /* @__PURE__ */ ((a) => (a[a.DEBUG = 0] = "DEBUG", a[a.INFO = 1] = "INFO", a[a.WARN = 2] = "WARN", a[a.ERROR = 3] = "ERROR", a))(D || {});
 class pe {
   constructor(e) {
     h(this, "logLevel");
@@ -3187,7 +3187,7 @@ class pe {
     this.logLevel = e.logLevel || 1, this.logFormatter = e.logFormatter || this.defaultFormatter;
   }
   defaultFormatter(e, n) {
-    return `[${O[e]}] ${( new Date()).toISOString()}: ${n}`;
+    return `[${D[e]}] ${( new Date()).toISOString()}: ${n}`;
   }
   debug(e) {
     this.logLevel <= 0 && console.log(this.logFormatter(0, e));
@@ -3218,7 +3218,7 @@ class pe {
     }
   }
 }
-function y(a, e, n, r) {
+function w(a, e, n, r) {
   return new (n || (n = Promise))(function(o, i) {
     function t(s) {
       try {
@@ -3243,7 +3243,7 @@ function y(a, e, n, r) {
     l((r = r.apply(a, [])).next());
   });
 }
-function w(a, e) {
+function y(a, e) {
   var n, r, o, i, t = { label: 0, sent: function() {
     if (1 & o[0]) throw o[1];
     return o[1];
@@ -3302,17 +3302,17 @@ function w(a, e) {
     };
   }
 }
-var S = { exclude: [] }, D = {}, v = function(a, e) {
-  typeof window < "u" && (D[a] = e);
+var S = { exclude: [] }, U = {}, v = function(a, e) {
+  typeof window < "u" && (U[a] = e);
 };
-function T(a) {
+function I(a) {
   return a ^= a >>> 16, a = Math.imul(a, 2246822507), a ^= a >>> 13, a = Math.imul(a, 3266489909), (a ^= a >>> 16) >>> 0;
 }
 var m = new Uint32Array([597399067, 2869860233, 951274213, 2716044179]);
 function p(a, e) {
   return a << e | a >>> 32 - e;
 }
-function _(a, e) {
+function R(a, e) {
   var n;
   if (e === void 0 && (e = 0), e = e ? 0 | e : 0, typeof a == "string" && (n = a, a = new TextEncoder().encode(n).buffer), !(a instanceof ArrayBuffer)) throw new TypeError("Expected key to be ArrayBuffer or string");
   var r = new Uint32Array([e, e, e, e]);
@@ -3356,7 +3356,7 @@ function _(a, e) {
         s[0] = s[0] ^ c[0] << 0, s[0] = Math.imul(s[0], m[0]), s[0] = p(s[0], 15), s[0] = Math.imul(s[0], m[1]), t[0] = t[0] ^ s[0];
     }
   }(a, r), function(i, t) {
-    t[0] = t[0] ^ i.byteLength, t[1] = t[1] ^ i.byteLength, t[2] = t[2] ^ i.byteLength, t[3] = t[3] ^ i.byteLength, t[0] = t[0] + t[1] | 0, t[0] = t[0] + t[2] | 0, t[0] = t[0] + t[3] | 0, t[1] = t[1] + t[0] | 0, t[2] = t[2] + t[0] | 0, t[3] = t[3] + t[0] | 0, t[0] = T(t[0]), t[1] = T(t[1]), t[2] = T(t[2]), t[3] = T(t[3]), t[0] = t[0] + t[1] | 0, t[0] = t[0] + t[2] | 0, t[0] = t[0] + t[3] | 0, t[1] = t[1] + t[0] | 0, t[2] = t[2] + t[0] | 0, t[3] = t[3] + t[0] | 0;
+    t[0] = t[0] ^ i.byteLength, t[1] = t[1] ^ i.byteLength, t[2] = t[2] ^ i.byteLength, t[3] = t[3] ^ i.byteLength, t[0] = t[0] + t[1] | 0, t[0] = t[0] + t[2] | 0, t[0] = t[0] + t[3] | 0, t[1] = t[1] + t[0] | 0, t[2] = t[2] + t[0] | 0, t[3] = t[3] + t[0] | 0, t[0] = I(t[0]), t[1] = I(t[1]), t[2] = I(t[2]), t[3] = I(t[3]), t[0] = t[0] + t[1] | 0, t[0] = t[0] + t[2] | 0, t[0] = t[0] + t[3] | 0, t[1] = t[1] + t[0] | 0, t[2] = t[2] + t[0] | 0, t[3] = t[3] + t[0] | 0;
   }(a, r);
   var o = new Uint8Array(r.buffer);
   return Array.from(o).map(function(i) {
@@ -3367,7 +3367,7 @@ function H(a) {
   for (var e = 0, n = 0; n < a.length; ++n) e += Math.abs(a[n]);
   return e;
 }
-function q(a, e, n) {
+function L(a, e, n) {
   for (var r = [], o = 0; o < a[0].data.length; o++) {
     for (var i = [], t = 0; t < a.length; t++) i.push(a[t].data[o]);
     r.push(Q(i));
@@ -3383,7 +3383,7 @@ function Q(a) {
   for (var i in e) e[i] > e[o] && (o = parseInt(i, 10));
   return o;
 }
-function C() {
+function A() {
   if (typeof navigator > "u") return { name: "unknown", version: "unknown" };
   for (var a = navigator.userAgent, e = { Edg: "Edge", OPR: "Opera" }, n = 0, r = [/(?<name>Edge|Edg)\/(?<version>\d+(?:\.\d+)?)/, /(?<name>(?:Chrome|Chromium|OPR|Opera|Vivaldi|Brave))\/(?<version>\d+(?:\.\d+)?)/, /(?<name>(?:Firefox|Waterfox|Iceweasel|IceCat))\/(?<version>\d+(?:\.\d+)?)/, /(?<name>Safari)\/(?<version>\d+(?:\.\d+)?)/, /(?<name>MSIE|Trident|IEMobile).+?(?<version>\d+(?:\.\d+)?)/, /(?<name>[A-Za-z]+)\/(?<version>\d+(?:\.\d+)?)/, /(?<name>SamsungBrowser)\/(?<version>\d+(?:\.\d+)?)/]; n < r.length; n++) {
     var o = r[n], i = a.match(o);
@@ -3392,8 +3392,8 @@ function C() {
   return { name: "unknown", version: "unknown" };
 }
 v("audio", function() {
-  return y(this, void 0, void 0, function() {
-    return w(this, function(a) {
+  return w(this, void 0, void 0, function() {
+    return y(this, function(a) {
       return [2, new Promise(function(e, n) {
         try {
           var r = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(1, 5e3, 44100), o = r.createBufferSource(), i = r.createOscillator();
@@ -3409,14 +3409,14 @@ v("audio", function() {
     });
   });
 });
-var K = C().name !== "SamsungBrowser" ? 1 : 3, P = 280, k = 20;
-C().name != "Firefox" && v("canvas", function() {
+var K = A().name !== "SamsungBrowser" ? 1 : 3, k = 280, F = 20;
+A().name != "Firefox" && v("canvas", function() {
   return document.createElement("canvas").getContext("2d"), new Promise(function(a) {
     var e = Array.from({ length: K }, function() {
       return function() {
         var n = document.createElement("canvas"), r = n.getContext("2d");
         if (!r) return new ImageData(1, 1);
-        n.width = P, n.height = k;
+        n.width = k, n.height = F;
         var o = r.createLinearGradient(0, 0, n.width, n.height);
         o.addColorStop(0, "red"), o.addColorStop(0.16666666666666666, "orange"), o.addColorStop(0.3333333333333333, "yellow"), o.addColorStop(0.5, "green"), o.addColorStop(0.6666666666666666, "blue"), o.addColorStop(0.8333333333333334, "indigo"), o.addColorStop(1, "violet"), r.fillStyle = o, r.fillRect(0, 0, n.width, n.height);
         var i = "Random Text WMwmil10Oo";
@@ -3425,11 +3425,11 @@ C().name != "Firefox" && v("canvas", function() {
         return t;
       }();
     });
-    a({ commonImageDataHash: _(q(e, P, k).data.toString()).toString() });
+    a({ commonImageDataHash: R(L(e, k, F).data.toString()).toString() });
   });
 });
-var I, X = ["Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT", "Arimo", "Archivo", "Barlow", "Bebas Neue", "Bitter", "Bookman", "Calibri", "Cabin", "Candara", "Century", "Century Gothic", "Comic Sans MS", "Constantia", "Courier", "Courier New", "Crimson Text", "DM Mono", "DM Sans", "DM Serif Display", "DM Serif Text", "Dosis", "Droid Sans", "Exo", "Fira Code", "Fira Sans", "Franklin Gothic Medium", "Garamond", "Geneva", "Georgia", "Gill Sans", "Helvetica", "Impact", "Inconsolata", "Indie Flower", "Inter", "Josefin Sans", "Karla", "Lato", "Lexend", "Lucida Bright", "Lucida Console", "Lucida Sans Unicode", "Manrope", "Merriweather", "Merriweather Sans", "Montserrat", "Myriad", "Noto Sans", "Nunito", "Nunito Sans", "Open Sans", "Optima", "Orbitron", "Oswald", "Pacifico", "Palatino", "Perpetua", "PT Sans", "PT Serif", "Poppins", "Prompt", "Public Sans", "Quicksand", "Rajdhani", "Recursive", "Roboto", "Roboto Condensed", "Rockwell", "Rubik", "Segoe Print", "Segoe Script", "Segoe UI", "Sora", "Source Sans Pro", "Space Mono", "Tahoma", "Taviraj", "Times", "Times New Roman", "Titillium Web", "Trebuchet MS", "Ubuntu", "Varela Round", "Verdana", "Work Sans"], J = ["monospace", "sans-serif", "serif"];
-function F(a, e) {
+var M, X = ["Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT", "Arimo", "Archivo", "Barlow", "Bebas Neue", "Bitter", "Bookman", "Calibri", "Cabin", "Candara", "Century", "Century Gothic", "Comic Sans MS", "Constantia", "Courier", "Courier New", "Crimson Text", "DM Mono", "DM Sans", "DM Serif Display", "DM Serif Text", "Dosis", "Droid Sans", "Exo", "Fira Code", "Fira Sans", "Franklin Gothic Medium", "Garamond", "Geneva", "Georgia", "Gill Sans", "Helvetica", "Impact", "Inconsolata", "Indie Flower", "Inter", "Josefin Sans", "Karla", "Lato", "Lexend", "Lucida Bright", "Lucida Console", "Lucida Sans Unicode", "Manrope", "Merriweather", "Merriweather Sans", "Montserrat", "Myriad", "Noto Sans", "Nunito", "Nunito Sans", "Open Sans", "Optima", "Orbitron", "Oswald", "Pacifico", "Palatino", "Perpetua", "PT Sans", "PT Serif", "Poppins", "Prompt", "Public Sans", "Quicksand", "Rajdhani", "Recursive", "Roboto", "Roboto Condensed", "Rockwell", "Rubik", "Segoe Print", "Segoe Script", "Segoe UI", "Sora", "Source Sans Pro", "Space Mono", "Tahoma", "Taviraj", "Times", "Times New Roman", "Titillium Web", "Trebuchet MS", "Ubuntu", "Varela Round", "Verdana", "Work Sans"], J = ["monospace", "sans-serif", "serif"];
+function O(a, e) {
   if (!a) throw new Error("Canvas context not supported");
   return a.font = "72px ".concat(e), a.measureText("WwMmLli0Oo").width;
 }
@@ -3491,15 +3491,15 @@ function ne() {
   }
   return 0;
 }
-C().name != "Firefox" && v("fonts", function() {
+A().name != "Firefox" && v("fonts", function() {
   var a = this;
   return new Promise(function(e, n) {
     try {
       (function(r) {
         var o;
-        y(this, void 0, void 0, function() {
+        w(this, void 0, void 0, function() {
           var i, t, u;
-          return w(this, function(l) {
+          return y(this, function(l) {
             switch (l.label) {
               case 0:
                 return document.body ? [3, 2] : [4, (s = 50, new Promise(function(g) {
@@ -3518,13 +3518,13 @@ C().name != "Firefox" && v("fonts", function() {
         });
       })(function(r) {
         var o = r.iframe;
-        return y(a, void 0, void 0, function() {
+        return w(a, void 0, void 0, function() {
           var i, t, u, l;
-          return w(this, function(s) {
+          return y(this, function(s) {
             return i = o.createElement("canvas"), t = i.getContext("2d"), u = J.map(function(c) {
-              return F(t, c);
+              return O(t, c);
             }), l = {}, X.forEach(function(c) {
-              var g = F(t, c);
+              var g = O(t, c);
               u.includes(g) || (l[c] = g);
             }), e(l), [2];
           });
@@ -3544,17 +3544,17 @@ C().name != "Firefox" && v("fonts", function() {
     a({ languages: navigator.language, timezone: Intl.DateTimeFormat().resolvedOptions().timeZone });
   });
 }), v("permissions", function() {
-  return y(this, void 0, void 0, function() {
+  return w(this, void 0, void 0, function() {
     var a;
-    return w(this, function(e) {
-      return I = (S == null ? void 0 : S.permissions_to_check) || ["accelerometer", "accessibility", "accessibility-events", "ambient-light-sensor", "background-fetch", "background-sync", "bluetooth", "camera", "clipboard-read", "clipboard-write", "device-info", "display-capture", "gyroscope", "geolocation", "local-fonts", "magnetometer", "microphone", "midi", "nfc", "notifications", "payment-handler", "persistent-storage", "push", "speaker", "storage-access", "top-level-storage-access", "window-management", "query"], a = Array.from({ length: (S == null ? void 0 : S.retries) || 3 }, function() {
+    return y(this, function(e) {
+      return M = (S == null ? void 0 : S.permissions_to_check) || ["accelerometer", "accessibility", "accessibility-events", "ambient-light-sensor", "background-fetch", "background-sync", "bluetooth", "camera", "clipboard-read", "clipboard-write", "device-info", "display-capture", "gyroscope", "geolocation", "local-fonts", "magnetometer", "microphone", "midi", "nfc", "notifications", "payment-handler", "persistent-storage", "push", "speaker", "storage-access", "top-level-storage-access", "window-management", "query"], a = Array.from({ length: (S == null ? void 0 : S.retries) || 3 }, function() {
         return function() {
-          return y(this, void 0, void 0, function() {
+          return w(this, void 0, void 0, function() {
             var n, r, o, i, t;
-            return w(this, function(u) {
+            return y(this, function(u) {
               switch (u.label) {
                 case 0:
-                  n = {}, r = 0, o = I, u.label = 1;
+                  n = {}, r = 0, o = M, u.label = 1;
                 case 1:
                   if (!(r < o.length)) return [3, 6];
                   i = o[r], u.label = 2;
@@ -3573,7 +3573,7 @@ C().name != "Firefox" && v("fonts", function() {
           });
         }();
       }), [2, Promise.all(a).then(function(n) {
-        return ee(n, I);
+        return ee(n, M);
       })];
     });
   });
@@ -3592,15 +3592,15 @@ C().name != "Firefox" && v("fonts", function() {
   });
 }), v("system", function() {
   return new Promise(function(a) {
-    var e = C();
+    var e = A();
     a({ platform: window.navigator.platform, cookieEnabled: window.navigator.cookieEnabled, productSub: navigator.productSub, product: navigator.product, useragent: navigator.userAgent, hardwareConcurrency: navigator.hardwareConcurrency, browser: { name: e.name, version: e.version }, applePayVersion: ne() });
   });
 });
-var f, re = C().name !== "SamsungBrowser" ? 1 : 3, d = null;
+var f, re = A().name !== "SamsungBrowser" ? 1 : 3, d = null;
 v("webgl", function() {
-  return y(this, void 0, void 0, function() {
+  return w(this, void 0, void 0, function() {
     var a;
-    return w(this, function(e) {
+    return y(this, function(e) {
       typeof document < "u" && ((f = document.createElement("canvas")).width = 200, f.height = 100, d = f.getContext("webgl"));
       try {
         if (!d) throw new Error("WebGL not supported");
@@ -3630,19 +3630,19 @@ v("webgl", function() {
                 var g = c * s;
                 l[4 * c] = 0, l[4 * c + 1] = 0, l[4 * c + 2] = Math.cos(g) * (f.width / 2), l[4 * c + 3] = Math.sin(g) * (f.height / 2);
               }
-              var L = d.createBuffer();
-              d.bindBuffer(d.ARRAY_BUFFER, L), d.bufferData(d.ARRAY_BUFFER, l, d.STATIC_DRAW);
-              var R = d.getAttribLocation(t, "position");
-              d.enableVertexAttribArray(R), d.vertexAttribPointer(R, 2, d.FLOAT, !1, 0, 0), d.viewport(0, 0, f.width, f.height), d.clearColor(0, 0, 0, 1), d.clear(d.COLOR_BUFFER_BIT), d.drawArrays(d.LINES, 0, 2 * u);
-              var x = new Uint8ClampedArray(f.width * f.height * 4);
-              return d.readPixels(0, 0, f.width, f.height, d.RGBA, d.UNSIGNED_BYTE, x), new ImageData(x, f.width, f.height);
+              var T = d.createBuffer();
+              d.bindBuffer(d.ARRAY_BUFFER, T), d.bufferData(d.ARRAY_BUFFER, l, d.STATIC_DRAW);
+              var E = d.getAttribLocation(t, "position");
+              d.enableVertexAttribArray(E), d.vertexAttribPointer(E, 2, d.FLOAT, !1, 0, 0), d.viewport(0, 0, f.width, f.height), d.clearColor(0, 0, 0, 1), d.clear(d.COLOR_BUFFER_BIT), d.drawArrays(d.LINES, 0, 2 * u);
+              var P = new Uint8ClampedArray(f.width * f.height * 4);
+              return d.readPixels(0, 0, f.width, f.height, d.RGBA, d.UNSIGNED_BYTE, P), new ImageData(P, f.width, f.height);
             } catch {
               return new ImageData(1, 1);
             } finally {
               d && (d.bindBuffer(d.ARRAY_BUFFER, null), d.useProgram(null), d.viewport(0, 0, d.drawingBufferWidth, d.drawingBufferHeight), d.clearColor(0, 0, 0, 0));
             }
           }();
-        }), [2, { commonImageHash: _(q(a, f.width, f.height).data.toString()).toString() }];
+        }), [2, { commonImageHash: R(L(a, f.width, f.height).data.toString()).toString() }];
       } catch {
         return [2, { webgl: "unsupported" }];
       }
@@ -3656,8 +3656,8 @@ var b = function(a, e, n, r) {
   return i * o;
 };
 v("math", function() {
-  return y(void 0, void 0, void 0, function() {
-    return w(this, function(a) {
+  return w(void 0, void 0, void 0, function() {
+    return y(this, function(a) {
       return [2, { acos: Math.acos(0.5), asin: b(Math.asin, -1, 1, 97), atan: b(Math.atan, -1, 1, 97), cos: b(Math.cos, 0, Math.PI, 97), cosh: Math.cosh(9 / 7), e: Math.E, largeCos: Math.cos(1e20), largeSin: Math.sin(1e20), largeTan: Math.tan(1e20), log: Math.log(1e3), pi: Math.PI, sin: b(Math.sin, -Math.PI, Math.PI, 97), sinh: b(Math.sinh, -9 / 7, 7 / 9, 97), sqrt: Math.sqrt(2), tan: b(Math.tan, 0, 2 * Math.PI, 97), tanh: b(Math.tanh, -9 / 7, 7 / 9, 97) }];
     });
   });
@@ -3714,7 +3714,7 @@ const searchcraftStore = zustand.createStore((_set, get) => {
         },
         init: (core, debug = false) => {
             const logger = debug
-                ? new pe({ logLevel: O.DEBUG })
+                ? new pe({ logLevel: D.DEBUG })
                 : undefined;
             const state = functions.set({
                 core,
@@ -3752,12 +3752,12 @@ const searchcraftStore = zustand.createStore((_set, get) => {
         },
         search: async () => {
             const state = get();
-            state.logger?.log(O.INFO, `Starting search with search term: "${state.searchTerm}"`);
+            state.logger?.log(D.INFO, `Starting search with search term: "${state.searchTerm}"`);
             if (!state.core) {
                 throw new Error('Searchcraft instance is not initialized.');
             }
             if (!state.searchTerm.trim()) {
-                state.logger?.log(O.INFO, 'No search request was made: search term was empty.');
+                state.logger?.log(D.INFO, 'No search request was made: search term was empty.');
                 functions.set({
                     searchClientResponseItems: [],
                     searchResultsCount: 0,
@@ -3797,8 +3797,8 @@ const searchcraftStore = zustand.createStore((_set, get) => {
                     searchClientRequest: request,
                 };
             });
-            state.logger?.log(O.DEBUG, `Search results: ${JSON.stringify(items)}`);
-            state.logger?.log(O.DEBUG, `Facets from response: ${JSON.stringify(facets)}`);
+            state.logger?.log(D.DEBUG, `Search results: ${JSON.stringify(items)}`);
+            state.logger?.log(D.DEBUG, `Facets from response: ${JSON.stringify(facets)}`);
         },
         setInitialSearchClientResponseItemsFromResponse: (request, response, items) => {
             const state = get();
@@ -3815,11 +3815,11 @@ const searchcraftStore = zustand.createStore((_set, get) => {
                     searchClientRequest: request,
                 };
             });
-            state.logger?.log(O.DEBUG, `Search results: ${JSON.stringify(items)}`);
+            state.logger?.log(D.DEBUG, `Search results: ${JSON.stringify(items)}`);
         },
         setInitialQuery: async (query) => {
             const state = functions.set({ initialQuery: query });
-            state.logger?.log(O.INFO, `Starting search with query: "${state.initialQuery}"`);
+            state.logger?.log(D.INFO, `Starting search with query: "${state.initialQuery}"`);
             if (!state.core) {
                 throw new Error('Searchcraft instance is not initialized.');
             }
@@ -6900,40 +6900,99 @@ class SearchcraftPopoverListItemAd {
     }
     adSource = 'Custom';
     adClientResponseItem;
-    adContainerId = nanoid();
+    /**
+     * Where the ad is being rendered within the search results div.
+     * Lifecycle behavior differs for ads being rendered in different positions,
+     * so we need to be able to handle all of those cases.
+     */
+    renderPosition = 'interstitial';
     searchTerm;
     isSearchInProgress = false;
+    searchResultCount = 0;
     get hostElement() { return getElement(this); }
     core;
     intersectionObserver;
     storeUnsubscribe;
     adContainerRenderedTimeout;
-    isComponentConnected = true;
+    isComponentConnected = false;
+    timeTaken;
+    adContainerId = '';
+    /**
+     * Handles when an ad container is first rendered.
+     * Core emits an ad_container_rendered event and performs ad client side effects
+     *
+     */
+    handleAdRendered() {
+        this.adContainerId = nanoid();
+        if (this.isComponentConnected && this.searchResultCount > 0) {
+            clearTimeout(this.adContainerRenderedTimeout);
+            this.adContainerRenderedTimeout = setTimeout(() => {
+                this.core?.handleAdContainerRendered({
+                    adClientResponseItem: this.adClientResponseItem,
+                    adContainerId: this.adContainerId,
+                    adSource: this.adSource,
+                    searchTerm: this.searchTerm || '',
+                });
+            }, this.core?.config?.adContainerRenderedDebounceDelay || 300);
+        }
+    }
+    handleAdViewed() {
+        this.core?.handleAdContainerViewed({
+            adClientResponseItem: this.adClientResponseItem,
+            adContainerId: this.adContainerId,
+            adSource: this.adSource,
+            searchTerm: this.searchTerm || '',
+        });
+    }
+    /**
+     * Things to do when there's a new incoming search request.
+     */
+    handleNewIncomingSearchRequest(state) {
+        const request = state.searchClientRequest;
+        if (request && typeof request === 'object') {
+            this.searchTerm = request.searchTerm;
+        }
+        this.searchResultCount = state.searchClientResponseItems.length;
+        this.handleAdRendered();
+        this.startIntersectionObserver();
+    }
     connectedCallback() {
         const currentState = searchcraftStore.getState();
+        this.isComponentConnected = true;
         this.core = currentState.core;
-        this.searchTerm = currentState.searchTerm;
         this.isSearchInProgress = currentState.isSearchInProgress;
+        this.searchResultCount = currentState.searchClientResponseItems.length;
+        this.timeTaken = currentState.searchResponseTimeTaken;
+        const request = currentState.searchClientRequest;
+        if (request && typeof request === 'object') {
+            this.searchTerm = request.searchTerm;
+        }
+        /**
+         * Interstial ads have a different lifecycle, where we need handle an incoming search
+         * request immediately, because they are rendered alongside the search results.
+         */
+        if (this.renderPosition === 'interstitial') {
+            this.handleNewIncomingSearchRequest(currentState);
+        }
         // Subscribes to store changes (for search term).
         this.storeUnsubscribe = searchcraftStore.subscribe((state) => {
-            this.searchTerm = state.searchTerm;
+            if (this.timeTaken !== state.searchResponseTimeTaken) {
+                this.handleNewIncomingSearchRequest(state);
+            }
+            this.timeTaken = state.searchResponseTimeTaken;
             this.isSearchInProgress = state.isSearchInProgress;
         });
     }
-    componentDidLoad() {
+    startIntersectionObserver() {
+        this.intersectionObserver?.disconnect();
         /**
          * Handles when an ad container is viewable within the document,
          * Core emits an ad_container_viewed event and performs ad client side effects
          */
         if (this.hostElement) {
             this.intersectionObserver = new IntersectionObserver(([entry]) => {
-                if (entry?.isIntersecting && !this.isSearchInProgress) {
-                    this.core?.handleAdContainerViewed({
-                        adClientResponseItem: this.adClientResponseItem,
-                        adContainerId: this.adContainerId,
-                        adSource: this.adSource,
-                        searchTerm: this.searchTerm || '',
-                    });
+                if (entry?.isIntersecting && this.searchResultCount > 0) {
+                    this.handleAdViewed();
                 }
             }, { threshold: 0 });
             this.intersectionObserver.observe(this.hostElement);
@@ -6973,26 +7032,10 @@ class SearchcraftPopoverListItemAd {
         return (hAsync("div", { id: `searchcraft-native-ad-${this.adContainerId}`, class: classNames('searchcraft-ad', nativoClassName), "data-searchcraft-ad-container-id": this.adContainerId }));
     }
     render() {
-        // Don't render ads while search is in progress
-        if (this.isSearchInProgress) {
+        // Don't render ads if no search results
+        if (this.searchResultCount === 0) {
             return;
         }
-        /**
-         * Handles when an ad container is first rendered.
-         * Core emits an ad_container_rendered event and performs ad client side effects
-         *
-         */
-        if (this.isComponentConnected) {
-            clearTimeout(this.adContainerRenderedTimeout);
-            this.adContainerRenderedTimeout = setTimeout(() => {
-                this.core?.handleAdContainerRendered({
-                    adClientResponseItem: this.adClientResponseItem,
-                    adContainerId: this.adContainerId,
-                    adSource: this.adSource,
-                    searchTerm: this.searchTerm || '',
-                });
-            }, this.core?.config?.adContainerRenderedDebounceDelay || 500);
-        }
         switch (this.adSource) {
             case 'adMarketplace':
                 return this.renderADMAd();
@@ -7010,9 +7053,11 @@ class SearchcraftPopoverListItemAd {
         "$members$": {
             "adSource": [1, "ad-source"],
             "adClientResponseItem": [16],
-            "adContainerId": [1, "ad-container-id"],
+            "renderPosition": [1, "render-position"],
             "searchTerm": [32],
-            "isSearchInProgress": [32]
+            "isSearchInProgress": [32],
+            "searchResultCount": [32],
+            "adContainerId": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7049,7 +7094,7 @@ class SearchcraftPopoverListView {
     searchResultsPerPage;
     config = searchcraftStore.getState().core?.config;
     renderWithADMAds() {
-        return (hAsync("div", { class: 'searchcraft-popover-list-view' }, this.adClientResponseItems?.map((item) => (hAsync("searchcraft-ad", { adClientResponseItem: item, adContainerId: nanoid(), adSource: 'adMarketplace', key: item.id }))), this.searchClientResponseItems?.map((item, index) => (hAsync("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index })))));
+        return (hAsync("div", { class: 'searchcraft-popover-list-view' }, this.adClientResponseItems?.map((item) => (hAsync("searchcraft-ad", { adClientResponseItem: item, adSource: 'adMarketplace', key: item.id, renderPosition: 'top' }))), this.searchClientResponseItems?.map((item, index) => (hAsync("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index })))));
     }
     renderWithCustomAds() {
         const itemsToRender = [];
@@ -7060,7 +7105,7 @@ class SearchcraftPopoverListView {
         const searchItems = this.searchClientResponseItems || [];
         // Renders ads at beginning
         for (let n = 0; n < adStartQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${n}-ad`, renderPosition: 'top' }));
         }
         // Renders search results + interstitial ads
         searchItems.forEach((item, index) => {
@@ -7069,14 +7114,14 @@ class SearchcraftPopoverListView {
                 index + interstitialInterval < searchItems.length &&
                 index >= interstitialInterval) {
                 for (let n = 0; n < interstitialQuantity; n++) {
-                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${item.id}-ad-${n}` }));
+                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${item.id}-ad-${n}`, renderPosition: 'interstitial' }));
                 }
             }
             itemsToRender.push(hAsync("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index }));
         });
         // Renders ads at end
         for (let n = 0; n < adEndQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${n}-ad`, renderPosition: 'bottom' }));
         }
         return hAsync("div", { class: 'searchcraft-popover-list-view' }, itemsToRender);
     }
@@ -7090,7 +7135,7 @@ class SearchcraftPopoverListView {
         const searchItems = this.searchClientResponseItems || [];
         // Renders ads at beginning
         for (let n = 0; n < adStartQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${n}-ad`, renderPosition: 'top' }));
         }
         // Renders search results + interstitial ads
         searchItems.forEach((item, index) => {
@@ -7099,14 +7144,14 @@ class SearchcraftPopoverListView {
                 index + interstitialInterval < searchItems.length &&
                 index >= interstitialInterval) {
                 for (let n = 0; n < interstitialQuantity; n++) {
-                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${item.id}-ad-${n}` }));
+                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${item.id}-ad-${n}`, renderPosition: 'interstitial' }));
                 }
             }
             itemsToRender.push(hAsync("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index }));
         });
         // Renders ads at end
         for (let n = 0; n < adEndQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${n}-ad`, renderPosition: 'bottom' }));
         }
         return hAsync("div", { class: 'searchcraft-popover-list-view' }, itemsToRender);
     }
@@ -7463,7 +7508,7 @@ class SearchcraftSearchResults {
             : this.initialSearchClientResponseItems?.length
                 ? this.initialSearchClientResponseItems
                 : [];
-        return (hAsync("div", { class: 'searchcraft-search-results' }, this.adClientResponseItems?.map((item) => (hAsync("searchcraft-ad", { adSource: 'adMarketplace', adClientResponseItem: item, adContainerId: nanoid(), key: item.id }))), items.map((item, index) => (hAsync("searchcraft-search-result", { key: item.id, "document-position": this.searchResultsPerPage * (this.searchResultsPage - 1) + index, index: index, item: item, template: this.template })))));
+        return (hAsync("div", { class: 'searchcraft-search-results' }, this.adClientResponseItems?.map((item) => (hAsync("searchcraft-ad", { adSource: 'adMarketplace', adClientResponseItem: item, key: item.id, renderPosition: 'top' }))), items.map((item, index) => (hAsync("searchcraft-search-result", { key: item.id, "document-position": this.searchResultsPerPage * (this.searchResultsPage - 1) + index, index: index, item: item, template: this.template })))));
     }
     renderWithCustomAds() {
         const itemsToRender = [];
@@ -7478,7 +7523,7 @@ class SearchcraftSearchResults {
                 : [];
         // Renders ads at beginning
         for (let n = 0; n < adStartQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${n}-ad`, renderPosition: 'top' }));
         }
         // Renders search results + interstitial ads
         items.forEach((item, index) => {
@@ -7487,14 +7532,14 @@ class SearchcraftSearchResults {
                 index + interstitialInterval < items.length &&
                 index >= interstitialInterval) {
                 for (let n = 0; n < interstitialQuantity; n++) {
-                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${item.id}-ad-${n}` }));
+                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${item.id}-ad-${n}`, renderPosition: 'interstitial' }));
                 }
             }
             itemsToRender.push(hAsync("searchcraft-search-result", { key: item.id, "document-position": this.searchResultsPerPage * (this.searchResultsPage - 1) + index, index: index, item: item, template: this.template }));
         });
         // Renders ads at end
         for (let n = 0; n < adEndQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Custom', key: `${n}-ad`, renderPosition: 'bottom' }));
         }
         return hAsync("div", { class: 'searchcraft-search-results' }, itemsToRender);
     }
@@ -7512,7 +7557,7 @@ class SearchcraftSearchResults {
                 : [];
         // Renders ads at beginning
         for (let n = 0; n < adStartQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${n}-ad`, renderPosition: 'top' }));
         }
         // Renders search results + interstitial ads
         items.forEach((item, index) => {
@@ -7521,14 +7566,14 @@ class SearchcraftSearchResults {
                 index + interstitialInterval < items.length &&
                 index >= interstitialInterval) {
                 for (let n = 0; n < interstitialQuantity; n++) {
-                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${item.id}-ad-${n}` }));
+                    itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${item.id}-ad-${n}`, renderPosition: 'interstitial' }));
                 }
             }
             itemsToRender.push(hAsync("searchcraft-search-result", { key: item.id, "document-position": this.searchResultsPerPage * (this.searchResultsPage - 1) + index, index: index, item: item, template: this.template }));
         });
         // Renders ads at end
         for (let n = 0; n < adEndQuantity; n++) {
-            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', adContainerId: nanoid(), key: `${n}-ad` }));
+            itemsToRender.push(hAsync("searchcraft-ad", { adSource: 'Nativo', key: `${n}-ad`, renderPosition: 'bottom' }));
         }
         return hAsync("div", { class: 'searchcraft-search-results' }, itemsToRender);
     }

package/dist/types/components/searchcraft-ad/searchcraft-ad.d.ts

@@ -1,4 +1,5 @@
 import type { AdClientResponseItem, SearchcraftAdSource } from '@searchcraft/core';
+import { type SearchcraftState } from "../../store/index";
 /**
  * An inline ad meant to be rendered in a list of search results.
  *
@@ -7,17 +8,36 @@ import type { AdClientResponseItem, SearchcraftAdSource } from '@searchcraft/cor
 export declare class SearchcraftPopoverListItemAd {
     adSource: SearchcraftAdSource;
     adClientResponseItem?: AdClientResponseItem;
-    adContainerId: string;
+    /**
+     * Where the ad is being rendered within the search results div.
+     * Lifecycle behavior differs for ads being rendered in different positions,
+     * so we need to be able to handle all of those cases.
+     */
+    renderPosition: 'interstitial' | 'top' | 'bottom';
     searchTerm?: string;
     isSearchInProgress: boolean;
+    searchResultCount: number;
     hostElement?: HTMLElement;
     private core?;
     private intersectionObserver?;
     private storeUnsubscribe?;
     private adContainerRenderedTimeout?;
     private isComponentConnected;
+    private timeTaken?;
+    adContainerId: string;
+    /**
+     * Handles when an ad container is first rendered.
+     * Core emits an ad_container_rendered event and performs ad client side effects
+     *
+     */
+    handleAdRendered(): void;
+    handleAdViewed(): void;
+    /**
+     * Things to do when there's a new incoming search request.
+     */
+    handleNewIncomingSearchRequest(state: SearchcraftState): void;
     connectedCallback(): void;
-    componentDidLoad(): void;
+    startIntersectionObserver(): void;
     disconnectedCallback(): void;
     renderADMAd(): any;
     renderCustomAd(): any;