@searchspring/snap-preact-components 0.27.7 → 0.29.0

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

@@ -1,34 +1,35 @@
 /** @jsx jsx */
-import { Fragment, cloneElement } from 'preact';
+import { Fragment } from 'preact';
 import { useEffect } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';
+import { ContentType } from '@searchspring/snap-store-mobx';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Results } from '../../Organisms/Results';
 import { Banner } from '../../Atoms/Merchandising/Banner';
 import { Facets } from '../../Organisms/Facets';
 import { defined, cloneWithProps } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
-import { BannerType, FacetDisplay } from '../../../types';
+import { FacetDisplay } from '../../../types';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 const CSS = {
-    Autocomplete: ({ inputViewportOffsetBottom, hideFacets, horizontalTerms, noResults, contentSlotExists, viewportMaxHeight, vertical, width, style, theme, }) => css({
+    Autocomplete: ({ inputViewportOffsetBottom, hideFacets, horizontalTerms, noResults, contentSlotExists, viewportMaxHeight, vertical, width, theme, }) => css({
         '&, & *, & *:before, & *:after': {
             boxSizing: 'border-box',
         },
         display: 'flex',
         flexDirection: vertical ? 'column' : 'row',
-        flexWrap: horizontalTerms && !vertical ? 'wrap' : null,
+        flexWrap: horizontalTerms && !vertical ? 'wrap' : undefined,
         position: 'absolute',
         zIndex: '10002',
         border: '1px solid #ebebeb',
         background: '#ffffff',
         width: width,
         maxWidth: '100vw',
-        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? `calc(100vh - ${inputViewportOffsetBottom + 10}px)` : null,
-        overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : null,
+        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? `calc(100vh - ${inputViewportOffsetBottom + 10}px)` : undefined,
+        overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : undefined,
         '&.ss__autocomplete--only-terms': {
             width: `${vertical || horizontalTerms || contentSlotExists ? width : '150px'}`,
         },
@@ -44,25 +45,20 @@ const CSS = {
             },
         },
         '.ss__autocomplete__title--facets': {
-            order: vertical ? 2 : null,
+            order: vertical ? 2 : undefined,
         },
         '& .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: `${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',
@@ -88,9 +84,9 @@ const CSS = {
             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,
@@ -109,7 +105,7 @@ const CSS = {
             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',
@@ -132,7 +128,6 @@ const CSS = {
                 },
             },
         },
-        ...style,
     }),
 };
 export const Autocomplete = observer((properties) => {
@@ -173,7 +168,7 @@ export const Autocomplete = observer((properties) => {
     const valueProps = {
         onMouseEnter: (e) => {
             clearTimeout(delayTimeout);
-            delayTimeout = setTimeout(() => {
+            delayTimeout = window.setTimeout(() => {
                 e.target.focus();
             }, delayTime);
         },
@@ -220,8 +215,8 @@ export const Autocomplete = observer((properties) => {
         ...displaySettings,
         theme,
     };
-    let { input } = props;
-    let inputViewportOffsetBottom;
+    let input = props.input;
+    let inputViewportOffsetBottom = 0;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
@@ -292,7 +287,7 @@ export const Autocomplete = observer((properties) => {
             controller.bind();
         }, []);
     }
-    const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0);
+    const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0 || state.input);
     const showTrending = !state.input && trending?.length && terms.length === 0;
     const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
     const onlyTerms = trending?.length && !loaded;
@@ -303,12 +298,11 @@ export const Autocomplete = observer((properties) => {
                 inputViewportOffsetBottom,
                 hideFacets,
                 horizontalTerms,
-                noResults: search?.query?.string && results.length === 0,
-                contentSlotExists: contentSlot ? true : false,
+                noResults: Boolean(search?.query?.string && results.length === 0),
+                contentSlotExists: Boolean(contentSlot),
                 viewportMaxHeight,
                 vertical,
                 width,
-                style,
                 theme,
             }),
             style,
@@ -317,23 +311,23 @@ export const Autocomplete = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (visible && (jsx(CacheProvider, null,
+    return visible ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: (e) => e.stopPropagation() },
-            !hideTerms && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, onTermClick, controller })) : (jsx(Fragment, null,
+            !hideTerms && (showTrending || terms.length > 0 || termsSlot) && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, onTermClick, controller })) : (jsx(Fragment, null,
                 terms.length > 0 ? (jsx(Fragment, null,
                     termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
                         jsx("h5", null, termsTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null,
+                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
                 showTrending ? (jsx(Fragment, null,
                     trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
                         jsx("h5", null, trendingTitle))) : null,
                     jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
                             'ss__autocomplete__terms__option--active': term.active,
                         }) },
-                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input)))))))) : null)))),
+                        jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
             !hideFacets &&
                 (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
                     facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
@@ -342,36 +336,37 @@ export const Autocomplete = observer((properties) => {
                         facetsTitle && !vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
                             jsx("h5", null, facetsTitle))) : null,
                         jsx(Facets, { ...subProps.facets, facets: facetsToShow }),
-                        !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: BannerType.LEFT }) : null))))),
-            !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneElement(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string ? (jsx("div", { className: "ss__autocomplete__content" },
-                !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: BannerType.HEADER }) : null,
-                !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: BannerType.BANNER }) : null,
-                results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__results" }, resultsSlot ? (cloneElement(resultsSlot, { results, contentTitle, controller })) : (jsx(Fragment, null,
-                    contentTitle && results.length > 0 ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--content') },
-                        jsx("h5", null, contentTitle))) : null,
-                    jsx(Results, { results: results, ...subProps.results, controller: controller }))))) : (jsx("div", { className: "ss__autocomplete__content__no-results" }, noResultsSlot ? (cloneElement(noResultsSlot, { search, pagination, controller })) : (jsx(Fragment, null,
-                    jsx("p", null,
-                        "No results found for \"",
-                        search.query.string,
-                        "\"."),
-                    jsx("p", null, "Please try another search."))))),
-                !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: BannerType.FOOTER }) : null,
-                !hideLink ? (linkSlot ? (cloneElement(linkSlot, { search, results, pagination, filters, controller })) : search?.query?.string && results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__info" },
-                    jsx("a", { href: state.url.href },
-                        "See ",
-                        pagination.totalResults,
-                        " ",
-                        filters.length > 0 ? 'filtered' : '',
-                        " result",
-                        pagination.totalResults == 1 ? '' : 's',
-                        " for \"",
-                        search.query.string,
-                        "\"",
-                        jsx(Icon, { ...subProps.icon })))) : null) : null)) : null) : null))));
+                        !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.LEFT }) : null))))),
+            !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneWithProps(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string ? (jsx("div", { className: "ss__autocomplete__content" },
+                jsx(Fragment, null,
+                    !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.HEADER }) : null,
+                    !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.BANNER }) : null,
+                    results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__results" }, resultsSlot ? (cloneWithProps(resultsSlot, { results, contentTitle, controller })) : (jsx(Fragment, null,
+                        contentTitle && results.length > 0 ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--content') },
+                            jsx("h5", null, contentTitle))) : null,
+                        jsx(Results, { results: results, ...subProps.results, controller: controller }))))) : (jsx("div", { className: "ss__autocomplete__content__no-results" }, noResultsSlot ? (cloneWithProps(noResultsSlot, { search, pagination, controller })) : (jsx(Fragment, null,
+                        jsx("p", null,
+                            "No results found for \"",
+                            search.originalQuery?.string || search.query?.string,
+                            "\"."),
+                        jsx("p", null, "Please try another search."))))),
+                    !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.FOOTER }) : null,
+                    !hideLink ? (linkSlot ? (cloneWithProps(linkSlot, { search, results, pagination, filters, controller })) : search?.query?.string && results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__info" },
+                        jsx("a", { href: state.url.href },
+                            "See ",
+                            pagination.totalResults,
+                            " ",
+                            filters.length > 0 ? 'filtered' : '',
+                            " result",
+                            pagination.totalResults == 1 ? '' : 's',
+                            " for \"",
+                            search.query.string,
+                            "\"",
+                            jsx(Icon, { ...subProps.icon })))) : null) : null))) : null) : null))) : (jsx(Fragment, null));
 });
 const emIfy = (term, search) => {
     const match = term.match(escapeRegExp(search));
-    if (search && term && match) {
+    if (search && term && match && match.index) {
         const beforeMatch = term.slice(0, match.index);
         const afterMatch = term.slice(match.index + search.length, term.length);
         return (jsx(Fragment, null,

package/dist/esm/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/esm/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/esm/components/Organisms/Autocomplete/Autocomplete.stories.js

@@ -257,14 +257,13 @@ const snapInstance = Snapify.autocomplete({
         },
     },
 });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     // bind after input exists
     setTimeout(() => {
         controller.bind();
     });
     return h(Autocomplete, { ...args, controller: controller, input: controller?.config.selector });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => ({
         controller: await snapInstance,

package/dist/esm/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/esm/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;AA0O5D,eAAO,MAAM,cAAc,eAAgB,mBAAmB,KAAG,WA2GhE,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/esm/components/Organisms/BranchOverride/BranchOverride.js

@@ -7,23 +7,23 @@ import { Icon } from '../../Atoms/Icon/Icon';
 import { defined } from '../../../utilities';
 import { useTheme } from '../../../providers';
 const CSS = {
-    override: ({ theme }) => css({
+    override: ({ componentTheme }) => 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',
@@ -33,8 +33,8 @@ const 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',
@@ -55,8 +55,8 @@ const 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',
             },
@@ -66,8 +66,8 @@ const 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',
@@ -83,7 +83,7 @@ const CSS = {
             '.ss__branch-override__bottom__right': {
                 float: 'right',
                 fontStyle: 'italic',
-                color: theme.bottom.additional.color,
+                color: componentTheme.bottom.additional.color,
                 fontSize: '12px',
                 lineHeight: '20px',
             },
@@ -191,7 +191,7 @@ const failureTheme = {
         },
     },
 };
-const themes = {
+const componentThemes = {
     darkTheme,
     lightTheme,
     failureTheme,
@@ -219,7 +219,7 @@ export const BranchOverride = (properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
     };
     const prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
@@ -230,34 +230,33 @@ export const BranchOverride = (properties) => {
     }
     const 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 && (jsx("div", { className: classnames('ss__branch-override', { 'ss__branch-override--collapsed': collapsed }, className), ...styling, onClick: (e) => {
+    return (details || error) && name ? (jsx("div", { className: classnames('ss__branch-override', { 'ss__branch-override--collapsed': collapsed }, className), ...styling, onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
             setCollapsed(0);
         } },
         jsx("div", { className: "ss__branch-override__top" },
-            jsx("img", { className: "ss__branch-override__top__logo", src: themes[themeName].top.logo.src }),
+            jsx("img", { className: "ss__branch-override__top__logo", src: componentThemes[themeName].top.logo.src }),
             jsx("div", { className: "ss__branch-override__top__collapse", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     setCollapsed(1);
                 } },
-                jsx(Icon, { size: "18px", color: themes[themeName].top.close.fill, ...subProps.icon, icon: "close-thin" })),
+                jsx(Icon, { size: "18px", color: componentThemes[themeName].top.close.fill, ...subProps.icon, icon: "close-thin" })),
             jsx("div", { className: "ss__branch-override__top__button", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     onRemoveClick && onRemoveClick(e, name);
-                } }, themes[themeName].top.button.content)),
+                } }, componentThemes[themeName].top.button.content)),
         jsx("div", { className: "ss__branch-override__bottom" },
             jsx("span", { className: "ss__branch-override__bottom__left" }, error ? (jsx(Fragment, null,
-                jsx(Icon, { size: "12px", color: themes[themeName].bottom.branch.color, ...subProps.icon, icon: "warn" }),
+                jsx(Icon, { size: "12px", color: componentThemes[themeName].bottom.branch.color, ...subProps.icon, icon: "warn" }),
                 jsx("span", null, error.message))) : (name)),
             jsx("span", { className: "ss__branch-override__bottom__right" }, error ? name : details?.lastModified),
-            jsx("div", { className: "ss__branch-override__bottom__content" }, error?.description || themes[themeName].bottom.content)))));
+            jsx("div", { className: "ss__branch-override__bottom__content" }, error?.description || componentThemes[themeName].bottom.content)))) : (jsx(Fragment, null));
 };

package/dist/esm/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/esm/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"}

package/dist/esm/components/Organisms/BranchOverride/BranchOverride.stories.js

@@ -73,8 +73,7 @@ export default {
         ...componentArgs,
     },
 };
-const Template = (args) => h(BranchOverride, { ...args });
-export const Auto = Template.bind({});
+export const Auto = (args) => h(BranchOverride, { ...args });
 Auto.args = {
     name: 'next',
     details: {
@@ -82,7 +81,7 @@ Auto.args = {
         lastModified: '1 Feb 2022 1:02:03 GMT',
     },
 };
-export const Dark = Template.bind({});
+export const Dark = (args) => h(BranchOverride, { ...args });
 Dark.args = {
     name: 'next',
     details: {
@@ -91,7 +90,7 @@ Dark.args = {
     },
     darkMode: true,
 };
-export const Error = Template.bind({});
+export const Error = (args) => h(BranchOverride, { ...args });
 Error.args = {
     name: 'testing',
     error: {
@@ -99,7 +98,7 @@ Error.args = {
         description: 'Incorrect branch name or branch no longer exists.',
     },
 };
-export const Light = Template.bind({});
+export const Light = (args) => h(BranchOverride, { ...args });
 Light.args = {
     name: 'next',
     details: {

package/dist/esm/components/Organisms/Facet/Facet.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { IconType } from '../../Atoms/Icon';
-import { ComponentProps, ValueFacet, RangeFacet, RangeBucketFacet, BaseFacet, HierarchyFacet } from '../../../types';
+import { ComponentProps } from '../../../types';
+import type { ValueFacet, RangeFacet } from '@searchspring/snap-store-mobx';
 export declare const Facet: ((properties: FacetProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetProps extends OptionalFacetProps {
-    facet: ValueFacet | RangeFacet | RangeBucketFacet | BaseFacet | HierarchyFacet;
+    facet: ValueFacet | RangeFacet;
 }
 interface OptionalFacetProps extends ComponentProps {
     disableCollapse?: boolean;
@@ -24,6 +25,7 @@ interface OptionalFacetProps extends ComponentProps {
     iconOverflowMore?: string;
     iconOverflowLess?: string;
     fields?: FieldProps;
+    searchable?: boolean;
 }
 declare type FieldProps = {
     [variable: string]: FacetProps;

package/dist/esm/components/Organisms/Facet/Facet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAgB,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAmCnI,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CA0OjE,CAAC;AAaH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,GAAG,SAAS,GAAG,cAAc,CAAC;CAC/E;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"Facet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAA4B,MAAM,gBAAgB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAoD,MAAM,+BAA+B,CAAC;AAuC9H,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CAwQjE,CAAC;AAcH,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACrD,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC;CAC/B;AAED,UAAU,kBAAmB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,UAAU,GAAG;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;CAC/B,CAAC"}