@searchspring/snap-preact-components 0.73.6 → 0.74.0

package/dist/cjs/hooks/useIntersectionAdvanced.d.ts

@@ -4,7 +4,9 @@ export interface UseIntersectionOptions {
     fireOnce?: boolean;
     threshold?: number | number[];
     minVisibleTime?: number;
-    resetKey?: string;
 }
-export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => boolean;
+export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => {
+    inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
+};
 //# sourceMappingURL=useIntersectionAdvanced.d.ts.map

package/dist/cjs/hooks/useIntersectionAdvanced.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAsInH,CAAC"}
+{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,eAAO,MAAM,uBAAuB,QAC9B,WAAW,WAAW,GAAG,IAAI,CAAC,YAC1B,sBAAsB;gBACf,OAAO;oBAAkB,WAAW,GAAG,IAAI,KAAK,IAAI;CA6HpE,CAAC"}

package/dist/cjs/hooks/useIntersectionAdvanced.js

@@ -5,26 +5,18 @@ var hooks_1 = require("preact/hooks");
 var VISIBILITY_POLL_INTERVAL = 250;
 var useIntersectionAdvanced = function (ref, options) {
     if (options === void 0) { options = {}; }
-    var _a = options.rootMargin, rootMargin = _a === void 0 ? '0px' : _a, _b = options.fireOnce, fireOnce = _b === void 0 ? false : _b, _c = options.threshold, threshold = _c === void 0 ? 0 : _c, _d = options.minVisibleTime, minVisibleTime = _d === void 0 ? 0 : _d, resetKey = options.resetKey;
+    var _a = options.rootMargin, rootMargin = _a === void 0 ? '0px' : _a, _b = options.fireOnce, fireOnce = _b === void 0 ? false : _b, _c = options.threshold, threshold = _c === void 0 ? 0 : _c, _d = options.minVisibleTime, minVisibleTime = _d === void 0 ? 0 : _d;
     // State and setter for storing whether element is visible
     var _e = (0, hooks_1.useState)(false), isIntersecting = _e[0], setIntersecting = _e[1];
     // Timer reference to track visibility duration
     var visibleTimerRef = (0, hooks_1.useRef)(null);
     // Track when the element started being visible
     var visibleStartRef = (0, hooks_1.useRef)(null);
-    // Track the last reset key to detect changes
-    var lastResetKeyRef = (0, hooks_1.useRef)(resetKey);
-    // Reset state if resetKey has changed
-    if (resetKey !== lastResetKeyRef.current) {
-        setIntersecting(false);
-        if (visibleTimerRef.current) {
-            window.clearTimeout(visibleTimerRef.current);
-            visibleTimerRef.current = null;
-        }
-        visibleStartRef.current = null;
-        lastResetKeyRef.current = resetKey;
-        return false;
-    }
+    var _f = (0, hooks_1.useState)(0), counter = _f[0], setCounter = _f[1];
+    var updateRef = (0, hooks_1.useCallback)(function (el) {
+        ref.current = el;
+        setCounter(function (c) { return c + 1; });
+    }, []);
     (0, hooks_1.useEffect)(function () {
         setIntersecting(false);
         var observer = null;
@@ -119,8 +111,8 @@ var useIntersectionAdvanced = function (ref, options) {
                 observer.unobserve(ref.current);
             }
         };
-    }, [ref, resetKey]);
-    return isIntersecting;
+    }, [ref, counter]);
+    return { inViewport: isIntersecting, updateRef: updateRef };
 };
 exports.useIntersectionAdvanced = useIntersectionAdvanced;
 function elementIsVisible(el) {

package/dist/cjs/providers/withTracking.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAiFnG"}
+{"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAgGnG"}

package/dist/cjs/providers/withTracking.js

@@ -29,7 +29,7 @@ var hooks_1 = require("preact/hooks");
 exports.TRACKING_ATTRIBUTE = 'sstracking';
 function withTracking(WrappedComponent) {
     var WithTracking = function (props) {
-        var _a;
+        var _a, _b;
         var controller = props.controller, result = props.result, banner = props.banner, type = props.type, content = props.content, restProps = __rest(props, ["controller", "result", "banner", "type", "content"]);
         if (props.trackingRef) {
             // case where withTracking may get used more than once
@@ -41,29 +41,34 @@ function withTracking(WrappedComponent) {
         if (!result && !banner && (!type || !content)) {
             console.warn('Warning: No result or banner provided to withTracking');
         }
-        var resetKey;
-        if ((controller === null || controller === void 0 ? void 0 : controller.type) === 'search' || (controller === null || controller === void 0 ? void 0 : controller.type) === 'autocomplete') {
-            var urlManager = controller.urlManager;
-            resetKey = JSON.stringify({
-                q: urlManager.state.query,
-                p: urlManager.state.page,
-                ps: urlManager.state.pageSize,
-                s: urlManager.state.sort,
-                f: urlManager.state.filter,
-            });
+        var _c = (0, utilities_1.createImpressionObserver)(), ref = _c.ref, inViewport = _c.inViewport, updateRef = _c.updateRef;
+        // Reset impression tracking when the result identity changes (e.g. new search context).
+        // Each Product/Banner gets a new responseId per search response, so this naturally
+        // resets when query/sort/filters change without needing global controller state.
+        // Calling updateRef(ref.current) re-observes the same element with fresh state.
+        var resultIdentity = (_b = (result || banner || (type && ((_a = content === null || content === void 0 ? void 0 : content[type]) === null || _a === void 0 ? void 0 : _a[0])))) === null || _b === void 0 ? void 0 : _b.responseId;
+        var prevIdentityRef = (0, hooks_1.useRef)(resultIdentity);
+        // Tracks whether we're waiting for the observer to reset after an identity change.
+        // Set synchronously during render to block impressions immediately when identity
+        // changes, preventing a stale inViewport=true from firing before the observer resets.
+        var awaitingReobservationRef = (0, hooks_1.useRef)(false);
+        if (prevIdentityRef.current !== resultIdentity) {
+            awaitingReobservationRef.current = true;
         }
-        else if ((controller === null || controller === void 0 ? void 0 : controller.type) === 'recommendation') {
-            // For recommendations, use a combination of tag and other relevant state
-            var recStore = controller.store;
-            resetKey = JSON.stringify({
-                tag: (_a = recStore.profile) === null || _a === void 0 ? void 0 : _a.tag,
-                ids: recStore.results.map(function (result) { return result.id; }).join(','),
-            });
-        }
-        var _b = (0, utilities_1.createImpressionObserver)({ resetKey: resetKey }), ref = _b.ref, inViewport = _b.inViewport;
-        if (inViewport) {
-            // TODO: add support for disabling tracking events via config like in ResultTracker
-            if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
+        (0, hooks_1.useEffect)(function () {
+            if (prevIdentityRef.current !== resultIdentity) {
+                prevIdentityRef.current = resultIdentity;
+                updateRef(ref.current);
+            }
+        }, [resultIdentity, updateRef]);
+        (0, hooks_1.useEffect)(function () {
+            if (awaitingReobservationRef.current && !inViewport) {
+                awaitingReobservationRef.current = false;
+            }
+        }, [inViewport, resultIdentity]);
+        var isBannerTracking = type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '');
+        if (inViewport && !awaitingReobservationRef.current) {
+            if (isBannerTracking) {
                 controller === null || controller === void 0 ? void 0 : controller.track.banner.impression(content[type][0]);
             }
             else if (!(result === null || result === void 0 ? void 0 : result.bundleSeed)) {
@@ -71,7 +76,7 @@ function withTracking(WrappedComponent) {
             }
         }
         var handleClick = (0, hooks_1.useCallback)(function (e) {
-            if (type && content && !result && ['search', 'autocomplete'].includes((controller === null || controller === void 0 ? void 0 : controller.type) || '')) {
+            if (isBannerTracking) {
                 controller === null || controller === void 0 ? void 0 : controller.track.banner.click(e, content[type][0]);
             }
             else {
@@ -87,8 +92,10 @@ function withTracking(WrappedComponent) {
                     currentRef.removeEventListener('click', handleClick, true);
                 };
             }
-        }, [ref, handleClick]);
-        var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, banner: banner, type: type, content: content, trackingRef: ref });
+        }, [handleClick]);
+        var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, banner: banner, type: type, content: content, trackingRef: (0, hooks_1.useCallback)(function (el) {
+                updateRef(el);
+            }, [updateRef]) });
         return (0, preact_1.h)(WrappedComponent, __assign({}, trackingProps));
     };
     return WithTracking;

package/dist/cjs/utilities/createImpressionObserver.d.ts

@@ -3,5 +3,6 @@ import { UseIntersectionOptions } from '../hooks';
 export declare function createImpressionObserver(options?: UseIntersectionOptions): {
     ref: Ref<HTMLElement | null>;
     inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
 };
 //# sourceMappingURL=createImpressionObserver.d.ts.map

package/dist/cjs/utilities/createImpressionObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,EAA2B,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI3E,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG;IAC3E,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACpB,CAYA"}
+{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,EAA2B,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI3E,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG;IAC3E,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C,CAaA"}

package/dist/cjs/utilities/createImpressionObserver.js

@@ -18,10 +18,11 @@ var IMPRESSION_VISIBILITY_THRESHOLD = 0.7;
 var IMPRESSION_MIN_VISIBLE_TIME = 1000;
 function createImpressionObserver(options) {
     var ref = (0, hooks_1.useRef)(null);
-    var inViewport = (0, hooks_2.useIntersectionAdvanced)(ref, __assign(__assign({}, options), { fireOnce: true, threshold: IMPRESSION_VISIBILITY_THRESHOLD, minVisibleTime: IMPRESSION_MIN_VISIBLE_TIME }));
+    var _a = (0, hooks_2.useIntersectionAdvanced)(ref, __assign(__assign({}, options), { fireOnce: true, threshold: IMPRESSION_VISIBILITY_THRESHOLD, minVisibleTime: IMPRESSION_MIN_VISIBLE_TIME })), inViewport = _a.inViewport, updateRef = _a.updateRef;
     return {
         ref: ref,
         inViewport: inViewport,
+        updateRef: updateRef,
     };
 }
 exports.createImpressionObserver = createImpressionObserver;

package/dist/esm/hooks/useIntersectionAdvanced.d.ts

@@ -4,7 +4,9 @@ export interface UseIntersectionOptions {
     fireOnce?: boolean;
     threshold?: number | number[];
     minVisibleTime?: number;
-    resetKey?: string;
 }
-export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => boolean;
+export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => {
+    inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
+};
 //# sourceMappingURL=useIntersectionAdvanced.d.ts.map

package/dist/esm/hooks/useIntersectionAdvanced.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAsInH,CAAC"}
+{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,eAAO,MAAM,uBAAuB,QAC9B,WAAW,WAAW,GAAG,IAAI,CAAC,YAC1B,sBAAsB;gBACf,OAAO;oBAAkB,WAAW,GAAG,IAAI,KAAK,IAAI;CA6HpE,CAAC"}

package/dist/esm/hooks/useIntersectionAdvanced.js

@@ -1,26 +1,18 @@
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 const VISIBILITY_POLL_INTERVAL = 250;
 export const useIntersectionAdvanced = (ref, options = {}) => {
-    const { rootMargin = '0px', fireOnce = false, threshold = 0, minVisibleTime = 0, resetKey } = options;
+    const { rootMargin = '0px', fireOnce = false, threshold = 0, minVisibleTime = 0 } = options;
     // State and setter for storing whether element is visible
     const [isIntersecting, setIntersecting] = useState(false);
     // Timer reference to track visibility duration
     const visibleTimerRef = useRef(null);
     // Track when the element started being visible
     const visibleStartRef = useRef(null);
-    // Track the last reset key to detect changes
-    const lastResetKeyRef = useRef(resetKey);
-    // Reset state if resetKey has changed
-    if (resetKey !== lastResetKeyRef.current) {
-        setIntersecting(false);
-        if (visibleTimerRef.current) {
-            window.clearTimeout(visibleTimerRef.current);
-            visibleTimerRef.current = null;
-        }
-        visibleStartRef.current = null;
-        lastResetKeyRef.current = resetKey;
-        return false;
-    }
+    const [counter, setCounter] = useState(0);
+    const updateRef = useCallback((el) => {
+        ref.current = el;
+        setCounter((c) => c + 1);
+    }, []);
     useEffect(() => {
         setIntersecting(false);
         let observer = null;
@@ -114,8 +106,8 @@ export const useIntersectionAdvanced = (ref, options = {}) => {
                 observer.unobserve(ref.current);
             }
         };
-    }, [ref, resetKey]);
-    return isIntersecting;
+    }, [ref, counter]);
+    return { inViewport: isIntersecting, updateRef };
 };
 function elementIsVisible(el) {
     if (el && 'checkVisibility' in el) {

package/dist/esm/providers/withTracking.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAiFnG"}
+{"version":3,"file":"withTracking.d.ts","sourceRoot":"","sources":["../../../src/providers/withTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,aAAa,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAA8B,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAIhF,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BAgGnG"}

package/dist/esm/providers/withTracking.js

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { createImpressionObserver } from '../utilities';
-import { useEffect, useCallback } from 'preact/hooks';
+import { useEffect, useCallback, useRef } from 'preact/hooks';
 export const TRACKING_ATTRIBUTE = 'sstracking';
 export function withTracking(WrappedComponent) {
     const WithTracking = (props) => {
@@ -15,29 +15,34 @@ export function withTracking(WrappedComponent) {
         if (!result && !banner && (!type || !content)) {
             console.warn('Warning: No result or banner provided to withTracking');
         }
-        let resetKey;
-        if (controller?.type === 'search' || controller?.type === 'autocomplete') {
-            const urlManager = controller.urlManager;
-            resetKey = JSON.stringify({
-                q: urlManager.state.query,
-                p: urlManager.state.page,
-                ps: urlManager.state.pageSize,
-                s: urlManager.state.sort,
-                f: urlManager.state.filter,
-            });
+        const { ref, inViewport, updateRef } = createImpressionObserver();
+        // Reset impression tracking when the result identity changes (e.g. new search context).
+        // Each Product/Banner gets a new responseId per search response, so this naturally
+        // resets when query/sort/filters change without needing global controller state.
+        // Calling updateRef(ref.current) re-observes the same element with fresh state.
+        const resultIdentity = (result || banner || (type && content?.[type]?.[0]))?.responseId;
+        const prevIdentityRef = useRef(resultIdentity);
+        // Tracks whether we're waiting for the observer to reset after an identity change.
+        // Set synchronously during render to block impressions immediately when identity
+        // changes, preventing a stale inViewport=true from firing before the observer resets.
+        const awaitingReobservationRef = useRef(false);
+        if (prevIdentityRef.current !== resultIdentity) {
+            awaitingReobservationRef.current = true;
         }
-        else if (controller?.type === 'recommendation') {
-            // For recommendations, use a combination of tag and other relevant state
-            const recStore = controller.store;
-            resetKey = JSON.stringify({
-                tag: recStore.profile?.tag,
-                ids: recStore.results.map((result) => result.id).join(','),
-            });
-        }
-        const { ref, inViewport } = createImpressionObserver({ resetKey });
-        if (inViewport) {
-            // TODO: add support for disabling tracking events via config like in ResultTracker
-            if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
+        useEffect(() => {
+            if (prevIdentityRef.current !== resultIdentity) {
+                prevIdentityRef.current = resultIdentity;
+                updateRef(ref.current);
+            }
+        }, [resultIdentity, updateRef]);
+        useEffect(() => {
+            if (awaitingReobservationRef.current && !inViewport) {
+                awaitingReobservationRef.current = false;
+            }
+        }, [inViewport, resultIdentity]);
+        const isBannerTracking = type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '');
+        if (inViewport && !awaitingReobservationRef.current) {
+            if (isBannerTracking) {
                 controller?.track.banner.impression(content[type][0]);
             }
             else if (!result?.bundleSeed) {
@@ -45,7 +50,7 @@ export function withTracking(WrappedComponent) {
             }
         }
         const handleClick = useCallback((e) => {
-            if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
+            if (isBannerTracking) {
                 controller?.track.banner.click(e, content[type][0]);
             }
             else {
@@ -61,7 +66,7 @@ export function withTracking(WrappedComponent) {
                     currentRef.removeEventListener('click', handleClick, true);
                 };
             }
-        }, [ref, handleClick]);
+        }, [handleClick]);
         const trackingProps = {
             ...restProps,
             controller,
@@ -69,7 +74,9 @@ export function withTracking(WrappedComponent) {
             banner,
             type,
             content,
-            trackingRef: ref,
+            trackingRef: useCallback((el) => {
+                updateRef(el);
+            }, [updateRef]),
         };
         return h(WrappedComponent, { ...trackingProps });
     };

package/dist/esm/utilities/createImpressionObserver.d.ts

@@ -3,5 +3,6 @@ import { UseIntersectionOptions } from '../hooks';
 export declare function createImpressionObserver(options?: UseIntersectionOptions): {
     ref: Ref<HTMLElement | null>;
     inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
 };
 //# sourceMappingURL=createImpressionObserver.d.ts.map

package/dist/esm/utilities/createImpressionObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,EAA2B,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI3E,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG;IAC3E,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACpB,CAYA"}
+{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,EAA2B,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAI3E,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG;IAC3E,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C,CAaA"}

package/dist/esm/utilities/createImpressionObserver.js

@@ -4,7 +4,7 @@ const IMPRESSION_VISIBILITY_THRESHOLD = 0.7;
 const IMPRESSION_MIN_VISIBLE_TIME = 1000;
 export function createImpressionObserver(options) {
     const ref = useRef(null);
-    const inViewport = useIntersectionAdvanced(ref, {
+    const { inViewport, updateRef } = useIntersectionAdvanced(ref, {
         ...options,
         fireOnce: true,
         threshold: IMPRESSION_VISIBILITY_THRESHOLD,
@@ -13,5 +13,6 @@ export function createImpressionObserver(options) {
     return {
         ref,
         inViewport,
+        updateRef,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.73.6",
+	"version": "0.74.0",
 	"description": "Snap Preact Component Library",
 	"author": "Searchspring",
 	"license": "MIT",
@@ -29,7 +29,7 @@
 	"dependencies": {
 		"@cypress/react": "^8.0.0",
 		"@emotion/react": "11.9.0",
-		"@searchspring/snap-toolbox": "0.73.6",
+		"@searchspring/snap-toolbox": "0.74.0",
 		"classnames": "^2.3.2",
 		"cypress": "^13.7.1",
 		"cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
 		"@babel/preset-env": "^7.21.4",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/runtime": "^7.21.0",
-		"@searchspring/snap-client": "0.73.6",
-		"@searchspring/snap-controller": "0.73.6",
-		"@searchspring/snap-event-manager": "0.73.6",
-		"@searchspring/snap-logger": "0.73.6",
-		"@searchspring/snap-profiler": "0.73.6",
-		"@searchspring/snap-store-mobx": "0.73.6",
-		"@searchspring/snap-tracker": "0.73.6",
-		"@searchspring/snap-url-manager": "0.73.6",
+		"@searchspring/snap-client": "0.74.0",
+		"@searchspring/snap-controller": "0.74.0",
+		"@searchspring/snap-event-manager": "0.74.0",
+		"@searchspring/snap-logger": "0.74.0",
+		"@searchspring/snap-profiler": "0.74.0",
+		"@searchspring/snap-store-mobx": "0.74.0",
+		"@searchspring/snap-tracker": "0.74.0",
+		"@searchspring/snap-url-manager": "0.74.0",
 		"@storybook/addon-actions": "6.4.22",
 		"@storybook/addon-controls": "6.4.22",
 		"@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
 		"webpack-merge": "^5.8.0"
 	},
 	"sideEffects": false,
-	"gitHead": "afcdd6d76bafbd19d5a1e7fa656a811700d99c19"
+	"gitHead": "fd005b3943aa6eb62ac16a92e6d932dc55499865"
 }