@searchspring/snap-preact-components 0.63.5 → 0.65.0

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

@@ -9,10 +9,14 @@ export interface DropdownProps extends ComponentProps {
     children?: ComponentChildren;
     disabled?: boolean;
     open?: boolean;
+    disableClick?: boolean;
     disableOverlay?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
     startOpen?: boolean;
+    toggleOnHover?: boolean;
     disableClickOutside?: boolean;
     disableA11y?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAiG5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAmJ5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -41,32 +41,37 @@ export const Dropdown = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.dropdown,
     };
-    const { button, content, children, disabled, open, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableA11y, disableStyles, className, style, } = props;
-    let showContent, setShowContent;
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableA11y, disableStyles, className, style, } = props;
+    let dropdownOpen, setDropdownOpen;
     const stateful = open === undefined;
     if (stateful) {
-        [showContent, setShowContent] = useState(startOpen);
+        [dropdownOpen, setDropdownOpen] = useState(startOpen);
     }
     else {
-        showContent = open;
+        dropdownOpen = open;
     }
+    // state to track touch interactions
+    const [isTouchInteraction, setIsTouchInteraction] = useState(false);
     let innerRef;
     if (!disableClickOutside) {
         innerRef = useClickOutside((e) => {
-            if (showContent) {
+            if (dropdownOpen) {
                 if (!disabled) {
-                    stateful && setShowContent && setShowContent(false);
+                    stateful && setDropdownOpen && setDropdownOpen(false);
                     onToggle && onToggle(e, false);
                 }
             }
         });
     }
-    const toggleShowContent = (e) => {
+    const toggleOpenDropdown = (e, state) => {
         if (stateful) {
-            setShowContent &&
-                setShowContent((prev) => {
-                    onToggle && onToggle(e, !prev);
-                    return !prev;
+            setDropdownOpen &&
+                setDropdownOpen((prev) => {
+                    const newState = state ?? !prev;
+                    if (newState != prev) {
+                        onToggle && onToggle(e, newState);
+                    }
+                    return newState;
                 });
         }
     };
@@ -77,15 +82,45 @@ export const Dropdown = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
+    const hoverProps = {
+        onMouseEnter: (toggleOnHover || onMouseEnter) &&
+            ((e) => {
+                // skip if it's a touch interaction
+                if (isTouchInteraction)
+                    return;
+                if (toggleOnHover && !disabled) {
+                    toggleOpenDropdown(e, true);
+                }
+                onMouseEnter && onMouseEnter(e);
+            }),
+        onMouseLeave: (toggleOnHover || onMouseLeave) &&
+            ((e) => {
+                // skip if it's a touch interaction
+                if (isTouchInteraction)
+                    return;
+                if (toggleOnHover && !disabled) {
+                    toggleOpenDropdown(e, false);
+                }
+                onMouseLeave && onMouseLeave(e);
+            }),
+    };
     return (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef },
-            jsx("div", { className: "ss__dropdown__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": showContent, role: "button", onClick: (e) => {
-                    if (!disabled) {
-                        toggleShowContent(e);
+        jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className), ref: innerRef, ...hoverProps },
+            jsx("div", { className: "ss__dropdown__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": dropdownOpen, role: "button", onTouchStart: () => {
+                    // mark this as a touch interaction to avoid hover state conflicts
+                    setIsTouchInteraction(true);
+                }, onClick: (e) => {
+                    if (!disabled && !disableClick) {
+                        toggleOpenDropdown(e);
                         onClick && onClick(e);
                     }
-                } }, cloneWithProps(button, { open: showContent, toggleOpen: toggleShowContent })),
+                    // reset touch interaction after a short delay
+                    // this gives time for the click handler to complete before allowing hover events again
+                    setTimeout(() => {
+                        setIsTouchInteraction(false);
+                    }, 300);
+                } }, cloneWithProps(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })),
             jsx("div", { className: "ss__dropdown__content" },
-                cloneWithProps(content, { open: showContent, toggleOpen: toggleShowContent }),
-                cloneWithProps(children, { open: showContent, toggleOpen: toggleShowContent })))));
+                cloneWithProps(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown }),
+                cloneWithProps(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA8C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA+C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}

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

