@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -132,7 +132,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-modal__modal',
+            internalClassName: 'ss__autocomplete-modal__modal',
             buttonSelector: buttonSelector,
             onOverlayClick: reset,
             overlayColor: overlayColor,
@@ -147,8 +147,8 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-modal__search-input ss__autocomplete__search-input',
             submitSearchButton: {
                 onClick: () => {
                     () => reset();

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.js

@@ -97,8 +97,8 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-slideout__search-input ss__autocomplete__search-input',
             inputName: inputName,
             submitSearchButton: {
                 onClick: () => {

package/dist/cjs/components/src/components/Templates/QuickviewModal/QuickviewModal.js

@@ -0,0 +1,153 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickviewModal = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Modal_1 = require("../../Molecules/Modal");
+const QuickviewLayout_1 = require("../../Organisms/QuickviewLayout");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        // Take the wrapper out of normal flow. The modal is injected into its own container at the
+        // end of `<body>`, but a consumer may still render it inside a grid (e.g. as a sibling of a
+        // result `<article>`), where in-flow it would occupy a cell and shift the layout when opened.
+        // The modal's content and overlay are both `position: fixed`, so an absolute, zero-size
+        // wrapper has no visual effect while keeping it out of any grid.
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        // Override the underlying Modal's `.ss__modal__content` positioning so the quickview
+        // is centered in the viewport rather than positioned relative to the source Result tile.
+        // Modal's default is `position: absolute` inside its (relative) wrapper, which lives
+        // inside the Results grid cell — that's why the modal was being clipped to a tile.
+        // We compound the wrapper class (`&.ss__quickview-modal`) into the selector to beat
+        // Modal's same-specificity rule (which would otherwise win on source-order since
+        // Modal's styles are emitted after ours), and use !important on the positioning
+        // properties so theme overrides can't accidentally re-anchor the modal to its tile.
+        '&.ss__quickview-modal .ss__modal__content': {
+            position: 'fixed !important',
+            top: '50% !important',
+            left: '50% !important',
+            transform: 'translate(-50%, -50%) !important',
+            minWidth: 'auto',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            width: 'auto',
+            overflow: 'auto',
+            zIndex: 10006,
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.2)',
+            borderRadius: '4px',
+        },
+        // Lower the Modal's Overlay backdrop too so it stays below both the modal content
+        // (10006) and the dropdown portal (10007) but above page content and autocomplete.
+        '&.ss__quickview-modal .ss__modal__overlay': {
+            zIndex: '10005 !important',
+        },
+        // Below the desktop breakpoint (where QuickviewLayout stacks to a single column) the
+        // modal spans the full viewport width instead of shrink-wrapping its content. The
+        // wrapper class is compounded into the content selector so this beats QuickviewLayout's
+        // same-specificity min/max width rule on the content div.
+        '@media (max-width: 767px)': {
+            '&.ss__quickview-modal .ss__modal__content': {
+                width: '100vw',
+                maxWidth: '100vw',
+                borderRadius: 0,
+            },
+            '&.ss__quickview-modal .ss__quickview__content': {
+                minWidth: 'auto',
+                maxWidth: '100%',
+            },
+        },
+    });
+};
+exports.QuickviewModal = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        hideBadge: false,
+        layout: [['c1', 'c2']],
+        column1: {
+            layout: ['slideshow'],
+            width: '45%',
+        },
+        column2: {
+            layout: [
+                ['productDetail.mappings.core.name'],
+                ['calloutBadge'],
+                ['variantSelections'],
+                ['quantityPicker'],
+                ['button.add-to-cart'],
+                ['productDetail.mappings.core.description'],
+                ['productDetailTable'],
+                ['button.more-info'],
+            ],
+            width: 'auto',
+        },
+    };
+    const props = (0, utilities_1.mergeProps)('quickviewModal', globalTheme, defaultProps, properties);
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, layout, hideBadge, column1, column2, column3, column4, recommendation, lang, } = props;
+    // Dialog focus management: remember what had focus before the modal opened, move focus to
+    // the close button on open, and restore on close. This lives in the container (not the
+    // layout) because the layout unmounts when the Modal closes — only the always-mounted
+    // container can run the restore-focus branch on the open→close transition.
+    const wrapperRef = (0, hooks_1.useRef)(null);
+    const previousFocusRef = (0, hooks_1.useRef)(null);
+    const wasOpenRef = (0, hooks_1.useRef)(false);
+    (0, hooks_1.useEffect)(() => {
+        const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
+        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 = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (!quickviewManager) {
+        console.warn(`[QuickviewModal] 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);
+    const onClose = () => quickviewManager.close();
+    const subProps = {
+        quickviewLayout: {
+            // default props
+            onClose,
+            ...(0, utilities_1.defined)({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            onOverlayClick: onClose,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = (0, jsx_runtime_1.jsx)(QuickviewLayout_1.QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: wrapperRef, className: (0, classnames_1.default)('ss__quickview-modal', className, internalClassName), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, open: isOpen, children: product ? ((0, jsx_runtime_1.jsx)(QuickviewLayout_1.QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

package/dist/cjs/components/src/components/Templates/QuickviewModal/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./QuickviewModal"), exports);

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

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickviewSlideout = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Slideout_1 = require("../../Molecules/Slideout");
+const QuickviewLayout_1 = require("../../Organisms/QuickviewLayout");
+const defaultStyles = () => {
+    return (0, react_1.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%',
+        },
+    });
+};
+exports.QuickviewSlideout = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.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 = (0, utilities_1.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] = (0, hooks_1.useState)(false);
+    (0, hooks_1.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 = (0, hooks_1.useRef)(null);
+    const previousFocusRef = (0, hooks_1.useRef)(null);
+    const wasOpenRef = (0, hooks_1.useRef)(false);
+    (0, hooks_1.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 = (0, utilities_1.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,
+            ...(0, utilities_1.defined)({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...(0, utilities_1.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
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = (0, jsx_runtime_1.jsx)(QuickviewLayout_1.QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: wrapperRef, className: (0, classnames_1.default)('ss__quickview-slideout', className, internalClassName), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.slideout, active: isOpen, children: product ? ((0, jsx_runtime_1.jsx)(QuickviewLayout_1.QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./QuickviewSlideout"), exports);

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

@@ -21,6 +21,7 @@ const hooks_3 = require("../../../hooks");
 const ResultTracker_1 = require("../../Trackers/ResultTracker");
 const defaultStyles = ({ vertical }) => {
     return (0, react_1.css)({
+        ...utilities_1.lazyRenderMinSize,
         height: vertical ? '100%' : undefined,
         '.ss__result__image-wrapper': {
             height: vertical ? '85%' : undefined,
@@ -121,7 +122,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)((properties) => {
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
     const mergedLang = (0, hooks_3.useLang)(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    return (Array.isArray(children) && children.length) || resultsToRender?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && ((0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && (0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation__description", children: description }), (0, jsx_runtime_1.jsx)(Carousel_1.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 ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, style: disableStyles ? utilities_1.lazyRenderMinSize : undefined, className: (0, classnames_1.default)('ss__recommendation', className, internalClassName), ref: recsRef, children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && !hideTitle && ((0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation__title", ...mergedLang.titleText?.all, children: title })), description && (0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation__description", children: description }), (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, ...subProps.carousel, ...additionalProps, children: Array.isArray(children) && children.length
                             ? children.map((child, idx) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: resultsToRender[idx], children: child })))
                             : resultsToRender.map((result) => ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: result, children: (() => {
                                     if (resolvedResultComponent && controller) {

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

@@ -28,6 +28,7 @@ const defaultStyles = ({ vertical, separatorIcon, carousel, ctaInline, hasSeed,
     }
     const slidesPerView = carousel?.slidesPerView;
     return (0, react_1.css)({
+        ...utilities_1.lazyRenderMinSize,
         [`.${classNamePrefix}__wrapper`]: {
             display: 'flex',
             maxWidth: '100%',
@@ -434,7 +435,7 @@ exports.RecommendationBundle = (0, mobx_react_lite_1.observer)((properties) => {
     if (hideSeedText) {
         delete lang.seedText.value;
     }
-    return resultsToRender?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: recsRef, className: (0, classnames_1.default)(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: `${classNamePrefix}__title`, children: (0, jsx_runtime_1.jsx)("span", { children: title }) })), description && ((0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation-bundle__description", children: (0, jsx_runtime_1.jsx)("span", { children: description }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__wrapper`, {
+    return resultsToRender?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, style: disableStyles ? utilities_1.lazyRenderMinSize : undefined, ref: recsRef, className: (0, classnames_1.default)(classNamePrefix, { [`${classNamePrefix}--stacked`]: !ctaInline }, className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: `${classNamePrefix}__title`, children: (0, jsx_runtime_1.jsx)("span", { children: title }) })), description && ((0, jsx_runtime_1.jsx)("p", { className: "ss__recommendation-bundle__description", children: (0, jsx_runtime_1.jsx)("span", { children: description }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__wrapper`, {
                             [`${classNamePrefix}__wrapper--seed-in-carousel`]: seedInCarousel,
                             [`${classNamePrefix}__wrapper--vertical`]: vertical,
                         }), children: [carouselEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!seedInCarousel && !hideSeed && seed && ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__wrapper__seed-container`, children: (0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { controller: controller, result: seed, track: { impression: false }, children: (0, jsx_runtime_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, title: seed.display.mappings.core?.name, onCheck: (e) => {

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

@@ -20,6 +20,7 @@ const hooks_1 = require("preact/hooks");
 const hooks_2 = require("../../../hooks");
 const defaultStyles = ({ gapSize, columns }) => {
     return (0, react_1.css)({
+        ...utilities_1.lazyRenderMinSize,
         maxWidth: '100%',
         maxHeight: '100%',
         '.ss__recommendation-grid__results': {
@@ -114,7 +115,7 @@ exports.RecommendationGrid = (0, mobx_react_lite_1.observer)((properties) => {
     if (inView) {
         setIsVisible(true);
     }
-    return results?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-grid', className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation-grid__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "ss__recommendation-grid__results", children: results.map((result) => (() => {
+    return results?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, style: disableStyles ? utilities_1.lazyRenderMinSize : undefined, ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-grid', className, internalClassName), children: isVisible ? ((0, jsx_runtime_1.jsxs)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "ss__recommendation-grid__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "ss__recommendation-grid__results", children: results.map((result) => (() => {
                             if (resolvedResultComponent && controller) {
                                 return (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
                                     controller,

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

@@ -21,7 +21,9 @@ 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/cjs/components/src/hooks/useAcRenderedInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAcRenderedInput = useAcRenderedInput;
 const hooks_1 = require("preact/hooks");
-const RENDERED_INPUT_SELECTOR = '.autocomplete__search-input input';
+const RENDERED_INPUT_SELECTOR = '.ss__autocomplete__search-input input';
 function useAcRenderedInput({ input, controllers, renderInput, buttonSelector, renderedInputRef, setActive, }) {
     const [_input, setInput] = (0, hooks_1.useState)(input);
     const [renderedInputInitialized, setRenderedInputInitialized] = (0, hooks_1.useState)(false);

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

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickOutside = useClickOutside;
 const hooks_1 = require("preact/hooks");
-function useClickOutside(callback) {
+function useClickOutside(callback, capture = false) {
     const callbackRef = (0, hooks_1.useRef)();
     const innerRef = (0, hooks_1.useRef)();
     (0, hooks_1.useEffect)(() => {
         callbackRef.current = callback;
     });
     (0, hooks_1.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/cjs/components/src/hooks/useTracking.js

@@ -4,7 +4,7 @@ exports.useTracking = useTracking;
 const hooks_1 = require("preact/hooks");
 const utilities_1 = require("../utilities");
 const withTracking_1 = require("../providers/withTracking");
-function useTracking({ controller, result, banner, type, content }) {
+function useTracking({ controller, result, banner, type, content, track }) {
     if (!controller) {
         console.warn('Warning: No controller provided to useTracking');
     }
@@ -14,27 +14,33 @@ 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 } = (0, utilities_1.createImpressionObserver)();
+    const mergedTrack = {
+        impression: true,
+        click: true,
+        ...track,
+    };
+    const { ref, inViewport } = (0, utilities_1.createImpressionObserver)(track?.options);
     (0, hooks_1.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]);
     (0, hooks_1.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(withTracking_1.TRACKING_ATTRIBUTE, 'true');
@@ -43,6 +49,6 @@ 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/cjs/components/src/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./components/Atoms/LoadingBar"), exports);
 __exportStar(require("./components/Atoms/Overlay"), exports);
 __exportStar(require("./components/Atoms/PaginationInfo"), exports);
 __exportStar(require("./components/Atoms/Price"), exports);
+__exportStar(require("./components/Atoms/ProductDetail"), exports);
 __exportStar(require("./components/Atoms/SearchHeader"), exports);
 __exportStar(require("./components/Atoms/Skeleton"), exports);
 // MOLECULES
@@ -55,6 +56,9 @@ __exportStar(require("./components/Molecules/Modal"), exports);
 __exportStar(require("./components/Molecules/OverlayBadge"), exports);
 __exportStar(require("./components/Molecules/Pagination"), exports);
 __exportStar(require("./components/Molecules/PerPage"), exports);
+__exportStar(require("./components/Molecules/ProductDetailTable"), exports);
+__exportStar(require("./components/Molecules/Gallery"), exports);
+__exportStar(require("./components/Molecules/QuantityPicker"), exports);
 __exportStar(require("./components/Molecules/Radio"), exports);
 __exportStar(require("./components/Molecules/RadioList"), exports);
 __exportStar(require("./components/Molecules/Rating"), exports);
@@ -82,6 +86,8 @@ __exportStar(require("./components/Organisms/Toolbar"), exports);
 __exportStar(require("./components/Organisms/Autocomplete"), exports);
 __exportStar(require("./components/Organisms/TermsList"), exports);
 // TEMPLATES
+__exportStar(require("./components/Templates/QuickviewModal"), exports);
+__exportStar(require("./components/Templates/QuickviewSlideout"), exports);
 __exportStar(require("./components/Templates/Recommendation"), exports);
 __exportStar(require("./components/Templates/RecommendationBundle"), exports);
 __exportStar(require("./components/Templates/RecommendationBundleEasyAdd"), exports);

package/dist/cjs/components/src/providers/themeComponents.js

@@ -22,6 +22,7 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'paginationInfo',
     'slideshow',
     'price',
+    'productDetail',
     'skeleton',
     /* molecules */
     'modal',
@@ -39,10 +40,12 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'facetPaletteOptions',
     'facetSlider',
     'filter',
+    'gallery',
     'loadMore',
     'overlayBadge',
     'pagination',
     'perPage',
+    'quantityPicker',
     'overlayResult',
     'radioList',
     'rating',
@@ -53,6 +56,7 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'swatches',
     'tabSelection',
     'variantSelection',
+    'productDetailTable',
     'terms',
     /* organisms */
     'branchOverride',

package/dist/cjs/components/src/setupTests.js

@@ -1,3 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@testing-library/jest-dom");
+if (typeof globalThis.ResizeObserver === 'undefined') {
+    globalThis.ResizeObserver = class ResizeObserver {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function --- IGNORE ---
+        observe() { }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function --- IGNORE ---
+        unobserve() { }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function --- IGNORE ---
+        disconnect() { }
+    };
+}

package/dist/cjs/components/src/utilities/createImpressionObserver.js

@@ -8,10 +8,10 @@ const IMPRESSION_MIN_VISIBLE_TIME = 1000;
 function createImpressionObserver(options) {
     const ref = (0, hooks_1.useRef)(null);
     const { inViewport, updateRef } = (0, hooks_2.useIntersectionAdvanced)(ref, {
-        ...options,
         fireOnce: true,
         threshold: IMPRESSION_VISIBILITY_THRESHOLD,
         minVisibleTime: IMPRESSION_MIN_VISIBLE_TIME,
+        ...options,
     });
     return {
         ref,

package/dist/cjs/components/src/utilities/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./selectionKey"), exports);
 __exportStar(require("./storybook"), exports);
 __exportStar(require("./defaultBadgeComponentMap"), exports);
 __exportStar(require("./createImpressionObserver"), exports);
+__exportStar(require("./lazyRenderMinSize"), exports);

package/dist/cjs/components/src/utilities/lazyRenderMinSize.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyRenderMinSize = void 0;
+// A 0x0 root wrapper can prevent IntersectionObserver from ever reporting `isIntersecting`
+// in some browsers, so lazyRender needs a non-zero min size on the root element at all times,
+// even when disableStyles is set and the rest of defaultStyles is skipped.
+exports.lazyRenderMinSize = {
+    minWidth: '1px',
+    minHeight: '1px',
+};

package/dist/cjs/src/Instantiators/RecommendationInstantiator.js

@@ -47,6 +47,7 @@ class RecommendationInstantiator {
         this.client = services?.client || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
         this.tracker = services?.tracker || new snap_tracker_1.Tracker(this.config.client.globals);
         this.logger = services?.logger || new snap_logger_1.Logger({ prefix: 'RecommendationInstantiator ', mode: this.mode });
+        this.quickviewManager = services?.quickviewManager;
         const profileCount = {};
         // script block targeter for "grouped" and "legacy" blocks
         this.targeter = new snap_toolbox_1.DomTargeter([
@@ -255,7 +256,7 @@ async function readyTheController(instance, services, targetElem, context, profi
         controller: controllerConfig,
         context,
         mode: instance.config.mode,
-    }, { client: instance.client, tracker: instance.tracker });
+    }, { client: instance.client, tracker: instance.tracker, quickviewManager: instance.quickviewManager });
     // mark element with controller id so cleanupStaleControllers knows it's active
     if (targetElem) {
         targetElem.setAttribute('ss-controller-id', controller.id);