@athoscommerce/snap-preact 1.13.3-beta.187 → 1.14.0

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutocompleteLayout = void 0;
+exports.layoutHasModule = layoutHasModule;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const hooks_1 = require("preact/hooks");
 const mobx_react_lite_1 = require("mobx-react-lite");
@@ -132,6 +133,9 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
         '.ss__autocomplete__facets-wrapper': {
             width: '100%',
         },
+        '.ss__autocomplete__search-input-wrapper': {
+            width: '100%',
+        },
         '.ss__autocomplete__content': {
             display: 'flex',
             flex: `1 1 0%`,
@@ -281,7 +285,7 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
             input = document.querySelector(input);
         }
     }
-    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, } = props;
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, searchInputSlot, } = props;
     let layout = props.layout;
     const subProps = {
         button: {
@@ -337,6 +341,7 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         facetsHorizontal: {
             name: 'autocomplete',
             // default props
+            controller,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -406,8 +411,10 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
             controller.bind();
         }, []);
     }
-    const visible = Boolean(input === state.focusedInput) &&
-        (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    // content modules require a focused input and something to show (terms, or a loaded query)
+    const contentVisible = Boolean(input === state.focusedInput) &&
+        Boolean(terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    const visible = contentVisible || Boolean(searchInputSlot);
     const showResultsBool = () => Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string || loading);
     const [showResults, setShowResults] = (0, hooks_1.useState)(showResultsBool());
     const checkAndSetShowResults = () => {
@@ -464,6 +471,8 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         RecommendationTemplateResultComponent = recs.RecommendationTemplateResultComponent;
         recsController = recs.recsController;
     }
+    // the slot element can only be rendered once - the first 'searchInput' module claims it
+    let searchInputRendered = false;
     const findModule = (module, rowCounter) => {
         //new row
         if (typeof module !== 'string') {
@@ -505,6 +514,15 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
                 return null;
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c4", children: children });
         }
+        if (module == 'searchInput') {
+            if (!searchInputSlot || searchInputRendered)
+                return null;
+            searchInputRendered = true;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__search-input-wrapper", children: searchInputSlot });
+        }
+        // separators render whenever the layout does; every other module needs a focused input with content
+        if (module !== '_' && !contentVisible)
+            return null;
         if (module == 'termsList') {
             if (!terms?.length && !history?.length && !trending?.length)
                 return null;
@@ -558,23 +576,11 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         if (module == 'button.see-more' && showResults && search?.query?.string && results.length > 0) {
             return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, ...mergedLang.seeMoreButton.attributes, children: [(0, jsx_runtime_1.jsx)("span", { ...mergedLang.seeMoreButton.value }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon })] }));
         }
+        return null;
     };
-    if (typeof props.layout === 'string') {
-        if (props.layout === 'terms') {
-            layout = [['termsList'], ['no-results'], ['_', 'button.see-more']];
-        }
-        if (props.layout === 'mobile') {
-            layout = [['termsList'], ['content'], ['_', 'button.see-more']];
-        }
-        if (props.layout === 'tablet') {
-            layout = [['c1', 'c3']];
-        }
-        if (props.layout === 'desktop') {
-            layout = [['c1', 'c2', 'c3']];
-        }
-    }
+    layout = typeof props.layout === 'string' ? PREBUILT_LAYOUTS[props.layout] : props.layout;
     //fallback for unsupported layout values
-    if (typeof layout === 'string') {
+    if (typeof props.layout === 'string' && !layout) {
         controller.log.warn(`unsupported layout found. ${props.layout}`);
         layout = [];
     }
@@ -586,7 +592,24 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
                     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;
+                : {}), 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) => findModule(module, topRowCounter))] }) })) : null;
 });
