@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -51,6 +51,25 @@ const defaultStyles = () => {
                 background: 'rgba(255, 255, 255, 0.5)',
                 padding: '10px',
             },
+            '& .ss__result__discuss-product-button': {
+                position: 'absolute',
+                bottom: '8px',
+                left: '8px',
+                padding: '4px',
+                border: 'none',
+                background: 'rgba(255, 255, 255, 0.5)',
+                cursor: 'pointer',
+            },
+            '& .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 +100,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, discussProductIcon, onDiscussClick, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('result', {
         ...props,
         customComponent: props.customComponent && props.customComponent !== 'Result' ? props.customComponent : undefined,
@@ -143,7 +163,7 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             internalClassName: 'ss__result__image',
             alt: core?.name || '',
-            src: core?.imageUrl || '',
+            src: core?.imageUrl || core?.thumbnailImageUrl || '',
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -166,6 +186,40 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath,
         },
+        discussProductButton: {
+            // default props
+            internalClassName: 'ss__result__discuss-product-button',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            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 +250,17 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
+        discussProductButton: {
+            attributes: {
+                'aria-label': 'Discuss this product',
+                title: 'Discuss this product',
+            },
+        },
+        quickviewButtonText: {
+            attributes: {
+                'aria-label': 'Quick View',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
@@ -205,13 +270,34 @@ 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 })) }), discussProductIcon && ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.discussProductButton, icon: discussProductIcon, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (onDiscussClick) {
+                                    onDiscussClick(e, result);
+                                }
+                                else if (controller?.type === 'chat') {
+                                    // rendered inside a Chat — go straight to the controller
+                                    controller.productQuery(result);
+                                }
+                                else {
+                                    // otherwise hand off to an integrated Chat via the global bus,
+                                    // which the integration layer wires up (see setupEvents)
+                                    const fire = window?.athos?.fire;
+                                    if (typeof fire === 'function') {
+                                        fire('controller/chat/productQuery', { result });
+                                    }
+                                    else {
+                                        controller?.log?.warn('discussProductIcon requires an onDiscussClick handler or an integrated Chat');
+                                    }
+                                }
+                            }, ...mergedLang.discussProductButton.all })), !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 || '',
-                                } }) })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ...subProps.rating }), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price, name: 'price' })] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price })) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
+                                } }) })), !hideRating && (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ...subProps.rating }), !hidePricing && renderPrices && core.price && core.price > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__pricing", children: isOnSale ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.msrp, lineThrough: true, name: 'msrp' }), "\u00A0", (0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price, name: 'price' })] })) : ((0, jsx_runtime_1.jsx)(Price_1.Price, { ...subProps.price, value: core.price })) })) : null, (0, utilities_1.cloneWithProps)(detailSlot, { result, treePath }), !hideVariantSelections && result.variants?.selections?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__details__variant-selection", children: result.variants?.selections.map((selection) => {
                                 return ((0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { ...subProps.variantSelection, type: selection.type, selection: selection }));
                             }) })) : null, !hideAddToCartButton && ((0, jsx_runtime_1.jsx)("div", { className: "ss__result__add-to-cart-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.button, ...mergedLang.addToCartButtonText.all }) }))] })] }) })) : null;
 });

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

@@ -82,7 +82,15 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
         //passed in properties
         ...properties?.closeSearchButton,
     };
-    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, } = props;
+    props.chatButton = {
+        //defaults
+        ...defaultProps.chatButton,
+        //theme
+        ...props.chatButton,
+        //passed in properties
+        ...properties?.chatButton,
+    };
+    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, chatButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, hideChatButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('searchInput', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -147,6 +155,19 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props?.theme,
             treePath,
         },
+        chatButton: {
+            // default props
+            ...chatButton,
+            internalClassName: 'ss__search-input__button--chat-button',
+            name: 'chat',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
     };
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
@@ -171,6 +192,11 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
                 'aria-label': 'Submit Search',
             },
         },
+        chatButton: {
+            attributes: {
+                'aria-label': 'Open Chat',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
@@ -180,5 +206,5 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
                             setInputValue(e.target.value || '');
                         }
                         onChange && onChange(e);
-                    }, disabled: disabled }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, !hideSubmitSearchButton && submitSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
+                    }, disabled: disabled }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, !hideChatButton && chatButton?.icon ? (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.chatButton, ...mergedLang.chatButton.all }) : null, !hideSubmitSearchButton && submitSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
 });

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

@@ -75,25 +75,27 @@ exports.Slideout = (0, mobx_react_lite_1.observer)((properties) => {
     // state
     const [isActive, setActive] = (0, hooks_1.useState)(Boolean(active));
     const [renderContent, setRenderContent] = (0, hooks_1.useState)(Boolean(active));
-    const toggleActive = () => {
-        const newActive = !isActive;
-        if (isActive) {
-            setActive(false);
-            if (rerender) {
-                setTimeout(() => {
-                    setRenderContent(false);
-                }, 250);
-            }
-        }
-        else {
-            setActive(true);
+    const isActiveRef = (0, hooks_1.useRef)(isActive);
+    isActiveRef.current = isActive;
+    const toggleActive = (force) => {
+        const next = typeof force === 'boolean' ? force : !isActiveRef.current;
+        setActive(next);
+        if (next) {
             setRenderContent(true);
         }
-        document.body.style.overflow = newActive ? 'hidden' : '';
-        onChange && onChange(newActive);
+        else if (rerender) {
+            setTimeout(() => {
+                setRenderContent(false);
+            }, 250);
+        }
+        document.body.style.overflow = next ? 'hidden' : '';
+        onChange && onChange(next);
     };
-    //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]);
@@ -103,19 +105,16 @@ exports.Slideout = (0, mobx_react_lite_1.observer)((properties) => {
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     (0, hooks_1.useEffect)(() => {
-        if (buttonSelector) {
-            let button;
-            if (typeof buttonSelector == 'string') {
-                button = document.querySelector(buttonSelector);
-            }
-            else {
-                button = buttonSelector;
-            }
-            if (button) {
-                button.addEventListener('click', () => toggleActive());
-            }
-        }
-    }, []);
+        if (!buttonSelector)
+            return;
+        // string selectors bind to every matching element
+        const targets = typeof buttonSelector == 'string' ? Array.from(document.querySelectorAll(buttonSelector)) : [buttonSelector];
+        const handler = () => toggleActive();
+        targets.forEach((target) => target.addEventListener('click', handler));
+        return () => {
+            targets.forEach((target) => target.removeEventListener('click', handler));
+        };
+    }, [buttonSelector]);
     return isVisible || !rerender ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive, active: isActive, treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath }) }))), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive, active: isActive, treePath }) }), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
+                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive, active: isActive, treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath }) }))), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive, active: isActive, treePath }) }), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...subProps.overlay, active: isActive, onClick: () => toggleActive(false) })] })) : null;
 });

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) => {
@@ -597,6 +630,10 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                         // @ts-ignore - mouse events
                         onMouseDown: touchDragging
                             ? (event) => {
+                                // Only initiate dragging with the primary (left) mouse button.
+                                // Right/middle clicks should not start a drag (e.g. opening the context menu).
+                                if (event.button !== 0)
+                                    return;
                                 event.preventDefault();
                                 handleDragStart(event.clientX);
                             }

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': {