@athoscommerce/snap-preact 1.10.1-beta.150 → 1.12.0

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/{ChatResult → QuantityPicker}/index.js

@@ -14,4 +14,4 @@ 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("./ChatResult"), exports);
+__exportStar(require("./QuantityPicker"), exports);

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

@@ -92,22 +92,18 @@ exports.RadioList = (0, mobx_react_lite_1.observer)((properties) => {
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // selection state
     const [selection, setSelection] = (0, react_2.useState)(selected);
-    // original selection state
-    const [originalSelected] = (0, react_2.useState)(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, react_2.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (onSelect) {
             onSelect(e, option);

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

@@ -51,13 +51,14 @@ const defaultStyles = () => {
                 background: 'rgba(255, 255, 255, 0.5)',
                 padding: '10px',
             },
-            '& .ss__result__discuss-product-button': {
+            '& .ss__result__quickview': {
                 position: 'absolute',
-                bottom: '8px',
-                left: '8px',
-                padding: '4px',
-                border: 'none',
-                background: 'rgba(255, 255, 255, 0.5)',
+                bottom: '10px',
+                right: '10px',
+                display: 'flex',
+                background: 'transparent',
+                border: 0,
+                padding: '5px',
                 cursor: 'pointer',
             },
         },
@@ -90,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, discussProductIcon, onDiscussClick, } = 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,
@@ -152,7 +154,7 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             internalClassName: 'ss__result__image',
             alt: core?.name || '',
-            src: core?.imageUrl || core?.thumbnailImageUrl || '',
+            src: core?.imageUrl || '',
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -175,9 +177,21 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath,
         },
-        discussProductButton: {
+        quickviewButton: {
             // default props
-            internalClassName: 'ss__result__discuss-product-button',
+            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,
@@ -216,10 +230,9 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
         addToCartButtonText: {
             value: addedToCart ? addToCartButtonSuccessText : addToCartButtonText,
         },
-        discussProductButton: {
+        quickviewButtonText: {
             attributes: {
-                'aria-label': 'Discuss this product',
-                title: 'Discuss this product',
+                'aria-label': 'Quick View',
             },
         },
     };
@@ -233,32 +246,11 @@ exports.Result = (0, mobx_react_lite_1.observer)((properties) => {
     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.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 }))] })), (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) => {
+                            }, 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 || '',
-                                } }) })), !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,15 +82,7 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
         //passed in properties
         ...properties?.closeSearchButton,
     };
-    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 { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, 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;
@@ -155,19 +147,6 @@ 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
@@ -192,11 +171,6 @@ 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 || {});
@@ -206,5 +180,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, !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 })] })] }) }));
+                    }, 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 })] })] }) }));
 });

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

@@ -135,22 +135,18 @@ exports.Select = (0, mobx_react_lite_1.observer)((properties) => {
     const [open, setOpen] = (0, hooks_1.useState)(Boolean(startOpen));
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     if (selection && clearSelection) {
         options = [
             {

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

@@ -75,24 +75,28 @@ 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 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);
+    const toggleActive = () => {
+        const newActive = !isActive;
+        if (isActive) {
+            setActive(false);
+            if (rerender) {
+                setTimeout(() => {
+                    setRenderContent(false);
+                }, 250);
+            }
         }
-        else if (rerender) {
-            setTimeout(() => {
-                setRenderContent(false);
-            }, 250);
+        else {
+            setActive(true);
+            setRenderContent(true);
         }
-        document.body.style.overflow = next ? 'hidden' : '';
-        onChange && onChange(next);
+        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]);
@@ -102,16 +106,19 @@ 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)
-            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]);
+        if (buttonSelector) {
+            let button;
+            if (typeof buttonSelector == 'string') {
+                button = document.querySelector(buttonSelector);
+            }
+            else {
+                button = buttonSelector;
+            }
+            if (button) {
+                button.addEventListener('click', () => toggleActive());
+            }
+        }
+    }, []);
     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(false) })] })) : 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 })] })) : 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
@@ -597,10 +630,6 @@ 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