@searchspring/snap-preact-components 0.65.2 → 0.66.0

package/dist/cjs/providers/withTracking.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTracking = void 0;
+var preact_1 = require("preact");
+var utilities_1 = require("../utilities");
+var hooks_1 = require("preact/hooks");
+function withTracking(WrappedComponent) {
+    var WithTracking = function (props) {
+        var controller = props.controller, result = props.result, restProps = __rest(props, ["controller", "result"]);
+        if (!controller) {
+            console.warn('Warning: No controller provided to withTracking');
+        }
+        if (!result) {
+            console.warn('Warning: No result provided to withTracking');
+        }
+        var additionalEffectKeys = [];
+        if ((controller === null || controller === void 0 ? void 0 : controller.type) === 'autocomplete') {
+            additionalEffectKeys.push(controller.store.state.input);
+        }
+        var _a = (0, utilities_1.createImpressionObserver)({ additionalEffectKeys: additionalEffectKeys }), ref = _a.ref, inViewport = _a.inViewport;
+        if (inViewport) {
+            // TODO: add support for disabling tracking events via config like in ResultTracker
+            if ((result === null || result === void 0 ? void 0 : result.type) === 'product') {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
+            }
+            else {
+                // track banner in future
+            }
+        }
+        var currentRef = ref.current;
+        if (currentRef) {
+            var handleClick = (0, hooks_1.useCallback)(function (e) {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
+            }, []);
+            currentRef.setAttribute('sstracking', 'true');
+            currentRef.removeEventListener('click', handleClick);
+            currentRef.addEventListener('click', handleClick);
+        }
+        var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, trackingRef: ref });
+        return (0, preact_1.h)(WrappedComponent, __assign({}, trackingProps));
+    };
+    return WithTracking;
+}
+exports.withTracking = withTracking;

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

@@ -0,0 +1,8 @@
+import { type Ref } from 'preact/hooks';
+export declare function createImpressionObserver(options?: {
+    additionalEffectKeys?: unknown[];
+}): {
+    ref: Ref<HTMLElement | null>;
+    inViewport: boolean;
+};
+//# sourceMappingURL=createImpressionObserver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAGhD,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,EAAE,CAAA;CAAE,GAAG;IACzF,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACpB,CAYA"}

package/dist/cjs/utilities/createImpressionObserver.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImpressionObserver = void 0;
+var hooks_1 = require("preact/hooks");
+var hooks_2 = require("../hooks");
+function createImpressionObserver(options) {
+    var ref = (0, hooks_1.useRef)(null);
+    var inViewport = (0, hooks_2.useIntersectionAdvanced)(ref, {
+        fireOnce: true,
+        threshold: 0.75,
+        minVisibleTime: 1000,
+        additionalEffectKeys: (options === null || options === void 0 ? void 0 : options.additionalEffectKeys) || [],
+    });
+    return {
+        ref: ref,
+        inViewport: inViewport,
+    };
+}
+exports.createImpressionObserver = createImpressionObserver;

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

@@ -5,4 +5,5 @@ export * from './sprintf';
 export * from './LightenDarkenColor';
 export * from './shiftColor';
 export * from './defaultBadgeComponentMap';
+export * from './createImpressionObserver';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC"}

package/dist/cjs/utilities/index.js

@@ -21,3 +21,4 @@ __exportStar(require("./sprintf"), exports);
 __exportStar(require("./LightenDarkenColor"), exports);
 __exportStar(require("./shiftColor"), exports);
 __exportStar(require("./defaultBadgeComponentMap"), exports);
+__exportStar(require("./createImpressionObserver"), exports);

package/dist/esm/components/Atoms/Icon/Icon.d.ts

