@searchspring/snap-preact-components 0.65.2 → 0.66.0

package/dist/cjs/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/cjs/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/cjs/components/Atoms/Icon/Icon.js

@@ -52,7 +52,7 @@ function Icon(properties) {
     var props = __assign(__assign(__assign({ 
         // default props
         size: '16px', viewBox: '0 0 56 56' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.icon), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.icon);
-    var color = props.color, icon = props.icon, path = props.path, children = props.children, size = props.size, width = props.width, height = props.height, viewBox = props.viewBox, disableStyles = props.disableStyles, className = props.className, style = props.style, otherProps = __rest(props, ["color", "icon", "path", "children", "size", "width", "height", "viewBox", "disableStyles", "className", "style"]);
+    var color = props.color, icon = props.icon, path = props.path, children = props.children, size = props.size, width = props.width, title = props.title, height = props.height, viewBox = props.viewBox, disableStyles = props.disableStyles, className = props.className, style = props.style, otherProps = __rest(props, ["color", "icon", "path", "children", "size", "width", "title", "height", "viewBox", "disableStyles", "className", "style"]);
     var iconPath = paths_1.iconPaths[icon] || path;
     var pathType = typeof iconPath;
     var styling = {};
@@ -63,16 +63,18 @@ function Icon(properties) {
         styling.css = [style];
     }
     return children || (iconPath && (pathType === 'string' || (pathType === 'object' && Array.isArray(iconPath)))) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("svg", __assign({}, styling, { className: (0, classnames_1.default)('ss__icon', icon ? "ss__icon--".concat(icon) : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined }, otherProps), (function () {
-            if (children) {
-                return children;
-            }
-            else if (pathType === 'string') {
-                return (0, react_1.jsx)("path", { fill: disableStyles ? color : undefined, d: iconPath });
-            }
-            else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
-                return iconPath.map(function (p, i) { return (0, react_1.jsx)(p.type, __assign({ key: i }, p.attributes)); });
-            }
-        })()))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+        (0, react_1.jsx)("svg", __assign({}, styling, { className: (0, classnames_1.default)('ss__icon', icon ? "ss__icon--".concat(icon) : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined }, otherProps),
+            title ? (0, react_1.jsx)("title", null, title) : null,
+            (function () {
+                if (children) {
+                    return children;
+                }
+                else if (pathType === 'string') {
+                    return (0, react_1.jsx)("path", { fill: disableStyles ? color : undefined, d: iconPath });
+                }
+                else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
+                    return iconPath.map(function (p, i) { return (0, react_1.jsx)(p.type, __assign({ key: i }, p.attributes)); });
+                }
+            })()))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 }
 exports.Icon = Icon;

package/dist/cjs/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/cjs/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/cjs/components/Molecules/Carousel/Carousel.js

@@ -41,7 +41,7 @@ var providers_1 = require("../../../providers");
 var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
 var CSS = {
     carousel: function (_a) {
-        var _b, _c;
+        var _b, _c, _d;
         var theme = _a.theme, vertical = _a.vertical;
         return (0, react_1.css)({
             display: 'flex',
@@ -159,6 +159,22 @@ var 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: ((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#000',
+                },
+            },
         });
     },
 };
