@athoscommerce/snap-preact 1.13.2 → 1.13.3-beta.168

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,22 +75,21 @@ 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);
     };
     // 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 —
@@ -106,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

@@ -272,9 +272,15 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     }, []);
     // Touch/Drag state
     const [isDragging, setIsDragging] = (0, hooks_1.useState)(false);
-    // refs, not state - only read inside the drag handlers, never in render
-    // the document mouseup listener below is bound once per drag, so its closure goes stale
-    // refs stay current even from that stale closure, state would not
+    // mirrors `isDragging` state - the state drives renders (the dragging class, the transform,
+    // the autoplay effect), but the drag handlers below run through refs and can fire before
+    // the re-render that follows a setState (e.g. a tap's synthetic mouseup), so they read
+    // this ref instead. always update both via `setDragging`.
+    const isDraggingRef = (0, hooks_1.useRef)(false);
+    const setDragging = (value) => {
+        isDraggingRef.current = value;
+        setIsDragging(value);
+    };
     const startXRef = (0, hooks_1.useRef)(0);
     const currentXRef = (0, hooks_1.useRef)(0);
     const [dragOffset, setDragOffset] = (0, hooks_1.useState)(0);
@@ -394,7 +400,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         }
         hasDraggedRef.current = false;
         setIsPlaying(false);
-        setIsDragging(true);
+        setDragging(true);
         // a previous drag's mouseup may never have arrived (e.g. a native image drag hijacked it)
         // that would leave dragOffset stuck from that aborted drag
         // reset it so this drag always starts clean, not stacked on stale movement
@@ -407,7 +413,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         }
     };
     const handleDragMove = (clientX) => {
-        if (!isDragging || !touchDragging)
+        if (!isDraggingRef.current || !touchDragging)
             return;
         currentXRef.current = clientX;
         const diff = clientX - startXRef.current;
@@ -420,7 +426,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         setDragOffset(diff);
     };
     const handleDragEnd = () => {
-        if (!isDragging || !touchDragging)
+        if (!isDraggingRef.current || !touchDragging)
             return;
         const diff = currentXRef.current - startXRef.current;
         const threshold = getNavigationThreshold();
@@ -434,7 +440,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                 goToNext();
             }
         }
-        setIsDragging(false);
+        setDragging(false);
         setDragOffset(0);
         dragBaseTranslatePxRef.current = null;
         // Resume autoplay if it was playing
@@ -456,20 +462,35 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
             }, autoPlayInterval);
         }
     };
