@athoscommerce/snap-preact 1.10.0 → 1.11.0

package/dist/cjs/components/src/components/Atoms/TemplateSelect/TemplateSelect.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplateSelect = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_lite_1 = require("mobx-react-lite");
+const snap_controller_1 = require("@athoscommerce/snap-controller");
 const providers_1 = require("../../../providers");
 exports.TemplateSelect = (0, mobx_react_lite_1.observer)((properties) => {
     const { snap, templatesStore, target, controller, ...otherProps } = properties;
@@ -19,6 +20,9 @@ exports.TemplateSelect = (0, mobx_react_lite_1.observer)((properties) => {
         const error = `Theme "${target.theme.name}" not found in library for target "${target.selector}"`;
         controller.log.error(error);
     }
+    const tabManager = controller.type === snap_controller_1.ControllerTypes.search || controller.type === snap_controller_1.ControllerTypes.autocomplete
+        ? templatesStore.getTabManager(controller.type, snap.controllers)
+        : undefined;
     // ensuring that theme and component are ready to render
-    return !loading && theme && Component ? ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, { controller: controller, ...otherProps }) }) }) }) })) : null;
+    return !loading && theme && Component ? ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, { controller: controller, tabManager: tabManager, name: tabManager?.active?.id ? tabManager?.active?.id.toLowerCase() : undefined, ...otherProps }) }) }) }) })) : null;
 });

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

@@ -156,22 +156,18 @@ exports.Grid = (0, mobx_react_lite_1.observer)((properties) => {
     }
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (multiSelect) {
             let newArray;

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

@@ -101,22 +101,18 @@ exports.List = (0, mobx_react_lite_1.observer)((properties) => {
     }
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         let newArray;
         if (multiSelect) {

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

@@ -92,22 +92,18 @@ exports.RadioList = (0, mobx_react_lite_1.observer)((properties) => {
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // selection state
     const [selection, setSelection] = (0, react_2.useState)(selected);
-    // original selection state
-    const [originalSelected] = (0, react_2.useState)(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, react_2.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (onSelect) {
             onSelect(e, option);

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

@@ -135,22 +135,18 @@ exports.Select = (0, mobx_react_lite_1.observer)((properties) => {
     const [open, setOpen] = (0, hooks_1.useState)(Boolean(startOpen));
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     if (selection && clearSelection) {
         options = [
             {

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/Molecules/TabSelection/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./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/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

@@ -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,
@@ -201,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,
@@ -170,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,
@@ -124,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,