@athoscommerce/snap-preact 1.10.0 → 1.11.0

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;

package/dist/cjs/components/src/index.js

@@ -63,6 +63,7 @@ __exportStar(require("./components/Molecules/SearchInput"), exports);
 __exportStar(require("./components/Molecules/Select"), exports);
 __exportStar(require("./components/Molecules/Slideout"), exports);
 __exportStar(require("./components/Molecules/SortBy"), exports);
+__exportStar(require("./components/Molecules/TabSelection"), exports);
 __exportStar(require("./components/Molecules/TemplatesEditor"), exports);
 __exportStar(require("./components/Molecules/Swatches"), exports);
 __exportStar(require("./components/Molecules/Slideshow"), exports);

package/dist/cjs/components/src/providers/themeComponents.js

@@ -51,6 +51,7 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'slideout',
     'sortBy',
     'swatches',
+    'tabSelection',
     'variantSelection',
     'terms',
     /* organisms */

package/dist/cjs/components/src/utilities/index.js

@@ -24,6 +24,7 @@ Object.defineProperty(exports, "Colour", { enumerable: true, get: function () {
 __exportStar(require("./parseProps"), exports);
 __exportStar(require("./mergeProps"), exports);
 __exportStar(require("./mergeStyles"), exports);
+__exportStar(require("./selectionKey"), exports);
 __exportStar(require("./storybook"), exports);
 __exportStar(require("./defaultBadgeComponentMap"), exports);
 __exportStar(require("./createImpressionObserver"), exports);

package/dist/cjs/components/src/utilities/selectionKey.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectionKey = selectionKey;
+// identifies a selection by the fields that options are matched on when rendering, so that a store
+// handing back an equivalent - but not identical - option counts as the same selection. option
+// objects themselves are not comparable: those built by the stores carry a UrlManager that picks up
+// every url change, which would read as a new selection on each navigation
+function selectionKey(selected) {
+    const options = selected == undefined ? [] : Array.isArray(selected) ? selected : [selected];
+    // label is included so that options without a value still produce distinct keys
+    return options.map((option) => `${option?.value}:${option?.label}`).join('|');
+}

package/dist/cjs/src/Templates/SnapTemplates.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
+exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.TAB_PREFIXED_PARAMS = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
 exports.mapBreakpoints = mapBreakpoints;
 exports.createAutocompleteTargeters = createAutocompleteTargeters;
 exports.createRecommendationComponentMapping = createRecommendationComponentMapping;
 exports.createSnapConfig = createSnapConfig;
 exports.createPlugins = createPlugins;
+exports.createTabPlugins = createTabPlugins;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const preact_1 = require("preact");
 const deepmerge_1 = __importDefault(require("deepmerge"));
@@ -16,6 +17,9 @@ const Snap_1 = require("../Snap");
 const TemplateSelect_1 = require("../../components/src/components/Atoms/TemplateSelect");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const TemplateStore_1 = require("./Stores/TemplateStore");
+const TabManagerStore_1 = require("./Stores/TabManagerStore");
+const snap_client_1 = require("@athoscommerce/snap-client");
+const snap_tracker_1 = require("@athoscommerce/snap-tracker");
 const shopify_1 = require("@athoscommerce/snap-platforms/shopify");
 const utils_1 = require("../utils");
 exports.TEMPLATE_EDITOR_COOKIE = 'athosEditor';
@@ -26,6 +30,8 @@ exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
         limit: 5,
     },
 };
+// tabs namespace their catalog specific url state - the query is shared so a single search spans every tab
+exports.TAB_PREFIXED_PARAMS = ['filter', 'sort', 'pageSize', 'rq', 'page'];
 const hasShopifyMarketsPluginConfig = (templateConfig) => {
     const pluginConfigs = [
         templateConfig.plugins?.shopify?.markets,
@@ -105,8 +111,8 @@ class SnapTemplates extends Snap_1.Snap {
                 // attach to the window object
                 window.athos = window.athos || {};
                 window.athos.editor = templateEditorStore;
-                const searchController = this.controllers['search'];
-                const autocompleteController = this.controllers['autocomplete'];
+                const searchController = this.getTemplateController('search');
+                const autocompleteController = this.getTemplateController('autocomplete');
                 if (searchController) {
                     templateEditorStore.registerController(searchController);
                 }
@@ -152,6 +158,16 @@ class SnapTemplates extends Snap_1.Snap {
             }
         });
     }
+    // when tabs are configured there is no controller using the `search` / `autocomplete` id -
+    // the default tab controller is used instead
+    getTemplateController(type) {
+        const tabs = this.templates.config[type]?.tabs;
+        if (tabs?.length) {
+            const defaultTab = tabs.filter((tab) => tab.default)[0] || tabs[0];
+            return this.controllers[defaultTab.id];
+        }
+        return this.controllers[type];
+    }
 }
 exports.SnapTemplates = SnapTemplates;
 function mapBreakpoints(breakpointsKeys, breakpointSettings) {
@@ -277,6 +293,16 @@ function createRecommendationComponentMapping(templateConfig, templatesStore) {
         return mapping;
     }, {});
 }
