@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,53 +1,40 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
-var Icon_1 = require("../../Atoms/Icon/Icon");
-var Results_1 = require("../Results");
-var Banner_1 = require("../../Atoms/Banner");
-var Facets_1 = require("../Facets");
-var utilities_1 = require("../../../utilities");
-var toolbox_1 = require("../../../toolbox");
-var providers_1 = require("../../../providers");
-var types_1 = require("../../../types");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var hooks_2 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var hideFacets = _a.hideFacets, horizontalTerms = _a.horizontalTerms, controller = _a.controller, input = _a.input, contentSlot = _a.contentSlot, viewportMaxHeight = _a.viewportMaxHeight, vertical = _a.vertical, width = _a.width, theme = _a.theme;
-    var inputViewportOffsetBottom = 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const Icon_1 = require("../../Atoms/Icon/Icon");
+const Results_1 = require("../Results");
+const Banner_1 = require("../../Atoms/Banner");
+const Facets_1 = require("../Facets");
+const utilities_1 = require("../../../utilities");
+const toolbox_1 = require("../../../toolbox");
+const providers_1 = require("../../../providers");
+const types_1 = require("../../../types");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const hooks_2 = require("../../../hooks");
+const defaultStyles = ({ hideFacets, horizontalTerms, controller, input, contentSlot, viewportMaxHeight, vertical, width, theme, }) => {
+    let inputViewportOffsetBottom = 0;
     if (input) {
-        var elem = void 0;
+        let elem;
         if (typeof input === 'string') {
             elem = document.querySelector(input);
         }
         else {
             elem = input;
         }
-        var rect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect();
-        inputViewportOffsetBottom = (rect === null || rect === void 0 ? void 0 : rect.bottom) || 0;
+        const rect = elem?.getBoundingClientRect();
+        inputViewportOffsetBottom = rect?.bottom || 0;
     }
-    var noResults = Boolean(((_c = (_b = controller.store.search) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.string) && controller.store.results.length === 0);
+    const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return (0, react_1.css)({
         '&, & *, & *:before, & *:after': {
             boxSizing: 'border-box',
@@ -61,7 +48,7 @@ var defaultStyles = function (_a) {
         background: '#ffffff',
         width: width,
         maxWidth: '100vw',
-        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : undefined,
+        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? `calc(100vh - ${inputViewportOffsetBottom + 10}px)` : undefined,
         overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : undefined,
         '.ss__autocomplete__close-button': {
             color: '#c5c5c5',
@@ -73,7 +60,7 @@ var defaultStyles = function (_a) {
             zIndex: '1',
         },
         '&.ss__autocomplete--only-terms': {
-            width: "".concat(vertical || horizontalTerms || Boolean(contentSlot) ? width : '150px'),
+            width: `${vertical || horizontalTerms || Boolean(contentSlot) ? width : '150px'}`,
         },
         '.ss__autocomplete__title--trending, .ss__autocomplete__title--history, .ss__autocomplete__title--terms': {
             fontWeight: 'normal',
@@ -92,8 +79,8 @@ var defaultStyles = function (_a) {
         '.ss__autocomplete__terms': {
             display: 'flex',
             flexDirection: 'column',
-            flex: "1 1 auto",
-            maxWidth: "".concat(vertical || horizontalTerms ? 'auto' : '150px'),
+            flex: `1 1 auto`,
+            maxWidth: `${vertical || horizontalTerms ? 'auto' : '150px'}`,
             minWidth: '150px',
             order: 1,
             background: '#f8f8f8',
@@ -116,7 +103,7 @@ var defaultStyles = function (_a) {
                         background: '#fff',
                         a: {
                             fontWeight: 'bold',
-                            color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary,
+                            color: theme?.variables?.colors?.primary,
                         },
                     },
                 },
@@ -124,7 +111,7 @@ var defaultStyles = function (_a) {
         },
         '.ss__autocomplete__facets': {
             display: 'flex',
-            flex: "0 0 150px",
+            flex: `0 0 150px`,
             flexDirection: vertical ? 'row' : 'column',
             columnGap: '20px',
             order: 2,
@@ -145,9 +132,15 @@ var defaultStyles = function (_a) {
                 display: 'none',
             },
         },
+        '.ss__banner': {
+            'iframe, img': {
+                maxWidth: '100%',
+                height: 'auto',
+            },
+        },
         '.ss__autocomplete__content': {
             display: 'flex',
-            flex: "1 1 ".concat(hideFacets ? 'auto' : '0%'),
+            flex: `1 1 ${hideFacets ? 'auto' : '0%'}`,
             flexDirection: 'column',
             justifyContent: 'space-between',
             order: 3,
@@ -168,7 +161,7 @@ var defaultStyles = function (_a) {
                 textAlign: noResults ? 'center' : 'right',
                 a: {
                     fontWeight: 'bold',
-                    color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary,
+                    color: theme?.variables?.colors?.primary,
                     '.ss__icon': {
                         marginLeft: '5px',
                     },
@@ -177,11 +170,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Autocomplete = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         termsTitle: '',
         trendingTitle: 'Popular Searches',
         historyTitle: 'Previously Searched',
@@ -191,26 +183,26 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
         seeMoreButtonIcon: 'angle-right',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('autocomplete', globalTheme, defaultProps, properties);
-    var _x = (0, hooks_2.useCustomComponentOverride)('autocomplete', props), overrideElement = _x.overrideElement, shouldRenderDefault = _x.shouldRenderDefault;
+    let props = (0, utilities_1.mergeProps)('autocomplete', globalTheme, defaultProps, properties);
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('autocomplete', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var valueProps = (0, toolbox_1.createHoverProps)();
-    var facetClickEvent = function (e) {
+    const valueProps = (0, toolbox_1.createHoverProps)();
+    const facetClickEvent = (e) => {
         properties.onFacetOptionClick && properties.onFacetOptionClick(e);
         // remove focus from input (close the autocomplete)
-        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+        controller?.setFocused && controller?.setFocused();
     };
-    var termClickEvent = function (e) {
+    const termClickEvent = (e) => {
         properties.onTermClick && properties.onTermClick(e);
         // remove focus from input (close the autocomplete)
-        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+        controller?.setFocused && controller?.setFocused();
     };
-    var themeFunctionalityProps = {
+    const themeFunctionalityProps = {
         components: {
             facet: {
-                valueProps: valueProps,
+                valueProps,
                 previewOnFocus: true,
             },
             facetGridOptions: {
@@ -227,30 +219,30 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             },
         },
     };
-    if (!((globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) === 'templates')) {
+    if (!(globalTheme?.type === 'templates')) {
         // breakpoint settings are calculated in ThemeStore for snap templates
         props.breakpoints = props.breakpoints || {
             0: {
                 columns: 2,
                 rows: 1,
-                hideFacets: (_a = props.hideFacets) !== null && _a !== void 0 ? _a : true,
-                vertical: (_b = props.vertical) !== null && _b !== void 0 ? _b : true,
-                hideHistory: (_c = props.hideHistory) !== null && _c !== void 0 ? _c : true,
-                hideTrending: (_d = props.hideTrending) !== null && _d !== void 0 ? _d : true,
+                hideFacets: props.hideFacets ?? true,
+                vertical: props.vertical ?? true,
+                hideHistory: props.hideHistory ?? true,
+                hideTrending: props.hideTrending ?? true,
             },
             540: {
                 columns: 3,
                 rows: 1,
-                vertical: (_e = props.vertical) !== null && _e !== void 0 ? _e : true,
-                hideHistory: (_f = props.hideHistory) !== null && _f !== void 0 ? _f : true,
-                hideTrending: (_g = props.hideTrending) !== null && _g !== void 0 ? _g : true,
+                vertical: props.vertical ?? true,
+                hideHistory: props.hideHistory ?? true,
+                hideTrending: props.hideTrending ?? true,
             },
             768: {
                 columns: 2,
                 rows: 3,
             },
         };
-        var themeDefaults = {
+        const themeDefaults = {
             components: {
                 facet: {
                     limit: 6,
@@ -277,93 +269,118 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                 },
             },
         };
-        var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints) || {};
+        const displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints) || {};
         // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
-        var theme = deepmerge_1.default.all([themeDefaults, themeFunctionalityProps, (props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}], {
-            arrayMerge: function (destinationArray, sourceArray) { return sourceArray; },
+        const theme = deepmerge_1.default.all([themeDefaults, themeFunctionalityProps, props?.theme || {}, displaySettings?.theme || {}], {
+            arrayMerge: (destinationArray, sourceArray) => sourceArray,
         });
-        props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
     }
     else {
         // snap templates
-        props.theme = deepmerge_1.default.all([themeFunctionalityProps, (props === null || props === void 0 ? void 0 : props.theme) || {}], { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+        props.theme = deepmerge_1.default.all([themeFunctionalityProps, props?.theme || {}], { arrayMerge: (destinationArray, sourceArray) => sourceArray });
     }
-    var input = props.input;
+    let input = props.input;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
         }
     }
-    var hideTerms = props.hideTerms, hideFacets = props.hideFacets, hideContent = props.hideContent, hideBanners = props.hideBanners, hideLink = props.hideLink, hideHistory = props.hideHistory, hideTrending = props.hideTrending, retainTrending = props.retainTrending, retainHistory = props.retainHistory, vertical = props.vertical, termsTitle = props.termsTitle, trendingTitle = props.trendingTitle, historyTitle = props.historyTitle, facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, termsSlot = props.termsSlot, facetsSlot = props.facetsSlot, contentSlot = props.contentSlot, resultsSlot = props.resultsSlot, noResultsSlot = props.noResultsSlot, linkSlot = props.linkSlot, resultComponent = props.resultComponent, onTermClick = props.onTermClick, seeMoreButtonText = props.seeMoreButtonText, seeMoreButtonIcon = props.seeMoreButtonIcon, 
+    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, hideHistory, hideTrending, retainTrending, retainHistory, vertical, termsTitle, trendingTitle, historyTitle, facetsTitle, contentTitle, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, resultComponent, onTermClick, seeMoreButtonText, seeMoreButtonIcon, 
     // templates,
-    disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, treePath = props.treePath;
-    var subProps = {
-        facets: __assign(__assign({ 
+    disableStyles, className, internalClassName, controller, treePath, } = props;
+    const subProps = {
+        facets: {
             // default props
-            limit: 3 }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: treePath }),
-        banner: __assign(__assign({ 
+            limit: 3,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        banner: {
             // default props
-            internalClassName: 'ss__autocomplete__banner', controller: controller }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__banner',
+            controller,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        results: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        results: {
             // default props
-            internalClassName: 'ss__autocomplete__results', breakpoints: props.breakpoints, resultComponent: resultComponent }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__results',
+            breakpoints: props.breakpoints,
+            resultComponent: resultComponent,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        icon: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            internalClassName: 'ss__autocomplete__icon', size: '10px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__icon',
+            size: '10px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var _y = controller.store, search = _y.search, terms = _y.terms, trending = _y.trending, results = _y.results, merchandising = _y.merchandising, pagination = _y.pagination, loaded = _y.loaded, filters = _y.filters, facets = _y.facets, state = _y.state, loading = _y.loading;
-    var history = controller.store.history || [];
+    const { search, terms, trending, results, merchandising, pagination, loaded, filters, facets, state, loading } = controller.store;
+    const history = controller.store.history || [];
     // you can pass in a selector or the actual input element,
     // if its the selector, we need to bind it to the controller here.
     if (controller && typeof input == 'string') {
         input = document.querySelector(input);
         // only bind on componentdidmount
-        (0, hooks_1.useEffect)(function () {
+        (0, hooks_1.useEffect)(() => {
             controller.bind();
         }, []);
     }
-    var visible = Boolean(input === state.focusedInput) &&
-        (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (history === null || history === void 0 ? void 0 : history.length) > 0 || (state.input && controller.store.loaded));
-    var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
-    var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
-    var showTrending = false;
-    if ((trending === null || trending === void 0 ? void 0 : trending.length) && ((retainTrending && controller.store.loaded) || (!results.length && !state.input))) {
+    const visible = Boolean(input === state.focusedInput) &&
+        (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    const trendingActive = trending?.filter((term) => term.active).pop();
+    const historyActive = history?.filter((term) => term.active).pop();
+    let showTrending = false;
+    if (trending?.length && ((retainTrending && controller.store.loaded) || (!results.length && !state.input))) {
         showTrending = true;
     }
-    var showHistory = false;
-    if ((history === null || history === void 0 ? void 0 : history.length) && ((retainHistory && controller.store.loaded) || (!results.length && !state.input))) {
+    let showHistory = false;
+    if (history?.length && ((retainHistory && controller.store.loaded) || (!results.length && !state.input))) {
         showHistory = true;
     }
     if (!state.input && (historyActive || trendingActive)) {
-        if (history === null || history === void 0 ? void 0 : history.length)
+        if (history?.length)
             showHistory = true;
-        if (trending === null || trending === void 0 ? void 0 : trending.length)
+        if (trending?.length)
             showTrending = true;
     }
-    var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
-    var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded && !loading;
+    const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== types_1.FacetDisplay.SLIDER) : [];
+    const onlyTerms = (trending?.length || history.length) && !loaded && !loading;
     // results logic
-    var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
+    let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
     if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
         showResults = false;
     }
-    var noResults = Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0);
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var reset = function () {
+    const noResults = Boolean(search?.query?.string && results.length === 0);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const reset = () => {
         controller.setFocused();
     };
     // TODO: move to new Autocomplete component
@@ -388,13 +405,13 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     // 	}
     // }
     // const RecommendationTemplateComponent = recommendationTemplateComponent as unknown as FunctionalComponent<{ controller: RecommendationController }>;
-    var defaultSeeMoreButtonText = seeMoreButtonText
+    const defaultSeeMoreButtonText = seeMoreButtonText
         ? typeof seeMoreButtonText == 'function'
             ? seeMoreButtonText(controller)
             : seeMoreButtonText
-        : "See ".concat(pagination.totalResults, " ").concat(filters.length > 0 ? 'filtered' : '', " result").concat(pagination.totalResults == 1 ? '' : 's', " for \"").concat((_k = search.query) === null || _k === void 0 ? void 0 : _k.string, "\"");
+        : `See ${pagination.totalResults} ${filters.length > 0 ? 'filtered' : ''} result${pagination.totalResults == 1 ? '' : 's'} for "${search.query?.string}"`;
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         trendingTitle: {
             value: trendingTitle,
         },
@@ -417,108 +434,105 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             value: facetsTitle,
         },
         noResultsText: {
-            value: "<p>No results found for \"".concat(((_l = search.originalQuery) === null || _l === void 0 ? void 0 : _l.string) || ((_m = search.query) === null || _m === void 0 ? void 0 : _m.string), "\".</p><p>Please try another search.</p>"),
+            value: `<p>No results found for "${search.originalQuery?.string || search.query?.string}".</p><p>Please try another search.</p>`,
         },
         seeMoreButton: {
             value: defaultSeeMoreButtonText,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        controller: controller,
-    });
-    return visible ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete', className, internalClassName, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        controller,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return visible ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete', className, internalClassName, {
                 'ss__autocomplete--only-terms': onlyTerms,
                 'ss__autocomplete--vertical': vertical,
                 'ss__autocomplete--no-results': noResults,
-            }), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [(0, jsx_runtime_1.jsx)("span", __assign({ role: 'link', ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function () { return reset(); }, className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' } }, (_o = mergedLang.closeButton) === null || _o === void 0 ? void 0 : _o.all)), !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }), children: termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
-                        terms: terms,
-                        trending: trending,
-                        termsTitle: termsTitle,
-                        trendingTitle: trendingTitle,
-                        showTrending: showTrending,
-                        history: history,
-                        historyTitle: historyTitle,
-                        valueProps: valueProps,
-                        emIfy: emIfy,
-                        onTermClick: onTermClick,
-                        controller: controller,
-                        treePath: treePath,
-                    })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [terms.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__suggestions", children: [termsTitle || lang.termsTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_p = mergedLang.termsTitle) === null || _p === void 0 ? void 0 : _p.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle, children: terms.map(function (term, idx) {
-                                            var _a;
+            }), onClick: (e) => e.stopPropagation(), ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [(0, jsx_runtime_1.jsx)("span", { role: 'link', ref: (e) => (0, hooks_2.useA11y)(e), onClick: () => reset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }), children: termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
+                        terms,
+                        trending,
+                        termsTitle,
+                        trendingTitle,
+                        showTrending,
+                        history,
+                        historyTitle,
+                        valueProps,
+                        emIfy,
+                        onTermClick,
+                        controller,
+                        treePath,
+                    })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [terms.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__suggestions", children: [termsTitle || lang.termsTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions", children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.termsTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle, children: terms.map((term, idx) => {
                                             //initialize lang
-                                            var defaultLang = {
+                                            const defaultLang = {
                                                 suggestionsTerm: {
                                                     attributes: {
-                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(terms.length, ", ").concat(term.value),
+                                                        'aria-label': `item ${idx + 1} of ${terms.length}, ${term.value}`,
                                                     },
                                                 },
                                             };
                                             //deep merge with props.lang
-                                            var suggestionLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                                            var suggestionTermLangObj = (0, hooks_2.useLang)(suggestionLang, {
-                                                controller: controller,
-                                                term: term,
+                                            const suggestionLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            const suggestionTermLangObj = (0, hooks_2.useLang)(suggestionLang, {
+                                                controller,
+                                                term,
                                                 index: idx,
-                                            });
+                                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
                                             return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                                                     'ss__autocomplete__terms__option--active': term.active,
-                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = suggestionTermLangObj.suggestionsTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
-                                        }) })] })) : null, showTrending && !hideTrending ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__trending", children: [trendingTitle || lang.trendingTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_q = mergedLang.trendingTitle) === null || _q === void 0 ? void 0 : _q.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle, children: trending.map(function (term, idx) {
-                                            var _a;
+                                                }), children: (0, jsx_runtime_1.jsx)("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...(0, toolbox_1.createHoverProps)(term.preview), role: "link", ...suggestionTermLangObj.suggestionsTerm?.all, children: emIfy(term.value, state.input || '') }) }));
+                                        }) })] })) : null, showTrending && !hideTrending ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__trending", children: [trendingTitle || lang.trendingTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending", children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.trendingTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle, children: trending.map((term, idx) => {
                                             //initialize lang
-                                            var defaultLang = {
+                                            const defaultLang = {
                                                 trendingTerm: {
                                                     attributes: {
-                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(trending.length, ", ").concat(term.value),
+                                                        'aria-label': `item ${idx + 1} of ${trending.length}, ${term.value}`,
                                                     },
                                                 },
                                             };
                                             //deep merge with props.lang
-                                            var trendingLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                                            var trendingTermLangObj = (0, hooks_2.useLang)(trendingLang, {
-                                                controller: controller,
-                                                term: term,
+                                            const trendingLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            const trendingTermLangObj = (0, hooks_2.useLang)(trendingLang, {
+                                                controller,
+                                                term,
                                                 index: idx,
-                                            });
+                                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
                                             return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                                                     'ss__autocomplete__terms__option--active': term.active,
-                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = trendingTermLangObj.trendingTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
-                                        }) })] })) : null, showHistory && !hideHistory ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__history", children: [historyTitle || lang.historyTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_r = mergedLang.historyTitle) === null || _r === void 0 ? void 0 : _r.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle, children: history.map(function (term, idx) {
-                                            var _a;
+                                                }), children: (0, jsx_runtime_1.jsx)("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...(0, toolbox_1.createHoverProps)(term.preview), role: "link", ...trendingTermLangObj.trendingTerm?.all, children: emIfy(term.value, state.input || '') }) }));
+                                        }) })] })) : null, showHistory && !hideHistory ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__history", children: [historyTitle || lang.historyTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history", children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.historyTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle, children: history.map((term, idx) => {
                                             //initialize lang
-                                            var defaultLang = {
+                                            const defaultLang = {
                                                 historyTerm: {
                                                     attributes: {
-                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(history.length, ", ").concat(term.value),
+                                                        'aria-label': `item ${idx + 1} of ${history.length}, ${term.value}`,
                                                     },
                                                 },
                                             };
                                             //deep merge with props.lang
-                                            var historyLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                                            var historyTermLangObj = (0, hooks_2.useLang)(historyLang, {
-                                                controller: controller,
-                                                term: term,
+                                            const historyLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            const historyTermLangObj = (0, hooks_2.useLang)(historyLang, {
+                                                controller,
+                                                term,
                                                 index: idx,
-                                            });
+                                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
                                             return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                                                     'ss__autocomplete__terms__option--active': term.active,
-                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = historyTermLangObj.historyTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
+                                                }), children: (0, jsx_runtime_1.jsx)("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...(0, toolbox_1.createHoverProps)(term.preview), role: "link", ...historyTermLangObj.historyTerm?.all, children: emIfy(term.value, state.input || '') }) }));
                                         }) })] })) : null] })) })), !hideFacets &&