@@ -15,6 +15,7 @@ export interface IconProps extends ComponentProps {
     icon?: IconType | string;
     path?: string | SVGPathElement[];
     children?: ComponentChildren;
+    title?: string;
     size?: string | number;
     width?: string | number;
     height?: string | number;

package/dist/esm/components/Atoms/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAkDvD;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAmDvD;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/esm/components/Atoms/Icon/Icon.js

@@ -26,7 +26,7 @@ export function Icon(properties) {
         ...properties,
         ...properties.theme?.components?.icon,
     };
-    const { color, icon, path, children, size, width, height, viewBox, disableStyles, className, style, ...otherProps } = props;
+    const { color, icon, path, children, size, width, title, height, viewBox, disableStyles, className, style, ...otherProps } = props;
     const iconPath = iconPaths[icon] || path;
     const pathType = typeof iconPath;
     const styling = {};
@@ -37,15 +37,17 @@ export function Icon(properties) {
         styling.css = [style];
     }
     return children || (iconPath && (pathType === 'string' || (pathType === 'object' && Array.isArray(iconPath)))) ? (jsx(CacheProvider, null,
-        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined, ...otherProps }, (() => {
-            if (children) {
-                return children;
-            }
-            else if (pathType === 'string') {
-                return jsx("path", { fill: disableStyles ? color : undefined, d: iconPath });
-            }
-            else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
-                return iconPath.map((p, i) => jsx(p.type, { key: i, ...p.attributes }));
-            }
-        })()))) : (jsx(Fragment, null));
+        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined, ...otherProps },
+            title ? jsx("title", null, title) : null,
+            (() => {
+                if (children) {
+                    return children;
+                }
+                else if (pathType === 'string') {
+                    return jsx("path", { fill: disableStyles ? color : undefined, d: iconPath });
+                }
+                else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
+                    return iconPath.map((p, i) => jsx(p.type, { key: i, ...p.attributes }));
+                }
+            })()))) : (jsx(Fragment, null));
 }

package/dist/esm/components/Molecules/Carousel/Carousel.d.ts

@@ -2,6 +2,7 @@
 import type { Swiper as SwiperTypes } from 'swiper';
 import type { PaginationOptions } from 'swiper/types/modules/pagination';
 import type { NavigationOptions } from 'swiper/types/modules/navigation';