@@ -21,6 +21,7 @@ const CSS = {
         return css({
             position: 'relative',
             '& .ss__overlay-badge__grid-wrapper': {
+                pointerEvents: 'none',
                 display: 'grid',
                 position: 'absolute',
                 top: 0,

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

@@ -12,7 +12,7 @@ import { useIntersection } from '../../../hooks';
 import { useTheme, CacheProvider } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
-import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
+import { ResultTracker } from '../../Trackers/ResultTracker';
 const CSS = {
     recommendation: ({ vertical }) => css({
         height: vertical ? '100%' : undefined,
@@ -103,11 +103,11 @@ export const Recommendation = observer((properties) => {
         jsx("div", { ...styling, className: classnames('ss__recommendation', className), ref: recsRef }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
             title && jsx("h3", { className: "ss__recommendation__title" }, title),
             jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
-                ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
-                : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
+                ? children.map((child, idx) => (jsx(ResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
+                : resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
                     jsx(Result, { ...subProps.result, controller: controller, result: result }))))))) : (jsx(RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
-            ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] },
+            ? children.map((child, idx) => (jsx(ResultTracker, { controller: controller, result: resultsToRender[idx] },
                 jsx(Fragment, null))))
-            : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
+            : resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
                 jsx(Fragment, null))))))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Organisms/RecommendationBundle/BundleSelector.d.ts

@@ -15,7 +15,7 @@ export interface BundleSelectorProps extends ComponentProps {
     seedText?: string;
     seed?: boolean;
     hideCheckboxes?: boolean;
-    onCheck?: () => void;
+    onCheck?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     icon?: string | Partial<IconProps> | boolean;
 }
 //# sourceMappingURL=BundleSelector.d.ts.map

package/dist/esm/components/Organisms/RecommendationBundle/BundleSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;CAC7C"}
+{"version":3,"file":"BundleSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/BundleSelector.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK9C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WAmDxE,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;CAC7C"}

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

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA4epF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
+{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA8fpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,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

@@ -11,7 +11,7 @@ import { cloneWithProps, defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
-import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
+import { ResultTracker } from '../../Trackers/ResultTracker';
 import { BundleSelector } from './BundleSelector';
 import { BundledCTA } from './BundleCTA';
 import { useIntersection } from '../../../hooks';
@@ -276,7 +276,7 @@ export const RecommendationBundle = observer((properties) => {
     };
     const addToCart = (e) => {
         // add to cart tracking
-        controller.track.addBundle(e, selectedItems);
+        controller.track.bundle.addToCart(selectedItems);
         //call the function passed
         onAddToCart && onAddToCart(e, selectedItems);
     };
@@ -311,8 +311,11 @@ export const RecommendationBundle = observer((properties) => {
                 }) },
                 carouselEnabled ? (jsx(Fragment, null,
                     !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
-                        jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
-                            jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
+                        jsx(ResultTracker, { controller: controller, result: seed, track: { impression: false } },
+                            jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: (e) => {
+                                    e.stopPropagation();
+                                    onProductSelect(seed);
+                                }, checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
                                 result: seed,
                                 seed: true,
                                 selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
@@ -325,35 +328,50 @@ export const RecommendationBundle = observer((properties) => {
                                 .map((result, idx) => {
                                 const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
                                 if (idx == 0 && !hideSeed) {
-                                    return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
-                                        jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
+                                    return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
+                                        jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
+                                                e.stopPropagation();
+                                                onProductSelect(result);
+                                            }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
                                 }
                                 else {
-                                    return (jsx(RecommendationResultTracker, { controller: controller, result: result },
-                                        jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
+                                    return (jsx(ResultTracker, { controller: controller, result: result },
+                                        jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
+                                                e.stopPropagation();
+                                                onProductSelect(result);
+                                            }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
                                 }
                             })
                             : resultsToRender
                                 .filter((result, idx) => idx !== 0)
                                 .map((result, idx, results) => {
                                 const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
-                                return (jsx(RecommendationResultTracker, { controller: controller, result: result },
-                                    jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
+                                return (jsx(ResultTracker, { controller: controller, result: result },
+                                    jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
+                                            e.stopPropagation();
+                                            onProductSelect(result);
+                                        }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
                             }))))) : (resultsToRender
                     .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
                     .map((result, idx) => {
                     const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
                     if (idx == 0 && !hideSeed) {
-                        return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
-                            jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
+                        return (jsx(ResultTracker, { controller: controller, result: result, track: { impression: false } },
+                            jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: (e) => {
+                                    e.stopPropagation();
+                                    onProductSelect(result);
+                                }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
                     }
                     else {
-                        return (jsx(RecommendationResultTracker, { controller: controller, result: result },
-                            jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
+                        return (jsx(ResultTracker, { controller: controller, result: result },
+                            jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: (e) => {
+                                    e.stopPropagation();
+                                    onProductSelect(result);
+                                }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
                     }
                 })),
                 ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
-            !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
+            !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(ResultTracker, { controller: controller, result: result },
             jsx(Fragment, null))))))))) : (jsx(Fragment, null));
     return jsx(Fragment, null);
 });

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;AAuClG,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"}
+{"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,WA8GzD,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

@@ -11,6 +11,7 @@ import { Layout } from '../../../types';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+import { ResultTracker } from '../../Trackers/ResultTracker';
 const CSS = {
     results: ({ columns, gapSize }) => css({
         display: 'flex',
@@ -22,14 +23,6 @@ const CSS = {
             boxSizing: 'border-box',
             flex: '0 1 auto',
             width: `calc(${100 / columns}% - (${columns - 1} * ${gapSize} / ${columns} ) )`,
-            marginRight: gapSize,
-            marginBottom: gapSize,
-            [`&:nth-of-type(${columns}n)`]: {
-                marginRight: '0',
-            },
-            [`&:nth-last-of-type(-n+${columns})`]: {
-                marginBottom: '0',
-            },
         },
         '@supports (display: grid)': {
             display: 'grid',
@@ -115,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("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (jsx(ResultTracker, { result: result, controller: controller }, (() => {
             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 }));
             }
-        })())))) : (jsx(Fragment, null));
+        })())))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
 import type { RecommendationController } from '@searchspring/snap-controller';
 import { ComponentProps } from '../../../../types';
 export declare const RecommendationProfileTracker: (properties: RecommendationProfileTrackerProps) => JSX.Element;
 export interface RecommendationProfileTrackerProps extends ComponentProps {
-    children: any;
+    children: ComponentChildren;
     controller: RecommendationController;
 }
 //# sourceMappingURL=RecommendationProfileTracker.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA+CpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
