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

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].clientX) : undefined, 
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0]) : undefined, 
                         // @ts-ignore - touch events
                         onTouchMove: touchDragging
                             ? (event) => {
@@ -597,10 +597,6 @@ 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);
                             }

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

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabSelection = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        '.ss__tab-selection__title': {
+            textAlign: 'center',
+        },
+        '.ss__tab-selection__tabs': {
+            display: 'flex',
+            gap: '10px',
+            textAlign: 'center',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+        },
+        '.ss__tab-selection__button--active': {
+            fontWeight: 'bold',
+        },
+        '.ss__tab-selection__button__count': {
+            marginLeft: '5px',
+        },
+    });
+};
+exports.TabSelection = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        showResultCount: true,
+        enableEmptyTabs: false,
+    };
+    const props = (0, utilities_1.mergeProps)('tabSelection', globalTheme, defaultProps, properties);
+    const { tabManager, titleText, showResultCount, enableEmptyTabs, onTabClick, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('tabSelection', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    if (!tabManager || !tabManager.tabs?.length) {
+        return null;
+    }
+    const subProps = {
+        button: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+    };
+    function getResultCount(controller) {
+        const store = controller.store;
+        return store?.loaded ? store.pagination?.totalResults : undefined;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        title: {
+            value: titleText,
+        },
+        tabList: {
+            attributes: {
+                'aria-label': 'Result tabs',
+            },
+        },
+    };
+    //deep merge with props.lang - scoped per key, each is resolved against different data
+    const langs = (0, deepmerge_1.default)(defaultLang, { title: props.lang?.title || {}, tabList: props.lang?.tabList || {} });
+    const mergedLang = (0, hooks_1.useLang)(langs, { tabManager }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__tab-selection', className, internalClassName), children: [titleText || props.lang?.title?.value ? (0, jsx_runtime_1.jsx)("h4", { className: "ss__tab-selection__title", ...mergedLang.title?.all }) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__tab-selection__tabs", role: "tablist", ...mergedLang.tabList?.attributes, children: tabManager.tabs.map((tab) => {
+                        const active = tabManager.active?.id === tab.id;
+                        const resultCount = getResultCount(tab.controller);
+                        const disabled = !enableEmptyTabs && !active && resultCount === 0;
+                        const label = tab.label || tab.id;
+                        const displayedCount = showResultCount ? resultCount : undefined;
+                        const defaultTabLang = {
+                            tabButton: {
+                                value: label,
+                                attributes: {
+                                    'aria-label': typeof displayedCount == 'number' ? `${label}, ${displayedCount} results` : label,
+                                },
+                            },
+                        };
+                        const tabLangs = (0, deepmerge_1.default)(defaultTabLang, { tabButton: props.lang?.tabButton || {} });
+                        const tabLang = (0, hooks_1.useLang)(tabLangs, { tab, resultCount, active }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                        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) => {
+                                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/{Templates/ChatButton → Molecules/TabSelection}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ChatButton"), exports);
+__exportStar(require("./TabSelection"), exports);

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

@@ -325,5 +325,5 @@ exports.TemplatesEditor = (0, mobx_react_lite_1.observer)((properties) => {
                                 return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('tab', { active: editorStore.storedState.activeTab === tab }), onClick: () => {
                                         editorStore.switchTabs(tab);
                                     }, children: tab }, i));
-                            }) }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view", children: [(0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Search" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.controllers.search, feature: "controllers/search" }), (0, jsx_runtime_1.jsx)("h1", { children: "Autocomplete" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.controllers.autocomplete, feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), (0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow bottom" })] })] }), (0, jsx_runtime_1.jsx)("footer", {})] }) }));
+                            }) }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view", children: [(0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Search" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('search'), feature: "controllers/search" }), (0, jsx_runtime_1.jsx)("h1", { children: "Autocomplete" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('autocomplete'), feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), (0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow bottom" })] })] }), (0, jsx_runtime_1.jsx)("footer", {})] }) }));
 });

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

@@ -24,6 +24,7 @@ const TermsList_1 = require("../TermsList");
 const Terms_1 = require("../../Molecules/Terms");
 const FacetsHorizontal_1 = require("../FacetsHorizontal");
 const Button_1 = require("../../Atoms/Button");
