@athoscommerce/snap-preact 1.10.1-beta.150 → 1.12.0

package/dist/esm/components/src/components/Templates/QuickviewSlideout/QuickviewSlideout.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Slideout } from '../../Molecules/Slideout';
+import { QuickviewLayout, QuickviewTracker, } from '../../Organisms/QuickviewLayout';
+const defaultStyles = () => {
+    return css({
+        // The wrapper sits out of flow; the Slideout itself is `position: fixed`. Keep its panel
+        // and overlay above autocomplete (10002) like the Modal variant does.
+        '& .ss__slideout': {
+            zIndex: 10006,
+        },
+        '& .ss__slideout__overlay': {
+            zIndex: '10005 !important',
+        },
+        // Inside a single-column panel the content shouldn't be width-capped to the desktop modal size.
+        '& .ss__quickview__content': {
+            minWidth: 'auto',
+            maxWidth: '100%',
+        },
+    });
+};
+export const QuickviewSlideout = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        slideDirection: 'right',
+        width: '500px',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        hideBadge: false,
+        layout: [
+            ['slideshow'],
+            ['productDetail.mappings.core.name'],
+            ['calloutBadge'],
+            ['variantSelections'],
+            ['quantityPicker'],
+            ['button.add-to-cart'],
+            ['productDetail.mappings.core.description'],
+            ['productDetailTable'],
+            ['button.more-info'],
+        ],
+    };
+    const props = mergeProps('quickviewSlideout', globalTheme, defaultProps, properties);
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, layout, hideBadge, column1, column2, column3, column4, recommendation, slideDirection, width, overlayColor, lang, } = props;
+    // painted state used to ensure transition works with dynamic loading
+    const [painted, setPainted] = useState(false);
+    useEffect(() => {
+        setPainted(true);
+    }, []);
+    // Dialog focus management — see QuickviewModal for the rationale (effect lives in the
+    // always-mounted container so the restore-focus branch survives the open→close transition).
+    const wrapperRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        const isOpenNow = Boolean(quickviewManager?.store?.isOpen) && painted;
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = wrapperRef.current?.querySelector('.ss__quickview__close');
+            closeEl?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    if (!quickviewManager) {
+        console.warn(`[QuickviewSlideout] No quickviewManager provided; quickview cannot function without a QuickviewManager instance.`);
+        return null;
+    }
+    const store = quickviewManager.store;
+    const product = store.product;
+    const isOpen = Boolean(store.isOpen) && painted;
+    const onClose = () => quickviewManager.close();
+    const subProps = {
+        quickviewLayout: {
+            // default props
+            onClose,
+            ...defined({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        slideout: {
+            // default props
+            rerender: false,
+            slideDirection: slideDirection,
+            width: width,
+            overlayColor: overlayColor,
+            // Sync an overlay dismiss back to the store so `store.isOpen` stays the single source of truth.
+            onChange: (active) => {
+                if (!active)
+                    onClose();
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = _jsx(QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: wrapperRef, className: classnames('ss__quickview-slideout', className, internalClassName), onClick: (e) => e.stopPropagation(), children: _jsx(Slideout, { ...subProps.slideout, active: isOpen, children: product ? (_jsx(QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.d.ts

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

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/QuickviewSlideout/index.js

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

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAa/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAwNrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,IAAI,CAAC,iCAAiC,EAAE,iBAAiB,CAAC,GAC7D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAc/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA6NrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,IAAI,CAAC,iCAAiC,EAAE,iBAAiB,CAAC,GAC7D,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.js

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
 import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
 import { Result } from '../../Molecules/Result';
-import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { cloneWithProps, defined, lazyRenderMinSize, mergeProps, mergeStyles } from '../../../utilities';
 import { useIntersection, useComponent } from '../../../hooks';
 import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
@@ -15,6 +15,7 @@ import { useLang } from '../../../hooks';
 import { ResultTracker } from '../../Trackers/ResultTracker';
 const defaultStyles = ({ vertical }) => {
     return css({
+        ...lazyRenderMinSize,
         height: vertical ? '100%' : undefined,
         '.ss__result__image-wrapper': {
             height: vertical ? '85%' : undefined,
@@ -115,7 +116,7 @@ export const Recommendation = observer((properties) => {
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
     const mergedLang = useLang(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    return (Array.isArray(children) && children.length) || resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && (_jsx("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && _jsx("p", { className: "ss__recommendation__description", children: description }), _jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
+    return (Array.isArray(children) && children.length) || resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, style: disableStyles ? lazyRenderMinSize : undefined, className: classnames('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && (_jsx("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && _jsx("p", { className: "ss__recommendation__description", children: description }), _jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
                             ? children.map((child, idx) => (_jsx(ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })))
                             : resultsToRender.map((result) => (_jsx(ResultTracker, { controller: controller, result: result, children: (() => {
                                     if (resolvedResultComponent && controller) {

package/dist/esm/components/src/components/Templates/RecommendationBundle/RecommendationBundle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/src/components/Templates/RecommendationBundle/RecommendationBundle.js

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
 import { Carousel } from '../../Molecules/Carousel';
 import { Result } from '../../Molecules/Result';
-import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { cloneWithProps, defined, lazyRenderMinSize, mergeProps, mergeStyles } from '../../../utilities';
 import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
@@ -22,6 +22,7 @@ const defaultStyles = ({ vertical, separatorIcon, carousel, ctaInline, hasSeed,
     }
     const slidesPerView = carousel?.slidesPerView;
     return css({
+        ...lazyRenderMinSize,
         [`.${classNamePrefix}__wrapper`]: {
             display: 'flex',
             maxWidth: '100%',
@@ -428,7 +429,7 @@ export const RecommendationBundle = observer((properties) => {
     if (hideSeedText) {
         delete lang.seedText.value;
     }
-    return resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: recsRef, className: classnames(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && (_jsx("h3", { className: `${classNamePrefix}__title`, children: _jsx("span", { children: title }) })), description && (_jsx("p", { className: "ss__recommendation-bundle__description", children: _jsx("span", { children: description }) })), _jsxs("div", { className: classnames(`${classNamePrefix}__wrapper`, {
+    return resultsToRender?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, style: disableStyles ? lazyRenderMinSize : undefined, ref: recsRef, className: classnames(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && (_jsx("h3", { className: `${classNamePrefix}__title`, children: _jsx("span", { children: title }) })), description && (_jsx("p", { className: "ss__recommendation-bundle__description", children: _jsx("span", { children: description }) })), _jsxs("div", { className: classnames(`${classNamePrefix}__wrapper`, {
                             [`${classNamePrefix}__wrapper--seed-in-carousel`]: seedInCarousel,
                             [`${classNamePrefix}__wrapper--vertical`]: vertical,
                         }), children: [carouselEnabled ? (_jsxs(_Fragment, { children: [!seedInCarousel && !hideSeed && seed && (_jsx("div", { className: `${classNamePrefix}__wrapper__seed-container`, children: _jsx(ResultTracker, { controller: controller, result: seed, track: { impression: false }, children: _jsx(BundleSelector, { seedText: seedText, seed: true, title: seed.display.mappings.core?.name, onCheck: (e) => {

package/dist/esm/components/src/components/Templates/RecommendationGrid/RecommendationGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationGrid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA8B7F,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAsJ7E,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACrC,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,GACjE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}
+{"version":3,"file":"RecommendationGrid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA+B7F,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CA2J7E,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACrC,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,GACjE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}

package/dist/esm/components/src/components/Templates/RecommendationGrid/RecommendationGrid.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';
 import { Result } from '../../Molecules/Result';
-import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { cloneWithProps, defined, lazyRenderMinSize, mergeProps, mergeStyles } from '../../../utilities';
 import { useTheme, CacheProvider, useTreePath, useSnap } from '../../../providers';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
@@ -14,6 +14,7 @@ import { useRef } from 'preact/hooks';
 import { useIntersection, useComponent } from '../../../hooks';
 const defaultStyles = ({ gapSize, columns }) => {
     return css({
+        ...lazyRenderMinSize,
         maxWidth: '100%',
         maxHeight: '100%',
         '.ss__recommendation-grid__results': {
@@ -108,7 +109,7 @@ export const RecommendationGrid = observer((properties) => {
     if (inView) {
         setIsVisible(true);
     }
-    return results?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: recsRef, className: classnames('ss__recommendation-grid', className, internalClassName), children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && _jsx("h3", { className: "ss__recommendation-grid__title", children: title }), _jsx("div", { className: "ss__recommendation-grid__results", children: results.map((result) => (() => {
+    return results?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, style: disableStyles ? lazyRenderMinSize : undefined, ref: recsRef, className: classnames('ss__recommendation-grid', className, internalClassName), children: isVisible ? (_jsxs(RecommendationProfileTracker, { controller: controller, children: [title && _jsx("h3", { className: "ss__recommendation-grid__title", children: title }), _jsx("div", { className: "ss__recommendation-grid__results", children: results.map((result) => (() => {
                             if (resolvedResultComponent && controller) {
                                 return cloneWithProps(resolvedResultComponent, {
                                     controller,

package/dist/esm/components/src/components/Templates/Search/Search.d.ts

@@ -1,4 +1,5 @@
 import type { SearchController } from '@athoscommerce/snap-controller';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 import { ComponentProps, JSXComponent, LayoutSelectorOptions } from '../../../types';
 import { Lang } from '../../../hooks';
 import { SearchFilterStore } from '@athoscommerce/snap-store-mobx';
@@ -10,6 +11,7 @@ export type SearchProps = {
     lang?: Partial<SearchLang>;
     alias?: 'searchCollapsible' | 'searchHorizontal';
     resultComponent?: JSXComponent | JSX.Element;
+    tabManager?: TabManagerStore;
 } & Omit<SearchTemplatesLegalProps, 'resultComponent'> & Omit<ComponentProps, 'customComponent'>;
 export type SearchTemplatesLegalProps = {
     resultComponent?: string;

package/dist/esm/components/src/components/Templates/Search/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKlG,OAAO,EAAE,IAAI,EAA0B,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAiDnE,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAyPrD,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;IACjD,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,yBAAyB,EAAE,iBAAiB,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,OAAO,EAAE,iBAAiB,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1F"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAG3F,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKlG,OAAO,EAAE,IAAI,EAA0B,MAAM,gBAAgB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAiDnE,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiQrD,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;IACjD,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,IAAI,CAAC,yBAAyB,EAAE,iBAAiB,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,OAAO,EAAE,iBAAiB,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1F"}

package/dist/esm/components/src/components/Templates/Search/Search.js

@@ -63,13 +63,17 @@ export const Search = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps(properties.alias || 'search', globalTheme, defaultProps, properties);
-    const { disableStyles, className, internalClassName, controller, hideSidebar, toggleSidebarButtonText, hideTopToolbar, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    const { disableStyles, className, internalClassName, hideSidebar, toggleSidebarButtonText, hideTopToolbar, tabManager, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    let controller = props.controller;
     let classNamePrefix = 'ss__search';
     if (props.alias) {
         classNamePrefix = `ss__${componentNameToClassName(props.alias)}`;
     }
     // handle selected layoutOptions - must always call to preserve hook order
     useLayoutOptions(props, globalTheme);
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+    }
     const store = controller.store;
     const isMobile = useMediaQuery(mobileDisplayAt ? (typeof mobileDisplayAt == 'boolean' ? `(min-width: 0px)` : `(max-width: ${mobileDisplayAt})`) : `(max-width: 0px)`);
     const [sidebarOpenState, setSidebarOpenState] = useState(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed && !isMobile));
@@ -130,6 +134,7 @@ export const Search = observer((properties) => {
             internalClassName: `${classNamePrefix}__header-section__toolbar--top-toolbar`,
             layout: [['banner.header'], ['searchHeader', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             ...defined({
                 disableStyles,
             }),
@@ -141,9 +146,10 @@ export const Search = observer((properties) => {
             name: 'middle',
             internalClassName: `${classNamePrefix}__content__toolbar--middle-toolbar`,
             layout: isMobile
-                ? [['paginationInfo', '_'], ['button.sidebar-toggle', '_', 'sortBy'], ['banner.banner']]
-                : [['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
+                ? [['tabSelection'], ['paginationInfo', '_'], ['button.sidebar-toggle', '_', 'sortBy'], ['banner.banner']]
+                : [['tabSelection'], ['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             // inherited props
             ...defined({
                 disableStyles,
@@ -157,6 +163,7 @@ export const Search = observer((properties) => {
             internalClassName: `${classNamePrefix}__content__toolbar--bottom-toolbar`,
             layout: [['banner.footer'], ['_', 'pagination', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             // inherited props
             ...defined({
                 disableStyles,

package/dist/esm/components/src/hooks/useA11y.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useA11y.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useA11y.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,kBAAkB,yOACkM,CAAC;AAElO,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,QA4D3G"}
+{"version":3,"file":"useA11y.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useA11y.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,kBAAkB,yOACkM,CAAC;AAElO,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,QA8D3G"}

package/dist/esm/components/src/hooks/useA11y.js

@@ -17,7 +17,9 @@ export function useA11y(elem, tabIndex, trapFocus, escCallback) {
         //tab index 0 is default and used for actionable elements.
         elem.setAttribute('tabIndex', `${tabIndex || 0}`);
         elem.addEventListener('keydown', (event) => {
-            if (event.code === 'Space' || event.code === 'Enter') {
+            // only synthesize a click when the element itself is focused — a bubbled Enter/Space from
+            // an inner control must not click the container (e.g. Gallery's backdrop-close onClick)
+            if ((event.code === 'Space' || event.code === 'Enter') && event.target === elem) {
                 elem.click();
             }
         });

package/dist/esm/components/src/hooks/useAcRenderedInput.d.ts

@@ -1,8 +1,8 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { MutableRef } from 'preact/hooks';
-export declare function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }: {
+export declare function useAcRenderedInput({ input, controllers, renderInput, buttonSelector, renderedInputRef, setActive, }: {
     input: Element;
-    controller: AutocompleteController;
+    controllers: AutocompleteController[];
     renderedInputRef: MutableRef<HTMLInputElement | null>;
     renderInput: boolean;
     buttonSelector?: string | Element;

package/dist/esm/components/src/hooks/useAcRenderedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAcRenderedInput.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useAcRenderedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAY,UAAU,EAAa,MAAM,cAAc,CAAC;AAE/D,wBAAgB,kBAAkB,CAAC,EAClC,KAAK,EACL,UAAU,EACV,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,GACT,EAAE;IACF,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,sBAAsB,CAAC;IACnC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,kBAkHA"}
+{"version":3,"file":"useAcRenderedInput.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useAcRenderedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAY,UAAU,EAAqB,MAAM,cAAc,CAAC;AAIvE,wBAAgB,kBAAkB,CAAC,EAClC,KAAK,EACL,WAAW,EACX,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,GACT,EAAE;IACF,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,kBA4HA"}

package/dist/esm/components/src/hooks/useAcRenderedInput.js

@@ -1,7 +1,19 @@
-import { useState, useEffect } from 'preact/hooks';
-export function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }) {
+import { useState, useEffect, useRef } from 'preact/hooks';
+const RENDERED_INPUT_SELECTOR = '.ss__autocomplete__search-input input';
+export function useAcRenderedInput({ input, controllers, renderInput, buttonSelector, renderedInputRef, setActive, }) {
     const [_input, setInput] = useState(input);
     const [renderedInputInitialized, setRenderedInputInitialized] = useState(false);
+    const boundController = useRef(null);
+    // adds the rendered input to the controller's selector (once) and binds it
+    const bindRenderedInput = async (cntrlrs) => {
+        for (const cntrlr of cntrlrs) {
+            if (!cntrlr.config.selector.includes(RENDERED_INPUT_SELECTOR)) {
+                cntrlr.config.selector = `${cntrlr.config.selector}, ${RENDERED_INPUT_SELECTOR}`;
+            }
+            boundController.current = cntrlr;
+            await cntrlr.bind();
+        }
+    };
     const onClick = () => {
         if (setActive) {
             setActive(true);
@@ -10,8 +22,7 @@ export function useAcRenderedInput({ input, controller, renderInput, buttonSelec
         setTimeout(async () => {
             if (!renderedInputInitialized) {
                 setInput(renderedInputRef.current);
-                controller.config.selector = `${controller.config.selector}, .autocomplete__search-input input`;
-                await controller.bind();
+                await bindRenderedInput(controllers);
                 renderedInputRef?.current?.focus();
             }
             setRenderedInputInitialized(true);

package/dist/esm/components/src/hooks/useClickOutside.d.ts

@@ -1,3 +1,3 @@
 import { MutableRef } from 'preact/hooks';
-export declare function useClickOutside(callback: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void): MutableRef<HTMLElement | undefined>;
+export declare function useClickOutside(callback: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void, capture?: boolean): MutableRef<HTMLElement | undefined>;
 //# sourceMappingURL=useClickOutside.d.ts.map

package/dist/esm/components/src/hooks/useClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE7D,wBAAgB,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,GAAG,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAoBxI"}
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE7D,wBAAgB,eAAe,CAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,EACnE,OAAO,UAAQ,GACb,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAuBrC"}

package/dist/esm/components/src/hooks/useClickOutside.js

@@ -1,13 +1,16 @@
 import { useRef, useEffect } from 'preact/hooks';
-export function useClickOutside(callback) {
+export function useClickOutside(callback, capture = false) {
     const callbackRef = useRef();
     const innerRef = useRef();
     useEffect(() => {
         callbackRef.current = callback;
     });
     useEffect(() => {
-        document.addEventListener('click', handleClick);
-        return () => document.removeEventListener('click', handleClick);
+        // capture phase (opt-in) sees the outside click even when an element between the target and
+        // document stops propagation (e.g. the quickview wrapper shielding autocomplete's document handler).
+        // Default stays bubble phase so inner/portaled content can keep a container open via stopPropagation().
+        document.addEventListener('click', handleClick, capture);
+        return () => document.removeEventListener('click', handleClick, capture);
         function handleClick(e) {
             if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target))
                 callbackRef.current(e);

package/dist/esm/components/src/hooks/useCreateController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateController.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useCreateController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,mBAAmB,GAAI,cAAc,SAAS,WAAW,QAC/D,IAAI,QACJ,MAAM,OAAO,eAAe,UAC1B,iBAAiB,KACvB,cAkBF,CAAC"}
+{"version":3,"file":"useCreateController.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useCreateController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,mBAAmB,GAAI,cAAc,SAAS,WAAW,QAC/D,IAAI,QACJ,MAAM,OAAO,eAAe,UAC1B,iBAAiB,KACvB,cAuCF,CAAC"}

package/dist/esm/components/src/hooks/useCreateController.js

@@ -8,10 +8,31 @@ export const useCreateController = (snap, type, config) => {
             .then((controller) => {
             setController(controller);
         })
-            .catch(() => {
-            snap.createController(type, config).then((controller) => {
+            .catch(async () => {
+            let configToCreate = config;
+            // dynamically created recommendation controllers (ex. no-results recommendations) don't go through
+            // the RecommendationInstantiator, so inherit its plugins/middleware from the original config to keep behavior consistent
+            if (type === 'recommendation' && !config.plugins && !config.middleware) {
+                try {
+                    const instantiator = await snap.getInstantiator('recommendation');
+                    configToCreate = {
+                        ...config,
+                        plugins: instantiator.config.config.plugins,
+                        middleware: instantiator.config.config.middleware,
+                    };
+                }
+                catch {
+                    // no recommendation instantiator configured - proceed without inherited attachments
+                }
+            }
+            try {
+                const controller = await snap.createController(type, configToCreate);
                 setController(controller);
-            });
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(`useCreateController: failed to create controller "${config.id}"`, err);
+            }
         });
     }, []);
     return controller;

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

@@ -1,14 +1,20 @@
 import { Banner, BannerContent, ContentType, Product } from '@athoscommerce/snap-store-mobx';
-import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { SearchController, AutocompleteController, RecommendationController, QuickviewManager } from '@athoscommerce/snap-controller';
 import { type MutableRef } from 'preact/hooks';
+import { UseIntersectionOptions } from './useIntersectionAdvanced';
 interface UseTrackingProps {
-    controller: SearchController | AutocompleteController | RecommendationController;
+    controller: SearchController | AutocompleteController | RecommendationController | QuickviewManager;
     result: Product;
     banner?: Banner;
     type?: ContentType;
     content?: BannerContent;
+    track?: {
+        impression?: boolean;
+        click?: boolean;
+        options?: UseIntersectionOptions;
+    };
 }
-export declare function useTracking({ controller, result, banner, type, content }: UseTrackingProps): {
+export declare function useTracking({ controller, result, banner, type, content, track }: UseTrackingProps): {
     trackingRef: MutableRef<HTMLElement | null>;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAA8B,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1D,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CA4C5I"}
+{"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAA8B,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAC3I,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,GAAG,gBAAgB,CAAC;IACpG,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,OAAO,CAAC,EAAE,sBAAsB,CAAC;KACjC,CAAC;CACF;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CAmDnJ"}

package/dist/esm/components/src/hooks/useTracking.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'preact/hooks';
 import { createImpressionObserver } from '../utilities';
 import { TRACKING_ATTRIBUTE } from '../providers/withTracking';
-export function useTracking({ controller, result, banner, type, content }) {
+export function useTracking({ controller, result, banner, type, content, track }) {
     if (!controller) {
         console.warn('Warning: No controller provided to useTracking');
     }
@@ -11,27 +11,33 @@ export function useTracking({ controller, result, banner, type, content }) {
     if (!result && !banner && (!type || !content)) {
         console.warn('Warning: No result or banner provided to withTracking');
     }
-    const { ref, inViewport } = createImpressionObserver();
+    const mergedTrack = {
+        impression: true,
+        click: true,
+        ...track,
+    };
+    const { ref, inViewport } = createImpressionObserver(track?.options);
     useEffect(() => {
-        if (inViewport) {
-            // TODO: add support for disabling tracking events via config like in ResultTracker
+        if (inViewport && mergedTrack.impression) {
             if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
                 controller?.track.banner.impression(content[type][0]);
             }
             else if (!result?.bundleSeed) {
-                controller?.track.product.impression((result || banner));
+                controller?.track.product.impression(result || banner);
             }
         }
     }, [inViewport]);
     useEffect(() => {
         const currentRef = ref.current;
-        if (currentRef) {
+        // TRACKING_ATTRIBUTE marks a click-tracked boundary (see isClickWithinBannerLink),
+        // so it is only set when click tracking is enabled
+        if (currentRef && mergedTrack.click) {
             const handleClick = (e) => {
                 if (type && content && !result && ['search', 'autocomplete'].includes(controller?.type || '')) {
                     controller?.track.banner.click(e, content[type][0]);
                 }
                 else {
-                    controller?.track.product.click(e, (result || banner));
+                    controller?.track.product.click(e, result || banner);
                 }
             };
             currentRef.setAttribute(TRACKING_ATTRIBUTE, 'true');
@@ -40,6 +46,6 @@ export function useTracking({ controller, result, banner, type, content }) {
                 currentRef.removeEventListener('click', handleClick);
             };
         }
-    }, [controller, result, banner, type, content]);
+    }, [controller, result, banner, type, content, mergedTrack.click, mergedTrack.impression]);
     return { trackingRef: ref };
 }

package/dist/esm/components/src/index.d.ts

@@ -5,7 +5,6 @@ export * from './components/Atoms/BadgeText';
 export * from './components/Atoms/Banner';
 export * from './components/Atoms/Breadcrumbs';
 export * from './components/Atoms/Button';
-export * from './components/Atoms/ChatLoadingIndicator';
 export * from './components/Atoms/Dropdown';
 export * from './components/Atoms/FormattedNumber';
 export * from './components/Atoms/Icon';
@@ -15,19 +14,11 @@ export * from './components/Atoms/LoadingBar';
 export * from './components/Atoms/Overlay';
 export * from './components/Atoms/PaginationInfo';
 export * from './components/Atoms/Price';
+export * from './components/Atoms/ProductDetail';
 export * from './components/Atoms/SearchHeader';
 export * from './components/Atoms/Skeleton';
 export * from './components/Molecules/CalloutBadge';
 export * from './components/Molecules/Carousel';
-export * from './components/Molecules/ChatAttachmentContext';
-export * from './components/Molecules/ChatInspirationResultMessage';
-export * from './components/Molecules/ChatMessageText';
-export * from './components/Molecules/ChatMessageUser';
-export * from './components/Molecules/ChatProductComparisonMessage';
-export * from './components/Molecules/ChatProductQueryMessage';
-export * from './components/Molecules/ChatResult';
-export * from './components/Molecules/ChatResultsDisplay';
-export * from './components/Molecules/ChatSuggestedQuestions';
 export * from './components/Molecules/Checkbox';
 export * from './components/Molecules/ErrorHandler';
 export * from './components/Molecules/FacetGridOptions';
@@ -45,6 +36,9 @@ export * from './components/Molecules/Modal';
 export * from './components/Molecules/OverlayBadge';
 export * from './components/Molecules/Pagination';
 export * from './components/Molecules/PerPage';
+export * from './components/Molecules/ProductDetailTable';
+export * from './components/Molecules/Gallery';
+export * from './components/Molecules/QuantityPicker';
 export * from './components/Molecules/Radio';
 export * from './components/Molecules/RadioList';
 export * from './components/Molecules/Rating';
@@ -53,6 +47,7 @@ export * from './components/Molecules/SearchInput';
 export * from './components/Molecules/Select';
 export * from './components/Molecules/Slideout';
 export * from './components/Molecules/SortBy';
+export * from './components/Molecules/TabSelection';
 export * from './components/Molecules/TemplatesEditor';
 export * from './components/Molecules/Swatches';
 export * from './components/Molecules/Slideshow';
@@ -69,10 +64,8 @@ export * from './components/Organisms/Sidebar';
 export * from './components/Organisms/Toolbar';
 export * from './components/Organisms/Autocomplete';
 export * from './components/Organisms/TermsList';
-export { ChatOrganism, type ChatOrganismProps } from './components/Organisms/Chat';
-export { ChatButtonOrganism, type ChatButtonOrganismProps } from './components/Organisms/ChatButton';
-export * from './components/Templates/Chat';
-export * from './components/Templates/ChatButton';
+export * from './components/Templates/QuickviewModal';
+export * from './components/Templates/QuickviewSlideout';
 export * from './components/Templates/Recommendation';
 export * from './components/Templates/RecommendationBundle';
 export * from './components/Templates/RecommendationBundleEasyAdd';