@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -120,7 +120,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-fixed__modal',
+            internalClassName: 'ss__autocomplete-fixed__modal',
             buttonSelector: buttonSelector,
             lockScroll: false,
             onOverlayClick: reset,
@@ -136,8 +136,8 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-fixed__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-fixed__search-input ss__autocomplete__search-input',
             placeholderText: inputPlaceholderText || undefined,
             submitSearchButton: {
                 onClick: () => {
@@ -151,6 +151,11 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({

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();
@@ -162,6 +162,11 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({

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: () => {
@@ -113,6 +113,11 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Chat_1 = require("../../Organisms/Chat");
+const defaultStyles = () => {
+    // The template itself is layout-free — the underlying Chat organism handles
+    // fixed positioning and sizing. The wrapper exists purely so theme overrides
+    // flow through mergeProps('chat', ...) and so the Chat surface can be themed
+    // per-template like Search and Recommendation.
+    return (0, react_1.css)({});
+};
+exports.Chat = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chat', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        Chat: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chat') itself, and passing
+    // this one down would append a second 'chat' segment (ss-path="chat chat")
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__chat-template', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Chat_1.ChatOrganism, { ...subProps.Chat, ...organismProps, controller: controller }) }) }));
+});

package/dist/cjs/components/src/components/Templates/Chat/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("./Chat"), exports);

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const ChatButton_1 = require("../../Organisms/ChatButton");
+const defaultStyles = () => {
+    // inline-block so the wrapper flows alongside its siblings when injected into
+    // merchant chrome (e.g. a nav); all button styling lives in the organism
+    return (0, react_1.css)({
+        display: 'inline-block',
+    });
+};
+exports.ChatButton = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatButton', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        ChatButton: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chatButton') itself, and passing
+    // this one down would append a second 'chatButton' segment
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__chat-button-template', className, internalClassName), children: (0, jsx_runtime_1.jsx)(ChatButton_1.ChatButtonOrganism, { ...subProps.ChatButton, ...organismProps, controller: controller }) }) }));
+});

package/dist/cjs/components/src/components/Templates/ChatButton/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("./ChatButton"), exports);

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);