-                    (facetsSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__facets", children: (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps, treePath: treePath }) })) : (facetsToShow.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(facetsTitle || lang.facetsTitle.value) && vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_s = mergedLang.facetsTitle) === null || _s === void 0 ? void 0 : _s.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(facetsTitle || lang.facetsTitle.value) && !vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_t = mergedLang.facetsTitle) === null || _t === void 0 ? void 0 : _t.all)) })) : null, (0, jsx_runtime_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })))), !hideContent ? (contentSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller, treePath: treePath }) })) : showResults ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' })) : null, !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' })) : null, results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__results", children: resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(contentTitle || lang.contentTitle.value) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_u = mergedLang.contentTitle) === null || _u === void 0 ? void 0 : _u.all)) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller }))] })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results", children: noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_v = mergedLang.noResultsText) === null || _v === void 0 ? void 0 : _v.all))) })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' })) : null, !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller, treePath: treePath })) : ((_w = search === null || search === void 0 ? void 0 : search.query) === null || _w === void 0 ? void 0 : _w.string) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__info", children: (0, jsx_runtime_1.jsxs)("a", __assign({ href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } }, mergedLang.seeMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.seeMoreButton.value)), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof seeMoreButtonIcon == 'string' ? { icon: seeMoreButtonIcon } : seeMoreButtonIcon)))] })) })) : null) : null] }) })) : null) : null] })) })) : null;
+                    (facetsSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__facets", children: (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps, treePath }) })) : (facetsToShow.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(facetsTitle || lang.facetsTitle.value) && vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.facetsTitle?.all }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(facetsTitle || lang.facetsTitle.value) && !vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.facetsTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)(Facets_1.Facets, { ...subProps.facets, facets: facetsToShow }), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' }) : null] })] })))), !hideContent ? (contentSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, utilities_1.cloneWithProps)(contentSlot, { results, merchandising, search, pagination, filters, controller, treePath }) })) : showResults ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' }) : null, !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' }) : null, results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__results", children: resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results, contentTitle, controller, treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(contentTitle || lang.contentTitle.value) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content'), children: (0, jsx_runtime_1.jsx)("h5", { ...mergedLang.contentTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, { results: results, ...subProps.results, controller: controller })] })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results", children: noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search, pagination, controller, treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all })) })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' }) : null, !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search, results, pagination, filters, controller, treePath })) : search?.query?.string && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__info", children: (0, jsx_runtime_1.jsxs)("a", { href: state.url.href, onClick: () => controller?.setFocused && controller.setFocused(), ...mergedLang.seeMoreButton.attributes, children: [(0, jsx_runtime_1.jsx)("span", { ...mergedLang.seeMoreButton.value }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof seeMoreButtonIcon == 'string' ? { icon: seeMoreButtonIcon } : seeMoreButtonIcon) })] }) })) : null) : null] }) })) : null) : null] }) })) : null;
 });
-var emIfy = function (term, search) {
+const emIfy = (term, search) => {
     if (term && search) {
-        var match = term.match(escapeRegExp(search));
+        const match = term.match(escapeRegExp(search));
         if (search && term && match && typeof match.index == 'number') {
-            var beforeMatch = term.slice(0, match.index);
-            var afterMatch = term.slice(match.index + search.length, term.length);
+            const beforeMatch = term.slice(0, match.index);
+            const afterMatch = term.slice(match.index + search.length, term.length);
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMatch ? (0, jsx_runtime_1.jsx)("em", { children: beforeMatch }) : '', search, afterMatch ? (0, jsx_runtime_1.jsx)("em", { children: afterMatch }) : ''] }));
         }
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("em", { children: term }) }));
 };
-var escapeRegExp = function (string) {
-    return string === null || string === void 0 ? void 0 : string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const escapeRegExp = (string) => {
+    return string?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };