@searchspring/snap-preact-components 0.27.8 → 0.30.0

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

@@ -8,6 +8,7 @@ import { FacetGridOptions } from '../../Molecules/FacetGridOptions';
 import { FacetPaletteOptions } from '../../Molecules/FacetPaletteOptions';
 import { FacetHierarchyOptions } from '../../Molecules/FacetHierarchyOptions';
 import { FacetSlider } from '../../Molecules/FacetSlider';
+import { SearchInput } from '../../Molecules/SearchInput';
 import { Icon } from '../../Atoms/Icon';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { FacetDisplay } from '../../../types';
@@ -23,7 +24,7 @@ const CSS = {
             alignItems: 'center',
             color: color,
             border: 'none',
-            borderBottom: `2px solid ${theme.colors?.primary || '#ccc'}`,
+            borderBottom: `2px solid ${theme?.colors?.primary || '#ccc'}`,
             padding: '6px 0',
         },
         '& .ss__facet__options': {
@@ -40,6 +41,9 @@ const CSS = {
                 marginRight: '8px',
             },
         },
+        '& .ss__search-input': {
+            margin: '16px 0 0 0',
+        },
     }),
 };
 export const Facet = observer((properties) => {
@@ -55,6 +59,7 @@ export const Facet = observer((properties) => {
         showLessText: 'Show Less',
         iconOverflowMore: 'plus',
         iconOverflowLess: 'minus',
+        searchable: false,
         // global theme
         ...globalTheme?.components?.facet,
         // props
@@ -68,7 +73,7 @@ export const Facet = observer((properties) => {
             ...props.fields[props.facet?.field],
         };
     }
-    const { disableCollapse, facet, iconCollapse, iconExpand, limit, disableOverflow, iconColor, color, previewOnFocus, valueProps, showMoreText, showLessText, iconOverflowMore, iconOverflowLess, overflowSlot, optionsSlot, disableStyles, className, style, } = props;
+    const { disableCollapse, facet, iconCollapse, iconExpand, limit, disableOverflow, iconColor, color, previewOnFocus, valueProps, showMoreText, showLessText, iconOverflowMore, iconOverflowLess, overflowSlot, optionsSlot, disableStyles, className, style, searchable, } = props;
     const subProps = {
         dropdown: {
             // default props
@@ -82,7 +87,7 @@ export const Facet = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         icon: {
             // default props
@@ -96,7 +101,7 @@ export const Facet = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         showMoreLessIcon: {
             // default props
@@ -110,7 +115,7 @@ export const Facet = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         facetHierarchyOptions: {
             // default props
@@ -124,7 +129,7 @@ export const Facet = observer((properties) => {
                 valueProps,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         facetListOptions: {
             // default props
@@ -138,7 +143,7 @@ export const Facet = observer((properties) => {
                 valueProps,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         facetGridOptions: {
             // default props
@@ -152,7 +157,7 @@ export const Facet = observer((properties) => {
                 valueProps,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         facetPaletteOptions: {
             // default props
@@ -166,7 +171,7 @@ export const Facet = observer((properties) => {
                 valueProps,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
         },
         facetSlider: {
             // default props
@@ -178,12 +183,24 @@ export const Facet = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: props.theme,
+            theme: props?.theme,
+        },
+        searchInput: {
+            // default props
+            className: 'ss__facet__search-input',
+            // global theme
+            ...globalTheme?.components?.searchInput,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
         },
     };
     let limitedValues;
-    if (facet?.overflow && Number.isInteger(limit) && !disableOverflow) {
-        facet.overflow.setLimit(limit);
+    if (facet?.overflow && limit && Number.isInteger(limit) && !disableOverflow) {
+        facet.overflow?.setLimit(limit);
         limitedValues = facet?.refinedValues;
     }
     else if (facet?.overflow && Number.isInteger(limit)) {
@@ -199,11 +216,21 @@ export const Facet = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
+    // Search within facet
+    const searchableFacet = {
+        allowableTypes: ['list', 'grid', 'palette'],
+        searchFilter: (e) => {
+            if (facet?.search) {
+                facet.search.input = e.target.value;
+            }
+        },
+    };
     return (facet && (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__facet', `ss__facet--${facet.display}`, `ss__facet--${facet.field}`, className) },
-            jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: (e) => !disableCollapse && facet?.toggleCollapse(), button: jsx("div", { className: "ss__facet__header" },
+            jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: (e) => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), button: jsx("div", { className: "ss__facet__header" },
                     facet?.label,
                     !disableCollapse && jsx(Icon, { ...subProps.icon, icon: facet?.collapsed ? iconExpand : iconCollapse })) },
+                searchable && searchableFacet.allowableTypes.includes(facet.display) && (jsx(SearchInput, { ...subProps.searchInput, onChange: searchableFacet.searchFilter, placeholder: `Search ${facet.label}` })),
                 jsx("div", { className: classnames('ss__facet__options', className) }, (() => {
                     //manual options component
                     if (optionsSlot) {
@@ -224,7 +251,7 @@ export const Facet = observer((properties) => {
                         }
                     }
                 })()),
-                !disableOverflow && facet?.overflow && facet.overflow.enabled && (jsx("div", { className: "ss__facet__show-more-less", onClick: () => facet.overflow.toggle() }, overflowSlot ? (cloneWithProps(overflowSlot, { facet })) : (jsx(Fragment, null,
-                    jsx(Icon, { ...subProps.showMoreLessIcon, icon: facet.overflow.remaining > 0 ? iconOverflowMore : iconOverflowLess }),
-                    jsx("span", null, facet.overflow.remaining > 0 ? showMoreText : showLessText))))))))));
+                !disableOverflow && facet?.overflow?.enabled && (jsx("div", { className: "ss__facet__show-more-less", onClick: () => facet.overflow?.toggle() }, overflowSlot ? (cloneWithProps(overflowSlot, { facet })) : (jsx(Fragment, null,
+                    jsx(Icon, { ...subProps.showMoreLessIcon, icon: (facet.overflow?.remaining || 0) > 0 ? iconOverflowMore : iconOverflowLess }),
+                    jsx("span", null, (facet?.overflow?.remaining || 0) > 0 ? showMoreText : showLessText))))))))));
 });

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { FacetProps } from './Facet';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: FacetProps) => JSX.Element) & {
@@ -108,6 +109,21 @@ declare const _default: {
                 type: string;
             };
         };
+        searchable: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         color: {
             description: string;
             table: {
@@ -272,9 +288,54 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const List: any;
-export declare const Slider: any;
-export declare const Palette: any;
-export declare const Grid: any;
-export declare const Hierarchy: any;
+export declare const List: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Slider: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Palette: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Grid: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const Hierarchy: {
+    (args: FacetProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
 //# sourceMappingURL=Facet.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Facet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO5C,wBA8LE;AAYF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,MAAM,KAA0B,CAAC;AAoB9C,eAAO,MAAM,OAAO,KAA2B,CAAC;AAiBhD,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,SAAS,KAA6B,CAAC"}
+{"version":3,"file":"Facet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAM5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAyME;AAUF,eAAO,MAAM,IAAI;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE1G,CAAC;AAiBF,eAAO,MAAM,MAAM;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE5G,CAAC;AAiBF,eAAO,MAAM,OAAO;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE7G,CAAC;AAiBF,eAAO,MAAM,IAAI;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE1G,CAAC;AAiBF,eAAO,MAAM,SAAS;WAAU,UAAU;;wBAAsD,gBAAgB;;;;;;CAE/G,CAAC"}

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

@@ -54,6 +54,17 @@ export default {
             },
             control: { type: 'boolean' },
         },
+        searchable: {
+            defaultValue: false,
+            description: 'Enables facet search within functionality',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
         color: {
             description: 'Select color',
             table: {
@@ -197,8 +208,7 @@ const snapInstance = Snapify.search({ id: 'Facet', globals: { siteId: '8uyt2m' }
 const ObservableListFacet = observer(({ args, controller }) => {
     return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.LIST).shift() });
 });
-const ListTemplate = (args, { loaded: { controller } }) => h(ObservableListFacet, { args: args, controller: controller });
-export const List = ListTemplate.bind({});
+export const List = (args, { loaded: { controller } }) => (h(ObservableListFacet, { args: args, controller: controller }));
 List.loaders = [
     async () => {
         await snapInstance.search();
@@ -211,8 +221,7 @@ List.loaders = [
 const ObservableSliderFacet = observer(({ args, controller }) => {
     return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.SLIDER).shift() });
 });
-const SliderTemplate = (args, { loaded: { controller } }) => h(ObservableSliderFacet, { args: args, controller: controller });
-export const Slider = SliderTemplate.bind({});
+export const Slider = (args, { loaded: { controller } }) => (h(ObservableSliderFacet, { args: args, controller: controller }));
 Slider.loaders = [
     async () => {
         await snapInstance.search();
@@ -222,14 +231,10 @@ Slider.loaders = [
     },
 ];
 // Palette Facet
-const ObservablePaletteFacet = observer(({ args, facet }) => {
-    return h(Facet, { ...args, facet: facet });
+const ObservablePaletteFacet = observer(({ args, controller }) => {
+    return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.PALETTE).shift() });
 });
-const PaletteTemplate = (args, { loaded: { controller } }) => {
-    const facet = controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.PALETTE).shift();
-    return h(ObservablePaletteFacet, { args: args, facet: facet });
-};
-export const Palette = PaletteTemplate.bind({});
+export const Palette = (args, { loaded: { controller } }) => (h(ObservablePaletteFacet, { args: args, controller: controller }));
 Palette.loaders = [
     async () => {
         await snapInstance.search();
@@ -242,8 +247,7 @@ Palette.loaders = [
 const ObservableGridFacet = observer(({ args, controller }) => {
     return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.field === 'size_dress').pop() });
 });
-const GridTemplate = (args, { loaded: { controller } }) => h(ObservableGridFacet, { args: args, controller: controller });
-export const Grid = GridTemplate.bind({});
+export const Grid = (args, { loaded: { controller } }) => (h(ObservableGridFacet, { args: args, controller: controller }));
 Grid.loaders = [
     async () => {
         await snapInstance.search();
@@ -257,8 +261,7 @@ const ObservableHierarchyFacet = observer(({ args, controller }) => {
     const facet = controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.HIERARCHY).shift();
     return h(Facet, { ...args, facet: facet });
 });
-const HierarchyTemplate = (args, { loaded: { controller } }) => h(ObservableHierarchyFacet, { args: args, controller: controller });
-export const Hierarchy = HierarchyTemplate.bind({});
+export const Hierarchy = (args, { loaded: { controller } }) => (h(ObservableHierarchyFacet, { args: args, controller: controller }));
 Hierarchy.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,10 +1,12 @@
 import { ComponentProps } from '../../../types';
 import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+import type { ValueFacet, RangeFacet } from '@searchspring/snap-store-mobx';
 export declare const Facets: ((properties: FacetsProps) => JSX.Element) & {
     displayName: string;
 };
+export declare type IndividualFacetType = ValueFacet | RangeFacet;
 export interface FacetsProps extends ComponentProps {
-    facets?: any;
+    facets?: IndividualFacetType[];
     limit?: number;
     controller?: SearchController | AutocompleteController;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAM9F,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAMH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}
+{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE9F,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAM5E,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAMH,oBAAY,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -20,7 +22,7 @@ export const Facets = observer((properties) => {
     };
     const { limit, disableStyles, className, style } = props;
     let { facets } = props;
-    if (limit > 0) {
+    if (limit && facets && limit > 0) {
         facets = facets.slice(0, +limit);
     }
     const subProps = {
@@ -44,6 +46,6 @@ export const Facets = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (facets?.length > 0 && (jsx(CacheProvider, null,
-        jsx("div", { className: classnames('ss__facets', className), ...styling }, facets.map((facet) => (jsx(Facet, { ...subProps.facet, facet: facet })))))));
+    return facets && facets?.length > 0 ? (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__facets', className), ...styling }, facets.map((facet) => (jsx(Facet, { ...subProps.facet, facet: facet })))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Organisms/Facets/Facets.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { FacetsProps } from './Facets';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: FacetsProps) => JSX.Element) & {
@@ -95,5 +96,14 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    (args: FacetsProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
 //# sourceMappingURL=Facets.stories.d.ts.map

package/dist/esm/components/Organisms/Facets/Facets.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Facets.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA2CE;AAQF,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Facets.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2CE;AAIF,eAAO,MAAM,OAAO;WAAU,WAAW;;wBAAsD,gBAAgB;;;;;;CAE9G,CAAC"}

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

@@ -43,10 +43,9 @@ export default {
     },
 };
 const snapInstance = Snapify.search({ id: 'Facets', globals: { siteId: '8uyt2m' } });
-const Template = (args, { loaded: { controller } }) => {
+export const Default = (args, { loaded: { controller } }) => {
     return h(Facets, { ...args, controller: controller });
 };
-export const Default = Template.bind({});
 Default.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,5 +1,7 @@
-import { ComponentProps, Filter as FilterType } from '../../../types';
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
 import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+import type { Filter as FilterType } from '@searchspring/snap-store-mobx';
 export declare const FilterSummary: ((properties: FilterSummaryProps) => JSX.Element) & {
     displayName: string;
 };
@@ -12,8 +14,8 @@ export interface FilterSummaryProps extends ComponentProps {
     hideFacetLabel?: boolean;
     clearAllLabel?: string;
     hideClearAll?: boolean;
-    onClick?: (e: Event, filterFilter: any) => void;
-    onClearAllClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, filterFilter: FilterType) => void;
+    onClearAllClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     controller?: SearchController | AutocompleteController;
 }
 //# sourceMappingURL=FilterSummary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAc9F,eAAO,MAAM,aAAa,gBAAyB,kBAAkB,KAAG,WAAW;;CAwFjF,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,KAAA,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}
+{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAc1E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB,KAAG,WAAW;;CAqFjF,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,UAAU,KAAK,IAAI,CAAC;IACjG,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC/E,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -35,6 +37,7 @@ export const FilterSummary = observer((properties) => {
     const subProps = {
         filter: {
             // default props
+            clearAllLabel: '',
             className: 'ss__filter-summary__filter',
             // global theme
             ...globalTheme?.components?.filter,
@@ -59,6 +62,6 @@ export const FilterSummary = observer((properties) => {
     return filters?.length ? (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__filter-summary', className) },
             jsx("div", { className: "ss__filter-summary__title" }, title),
-            filters.map((filter) => (jsx(Filter, { ...subProps.filter, url: filter?.url, facetLabel: filter?.facet?.label, valueLabel: filter?.value?.label, onClick: (e) => onClick && onClick(e, filter) }))),
-            !hideClearAll && (jsx(Filter, { ...subProps.filter, icon: clearAllIcon, className: `${subProps?.filter?.className} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => onClearAllClick && onClearAllClick(e) }))))) : null;
+            filters.map((filter) => (jsx(Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))),
+            !hideClearAll && (jsx(Filter, { ...subProps.filter, icon: clearAllIcon, className: `${subProps?.filter?.className} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => onClearAllClick && onClearAllClick(e) }))))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Organisms/FilterSummary/FilterSummary.stories.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { h } from 'preact';
 import { FilterSummaryProps } from './FilterSummary';
+import type { SearchController } from '@searchspring/snap-controller';
 declare const _default: {
     title: string;
     component: ((properties: FilterSummaryProps) => JSX.Element) & {
@@ -194,7 +195,40 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Regular: any;
-export declare const noFacetLabel: any;
-export declare const customTitle: any;
+export declare const Regular: {
+    (args: FilterSummaryProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+};
+export declare const noFacetLabel: {
+    (args: FilterSummaryProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        hideFacetLabel: boolean;
+    };
+};
+export declare const customTitle: {
+    (args: FilterSummaryProps, { loaded: { controller } }: {
+        loaded: {
+            controller: SearchController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: SearchController;
+    }>)[];
+    args: {
+        title: string;
+    };
+};
 //# sourceMappingURL=FilterSummary.stories.d.ts.map

package/dist/esm/components/Organisms/FilterSummary/FilterSummary.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSummary.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOpE,wBA4HE;AAsBF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAa9C,eAAO,MAAM,WAAW,KAAoB,CAAC"}
+{"version":3,"file":"FilterSummary.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGtE,wBA4HE;AAqBF,eAAO,MAAM,OAAO;WAAU,kBAAkB;;wBAAsD,gBAAgB;;;;;;CAErH,CAAC;AAWF,eAAO,MAAM,YAAY;WAAU,kBAAkB;;wBAAsD,gBAAgB;;;;;;;;;CAE1H,CAAC;AAcF,eAAO,MAAM,WAAW;WAAU,kBAAkB;;wBAAsD,gBAAgB;;;;;;;;;CAEzH,CAAC"}

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

@@ -145,8 +145,7 @@ const snapInstance = Snapify.search({
         ],
     },
 });
-const Template = (args, { loaded: { controller } }) => h(FilterSummary, { ...args, controller: controller });
-export const Regular = Template.bind({});
+export const Regular = (args, { loaded: { controller } }) => (h(FilterSummary, { ...args, controller: controller }));
 Regular.loaders = [
     async () => {
         await snapInstance.search();
@@ -155,7 +154,7 @@ Regular.loaders = [
         };
     },
 ];
-export const noFacetLabel = Template.bind({});
+export const noFacetLabel = (args, { loaded: { controller } }) => (h(FilterSummary, { ...args, controller: controller }));
 noFacetLabel.loaders = [
     async () => {
         await snapInstance.search();
@@ -167,7 +166,7 @@ noFacetLabel.loaders = [
 noFacetLabel.args = {
     hideFacetLabel: true,
 };
-export const customTitle = Template.bind({});
+export const customTitle = (args, { loaded: { controller } }) => (h(FilterSummary, { ...args, controller: controller }));
 customTitle.loaders = [
     async () => {
         await snapInstance.search();

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
 import type { RecommendationController } from '@searchspring/snap-controller';
-import type { ResultStore } from '@searchspring/snap-store-mobx';
+import type { SearchResultStore } from '@searchspring/snap-store-mobx';
 import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
     displayName: string;
@@ -12,10 +14,10 @@ export interface RecommendationProps extends ComponentProps {
     nextButton?: JSX.Element | string;
     hideButtons?: boolean;
     loop?: boolean;
-    results?: ResultStore;
+    results?: SearchResultStore;
     pagination?: boolean;
     controller: RecommendationController;
-    children?: JSX.Element[];
+    children?: ComponentChildren;
     vertical?: boolean;
 }
 //# sourceMappingURL=Recommendation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAuKnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAc9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAyKnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}