-    const handleMouseMove = (event) => {
-        handleDragMove(event.clientX);
+    // document listeners are bound once per drag, so they call the latest handlers through refs
+    const dragMoveRef = (0, hooks_1.useRef)(handleDragMove);
+    const dragEndRef = (0, hooks_1.useRef)(handleDragEnd);
+    dragMoveRef.current = handleDragMove;
+    dragEndRef.current = handleDragEnd;
+    const removeMouseListenersRef = (0, hooks_1.useRef)(null);
+    const handleMouseDown = (event) => {
+        // only the primary (left) button starts a drag; right/middle clicks keep their default behaviour
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        handleDragStart(event.clientX);
+        // bound here rather than in an effect - a tap's synthetic mouseup fires before effects run
+        const onMouseMove = (e) => dragMoveRef.current(e.clientX);
+        const onMouseUp = () => {
+            removeMouseListenersRef.current?.();
+            dragEndRef.current();
+        };
+        removeMouseListenersRef.current?.();
+        removeMouseListenersRef.current = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            removeMouseListenersRef.current = null;
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
     };
-    // Add/remove mouse event listeners
-    (0, hooks_1.useEffect)(() => {
-        if (isDragging && touchDragging) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleDragEnd);
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleDragEnd);
-            };
-        }
-    }, [isDragging, touchDragging]);
+    // clean up if unmounted mid-drag
+    (0, hooks_1.useEffect)(() => () => removeMouseListenersRef.current?.(), []);
     // Pause autoplay on hover or focus
     const handleMouseEnter = () => {
         if (isPlaying && intervalRef.current && !isDragging) {
@@ -651,7 +672,7 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {
-                                if (isDragging) {
+                                if (isDraggingRef.current) {
                                     event.preventDefault(); // Prevent scrolling while dragging
                                 }
                                 const touch = event.touches[0];
@@ -659,16 +680,9 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
                             }
                             : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
                         // mouse events for desktop dragging
-                        // move/up are handled by the document listeners below, not here
-                        // that keeps the drag tracking even if the cursor leaves the track
-                        // and avoids firing handleDragEnd twice on a release over the track
+                        // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the track
                         // @ts-ignore - mouse events
-                        onMouseDown: touchDragging
-                            ? (event) => {
-                                event.preventDefault();
-                                handleDragStart(event.clientX);
-                            }
-                            : undefined, children: normalizedSlides.map((slide, index) => {
+                        onMouseDown: touchDragging ? handleMouseDown : undefined, children: normalizedSlides.map((slide, index) => {
                             const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;

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

@@ -73,7 +73,7 @@ exports.TabSelection = (0, mobx_react_lite_1.observer)((properties) => {
         },
         tabList: {
             attributes: {
-                'aria-label': 'Result tabs',
+                'aria-label': 'Search result tabs',
             },
         },
     };
@@ -86,6 +86,8 @@ exports.TabSelection = (0, mobx_react_lite_1.observer)((properties) => {
                         const disabled = !enableEmptyTabs && !active && resultCount === 0;
                         const label = tab.label || tab.id;
                         const displayedCount = showResultCount ? resultCount : undefined;
+                        // whitespace is not permitted in an id and would split the aria-controls id reference list
+                        const controllerId = tab.controller.id.replace(/\s+/g, '-');
                         const defaultTabLang = {
                             tabButton: {
                                 value: label,
@@ -99,8 +101,8 @@ exports.TabSelection = (0, mobx_react_lite_1.observer)((properties) => {
                         return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, internalClassName: (0, classnames_1.default)('ss__tab-selection__button', `ss__tab-selection__button--${tab.id}`, {
                                 'ss__tab-selection__button--active': active,
                             }), disabled: disabled, 
-                            // @ts-ignore - role and aria-selected are valid props for Button, but not defined in ButtonProps
-                            role: "tab", "aria-selected": active, ...tabLang.tabButton?.attributes, onClick: (e) => {
+                            // @ts-ignore - valid props for Button, but not defined in ButtonProps
+                            id: `ss__tab--${controllerId}`, role: "tab", "aria-selected": active, "aria-controls": `ss__tabpanel--${controllerId}`, ...tabLang.tabButton?.attributes, onClick: (e) => {
                                 onTabClick && onTabClick(e, tab);
                                 tabManager.setActive(tab.id);
                             }, children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__tab-selection__button__label", ...tabLang.tabButton?.value }), typeof displayedCount == 'number' ? (0, jsx_runtime_1.jsxs)("span", { className: "ss__tab-selection__button__count", children: ["(", displayedCount, ")"] }) : null] }, tab.id));

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

@@ -427,6 +427,7 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
     // results logic
     checkAndSetShowResults();
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const tabControllerId = tabManager?.active?.controller.id;
     //initialize lang
     const defaultLang = {
         contentTitle: {
@@ -579,7 +580,13 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
     }
     const topRowCounter = { value: 0 };
     /***************************************/
-    return visible && layout?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete', { 'ss__autocomplete--terms': props.layout === 'terms' }, { 'ss__autocomplete--mobile': props.layout === 'mobile' }, { 'ss__autocomplete--desktop': props.layout === 'desktop' }, { 'ss__autocomplete--tablet': props.layout === 'tablet' }, className, internalClassName), onClick: (e) => e.stopPropagation(), ref: (e) => (0, hooks_2.useA11y)(e, 0, false, onReset), children: [(0, jsx_runtime_1.jsx)("span", { role: 'link', ref: (e) => (0, hooks_2.useA11y)(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout?.map((module) => {
+    return visible && layout?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete', { 'ss__autocomplete--terms': props.layout === 'terms' }, { 'ss__autocomplete--mobile': props.layout === 'mobile' }, { 'ss__autocomplete--desktop': props.layout === 'desktop' }, { 'ss__autocomplete--tablet': props.layout === 'tablet' }, className, internalClassName), onClick: (e) => e.stopPropagation(), ref: (e) => (0, hooks_2.useA11y)(e, 0, false, onReset), ...(tabManager?.active
+                ? {
+                    id: `ss__tabpanel--${tabControllerId}`,
+                    role: 'tabpanel',
+                    'aria-labelledby': `ss__tab--${tabControllerId}`,
+                }
+                : {}), children: [(0, jsx_runtime_1.jsx)("span", { role: 'link', ref: (e) => (0, hooks_2.useA11y)(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout?.map((module) => {
                     return findModule(module, topRowCounter);
                 })] }) })) : null;
 });