+const PREBUILT_LAYOUTS = {
+    terms: [['termsList'], ['no-results'], ['_', 'button.see-more']],
+    mobile: [['termsList'], ['content'], ['_', 'button.see-more']],
+    tablet: [['c1', 'c3']],
+    desktop: [['c1', 'c2', 'c3']],
+};
+// checks a layout (and the column layouts it references) for a module
+function layoutHasModule({ layout, column1, column2, column3, column4, }, moduleToFind) {
+    //recast names back to c1 style
+    const columns = {
+        c1: column1,
+        c2: column2,
+        c3: column3,
+        c4: column4,
+    };
+    const modulesList = (typeof layout === 'string' ? PREBUILT_LAYOUTS[layout] : layout)?.flat() || [];
+    // a module is either listed directly or inside a referenced column's layout
+    return modulesList.some((entry) => entry === moduleToFind || Boolean(columns[entry]?.layout.flat().includes(moduleToFind)));
+}

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

@@ -19,6 +19,7 @@ const Icon_1 = require("../../Atoms/Icon");
 const Button_1 = require("../../Atoms/Button");
 const Slideout_1 = require("../../Molecules/Slideout");
 const Sidebar_1 = require("../Sidebar");
+const useA11y_1 = require("../../../hooks/useA11y");
 const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         margin: '10px 0px',
@@ -101,6 +102,8 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
     };
     let props = (0, utilities_1.mergeProps)('facetsHorizontal', globalTheme, defaultProps, properties);
     const { facets, limit, alwaysShowToggleSidebarButton, hideToggleSidebarButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, toggleSidebarButtonText, disableStyles, className, internalClassName, controller, treePath, } = props;
+    //we just dont allow this prop to be used outside of the search controller.
+    const openFacetsInSidebar = controller?.type !== 'search' ? false : props.openFacetsInSidebar;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('facetsHorizontal', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -142,6 +145,7 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
         }
     }
     const [sidebarOpenState, setSidebarOpenState] = (0, hooks_1.useState)(false);
