@searchspring/snap-preact-components 0.39.3 → 0.41.0

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

@@ -33,7 +33,7 @@ const CSS = {
         '&.ss__autocomplete--only-terms': {
             width: `${vertical || horizontalTerms || contentSlotExists ? width : '150px'}`,
         },
-        '.ss__autocomplete__title--trending': {
+        '.ss__autocomplete__title--trending, .ss__autocomplete__title--history, .ss__autocomplete__title--terms': {
             fontWeight: 'normal',
             margin: 0,
             color: '#c5c5c5',
@@ -48,6 +48,8 @@ const CSS = {
             order: vertical ? 2 : undefined,
         },
         '& .ss__autocomplete__terms': {
+            display: 'flex',
+            flexDirection: 'column',
             flex: `1 1 auto`,
             maxWidth: `${vertical || horizontalTerms ? 'auto' : '150px'}`,
             order: 1,
@@ -136,6 +138,7 @@ export const Autocomplete = observer((properties) => {
         // default props
         termsTitle: '',
         trendingTitle: 'Popular Searches',
+        historyTitle: 'Previously Searched',
         facetsTitle: '',
         contentTitle: '',
         width: '100%',
@@ -152,11 +155,15 @@ export const Autocomplete = observer((properties) => {
             rows: 1,
             hideFacets: props.hideFacets || true,
             vertical: props.vertical || true,
+            hideHistory: props.hideHistory || true,
+            hideTrending: props.hideTrending || true,
         },
         540: {
             columns: 3,
             rows: 1,
             vertical: props.vertical || true,
+            hideHistory: props.hideHistory || true,
+            hideTrending: props.hideTrending || true,
         },
         768: {
             columns: 2,
@@ -176,6 +183,16 @@ export const Autocomplete = observer((properties) => {
             clearTimeout(delayTimeout);
         },
     };
+    const facetClickEvent = (e) => {
+        properties.onFacetOptionClick && properties.onFacetOptionClick(e);
+        // remove focus from input (close the autocomplete)
+        controller?.setFocused && controller?.setFocused();
+    };
+    const termClickEvent = (e) => {
+        properties.onTermClick && properties.onTermClick(e);
+        // remove focus from input (close the autocomplete)
+        controller?.setFocused && controller?.setFocused();
+    };
     const themeOverride = {
         components: {
             facet: {
@@ -187,21 +204,21 @@ export const Autocomplete = observer((properties) => {
             },
             facetGridOptions: {
                 columns: 3,
-                onClick: properties.onFacetOptionClick,
+                onClick: facetClickEvent,
             },
             facetHierarchyOptions: {
                 hideCount: true,
-                onClick: properties.onFacetOptionClick,
+                onClick: facetClickEvent,
             },
             facetListOptions: {
                 hideCheckbox: true,
                 hideCount: true,
-                onClick: properties.onFacetOptionClick,
+                onClick: facetClickEvent,
             },
             facetPaletteOptions: {
                 hideLabel: true,
                 columns: 3,
-                onClick: properties.onFacetOptionClick,
+                onClick: facetClickEvent,
             },
             result: {
                 hideBadge: true,
@@ -224,7 +241,7 @@ export const Autocomplete = observer((properties) => {
         const rect = input?.getBoundingClientRect();
         inputViewportOffsetBottom = rect?.bottom || 0;
     }
-    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onTermClick, disableStyles, className, width, style, controller, } = props;
+    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, hideHistory, hideTrending, retainTrending, retainHistory, horizontalTerms, vertical, termsTitle, trendingTitle, historyTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onTermClick, disableStyles, className, width, style, controller, } = props;
     const subProps = {
         facets: {
             // default props
@@ -278,6 +295,7 @@ export const Autocomplete = observer((properties) => {
         },
     };
     const { search, terms, trending, results, merchandising, pagination, loaded, filters, facets, state } = controller.store;
+    const history = controller.store.history || [];
     // you can pass in a selector or the actual input element,
     // if its the selector, we need to bind it to the controller here.
     if (controller && typeof input == 'string') {
@@ -287,17 +305,33 @@ export const Autocomplete = observer((properties) => {
             controller.bind();
         }, []);
     }
-    const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0 || (state.input && controller.store.loaded));
+    const visible = Boolean(input === state.focusedInput) &&
+        (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
     let showTrending = false;
-    if (!results.length && !state.input && trending?.length) {
+    if (trending?.length && (retainTrending || (!results.length && !state.input))) {
         showTrending = true;
     }
     else if (trending?.length && !terms.length) {
         // has results and trending -> show trending terms while term load
         showTrending = true;
     }
+    let showHistory = false;
+    if (history?.length && (retainHistory || (!results.length && !state.input))) {
+        showHistory = true;
+    }
+    else if (history?.length && !terms.length) {
+        // has results and trending -> show trending terms while term load
+        showHistory = true;
+    }
     const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
-    const onlyTerms = trending?.length && !loaded;
+    const onlyTerms = (trending?.length || history.length) && !loaded;
+    // results logic
+    let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
+    const trendingActive = trending?.filter((term) => term.active).pop();
+    const historyActive = history?.filter((term) => term.active).pop();
+    if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
+        showResults = false;
+    }
     const styling = {};
     if (!disableStyles) {
         styling.css = [
@@ -320,21 +354,40 @@ export const Autocomplete = observer((properties) => {
     }
     return visible ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: (e) => e.stopPropagation() },
-            !hideTerms && (showTrending || terms.length > 0 || termsSlot) && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, onTermClick, controller })) : (jsx(Fragment, null,
-                terms.length > 0 ? (jsx(Fragment, null,
-                    termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
+            !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, {
+                terms,
+                trending,
+                termsTitle,
+                trendingTitle,
+                showTrending,
+                history,
+                historyTitle,
+                valueProps,
+                emIfy,
+                onTermClick,
+                controller,
+            })) : (jsx(Fragment, null,
+                terms.length > 0 ? (jsx("div", { className: "ss__autocomplete__terms__suggestions" },
+                    termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
                         jsx("h5", null, termsTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
-                showTrending ? (jsx(Fragment, null,
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
+                showTrending && !hideTrending ? (jsx("div", { className: "ss__autocomplete__terms__trending" },
                     trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         jsx("h5", null, trendingTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
+                showHistory && !hideHistory ? (jsx("div", { className: "ss__autocomplete__terms__history" },
+                    historyTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
+                        jsx("h5", null, historyTitle))) : null,
+                    jsx("div", { className: "ss__autocomplete__terms__options" }, history.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
+                            'ss__autocomplete__terms__option--active': term.active,
+                        }) },
+                        jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
             !hideFacets &&
                 (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
                     facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
@@ -344,7 +397,7 @@ export const Autocomplete = observer((properties) => {
                             jsx("h5", null, facetsTitle))) : null,
                         jsx(Facets, { ...subProps.facets, facets: facetsToShow }),
                         !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.LEFT }) : null))))),
-            !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneWithProps(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string ? (jsx("div", { className: "ss__autocomplete__content" },
+            !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneWithProps(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : showResults ? (jsx("div", { className: "ss__autocomplete__content" },
                 jsx(Fragment, null,
                     !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.HEADER }) : null,
                     !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.BANNER }) : null,
@@ -359,7 +412,7 @@ export const Autocomplete = observer((properties) => {
                         jsx("p", null, "Please try another search."))))),
                     !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.FOOTER }) : null,
                     !hideLink ? (linkSlot ? (cloneWithProps(linkSlot, { search, results, pagination, filters, controller })) : search?.query?.string && results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__info" },
-                        jsx("a", { href: state.url.href },
+                        jsx("a", { href: state.url.href, onClick: () => controller?.setFocused && controller.setFocused() },
                             "See ",
                             pagination.totalResults,
                             " ",
@@ -372,14 +425,16 @@ export const Autocomplete = observer((properties) => {
                             jsx(Icon, { ...subProps.icon })))) : null) : null))) : null) : null))) : (jsx(Fragment, null));
 });
 const emIfy = (term, search) => {
-    const match = term.match(escapeRegExp(search));
-    if (search && term && match && match.index) {
-        const beforeMatch = term.slice(0, match.index);
-        const afterMatch = term.slice(match.index + search.length, term.length);
-        return (jsx(Fragment, null,
-            beforeMatch ? jsx("em", null, beforeMatch) : '',
-            search,
-            afterMatch ? jsx("em", null, afterMatch) : ''));
+    if (term && search) {
+        const match = term.match(escapeRegExp(search));
+        if (search && term && match && match.index) {
+            const beforeMatch = term.slice(0, match.index);
+            const afterMatch = term.slice(match.index + search.length, term.length);
+            return (jsx(Fragment, null,
+                beforeMatch ? jsx("em", null, beforeMatch) : '',
+                search,
+                afterMatch ? jsx("em", null, afterMatch) : ''));
+        }
     }
     return (jsx(Fragment, null,
         jsx("em", null, term)));

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts

@@ -123,6 +123,66 @@ declare const _default: {
                 type: string;
             };
         };
+        hideHistory: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideTrending: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        retainHistory: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        retainTrending: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         hideFacets: {
             defaultValue: boolean;
             description: string;
@@ -243,6 +303,21 @@ declare const _default: {
                 type: string;
             };
         };
+        historyTitle: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         facetsTitle: {
             defaultValue: string;
             description: string;

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgBlE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwRE;AAeF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAM1H,CAAC"}
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgBlE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA+UE;AAeF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAM1H,CAAC"}

package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js

@@ -61,7 +61,51 @@ export default {
         },
         hideTerms: {
             defaultValue: false,
-            description: 'prevent terms from rendering (also applicable to trending terms)',
+            description: 'prevent all terms from rendering (also applicable to trending and history terms)',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideHistory: {
+            defaultValue: false,
+            description: 'prevent historical terms and results from rendering',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideTrending: {
+            defaultValue: false,
+            description: 'prevent trending terms and results from rendering',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        retainHistory: {
+            defaultValue: false,
+            description: 'allow history terms to render even when there is a query in the input',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        retainTrending: {
+            defaultValue: false,
+            description: 'allow trending terms to render even when there is a query in the input',
             table: {
                 type: {
                     summary: 'boolean',
@@ -158,6 +202,17 @@ export default {
             },
             control: { type: 'text' },
         },
+        historyTitle: {
+            defaultValue: 'Previously Searched',
+            description: 'Change historical terms header title',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Previously Searched' },
+            },
+            control: { type: 'text' },
+        },
         facetsTitle: {
             defaultValue: '',
             description: 'Change facets header title',

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

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAc9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAyKnF,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,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"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,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CA+HnF,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,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { Fragment } from 'preact';
-import { useState, useRef } from 'preact/hooks';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -9,8 +8,9 @@ import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoint
 import { Result } from '../../Molecules/Result';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
-import { useIntersection } from '../../../hooks';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
+import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
 const CSS = {
     recommendation: ({ vertical }) => css({
         height: vertical ? '100%' : undefined,
@@ -79,31 +79,6 @@ export const Recommendation = observer((properties) => {
             theme: props?.theme,
         },
     };
-    const rootComponentRef = useRef(null);
-    const [initialIndexes, setInitialIndexes] = useState([0, 0]);
-    const inViewport = useIntersection(rootComponentRef, '0px', true);
-    const sendProductImpression = (index, count) => {
-        if (!inViewport)
-            return;
-        let resultLoopCount = [index, index + count];
-        let resultLoopOverCount;
-        if (index + count > resultsToRender.length - 1) {
-            resultLoopCount = [index];
-            resultLoopOverCount = [0, index + count - resultsToRender.length];
-        }
-        let resultsImpressions = resultsToRender.slice(...resultLoopCount);
-        if (resultLoopOverCount) {
-            resultsImpressions = resultsImpressions.concat(resultsToRender.slice(...resultLoopOverCount));
-        }
-        resultsImpressions.map((result) => {
-            controller.track.product.impression(result);
-        });
-    };
-    if (inViewport) {
-        controller.track.impression();
-        sendProductImpression(initialIndexes[0], initialIndexes[1]);
-    }
-    (children || resultsToRender.length) && controller?.track?.render();
     const styling = {};
     if (!disableStyles) {
         styling.css = [CSS.recommendation({ vertical }), style];
@@ -112,24 +87,11 @@ export const Recommendation = observer((properties) => {
         styling.css = [style];
     }
     return children || resultsToRender?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__recommendation', className) },
-            title && jsx("h3", { className: "ss__recommendation__title" }, title),
-            jsx(Carousel, { onInit: (swiper) => {
-                    //@ts-ignore
-                    setInitialIndexes([swiper.realIndex, swiper.passedParams.slidesPerView]);
-                }, onBreakpoint: (swiper) => {
-                    //@ts-ignore
-                    sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
-                }, onSlideChange: (swiper) => {
-                    //@ts-ignore
-                    sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
-                }, prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, onNextButtonClick: (e) => controller.track.click(e), onPrevButtonClick: (e) => controller.track.click(e), onClick: (swiper, e) => {
-                    const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
-                    controller.track.click(e);
-                    if (!Number.isNaN(clickedIndex)) {
-                        controller.track.product.click(e, resultsToRender[clickedIndex]);
-                    }
-                }, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
-                ? children.map((child) => child)
-                : resultsToRender.map((result) => jsx(Result, { ...subProps.result, controller: controller, result: result })))))) : (jsx(Fragment, null));
+        jsx("div", { ...styling, className: classnames('ss__recommendation', className) },
+            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 },
+                        jsx(Result, { ...subProps.result, controller: controller, result: result }))))))))) : (jsx(Fragment, null));
 });

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

@@ -0,0 +1,10 @@
+import type { RecommendationController } from '@searchspring/snap-controller';
+import { ComponentProps } from '../../../../types';
+export declare const RecommendationProfileTracker: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface RecommendationProfileTrackerProps extends ComponentProps {
+    children: any;
+    controller: RecommendationController;
+}
+//# sourceMappingURL=RecommendationProfileTracker.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { Fragment, toChildArray } from 'preact';
+import { jsx, css } from '@emotion/react';
+import { useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { useTheme } from '../../../../providers';
+import { useIntersection } from '../../../../hooks';
+import classnames from 'classnames';
+const CSS = {
+    RecommendationProfileTracker: () => css({}),
+};
+export const RecommendationProfileTracker = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.RecommendationProfileTracker,
+        // props
+        ...properties,
+        ...properties.theme?.components?.RecommendationProfileTracker,
+    };
+    const { children, controller, 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];
+    }
+    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));
+});

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

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { RecommendationProfileTrackerProps } from './RecommendationProfileTracker';
+import type { RecommendationController } from '@searchspring/snap-controller';
+declare const _default: {
+    title: string;
+    component: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        controller: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (props: RecommendationProfileTrackerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: RecommendationController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: RecommendationController;
+    }>)[];
+};
+//# sourceMappingURL=RecommendationProfileTracker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationProfileTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAgC,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AAIjH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI9E,wBA2BE;AAIF,eAAO,MAAM,OAAO;YACZ,iCAAiC;;wBACY,wBAAwB;;;;;;CAY5E,CAAC"}