@searchspring/snap-preact-components 0.27.8 → 0.30.0

package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -27,7 +27,7 @@ export interface AutocompleteProps extends ComponentProps {
     breakpoints?: BreakpointsProps;
     controller: AutocompleteController;
     width?: string;
-    onFacetOptionClick?: (e: any) => void;
-    onTermClick?: (e: any) => void;
+    onFacetOptionClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onTermClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 //# sourceMappingURL=Autocomplete.d.ts.map

package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAQ5E,OAAO,EAAc,cAAc,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2J5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAyX/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;CAC1B"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAmJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA0X/E,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E"}

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

@@ -22,6 +22,7 @@ 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("@searchspring/snap-store-mobx");
 var Icon_1 = require("../../Atoms/Icon/Icon");
 var Results_1 = require("../../Organisms/Results");
 var Banner_1 = require("../../Atoms/Merchandising/Banner");
@@ -33,12 +34,26 @@ var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
 var CSS = {
     Autocomplete: function (_a) {
         var _b, _c;
-        var inputViewportOffsetBottom = _a.inputViewportOffsetBottom, hideFacets = _a.hideFacets, horizontalTerms = _a.horizontalTerms, noResults = _a.noResults, contentSlotExists = _a.contentSlotExists, viewportMaxHeight = _a.viewportMaxHeight, vertical = _a.vertical, width = _a.width, style = _a.style, theme = _a.theme;
-        return (0, react_1.css)(__assign({ '&, & *, & *:before, & *:after': {
+        var inputViewportOffsetBottom = _a.inputViewportOffsetBottom, hideFacets = _a.hideFacets, horizontalTerms = _a.horizontalTerms, noResults = _a.noResults, contentSlotExists = _a.contentSlotExists, viewportMaxHeight = _a.viewportMaxHeight, vertical = _a.vertical, width = _a.width, theme = _a.theme;
+        return (0, react_1.css)({
+            '&, & *, & *:before, & *:after': {
                 boxSizing: 'border-box',
-            }, display: 'flex', flexDirection: vertical ? 'column' : 'row', flexWrap: horizontalTerms && !vertical ? 'wrap' : null, position: 'absolute', zIndex: '10002', border: '1px solid #ebebeb', background: '#ffffff', width: width, maxWidth: '100vw', maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : null, overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : null, '&.ss__autocomplete--only-terms': {
+            },
+            display: 'flex',
+            flexDirection: vertical ? 'column' : 'row',
+            flexWrap: horizontalTerms && !vertical ? 'wrap' : undefined,
+            position: 'absolute',
+            zIndex: '10002',
+            border: '1px solid #ebebeb',
+            background: '#ffffff',
+            width: width,
+            maxWidth: '100vw',
+            maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : undefined,
+            overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : undefined,
+            '&.ss__autocomplete--only-terms': {
                 width: "".concat(vertical || horizontalTerms || contentSlotExists ? width : '150px'),
-            }, '.ss__autocomplete__title--trending': {
+            },
+            '.ss__autocomplete__title--trending': {
                 fontWeight: 'normal',
                 margin: 0,
                 color: '#c5c5c5',
@@ -48,25 +63,22 @@ var CSS = {
                     fontSize: '.8em',
                     margin: 0,
                 },
-            }, '.ss__autocomplete__title--facets': {
-                order: vertical ? 2 : null,
-            }, '& .ss__autocomplete__terms': {
-                // flex: `0 0 ${vertical || horizontalTerms || showTrending ? 'auto' : '150px'}`,
-                // order: 1,
-                // background: '#f8f8f8',
-                // width: horizontalTerms && !vertical ? '100%' : null,
+            },
+            '.ss__autocomplete__title--facets': {
+                order: vertical ? 2 : undefined,
+            },
+            '& .ss__autocomplete__terms': {
                 flex: "1 1 auto",
                 maxWidth: "".concat(vertical || horizontalTerms ? 'auto' : '150px'),
                 order: 1,
                 background: '#f8f8f8',
-                // width: horizontalTerms && !vertical ? '100%' : null,
                 '& .ss__autocomplete__terms__options': {
-                    display: vertical || horizontalTerms ? 'flex' : null,
+                    display: vertical || horizontalTerms ? 'flex' : undefined,
                     justifyContent: 'space-evenly',
                     flexWrap: 'wrap',
                     '& .ss__autocomplete__terms__option': {
-                        flexGrow: vertical || horizontalTerms ? '1' : null,
-                        textAlign: vertical || horizontalTerms ? 'center' : null,
+                        flexGrow: vertical || horizontalTerms ? '1' : undefined,
+                        textAlign: vertical || horizontalTerms ? 'center' : undefined,
                         wordBreak: 'break-all',
                         '& a': {
                             display: 'block',
@@ -84,16 +96,17 @@ var CSS = {
                         },
                     },
                 },
-            }, '& .ss__autocomplete__facets': {
+            },
+            '& .ss__autocomplete__facets': {
                 display: 'flex',
                 flex: "0 0 150px",
                 flexDirection: vertical ? 'row' : 'column',
                 columnGap: '20px',
                 order: 2,
                 padding: vertical ? '10px 20px' : '10px',
-                overflowY: vertical ? null : 'auto',
+                overflowY: vertical ? undefined : 'auto',
                 '& .ss__autocomplete__facet': {
-                    flex: vertical ? '0 1 150px' : null,
+                    flex: vertical ? '0 1 150px' : undefined,
                 },
                 '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered~.ss__facet-hierarchy-options__option:not(.ss__facet-hierarchy-options__option--filtered)': {
                     paddingLeft: 0,
@@ -104,14 +117,15 @@ var CSS = {
                 '.ss__facet-palette-options__icon': {
                     display: 'none',
                 },
-            }, '& .ss__autocomplete__content': {
+            },
+            '& .ss__autocomplete__content': {
                 display: 'flex',
                 flex: "1 1 ".concat(hideFacets ? 'auto' : '0%'),
                 flexDirection: 'column',
                 justifyContent: 'space-between',
                 order: 3,
                 overflowY: 'auto',
-                margin: noResults ? '0 auto' : null,
+                margin: noResults ? '0 auto' : undefined,
                 padding: vertical ? '10px 20px' : '10px',
                 '& .ss__banner.ss__banner--header, .ss__banner.ss__banner--banner': {
                     marginBottom: '10px',
@@ -133,11 +147,12 @@ var CSS = {
                         },
                     },
                 },
-            } }, style));
+            },
+        });
     },
 };
 exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({ 
         // default props
@@ -165,7 +180,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     var valueProps = {
         onMouseEnter: function (e) {
             clearTimeout(delayTimeout);
-            delayTimeout = setTimeout(function () {
+            delayTimeout = window.setTimeout(function () {
                 e.target.focus();
             }, delayTime);
         },
@@ -209,7 +224,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     var theme = (0, deepmerge_1.default)(themeOverride, (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}));
     props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
     var input = props.input;
-    var inputViewportOffsetBottom;
+    var inputViewportOffsetBottom = 0;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
@@ -246,7 +261,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             // component theme overrides
             theme: props.theme }),
     };
-    var _l = controller.store, search = _l.search, terms = _l.terms, trending = _l.trending, results = _l.results, merchandising = _l.merchandising, pagination = _l.pagination, loaded = _l.loaded, filters = _l.filters, facets = _l.facets, state = _l.state;
+    var _o = controller.store, search = _o.search, terms = _o.terms, trending = _o.trending, results = _o.results, merchandising = _o.merchandising, pagination = _o.pagination, loaded = _o.loaded, filters = _o.filters, facets = _o.facets, state = _o.state;
     // 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') {
@@ -256,7 +271,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
             controller.bind();
         }, []);
     }
