@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/cjs/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetailTable = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const mobx_1 = require("mobx");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const ProductDetail_1 = require("../../Atoms/ProductDetail");
+const ProductDetail_2 = require("../../Atoms/ProductDetail/ProductDetail");
+const Price_1 = require("../../Atoms/Price");
+const Image_1 = require("../../Atoms/Image");
+const Rating_1 = require("../Rating");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '0.9em',
+        '& tr': {
+            borderBottom: '1px solid #eee',
+        },
+        '& tr:last-of-type': {
+            borderBottom: 'none',
+        },
+        '& th, & td': {
+            padding: '10px 0',
+            textAlign: 'left',
+            verticalAlign: 'top',
+        },
+        '& th': {
+            width: '40%',
+            paddingRight: '16px',
+            fontWeight: 500,
+            color: '#666',
+            textTransform: 'uppercase',
+            fontSize: '0.85em',
+            letterSpacing: '0.02em',
+        },
+        '& td': {
+            color: '#1a1a1a',
+            // Typed values render components whose defaults center them (Rating flex-centers its
+            // stars, Image stretches and letterboxes via objectFit) — left-align both so every
+            // display type lines up with the plain text values.
+            '& .ss__rating': {
+                justifyContent: 'flex-start',
+            },
+            '& .ss__image': {
+                alignItems: 'flex-start',
+                // Cap images at a row-scale thumbnail (width stays auto, preserving aspect ratio)
+                // so a full-size product image can't dwarf the table.
+                '& img': {
+                    maxHeight: '100px',
+                },
+            },
+        },
+    });
+};
+exports.ProductDetailTable = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('productDetailTable', globalTheme, defaultProps, properties);
+    const { result, displayFields, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('productDetailTable', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Render only the configured fields that resolve to a non-empty value (preserves the opt-in
+    // behaviour: with no displayFields, nothing renders).
+    const displayedFields = (displayFields || []).filter((detail) => (0, ProductDetail_2.renderDetailValue)((0, ProductDetail_2.getProductFieldValue)(result, detail.field)) !== '');
+    if (displayedFields.length === 0)
+        return null;
+    const renderValue = (detail) => {
+        const rawValue = (0, ProductDetail_2.getProductFieldValue)(result, detail.field);
+        const componentProps = { theme: props.theme, treePath, ...(0, utilities_1.defined)({ disableStyles }) };
+        switch (detail.type) {
+            case 'price': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Price_1.Price, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'rating': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Rating_1.Rating, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'image': {
+                // An image field may resolve to an array of URLs — display the first.
+                const src = Array.isArray(rawValue) || (0, mobx_1.isObservableArray)(rawValue) ? Array.from(rawValue)[0] : rawValue;
+                if (typeof src === 'string' && src) {
+                    return (0, jsx_runtime_1.jsx)(Image_1.Image, { src: src, alt: detail.label || detail.field, ...componentProps });
+                }
+                break;
+            }
+            case 'html':
+                return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, html: true, ...componentProps });
+        }
+        // 'text' (the default) — and the fallback when a typed value doesn't fit its type.
+        return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, ...componentProps });
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("table", { ...styling, className: (0, classnames_1.default)('ss__product-detail-table', className, internalClassName), children: (0, jsx_runtime_1.jsx)("tbody", { children: displayedFields.map((detail, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: detail.label ?? detail.field }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(detail) })] }, `${detail.field}-${index}`))) }) }) }));
+});

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

