@searchspring/snap-preact-components 0.20.0

package/dist/cjs/components/Molecules/Slideout/Slideout.stories.js

@@ -0,0 +1,110 @@
+"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.Default = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var Slideout_1 = require("./Slideout");
+var utilities_1 = require("../../../utilities");
+var readme_md_1 = __importDefault(require("../Slideout/readme.md"));
+exports.default = {
+    title: "Molecules/Slideout",
+    component: Slideout_1.Slideout,
+    parameters: {
+        docs: {
+            page: function () { return ((0, preact_1.h)("div", null,
+                (0, preact_1.h)(readme_md_1.default, null),
+                (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
+        },
+    },
+    argTypes: __assign({ active: {
+            description: 'Slideout is active',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, slideDirection: {
+            defaultValue: 'left',
+            description: 'Slideout slide direction',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'left' },
+            },
+            control: { type: 'text' },
+        }, width: {
+            defaultValue: '300px',
+            description: 'Slideout width',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '300px' },
+            },
+            control: { type: 'text' },
+        }, displayAt: {
+            defaultValue: '',
+            description: 'Media query for when to render this component',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '' },
+            },
+            control: { type: 'text' },
+        }, buttonContent: {
+            defaultValue: 'click me',
+            description: 'Slideout button content (children), appended to buttonText',
+            table: {
+                type: {
+                    summary: 'string, jsx',
+                },
+                defaultValue: { summary: 'click me' },
+            },
+            control: { type: 'text' },
+        }, transitionSpeed: {
+            defaultValue: '0.25s',
+            description: 'Overlay opening/closing transition speed',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '0.25s' },
+            },
+            control: { type: 'text' },
+        }, overlayColor: {
+            defaultValue: 'rgba(0,0,0,0.8)',
+            description: 'Slideout overlay color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'rgba(0,0,0,0.8)' },
+            },
+            control: { type: 'color' },
+        } }, utilities_1.componentArgs),
+};
+var _HelloWorld = function (args) { return ((0, preact_1.h)(Slideout_1.Slideout, __assign({}, args),
+    (0, preact_1.h)("div", null, "props.children will be rendered here"))); };
+exports.Default = _HelloWorld.bind({});
+exports.Default.args = {
+    active: true,
+};

