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

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

@@ -9,6 +9,8 @@ import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
 import { useLang, useCustomComponentOverride } from '../../../hooks';
 import deepmerge from '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 css({
         position: 'relative',
@@ -155,13 +157,14 @@ export const Slideshow = observer((properties) => {
         centerInsufficientSlides: true,
         slidesToShow: properties.slideWidth ? undefined : 4,
         slidesToMove: 1,
+        startIndex: 0,
         gap: 10,
         ariaLabel: 'slideshow',
         touchDragging: true,
         dragThreshold: 50,
     };
     const props = 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 } = useCustomComponentOverride('slideshow', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -236,12 +239,17 @@ export const Slideshow = observer((properties) => {
     if (!slidesToMove) {
         slidesToMove = 1;
     }
-    const [currentIndex, setCurrentIndex] = useState(0);
+    const [currentIndex, setCurrentIndex] = useState(startIndex ?? 0);
     const [isPlaying, setIsPlaying] = useState(autoPlay);
     const [containerWidth, setContainerWidth] = useState(0);
     const intervalRef = useRef(null);
     const slideshowRef = useRef(null);
     const trackRef = 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 = useRef(false);
     // Track container width for slideWidth-based visible slide calculation
     useEffect(() => {
         const container = trackRef.current?.parentElement;
@@ -294,6 +302,23 @@ export const Slideshow = 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 = useRef(undefined);
+    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) {
@@ -339,6 +364,7 @@ export const Slideshow = observer((properties) => {
     const handleDragStart = (clientX) => {
         if (!touchDragging)
             return;
+        hasDraggedRef.current = false;
         setIsPlaying(false);
         setIsDragging(true);
         setStartX(clientX);
@@ -353,6 +379,11 @@ export const Slideshow = 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 = () => {
@@ -434,7 +465,7 @@ export const Slideshow = observer((properties) => {
     };
     // Handle image click
     const handleSlideClick = (slide, index) => {
-        if (slide.onClick && !isDragging) {
+        if (slide.onClick && !isDragging && !hasDraggedRef.current) {
             slide.onClick(slide, index);
         }
     };
@@ -442,7 +473,9 @@ export const Slideshow = 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
@@ -576,7 +609,7 @@ export const Slideshow = 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) => {
@@ -591,6 +624,10 @@ export const Slideshow = 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/esm/components/src/components/Molecules/Swatches/Swatches.js

@@ -116,7 +116,7 @@ export const Swatches = 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/esm/components/src/components/Molecules/VariantSelection/VariantSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAqLzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA2LzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}

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

@@ -148,7 +148,13 @@ export const VariantSelection = 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) => 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) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
             }) }));
     };
     return selection.values.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {

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

@@ -36,23 +36,23 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
     const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return 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/esm/components/src/components/Organisms/Chat/Chat.d.ts

@@ -0,0 +1,41 @@
+import { h } from 'preact';
+import type { ChatController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { ChatLang } from './Chat.lang';
+export type ChatStylingProps = {
+    mobile: boolean;
+    hasSideChat: boolean;
+    footerHeight: number;
+};
+export declare const ChatOrganism: ((properties: ChatOrganismProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatOrganismProps = {
+    controller: ChatController;
+    lang?: Partial<ChatLang>;
+} & ChatTemplatesLegalProps & ComponentProps<ChatOrganismProps>;
+export type ChatTemplatesLegalProps = {
+    logo?: string;
+    title?: string;
+    subtitle?: string;
+    avatar?: string;
+    offset?: string | number;
+    multiselectFacets?: boolean;
+    disableBubbleSuggestedQuestions?: boolean;
+    /** Overrides the built-in bubble launcher (and its suggested-question chips) visibility.
+     * `true` always hides it, `false` always shows it — including alongside an inline
+     * ChatButton. Left unset, the bubble hides itself whenever an external launcher registers. */
+    hideBubble?: boolean;
+    position?: 'left' | 'right';
+    primaryColorBg?: string;
+    primaryColorFg?: string;
+    primaryAccentColorBg?: string;
+    primaryAccentColorFg?: string;
+    secondaryAccentColorBg?: string;
+    secondaryAccentColorFg?: string;
+    hideMessageTypeIndicatorText?: boolean;
+    buttonBelowMessage?: boolean;
+    poweredByText?: string;
+    privacyPolicyUrl?: string;
+};
+//# sourceMappingURL=Chat.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAa7D,OAAO,EAAE,QAAQ,EAA2C,MAAM,aAAa,CAAC;AA8BhF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAqVF,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAycjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C;;kGAE8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}