+    const renderToggleSidebarButton = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
     const subProps = {
         dropdown: {
             // default props
@@ -182,7 +186,7 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
             internalClassName: `ss__facets-horizontal__content__facet`,
             justContent: true,
             // this should be turned on if there is ever a filters button rendering.
-            statefulOverflow: !hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton) ? true : undefined,
+            statefulOverflow: renderToggleSidebarButton ? true : undefined,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -206,6 +210,7 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
         sidebar: {
             // default props
             internalClassName: 'ss__facets-horizontal__sidebar',
+            onToggleSidebar: () => setSidebarOpenState(false),
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -229,6 +234,54 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
     const innerRef = (0, hooks_2.useClickOutside)(() => {
         selectedFacet && setSelectedFacet(undefined);
     });
+    // facet field to scroll into view once the slideout renders
+    const [sidebarFacetField, setSidebarFacetField] = (0, hooks_1.useState)(undefined);
+    // facet expanded by a header click; collapsed again when the sidebar closes
+    const autoOpenedFacet = (0, hooks_1.useRef)(undefined);
+    // field of the header that opened the sidebar; focus returns to it when the sidebar closes
+    const openerField = (0, hooks_1.useRef)(undefined);
+    const openFacetsInSidebarFunc = (facet) => {
+        // expand the facet so it renders open in the sidebar
+        if (facet.collapsed) {
+            facet.toggleCollapse();
+            autoOpenedFacet.current = facet;
+        }
+        openerField.current = facet.field;
+        setSidebarFacetField(facet.field);
+        setSidebarOpenState(true);
+    };
+    (0, hooks_1.useEffect)(() => {
+        if (!sidebarFacetField || !sidebarOpenState)
+            return;
+        // slideout content is already mounted; match by class so field names need no CSS escaping
+        const slideoutElem = innerRef.current?.querySelector('.ss__facets-horizontal__slideout');
+        const facetElem = Array.from(slideoutElem?.querySelectorAll('.ss__facet') || []).find((elem) => elem.classList.contains(`ss__facet--${sidebarFacetField}`));
+        if (facetElem) {
+            if (typeof facetElem.scrollIntoView == 'function') {
+                facetElem.scrollIntoView({ block: 'start' });
+            }
+            // move focus into the sidebar so keyboard navigation continues from the opened facet
+            facetElem.querySelector('.ss__facet__header')?.focus({ preventScroll: true });
+        }
+        setSidebarFacetField(undefined);
+    }, [sidebarFacetField, sidebarOpenState]);
+    (0, hooks_1.useEffect)(() => {
+        if (sidebarOpenState)
+            return;
+        // re-collapse the auto-opened facet (slideout content is already unmounted, so nothing flickers)
+        const facet = autoOpenedFacet.current;
+        autoOpenedFacet.current = undefined;
+        if (facet && !facet.collapsed && typeof facet.toggleCollapse == 'function') {
+            facet.toggleCollapse();
+        }
+        // return focus to the header that opened the sidebar
+        const field = openerField.current;
+        openerField.current = undefined;
+        if (field) {
+            const headerDropdown = Array.from(innerRef.current?.querySelectorAll('.ss__facets-horizontal__header__dropdown') || []).find((elem) => elem.classList.contains(`ss__facets-horizontal__header__dropdown--${field}`));
+            headerDropdown?.querySelector('.ss__dropdown__button')?.focus();
+        }
+    }, [sidebarOpenState]);
     //initialize lang
     const defaultLang = {
         toggleSidebarButtonText: {
@@ -241,7 +294,8 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
     const ToggleSidebarButton = ({ sidebarOpenState, setSidebarOpenState, subProps }) => {
         return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.toggleSidebarButton, internalClassName: "ss__facets-horizontal__header__toggle-sidebar", onClick: () => setSidebarOpenState(!sidebarOpenState), children: (0, jsx_runtime_1.jsx)("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
     };
-    const renderSidebar = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
+    // the slideout is also needed when facet headers open the sidebar
+    const renderSlideout = renderToggleSidebarButton || Boolean(openFacetsInSidebar);
     //todo investigate keyboard navigation here when overlay prop is true/false
     return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
                             const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
@@ -264,8 +318,12 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
                                 selectedFacet,
                                 facet,
                             }, { activeBreakpoint: globalTheme?.activeBreakpoint });
-                            return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { ...subProps.dropdown, internalClassName: (0, classnames_1.default)(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
-                                    // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
+                            return ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { ...subProps.dropdown, internalClassName: (0, classnames_1.default)(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: openFacetsInSidebar ? false : selectedFacet?.field === facet.field, onClick: (e) => {
+                                    if (openFacetsInSidebar) {
+                                        openFacetsInSidebarFunc(facet);
+                                        return;
+                                    }
+                                    // @ts-ignore - escape key closes the dropdown
                                     if (selectedFacet !== facet && e.code !== 'Escape') {
                                         setSelectedFacet(facet);
                                     }
@@ -277,6 +335,6 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
                                                         facet?.clear.url.link.onClick();
                                                     }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", { ...mergedLang.clearAllText.all }) : null })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
                                                 ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
-                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, { ...subProps.facet, facet: facet }) }));
-                        }), renderSidebar && (0, jsx_runtime_1.jsx)(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps })] }), renderSidebar && ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.slideout, active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.sidebar, controller: controller }) }))] }) })) : null;
+                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: !openFacetsInSidebar && (0, jsx_runtime_1.jsx)(Facet_1.Facet, { ...subProps.facet, facet: facet }) }));
+                        }), renderToggleSidebarButton && ((0, jsx_runtime_1.jsx)(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps }))] }), renderSlideout && ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.slideout, active: sidebarOpenState, children: (0, jsx_runtime_1.jsx)("div", { className: 'ss__facets-horizontal__slideout__sidebar-wrapper', ref: (e) => (0, useA11y_1.useA11y)(e, 0, true, () => setSidebarOpenState((prev) => !prev)), children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.sidebar, controller: controller }) }) }))] }) })) : null;
 });

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

@@ -26,6 +26,9 @@ const defaultStyles = (props) => {
             gap: '10px',
             flexWrap: 'wrap',
         },
