@searchspring/snap-preact-components 0.20.4 → 0.21.1

package/dist/esm/components/Molecules/Carousel/Carousel.js

@@ -2,12 +2,14 @@ import { useRef } from 'preact/hooks';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
 import SwiperCore, { Pagination, Navigation } from 'swiper/core';
 import 'swiper/swiper.min.css';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
 const CSS = {
     carousel: ({ theme, vertical }) => css({
         display: 'flex',
@@ -45,6 +47,9 @@ const CSS = {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
+            '&.ss__carousel__next-wrapper--hidden, &.ss__carousel__prev-wrapper--hidden': {
+                display: 'none',
+            },
         },
         '.ss__carousel__next, .ss__carousel__prev': {
             padding: '5px',
@@ -86,7 +91,7 @@ const CSS = {
         },
     }),
 };
-const defaultCarouselBreakpoints = {
+export const defaultCarouselBreakpoints = {
     0: {
         slidesPerView: 1,
         slidesPerGroup: 1,
@@ -113,7 +118,7 @@ const defaultCarouselBreakpoints = {
         spaceBetween: 10,
     },
 };
-const defaultVerticalCarouselBreakpoints = {
+export const defaultVerticalCarouselBreakpoints = {
     0: {
         slidesPerView: 1,
         slidesPerGroup: 1,
@@ -123,18 +128,33 @@ const defaultVerticalCarouselBreakpoints = {
 export const Carousel = observer((properties) => {
     const globalTheme = useTheme();
     const theme = { ...globalTheme, ...properties.theme };
-    const props = {
+    let props = {
         // default props
         breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints,
         pagination: false,
         loop: true,
+        autoAdjustSlides: true,
         // global theme
         ...globalTheme?.components?.carousel,
         //props
         ...properties,
         ...properties.theme?.components?.carousel,
     };
-    const { children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, vertical, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, className, ...additionalProps } = props;
+    const displaySettings = useDisplaySettings(props.breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
+        if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
+            displaySettings.slidesPerView = props.children.length;
+            displaySettings.slidesPerGroup = props.children.length;
+            displaySettings.loop = false;
+        }
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
+    const { children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, vertical, autoAdjustSlides, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, className, ...additionalProps } = props;
     const subProps = {
         icon: {
             // default props
@@ -162,8 +182,8 @@ export const Carousel = observer((properties) => {
     }
     return (children && (jsx(CacheProvider, null,
         jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) },
-            !hideButtons && (jsx("div", { className: "ss__carousel__prev-wrapper" },
-                jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)) }, prevButton || jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon })))),
+            jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
+                jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)) }, prevButton || jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon }))),
             jsx(Swiper, { centerInsufficientSlides: true, onInit: (swiper) => {
                     //@ts-ignore
                     swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
@@ -174,13 +194,13 @@ export const Carousel = observer((properties) => {
                     }
                 }, onClick: (swiper, e) => {
                     onClick && onClick(swiper, e);
-                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, breakpoints: breakpoints, pagination: pagination
+                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, pagination: pagination
                     ? {
                         clickable: true,
                     }
-                    : false, ...additionalProps }, children.map((child) => {
+                    : false, ...additionalProps, ...displaySettings }, children.map((child) => {
                 return jsx(SwiperSlide, null, child);
             })),
-            !hideButtons && (jsx("div", { className: "ss__carousel__next-wrapper" },
-                jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon }))))))));
+            jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
+                jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon })))))));
 });

package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts

@@ -160,6 +160,21 @@ declare const _default: {
                 type: string;
             };
         };
+        autoAdjustSlides: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         onNextButtonClick: {
             description: string;
             table: {

package/dist/esm/components/Molecules/Carousel/Carousel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAyIE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAqJE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}

package/dist/esm/components/Molecules/Carousel/Carousel.stories.js

@@ -95,6 +95,17 @@ export default {
             },
             control: { type: 'object' },
         },