+import type { ScrollbarOptions } from 'swiper/types/modules/scrollbar';
 import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const defaultCarouselBreakpoints: {
     0: {
@@ -48,6 +49,7 @@ export interface CarouselProps extends ComponentProps {
     vertical?: boolean;
     pagination?: boolean | PaginationOptions;
     navigation?: boolean | NavigationOptions;
+    scrollbar?: boolean | ScrollbarOptions;
     autoAdjustSlides?: boolean;
     onClick?: (swiper: SwiperTypes, e: MouseEvent | TouchEvent | PointerEvent) => void;
     onNextButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;

package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAIzE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkI9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2P5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2Q5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}

package/dist/esm/components/Molecules/Carousel/Carousel.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import deepmerge from 'deepmerge';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Pagination, A11y } from 'swiper/modules';
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
@@ -128,6 +128,22 @@ const CSS = {
         '.swiper-vertical': {
             touchAction: 'pan-x',
         },
+        '.swiper-scrollbar': {
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#d9d9d9',
+            '&:empty': {
+                display: 'none',
+            },
+            '.swiper-scrollbar-drag': {
+                position: 'relative',
+                height: '100%',
+                backgroundColor: theme?.colors?.primary || '#000',
+            },
+        },
     }),
 };
 export const defaultCarouselBreakpoints = {
@@ -205,6 +221,7 @@ export const Carousel = observer((properties) => {
     const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, modules, className, ...additionalProps } = props;
     let pagination = props.pagination;
     let navigation = props.navigation;
+    let scrollbar = props.scrollbar;
     const subProps = {
         icon: {
             // default props
@@ -219,7 +236,9 @@ export const Carousel = observer((properties) => {
             theme: props.theme,
         },
     };
-    const swiperModulesUnfiltered = Array.isArray(modules) ? [Navigation, Pagination, A11y].concat(modules) : [Navigation, Pagination, A11y];
+    const swiperModulesUnfiltered = Array.isArray(modules)
+        ? [Navigation, Pagination, Scrollbar, A11y].concat(modules)
+        : [Navigation, Pagination, Scrollbar, A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
     const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
     const navigationPrevRef = useRef(null);
@@ -270,6 +289,19 @@ export const Carousel = observer((properties) => {
             prevEl: '.ss_carousel_DNE',
         };
     }
+    if (scrollbar) {
+        if (typeof scrollbar == 'object') {
+            scrollbar = {
+                enabled: true,
+                ...scrollbar,
+            };
+        }
+        else {
+            scrollbar = {
+                enabled: true,
+            };
+        }
+    }
     const attachClasstoLastVisibleSlide = () => {
         if (rootComponentRef.current) {
             const swiperElem = rootComponentRef.current;
@@ -321,7 +353,7 @@ export const Carousel = observer((properties) => {
                     }
                 }, onClick: (swiper, e) => {
                     onClick && onClick(swiper, e);
-                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, navigation: navigation, pagination: pagination, onResize: (swiper) => {
+                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: (swiper) => {
                     if (additionalProps.onResize) {
                         additionalProps.onResize();
                     }

package/dist/esm/components/Molecules/Result/Result.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAuJxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAmKxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

package/dist/esm/components/Molecules/Result/Result.js

@@ -74,7 +74,7 @@ export const Result = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.result,
     };
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller } = props;
+    const { trackingRef, result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller, } = props;
     const core = result?.display?.mappings.core || result?.mappings?.core;
     const subProps = {
         price: {
@@ -142,11 +142,10 @@ export const Result = observer((properties) => {
         styling.css = [style];
     }
     return core ? (jsx(CacheProvider, null,
-        jsx("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, className) },
+        jsx("article", { ...styling, ref: trackingRef, className: classnames('ss__result', `ss__result--${layout}`, className) },
             jsx("div", { className: "ss__result__image-wrapper" },
                 jsx("a", { href: core.url, onClick: (e) => {
                         onClick && onClick(e);
-                        controller?.track?.product?.click(e, result);
                     } }, !hideImage &&
                     (!hideBadge ? (jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller },
                         jsx(Image, { ...subProps.image }))) : (jsx(Image, { ...subProps.image }))))),
@@ -155,7 +154,6 @@ export const Result = observer((properties) => {
                 !hideTitle && (jsx("div", { className: "ss__result__details__title" },
                     jsx("a", { href: core.url, onClick: (e) => {
                             onClick && onClick(e);
-                            controller?.track?.product?.click(e, result);
                         }, dangerouslySetInnerHTML: {
                             __html: displayName || '',
                         } }))),

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts

@@ -17,6 +17,7 @@ export interface RecommendationProps extends ComponentProps {
     controller: RecommendationController;
     children?: ComponentChildren;
     vertical?: boolean;
+    scrollbar?: boolean;
     lazyRender?: {
         enabled: boolean;
         offset?: string;

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}

package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js

@@ -276,7 +276,7 @@ export const RecommendationBundle = observer((properties) => {
     };
     const addToCart = (e) => {
         // add to cart tracking
-        controller.track.bundle.addToCart(selectedItems);
+        controller.addToCart(selectedItems);
         //call the function passed
         onAddToCart && onAddToCart(e, selectedItems);
     };

package/dist/esm/components/Organisms/Results/Results.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA+BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WAkHzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAgClG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA4GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

package/dist/esm/components/Organisms/Results/Results.js

@@ -9,9 +9,8 @@ import { InlineBanner } from '../../Atoms/Merchandising/InlineBanner';
 import { Result } from '../../Molecules/Result';
 import { Layout } from '../../../types';
 import { defined } from '../../../utilities';
-import { useTheme, CacheProvider } from '../../../providers';
+import { useTheme, CacheProvider, withTracking } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
-import { ResultTracker } from '../../Trackers/ResultTracker';
 const CSS = {
     results: ({ columns, gapSize }) => css({
         display: 'flex',
@@ -33,6 +32,7 @@ const CSS = {
         },
     }),
 };
+const ResultComponent = withTracking(Result);
 export const Results = observer((properties) => {
     const globalTheme = useTheme();
     const defaultBreakpointsProps = {
@@ -108,12 +108,12 @@ export const Results = observer((properties) => {
         styling.css = [style];
     }
     return results?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (jsx(ResultTracker, { key: result.id, result: result, controller: controller }, (() => {
+        jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (() => {
             switch (result.type) {
                 case ContentType.BANNER:
                     return jsx(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
                 default:
-                    return (jsx(Result, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
+                    return (jsx(ResultComponent, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
             }
-        })())))))) : (jsx(Fragment, null));
+        })())))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAgEtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
+{"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAsDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}

package/dist/esm/components/Trackers/ResultTracker/ResultTracker.js

@@ -1,9 +1,8 @@
 import { jsx, css } from '@emotion/react';
-import { useRef } from 'preact/hooks';
 import { observer } from 'mobx-react';
 import { useTheme } from '../../../providers';
-import { useIntersectionAdvanced } from '../../../hooks';
 import classnames from 'classnames';
+import { createImpressionObserver } from '../../../utilities';
 const CSS = {
     ResultTracker: () => css({}),
 };
@@ -27,16 +26,8 @@ export const ResultTracker = observer((properties) => {
         ...defaultTrack,
         ...track,
     };
-    const resultRef = useRef(null);
-    const resultInViewport = useIntersectionAdvanced(resultRef, {
-        key: result.id,
-        rootMargin: '0px',
-        fireOnce: true,
-        threshold: 0.75,
-        startDelay: 2000, // TODO: look into dynamically setting this to a lower value for first row of products
-        minVisibleTime: 150,
-    });
-    if (resultInViewport && mergedTrack.impression) {
+    const { ref, inViewport } = createImpressionObserver();
+    if (inViewport && mergedTrack.impression) {
         if (result.type === 'product') {
             controller?.track.product.impression(result);
         }
@@ -51,11 +42,9 @@ export const ResultTracker = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (jsx("div", { key: result.id, className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className), onClick: (e) => {
-            if (mergedTrack.click) {
-                if (result.type === 'product') {
-                    controller?.track.product.click(e, result);
-                }
+    return (jsx("div", { className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className), onClick: (e) => {
+            if (result.type === 'product' && mergedTrack.click) {
+                controller?.track.product.click(e, result);
             }
-        }, ref: resultRef, ...styling }, children));
+        }, ref: ref, ...styling }, children));
 });

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

@@ -7,4 +7,5 @@ export * from './useDisplaySettings';
 export * from './useA11y';
 export * from './useDeepCompareEffect';
 export * from './useComponent';
+export * from './useTracking';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/esm/hooks/index.js

@@ -7,3 +7,4 @@ export * from './useDisplaySettings';
 export * from './useA11y';
 export * from './useDeepCompareEffect';
 export * from './useComponent';
+export * from './useTracking';

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

@@ -1,11 +1,10 @@
 import { MutableRef } from 'preact/hooks';
 interface UseIntersectionOptions {
-    key?: string;
     rootMargin?: string;
     fireOnce?: boolean;
     threshold?: number | number[];
-    startDelay?: number;
     minVisibleTime?: number;
+    additionalEffectKeys?: unknown[];
 }
 export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => boolean;
 export {};

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,UAAU,sBAAsB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,YAiG3G,CAAC"}
+{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU,sBAAsB;IAC/B,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,oBAAoB,CAAC,EAAE,OAAO,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAiFnH,CAAC"}

package/dist/esm/hooks/useIntersectionAdvanced.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'preact/hooks';
 export const useIntersectionAdvanced = (ref, options = {}) => {
-    const { key = '', rootMargin = '0px', fireOnce = false, threshold = 0, startDelay = 0, minVisibleTime = 0 } = 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
@@ -9,69 +9,54 @@ export const useIntersectionAdvanced = (ref, options = {}) => {
     const visibleStartRef = useRef(null);
     useEffect(() => {
         setIntersecting(false);
-        let startDelayTimeout = null;
         let observer = null;
-        // Function to create and start the observer
-        const startObserver = () => {
-            if (!ref.current)
-                return;
-            observer = new IntersectionObserver(([entry]) => {
-                // If element becomes visible
-                if (entry.isIntersecting) {
-                    // Start tracking visibility time if minVisibleTime is set
-                    if (minVisibleTime > 0) {
-                        visibleStartRef.current = Date.now();
-                        // Clear any existing timer
-                        if (visibleTimerRef.current) {
-                            window.clearTimeout(visibleTimerRef.current);
-                        }
-                        // Set up a timer for the minimum visibility duration
-                        visibleTimerRef.current = window.setTimeout(() => {
-                            setIntersecting(true);
-                            if (fireOnce && ref.current && observer) {
-                                observer.unobserve(ref.current);
-                            }
-                        }, minVisibleTime);
+        if (!ref.current)
+            return;
+        observer = new IntersectionObserver(([entry]) => {
+            // If element becomes visible
+            if (entry.isIntersecting) {
+                // Start tracking visibility time if minVisibleTime is set
+                if (minVisibleTime > 0) {
+                    visibleStartRef.current = Date.now();
+                    // Clear any existing timer
+                    if (visibleTimerRef.current) {
+                        window.clearTimeout(visibleTimerRef.current);
                     }
-                    else {
-                        // If no minimum time required, update state immediately
+                    // Set up a timer for the minimum visibility duration
+                    visibleTimerRef.current = window.setTimeout(() => {
                         setIntersecting(true);
                         if (fireOnce && ref.current && observer) {
                             observer.unobserve(ref.current);
                         }
-                    }
+                    }, minVisibleTime);
                 }
                 else {
-                    // Element is no longer visible
-                    if (visibleTimerRef.current) {
-                        // Clear the timer if element goes out of view before minimum time
-                        window.clearTimeout(visibleTimerRef.current);
+                    // If no minimum time required, update state immediately
+                    setIntersecting(true);
+                    if (fireOnce && ref.current && observer) {
+                        observer.unobserve(ref.current);
                     }
-                    visibleTimerRef.current = null;
-                    visibleStartRef.current = null;
-                    setIntersecting(false);
                 }
-            }, {
-                rootMargin,
-                threshold,
-            });
-            if (ref.current) {
-                observer.observe(ref.current);
             }
-        };
-        // Handle start delay
-        if (startDelay > 0) {
-            startDelayTimeout = setTimeout(startObserver, startDelay);
-        }
-        else {
-            startObserver();
+            else {
+                // Element is no longer visible
+                if (visibleTimerRef.current) {
+                    // Clear the timer if element goes out of view before minimum time
+                    window.clearTimeout(visibleTimerRef.current);
+                }
+                visibleTimerRef.current = null;
+                visibleStartRef.current = null;
+                setIntersecting(false);
+            }
+        }, {
+            rootMargin,
+            threshold,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
         }
         return () => {
             setIntersecting(false);
-            // Clean up timers
-            if (startDelayTimeout) {
-                window.clearTimeout(startDelayTimeout);
-            }
             if (visibleTimerRef.current) {
                 window.clearTimeout(visibleTimerRef.current);
             }
@@ -80,6 +65,6 @@ export const useIntersectionAdvanced = (ref, options = {}) => {
                 observer.unobserve(ref.current);
             }
         };
-    }, [key]); // Dependencies for effect
+    }, [ref, ...(options?.additionalEffectKeys || [])]);
     return isIntersecting;
 };

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

@@ -0,0 +1,12 @@
+import { Product } from '@searchspring/snap-store-mobx';
+import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+import { type Ref } from 'preact/hooks';
+interface UseTrackingProps {
+    controller: SearchController | AutocompleteController | RecommendationController;
+    result: Product;
+}
+export declare function useTracking({ controller, result }: UseTrackingProps): {
+    trackingRef: Ref<HTMLElement | null>;
+};
+export {};
+//# sourceMappingURL=useTracking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CAuC9G"}