+const TabSelection_1 = require("../../Molecules/TabSelection");
 const createRecommendationTemplate_1 = require("../../../hooks/createRecommendationTemplate");
 const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, column1, column2, column3, column4, }) => {
     let inputViewportOffsetBottom = 0;
@@ -186,7 +187,7 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
             width: '150px',
         },
         column3: {
-            layout: [['content'], ['_', 'button.see-more']],
+            layout: [['tabSelection'], ['content'], ['_', 'button.see-more']],
             width: 'auto',
             alignContent: 'space-between',
         },
@@ -280,7 +281,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, } = props;
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, } = props;
     let layout = props.layout;
     const subProps = {
         button: {
@@ -382,6 +383,17 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath: properties.treePath,
         },
+        tabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
     };
     const { search, terms, trending, results, merchandising, pagination, filters, facets, state, loading, loaded } = controller.store;
     const history = controller.store.history || [];
@@ -520,6 +532,9 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
         if (module == 'no-results' && showResults) {
             return ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: results.length == 0 && !loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__no-results", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all }), RecommendationTemplateComponent && recsController?.store?.loaded ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__recommendations", children: (0, jsx_runtime_1.jsx)(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
         }
+        if (module == 'tabSelection') {
+            return tabManager ? (0, jsx_runtime_1.jsx)(TabSelection_1.TabSelection, { ...subProps.tabSelection, tabManager: tabManager }) : null;
+        }
         if (module == '_') {
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__separator" });
         }

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

@@ -478,7 +478,11 @@ const FacetContent = (props) => {
     // used by the submit button, the Enter key, and (optionally) blur, so it works even when the
     // submit button isn't rendered (e.g. when rangeInputsSubmitButtonText is an empty string).
     const submitRange = () => {
-        if (facet?.services?.urlManager && typeof low === 'number' && Number.isFinite(low) && typeof high === 'number' && Number.isFinite(high)) {
+        if (facet?.services?.urlManager &&
+            typeof low === 'number' &&
+            Number.isFinite(low) &&
+            typeof high === 'number' &&
+            Number.isFinite(high)) {
             let currentLow = low;
             let currentHigh = high;
             //adjust ranges if high and low have swapped.

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

@@ -24,6 +24,7 @@ const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
 const Facets_1 = require("../Facets");
 const FacetsHorizontal_1 = require("../FacetsHorizontal");
 const Breadcrumbs_1 = require("../../Atoms/Breadcrumbs");
+const TabSelection_1 = require("../../Molecules/TabSelection");
 const defaultStyles = ({}) => {
     return (0, react_1.css)({
         display: 'flex',
@@ -56,7 +57,7 @@ exports.Layout = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)('layout', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout, tabManager } = props;
     delete props.treePath;
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     const subProps = {
@@ -206,6 +207,17 @@ exports.Layout = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props?.theme,
             treePath: properties.treePath,
         },
+        TabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: properties.treePath,
+        },
     };
     const ToggleSideBarButton = toggleSideBarButton;
     const hasResults = controller.store.pagination.totalResults > 0;
@@ -213,6 +225,8 @@ exports.Layout = (0, mobx_react_lite_1.observer)((properties) => {
         switch (module) {
             case 'searchHeader':
                 return (0, jsx_runtime_1.jsx)(SearchHeader_1.SearchHeader, { ...subProps.SearchHeader });
+            case 'tabSelection':
+                return tabManager ? (0, jsx_runtime_1.jsx)(TabSelection_1.TabSelection, { ...subProps.TabSelection, tabManager: tabManager }) : null;
             case 'filterSummary':
                 if (hasResults) {
                     return (0, jsx_runtime_1.jsx)(FilterSummary_1.FilterSummary, { ...subProps.FilterSummary });

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',
@@ -141,14 +141,14 @@ exports.Results = (0, mobx_react_lite_1.observer)((properties) => {
     return results?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__results', `ss__results-${props.layout}`, className, internalClassName), children: results.map((result) => (() => {
                 switch (result.type) {
                     case snap_store_mobx_1.ContentType.BANNER:
-                        return (0, react_1.createElement)(InlineBanner_1.InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
+                        return ((0, react_1.createElement)(InlineBanner_1.InlineBanner, { ...subProps.inlineBanner, key: `${controller?.id ? `${controller?.id}-` : ''}${result.id}`, banner: result, layout: props.layout }));
                     default:
                         if (shouldWaitForNamedResultComponent) {
                             return null;
                         }
                         if (resolvedResultComponent && controller) {
                             return ((0, jsx_runtime_1.jsx)(ResultTracker_1.ResultTracker, { result: result, controller: controller, children: (0, utilities_1.cloneWithProps)(resolvedResultComponent, {
-                                    key: result.id,
+                                    key: `${controller?.id ? `${controller?.id}-` : ''}${result.id}`,
                                     controller,
                                     result: result,
                                     theme: mergedResultComponentTheme,
@@ -156,7 +156,7 @@ exports.Results = (0, mobx_react_lite_1.observer)((properties) => {
                                 }) }));
                         }
                         else {
-                            return ((0, jsx_runtime_1.jsx)(TrackedResultComponent, { ...subProps.result, result: result, layout: props.layout, controller: controller }, result.id));
+                            return ((0, jsx_runtime_1.jsx)(TrackedResultComponent, { ...subProps.result, result: result, layout: props.layout, controller: controller }, `${controller?.id ? `${controller?.id}-` : ''}${result.id}`));
                         }
                 }
             })()) }) })) : null;

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

@@ -23,7 +23,7 @@ exports.Toolbar = (0, mobx_react_lite_1.observer)((properties) => {
         layout: ['button.sidebar-toggle', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
     };
     const props = (0, utilities_1.mergeProps)('toolbar', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout, tabManager } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('toolbar', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -33,6 +33,7 @@ exports.Toolbar = (0, mobx_react_lite_1.observer)((properties) => {
         Layout: {
             // default props
             internalClassName: 'ss__toolbar__layout',
+            tabManager: tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 toggleSideBarButton,

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

@@ -77,7 +77,13 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, controller, renderInput, overlayColor, className, internalClassName, offset, treePath } = props;
+    const { layout, disableStyles, renderInput, overlayColor, className, internalClassName, offset, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -93,7 +99,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -103,6 +109,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -144,11 +151,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)({
@@ -206,7 +208,7 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -89,7 +89,13 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, overlayColor, controller, renderInput, className, internalClassName, treePath } = props;
+    const { layout, disableStyles, overlayColor, renderInput, className, internalClassName, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -105,7 +111,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -115,6 +121,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -155,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)({
@@ -175,7 +177,7 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -35,7 +35,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
     const defaultProps = {
         slideDirection: 'left',
         overlayColor: 'rgba(0,0,0,0.8)',
-        layout: [['button.see-more'], ['termsList'], ['content']],
+        layout: [['button.see-more'], ['termsList'], ['tabSelection'], ['content']],
         width: '500px',
         renderInput: true,
     };
@@ -54,7 +54,13 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, slideDirection, controller, overlayColor, renderInput, className, internalClassName, treePath, width } = props;
+    const { layout, disableStyles, slideDirection, overlayColor, renderInput, className, internalClassName, treePath, width, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = (0, hooks_1.useRef)(null);
     const reset = () => {
         setActive(false);
@@ -65,6 +71,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
             // default props
             onReset: () => reset(),
             layout: layout,
+            tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -106,11 +113,6 @@ exports.AutocompleteSlideout = (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(),
-            },
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -129,7 +131,7 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
         });
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -69,13 +69,17 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)(properties.alias || 'search', globalTheme, defaultProps, properties);
-    const { disableStyles, className, internalClassName, controller, hideSidebar, toggleSidebarButtonText, hideTopToolbar, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    const { disableStyles, className, internalClassName, hideSidebar, toggleSidebarButtonText, hideTopToolbar, tabManager, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    let controller = props.controller;
     let classNamePrefix = 'ss__search';
     if (props.alias) {
         classNamePrefix = `ss__${(0, componentNameToClassName_1.componentNameToClassName)(props.alias)}`;
     }
     // handle selected layoutOptions - must always call to preserve hook order
     (0, useLayoutOptions_1.useLayoutOptions)(props, globalTheme);
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+    }
     const store = controller.store;
     const isMobile = (0, hooks_2.useMediaQuery)(mobileDisplayAt ? (typeof mobileDisplayAt == 'boolean' ? `(min-width: 0px)` : `(max-width: ${mobileDisplayAt})`) : `(max-width: 0px)`);
     const [sidebarOpenState, setSidebarOpenState] = (0, hooks_1.useState)(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed && !isMobile));
@@ -136,6 +140,7 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
             internalClassName: `${classNamePrefix}__header-section__toolbar--top-toolbar`,
             layout: [['banner.header'], ['searchHeader', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             ...(0, utilities_1.defined)({
                 disableStyles,
             }),
@@ -147,9 +152,10 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
             name: 'middle',
             internalClassName: `${classNamePrefix}__content__toolbar--middle-toolbar`,
             layout: isMobile
-                ? [['paginationInfo', '_'], ['button.sidebar-toggle', '_', 'sortBy'], ['banner.banner']]
-                : [['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
+                ? [['tabSelection'], ['paginationInfo', '_'], ['button.sidebar-toggle', '_', 'sortBy'], ['banner.banner']]
+                : [['tabSelection'], ['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,
@@ -163,6 +169,7 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
             internalClassName: `${classNamePrefix}__content__toolbar--bottom-toolbar`,
             layout: [['banner.footer'], ['_', 'pagination', '_']],
             toggleSideBarButton: { ...toggleSidebarButtonProps },
+            tabManager: tabManager,
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,

package/dist/cjs/components/src/hooks/useAcRenderedInput.js

@@ -2,9 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAcRenderedInput = useAcRenderedInput;
 const hooks_1 = require("preact/hooks");
-function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }) {
+const RENDERED_INPUT_SELECTOR = '.autocomplete__search-input input';
+function useAcRenderedInput({ input, controllers, renderInput, buttonSelector, renderedInputRef, setActive, }) {
     const [_input, setInput] = (0, hooks_1.useState)(input);
     const [renderedInputInitialized, setRenderedInputInitialized] = (0, hooks_1.useState)(false);
+    const boundController = (0, hooks_1.useRef)(null);
+    // adds the rendered input to the controller's selector (once) and binds it
+    const bindRenderedInput = async (cntrlrs) => {
+        for (const cntrlr of cntrlrs) {
+            if (!cntrlr.config.selector.includes(RENDERED_INPUT_SELECTOR)) {
+                cntrlr.config.selector = `${cntrlr.config.selector}, ${RENDERED_INPUT_SELECTOR}`;
+            }
+            boundController.current = cntrlr;
+            await cntrlr.bind();
+        }
+    };
     const onClick = () => {
         if (setActive) {
             setActive(true);
@@ -13,8 +25,7 @@ function useAcRenderedInput({ input, controller, renderInput, buttonSelector, re
         setTimeout(async () => {
             if (!renderedInputInitialized) {
                 setInput(renderedInputRef.current);
-                controller.config.selector = `${controller.config.selector}, .autocomplete__search-input input`;
-                await controller.bind();
+                await bindRenderedInput(controllers);
                 renderedInputRef?.current?.focus();
             }
             setRenderedInputInitialized(true);

package/dist/cjs/components/src/hooks/useCreateController.js

@@ -11,10 +11,31 @@ const useCreateController = (snap, type, config) => {
             .then((controller) => {
             setController(controller);
         })
-            .catch(() => {
-            snap.createController(type, config).then((controller) => {
+            .catch(async () => {
+            let configToCreate = config;
+            // dynamically created recommendation controllers (ex. no-results recommendations) don't go through
+            // the RecommendationInstantiator, so inherit its plugins/middleware from the original config to keep behavior consistent
+            if (type === 'recommendation' && !config.plugins && !config.middleware) {
+                try {
+                    const instantiator = await snap.getInstantiator('recommendation');
+                    configToCreate = {
+                        ...config,
+                        plugins: instantiator.config.config.plugins,
+                        middleware: instantiator.config.config.middleware,
+                    };
+                }
+                catch {
+                    // no recommendation instantiator configured - proceed without inherited attachments
+                }
+            }
+            try {
+                const controller = await snap.createController(type, configToCreate);
                 setController(controller);
-            });
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(`useCreateController: failed to create controller "${config.id}"`, err);
+            }
         });
     }, []);
     return controller;