@athoscommerce/snap-preact 1.11.0 → 1.12.0

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

@@ -91,8 +91,8 @@ export const AutocompleteSlideout = 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/esm/components/src/components/Templates/QuickviewModal/QuickviewModal.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewModal: ((properties: QuickviewModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewModalProps = {
+    quickviewManager: QuickviewManager;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewModal/QuickviewModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AA2DvE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAkIrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Modal } from '../../Molecules/Modal';
+import { QuickviewLayout, QuickviewTracker, } from '../../Organisms/QuickviewLayout';
+const defaultStyles = () => {
+    return 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%',
+            },
+        },
+    });
+};
+export const QuickviewModal = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = 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 = 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 = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    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 = 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,
+            ...defined({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            onOverlayClick: onClose,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = _jsx(QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: wrapperRef, className: classnames('ss__quickview-modal', className, internalClassName), onClick: (e) => e.stopPropagation(), children: _jsx(Modal, { ...subProps.modal, open: isOpen, children: product ? (_jsx(QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+import { SlideDirectionType } from '../../Molecules/Slideout';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewSlideout: ((properties: QuickviewSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewSlideoutProps = {
+    quickviewManager: QuickviewManager;
+    slideDirection?: SlideDirectionType;
+    width?: string;
+    overlayColor?: string;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewSlideout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewSlideout/QuickviewSlideout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAqBvE,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA2I3E,CAAC;AAOH,MAAM,MAAM,sBAAsB,GAAG;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAiC,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI/G,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAEzE,OAAO,EAAc,eAAe,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AA+HtC,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CAsjBjF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;AAElD,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACxC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACtB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,gBAAgB,EAAE,IAAI,CAAC;QACtB,SAAS,EAAE,SAAS,CAAC;KACrB,CAAC,CAAC;CACH"}
+{"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'preact/hooks';
-const RENDERED_INPUT_SELECTOR = '.autocomplete__search-input input';
+const RENDERED_INPUT_SELECTOR = '.ss__autocomplete__search-input input';
 export function useAcRenderedInput({ input, controllers, renderInput, buttonSelector, renderedInputRef, setActive, }) {
     const [_input, setInput] = useState(input);
     const [renderedInputInitialized, setRenderedInputInitialized] = useState(false);

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

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

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

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

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

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

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

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

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

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

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

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