package/dist/cjs/components/Molecules/Slideout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Slideout';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/Molecules/Slideout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/cjs/components/Molecules/Slideout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Slideout"), exports);

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { AutocompleteController } from '@searchspring/snap-controller';
+import { BreakpointsProps } from '../../Organisms/Results';
+import { ComponentProps } from '../../../types';
+export declare const Autocomplete: ((properties: AutocompleteProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface AutocompleteProps extends ComponentProps {
+    input: Element | string;
+    hideTerms?: boolean;
+    hideFacets?: boolean;
+    hideContent?: boolean;
+    hideBanners?: boolean;
+    hideLink?: boolean;
+    horizontalTerms?: boolean;
+    vertical?: boolean;
+    termsTitle?: string;
+    trendingTitle?: string;
+    facetsTitle?: string;
+    contentTitle?: string;
+    viewportMaxHeight?: boolean;
+    termsSlot?: JSX.Element;
+    facetsSlot?: JSX.Element;
+    contentSlot?: JSX.Element;
+    resultsSlot?: JSX.Element;
+    noResultsSlot?: JSX.Element;
+    linkSlot?: JSX.Element;
+    breakpoints?: BreakpointsProps;
+    controller: AutocompleteController;
+    width?: string;
+}
+//# sourceMappingURL=Autocomplete.d.ts.map

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

@@ -0,0 +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;AAG5E,OAAO,EAAwB,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAKjF,OAAO,EAAc,cAAc,EAAgB,MAAM,gBAAgB,CAAC;AA2J1E,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAkX/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;CACf"}

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

@@ -0,0 +1,354 @@
+"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;
+/** @jsx jsx */
+var preact_1 = require("preact");
+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 Icon_1 = require("../../Atoms/Icon/Icon");
+var Results_1 = require("../../Organisms/Results");
+var Banner_1 = require("../../Atoms/Merchandising/Banner");
+var Facets_1 = require("../../Organisms/Facets");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var types_1 = require("../../../types");
+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': {
+                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': {
+                width: "".concat(vertical || horizontalTerms || contentSlotExists ? width : '150px'),
+            }, '.ss__autocomplete__title--trending': {
+                fontWeight: 'normal',
+                margin: 0,
+                color: '#c5c5c5',
+                textTransform: 'uppercase',
+                padding: '10px',
+                '& h5': {
+                    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,
+                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,
+                    justifyContent: 'space-evenly',
+                    flexWrap: 'wrap',
+                    '& .ss__autocomplete__terms__option': {
+                        flexGrow: vertical || horizontalTerms ? '1' : null,
+                        textAlign: vertical || horizontalTerms ? 'center' : null,
+                        wordBreak: 'break-all',
+                        '& a': {
+                            display: 'block',
+                            padding: vertical || horizontalTerms ? '10px 30px' : '10px',
+                            '& em': {
+                                fontStyle: 'normal',
+                            },
+                        },
+                        '&.ss__autocomplete__terms__option--active': {
+                            background: '#fff',
+                            '& a': {
+                                fontWeight: 'bold',
+                                color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+                            },
+                        },
+                    },
+                },
+            }, '& .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',
+                '& .ss__autocomplete__facet': {
+                    flex: vertical ? '0 1 150px' : null,
+                },
+                '.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,
+                },
+                '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered:hover': {
+                    cursor: 'pointer',
+                },
+                '.ss__facet-palette-options__icon': {
+                    display: 'none',
+                },
+            }, '& .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,
+                padding: vertical ? '10px 20px' : '10px',
+                '& .ss__banner.ss__banner--header, .ss__banner.ss__banner--banner': {
+                    marginBottom: '10px',
+                },
+                '& .ss__banner.ss__banner--footer': {
+                    margin: '10px 0',
+                },
+                '& .ss__autocomplete__content__results': {
+                    minHeight: '0%',
+                },
+                '& .ss__autocomplete__content__info': {
+                    padding: '10px',
+                    textAlign: noResults ? 'center' : 'right',
+                    '& a': {
+                        fontWeight: 'bold',
+                        color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
+                        '& .ss__icon': {
+                            marginLeft: '5px',
+                        },
+                    },
+                },
+            } }, style));
+    },
+};
+exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        termsTitle: '', trendingTitle: 'Popular Searches', facetsTitle: '', contentTitle: '', width: '100%' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.autocomplete), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.autocomplete);
+    //passed in or default breakpoints result props
+    var breakpoints = props.breakpoints || {
+        0: {
+            columns: 2,
+            rows: 1,
+            hideFacets: true,
+            vertical: true,
+        },
+        540: {
+            columns: 3,
+            rows: 1,
+            vertical: true,
+        },
+        768: {
+            columns: 2,
+            rows: 3,
+        },
+    };
+    var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        var theme_1 = (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_1 });
+    }
+    var hideTerms = props.hideTerms, hideFacets = props.hideFacets, hideContent = props.hideContent, hideBanners = props.hideBanners, hideLink = props.hideLink, horizontalTerms = props.horizontalTerms, vertical = props.vertical, termsTitle = props.termsTitle, trendingTitle = props.trendingTitle, facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, viewportMaxHeight = props.viewportMaxHeight, termsSlot = props.termsSlot, facetsSlot = props.facetsSlot, contentSlot = props.contentSlot, resultsSlot = props.resultsSlot, noResultsSlot = props.noResultsSlot, linkSlot = props.linkSlot, disableStyles = props.disableStyles, className = props.className, width = props.width, style = props.style, controller = props.controller;
+    var input = props.input;
+    var inputViewportOffsetBottom;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        var rect = input === null || input === void 0 ? void 0 : input.getBoundingClientRect();
+        inputViewportOffsetBottom = (rect === null || rect === void 0 ? void 0 : rect.bottom) || 0;
+    }
+    var delayTimeout;
+    var delayTime = 333;
+    var valueProps = {
+        onMouseEnter: function (e) {
+            clearTimeout(delayTimeout);
+            delayTimeout = setTimeout(function () {
+                e.target.focus();
+            }, delayTime);
+        },
+        onMouseLeave: function () {
+            clearTimeout(delayTimeout);
+        },
+    };
+    var subProps = {
+        facets: __assign(__assign(__assign({ 
+            // default props
+            limit: 3 }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.facets), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: (0, deepmerge_1.default)({
+                components: {
+                    facet: {
+                        limit: 6,
+                        disableOverflow: true,
+                        disableCollapse: true,
+                        previewOnFocus: true,
+                        valueProps: valueProps,
+                    },
+                    facetGridOptions: {
+                        columns: 3,
+                    },
+                    facetHierarchyOptions: {
+                        hideCount: true,
+                    },
+                    facetListOptions: {
+                        hideCheckbox: true,
+                        hideCount: true,
+                    },
+                    facetPaletteOptions: {
+                        hideLabel: true,
+                        columns: 3,
+                    },
+                },
+            }, __assign({}, props.theme)) }),
+        banner: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__autocomplete__banner' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.banner), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        results: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__autocomplete__results', breakpoints: breakpoints }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.results), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: (0, deepmerge_1.default)({
+                components: {
+                    result: {
+                        hideBadge: true,
+                    },
+                },
+            }, __assign({}, props.theme)) }),
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__autocomplete__icon', icon: 'angle-right', size: '10px' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // 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;
+    // 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 () {
+            controller.bind();
+        }, []);
+    }
+    var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0);
+    var showTrending = (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;
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [
+            CSS.Autocomplete({
+                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,
+                viewportMaxHeight: viewportMaxHeight,
+                vertical: vertical,
+                width: width,
+                style: style,
+                theme: theme,
+            }),
+            style,
+        ];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    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, 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({ 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({ 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') },
+                        (0, react_1.jsx)("h5", null, facetsTitle))) : null,
+                    (0, react_1.jsx)("div", { className: "ss__autocomplete__facets" },
+                        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))));
+});
+var emIfy = function (term, search) {
+    var match = term.match(escapeRegExp(search));
+    if (search && term && match) {
+        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,
+            beforeMatch ? (0, react_1.jsx)("em", null, beforeMatch) : '',
+            search,
+            afterMatch ? (0, react_1.jsx)("em", null, afterMatch) : ''));
+    }
+    return ((0, react_1.jsx)(preact_1.Fragment, null,
+        (0, react_1.jsx)("em", null, term)));
+};
+var escapeRegExp = function (string) {
+    return string === null || string === void 0 ? void 0 : string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};