@searchspring/snap-preact-components 0.51.1 → 0.52.0

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

@@ -0,0 +1,339 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useRef } from 'preact/hooks';
+import { observer } from 'mobx-react';
+import deepmerge from 'deepmerge';
+import { Carousel } from '../../Molecules/Carousel';
+import { Result } from '../../Molecules/Result';
+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 { BundleSelector } from './BundleSelector';
+import { BundledCTA } from './BundleCTA';
+import { useEffect } from 'react';
+const CSS = {
+    recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
+        '.ss__recommendation-bundle__wrapper': {
+            display: 'flex',
+            maxWidth: '100%',
+            margin: '0',
+            padding: '0',
+        },
+        '.ss__recommendation-bundle__wrapper__selector--seed': {
+            width: `${vertical ? '100%' : 'auto'}`,
+            margin: `${!separatorIcon ? 'auto !important' : 'initial'}`,
+        },
+        '.ss__recommendation-bundle__wrapper__seed-container': {
+            width: vertical ? '100%' : `calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)})`,
+        },
+        '.ss__recommendation-bundle__wrapper__cta': {
+            width: vertical ? '100%' : `${!ctaInline ? '100%' : `calc(100% / ${slidesPerView + 1})`}`,
+            textAlign: 'center',
+            '& .ss__recommendation-bundle__wrapper__cta__subtotal__prices': {
+                display: 'block',
+            },
+        },
+        '.ss__recommendation-bundle__wrapper__carousel': {
+            boxSizing: 'border-box',
+            width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView - 1})`,
+        },
+        '.ss__recommendation-bundle__wrapper--seed-in-carousel': {
+            '.ss__recommendation-bundle__wrapper__cta': {
+                width: vertical ? '100%' : `calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)})`,
+            },
+            '.ss__recommendation-bundle__wrapper__carousel': {
+                width: vertical ? '100%' : `calc(calc(100% / ${slidesPerView + (!ctaInline ? 0 : 1)}) * ${slidesPerView})`,
+                padding: '0',
+            },
+        },
+        '.swiper-slide, .swiper-slide-visible.swiper-last-visible-slide': {
+            '.ss__recommendation-bundle__wrapper__selector__icon': {
+                display: 'none',
+            },
+        },
+        '.swiper-slide-visible': {
+            '.ss__recommendation-bundle__wrapper__selector__icon': {
+                display: 'block',
+            },
+        },
+        '.ss__recommendation-bundle__wrapper--vertical': {
+            flexDirection: 'column',
+        },
+        '.ss__recommendation-bundle__wrapper__selector': {
+            alignItems: 'baseline',
+            position: 'relative',
+            '&.ss__recommendation-bundle__wrapper__selector--last': {
+                '& .ss__recommendation-bundle__wrapper__selector__icon': {
+                    display: 'none',
+                },
+            },
+            '& .ss__recommendation-bundle__wrapper__selector__result-wrapper__seed-badge': {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                zIndex: '1',
+            },
+            '& .ss__recommendation-bundle__wrapper__selector__icon': {
+                position: 'absolute',
+                right: '-1em',
+                top: '140px',
+            },
+            '& .ss__recommendation-bundle__wrapper__selector__result-wrapper': {
+                alignItems: 'center',
+                position: 'relative',
+                margin: `0px ${5 + (spaceBetween || 0)}px`,
+            },
+            '& .ss__recommendation-bundle__wrapper__selector__result-wrapper__checkbox': {
+                position: 'absolute',
+                top: '0',
+                right: '0',
+                zIndex: '1',
+                cursor: 'pointer',
+            },
+        },
+    }),
+};
+export const RecommendationBundle = observer((properties) => {
+    const globalTheme = useTheme();
+    const defaultCarouselBreakpoints = {
+        0: {
+            slidesPerView: 2,
+            slidesPerGroup: 2,
+            spaceBetween: 10,
+            ctaInline: false,
+        },
+        768: {
+            slidesPerView: 3,
+            slidesPerGroup: 3,
+            spaceBetween: 10,
+        },
+        1200: {
+            slidesPerView: 4,
+            slidesPerGroup: 4,
+            spaceBetween: 10,
+        },
+    };
+    let props = {
+        // default props
+        breakpoints: JSON.parse(JSON.stringify(defaultCarouselBreakpoints)),
+        hideCheckboxes: false,
+        separatorIcon: 'plus-thin',
+        seedText: 'This Product',
+        separatorIconSeedOnly: true,
+        ctaIcon: true,
+        ctaButtonText: 'Add All To Cart',
+        ctaInline: true,
+        // global theme
+        ...globalTheme?.components?.recommendationBundle,
+        ...properties,
+        // props
+        ...properties.theme?.components?.recommendationBundle,
+    };
+    const displaySettings = useDisplaySettings(props.breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
+    const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, ctaButtonText, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
+    const mergedCarouselProps = {
+        enabled: true,
+        loop: false,
+        spaceBetween: 10,
+        ...carousel,
+    };
+    const { seedInCarousel, prevButton, nextButton, hideButtons, loop, spaceBetween, pagination } = mergedCarouselProps;
+    const carouselEnabled = mergedCarouselProps.enabled;
+    if (!controller || controller.type !== 'recommendation') {
+        throw new Error(`<BundleRecommendation> Component requires 'controller' prop with an instance of RecommendationController`);
+    }
+    let resultsToRender = results || controller.store?.results;
+    if (limit) {
+        resultsToRender = resultsToRender.slice(0, limit);
+    }
+    const cartStore = controller.store.cart;
+    if (!cartStore) {
+        throw new Error(`<BundleRecommendation> Component requires 'cartStore' to exist in the recommendation store`);
+    }
+    const seed = results ? results[0] : controller.store?.results[0];
+    const subProps = {
+        carousel: {
+            loop: loop,
+            // default props
+            className: 'ss__recommendation__carousel',
+            // global theme
+            ...globalTheme?.components?.carousel,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+        result: {
+            // default props
+            className: 'ss__recommendation__result',
+            // global theme
+            ...globalTheme?.components?.result,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+        },
+    };
+    let slidesPerView = props.carousel?.slidesPerView || props.slidesPerView;
+    if (!slidesPerView) {
+        slidesPerView = 2;
+    }
+    else if (resultsToRender.length < slidesPerView) {
+        slidesPerView = resultsToRender.length;
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.recommendationBundle({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    const _preSelectedCount = typeof preselectedCount == 'number' ? preselectedCount : carouselEnabled ? slidesPerView : resultsToRender.length;
+    //this resets the selected items if the results to render changes
+    // so you dont end up with something selected that is no longer rendered
+    useEffect(() => {
+        cartStore.reset();
+        if (_preSelectedCount) {
+            resultsToRender?.forEach((result, idx) => {
+                if (idx < _preSelectedCount) {
+                    cartStore.addItems([result]);
+                }
+            });
+        }
+    }, [resultsToRender.length]);
+    const selectedItems = cartStore.items;
+    const modifiedBreakpoints = { ...breakpoints };
+    if (carouselEnabled) {
+        Object.keys(props.breakpoints).forEach((breakpoint) => {
+            const obj = props.breakpoints[breakpoint];
+            // fallback in case slides per view/group were not provided in breakpoint...
+            const objSlidesPerView = obj.carousel?.slidesPerView || obj.slidesPerView || 2;
+            const objSlidesPerGroup = obj.carousel?.slidesPerGroup || obj.slidesPerGroup || 2;
+            let newSlidesPerView = objSlidesPerView;
+            let newSlidesPerGroup = objSlidesPerGroup;
+            const resultCount = seedInCarousel ? resultsToRender.length : resultsToRender.length - 1;
+            if (resultCount) {
+                if (resultCount >= objSlidesPerView) {
+                    newSlidesPerView = objSlidesPerView - (!seedInCarousel ? 1 : 0);
+                    if (!seedInCarousel) {
+                        newSlidesPerGroup = objSlidesPerGroup - 1 || 1;
+                    }
+                }
+                else {
+                    (newSlidesPerView = resultCount), (newSlidesPerGroup = resultCount);
+                }
+            }
+            modifiedBreakpoints[breakpoint] = {
+                ...modifiedBreakpoints[breakpoint],
+                slidesPerView: newSlidesPerView,
+                slidesPerGroup: newSlidesPerGroup,
+            };
+        });
+    }
+    const onProductSelect = (product) => {
+        if (product) {
+            const idx = selectedItems.findIndex((result) => result.id == product.id);
+            //is it in the selected items?
+            if (idx > -1) {
+                //already selected, deselect it now
+                cartStore.removeItems([product]);
+                if (cartStore.items.length == 0) {
+                    //we dont call addItems here to prevent tracking
+                    cartStore.items.push(seed);
+                }
+            }
+            else {
+                //add it to the list;
+                cartStore.addItems([product]);
+            }
+        }
+    };
+    const addToCart = (e) => {
+        // add to cart tracking
+        controller.track.addBundle(e, selectedItems);
+        //call the function passed
+        onAddToCart && onAddToCart(selectedItems);
+    };
+    const setSeedwidth = () => {
+        if (seedRef.current) {
+            // @ts-ignore - todo can this be typed appropriatly?
+            const seedElem = seedRef.current?.base;
+            // @ts-ignore - todo can this be typed appropriatly?
+            const carouselElem = carouselRef.current?.base;
+            const visibleSlide = carouselElem?.querySelector('.swiper-slide-visible .ss__recommendation-bundle__wrapper__selector');
+            const width = visibleSlide?.offsetWidth;
+            if (seedElem) {
+                seedElem.style.width = `${width}px`;
+            }
+        }
+    };
+    const seedRef = useRef();
+    const carouselRef = useRef();
+    return resultsToRender?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) },
+            jsx(RecommendationProfileTracker, { controller: controller },
+                title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
+                    jsx("span", null, title))),
+                jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
+                        'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
+                        'ss__recommendation-bundle__wrapper--vertical': vertical,
+                    }) },
+                    carouselEnabled ? (jsx(Fragment, null,
+                        !seedInCarousel && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
+                            jsx(RecommendationResultTracker, { controller: controller, result: seed },
+                                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, {
+                                    result: seed,
+                                    seed: true,
+                                    selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
+                                    onProductSelect,
+                                })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
+                        jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
+                            jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
+                                ? resultsToRender.map((result, idx) => {
+                                    const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
+                                    if (idx == 0) {
+                                        return (jsx(RecommendationResultTracker, { controller: controller, result: result },
+                                            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 })))));
+                                    }
+                                    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 })))));
+                                    }
+                                })
+                                : 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 })))));
+                                }))))) : (resultsToRender.map((result, idx) => {
+                        const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
+                        if (idx == 0) {
+                            return (jsx(RecommendationResultTracker, { controller: controller, result: result },
+                                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 })))));
+                        }
+                        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 })))));
+                        }
+                    })),
+                    ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: (e) => addToCart(e), addToCartText: ctaButtonText, icon: ctaIcon }))),
+                !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCartClick: (e) => addToCart(e), addToCartText: ctaButtonText, icon: ctaIcon })))))) : (jsx(Fragment, null));
+    return jsx(Fragment, null);
+});

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

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

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

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

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

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

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

@@ -2,9 +2,7 @@
 import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
 import type { SearchResultStore } from '@searchspring/snap-store-mobx';
 import { ComponentProps, LayoutType, BreakpointsProps } from '../../../types';
-export declare const Results: ((properties: ResultsProp) => JSX.Element) & {
-    displayName: string;
-};
+export declare const Results: (properties: ResultsProp) => JSX.Element;
 export interface ResultsProp extends ComponentProps {
     results?: SearchResultStore;
     columns?: number;

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,gBAAyB,WAAW,KAAG,WAAW;;CA4GpE,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;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"}

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Fragment } from 'preact';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import type { RecommendationController } from '@searchspring/snap-controller';
 import { ComponentProps } from '../../../../types';
-export declare const RecommendationProfileTracker: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
-    displayName: string;
-};
+export declare const RecommendationProfileTracker: (properties: RecommendationProfileTrackerProps) => JSX.Element;
 export interface RecommendationProfileTrackerProps extends ComponentProps {
     children: any;
     controller: RecommendationController;

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,gBAAyB,iCAAiC,KAAG,WAAW;;CA+C/G,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":";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"}

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

@@ -2,7 +2,7 @@
 import { Fragment, toChildArray } from 'preact';
 import { jsx, css } from '@emotion/react';
 import { useRef } from 'preact/hooks';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { useTheme } from '../../../../providers';
 import { useIntersection } from '../../../../hooks';
 import classnames from 'classnames';

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

@@ -2,9 +2,7 @@
 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) & {
-    displayName: string;
-};
+export declare const RecommendationResultTracker: (properties: RecommendationResultTrackerProps) => JSX.Element;
 export interface RecommendationResultTrackerProps extends ComponentProps {
     children: any;
     result: Product;

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

@@ -1 +1 @@
-{"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,gBAAyB,gCAAgC,KAAG,WAAW;;CAiD7G,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
+{"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,WAiDlG,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;CACrC"}

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

@@ -1,6 +1,6 @@
 import { jsx, css } from '@emotion/react';
 import { useRef } from 'preact/hooks';
-import { observer } from 'mobx-react-lite';
+import { observer } from 'mobx-react';
 import { useTheme } from '../../../../providers';
 import { useIntersection } from '../../../../hooks';
 import classnames from 'classnames';

package/dist/esm/index.d.ts

@@ -31,6 +31,7 @@ export * from './components/Organisms/Facet';
 export * from './components/Organisms/Facets';
 export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/Recommendation';
+export * from './components/Organisms/RecommendationBundle';
 export * from './components/Organisms/Results';
 export * from './hooks';
 export * from './providers';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,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,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,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,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,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,0BAA0B,CAAC;AACzC,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,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,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,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"}

package/dist/esm/index.js

@@ -34,6 +34,7 @@ export * from './components/Organisms/Facet';
 export * from './components/Organisms/Facets';
 export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/Recommendation';
+export * from './components/Organisms/RecommendationBundle';
 export * from './components/Organisms/Results';
 // HOOKS
 export * from './hooks';

package/dist/esm/setupTests.d.ts

@@ -1 +1,2 @@
+import '@testing-library/jest-dom';
 //# sourceMappingURL=setupTests.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../../src/setupTests.ts"],"names":[],"mappings":""}
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/esm/setupTests.js

@@ -1,2 +1 @@
-"use strict";
-require('@testing-library/jest-dom/extend-expect');
+import '@testing-library/jest-dom';

package/dist/esm/toolbox/createHoverProps/createHoverProps.d.ts

@@ -1,4 +1,4 @@
-export declare const createHoverProps: (callback?: (() => void) | undefined, options?: {
+export declare const createHoverProps: (callback?: () => void, options?: {
     delay?: number;
     focusElem?: boolean;
 }) => {

package/dist/esm/toolbox/createHoverProps/createHoverProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createHoverProps.d.ts","sourceRoot":"","sources":["../../../../src/toolbox/createHoverProps/createHoverProps.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,qBAAqB,IAAI,yBAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE;sBAIpF,gBAAgB,CAAC,WAAW,CAAC;;CAWhD,CAAC"}
+{"version":3,"file":"createHoverProps.d.ts","sourceRoot":"","sources":["../../../../src/toolbox/createHoverProps/createHoverProps.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,cAAe,MAAM,IAAI,YAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE;sBAIpF,gBAAgB,CAAC,WAAW,CAAC;;CAWhD,CAAC"}

package/dist/esm/types.d.ts

@@ -11,7 +11,7 @@ export declare enum Layout {
     GRID = "grid",
     LIST = "list"
 }
-export declare type LayoutType = Layout.GRID | Layout.LIST;
+export type LayoutType = Layout.GRID | Layout.LIST;
 export declare enum FacetType {
     VALUE = "value",
     RANGE = "range",
@@ -24,11 +24,11 @@ export declare enum FacetDisplay {
     SLIDER = "slider",
     HIERARCHY = "hierarchy"
 }
-export declare type BreakpointsProps = {
+export type BreakpointsProps = {
     [key: number]: BreakpointsEntry;
 };
-export declare type BreakpointsEntry = {
+export type BreakpointsEntry = {
     [property: string]: any;
 };
-export declare type StylingCSS = Array<SerializedStyles | string | Record<string, string> | undefined>;
+export type StylingCSS = Array<SerializedStyles | string | Record<string, string> | undefined>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,GAAG,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,oBAAY,MAAM;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACb;AAED,oBAAY,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AAGnD,oBAAY,SAAS;IACpB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,aAAa,kBAAkB;CAC/B;AAGD,oBAAY,YAAY;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,SAAS,cAAc;CACvB;AAED,oBAAY,gBAAgB,GAAG;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAChC,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACxB,CAAC;AAEF,oBAAY,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,GAAG,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,oBAAY,MAAM;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;CACb;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AAGnD,oBAAY,SAAS;IACpB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,aAAa,kBAAkB;CAC/B;AAGD,oBAAY,YAAY;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC"}

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

@@ -1,4 +1,4 @@
-declare type DefinedProps = {
+type DefinedProps = {
     [key: string]: any;
 };
 export declare function defined(properties: Record<string, any>): DefinedProps;

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

@@ -1 +1 @@
-{"version":3,"file":"defined.d.ts","sourceRoot":"","sources":["../../../src/utilities/defined.ts"],"names":[],"mappings":"AAAA,aAAK,YAAY,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,YAAY,CAUrE"}
+{"version":3,"file":"defined.d.ts","sourceRoot":"","sources":["../../../src/utilities/defined.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,YAAY,CAUrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.51.1",
+	"version": "0.52.0",
 	"description": "Snap Preact Component Library",
 	"author": "Searchspring",
 	"license": "MIT",
@@ -21,31 +21,44 @@
 		"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
 		"lint": "eslint 'src/components/**/*.{js,jsx,ts,tsx}'",
 		"storybook": "start-storybook -p 6006",
+		"cypress": "cypress open --project tests",
 		"test": "jest",
 		"test:watch": "jest --watch"
 	},
 	"dependencies": {
+		"@cypress/react": "^8.0.0",
 		"@emotion/react": "11.9.0",
-		"@searchspring/snap-toolbox": "^0.51.1",
+		"@searchspring/snap-toolbox": "^0.52.0",
 		"classnames": "^2.3.2",
+		"cypress": "^12.15.0",
+		"cypress-wait-until": "^1.7.2",
 		"deepmerge": "4.3.1",
 		"dequal": "2.0.3",
-		"mobx-react-lite": "3.4.0",
+		"mobx-react": "7.6.0",
 		"react-ranger": "2.1.0",
-		"swiper": "6.8.4"
+		"swiper": "11.0.7"
 	},
 	"peerDependencies": {
+		"mobx": "6.9.0",
 		"preact": "10.9.0"
 	},
 	"devDependencies": {
-		"@searchspring/snap-client": "^0.51.1",
-		"@searchspring/snap-controller": "^0.51.1",
-		"@searchspring/snap-event-manager": "^0.51.1",
-		"@searchspring/snap-logger": "^0.51.1",
-		"@searchspring/snap-profiler": "^0.51.1",
-		"@searchspring/snap-store-mobx": "^0.51.1",
-		"@searchspring/snap-tracker": "^0.51.1",
-		"@searchspring/snap-url-manager": "^0.51.1",
+		"@babel/core": "^7.21.4",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/plugin-proposal-decorators": "^7.21.0",
+		"@babel/plugin-transform-react-jsx": "^7.21.0",
+		"@babel/plugin-transform-runtime": "^7.21.4",
+		"@babel/preset-env": "^7.21.4",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/runtime": "^7.21.0",
+		"@searchspring/snap-client": "^0.52.0",
+		"@searchspring/snap-controller": "^0.52.0",
+		"@searchspring/snap-event-manager": "^0.52.0",
+		"@searchspring/snap-logger": "^0.52.0",
+		"@searchspring/snap-profiler": "^0.52.0",
+		"@searchspring/snap-store-mobx": "^0.52.0",
+		"@searchspring/snap-tracker": "^0.52.0",
+		"@searchspring/snap-url-manager": "^0.52.0",
 		"@storybook/addon-actions": "6.4.22",
 		"@storybook/addon-controls": "6.4.22",
 		"@storybook/addon-docs": "6.4.22",
@@ -55,17 +68,19 @@
 		"@storybook/manager-webpack5": "6.4.22",
 		"@storybook/preact": "6.4.22",
 		"@storybook/theming": "6.4.22",
-		"@testing-library/jest-dom": "5.16.4",
-		"@testing-library/preact": "2.0.1",
+		"@testing-library/preact": "3.2.3",
 		"@testing-library/user-event": "13.5.0",
 		"@types/react": "16.14.28",
 		"@types/react-ranger": "2.0.1",
-		"mobx-react": "7.5.0",
+		"babel-jest": "^29.7.0",
 		"preact": "10.9.0",
 		"react": "16.14.0",
 		"react-dom": "16.14.0",
-		"ts-loader": "9.3.0"
+		"ts-loader": "9.4.2",
+		"webpack": "^5.77.0",
+		"webpack-cli": "^5.0.1",
+		"webpack-merge": "^5.8.0"
 	},
 	"sideEffects": false,
-	"gitHead": "b29a0939e6d456f90402b24aa6555ec243003a3a"
+	"gitHead": "d2428041a3abcf856d29bc2210fea32684f23f79"
 }