+        autoAdjustSlides: {
+            defaultValue: true,
+            description: 'If true and children length is less than the current breakpoint slidesPerView value, slidesPerView and slidesPerGroup will be set to the children length and loop to false',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
         onNextButtonClick: {
             description: 'Carousel next button click event handler',
             table: {

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, ValueFacetValue } from '../../../types';
 export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -6,7 +7,7 @@ export interface FacetGridOptionsProps extends ComponentProps {
     values: ValueFacetValue[];
     columns?: number;
     gapSize?: string;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAiDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAoDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.js

@@ -81,7 +81,10 @@ export const FacetGridOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+                value.url?.link?.onClick(e);
+                onClick && onClick(e);
+            } },
             jsx("span", { className: classnames('ss__facet-grid-options__option__value', {
                     'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
                 }) }, value.label))))))));

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, HierarchyFacetValue } from '../../../types';
 export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -5,7 +6,7 @@ export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsP
 export interface FacetHierarchyOptionsProps extends ComponentProps {
     values: HierarchyFacetValue[];
     hideCount?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAkDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAqDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.js

@@ -61,7 +61,10 @@ export const FacetHierarchyOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), onClick: onClick, ...value.url?.link, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
+        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: value.url?.link?.href, onClick: (e) => {
+                value.url?.link?.onClick(e);
+                onClick && onClick(e);
+            }, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
             jsx("span", { className: "ss__facet-hierarchy-options__option__value" },
                 value.label,
                 !hideCount && value.count > 0 && !value.filtered && (jsx("span", { className: "ss__facet-hierarchy-options__option__value__count" },

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentProps, ValueFacetValue } from '../../../types';
 export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -6,7 +7,7 @@ export interface FacetListOptionsProps extends ComponentProps {
     values: ValueFacetValue[];
     hideCheckbox?: boolean;
     hideCount?: boolean;
-    onClick?: (e: any) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA2DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.js

@@ -63,7 +63,10 @@ export const FacetListOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+                value.url?.link?.onClick(e);
+                onClick && onClick(e);
+            } },
             !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered }),
             jsx("span", { className: "ss__facet-list-options__option__value" },
                 value.label,

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ValueFacetValue, ComponentProps } from '../../../types';
 export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
     displayName: string;
@@ -8,7 +9,7 @@ export interface FacetPaletteOptionsProps extends ComponentProps {
     columns?: number;
     gapSize?: string;
     hideIcon?: boolean;
-    onClick?: (e: Event) => void;
+    onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA0E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA6E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js

@@ -117,7 +117,10 @@ export const FacetPaletteOptions = observer((properties) => {
         styling.css = [style];
     }
     return (values?.length && (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), onClick: onClick, "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+        jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+                value.url?.link?.onClick(e);
+                onClick && onClick(e);
+            } },
             jsx("div", { className: "ss__facet-palette-options__option__wrapper" },
                 jsx("div", { className: classnames('ss__facet-palette-options__option__palette', `ss__facet-palette-options__option__palette--${filters.handleize(value.value)}`), css: { background: value.value } }, !hideIcon && value.filtered && jsx(Icon, { ...subProps.icon }))),
             !hideLabel && jsx("span", { className: "ss__facet-palette-options__option__value" }, value.label))))))));

package/dist/esm/components/Molecules/Result/Result.d.ts

@@ -18,6 +18,7 @@ export interface ResultProps extends ComponentProps {
     fallback?: string;
     layout?: LayoutType;
     truncateTitle?: TruncateTitleProps;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, Event>) => void;
     controller?: SearchController | AutocompleteController | RecommendationController;
 }
 export {};

package/dist/esm/components/Molecules/Result/Result.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAwHnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CA2HnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

package/dist/esm/components/Molecules/Result/Result.js

@@ -73,7 +73,7 @@ export const Result = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.result,
     };
