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

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);
     };
     //this is used to update active state if active prop is changed from parent component.
     (0, hooks_1.useEffect)(() => {
@@ -103,19 +102,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

@@ -582,7 +582,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 +597,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);
                             }