-    var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0);
+    var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || state.input);
     var showTrending = !state.input && (trending === null || trending === void 0 ? void 0 : trending.length) && terms.length === 0;
     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) && !loaded;
@@ -267,12 +282,11 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                 inputViewportOffsetBottom: inputViewportOffsetBottom,
                 hideFacets: hideFacets,
                 horizontalTerms: horizontalTerms,
-                noResults: ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string) && results.length === 0,
-                contentSlotExists: contentSlot ? true : false,
+                noResults: Boolean(((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string) && results.length === 0),
+                contentSlotExists: Boolean(contentSlot),
                 viewportMaxHeight: viewportMaxHeight,
                 vertical: vertical,
                 width: width,
-                style: style,
                 theme: theme,
             }),
             style,
@@ -281,23 +295,23 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return (visible && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+    return visible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: function (e) { return e.stopPropagation(); } }),
-            !hideTerms && ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, { terms: terms, trending: trending, termsTitle: termsTitle, trendingTitle: trendingTitle, showTrending: showTrending, valueProps: valueProps, emIfy: emIfy, onTermClick: onTermClick, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+            !hideTerms && (showTrending || terms.length > 0 || termsSlot) && ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, { terms: terms, trending: trending, termsTitle: termsTitle, trendingTitle: trendingTitle, showTrending: showTrending, valueProps: valueProps, emIfy: emIfy, onTermClick: onTermClick, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
                 terms.length > 0 ? ((0, react_1.jsx)(preact_1.Fragment, null,
                     termsTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
                         (0, react_1.jsx)("h5", null, termsTitle))) : null,
                     (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, terms.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input)))); })))) : null,