+{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAA6B,MAAM,QAAQ,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA8BpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js

@@ -1,10 +1,8 @@
 /** @jsx jsx */
 import { Fragment, toChildArray } from 'preact';
 import { jsx, css } from '@emotion/react';
-import { useRef } from 'preact/hooks';
 import { observer } from 'mobx-react';
 import { useTheme } from '../../../../providers';
-import { useIntersection } from '../../../../hooks';
 import classnames from 'classnames';
 const CSS = {
     RecommendationProfileTracker: () => css({}),
@@ -19,16 +17,8 @@ export const RecommendationProfileTracker = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.RecommendationProfileTracker,
     };
-    const { children, controller, className, style, disableStyles } = props;
+    const { children, className, style, disableStyles } = props;
     const childs = toChildArray(children);
-    // do impression tracking for "profile"
-    const componentRef = useRef(null);
-    const inViewport = useIntersection(componentRef, '0px');
-    if (inViewport) {
-        controller.track.impression();
-    }
-    // takes care of rendering profile
-    childs.length && controller.track.render();
     const styling = {};
     if (!disableStyles) {
         styling.css = [CSS.RecommendationProfileTracker(), style];
@@ -36,5 +26,5 @@ export const RecommendationProfileTracker = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return childs.length ? (jsx("div", { className: classnames('ss__recommendation-profile-tracker', className), onClick: (e) => controller.track.click(e), ref: componentRef, ...styling }, children)) : (jsx(Fragment, null));
+    return childs.length ? (jsx("div", { className: classnames('ss__recommendation-profile-tracker', className), ...styling }, children)) : (jsx(Fragment, null));
 });

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
+import type { AutocompleteController, RecommendationController, SearchController } from '@searchspring/snap-controller';
+import { ComponentProps } from '../../../types';
+import type { Banner, Product } from '@searchspring/snap-store-mobx';
+export declare const ResultTracker: (properties: ResultTrackerProps) => JSX.Element;
+export interface ResultTrackerProps extends ComponentProps {
+    children: ComponentChildren;
+    result: Product | Banner;
+    controller: SearchController | AutocompleteController | RecommendationController;
+    track?: {
+        render?: boolean;
+        impression?: boolean;
+        click?: boolean;
+    };
+}
+//# sourceMappingURL=ResultTracker.d.ts.map

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

@@ -0,0 +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,WA+DtE,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

@@ -0,0 +1,58 @@
+import { jsx, css } from '@emotion/react';
+import { useRef, useEffect } from 'preact/hooks';
+import { observer } from 'mobx-react';
+import { useTheme } from '../../../providers';
+import { useIntersection } from '../../../hooks';
+import classnames from 'classnames';
+const CSS = {
+    ResultTracker: () => css({}),
+};
+export const ResultTracker = observer((properties) => {
+    const globalTheme = useTheme();
+    const defaultTrack = {
+        render: true,
+        impression: true,
+        click: true,
+    };
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.ResultTracker,
+        // props
+        ...properties,
+        ...properties.theme?.components?.ResultTracker,
+    };
+    const { children, result, track, controller, className, disableStyles, style } = props;
+    const mergedTrack = {
+        ...defaultTrack,
+        ...track,
+    };
+    const resultRef = useRef(null);
+    const resultInViewport = useIntersection(resultRef, '0px');
+    useEffect(() => {
+        if (mergedTrack.render) {
+            if (result.type === 'product') {
+                controller?.track?.product?.render(result);
+            }
+        }
+    }, [result]);
+    if (resultInViewport && mergedTrack.impression) {
+        if (result.type === 'product' && controller?.track) {
+            controller?.track?.product?.impression(result);
+        }
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.ResultTracker(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx("div", { 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);
+                }
+            }
+        }, ref: resultRef, ...styling }, children));
+});

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

