@athoscommerce/snap-preact 1.5.0 → 1.5.1-beta.112

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

@@ -51,6 +51,9 @@ export const SearchInput = observer((properties) => {
         clearSearchButton: {
             icon: 'close-thin',
         },
+        chatButton: {
+            icon: 'chat',
+        },
     };
     const props = mergeProps('searchInput', globalTheme, defaultProps, properties);
     props.submitSearchButton = {
@@ -77,7 +80,15 @@ export const SearchInput = observer((properties) => {
         //passed in properties
         ...properties?.closeSearchButton,
     };
-    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, customComponent, } = props;
+    props.chatButton = {
+        //defaults
+        ...defaultProps.chatButton,
+        //theme
+        ...props.chatButton,
+        //passed in properties
+        ...properties?.chatButton,
+    };
+    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, chatButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, customComponent, } = props;
     if (customComponent) {
         const ComponentOverride = useComponent(snap?.templates?.library.import.component.searchInput || {}, customComponent);
         if (ComponentOverride) {
@@ -144,6 +155,23 @@ export const SearchInput = observer((properties) => {
             theme: props?.theme,
             treePath,
         },
+        chatButton: {
+            // default props
+            ...chatButton,
+            internalClassName: 'ss__search-input__button--chat-button',
+            name: 'chat',
+            onClick: () => {
+                // @ts-ignore - this is a button, so it should have an onClick prop?
+                chatButton?.onClick && chatButton.onClick();
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
     };
     const styling = mergeStyles(props, defaultStyles);
     //initialize lang
@@ -168,14 +196,19 @@ export const SearchInput = observer((properties) => {
                 'aria-label': 'Submit Search',
             },
         },
+        chatButton: {
+            attributes: {
+                'aria-label': 'Open Chat',
+            },
+        },
     };
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
     const mergedLang = useLang(lang, {});
-    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__search-input', { 'ss__input--disabled': disabled }, className, internalClassName), onClick: (e) => !disabled && onClick && onClick(e), children: [closeSearchButton && _jsx(Button, { ...subProps.closeSearchButton, ...mergedLang.closeSearchButton.all }), _jsx("input", { type: "text", className: "ss__search-input__input", ...mergedLang.placeholderText.attributes, value: inputValue, name: inputName, ref: inputRef, onKeyDown: (e) => onKeyDown && onKeyDown(e), onKeyUp: (e) => onKeyUp && onKeyUp(e), onChange: (e) => {
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__search-input', { 'ss__input--disabled': disabled }, className, internalClassName), onClick: (e) => !disabled && onClick && onClick(e), children: [!hideCloseSearchButton && closeSearchButton && _jsx(Button, { ...subProps.closeSearchButton, ...mergedLang.closeSearchButton.all }), _jsx("input", { type: "text", className: "ss__search-input__input", ...mergedLang.placeholderText.attributes, value: inputValue, name: inputName, ref: inputRef, onKeyDown: (e) => onKeyDown && onKeyDown(e), onKeyUp: (e) => onKeyUp && onKeyUp(e), onChange: (e) => {
                         if (setInputValue) {
                             setInputValue(e.target.value || '');
                         }
                         onChange && onChange(e);
-                    }, disabled: disabled }), _jsxs("div", { className: "ss__search-input__icons", children: [clearSearchButton && inputValue?.length ? _jsx(Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all }) : null, submitSearchButton && _jsx(Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
+                    }, disabled: disabled }), _jsxs("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? (_jsx(Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, chatButton ? _jsx(Button, { ...subProps.chatButton, ...mergedLang.chatButton.all }) : null, !hideSubmitSearchButton && submitSearchButton && _jsx(Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
 });

package/dist/esm/components/src/components/Molecules/Slideout/Slideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiIzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAgC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAiJzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -72,18 +72,33 @@ export const Slideout = observer((properties) => {
     // state
     const [isActive, setActive] = useState(Boolean(active));
     const [renderContent, setRenderContent] = useState(Boolean(active));
-    const toggleActive = () => {
-        if (isActive) {
-            setActive(false);
-            if (rerender) {
-                setTimeout(() => {
-                    setRenderContent(false);
-                }, 250);
+    const toggleActive = (force) => {
+        if (typeof force !== 'undefined') {
+            setActive(force);
+            if (force == false) {
+                if (rerender) {
+                    setTimeout(() => {
+                        setRenderContent(false);
+                    }, 250);
+                }
+            }
+            else {
+                setRenderContent(true);
             }
         }
         else {
-            setActive(true);
-            setRenderContent(true);
+            if (isActive) {
+                setActive(false);
+                if (rerender) {
+                    setTimeout(() => {
+                        setRenderContent(false);
+                    }, 250);
+                }
+            }
+            else {
+                setActive(true);
+                setRenderContent(true);
+            }
         }
         document.body.style.overflow = isActive ? 'hidden' : '';
     };
@@ -102,8 +117,11 @@ export const Slideout = observer((properties) => {
     useEffect(() => {
         if (buttonSelector) {
             let button;
+            let buttons;
             if (typeof buttonSelector == 'string') {
-                button = document.querySelector(buttonSelector);
+                buttons = document.querySelectorAll(buttonSelector);
+                // for quickview should this be "setActive" instead of toggle?
+                buttons.forEach((button) => button.addEventListener('click', () => toggleActive(true)));
             }
             else {
                 button = buttonSelector;
@@ -112,7 +130,7 @@ export const Slideout = observer((properties) => {
                 button.addEventListener('click', () => toggleActive());
             }
         }
-    }, []);
+    });
     return isVisible || !rerender ? (_jsxs(CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
+                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: () => toggleActive(false) })] })) : null;
 });

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

@@ -0,0 +1,27 @@
+import { ComponentProps } from '../../../types';
+import type { ChatController } from '@athoscommerce/snap-controller';
+export declare const ChatOrganism: ((properties: ChatOrganismProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatOrganismProps = {
+    controller: ChatController;
+    lang?: Partial<ChatLang>;
+} & ChatTemplatesLegalProps & ComponentProps<ChatOrganismProps>;
+export type ChatTemplatesLegalProps = {
+    logo?: string;
+    title?: string;
+    subtitle?: string;
+    offset?: string | number;
+    multiselectFacets?: boolean;
+    disableBubbleSuggestedQuestions?: boolean;
+    position?: 'left' | 'right';
+    primaryColorBg?: string;
+    primaryColorFg?: string;
+    primaryAccentColorBg?: string;
+    primaryAccentColorFg?: string;
+    secondaryAccentColorBg?: string;
+    secondaryAccentColorFg?: string;
+};
+export interface ChatLang {
+}
+//# 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":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA6BrE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CAw5C/E,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,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,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;CAChC,CAAC;AAEF,MAAM,WAAW,QAAQ;CAExB"}