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

package/dist/cjs/components/src/components/Organisms/Toolbar/Toolbar.js

@@ -23,7 +23,7 @@ exports.Toolbar = (0, mobx_react_lite_1.observer)((properties) => {
         layout: ['button.sidebar-toggle', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
     };
     const props = (0, utilities_1.mergeProps)('toolbar', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout, tabManager } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('toolbar', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -33,6 +33,7 @@ exports.Toolbar = (0, mobx_react_lite_1.observer)((properties) => {
         Layout: {
             // default props
             internalClassName: 'ss__toolbar__layout',
+            tabManager: tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 toggleSideBarButton,

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

@@ -77,7 +77,13 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, controller, renderInput, overlayColor, className, internalClassName, offset, treePath } = props;
+    const { layout, disableStyles, renderInput, overlayColor, className, internalClassName, offset, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -93,7 +99,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -103,6 +109,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -113,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,
@@ -129,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: () => {
@@ -144,11 +151,6 @@ 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)({
@@ -206,7 +208,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -89,7 +89,13 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, overlayColor, controller, renderInput, className, internalClassName, treePath } = props;
+    const { layout, disableStyles, overlayColor, renderInput, className, internalClassName, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -105,7 +111,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -115,6 +121,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -125,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,
@@ -140,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();
@@ -155,11 +162,6 @@ 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)({
@@ -175,7 +177,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -35,7 +35,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
     const defaultProps = {
         slideDirection: 'left',
         overlayColor: 'rgba(0,0,0,0.8)',
-        layout: [['button.see-more'], ['termsList'], ['content']],
+        layout: [['button.see-more'], ['termsList'], ['tabSelection'], ['content']],
         width: '500px',
         renderInput: true,
     };
@@ -54,7 +54,13 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, slideDirection, controller, overlayColor, renderInput, className, internalClassName, treePath, width } = props;
+    const { layout, disableStyles, slideDirection, overlayColor, renderInput, className, internalClassName, treePath, width, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     const reset = () => {
         setActive(false);
@@ -65,6 +71,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             onReset: () => reset(),
             layout: layout,
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -90,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: () => {
@@ -106,11 +113,6 @@ 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,
@@ -129,7 +131,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
         });
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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/{Molecules/ChatMessageText → Templates/QuickviewModal}/index.js

@@ -14,4 +14,4 @@ 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("./ChatMessageText"), exports);
+__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/components/Templates/Search/Search.js

@@ -69,13 +69,17 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.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__${(0, componentNameToClassName_1.componentNameToClassName)(props.alias)}`;
     }
     // handle selected layoutOptions - must always call to preserve hook order
     (0, useLayoutOptions_1.useLayoutOptions)(props, globalTheme);
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+    }
     const store = controller.store;
     const isMobile = (0, hooks_2.useMediaQuery)(mobileDisplayAt ? (typeof mobileDisplayAt == 'boolean' ? `(min-width: 0px)` : `(max-width: ${mobileDisplayAt})`) : `(max-width: 0px)`);
     const [sidebarOpenState, setSidebarOpenState] = (0, hooks_1.useState)(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed && !isMobile));
@@ -136,6 +140,7 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
             internalClassName: `${classNamePrefix}__header-section__toolbar--top-toolbar`,
             layout: [['banner.header'], ['searchHeader', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             ...(0, utilities_1.defined)({
                 disableStyles,
             }),
@@ -147,9 +152,10 @@ exports.Search = (0, mobx_react_lite_1.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
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -163,6 +169,7 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
             internalClassName: `${classNamePrefix}__content__toolbar--bottom-toolbar`,
             layout: [['banner.footer'], ['_', 'pagination', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,

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