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

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

@@ -154,7 +154,13 @@ exports.VariantSelection = (0, mobx_react_lite_1.observer)((properties) => {
                         'ss__variant-selection__option--selected': selected,
                         'ss__variant-selection__option--disabled': val.disabled,
                         'ss__variant-selection__option--unavailable': val.available === false,
-                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => (0, hooks_1.useA11y)(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+                    }), onClick: (e) => {
+                        if (!val.disabled) {
+                            onSelectHandler(e, val);
+                            // close the dropdown on selection
+                            toggleOpen?.(e, false);
+                        }
+                    }, ref: (e) => (0, hooks_1.useA11y)(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
             }) }));
     };
     return selection.values.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {

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;
@@ -41,23 +42,23 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
     const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return (0, react_1.css)({
         '.ss__autocomplete__column.ss__autocomplete__column--c1': {
-            flex: column1?.width == 'auto' ? '1 1 auto' : `1 0 ${column1?.width}`,
-            maxWidth: column1?.width == 'auto' ? 'auto' : column1?.width,
+            flex: column1?.width == 'auto' ? '1 1 0' : `1 0 ${column1?.width}`,
+            maxWidth: column1?.width == 'auto' ? 'none' : column1?.width,
             alignContent: column1?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c2': {
-            flex: column2?.width == 'auto' ? '1 1 auto' : `1 0 ${column2?.width}`,
-            maxWidth: column2?.width == 'auto' ? 'auto' : column2?.width,
+            flex: column2?.width == 'auto' ? '1 1 0' : `1 0 ${column2?.width}`,
+            maxWidth: column2?.width == 'auto' ? 'none' : column2?.width,
             alignContent: column2?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c3': {
-            flex: column3?.width == 'auto' ? '1 1 auto' : `1 0 ${column3?.width}`,
-            maxWidth: column3?.width == 'auto' ? 'auto' : column3?.width,
+            flex: column3?.width == 'auto' ? '1 1 0' : `1 0 ${column3?.width}`,
+            maxWidth: column3?.width == 'auto' ? 'none' : column3?.width,
             alignContent: column3?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c4': {
-            flex: column4?.width == 'auto' ? '1 1 auto' : `1 0 ${column4?.width}`,
-            maxWidth: column4?.width == 'auto' ? 'auto' : column4?.width,
+            flex: column4?.width == 'auto' ? '1 1 0' : `1 0 ${column4?.width}`,
+            maxWidth: column4?.width == 'auto' ? 'none' : column4?.width,
             alignContent: column4?.alignContent,
         },
         '.ss__autocomplete__column, .ss__autocomplete__row': {
@@ -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 });