@@ -225,6 +241,7 @@ exports.Carousel = (0, mobx_react_1.observer)(function (properties) {
     var children = props.children, loop = props.loop, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, onInit = props.onInit, onBeforeInit = props.onBeforeInit, onAfterInit = props.onAfterInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, style = props.style, modules = props.modules, className = props.className, additionalProps = __rest(props, ["children", "loop", "nextButton", "prevButton", "hideButtons", "vertical", "onInit", "onBeforeInit", "onAfterInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "modules", "className"]);
     var pagination = props.pagination;
     var navigation = props.navigation;
+    var scrollbar = props.scrollbar;
     var subProps = {
         icon: __assign(__assign(__assign({ 
             // default props
@@ -234,7 +251,9 @@ exports.Carousel = (0, mobx_react_1.observer)(function (properties) {
             // component theme overrides
             theme: props.theme }),
     };
-    var swiperModulesUnfiltered = Array.isArray(modules) ? [modules_1.Navigation, modules_1.Pagination, modules_1.A11y].concat(modules) : [modules_1.Navigation, modules_1.Pagination, modules_1.A11y];
+    var swiperModulesUnfiltered = Array.isArray(modules)
+        ? [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y].concat(modules)
+        : [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
     var swiperModules = swiperModulesUnfiltered.filter(function (module, pos) { return swiperModulesUnfiltered.indexOf(module) === pos; });
     var navigationPrevRef = (0, hooks_1.useRef)(null);
@@ -278,6 +297,16 @@ exports.Carousel = (0, mobx_react_1.observer)(function (properties) {
             prevEl: '.ss_carousel_DNE',
         };
     }
+    if (scrollbar) {
+        if (typeof scrollbar == 'object') {
+            scrollbar = __assign({ enabled: true }, scrollbar);
+        }
+        else {
+            scrollbar = {
+                enabled: true,
+            };
+        }
+    }
     var attachClasstoLastVisibleSlide = function () {
         if (rootComponentRef.current) {
             var swiperElem = rootComponentRef.current;
@@ -329,7 +358,7 @@ exports.Carousel = (0, mobx_react_1.observer)(function (properties) {
                     }
                 }, onClick: function (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: function (swiper) {
+                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules }, additionalProps, displaySettings, { navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: function (swiper) {
                     if (additionalProps.onResize) {
                         additionalProps.onResize();
                     }

package/dist/cjs/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/cjs/components/Molecules/Result/Result.js

@@ -88,7 +88,7 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
     var props = __assign(__assign(__assign({ 
         // default props
         layout: types_1.Layout.GRID }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.result), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.result);
-    var result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, layout = props.layout, onClick = props.onClick, style = props.style, controller = props.controller;
+    var trackingRef = props.trackingRef, result = props.result, hideBadge = props.hideBadge, hideTitle = props.hideTitle, hidePricing = props.hidePricing, hideImage = props.hideImage, detailSlot = props.detailSlot, fallback = props.fallback, disableStyles = props.disableStyles, className = props.className, layout = props.layout, onClick = props.onClick, style = props.style, controller = props.controller;
     var core = ((_d = result === null || result === void 0 ? void 0 : result.display) === null || _d === void 0 ? void 0 : _d.mappings.core) || ((_e = result === null || result === void 0 ? void 0 : result.mappings) === null || _e === void 0 ? void 0 : _e.core);
     var subProps = {
         price: __assign(__assign(__assign({ 
@@ -135,12 +135,10 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
         styling.css = [style];
     }
     return core ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("article", __assign({}, styling, { className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), className) }),
+        (0, react_1.jsx)("article", __assign({}, styling, { ref: trackingRef, className: (0, classnames_1.default)('ss__result', "ss__result--".concat(layout), className) }),
             (0, react_1.jsx)("div", { className: "ss__result__image-wrapper" },
                 (0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
-                        var _a, _b;
                         onClick && onClick(e);
-                        (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
                     } }, !hideImage &&
                     (!hideBadge ? ((0, react_1.jsx)(OverlayBadge_1.OverlayBadge, __assign({}, subProps.overlayBadge, { controller: controller }),
                         (0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))) : ((0, react_1.jsx)(Image_1.Image, __assign({}, subProps.image)))))),
@@ -148,9 +146,7 @@ exports.Result = (0, mobx_react_1.observer)(function (properties) {
                 !hideBadge && ((0, react_1.jsx)(CalloutBadge_1.CalloutBadge, __assign({}, subProps.calloutBadge, { controller: controller }))),
                 !hideTitle && ((0, react_1.jsx)("div", { className: "ss__result__details__title" },
                     (0, react_1.jsx)("a", { href: core.url, onClick: function (e) {
-                            var _a, _b;
                             onClick && onClick(e);
-                            (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click(e, result);
                         }, dangerouslySetInnerHTML: {
                             __html: displayName || '',
                         } }))),

package/dist/cjs/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/cjs/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/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js

@@ -266,7 +266,7 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
     };
     var addToCart = function (e) {
         // add to cart tracking
-        controller.track.bundle.addToCart(selectedItems);
+        controller.addToCart(selectedItems);
         //call the function passed
         onAddToCart && onAddToCart(e, selectedItems);
     };

package/dist/cjs/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/cjs/components/Organisms/Results/Results.js

@@ -28,7 +28,6 @@ var types_1 = require("../../../types");
 var utilities_1 = require("../../../utilities");
 var providers_1 = require("../../../providers");
 var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var ResultTracker_1 = require("../../Trackers/ResultTracker");
 var CSS = {
     results: function (_a) {
         var columns = _a.columns, gapSize = _a.gapSize;
@@ -53,6 +52,7 @@ var CSS = {
         });
     },
 };
+var ResultComponent = (0, providers_1.withTracking)(Result_1.Result);
 exports.Results = (0, mobx_react_1.observer)(function (properties) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var globalTheme = (0, providers_1.useTheme)();
@@ -105,12 +105,14 @@ exports.Results = (0, mobx_react_1.observer)(function (properties) {
         styling.css = [style];
     }
     return (results === null || results === void 0 ? void 0 : results.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.ResultTracker, { key: result.id, result: result, controller: controller }, (function () {
-            switch (result.type) {
-                case snap_store_mobx_1.ContentType.BANNER:
-                    return (0, react_1.jsx)(InlineBanner_1.InlineBanner, __assign({}, subProps.inlineBanner, { key: result.id, banner: result, layout: props.layout }));
-                default:
-                    return ((0, react_1.jsx)(Result_1.Result, __assign({ key: result.id }, subProps.result, { result: result, layout: props.layout, controller: controller })));
-            }
-        })())); })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) {
+            return (function () {
+                switch (result.type) {
+                    case snap_store_mobx_1.ContentType.BANNER:
+                        return (0, react_1.jsx)(InlineBanner_1.InlineBanner, __assign({}, subProps.inlineBanner, { key: result.id, banner: result, layout: props.layout }));
+                    default:
+                        return ((0, react_1.jsx)(ResultComponent, __assign({ key: result.id }, subProps.result, { result: result, layout: props.layout, controller: controller })));
+                }
+            })();
+        })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/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/cjs/components/Trackers/ResultTracker/ResultTracker.js

@@ -16,11 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultTracker = void 0;
 var react_1 = require("@emotion/react");
-var hooks_1 = require("preact/hooks");
 var mobx_react_1 = require("mobx-react");
 var providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
 var classnames_1 = __importDefault(require("classnames"));
+var utilities_1 = require("../../../utilities");
 var CSS = {
     ResultTracker: function () { return (0, react_1.css)({}); },
 };
@@ -35,16 +34,8 @@ exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
     var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.ResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.ResultTracker);
     var children = props.children, result = props.result, track = props.track, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
     var mergedTrack = __assign(__assign({}, defaultTrack), track);
-    var resultRef = (0, hooks_1.useRef)(null);
-    var resultInViewport = (0, hooks_2.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) {
+    var _d = (0, utilities_1.createImpressionObserver)(), ref = _d.ref, inViewport = _d.inViewport;
+    if (inViewport && mergedTrack.impression) {
         if (result.type === 'product') {
             controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
         }
@@ -59,11 +50,9 @@ exports.ResultTracker = (0, mobx_react_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return ((0, react_1.jsx)("div", __assign({ key: result.id, className: (0, classnames_1.default)('ss__result-tracker', "ss__".concat(controller === null || controller === void 0 ? void 0 : controller.type, "-result-tracker"), className), onClick: function (e) {
-            if (mergedTrack.click) {
-                if (result.type === 'product') {
-                    controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
-                }
+    return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__result-tracker', "ss__".concat(controller === null || controller === void 0 ? void 0 : controller.type, "-result-tracker"), className), onClick: function (e) {
+            if (result.type === 'product' && mergedTrack.click) {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
             }
-        }, ref: resultRef }, styling), children));
+        }, ref: ref }, styling), children));
 });

package/dist/cjs/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/cjs/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/cjs/hooks/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./useDisplaySettings"), exports);
 __exportStar(require("./useA11y"), exports);
 __exportStar(require("./useDeepCompareEffect"), exports);
 __exportStar(require("./useComponent"), exports);
+__exportStar(require("./useTracking"), exports);

package/dist/cjs/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/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,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/cjs/hooks/useIntersectionAdvanced.js

@@ -1,82 +1,76 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionAdvanced = void 0;
 var hooks_1 = require("preact/hooks");
 var useIntersectionAdvanced = function (ref, options) {
     if (options === void 0) { options = {}; }
-    var _a = options.key, key = _a === void 0 ? '' : _a, _b = options.rootMargin, rootMargin = _b === void 0 ? '0px' : _b, _c = options.fireOnce, fireOnce = _c === void 0 ? false : _c, _d = options.threshold, threshold = _d === void 0 ? 0 : _d, _e = options.startDelay, startDelay = _e === void 0 ? 0 : _e, _f = options.minVisibleTime, minVisibleTime = _f === void 0 ? 0 : _f;
+    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 _g = (0, hooks_1.useState)(false), isIntersecting = _g[0], setIntersecting = _g[1];
+    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);
     (0, hooks_1.useEffect)(function () {
         setIntersecting(false);
-        var startDelayTimeout = null;
         var observer = null;
-        // Function to create and start the observer
-        var startObserver = function () {
-            if (!ref.current)
-                return;
-            observer = new IntersectionObserver(function (_a) {
-                var entry = _a[0];
-                // 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(function () {
-                            setIntersecting(true);
-                            if (fireOnce && ref.current && observer) {
-                                observer.unobserve(ref.current);
-                            }
-                        }, minVisibleTime);
+        if (!ref.current)
+            return;
+        observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            // 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(function () {
                         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: rootMargin,
-                threshold: 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: rootMargin,
+            threshold: threshold,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
         }
         return function () {
             setIntersecting(false);
-            // Clean up timers
-            if (startDelayTimeout) {
-                window.clearTimeout(startDelayTimeout);
-            }
             if (visibleTimerRef.current) {
                 window.clearTimeout(visibleTimerRef.current);
             }
@@ -85,7 +79,7 @@ var useIntersectionAdvanced = function (ref, options) {
                 observer.unobserve(ref.current);
             }
         };
-    }, [key]); // Dependencies for effect
+    }, __spreadArray([ref], ((options === null || options === void 0 ? void 0 : options.additionalEffectKeys) || []), true));
     return isIntersecting;
 };
 exports.useIntersectionAdvanced = useIntersectionAdvanced;

package/dist/cjs/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/cjs/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"}

package/dist/cjs/hooks/useTracking.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTracking = void 0;
+var hooks_1 = require("preact/hooks");
+var utilities_1 = require("../utilities");
+function useTracking(_a) {
+    var controller = _a.controller, result = _a.result;
+    if (!controller) {
+        console.warn('Warning: No controller provided to useTracking');
+    }
+    if (!result) {
+        console.warn('Warning: No result provided to useTracking');
+    }
+    var _b = (0, utilities_1.createImpressionObserver)(), ref = _b.ref, inViewport = _b.inViewport;
+    (0, hooks_1.useEffect)(function () {
+        if (inViewport) {
+            // TODO: add support for disabling tracking events via config like in ResultTracker
+            if (result.type === 'product') {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
+            }
+            else {
+                // track banner in future
+            }
+        }
+    }, [inViewport]);
+    (0, hooks_1.useEffect)(function () {
+        var currentRef = ref.current;
+        if (currentRef) {
+            currentRef.setAttribute('sstracking', 'true');
+            var handleClick_1 = function (e) {
+                controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
+            };
+            currentRef.addEventListener('click', handleClick_1);
+            return function () {
+                currentRef.removeEventListener('click', handleClick_1);
+            };
+        }
+    }, [result]);
+    return { trackingRef: ref };
+}
+exports.useTracking = useTracking;

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

@@ -2,4 +2,5 @@ export * from './cache';
 export * from './controller';
 export * from './store';
 export * from './theme';
+export * from './withTracking';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/cjs/providers/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./cache"), exports);
 __exportStar(require("./controller"), exports);
 __exportStar(require("./store"), exports);
 __exportStar(require("./theme"), exports);
+__exportStar(require("./withTracking"), exports);

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

@@ -0,0 +1,11 @@
+import { ComponentType, FunctionComponent } from 'preact';
+import type { Product } from '@searchspring/snap-store-mobx';
+import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+interface WithTrackingProps {
+    controller?: SearchController | AutocompleteController | RecommendationController;
+    result?: Product;
+    [key: string]: any;
+}
+export declare function withTracking<Props extends WithTrackingProps>(WrappedComponent: ComponentType<Props>): FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=withTracking.d.ts.map

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

@@ -0,0 +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,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,UAAU,iBAAiB;IAC1B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,iBAAiB,EAAE,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,4BA+CnG"}