@athoscommerce/snap-preact 1.2.3-beta.4 → 1.2.3-beta.6

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

@@ -0,0 +1,461 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductQuickView = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var Overlay_1 = require("../../Atoms/Overlay");
+var Image_1 = require("../../Atoms/Image");
+var Button_1 = require("../../Atoms/Button");
+var Price_1 = require("../../Atoms/Price");
+var Icon_1 = require("../../Atoms/Icon");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+// Fields that have dedicated rendering on the product card; skip them in the info table.
+var 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.
+var PREFERRED_INFO_ORDER = ['material', 'fit', 'color', 'sizes', 'size', 'category', 'rating', 'availability'];
+var FEATURE_KEYS = ['features', 'feature_list', 'productFeatures', 'product_features', 'highlights'];
+var formatLabel = function (key) {
+    return key
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .trim();
+};
+var stripHtml = function (str) { return str.replace(/<[^>]*>/g, ''); };
+var formatValue = function (value) {
+    if (Array.isArray(value)) {
+        return stripHtml(value.filter(function (v) { return 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') {
+        var trimmed = value.trim();
+        if ((trimmed.startsWith('[') && trimmed.endsWith(']')) || (trimmed.startsWith('{') && trimmed.endsWith('}'))) {
+            try {
+                var parsed = JSON.parse(trimmed);
+                if (Array.isArray(parsed)) {
+                    return stripHtml(parsed.filter(function (v) { return v != null && v !== ''; }).join(', '));
+                }
+            }
+            catch (_a) {
+                // fall through — value wasn't valid JSON, just treat it as a string
+            }
+        }
+    }
+    return stripHtml(String(value));
+};
+var collectFeatures = function (display) {
+    var attributes = (display === null || display === void 0 ? void 0 : display.attributes) || {};
+    for (var _i = 0, FEATURE_KEYS_1 = FEATURE_KEYS; _i < FEATURE_KEYS_1.length; _i++) {
+        var key = FEATURE_KEYS_1[_i];
+        var raw = attributes[key];
+        if (Array.isArray(raw) && raw.length > 0) {
+            return raw.map(function (v) { return String(v); }).filter(Boolean);
+        }
+        if (typeof raw === 'string' && raw.trim()) {
+            return raw
+                .split(/\r?\n|,/)
+                .map(function (v) { return v.trim(); })
+                .filter(Boolean);
+        }
+    }
+    return [];
+};
+var collectInfoRows = function (display, displayFields) {
+    var _a;
+    var core = ((_a = display === null || display === void 0 ? void 0 : display.mappings) === null || _a === void 0 ? void 0 : _a.core) || {};
+    var attributes = (display === null || display === void 0 ? void 0 : display.attributes) || {};
+    var filterByDisplayFields = displayFields && displayFields.length > 0;
+    var displayFieldsLower = filterByDisplayFields ? displayFields.map(function (f) { return f.toLowerCase(); }) : [];
+    var merged = {};
+    // When displayFields is specified, include matching core fields that are normally skipped.
+    if (filterByDisplayFields) {
+        Object.entries(core).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (displayFieldsLower.includes(key.toLowerCase()) && value != null) {
+                merged[key] = value;
+            }
+        });
+    }
+    // Pull selected core fields (rating + availability) regardless.
+    if (core.rating != null) {
+        var rating = core.rating;
+        var ratingCount = core.ratingCount;
+        merged.rating = ratingCount ? "".concat(rating, "/5.0 (").concat(ratingCount, " reviews)") : "".concat(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(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (!filterByDisplayFields && CARD_FIELDS.has(key))
+            return;
+        if (FEATURE_KEYS.includes(key))
+            return;
+        var formatted = formatValue(value);
+        if (!formatted)
+            return;
+        merged[key] = formatted;
+    });
+    var seen = new Set();
+    var ordered = [];
+    PREFERRED_INFO_ORDER.forEach(function (preferred) {
+        var match = Object.keys(merged).find(function (k) { return 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(function (key) {
+        if (seen.has(key))
+            return;
+        seen.add(key);
+        ordered.push({ key: key, rawKey: key, label: formatLabel(key), value: formatValue(merged[key]) });
+    });
+    if (filterByDisplayFields) {
+        var filtered = ordered.filter(function (row) { return displayFieldsLower.includes(row.rawKey.toLowerCase()); });
+        filtered.sort(function (a, b) { return displayFieldsLower.indexOf(a.rawKey.toLowerCase()) - displayFieldsLower.indexOf(b.rawKey.toLowerCase()); });
+        return filtered;
+    }
+    return ordered;
+};
+var defaultStyles = function () {
+    return (0, react_1.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',
+                },
+            },
+        },
+    });
+};
+exports.ProductQuickView = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('productQuickView', globalTheme, defaultProps, properties);
+    var controller = props.controller, displayFields = props.displayFields, className = props.className, internalClassName = props.internalClassName;
+    var store = (_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.productQuickView;
+    if (!store)
+        return null;
+    var product = store.product;
+    var error = store.error;
+    var loading = store.loading;
+    var open = product !== null;
+    var close = function () { return store.clear(); };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Lock body scroll while the quickview is open.
+    (0, hooks_1.useEffect)(function () {
+        if (!open)
+            return;
+        var previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return function () {
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [open]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__product-quick-view', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { active: true, color: "rgba(0,0,0,0.7)", onClick: close }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__panel", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__close", onClick: close, role: "button", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close-thin", size: "16px" }) }), product ? ((0, jsx_runtime_1.jsx)(ProductQuickViewBody, { product: product, loading: loading, error: error, controller: controller, displayFields: displayFields })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__loading", children: "Loading..." }))] })] })));
+});
+var ProductQuickViewBody = (0, mobx_react_lite_1.observer)(function (props) {
+    var _a;
+    var product = props.product, loading = props.loading, error = props.error, controller = props.controller, displayFields = props.displayFields;
+    var displayed = product.display;
+    var displayedCore = ((_a = displayed.mappings) === null || _a === void 0 ? void 0 : _a.core) || {};
+    var variants = product.variants;
+    var selections = (variants === null || variants === void 0 ? void 0 : variants.selections) || [];
+    var displayedData = {
+        mappings: displayed.mappings,
+        attributes: displayed.attributes || {},
+    };
+    var allInfoRows = collectInfoRows(displayedData, displayFields);
+    var descriptionRow = allInfoRows.find(function (row) { return row.rawKey.toLowerCase() === 'description'; });
+    var infoRows = allInfoRows.filter(function (row) { return row.rawKey.toLowerCase() !== 'description'; });
+    var features = collectFeatures(displayedData);
+    // `addToCart` exists on Recommendation/Chat controllers but not on Search/Autocomplete.
+    var supportsAddToCart = typeof (controller === null || controller === void 0 ? void 0 : controller.addToCart) === 'function';
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [error && (0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__error", children: error }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__left", children: [displayedCore.imageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: "ss__product-quick-view__left__image", src: displayedCore.imageUrl, alt: displayedCore.name || '' })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__left__actions", children: [supportsAddToCart && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__left__actions__add-to-cart", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Add to Cart', onClick: function () {
+                                                var _a, _b, _c;
+                                                (_c = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.addToCart) === null || _c === void 0 ? void 0 : _c.call(_b, product);
+                                                controller.addToCart(product);
+                                            } }) })), displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__left__actions__go-to-product", children: (0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { var _a, _b, _c; return (_c = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click) === null || _c === void 0 ? void 0 : _c.call(_b, e, product); }, target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__title", children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__title__name", children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { var _a, _b, _c; return (_c = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.track) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.click) === null || _c === void 0 ? void 0 : _c.call(_b, e, product); }, target: "_blank", rel: "noopener noreferrer", children: formatValue(displayedCore.name) })) : (formatValue(displayedCore.name)) })), displayedCore.brand != null && formatValue(displayedCore.brand) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__title__brand", children: formatValue(displayedCore.brand) })), displayedCore.price != null && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__title__price", children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && ((0, jsx_runtime_1.jsx)(Price_1.Price, { value: displayedCore.msrp, lineThrough: true })), (0, jsx_runtime_1.jsx)(Price_1.Price, { value: displayedCore.price })] }))] }), selections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__variants", children: selections.map(function (selection) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__variants__label", children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__variants__swatches", children: selection.values.map(function (selectionValue) {
+                                                var _a;
+                                                var isUnavailable = !selectionValue.available;
+                                                var isSelected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) === selectionValue.value;
+                                                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('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: function () { return selection.select(selectionValue.value); }, children: [selectionValue.thumbnailImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: "ss__product-quick-view__variants__swatch__image", src: selectionValue.thumbnailImageUrl, alt: selectionValue.value })) : null, (0, jsx_runtime_1.jsx)("span", { className: "ss__product-quick-view__variants__swatch__value", children: selectionValue.value })] }, selectionValue.value));
+                                            }) })] }, selection.field)); }) })), infoRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__section", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__section__title", children: "Product Information" }), (0, jsx_runtime_1.jsx)("table", { className: "ss__product-quick-view__section__table", children: (0, jsx_runtime_1.jsx)("tbody", { children: infoRows.map(function (row) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: row.label }), (0, jsx_runtime_1.jsx)("td", { children: row.rawKey === 'availability' ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
+                                                                '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' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && ((0, jsx_runtime_1.jsx)(Price_1.Price, { value: Number(displayedCore.msrp), lineThrough: true })), (0, jsx_runtime_1.jsx)(Price_1.Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key)); }) }) })] })), descriptionRow && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__section", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__section__title", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__section__description", children: descriptionRow.value })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__product-quick-view__section", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__section__title", children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: "ss__product-quick-view__section__features", children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] })), loading && selections.length === 0 && infoRows.length === 0 && !descriptionRow && features.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__product-quick-view__loading", children: "Loading product details..." }))] })] })] }));
+});

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

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

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