-    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, style, controller } = props;
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller } = props;
     const core = result?.mappings?.core;
     const subProps = {
         price: {
@@ -131,14 +131,16 @@ export const Result = observer((properties) => {
     return (core && (jsx(CacheProvider, null,
         jsx("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, className) },
             jsx("div", { className: "ss__result__image-wrapper" },
-                jsx("a", { href: core.url, onMouseDown: (e) => {
+                jsx("a", { href: core.url, onClick: (e) => {
+                        onClick && onClick(e);
                         controller?.track?.product?.click(e, result);
                     } },
                     !hideBadge && onSale && jsx(Badge, { ...subProps.badge }),
                     !hideImage && jsx(Image, { ...subProps.image }))),
             jsx("div", { className: "ss__result__details" },
                 !hideTitle && (jsx("div", { className: "ss__result__details__title" },
-                    jsx("a", { href: core.url, onMouseDown: (e) => {
+                    jsx("a", { href: core.url, onClick: (e) => {
+                            onClick && onClick(e);
                             controller?.track?.product?.click(e, result);
                         }, dangerouslySetInnerHTML: {
                             __html: displayName,

package/dist/esm/components/Molecules/Result/Result.stories.d.ts

@@ -186,6 +186,15 @@ declare const _default: {
                 options: Layout[];
             };
         };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
         controller: {
             description: string;
             table: {

package/dist/esm/components/Molecules/Result/Result.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBA+HE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}
+{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBAwIE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}

package/dist/esm/components/Molecules/Result/Result.stories.js

@@ -116,6 +116,15 @@ export default {
                 options: [Layout.GRID, Layout.LIST],
             },
         },
+        onClick: {
+            description: 'Custom onClick event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
         controller: {
             description: 'Controller reference',
             table: {

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { AutocompleteController } from '@searchspring/snap-controller';
-import { BreakpointsProps } from '../../Organisms/Results';
-import { ComponentProps } from '../../../types';
+import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const Autocomplete: ((properties: AutocompleteProps) => JSX.Element) & {
     displayName: string;
 };
@@ -28,5 +27,7 @@ export interface AutocompleteProps extends ComponentProps {
     breakpoints?: BreakpointsProps;
     controller: AutocompleteController;
     width?: string;
+    onFacetOptionClick?: (e: any) => void;
+    onTermClick?: (e: any) => void;
 }
 //# sourceMappingURL=Autocomplete.d.ts.map

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

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

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

@@ -137,7 +137,6 @@ const CSS = {
 };
 export const Autocomplete = observer((properties) => {
     const globalTheme = useTheme();
-    const theme = { ...globalTheme, ...properties.theme };
     let props = {
         // default props
         termsTitle: '',
@@ -169,25 +168,6 @@ export const Autocomplete = observer((properties) => {
             rows: 3,
         },
     };
-    const displaySettings = useDisplaySettings(breakpoints);
-    if (displaySettings && Object.keys(displaySettings).length) {
-        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
-        props = {
-            ...props,
-            ...displaySettings,
-            theme,
-        };
-    }
-    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, disableStyles, className, width, style, controller, } = props;
-    let { input } = props;
-    let inputViewportOffsetBottom;
-    if (input) {
-        if (typeof input === 'string') {
-            input = document.querySelector(input);
-        }
-        const rect = input?.getBoundingClientRect();
-        inputViewportOffsetBottom = rect?.bottom || 0;
-    }
     let delayTimeout;
     const delayTime = 333;
     const valueProps = {
@@ -201,6 +181,55 @@ export const Autocomplete = observer((properties) => {
             clearTimeout(delayTimeout);
         },
     };
+    const themeOverride = {
+        components: {
+            facet: {
+                limit: 6,
+                disableOverflow: true,
+                disableCollapse: true,
+                previewOnFocus: true,
+                valueProps,
+            },
+            facetGridOptions: {
+                columns: 3,
+                onClick: properties.onFacetOptionClick,
+            },
+            facetHierarchyOptions: {
+                hideCount: true,
+                onClick: properties.onFacetOptionClick,
+            },
+            facetListOptions: {
+                hideCheckbox: true,
+                hideCount: true,
+                onClick: properties.onFacetOptionClick,
+            },
+            facetPaletteOptions: {
+                hideLabel: true,
+                columns: 3,
+                onClick: properties.onFacetOptionClick,
+            },
+            result: {
+                hideBadge: true,
+            },
+        },
+    };
+    const displaySettings = useDisplaySettings(breakpoints) || {};
+    const theme = deepmerge(themeOverride, deepmerge(props?.theme || {}, displaySettings?.theme || {}));
+    props = {
+        ...props,
+        ...displaySettings,
+        theme,
+    };
+    let { input } = props;
+    let inputViewportOffsetBottom;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        const rect = input?.getBoundingClientRect();
+        inputViewportOffsetBottom = rect?.bottom || 0;
+    }
+    const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onTermClick, disableStyles, className, width, style, controller, } = props;
     const subProps = {
         facets: {
             // default props
@@ -211,32 +240,7 @@ export const Autocomplete = observer((properties) => {
             ...defined({
                 disableStyles,
             }),
-            // component theme overrides
-            theme: deepmerge({
-                components: {
-                    facet: {
-                        limit: 6,
-                        disableOverflow: true,
-                        disableCollapse: true,
-                        previewOnFocus: true,
-                        valueProps,
-                    },
-                    facetGridOptions: {
-                        columns: 3,
-                    },
-                    facetHierarchyOptions: {
-                        hideCount: true,
-                    },
-                    facetListOptions: {
-                        hideCheckbox: true,
-                        hideCount: true,
-                    },
-                    facetPaletteOptions: {
-                        hideLabel: true,
-                        columns: 3,
-                    },
-                },
-            }, { ...props.theme }),
+            theme: props.theme,
         },
         banner: {
             // default props
@@ -261,13 +265,7 @@ export const Autocomplete = observer((properties) => {
                 disableStyles,
             }),
             // component theme overrides
-            theme: deepmerge({
-                components: {
-                    result: {
-                        hideBadge: true,
-                    },
-                },
-            }, { ...props.theme }),
+            theme: props.theme,
         },
         icon: {
             // default props
@@ -321,21 +319,21 @@ export const Autocomplete = observer((properties) => {
     }
     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, controller })) : (jsx(Fragment, null,
+            !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,
                 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", { 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", { 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') },

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

@@ -316,6 +316,24 @@ declare const _default: {
                 type: string;
             };
         };
+        onFacetOptionClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onTermClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
     };
 };
 export default _default;

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,wBA4OE;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKjE,wBA8PE;AAuBF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

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

@@ -224,6 +224,24 @@ export default {
                 type: 'object',
             },
         },
+        onFacetOptionClick: {
+            description: 'Custom onClick event handler for facet options.',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onFacetOptionClick',
+        },
+        onTermClick: {
+            description: 'Custom onClick event handler for Suggested & Trending Terms',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onTermClick',
+        },
         ...componentArgs,
     },
 };