package/dist/cjs/components/src/components/Molecules/QuantityPicker/QuantityPicker.js

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuantityPicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        '&.ss__quantity-picker--disabled': {
+            opacity: 0.7,
+        },
+        '& .ss__quantity-picker__label-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+        },
+        '& .ss__quantity-picker__controls-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+        },
+        '& .ss__quantity-picker__input': {
+            width: '60px',
+            textAlign: 'center',
+            padding: '5px',
+            boxSizing: 'border-box',
+        },
+    });
+};
+exports.QuantityPicker = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        min: 1,
+        step: 1,
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('quantityPicker', globalTheme, defaultProps, properties);
+    const { value, startValue, min, max, step, disabled, hideButtons, label, onChange, disableStyles, className, internalClassName, theme: ______, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    // whole numbers only, never negative, within min/max
+    const minimum = Math.max(0, Math.trunc(min));
+    const clamp = (num) => {
+        let clamped = Math.trunc(num);
+        if (isNaN(clamped)) {
+            clamped = minimum;
+        }
+        clamped = Math.max(minimum, clamped);
+        if (typeof max == 'number') {
+            clamped = Math.min(Math.trunc(max), clamped);
+        }
+        return clamped;
+    };
+    // useState is called unconditionally (rules of hooks): a `value` prop that transitions between
+    // undefined and defined across renders must not shift hook order. In controlled mode the
+    // internal state is simply ignored and the quantity derives from the prop.
+    const [internalQuantity, setQuantityState] = (0, hooks_1.useState)(clamp(startValue ?? minimum));
+    const stateful = value === undefined;
+    const quantity = stateful ? internalQuantity : clamp(value);
+    // raw input text while typing - committed (clamped) on blur
+    const [editingValue, setEditingValue] = (0, hooks_1.useState)(undefined);
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('quantityPicker', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const commit = (e, newValue) => {
+        if (disabled) {
+            return;
+        }
+        const clamped = clamp(newValue);
+        if (stateful) {
+            setQuantityState(clamped);
+        }
+        if (clamped !== quantity) {
+            onChange && onChange(e, clamped);
+        }
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        quantityInput: {
+            attributes: {
+                'aria-label': 'quantity',
+            },
+        },
+        decrementButton: {
+            attributes: {
+                'aria-label': 'decrease quantity',
+            },
+        },
+        incrementButton: {
+            attributes: {
+                'aria-label': 'increase quantity',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_2.useLang)(_lang, {
+        quantity,
+        min: minimum,
+        max,
+        disabled,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const subProps = {
+        button: {
+            // default props
+            internalClassName: 'ss__quantity-picker__button',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__quantity-picker', { 'ss__quantity-picker--disabled': disabled }, className, internalClassName), ...additionalProps, children: [label && ((0, jsx_runtime_1.jsx)("div", { className: "ss__quantity-picker__label-wrapper", children: (0, jsx_runtime_1.jsx)("span", { className: "ss__quantity-picker__label", children: label }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__quantity-picker__controls-wrapper", children: [!hideButtons && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, name: "decrement", internalClassName: (0, classnames_1.default)(subProps.button.internalClassName, 'ss__quantity-picker__button--decrement'), disabled: disabled || quantity <= minimum, onClick: (e) => commit(e, quantity - step), icon: 'minus-thin', ...mergedLang.decrementButton?.attributes })), (0, jsx_runtime_1.jsx)("input", { className: "ss__quantity-picker__input", type: "number", inputMode: "numeric", min: minimum, max: max, step: step, value: editingValue ?? quantity, disabled: disabled, onInput: (e) => setEditingValue(e.target.value), onBlur: (e) => {
+                                if (editingValue !== undefined) {
+                                    const parsed = parseFloat(editingValue);
+                                    commit(e, isNaN(parsed) ? quantity : parsed);
+                                    setEditingValue(undefined);
+                                }
+                            }, ...mergedLang.quantityInput?.all }), !hideButtons && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, name: "increment", internalClassName: (0, classnames_1.default)(subProps.button.internalClassName, 'ss__quantity-picker__button--increment'), disabled: disabled || (typeof max == 'number' && quantity >= max), onClick: (e) => commit(e, quantity + step), icon: 'plus-thin', ...mergedLang.incrementButton?.attributes }))] })] }) }));
+});

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

package/dist/cjs/components/src/components/Molecules/Result/Result.js

@@ -51,6 +51,16 @@ const defaultStyles = () => {
                 background: 'rgba(255, 255, 255, 0.5)',
                 padding: '10px',
             },