@@ -0,0 +1,2 @@
+export * from './ResultTracker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+export * from './ResultTracker';

package/dist/esm/index.d.ts

@@ -13,8 +13,6 @@ export * from './components/Atoms/Merchandising';
 export * from './components/Atoms/Overlay';
 export * from './components/Atoms/Price';
 export * from './components/Atoms/Skeleton';
-export * from './components/Trackers/Recommendation/ResultTracker';
-export * from './components/Trackers/Recommendation/ProfileTracker';
 export * from './components/Molecules/CalloutBadge';
 export * from './components/Molecules/Carousel';
 export * from './components/Molecules/Checkbox';
@@ -42,6 +40,9 @@ export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/Recommendation';
 export * from './components/Organisms/RecommendationBundle';
 export * from './components/Organisms/Results';
+export * from './components/Trackers/Recommendation/ProfileTracker';
+export * from './components/Trackers/ResultTracker';
+export { ResultTracker as RecommendationResultTracker, ResultTrackerProps as RecommendationResultTrackerProps, } from './components/Trackers/ResultTracker';
 export * from './hooks';
 export * from './providers';
 export * from './toolbox';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,gCAAgC,CAAC;AAG/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACN,aAAa,IAAI,2BAA2B,EAC5C,kBAAkB,IAAI,gCAAgC,GACtD,MAAM,qCAAqC,CAAC;AAG7C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}

package/dist/esm/index.js

@@ -14,8 +14,6 @@ export * from './components/Atoms/Merchandising';
 export * from './components/Atoms/Overlay';
 export * from './components/Atoms/Price';
 export * from './components/Atoms/Skeleton';
-export * from './components/Trackers/Recommendation/ResultTracker';
-export * from './components/Trackers/Recommendation/ProfileTracker';
 // MOLECULES
 export * from './components/Molecules/CalloutBadge';
 export * from './components/Molecules/Carousel';
@@ -45,6 +43,10 @@ export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/Recommendation';
 export * from './components/Organisms/RecommendationBundle';
 export * from './components/Organisms/Results';
+// TRACKERS
+export * from './components/Trackers/Recommendation/ProfileTracker';
+export * from './components/Trackers/ResultTracker';
+export { ResultTracker as RecommendationResultTracker, } from './components/Trackers/ResultTracker';
 // HOOKS
 export * from './hooks';
 // PROVIDERS

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.63.5",
+	"version": "0.65.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.63.5",
+		"@searchspring/snap-toolbox": "^0.65.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.63.5",
-		"@searchspring/snap-controller": "^0.63.5",
-		"@searchspring/snap-event-manager": "^0.63.5",
-		"@searchspring/snap-logger": "^0.63.5",
-		"@searchspring/snap-profiler": "^0.63.5",
-		"@searchspring/snap-store-mobx": "^0.63.5",
-		"@searchspring/snap-tracker": "^0.63.5",
-		"@searchspring/snap-url-manager": "^0.63.5",
+		"@searchspring/snap-client": "^0.65.0",
+		"@searchspring/snap-controller": "^0.65.0",
+		"@searchspring/snap-event-manager": "^0.65.0",
+		"@searchspring/snap-logger": "^0.65.0",
+		"@searchspring/snap-profiler": "^0.65.0",
+		"@searchspring/snap-store-mobx": "^0.65.0",
+		"@searchspring/snap-tracker": "^0.65.0",
+		"@searchspring/snap-url-manager": "^0.65.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": "d35f838dc0f3b254b524e858cbcc1c728db2b610"
+	"gitHead": "e96fc4426a64178a94a8ca603ec834bdca020fdb"
 }

package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { RecommendationController } from '@searchspring/snap-controller';
-import { ComponentProps } from '../../../../types';
-import type { Product } from '@searchspring/snap-store-mobx';
-export declare const RecommendationResultTracker: (properties: RecommendationResultTrackerProps) => JSX.Element;
-export interface RecommendationResultTrackerProps extends ComponentProps {
-    children: any;
-    result: Product;
-    controller: RecommendationController;
-    track?: {
-        impression?: boolean;
-        click?: boolean;
-    };
-}
-//# sourceMappingURL=RecommendationResultTracker.d.ts.map

package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,eAAyB,gCAAgC,KAAG,WAwDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}