+function createTabServices(snapConfig, siteId) {
+    const tabGlobals = {
+        ...snapConfig.client?.globals,
+        siteId,
+    };
+    return {
+        client: new snap_client_1.Client(tabGlobals, snapConfig.client?.config),
+        tracker: new snap_tracker_1.Tracker(tabGlobals, snapConfig.tracker?.config),
+    };
+}
 function createSnapConfig(templateConfig, templatesStore) {
     const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
     const snapConfig = {
@@ -307,37 +333,63 @@ function createSnapConfig(templateConfig, templatesStore) {
     }
     /* SEARCH CONTROLLER */
     if (templateConfig.search && snapConfig.controllers) {
-        const searchControllerConfig = {
-            config: {
-                id: 'search',
-                plugins: createPlugins(templateConfig, templatesStore, 'search'),
-                globals: templateConfig.search.globals || {},
-                settings: templateConfig.search.settings || {},
-            },
-            targeters: (0, exports.createSearchTargeters)(templateConfig, templatesStore),
-        };
-        // merge the responsive settings if there are any
-        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.search.breakpointSettings) {
-        // 	const mappedBreakpoints = mapBreakpoints(templateConfig.config.theme.variables.breakpoints, templateConfig.search.breakpointSettings || []);
-        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as SearchStoreConfigSettings;
-        // 	searchControllerConfig.config.settings = deepmerge(searchControllerConfig.config.settings, breakpointSettings);
-        // }
-        snapConfig.controllers.search = [searchControllerConfig];
+        const searchTabs = templateConfig.search.tabs || [];
+        const searchTargeters = (0, exports.createSearchTargeters)(templateConfig, templatesStore);
+        const searchSettings = templateConfig.search.settings || {};
+        const searchGlobals = templateConfig.search.globals || {};
+        snapConfig.controllers.search = [];
+        if (!searchTabs.length) {
+            snapConfig.controllers.search.push({
+                config: {
+                    id: 'search',
+                    plugins: createPlugins(templateConfig, templatesStore, 'search'),
+                    globals: searchGlobals,
+                    settings: searchSettings,
+                },
+                targeters: searchTargeters,
+            });
+        }
+        else {
+            // when tabs are configured, the tab controllers do all of the searching - an additional
+            // non-tab controller would only produce a redundant API request, so the targeters are
+            // attached to the active tab controller instead. targeting kicks off a search before the
+            // TabManagerStore exists to gate redirects, so this must be the tab the shopper is viewing
+            const targetedTab = (0, TabManagerStore_1.getActiveTabConfig)(searchTabs) || searchTabs[0];
+            searchTabs.forEach((tab) => {
+                const tabParam = tab.param;
+                snapConfig.controllers.search.push({
+                    url: {
+                        settings: {
+                            // the query is shared across tabs - only per-catalog state is namespaced
+                            ...(tabParam ? { corePrefix: tabParam, corePrefixParams: exports.TAB_PREFIXED_PARAMS } : {}),
+                        },
+                        parameters: {
+                            custom: {
+                                [TabManagerStore_1.TAB_ID_DEFAULT_PARAM]: { type: 'query' },
+                            },
+                        },
+                    },
+                    config: {
+                        id: tab.id,
+                        plugins: tab.plugins ? createTabPlugins(tab.plugins, templatesStore) : createPlugins(templateConfig, templatesStore, 'search'),
+                        settings: {
+                            ...(0, deepmerge_1.default)(searchSettings, tab.settings || {}),
+                        },
+                        globals: (0, deepmerge_1.default)(searchGlobals, tab.globals || {}),
+                    },
+                    services: createTabServices(snapConfig, tab.siteId),
+                    ...(tab === targetedTab ? { targeters: searchTargeters } : {}),
+                });
+            });
+        }
     }
     /* AUTOCOMPLETE CONTROLLER */
     if (templateConfig.autocomplete && snapConfig.controllers) {
         const autocompleteControllerSettings = (0, deepmerge_1.default)(exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
-        const autocompleteControllerConfig = {
-            config: {
-                id: 'autocomplete',
-                plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
-                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', '),
-                action: templateConfig.autocomplete.action || '',
-                globals: templateConfig.autocomplete.globals || {},
-                settings: autocompleteControllerSettings,
-            },
-            targeters: createAutocompleteTargeters(templateConfig, templatesStore),
-        };
+        const autocompleteSelector = templateConfig.autocomplete.targets.map((target) => target.inputSelector).join(', ');
+        const autocompleteTabs = templateConfig.autocomplete.tabs || [];
+        const autocompleteGlobals = templateConfig.autocomplete.globals || {};
+        const autocompleteTargeters = createAutocompleteTargeters(templateConfig, templatesStore);
         // merge the responsive settings if there are any
         // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.autocomplete.breakpointSettings) {
         // 	const mappedBreakpoints = mapBreakpoints(
@@ -345,9 +397,61 @@ function createSnapConfig(templateConfig, templatesStore) {
         // 		templateConfig.autocomplete.breakpointSettings || []
         // 	);
         // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as AutocompleteStoreConfigSettings;
-        // 	autocompleteControllerConfig.config.settings = deepmerge(autocompleteControllerConfig.config.settings, breakpointSettings);
+        // 	autocompleteControllerSettings = deepmerge(autocompleteControllerSettings, breakpointSettings);
         // }
-        snapConfig.controllers.autocomplete = [autocompleteControllerConfig];
+        snapConfig.controllers.autocomplete = [];
+        if (!autocompleteTabs.length) {
+            snapConfig.controllers.autocomplete.push({
+                config: {
+                    id: 'autocomplete',
+                    plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                    selector: autocompleteSelector,
+                    action: templateConfig.autocomplete.action || '',
+                    globals: autocompleteGlobals,
+                    settings: autocompleteControllerSettings,
+                },
+                targeters: autocompleteTargeters,
+            });
+        }
+        else {
+            // when tabs are configured, every tab controller binds to the same input - an additional
+            // non-tab controller would only produce redundant API requests, so the targeters are
+            // attached to the default tab controller instead
+            const defaultTab = autocompleteTabs.filter((tab) => tab.default)[0] || autocompleteTabs[0];
+            autocompleteTabs.forEach((tab) => {
+                const tabParam = tab.param;
+                snapConfig.controllers.autocomplete.push({
+                    url: {
+                        settings: {
+                            // the query is shared across tabs - only per-catalog state is namespaced
+                            ...(tabParam ? { corePrefix: tabParam, corePrefixParams: exports.TAB_PREFIXED_PARAMS } : {}),
+                        },
+                        parameters: {
+                            custom: {
+                                [TabManagerStore_1.TAB_ID_DEFAULT_PARAM]: { type: 'query' },
+                            },
+                        },
+                        // every url the autocomplete builds must carry the tab it belongs to
+                        globals: [
+                            {
+                                param: TabManagerStore_1.TAB_ID_DEFAULT_PARAM,
+                                value: tab.param,
+                            },
+                        ],
+                    },
+                    config: {
+                        id: tab.id,
+                        plugins: tab.plugins ? createTabPlugins(tab.plugins, templatesStore) : createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                        selector: autocompleteSelector,
+                        action: templateConfig.autocomplete.action || '',
+                        settings: (0, deepmerge_1.default)(autocompleteControllerSettings, tab.settings || {}),
+                        globals: (0, deepmerge_1.default)(autocompleteGlobals, tab.globals || {}),
+                    },
+                    services: createTabServices(snapConfig, tab.siteId),
+                    ...(tab === defaultTab ? { targeters: autocompleteTargeters } : {}),
+                });
+            });
+        }
     }
     /* RECOMMENDATION INSTANTIATOR */
     const originalRecsConfig = templateConfig.recommendation || {};
@@ -488,3 +592,10 @@ function createPlugins(templateConfig, templatesStore, controllerType) {
     });
     return plugins;
 }
+// tab level plugins do not inherit global or controller level plugins - only the plugins configured on the tab are used
+function createTabPlugins(tabPlugins, templatesStore) {
+    const plugins = createPlugins({ plugins: tabPlugins }, templatesStore);
+    const customPluginFunctions = Object.values(tabPlugins.custom || {}).map((customPlugin) => customPlugin.function);
+    // built-in plugins are always created - keep only the ones that were given configuration on the tab
+    return plugins.filter((plugin) => customPluginFunctions.includes(plugin[0]) || Object.keys(plugin[1] || {}).length > 0);
+}

package/dist/cjs/src/Templates/Stores/LibraryStore.js

@@ -77,6 +77,7 @@ class LibraryStore {
             slideout: {},
             sortBy: {},
             swatches: {},
+            tabSelection: {},
             variantSelection: {},
             terms: {},
             branchOverride: {},
@@ -263,6 +264,7 @@ class LibraryStore {
                 slideout: {},
                 sortBy: {},
                 swatches: {},
+                tabSelection: {},
                 variantSelection: {},
                 terms: {},
                 branchOverride: {},

package/dist/cjs/src/Templates/Stores/TabManagerStore.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabManagerStore = exports.TAB_ID_DEFAULT_PARAM = void 0;
+exports.getActiveTabConfig = getActiveTabConfig;
+const mobx_1 = require("mobx");
+const snap_controller_1 = require("@athoscommerce/snap-controller");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+exports.TAB_ID_DEFAULT_PARAM = 'tab';
+// resolves the active tab straight from the url - tab controllers begin searching as soon as they
+// are targeted, which happens before any TabManagerStore exists
+function getActiveTabConfig(tabs) {
+    const defaultTab = tabs.filter((tab) => tab.default)[0] || tabs[0];
+    const paramValue = (0, snap_toolbox_1.url)(window.location.href)?.params.query[exports.TAB_ID_DEFAULT_PARAM];
+    if (!paramValue) {
+        return defaultTab;
+    }
+    const activeParam = decodeURIComponent(paramValue);
+    return tabs.filter((tab) => tab.param == activeParam)[0] || defaultTab;
+}
+class TabManagerStore {
+    constructor(tabConfigs, controllers) {
+        this.tabs = [];
+        this.setActive = (id, updateUrl = true) => {
+            const tabToSelect = this.getTab(id);
+            if (!tabToSelect || tabToSelect.id === this.active?.id) {
+                return;
+            }
+            const previousTab = this.active;
+            this.setRedirects(previousTab, false);
+            this.active = tabToSelect;
+            this.setRedirects(tabToSelect, true);
+            if (tabToSelect.controller.type == snap_controller_1.ControllerTypes.search) {
+                if (updateUrl) {
+                    // to remove page chain: `.remove('page')` to urlManager.set(...)
+                    tabToSelect.controller.urlManager.set(this.param, tabToSelect.param).go();
+                }
+                this.searchTab(tabToSelect);
+            }
+        };
+        // every tab shares the url and the autocomplete input, so an inactive tab landing on a single
+        // result or a merchandising redirect would navigate away from the tab the shopper is viewing
+        this.setRedirects = (tab, enabled) => {
+            if (!tab) {
+                return;
+            }
+            const config = tab.controller.config;
+            config.settings = config.settings || {};
+            config.settings.redirects = enabled ? { ...tab.redirects } : { merchandising: false, singleResult: false };
+        };
+        this.searchTab = (tab) => {
+            if (tab.controller.type != snap_controller_1.ControllerTypes.search) {
+                return;
+            }
+            const searchController = tab.controller;
+            if (!searchController.store.loading && !searchController.store.loaded) {
+                searchController.search();
+            }
+        };
+        this.getTab = (id) => {
+            return this.tabs?.filter((tab) => tab.id == id)[0];
+        };
+        this.getTabByParam = (param) => {
+            return this.tabs?.filter((tab) => tab.param == param)[0];
+        };
+        this.param = exports.TAB_ID_DEFAULT_PARAM;
+        const startingTabConfig = tabConfigs.filter((tab) => tab.default)[0] || tabConfigs[0];
+        let urlParam;
+        tabConfigs.forEach((tabConfig) => {
+            const cntrlr = controllers.filter((controller) => controller.id == tabConfig.id)[0];
+            if (!cntrlr) {
+                return;
+            }
+            const newTab = {
+                id: tabConfig.id,
+                label: tabConfig.label,
+                siteId: tabConfig.siteId,
+                param: tabConfig.param,
+                controller: cntrlr,
+                // search-tab only setting - autocomplete has nothing to fetch until the shopper types
+                prefetch: 'prefetch' in tabConfig ? tabConfig.prefetch ?? true : true,
+                redirects: { ...(cntrlr.config.settings?.redirects || {}) },
+            };
+            if (cntrlr.type == snap_controller_1.ControllerTypes.autocomplete) {
+                const autocompleteController = cntrlr;
+                // hidden form inputs for tab selections
+                if (!autocompleteController.config.action) {
+                    autocompleteController.eventManager.on('beforeSubmit', async (context, next) => {
+                        if (context.input?.form) {
+                            addHiddenFormInput(context.input.form, this.param, this.active?.param || newTab.param);
+                        }
+                        await next();
+                    });
+                }
+            }
+            if (cntrlr.type == snap_controller_1.ControllerTypes.search) {
+                const searchController = cntrlr;
+                // read the active tab from the url on initial load
+                if (!urlParam) {
+                    urlParam = getTabParamFromUrlState(searchController.urlManager.state[this.param]);
+                }
+                // functionality for back/forward browser buttons
+                searchController.urlManager.subscribe((prev, next) => {
+                    const nextParam = getTabParamFromUrlState(next?.[this.param]);
+                    const nextTab = (nextParam && this.getTabByParam(nextParam)) || this.getTab(startingTabConfig.id);
+                    if (nextTab) {
+                        this.setActive(nextTab.id, false);
+                    }
+                });
+            }
+            this.tabs.push(newTab);
+        });
+        this.active = (urlParam && this.getTabByParam(urlParam)) || this.getTab(startingTabConfig.id) || this.tabs[0];
+        (0, mobx_1.makeObservable)(this, {
+            tabs: mobx_1.observable,
+            active: mobx_1.observable,
+            setActive: mobx_1.action,
+        });
+        // the active tab always searches - the rest only when they opt into prefetching
+        this.tabs.forEach((tab) => {
+            if (tab.id != this.active?.id) {
+                this.setRedirects(tab, false);
+            }
+            if (tab.prefetch || tab.id == this.active?.id) {
+                this.searchTab(tab);
+            }
+        });
+    }
+}
+exports.TabManagerStore = TabManagerStore;
+function addHiddenFormInput(form, name, value) {
+    // match by property rather than an interpolated attribute selector to avoid selector injection
+    const existingElem = Array.from(form.querySelectorAll('input[type="hidden"]')).find((elem) => elem.name === name);
+    if (existingElem) {
+        // keep the value current - the active tab can change after the input was first appended
+        existingElem.value = value;
+        return;
+    }
+    const inputElem = document.createElement('input');
+    inputElem.type = 'hidden';
+    inputElem.name = name;
+    inputElem.value = value;
+    form.append(inputElem);
+}
+// custom url params always deserialize as arrays when parsed fresh from the url, but can be a
+// plain string when read back from an in-session localState set() - handle both shapes
+function getTabParamFromUrlState(value) {
+    if (Array.isArray(value)) {
+        return value[0];
+    }
+    return typeof value == 'string' ? value : undefined;
+}

package/dist/cjs/src/Templates/Stores/TemplateStore.js

@@ -6,6 +6,7 @@ const mobx_1 = require("mobx");
 const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const ThemeStore_1 = require("./ThemeStore");
 const TargetStore_1 = require("./TargetStore");
+const TabManagerStore_1 = require("./TabManagerStore");
 const LibraryStore_1 = require("./LibraryStore");
 const snap_toolbox_2 = require("@athoscommerce/snap-toolbox");
 const RESIZE_DEBOUNCE = 100;
@@ -14,6 +15,7 @@ class TemplatesStore {
     constructor(params) {
         this.loading = false;
         this.window = { innerWidth: 0 };
+        this.tabManagers = {};
         const { config, settings } = params || {};
         this.config = config;
         this.platform = config.config?.platform || 'other';
@@ -124,6 +126,26 @@ class TemplatesStore {
     getTarget(type, targetIndex) {
         return getTargetArray(this.targets, type)?.[targetIndex];
     }
+    // one store per controller type
+    getTabManager(type, controllers) {
+        const tabs = this.config[type]?.tabs;
+        if (!tabs || tabs.length < 2) {
+            return undefined;
+        }
+        const mappedTabs = tabs.map((tab) => ({
+            id: tab.id,
+            param: tab.param,
+            siteId: tab.siteId,
+            label: tab.label,
+            default: tab.default,
+            prefetch: tab.prefetch,
+        }));
+        if (!this.tabManagers[type]) {
+            const tabControllers = tabs.map((tab) => controllers[tab.id]).filter((controller) => Boolean(controller));
+            this.tabManagers[type] = new TabManagerStore_1.TabManagerStore(mappedTabs, tabControllers);
+        }
+        return this.tabManagers[type];
+    }
     addTheme(config) {
         const theme = new ThemeStore_1.ThemeStore({
             config,

package/dist/cjs/src/Templates/Stores/library/languages/es.js

@@ -168,6 +168,18 @@ exports.es = {
             value: 'Clasificar por',
         },
     },
+    tabSelection: {
+        tabList: {
+            attributes: {
+                'aria-label': 'Pestañas de resultados',
+            },
+        },
+        tabButton: {
+            attributes: {
+                'aria-label': (data) => `${data.tab.label || data.tab.id}${typeof data.resultCount == 'number' ? `, ${data.resultCount} resultados` : ''}`,
+            },
+        },
+    },
     facetsHorizontal: {
         dropdownButton: {
             attributes: {

package/dist/cjs/src/Templates/Stores/library/languages/fr.js

@@ -142,6 +142,18 @@ exports.fr = {
             value: 'Trier Par',
         },
     },
+    tabSelection: {
+        tabList: {
+            attributes: {
+                'aria-label': 'Onglets de résultats',
+            },
+        },
+        tabButton: {
+            attributes: {
+                'aria-label': (data) => `${data.tab.label || data.tab.id}${typeof data.resultCount == 'number' ? `, ${data.resultCount} résultats` : ''}`,
+            },
+        },
+    },
     perPage: {
         label: {
             value: 'Par page',

package/dist/cjs/src/create/createAutocompleteController.js

@@ -9,7 +9,12 @@ const snap_profiler_1 = require("@athoscommerce/snap-profiler");
 const snap_logger_1 = require("@athoscommerce/snap-logger");
 const snap_tracker_1 = require("@athoscommerce/snap-tracker");
 exports.default = (config, services) => {
-    const urlManager = (services?.urlManager || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker)).detach();
+    //grab the url globals and pull them out of the translatorConfig
+    const { globals: urlGlobals, ...translatorConfig } = config.url || {};
+    let urlManager = (services?.urlManager || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(translatorConfig), snap_url_manager_1.reactLinker)).detach();
+    if (urlGlobals?.length) {
+        urlManager = urlManager.withGlobals(Object.fromEntries(urlGlobals.map(({ param, value }) => [param, [value]])));
+    }
     // set client mode
     if (config.mode && config.client) {
         config.client.config = config.client.config || {};

package/dist/esm/components/src/components/Atoms/TemplateSelect/TemplateSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateSelect.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/TemplateSelect/TemplateSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAmD,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mDAAmD,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA+BrE,CAAC;AACH,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"TemplateSelect.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/TemplateSelect/TemplateSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAmD,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mDAAmD,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAyCrE,CAAC;AACH,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACd"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { observer } from 'mobx-react-lite';
+import { ControllerTypes } from '@athoscommerce/snap-controller';
 import { ThemeProvider, ControllerProvider, SnapProvider } from '../../../providers';
 export const TemplateSelect = observer((properties) => {
     const { snap, templatesStore, target, controller, ...otherProps } = properties;
@@ -16,6 +17,9 @@ export const TemplateSelect = observer((properties) => {
         const error = `Theme "${target.theme.name}" not found in library for target "${target.selector}"`;
         controller.log.error(error);
     }
+    const tabManager = controller.type === ControllerTypes.search || controller.type === ControllerTypes.autocomplete
+        ? templatesStore.getTabManager(controller.type, snap.controllers)
+        : undefined;
     // ensuring that theme and component are ready to render
-    return !loading && theme && Component ? (_jsx(SnapProvider, { snap: snap, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(ControllerProvider, { controller: controller, children: _jsx("div", { className: "ss__template-select", children: _jsx(Component, { controller: controller, ...otherProps }) }) }) }) })) : null;
+    return !loading && theme && Component ? (_jsx(SnapProvider, { snap: snap, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(ControllerProvider, { controller: controller, children: _jsx("div", { className: "ss__template-select", children: _jsx(Component, { controller: controller, tabManager: tabManager, name: tabManager?.active?.id ? tabManager?.active?.id.toLowerCase() : undefined, ...otherProps }) }) }) }) })) : null;
 });