@athoscommerce/snap-preact 1.2.3-beta.3 → 1.2.3-beta.5

package/dist/esm/components/src/components/Organisms/ProductQuickView/ProductQuickView.js

@@ -0,0 +1,436 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { Overlay } from '../../Atoms/Overlay';
+import { Image } from '../../Atoms/Image';
+import { Button } from '../../Atoms/Button';
+import { Price } from '../../Atoms/Price';
+import { Icon } from '../../Atoms/Icon';
+import { useTheme, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+// Fields that have dedicated rendering on the product card; skip them in the info table.
+const CARD_FIELDS = new Set([
+    'name',
+    'brand',
+    'price',
+    'msrp',
+    'imageUrl',
+    'thumbnailImageUrl',
+    'secureImageUrl',
+    'secureThumbnailImageUrl',
+    'url',
+    'addToCartUrl',
+    'uid',
+    'sku',
+    'parentId',
+    'parentImageUrl',
+    'description',
+    'caption',
+    'popularity',
+    'stockMessage',
+]);
+// Preferred ordering for the structured info table — anything else is appended after.
+const PREFERRED_INFO_ORDER = ['material', 'fit', 'color', 'sizes', 'size', 'category', 'rating', 'availability'];
+const FEATURE_KEYS = ['features', 'feature_list', 'productFeatures', 'product_features', 'highlights'];
+const formatLabel = (key) => {
+    return key
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .trim();
+};
+const stripHtml = (str) => str.replace(/<[^>]*>/g, '');
+const formatValue = (value) => {
+    if (Array.isArray(value)) {
+        return stripHtml(value.filter((v) => v != null && v !== '').join(', '));
+    }
+    if (value == null)
+        return '';
+    // Upstream sometimes ships array fields as JSON-encoded strings (e.g. `'["VersaWearCo"]'`).
+    // Detect and unwrap before stringifying so the raw brackets/quotes don't leak into the UI.
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if ((trimmed.startsWith('[') && trimmed.endsWith(']')) || (trimmed.startsWith('{') && trimmed.endsWith('}'))) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                if (Array.isArray(parsed)) {
+                    return stripHtml(parsed.filter((v) => v != null && v !== '').join(', '));
+                }
+            }
+            catch {
+                // fall through — value wasn't valid JSON, just treat it as a string
+            }
+        }
+    }
+    return stripHtml(String(value));
+};
+const collectFeatures = (display) => {
+    const attributes = display?.attributes || {};
+    for (const key of FEATURE_KEYS) {
+        const raw = attributes[key];
+        if (Array.isArray(raw) && raw.length > 0) {
+            return raw.map((v) => String(v)).filter(Boolean);
+        }
+        if (typeof raw === 'string' && raw.trim()) {
+            return raw
+                .split(/\r?\n|,/)
+                .map((v) => v.trim())
+                .filter(Boolean);
+        }
+    }
+    return [];
+};
+const collectInfoRows = (display, displayFields) => {
+    const core = display?.mappings?.core || {};
+    const attributes = display?.attributes || {};
+    const filterByDisplayFields = displayFields && displayFields.length > 0;
+    const displayFieldsLower = filterByDisplayFields ? displayFields.map((f) => f.toLowerCase()) : [];
+    const merged = {};
+    // When displayFields is specified, include matching core fields that are normally skipped.
+    if (filterByDisplayFields) {
+        Object.entries(core).forEach(([key, value]) => {
+            if (displayFieldsLower.includes(key.toLowerCase()) && value != null) {
+                merged[key] = value;
+            }
+        });
+    }
+    // Pull selected core fields (rating + availability) regardless.
+    if (core.rating != null) {
+        const rating = core.rating;
+        const ratingCount = core.ratingCount;
+        merged.rating = ratingCount ? `${rating}/5.0 (${ratingCount} reviews)` : `${rating}/5.0`;
+    }
+    if (core.available != null) {
+        merged.availability = core.available ? 'In Stock' : 'Out of Stock';
+    }
+    // Merge product attributes, skipping ones already shown on the card and the feature lists.
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (!filterByDisplayFields && CARD_FIELDS.has(key))
+            return;
+        if (FEATURE_KEYS.includes(key))
+            return;
+        const formatted = formatValue(value);
+        if (!formatted)
+            return;
+        merged[key] = formatted;
+    });
+    const seen = new Set();
+    const ordered = [];
+    PREFERRED_INFO_ORDER.forEach((preferred) => {
+        const match = Object.keys(merged).find((k) => k.toLowerCase() === preferred);
+        if (match && !seen.has(match)) {
+            seen.add(match);
+            ordered.push({ key: match, rawKey: match, label: formatLabel(match), value: formatValue(merged[match]) });
+        }
+    });
+    Object.keys(merged).forEach((key) => {
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        ordered.push({ key, rawKey: key, label: formatLabel(key), value: formatValue(merged[key]) });
+    });
+    if (filterByDisplayFields) {
+        const filtered = ordered.filter((row) => displayFieldsLower.includes(row.rawKey.toLowerCase()));
+        filtered.sort((a, b) => displayFieldsLower.indexOf(a.rawKey.toLowerCase()) - displayFieldsLower.indexOf(b.rawKey.toLowerCase()));
+        return filtered;
+    }
+    return ordered;
+};
+const defaultStyles = () => {
+    return css({
+        // Fixed viewport-level wrapper that hosts both the backdrop and the centered panel.
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10004,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '.ss__product-quick-view__panel': {
+            background: '#fff',
+            borderRadius: '8px',
+            padding: '1.5em',
+            maxWidth: '760px',
+            width: '90vw',
+            maxHeight: '85vh',
+            overflowY: 'auto',
+            position: 'relative',
+            boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)',
+            zIndex: 10004,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1em',
+        },
+        '.ss__product-quick-view__close': {
+            position: 'absolute',
+            top: '0.75em',
+            right: '0.75em',
+            cursor: 'pointer',
+            padding: '4px',
+            zIndex: 1,
+        },
+        '.ss__product-quick-view__error': {
+            padding: '0.75em 1em',
+            background: '#fee',
+            color: '#a00',
+            borderRadius: '4px',
+        },
+        '.ss__product-quick-view__loading': {
+            padding: '2em',
+            textAlign: 'center',
+            color: '#6A7282',
+        },
+        '.ss__product-quick-view__body': {
+            display: 'flex',
+            gap: '1.5em',
+            alignItems: 'flex-start',
+            flexWrap: 'wrap',
+        },
+        '.ss__product-quick-view__left': {
+            flex: '0 0 auto',
+            width: '40%',
+            maxWidth: '280px',
+            minWidth: '180px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75em',
+            // On narrow viewports the body wraps to stack vertically — let the image column
+            // stretch full-width so the image doesn't sit awkwardly at a fixed 40%/280px.
+            // The flex wraps once the panel can't fit the 280px left + gap + 320px right basis,
+            // which lands around a 680px viewport given the 90vw panel and 1.5em padding.
+            '@media (max-width: 700px)': {
+                width: '100%',
+                maxWidth: 'none',
+                minWidth: 0,
+            },
+            '.ss__product-quick-view__left__image': {
+                width: '100%',
+                objectFit: 'contain',
+                borderRadius: '0.33em',
+                overflow: 'hidden',
+            },
+            '.ss__product-quick-view__left__actions': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5em',
+                '.ss__product-quick-view__left__actions__go-to-product': {
+                    textAlign: 'center',
+                    a: {
+                        fontSize: '1em',
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                        color: '#374151',
+                    },
+                },
+                '.ss__product-quick-view__left__actions__add-to-cart .ss__button': {
+                    width: '100%',
+                    // Center the button text — the Button atom defaults to inline-flex with
+                    // alignItems:center only, so longer labels would otherwise stay left-aligned.
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    background: '#253B80',
+                    color: '#fff',
+                    border: '1px solid #253B80',
+                    fontWeight: 'bold',
+                    padding: '0.6em 0.75em',
+                    '&:not(.ss__button--disabled):hover': {
+                        background: '#1e3068',
+                    },
+                },
+            },
+        },
+        '.ss__product-quick-view__right': {
+            flex: '1 1 320px',
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1em',
+            '.ss__product-quick-view__title': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.25em',
+                '.ss__product-quick-view__title__name': {
+                    fontWeight: 'bold',
+                    fontSize: '1.25em',
+                    lineHeight: 1.3,
+                    a: { color: 'inherit', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
+                },
+                '.ss__product-quick-view__title__brand': {
+                    fontSize: '0.9em',
+                    color: '#6A7282',
+                },
+                '.ss__product-quick-view__title__price': {
+                    fontWeight: 'bold',
+                    fontSize: '1.15em',
+                    display: 'flex',
+                    gap: '0.5em',
+                    alignItems: 'center',
+                    marginTop: '0.25em',
+                },
+            },
+        },
+        '.ss__product-quick-view__variants': {
+            '.ss__product-quick-view__variants__label': {
+                fontWeight: 600,
+                fontSize: '0.9em',
+                color: '#374151',
+                textTransform: 'uppercase',
+                marginBottom: '0.5em',
+            },
+            '.ss__product-quick-view__variants__swatches': {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '0.5em',
+                '.ss__product-quick-view__variants__swatch': {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '0.25em',
+                    cursor: 'pointer',
+                    padding: '0.25em',
+                    borderRadius: '0.5em',
+                    border: '2px solid transparent',
+                    transition: 'border-color 0.15s ease',
+                    '&:hover': { borderColor: '#253B80' },
+                    '&.ss__product-quick-view__variants__swatch--selected': {
+                        borderColor: '#253B80',
+                        borderWidth: '3px',
+                        padding: '0.15em',
+                    },
+                    '&.ss__product-quick-view__variants__swatch--unavailable': {
+                        opacity: 0.4,
+                    },
+                    '.ss__product-quick-view__variants__swatch__image': {
+                        width: '48px',
+                        height: '48px',
+                        objectFit: 'cover',
+                        borderRadius: '50%',
+                        border: '1px solid #E5E7EB',
+                    },
+                    '.ss__product-quick-view__variants__swatch__value': {
+                        fontSize: '0.75em',
+                        color: '#374151',
+                        textAlign: 'center',
+                        maxWidth: '60px',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    },
+                },
+            },
+        },
+        '.ss__product-quick-view__section': {
+            '.ss__product-quick-view__section__title': {
+                fontWeight: 600,
+                fontSize: '0.9em',
+                color: '#374151',
+                marginBottom: '0.4em',
+            },
+            '.ss__product-quick-view__section__table': {
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontSize: '0.9em',
+                tr: {
+                    borderBottom: '1px solid #E5E7EB',
+                },
+                td: {
+                    padding: '0.4em 0',
+                    verticalAlign: 'top',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'anywhere',
+                },
+                'td:first-of-type': {
+                    color: '#6A7282',
+                    width: '40%',
+                },
+                'td:last-of-type': {
+                    textAlign: 'right',
+                    color: '#374151',
+                },
+                '.ss__product-quick-view__section__table__availability--in-stock': {
+                    color: '#10B981',
+                },
+                '.ss__product-quick-view__section__table__availability--out-of-stock': {
+                    color: '#DC2626',
+                },
+            },
+            '.ss__product-quick-view__section__description': {
+                fontSize: '0.9em',
+                color: '#374151',
+                lineHeight: 1.5,
+            },
+            '.ss__product-quick-view__section__features': {
+                margin: 0,
+                padding: '0 0 0 1.25em',
+                fontSize: '0.9em',
+                listStyle: 'disc',
+                li: {
+                    padding: '0.2em 0',
+                    color: '#374151',
+                },
+            },
+        },
+    });
+};
+export const ProductQuickView = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('productQuickView', globalTheme, defaultProps, properties);
+    const { controller, displayFields, className, internalClassName } = props;
+    const store = controller?.store?.productQuickView;
+    if (!store)
+        return null;
+    const product = store.product;
+    const error = store.error;
+    const loading = store.loading;
+    const open = product !== null;
+    const close = () => store.clear();
+    const styling = mergeStyles(props, defaultStyles);
+    // Lock body scroll while the quickview is open.
+    useEffect(() => {
+        if (!open)
+            return;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: classnames('ss__product-quick-view', className, internalClassName), ...styling, children: [_jsx(Overlay, { active: true, color: "rgba(0,0,0,0.7)", onClick: close }), _jsxs("div", { className: "ss__product-quick-view__panel", children: [_jsx("div", { className: "ss__product-quick-view__close", onClick: close, role: "button", "aria-label": "Close", children: _jsx(Icon, { icon: "close-thin", size: "16px" }) }), product ? (_jsx(ProductQuickViewBody, { product: product, loading: loading, error: error, controller: controller, displayFields: displayFields })) : (_jsx("div", { className: "ss__product-quick-view__loading", children: "Loading..." }))] })] }));
+});
+const ProductQuickViewBody = observer((props) => {
+    const { product, loading, error, controller, displayFields } = props;
+    const displayed = product.display;
+    const displayedCore = displayed.mappings?.core || {};
+    const variants = product.variants;
+    const selections = variants?.selections || [];
+    const displayedData = {
+        mappings: displayed.mappings,
+        attributes: displayed.attributes || {},
+    };
+    const allInfoRows = collectInfoRows(displayedData, displayFields);
+    const descriptionRow = allInfoRows.find((row) => row.rawKey.toLowerCase() === 'description');
+    const infoRows = allInfoRows.filter((row) => row.rawKey.toLowerCase() !== 'description');
+    const features = collectFeatures(displayedData);
+    // `addToCart` exists on Recommendation/Chat controllers but not on Search/Autocomplete.
+    const supportsAddToCart = typeof controller?.addToCart === 'function';
+    return (_jsxs("div", { children: [error && _jsx("div", { className: "ss__product-quick-view__error", children: error }), _jsxs("div", { className: "ss__product-quick-view__body", children: [_jsxs("div", { className: "ss__product-quick-view__left", children: [displayedCore.imageUrl ? (_jsx(Image, { className: "ss__product-quick-view__left__image", src: displayedCore.imageUrl, alt: displayedCore.name || '' })) : null, _jsxs("div", { className: "ss__product-quick-view__left__actions", children: [supportsAddToCart && (_jsx("div", { className: "ss__product-quick-view__left__actions__add-to-cart", children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
+                                                controller?.track?.product?.addToCart?.(product);
+                                                controller.addToCart(product);
+                                            } }) })), displayedCore.url && (_jsx("div", { className: "ss__product-quick-view__left__actions__go-to-product", children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track?.product?.click?.(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) }))] })] }), _jsxs("div", { className: "ss__product-quick-view__right", children: [_jsxs("div", { className: "ss__product-quick-view__title", children: [displayedCore.name && (_jsx("div", { className: "ss__product-quick-view__title__name", children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track?.product?.click?.(e, product), target: "_blank", rel: "noopener noreferrer", children: formatValue(displayedCore.name) })) : (formatValue(displayedCore.name)) })), displayedCore.brand != null && formatValue(displayedCore.brand) && (_jsx("div", { className: "ss__product-quick-view__title__brand", children: formatValue(displayedCore.brand) })), displayedCore.price != null && (_jsxs("div", { className: "ss__product-quick-view__title__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && (_jsx(Price, { value: displayedCore.msrp, lineThrough: true })), _jsx(Price, { value: displayedCore.price })] }))] }), selections.length > 0 && (_jsx("div", { className: "ss__product-quick-view__variants", children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: "ss__product-quick-view__variants__label", children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: "ss__product-quick-view__variants__swatches", children: selection.values.map((selectionValue) => {
+                                                const isUnavailable = !selectionValue.available;
+                                                const isSelected = selection.selected?.value === selectionValue.value;
+                                                return (_jsxs("div", { className: classnames('ss__product-quick-view__variants__swatch', {
+                                                        'ss__product-quick-view__variants__swatch--selected': isSelected,
+                                                        'ss__product-quick-view__variants__swatch--unavailable': isUnavailable,
+                                                    }), title: selectionValue.value, onClick: () => selection.select(selectionValue.value), children: [selectionValue.thumbnailImageUrl ? (_jsx(Image, { className: "ss__product-quick-view__variants__swatch__image", src: selectionValue.thumbnailImageUrl, alt: selectionValue.value })) : null, _jsx("span", { className: "ss__product-quick-view__variants__swatch__value", children: selectionValue.value })] }, selectionValue.value));
+                                            }) })] }, selection.field))) })), infoRows.length > 0 && (_jsxs("div", { className: "ss__product-quick-view__section", children: [_jsx("div", { className: "ss__product-quick-view__section__title", children: "Product Information" }), _jsx("table", { className: "ss__product-quick-view__section__table", children: _jsx("tbody", { children: infoRows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: row.label }), _jsx("td", { children: row.rawKey === 'availability' ? (_jsx("span", { className: classnames({
+                                                                'ss__product-quick-view__section__table__availability--in-stock': row.value === 'In Stock',
+                                                                'ss__product-quick-view__section__table__availability--out-of-stock': row.value === 'Out of Stock',
+                                                            }), children: row.value === 'In Stock' ? `✓ ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsxs("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && (_jsx(Price, { value: Number(displayedCore.msrp), lineThrough: true })), _jsx(Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: "ss__product-quick-view__section", children: [_jsx("div", { className: "ss__product-quick-view__section__title", children: "Description" }), _jsx("div", { className: "ss__product-quick-view__section__description", children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: "ss__product-quick-view__section", children: [_jsx("div", { className: "ss__product-quick-view__section__title", children: "Features" }), _jsx("ul", { className: "ss__product-quick-view__section__features", children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] })), loading && selections.length === 0 && infoRows.length === 0 && !descriptionRow && features.length === 0 && (_jsx("div", { className: "ss__product-quick-view__loading", children: "Loading product details..." }))] })] })] }));
+});

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

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

package/dist/esm/components/src/components/Organisms/ProductQuickView/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/ProductQuickView/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA8DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAiK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA4DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAiK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}

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

@@ -21,7 +21,6 @@ const defaultStyles = ({ width, height, theme }) => {
         right: '0',
         top: '0',
         zIndex: 1001,
-        pointerEvents: 'none',
         '& .ss__autocomplete-modal__inner': {
             position: 'absolute',
             left: 0,
@@ -36,7 +35,6 @@ const defaultStyles = ({ width, height, theme }) => {
             width: width,
             height: height,
             maxWidth: '100vw',
-            pointerEvents: 'auto',
         },
         '& .ss__overlay': {
             zIndex: 1000,

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

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

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

@@ -18,6 +18,12 @@ export function useAcRenderedInput({ input, controller, renderInput, buttonSelec
         });
     };
     useEffect(() => {
+        // track pointer-initiated focus to avoid rendering the overlay between mousedown and mouseup,
+        // which splits the click target to the nearest common ancestor instead of the input element
+        let pointerFocus = false;
+        const clearPointerFocus = () => {
+            pointerFocus = false;
+        };
         if (renderInput && buttonSelector) {
             let button;
             if (typeof buttonSelector == 'string') {
@@ -27,31 +33,75 @@ export function useAcRenderedInput({ input, controller, renderInput, buttonSelec
                 button = buttonSelector;
             }
             if (button) {
-                button.addEventListener('click', (e) => {
+                const onMousedown = () => {
+                    pointerFocus = true;
+                };
+                const onClickBtn = (e) => {
+                    pointerFocus = false;
                     e.stopPropagation();
                     onClick();
-                });
-                button.addEventListener('focus', () => onClick());
-                button.addEventListener('select', () => onClick());
+                };
+                const onFocusBtn = () => {
+                    if (!pointerFocus) {
+                        onClick();
+                    }
+                };
+                const onSelectBtn = () => onClick();
+                button.addEventListener('mousedown', onMousedown);
+                document.addEventListener('mouseup', clearPointerFocus, true);
+                button.addEventListener('click', onClickBtn);
+                button.addEventListener('focus', onFocusBtn);
+                button.addEventListener('select', onSelectBtn);
+                return () => {
+                    button.removeEventListener('mousedown', onMousedown);
+                    document.removeEventListener('mouseup', clearPointerFocus, true);
+                    button.removeEventListener('click', onClickBtn);
+                    button.removeEventListener('focus', onFocusBtn);
+                    button.removeEventListener('select', onSelectBtn);
+                };
             }
         }
         else {
             if (setActive) {
-                input.addEventListener('click', (e) => {
+                const onMousedown = () => {
+                    pointerFocus = true;
+                };
+                const onClickInput = (e) => {
+                    pointerFocus = false;
                     e.stopPropagation();
                     setActive(true);
-                });
-                input.addEventListener('focus', () => setActive(true));
-                input.addEventListener('select', () => setActive(true));
+                };
+                const onFocusInput = () => {
+                    if (!pointerFocus) {
+                        setActive(true);
+                    }
+                };
+                const onSelectInput = () => setActive(true);
+                input.addEventListener('mousedown', onMousedown);
+                document.addEventListener('mouseup', clearPointerFocus, true);
+                input.addEventListener('click', onClickInput);
+                input.addEventListener('focus', onFocusInput);
+                input.addEventListener('select', onSelectInput);
+                return () => {
+                    input.removeEventListener('mousedown', onMousedown);
+                    document.removeEventListener('mouseup', clearPointerFocus, true);
+                    input.removeEventListener('click', onClickInput);
+                    input.removeEventListener('focus', onFocusInput);
+                    input.removeEventListener('select', onSelectInput);
+                };
             }
         }
     }, []);
     // this is used to keep the values consistent between the native input and the rendered input
     useEffect(() => {
-        if (input !== _input) {
-            _input?.addEventListener('input', () => {
+        if (input !== _input && _input) {
+            const onInput = () => {
                 input.value = _input.value;
-            });
+            };
+            _input.addEventListener('input', onInput);
+            return () => {
+                _input.removeEventListener('input', onInput);
+            };
         }
     }, [_input]);
     return _input;

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAgB/E"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAmB/E"}

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

@@ -5,12 +5,14 @@ export function useMediaQuery(query, runOnCleanup) {
     const mediaQuery = window.matchMedia(query);
     const [match, setMatch] = useState(!!mediaQuery.matches);
     useEffect(() => {
+        // sync state immediately in case query changed
+        setMatch(!!mediaQuery.matches);
         const handler = () => setMatch(!!mediaQuery.matches);
         mediaQuery.addListener(handler);
         return () => {
             runOnCleanup instanceof Function && runOnCleanup();
             mediaQuery.removeListener(handler);
         };
-    }, []);
+    }, [query]);
     return match;
 }

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

@@ -55,6 +55,7 @@ export * from './components/Organisms/FacetsHorizontal';
 export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/MobileSidebar';
 export * from './components/Organisms/NoResults';
+export * from './components/Organisms/ProductQuickView';
 export * from './components/Organisms/Results';
 export * from './components/Organisms/Sidebar';
 export * from './components/Organisms/Toolbar';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAG5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AAEnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8BAA8B,CAAC;AAG7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAG5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,oDAAoD,CAAC;AACnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AAGzD,cAAc,SAAS,CAAC;AAGxB,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACN,aAAa,IAAI,2BAA2B,EAC5C,kBAAkB,IAAI,gCAAgC,GACtD,MAAM,qCAAqC,CAAC;AAG7C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/src/index.ts"],"names":[],"mappings":"AACA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAG5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AAEnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8BAA8B,CAAC;AAG7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAG5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,oDAAoD,CAAC;AACnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AAGzD,cAAc,SAAS,CAAC;AAGxB,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACN,aAAa,IAAI,2BAA2B,EAC5C,kBAAkB,IAAI,gCAAgC,GACtD,MAAM,qCAAqC,CAAC;AAG7C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC"}

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

@@ -59,6 +59,7 @@ export * from './components/Organisms/FacetsHorizontal';
 export * from './components/Organisms/FilterSummary';
 export * from './components/Organisms/MobileSidebar';
 export * from './components/Organisms/NoResults';
+export * from './components/Organisms/ProductQuickView';
 export * from './components/Organisms/Results';
 export * from './components/Organisms/Sidebar';
 export * from './components/Organisms/Toolbar';

package/dist/esm/components/src/providers/theme.d.ts

@@ -53,7 +53,7 @@ export type ThemeResponsiveComplete = ThemeResponsive & {
     default?: ThemeComponentsRestricted;
 };
 type WithCustomComponent<T> = {
-    [K in keyof T]: T[K] & {
+    [K in keyof T]: [unknown] extends [T[K]] ? T[K] : T[K] & {
         customComponent?: string;
     };
 };