+                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
                 showTrending ? ((0, react_1.jsx)(preact_1.Fragment, null,
                     trendingTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         (0, react_1.jsx)("h5", null, trendingTitle))) : null,
                     (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, trending.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input)))); })))) : null)))),
+                        (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null)))),
             !hideFacets &&
                 (facetsSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__facets" }, (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps }))) : (facetsToShow.length > 0 && ((0, react_1.jsx)(preact_1.Fragment, null,
                     facetsTitle && vertical ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
@@ -306,36 +320,37 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
                         facetsTitle && !vertical ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
                             (0, react_1.jsx)("h5", null, facetsTitle))) : null,
                         (0, react_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })),
-                        !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: types_1.BannerType.LEFT })) : null))))),
-            !hideContent ? (contentSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" }, (0, preact_1.cloneElement)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" },
-                !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: types_1.BannerType.HEADER })) : null,
-                !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: types_1.BannerType.BANNER })) : null,
-                results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__results" }, resultsSlot ? ((0, preact_1.cloneElement)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
-                    contentTitle && results.length > 0 ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content') },
-                        (0, react_1.jsx)("h5", null, contentTitle))) : null,
-                    (0, react_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller })))))) : ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__no-results" }, noResultsSlot ? ((0, preact_1.cloneElement)(noResultsSlot, { search: search, pagination: pagination, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
-                    (0, react_1.jsx)("p", null,
-                        "No results found for \"",
-                        search.query.string,
-                        "\"."),
-                    (0, react_1.jsx)("p", null, "Please try another search."))))),
-                !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: types_1.BannerType.FOOTER })) : null,
-                !hideLink ? (linkSlot ? ((0, preact_1.cloneElement)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller })) : ((_k = search === null || search === void 0 ? void 0 : search.query) === null || _k === void 0 ? void 0 : _k.string) && results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__info" },
-                    (0, react_1.jsx)("a", { href: state.url.href },
-                        "See ",
-                        pagination.totalResults,
-                        " ",
-                        filters.length > 0 ? 'filtered' : '',
-                        " result",
-                        pagination.totalResults == 1 ? '' : 's',
-                        " for \"",
-                        search.query.string,
-                        "\"",
-                        (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon))))) : null) : null)) : null) : null))));
+                        !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT })) : null))))),
+            !hideContent ? (contentSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" }, (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" },
+                (0, react_1.jsx)(preact_1.Fragment, null,
+                    !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER })) : null,
+                    !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER })) : null,
+                    results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__results" }, resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+                        contentTitle && results.length > 0 ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content') },
+                            (0, react_1.jsx)("h5", null, contentTitle))) : null,
+                        (0, react_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller })))))) : ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__no-results" }, noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+                        (0, react_1.jsx)("p", null,
+                            "No results found for \"",
+                            ((_k = search.originalQuery) === null || _k === void 0 ? void 0 : _k.string) || ((_l = search.query) === null || _l === void 0 ? void 0 : _l.string),
+                            "\"."),
+                        (0, react_1.jsx)("p", null, "Please try another search."))))),
+                    !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER })) : null,
+                    !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller })) : ((_m = search === null || search === void 0 ? void 0 : search.query) === null || _m === void 0 ? void 0 : _m.string) && results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__info" },
+                        (0, react_1.jsx)("a", { href: state.url.href },
+                            "See ",
+                            pagination.totalResults,
+                            " ",
+                            filters.length > 0 ? 'filtered' : '',
+                            " result",
+                            pagination.totalResults == 1 ? '' : 's',
+                            " for \"",
+                            search.query.string,
+                            "\"",
+                            (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon))))) : null) : null))) : null) : null))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });
 var emIfy = function (term, search) {
     var match = term.match(escapeRegExp(search));
-    if (search && term && match) {
+    if (search && term && match && match.index) {
         var beforeMatch = term.slice(0, match.index);
         var afterMatch = term.slice(match.index + search.length, term.length);
         return ((0, react_1.jsx)(preact_1.Fragment, null,

package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { AutocompleteProps } from './Autocomplete';
+import type { AutocompleteController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: AutocompleteProps) => JSX.Element) & {
@@ -337,5 +338,32 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: AutocompleteProps, { loaded: { controller } }: {
+        loaded: {
+            controller: AutocompleteController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: AutocompleteController;
+    }>)[];
+    args: {
+        breakpoints: {
+            0: {
+                columns: number;
+                rows: number;
+            };
+            320: {
+                columns: number;
+                rows: number;
+                hideFacets: boolean;
+                vertical: boolean;
+            };
+            768: {
+                columns: number;
+                rows: number;
+            };
+        };
+    };
+};
 //# sourceMappingURL=Autocomplete.stories.d.ts.map

package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKjE,wBA8PE;AAuBF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgBlE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA8PE;AAeF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAM1H,CAAC"}

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

@@ -287,7 +287,7 @@ var snapInstance = snapify_1.Snapify.autocomplete({
         },
     },
 });
-var Template = function (args, _a) {
+var Default = function (args, _a) {
     var controller = _a.loaded.controller;
     // bind after input exists
     setTimeout(function () {
@@ -295,7 +295,7 @@ var Template = function (args, _a) {
     });
     return (0, preact_1.h)(Autocomplete_1.Autocomplete, __assign({}, args, { controller: controller, input: controller === null || controller === void 0 ? void 0 : controller.config.selector }));
 };
-exports.Default = Template.bind({});
+exports.Default = Default;
 exports.Default.loaders = [
     function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a;

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps } from '../../../types';
 export declare const BranchOverride: (properties: BranchOverrideProps) => JSX.Element;
 export interface BranchOverrideProps extends ComponentProps {
@@ -10,7 +11,7 @@ export interface BranchOverrideProps extends ComponentProps {
         url: string;
         lastModified: string;
     };
-    onRemoveClick?: (e: any, name: string) => void;
+    onRemoveClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, name: string) => void;
     darkMode?: boolean;
 }
 //# sourceMappingURL=BranchOverride.d.ts.map

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAwMhD,eAAO,MAAM,cAAc,eAAgB,mBAAmB,KAAG,WAqGhE,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,KAAA,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8O5D,eAAO,MAAM,cAAc,eAAgB,mBAAmB,KAAG,WAgHhE,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.js

@@ -25,24 +25,24 @@ var utilities_1 = require("../../../utilities");
 var providers_1 = require("../../../providers");
 var CSS = {
     override: function (_a) {
-        var theme = _a.theme;
+        var componentTheme = _a.componentTheme;
         return (0, react_1.css)({
             width: '360px',
             height: '120px',
             overflow: 'hidden',
             fontSize: '14px',
             position: 'fixed',
-            zIndex: 9999,
+            zIndex: '9999',
             cursor: 'auto',
             bottom: '50px',
             right: 0,
-            background: theme.main.background,
-            color: theme.main.color,
-            border: theme.main.border,
+            background: componentTheme.main.background,
+            color: componentTheme.main.color,
+            border: componentTheme.main.border,
             borderRight: 0,
             borderTopLeftRadius: '5px',
             borderBottomLeftRadius: '5px',
-            boxShadow: theme.main.boxShadow,
+            boxShadow: componentTheme.main.boxShadow,
             transition: 'height ease 0.2s, right ease 0.5s 0.2s',
             '&.ss__branch-override--collapsed': {
                 transition: 'height ease 0.5s 0.5s, right ease 0.5s',
@@ -52,8 +52,8 @@ var CSS = {
             },
             '.ss__branch-override__top': {
                 padding: '10px',
-                background: theme.top.background,
-                borderBottom: theme.top.border,
+                background: componentTheme.top.background,
+                borderBottom: componentTheme.top.border,
                 '.ss__branch-override__top__logo': {
                     display: 'inline-block',
                     height: '30px',
@@ -74,8 +74,8 @@ var CSS = {
                     textAlign: 'center',
                     cursor: 'pointer',
                     fontSize: '10px',
-                    border: theme.top.button.border,
-                    color: theme.top.button.color,
+                    border: componentTheme.top.button.border,
+                    color: componentTheme.top.button.color,
                     float: 'right',
                     marginRight: '14px',
                 },
@@ -85,8 +85,8 @@ var CSS = {
                 fontSize: '12px',
                 '.ss__branch-override__bottom__left': {
                     fontWeight: 'bold',
-                    fontStyle: theme.bottom.branch.style,
-                    color: theme.bottom.branch.color,
+                    fontStyle: componentTheme.bottom.branch.style,
+                    color: componentTheme.bottom.branch.color,
                     fontSize: '14px',
                     lineHeight: '20px',
                     display: 'inline-flex',
@@ -102,7 +102,7 @@ var CSS = {
                 '.ss__branch-override__bottom__right': {
                     float: 'right',
                     fontStyle: 'italic',
-                    color: theme.bottom.additional.color,
+                    color: componentTheme.bottom.additional.color,
                     fontSize: '12px',
                     lineHeight: '20px',
                 },
@@ -114,6 +114,7 @@ var CSS = {
     },
 };
 var darkTheme = {
+    class: 'ss__branch-override--dark',
     main: {
         border: '0',
         background: 'rgba(59, 35, 173, 0.9)',
@@ -147,6 +148,7 @@ var darkTheme = {
     },
 };
 var lightTheme = {
+    class: 'ss__branch-override--light',
     main: {
         border: '1px solid #ccc',
         background: 'rgba(255, 255, 255, 0.95)',
@@ -179,6 +181,7 @@ var lightTheme = {
     },
 };
 var failureTheme = {
+    class: 'ss__branch-override--error',
     main: {
         border: '0',
         background: 'rgba(130, 6, 6, 0.9)',
@@ -211,7 +214,7 @@ var failureTheme = {
         },
     },
 };
-var themes = {
+var componentThemes = {
     darkTheme: darkTheme,
     lightTheme: lightTheme,
     failureTheme: failureTheme,
@@ -229,7 +232,7 @@ var BranchOverride = function (properties) {
             disableStyles: disableStyles,
         })), { 
             // component theme overrides
-            theme: props.theme }),
+            theme: props === null || props === void 0 ? void 0 : props.theme }),
     };
     var prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
     var _e = (0, hooks_1.useState)(prefersDark ? 'darkTheme' : 'lightTheme'), themeName = _e[0], setThemeName = _e[1];
@@ -239,35 +242,34 @@ var BranchOverride = function (properties) {
     }
     var styling = {};
     if (!disableStyles) {
-        styling.css = [CSS.override({ theme: themes[themeName] }), style];
+        styling.css = [CSS.override({ componentTheme: componentThemes[themeName] }), style];
     }
     else if (style) {
         styling.css = [style];
     }
-    return ((details || error) &&
-        name && ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__branch-override', { 'ss__branch-override--collapsed': collapsed }, className) }, styling, { onClick: function (e) {
+    return (details || error) && name ? ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__branch-override', componentThemes[themeName].class, { 'ss__branch-override--collapsed': collapsed }, className) }, styling, { onClick: function (e) {
             e.preventDefault();
             e.stopPropagation();
             setCollapsed(0);
         } }),
         (0, react_1.jsx)("div", { className: "ss__branch-override__top" },
-            (0, react_1.jsx)("img", { className: "ss__branch-override__top__logo", src: themes[themeName].top.logo.src }),
+            (0, react_1.jsx)("img", { className: "ss__branch-override__top__logo", src: componentThemes[themeName].top.logo.src }),
             (0, react_1.jsx)("div", { className: "ss__branch-override__top__collapse", onClick: function (e) {
                     e.preventDefault();
                     e.stopPropagation();
                     setCollapsed(1);
                 } },
-                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "18px", color: themes[themeName].top.close.fill }, subProps.icon, { icon: "close-thin" }))),
+                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "18px", color: componentThemes[themeName].top.close.fill }, subProps.icon, { icon: "close-thin" }))),
             (0, react_1.jsx)("div", { className: "ss__branch-override__top__button", onClick: function (e) {
                     e.preventDefault();
                     e.stopPropagation();
                     onRemoveClick && onRemoveClick(e, name);
-                } }, themes[themeName].top.button.content)),
+                } }, componentThemes[themeName].top.button.content)),
         (0, react_1.jsx)("div", { className: "ss__branch-override__bottom" },
             (0, react_1.jsx)("span", { className: "ss__branch-override__bottom__left" }, error ? ((0, react_1.jsx)(preact_1.Fragment, null,
-                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "12px", color: themes[themeName].bottom.branch.color }, subProps.icon, { icon: "warn" })),
+                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "12px", color: componentThemes[themeName].bottom.branch.color }, subProps.icon, { icon: "warn" })),
                 (0, react_1.jsx)("span", null, error.message))) : (name)),
             (0, react_1.jsx)("span", { className: "ss__branch-override__bottom__right" }, error ? name : details === null || details === void 0 ? void 0 : details.lastModified),