package/dist/cjs/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/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -40,7 +40,6 @@ var defaultStyles = function (_a) {
             right: '0',
             top: '0',
             zIndex: 1001,
-            pointerEvents: 'none',
             '& .ss__autocomplete-modal__inner': {
                 position: 'absolute',
                 left: 0,
@@ -55,7 +54,6 @@ var defaultStyles = function (_a) {
                 width: width,
                 height: height,
                 maxWidth: '100vw',
-                pointerEvents: 'auto',
             },
             '& .ss__overlay': {
                 zIndex: 1000,

package/dist/cjs/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/cjs/components/src/hooks/useAcRenderedInput.js

@@ -69,40 +69,90 @@ function useAcRenderedInput(_a) {
         }); });
     };
     (0, hooks_1.useEffect)(function () {
+        // 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
+        var pointerFocus = false;
+        var clearPointerFocus = function () {
+            pointerFocus = false;
+        };
         if (renderInput && buttonSelector) {
-            var button = void 0;
+            var button_1;
             if (typeof buttonSelector == 'string') {
-                button = document.querySelector(buttonSelector);
+                button_1 = document.querySelector(buttonSelector);
             }
             else {
-                button = buttonSelector;
+                button_1 = buttonSelector;
             }
-            if (button) {
-                button.addEventListener('click', function (e) {
+            if (button_1) {
+                var onMousedown_1 = function () {
+                    pointerFocus = true;
+                };
+                var onClickBtn_1 = function (e) {
+                    pointerFocus = false;
                     e.stopPropagation();
                     onClick();
-                });
-                button.addEventListener('focus', function () { return onClick(); });
-                button.addEventListener('select', function () { return onClick(); });
+                };
+                var onFocusBtn_1 = function () {
+                    if (!pointerFocus) {
+                        onClick();
+                    }
+                };
+                var onSelectBtn_1 = function () { return onClick(); };
+                button_1.addEventListener('mousedown', onMousedown_1);
+                document.addEventListener('mouseup', clearPointerFocus, true);
+                button_1.addEventListener('click', onClickBtn_1);
+                button_1.addEventListener('focus', onFocusBtn_1);
+                button_1.addEventListener('select', onSelectBtn_1);
+                return function () {
+                    button_1.removeEventListener('mousedown', onMousedown_1);
+                    document.removeEventListener('mouseup', clearPointerFocus, true);
+                    button_1.removeEventListener('click', onClickBtn_1);
+                    button_1.removeEventListener('focus', onFocusBtn_1);
+                    button_1.removeEventListener('select', onSelectBtn_1);
+                };
             }
         }
         else {
             if (setActive) {
-                input.addEventListener('click', function (e) {
+                var onMousedown_2 = function () {
+                    pointerFocus = true;
+                };
+                var onClickInput_1 = function (e) {
+                    pointerFocus = false;
                     e.stopPropagation();
                     setActive(true);
-                });
-                input.addEventListener('focus', function () { return setActive(true); });
-                input.addEventListener('select', function () { return setActive(true); });
+                };
+                var onFocusInput_1 = function () {
+                    if (!pointerFocus) {
+                        setActive(true);
+                    }
+                };
+                var onSelectInput_1 = function () { return setActive(true); };
+                input.addEventListener('mousedown', onMousedown_2);
+                document.addEventListener('mouseup', clearPointerFocus, true);
+                input.addEventListener('click', onClickInput_1);
+                input.addEventListener('focus', onFocusInput_1);
+                input.addEventListener('select', onSelectInput_1);
+                return function () {
+                    input.removeEventListener('mousedown', onMousedown_2);
+                    document.removeEventListener('mouseup', clearPointerFocus, true);
+                    input.removeEventListener('click', onClickInput_1);
+                    input.removeEventListener('focus', onFocusInput_1);
+                    input.removeEventListener('select', onSelectInput_1);
+                };
             }
         }
     }, []);
     // this is used to keep the values consistent between the native input and the rendered input
     (0, hooks_1.useEffect)(function () {
-        if (input !== _input) {
-            _input === null || _input === void 0 ? void 0 : _input.addEventListener('input', function () {
+        if (input !== _input && _input) {
+            var onInput_1 = function () {
                 input.value = _input.value;
-            });
+            };
+            _input.addEventListener('input', onInput_1);
+            return function () {
+                _input.removeEventListener('input', onInput_1);
+            };
         }
     }, [_input]);
     return _input;

package/dist/cjs/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/cjs/components/src/hooks/useMediaQuery.js

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