+        '.ss__filter-summary__no-filters': {
+            margin: '5px 0',
+        },
         '&.ss__filter-summary--list': {
             '& .ss__filter-summary__clear-all .ss__filter__value': {
                 marginLeft: '5px',
@@ -70,6 +73,8 @@ exports.FilterSummary = (0, mobx_react_lite_1.observer)((properties) => {
         title: 'Current Filters',
         type: 'inline',
         clearAllLabel: 'Clear All',
+        noFiltersText: 'No filters applied',
+        hideNoFiltersText: true,
         clearAllIcon: 'close-thin',
         filterIcon: 'close-thin',
         filters: properties.controller?.store?.filters,
@@ -77,7 +82,7 @@ exports.FilterSummary = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)('filterSummary', globalTheme, defaultProps, properties);
-    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
+    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, noFiltersText, hideNoFiltersText, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('filterSummary', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -108,16 +113,22 @@ exports.FilterSummary = (0, mobx_react_lite_1.observer)((properties) => {
         clearAllLabel: {
             value: clearAllLabel,
         },
+        noFiltersText: {
+            value: noFiltersText,
+        },
     };
     //deep merge with props.lang
     const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    const mergedLang = (0, hooks_1.useLang)(lang, {
-        filters,
-    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    return filters?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, className, internalClassName), children: [!hideTitle && (0, jsx_runtime_1.jsx)("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
+    const langOptions = { activeBreakpoint: globalTheme?.activeBreakpoint };
+    const mergedLang = {
+        ...(0, hooks_1.useLang)({ title: lang.title }, { filters }, langOptions),
+        ...(0, hooks_1.useLang)({ noFiltersText: lang.noFiltersText }, { controller: properties.controller }, langOptions),
+    };
+    if (!filters?.length && hideNoFiltersText) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, { 'ss__filter-summary--no-filters': !filters?.length }, className, internalClassName), children: [!hideTitle && (0, jsx_runtime_1.jsx)("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), filters?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && ((0, jsx_runtime_1.jsx)(Filter_1.Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
                                 onClearAllClick && onClearAllClick(e);
                                 properties.controller?.urlManager.remove('filter').remove('page').go();
-                            }, lang: {
-                                filter: { attributes: { 'aria-label': clearAllLabel } },
-                            } }))] })] }) })) : null;
+                            }, lang: { filter: lang.clearAllLabel } }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__filter-summary__no-filters", ...mergedLang.noFiltersText?.all }))] }) }));
 });

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

@@ -258,7 +258,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         hideBadge: false,
     };
     const props = (0, utilities_1.mergeProps)('quickviewLayout', globalTheme, defaultProps, properties);
-    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, variantDropdownType, column1, column2, column3, column4, recommendation, } = props;
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, column1, column2, column3, column4, recommendation } = props;
     // NOTE: the `!shouldRenderDefault` return lives below the last hook call — every hook in this
     // component must run unconditionally on every render (shouldRenderDefault can flip while
     // mounted, e.g. when a pending customComponent import resolves or fails).
@@ -281,12 +281,6 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         moreInfoButton: {
             value: 'More info',
         },
-        similarButton: {
-            value: 'Similar',
-        },
-        discussButton: {
-            value: 'Discuss',
-        },
         loadingText: {
             value: 'Loading…',
         },
@@ -349,8 +343,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     // is within it).
     (0, hooks_1.useEffect)(() => {
         const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
-        // inline embeds (e.g. the chat secondary window) are not modal — Escape must not close them
-        if (!shouldRenderDefault || !isOpenNow || props.inline)
+        if (!shouldRenderDefault || !isOpenNow)
             return;
         const onKey = (e) => {
             if (e.key === 'Escape' && !galleryOpen) {
@@ -359,7 +352,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen, props.inline]);
+    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen]);
     // Recommendation modules. `findModule` runs inside .map()/recursion and must not call hooks, so
     // resolve every referenced profile's controller + components here (stable order) and let
     // findModule read from this map. Mirrors Organisms/NoResults.
@@ -456,18 +449,12 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     };
     // Dialog semantics + focus trap for the quickview content, following the autocomplete
     // containers (AutocompleteModal/AutocompleteSlideout): useA11y traps Tab within the
-    // content and wires Escape to the callback above. Inline embeds (e.g. the chat secondary
-    // window) are part of the surrounding page — no dialog role and no focus trap, which
-    // would otherwise stop the shopper tabbing out to the chat composer.
+    // content and wires Escape to the callback above.
     const contentProps = {
         className: 'ss__quickview__content',
-        ...(props.inline
-            ? {}
-            : {
-                role: 'dialog',
-                'aria-modal': 'true',
-                ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
-            }),
+        role: 'dialog',
+        'aria-modal': 'true',
+        ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
         ...mergedLang.quickview?.attributes,
     };
     // Prefer `product.display` so the displayed name/image/attributes reflect the
@@ -562,23 +549,17 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         // the selection whose field matches (e.g. `variantSelection.color`). The field also matches its
         // component-name form (`color_family` → `color-family`). A bare `variantSelection` module is
         // not supported.
-        // `variantDropdownType` swaps the component for selections that aren't swatches.
-        const renderSelection = (selection) => {
-            const isSwatch = selection.type === 'swatch' || selection.type === 'swatches';
-            const type = variantDropdownType && !isSwatch ? variantDropdownType : selection.type;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field));
-        };
         if (module == 'variantSelections') {
             if (!selections || selections.length === 0)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => renderSelection(selection)) });
+            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field))) }));
         }
         if (module.startsWith('variantSelection.')) {
             const name = module.slice('variantSelection.'.length);
             const selection = selections?.find((selection) => selection.field === name || (0, snap_toolbox_1.fieldNameToComponentName)(selection.field) === name);
             if (!name || !selection)
                 return null;
-            return renderSelection(selection);
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }));
         }
         if (module == 'button.add-to-cart') {
             if (!product)
@@ -588,7 +569,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         if (module == 'button.more-info') {
             if (!url)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__more-info", lang: { button: lang.moreInfoButton }, onClick: (e) => {
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__go-to-product", lang: { button: lang.moreInfoButton }, onClick: (e) => {
                     // track the redirect to the product page as a quickview clickThrough
                     // before navigating away (delegated with `quickView: true`)
                     if (product) {
@@ -597,20 +578,6 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
                     window.location.href = url;
                 }, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
         }
-        // Chat-only modules: `button.similar` and `button.discuss` forward to the chat controller
-        // that opened the quickview. They render nothing for non-chat source controllers, so a
-        // layout carrying them stays safe to share across surfaces.
-        if (module == 'button.similar' || module == 'button.discuss') {
-            const chatController = quickviewManager.sourceController?.type === 'chat' ? quickviewManager.sourceController : undefined;
-            if (!product || !chatController)
-                return null;
-            if (module == 'button.similar') {
-                if (!chatController.store.features?.similarProducts?.enabled)
-                    return null;
-                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "similar", internalClassName: "ss__quickview__similar", lang: { button: lang.similarButton }, onClick: () => chatController.productSimilar(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-            }
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "discuss", internalClassName: "ss__quickview__discuss", lang: { button: lang.discussButton }, onClick: () => chatController.productQuery(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-        }
         // `quantityPicker` binds to the observable `product.quantity`, which `button.add-to-cart`
         // (via the cart store) picks up when the product is added.
         if (module == 'quantityPicker') {
@@ -646,5 +613,5 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     }
     const topRowCounter = { value: 0 };
     const closeButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__quickview__close", icon: "close-thin", lang: { button: lang.closeButton }, onClick: () => onClose(), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [!props.inline && closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
 });

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

@@ -25,7 +25,7 @@ const defaultStyles = ({ gapSize, columns }) => {
         flexFlow: 'row wrap',
         gap: gapSize,
         gridTemplateRows: 'auto',
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
         '& .ss__result, & .ss__result-layout': {
             boxSizing: 'border-box',
             flex: '0 1 auto',

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -17,7 +17,9 @@ const SearchInput_1 = require("../../Molecules/SearchInput");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const hooks_2 = require("../../../hooks");
 const useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
-const defaultStyles = ({ inputBounds, offset, renderInput, width }) => {
+const defaultStyles = ({ inputBounds, offset, renderInput, searchInputInLayout, width }) => {
+    // the rendered input only overlays the native input when it sits above the layout
+    const inputAboveLayout = Boolean(renderInput) && !searchInputInLayout;
     return (0, react_1.css)({
         position: 'absolute',
         left: '0',
@@ -35,7 +37,8 @@ const defaultStyles = ({ inputBounds, offset, renderInput, width }) => {
             zIndex: 1001,
             maxWidth: '100vw',
             pointerEvents: 'auto',
-            '.ss__search-input': {
+            // direct child only - this sizes the input overlaying the native one, not an input placed inside the layout
+            '& > .ss__search-input': {
                 background: '#fff',
                 width: `${inputBounds.width}px`,
                 height: `${inputBounds.height}px`,
@@ -45,7 +48,7 @@ const defaultStyles = ({ inputBounds, offset, renderInput, width }) => {
         '.ss__autocomplete-fixed__inner__layout-wrapper': {
             width: width,
             overflowY: 'scroll',
-            maxHeight: `calc(90vh - ${inputBounds.top || 0}px - ${renderInput ? `${inputBounds.height}px` : '0px'} + ${offset?.top || 0}px)`,
+            maxHeight: `calc(90vh - ${inputBounds.top || 0}px - ${inputAboveLayout ? `${inputBounds.height}px` : '0px'} + ${offset?.top || 0}px)`,
         },
         '.ss__search-input__button--close-search-icon': {
             border: 'none',
@@ -77,7 +80,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, renderInput, overlayColor, className, internalClassName, offset, treePath, tabManager } = props;
+    const { layout, column1, column2, column3, column4, disableStyles, renderInput, overlayColor, className, internalClassName, offset, treePath, tabManager, } = props;
     let controller = props.controller;
     let controllers = [controller];
     if (tabManager && tabManager.active) {
@@ -151,11 +154,6 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
-            // wiring only — no default `icon`, so the button stays hidden until a site
-            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({
@@ -208,7 +206,10 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     (0, hooks_1.useEffect)(() => {
         window.addEventListener('resize', debouncedHandleResize);
     }, []);
-    const styling = (0, utilities_1.mergeStyles)({ ...props, inputBounds }, defaultStyles);
+    // the search input renders inside the layout when it contains a 'searchInput' module, otherwise above the layout
+    const searchInputInLayout = Boolean(renderInput) && (0, AutocompleteLayout_1.layoutHasModule)({ layout, column1, column2, column3, column4 }, 'searchInput');
+    const searchInput = renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : undefined;
+    const styling = (0, utilities_1.mergeStyles)({ ...props, inputBounds, searchInputInLayout }, defaultStyles);
     let _input;
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
@@ -229,5 +230,5 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return layout?.length && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete-fixed', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-fixed__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` }) })] }) }) }) })) : null;
+    return layout?.length && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete-fixed', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-fixed__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [searchInput && !searchInputInLayout ? searchInput : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, searchInputSlot: searchInputInLayout ? searchInput : undefined, treePath: `${treePath} modal` }) })] }) }) }) })) : null;
 });

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -89,7 +89,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, overlayColor, renderInput, className, internalClassName, treePath, tabManager } = props;
+    const { layout, column1, column2, column3, column4, disableStyles, overlayColor, renderInput, className, internalClassName, treePath, tabManager } = props;
     let controller = props.controller;
     let controllers = [controller];
     if (tabManager && tabManager.active) {
@@ -162,11 +162,6 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
-            // wiring only — no default `icon`, so the button stays hidden until a site
-            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({
@@ -177,7 +172,9 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
             treePath: `${treePath} modal`,
         },
     };
-    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // the search input renders inside the layout when it contains a 'searchInput' module, otherwise above the layout
+    const searchInputInLayout = Boolean(renderInput) && (0, AutocompleteLayout_1.layoutHasModule)({ layout, column1, column2, column3, column4 }, 'searchInput');
+    const styling = (0, utilities_1.mergeStyles)({ ...props, searchInputInLayout }, defaultStyles);
     let _input;
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
@@ -189,6 +186,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
             setActive: setActive,
         });
     }
+    const searchInput = renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : undefined;
     const acProps = {
         ...props,
     };
@@ -198,5 +196,5 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return layout?.length && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` })] }) }) }) })) : null;
+    return layout?.length && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [searchInput && !searchInputInLayout ? searchInput : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, searchInputSlot: searchInputInLayout ? searchInput : undefined, treePath: `${treePath} modal` })] }) }) }) })) : null;
 });