-            (0, react_1.jsx)("div", { className: "ss__branch-override__bottom__content" }, (error === null || error === void 0 ? void 0 : error.description) || themes[themeName].bottom.content)))));
+            (0, react_1.jsx)("div", { className: "ss__branch-override__bottom__content" }, (error === null || error === void 0 ? void 0 : error.description) || componentThemes[themeName].bottom.content)))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 };
 exports.BranchOverride = BranchOverride;

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.stories.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { h } from 'preact';
+import { BranchOverrideProps } from './BranchOverride';
 declare const _default: {
     title: string;
-    component: (properties: import("./BranchOverride").BranchOverrideProps) => JSX.Element;
+    component: (properties: BranchOverrideProps) => JSX.Element;
     parameters: {
         docs: {
             page: () => h.JSX.Element;
@@ -129,8 +130,46 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Auto: any;
-export declare const Dark: any;
-export declare const Error: any;
-export declare const Light: any;
+export declare const Auto: {
+    (args: BranchOverrideProps): h.JSX.Element;
+    args: {
+        name: string;
+        details: {
+            url: string;
+            lastModified: string;
+        };
+    };
+};
+export declare const Dark: {
+    (args: BranchOverrideProps): h.JSX.Element;
+    args: {
+        name: string;
+        details: {
+            url: string;
+            lastModified: string;
+        };
+        darkMode: boolean;
+    };
+};
+export declare const Error: {
+    (args: BranchOverrideProps): h.JSX.Element;
+    args: {
+        name: string;
+        error: {
+            message: string;
+            description: string;
+        };
+    };
+};
+export declare const Light: {
+    (args: BranchOverrideProps): h.JSX.Element;
+    args: {
+        name: string;
+        details: {
+            url: string;
+            lastModified: string;
+        };
+        darkMode: boolean;
+    };
+};
 //# sourceMappingURL=BranchOverride.stories.d.ts.map

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BranchOverride.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQrC,wBA6EE;AAIF,eAAO,MAAM,IAAI,KAAoB,CAAC;AAStC,eAAO,MAAM,IAAI,KAAoB,CAAC;AAUtC,eAAO,MAAM,KAAK,KAAoB,CAAC;AASvC,eAAO,MAAM,KAAK,KAAoB,CAAC"}
+{"version":3,"file":"BranchOverride.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;;;;;;;;;yBAkB7D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA6EE;AAEF,eAAO,MAAM,IAAI;WAAU,mBAAmB;;;;;;;;CAAiC,CAAC;AAShF,eAAO,MAAM,IAAI;WAAU,mBAAmB;;;;;;;;;CAAiC,CAAC;AAUhF,eAAO,MAAM,KAAK;WAAU,mBAAmB;;;;;;;;CAAiC,CAAC;AASjF,eAAO,MAAM,KAAK;WAAU,mBAAmB;;;;;;;;;CAAiC,CAAC"}