+            '& .ss__result__quickview': {
+                position: 'absolute',
+                bottom: '10px',
+                right: '10px',
+                display: 'flex',
+                background: 'transparent',
+                border: 0,
+                padding: '5px',
+                cursor: 'pointer',
+            },
         },
         '& .ss__result__details': {
             padding: '10px',
@@ -81,9 +91,10 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         addToCartButtonSuccessTimeout: 2000,
         hideAddToCartButton: true,
         hideRating: true,
+        hideQuickviewButton: true,
     };
     const props = (0, utilities_1.mergeProps)('result', globalTheme, defaultProps, properties);
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, trackingRef, treePath, } = props;
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, internalClassName, layout, onClick, controller, hideVariantSelections, hideAddToCartButton, onAddToCartClick, addToCartButtonText, addToCartButtonSuccessText, addToCartButtonSuccessTimeout, hideRating, hideQuickviewButton, onQuickviewClick, trackingRef, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('result', {
         ...props,
         customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
@@ -166,6 +177,29 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath,
         },
+        quickviewButton: {
+            // default props
+            name: 'quickview',
+            internalClassName: 'ss__result__quickview',
+            icon: {
+                internalClassName: 'ss__result__quickview__icon',
+                icon: 'eye',
+                size: '20px',
+            },
+            onClick: (e) => {
+                if (onQuickviewClick) {
+                    onQuickviewClick(e, result);
+                }
+                controller?.quickview(result);
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
         button: {
             // default props
             internalClassName: 'ss__result__button--addToCart',
@@ -196,6 +230,11 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
+        quickviewButtonText: {
+            attributes: {
+                'aria-label': 'Quick View',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
@@ -205,9 +244,9 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
     }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     const isOnSale = Boolean(core?.msrp && core?.price && core?.price < core?.msrp);
     const renderPrices = controller?.store?.config?.asyncState?.product?.price ? result.state.priceFetched : true;
-    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", { ...styling, className: (0, classnames_1.default)('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__image-wrapper", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
-                            onClick && onClick(e);
-                        }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image }) })) : ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image })) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
+    return core ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("article", { ...styling, className: (0, classnames_1.default)('ss__result', `ss__result--${layout}`, { 'ss__result--sale': isOnSale }, className, internalClassName), ref: trackingRef, children: [!hideImage && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__result__image-wrapper", children: [(0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
+                                onClick && onClick(e);
+                            }, children: !hideBadge ? ((0, jsx_runtime_1.jsx)(OverlayBadge_1.OverlayBadge, { ...subProps.overlayBadge, controller: controller, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image }) })) : ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image })) }), !hideQuickviewButton && controller?.quickviewManager && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.quickviewButton, ...mergedLang.quickviewButtonText.attributes }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__result__details", children: [!hideBadge && ((0, jsx_runtime_1.jsx)(CalloutBadge_1.CalloutBadge, { ...subProps.calloutBadge, controller: controller })), !hideTitle && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__title", children: (0, jsx_runtime_1.jsx)("a", { href: core.url, onClick: (e) => {
                                     onClick && onClick(e);
                                 }, dangerouslySetInnerHTML: {
                                     __html: displayName || '',

package/dist/cjs/components/src/components/Molecules/Slideout/Slideout.js

@@ -92,8 +92,11 @@ exports.Slideout = (0, mobx_react_lite_1.observer)((properties) => {
         document.body.style.overflow = newActive ? 'hidden' : '';
         onChange && onChange(newActive);
     };
-    //this is used to update active state if active prop is changed from parent component.
-    (0, hooks_1.useEffect)(() => {
+    // Sync internal state when the active prop changes from the parent component. This is a
+    // layout effect so the content commit is scheduled before consumers' passive effects run —
+    // a plain effect would mount the content one tick later, after a parent that opened the
+    // slideout has already tried (and failed) to move focus into it.
+    (0, hooks_1.useLayoutEffect)(() => {
         setRenderContent(Boolean(active));
         setActive(Boolean(active));
     }, [active]);

package/dist/cjs/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -15,6 +15,8 @@ const Image_1 = require("../../Atoms/Image");
 const Button_1 = require("../../Atoms/Button");
 const hooks_2 = require("../../../hooks");
 const deepmerge_1 = __importDefault(require("deepmerge"));
+// Pointer travel (px) past which a press is treated as a drag rather than a click.
+const DRAG_CLICK_THRESHOLD = 5;
 const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayNavigation = false, showNavigation }) => {
     return (0, react_1.css)({
         position: 'relative',
@@ -161,13 +163,14 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         centerInsufficientSlides: true,
         slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
+        startIndex: 0,
         gap: 10,
         ariaLabel: 'slideshow',
         touchDragging: true,
         dragThreshold: 50,
     };
     const props = (0, utilities_1.mergeProps)('slideshow', globalTheme, defaultProps, properties);
-    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, gap, treePath, overlayNavigation, dragThreshold, } = props;
+    const { className, slides, fallbackImage, autoPlay, autoPlayInterval, showNavigation, showPagination, loop, alwaysShowNavigation, slidesToShow, slideImageAlt, centerInsufficientSlides, ariaLabel, ariaLabelledBy, disableStyles, slideWidth, startIndex, gap, treePath, overlayNavigation, dragThreshold, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -242,12 +245,17 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    const [currentIndex, setCurrentIndex] = (0, hooks_1.useState)(0);
+    const [currentIndex, setCurrentIndex] = (0, hooks_1.useState)(startIndex ?? 0);
     const [isPlaying, setIsPlaying] = (0, hooks_1.useState)(autoPlay);
     const [containerWidth, setContainerWidth] = (0, hooks_1.useState)(0);
     const intervalRef = (0, hooks_1.useRef)(null);
     const slideshowRef = (0, hooks_1.useRef)(null);
     const trackRef = (0, hooks_1.useRef)(null);
+    // Tracks whether the pointer moved during the current press. The browser fires a `click`
+    // after a drag's `mouseup`, by which point `isDragging` state has already been reset — so a
+    // swipe would otherwise be treated as a click (e.g. opening a lightbox). This synchronous ref
+    // lets `handleSlideClick` suppress that trailing click.
+    const hasDraggedRef = (0, hooks_1.useRef)(false);
     // Track container width for slideWidth-based visible slide calculation
     (0, hooks_1.useEffect)(() => {
         const container = trackRef.current?.parentElement;
@@ -300,6 +308,23 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     const computedSlidesToShow = slideWidth && containerWidth > 0 ? Math.max(1, Math.floor(containerWidth / (slideWidth + (gap ?? 0)))) : slidesToShow ?? 4;
     const visibleSlides = Math.min(computedSlidesToShow, totalSlides);
     const maxIndex = Math.max(0, totalSlides - visibleSlides);
+    // Navigate to startIndex when it changes (e.g. a consumer syncing the active slide to external
+    // state), clamped to the valid range. Updates the index in place rather than remounting.
+    // maxIndex must be a dependency: in slideWidth mode it is derived from the slidesToShow
+    // fallback until the container is measured (after the first render), so the mount-time clamp
+    // can land short and needs to re-run when the real value arrives. But once the requested
+    // startIndex has been satisfied the effect must go inert, or every resize that shifts
+    // maxIndex would yank the shopper back to startIndex mid-navigation.
+    const appliedStartIndexRef = (0, hooks_1.useRef)(undefined);
+    (0, hooks_1.useEffect)(() => {
+        const target = Math.max(0, startIndex ?? 0);
+        if (appliedStartIndexRef.current === target)
+            return;
+        setCurrentIndex(Math.min(target, maxIndex));
+        if (target <= maxIndex) {
+            appliedStartIndexRef.current = target;
+        }
+    }, [startIndex, maxIndex]);
     // Calculate slide groups for pagination
     const slideGroups = [];
     for (let i = 0; i <= maxIndex; i += slidesToMove) {
@@ -345,6 +370,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
+        hasDraggedRef.current = false;
         setIsPlaying(false);
         setIsDragging(true);
         setStartX(clientX);
@@ -359,6 +385,11 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
             return;
         setCurrentX(clientX);
         const diff = clientX - startX;
+        // Past a few pixels of travel this is a drag, not a click — flag it so the trailing
+        // click (fired after mouseup/touchend) doesn't trigger slide onClick handlers.
+        if (Math.abs(diff) > DRAG_CLICK_THRESHOLD) {
+            hasDraggedRef.current = true;
+        }
         setDragOffset(diff);
     };
     const handleDragEnd = () => {
@@ -440,7 +471,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     };
     // Handle image click
     const handleSlideClick = (slide, index) => {
-        if (slide.onClick && !isDragging) {
+        if (slide.onClick && !isDragging && !hasDraggedRef.current) {
             slide.onClick(slide, index);
         }
     };
@@ -448,7 +479,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     const handleSlideKeyDown = (event, slide, index) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            handleSlideClick(slide, index);
+            if (slide.onClick && !isDragging) {
+                slide.onClick(slide, index);
+            }
         }
     };
     // Keyboard navigation
@@ -582,7 +615,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                         }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
                         // Touch events
                         // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {

package/dist/cjs/components/src/components/Molecules/Swatches/Swatches.js

@@ -122,7 +122,7 @@ exports.Swatches = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             internalClassName: 'ss__swatches__slideshow',
             loop: false,
-            slidesToShow: 6, // Add explicit slidesToShow
+            slideWidth: 20, // Fixed swatch size so previews stay a consistent, legible size regardless of container width
             slidesToMove: 1, // Add explicit slidesToMove
             gap: 8, // Add smaller gap
             showNavigation: true, // Enable navigation

package/dist/cjs/components/src/components/Molecules/VariantSelection/VariantSelection.js

@@ -154,7 +154,13 @@ exports.VariantSelection = (0, mobx_react_lite_1.observer)((properties) => {
                         'ss__variant-selection__option--selected': selected,
                         'ss__variant-selection__option--disabled': val.disabled,
                         'ss__variant-selection__option--unavailable': val.available === false,
-                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => (0, hooks_1.useA11y)(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+                    }), onClick: (e) => {
+                        if (!val.disabled) {
+                            onSelectHandler(e, val);
+                            // close the dropdown on selection
+                            toggleOpen?.(e, false);
+                        }
+                    }, ref: (e) => (0, hooks_1.useA11y)(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
             }) }));
     };
     return selection.values.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {

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

@@ -42,23 +42,23 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
     const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return (0, react_1.css)({
         '.ss__autocomplete__column.ss__autocomplete__column--c1': {
-            flex: column1?.width == 'auto' ? '1 1 auto' : `1 0 ${column1?.width}`,
-            maxWidth: column1?.width == 'auto' ? 'auto' : column1?.width,
+            flex: column1?.width == 'auto' ? '1 1 0' : `1 0 ${column1?.width}`,
+            maxWidth: column1?.width == 'auto' ? 'none' : column1?.width,
             alignContent: column1?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c2': {
-            flex: column2?.width == 'auto' ? '1 1 auto' : `1 0 ${column2?.width}`,
-            maxWidth: column2?.width == 'auto' ? 'auto' : column2?.width,
+            flex: column2?.width == 'auto' ? '1 1 0' : `1 0 ${column2?.width}`,
+            maxWidth: column2?.width == 'auto' ? 'none' : column2?.width,
             alignContent: column2?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c3': {
-            flex: column3?.width == 'auto' ? '1 1 auto' : `1 0 ${column3?.width}`,
-            maxWidth: column3?.width == 'auto' ? 'auto' : column3?.width,
+            flex: column3?.width == 'auto' ? '1 1 0' : `1 0 ${column3?.width}`,
+            maxWidth: column3?.width == 'auto' ? 'none' : column3?.width,
             alignContent: column3?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c4': {
-            flex: column4?.width == 'auto' ? '1 1 auto' : `1 0 ${column4?.width}`,
-            maxWidth: column4?.width == 'auto' ? 'auto' : column4?.width,
+            flex: column4?.width == 'auto' ? '1 1 0' : `1 0 ${column4?.width}`,
+            maxWidth: column4?.width == 'auto' ? 'none' : column4?.width,
             alignContent: column4?.alignContent,
         },
         '.ss__autocomplete__column, .ss__autocomplete__row': {

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

@@ -478,11 +478,7 @@ const FacetContent = (props) => {
     // used by the submit button, the Enter key, and (optionally) blur, so it works even when the
     // submit button isn't rendered (e.g. when rangeInputsSubmitButtonText is an empty string).
     const submitRange = () => {
-        if (facet?.services?.urlManager &&
-            typeof low === 'number' &&
-            Number.isFinite(low) &&
-            typeof high === 'number' &&
-            Number.isFinite(high)) {
+        if (facet?.services?.urlManager && typeof low === 'number' && Number.isFinite(low) && typeof high === 'number' && Number.isFinite(high)) {
             let currentLow = low;
             let currentHigh = high;
             //adjust ranges if high and low have swapped.