@athoscommerce/snap-preact 1.13.3-beta.187 → 1.14.0

package/dist/esm/components/src/components/Molecules/Slideout/Slideout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, useEffect, useRef, useLayoutEffect } from 'preact/hooks';
+import { useState, useEffect, useLayoutEffect } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
@@ -69,21 +69,22 @@ export const Slideout = observer((properties) => {
     // state
     const [isActive, setActive] = useState(Boolean(active));
     const [renderContent, setRenderContent] = useState(Boolean(active));
-    const isActiveRef = useRef(isActive);
-    isActiveRef.current = isActive;
-    const toggleActive = (force) => {
-        const next = typeof force === 'boolean' ? force : !isActiveRef.current;
-        setActive(next);
-        if (next) {
-            setRenderContent(true);
+    const toggleActive = () => {
+        const newActive = !isActive;
+        if (isActive) {
+            setActive(false);
+            if (rerender) {
+                setTimeout(() => {
+                    setRenderContent(false);
+                }, 250);
+            }
         }
-        else if (rerender) {
-            setTimeout(() => {
-                setRenderContent(false);
-            }, 250);
+        else {
+            setActive(true);
+            setRenderContent(true);
         }
-        document.body.style.overflow = next ? 'hidden' : '';
-        onChange && onChange(next);
+        document.body.style.overflow = newActive ? 'hidden' : '';
+        onChange && onChange(newActive);
     };
     // Sync internal state when the active prop changes from the parent component. This is a
     // layout effect so the content commit is scheduled before consumers' passive effects run —
@@ -99,16 +100,19 @@ export const Slideout = observer((properties) => {
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
     const styling = mergeStyles(props, defaultStyles);
     useEffect(() => {
-        if (!buttonSelector)
-            return;
-        // string selectors bind to every matching element
-        const targets = typeof buttonSelector == 'string' ? Array.from(document.querySelectorAll(buttonSelector)) : [buttonSelector];
-        const handler = () => toggleActive();
-        targets.forEach((target) => target.addEventListener('click', handler));
-        return () => {
-            targets.forEach((target) => target.removeEventListener('click', handler));
-        };
-    }, [buttonSelector]);
+        if (buttonSelector) {
+            let button;
+            if (typeof buttonSelector == 'string') {
+                button = document.querySelector(buttonSelector);
+            }
+            else {
+                button = buttonSelector;
+            }
+            if (button) {
+                button.addEventListener('click', () => toggleActive());
+            }
+        }
+    }, []);
     return isVisible || !rerender ? (_jsxs(CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: () => toggleActive(false) })] })) : null;
+                (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive, treePath })) : (_jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: cloneWithProps(buttonContent, { active: isActive, treePath }) }))), _jsx("div", { className: classnames('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && cloneWithProps(children, { toggleActive, active: isActive, treePath }) }), _jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
 });

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA6JxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CA2wB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAyJxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CA8uB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -24,10 +24,6 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
             display: 'flex',
             width: `100%`,
             transition: 'transform 0.3s ease-in-out',
-            // keep the track on its own compositor layer at all times; otherwise Chrome promotes it
-            // when a transform transition starts and demotes it when it ends, re-rasterizing the
-            // (scaled) slide content each time, which reads as every image flickering
-            willChange: 'transform',
             // Disable transition during dragging
             '&.ss__slideshow__track--dragging': {
                 transition: 'none',
@@ -269,8 +265,6 @@ export const Slideshow = observer((properties) => {
         return () => observer.disconnect();
     }, []);
     // Touch/Drag state
-    // drag positions live in refs so the document-level mousemove/mouseup listeners
-    // (registered once per drag) always read current values instead of stale state
     const [isDragging, setIsDragging] = useState(false);
     // mirrors `isDragging` state - the state drives renders (the dragging class, the transform,
     // the autoplay effect), but the drag handlers below run through refs and can fire before
@@ -430,17 +424,8 @@ export const Slideshow = observer((properties) => {
             return;
         const diff = currentXRef.current - startXRef.current;
         const threshold = getNavigationThreshold();
-        const slideWidthPx = (trackRef.current?.parentElement?.offsetWidth || 0) / visibleSlides;
         if (Math.abs(diff) > threshold) {
-            const slidesDragged = slideWidthPx > 0 ? Math.round(Math.abs(diff) / slideWidthPx) : 0;
-            if (slidesDragged > slidesToMove) {
-                // long drags land on the slide group they were dragged to instead of snapping back
-                setCurrentIndex((prevIndex) => {
-                    const newIndex = diff > 0 ? prevIndex - slidesDragged : prevIndex + slidesDragged;
-                    return Math.max(0, Math.min(maxIndex, newIndex));
-                });
-            }
-            else if (diff > 0 && (loop || currentIndex > 0)) {
+            if (diff > 0 && (loop || currentIndex > 0)) {
                 // Dragged right - go to previous
                 goToPrevious();
             }
@@ -478,9 +463,6 @@ export const Slideshow = observer((properties) => {
     dragEndRef.current = handleDragEnd;
     const removeMouseListenersRef = useRef(null);
     const handleMouseDown = (event) => {
-        // only the primary (left) button starts a drag; right/middle clicks keep their default behaviour
-        if (event.button !== 0)
-            return;
         event.preventDefault();
         handleDragStart(event.clientX);
         // bound here rather than in an effect - a tap's synthetic mouseup fires before effects run
@@ -525,16 +507,6 @@ export const Slideshow = observer((properties) => {
             }, autoPlayInterval);
         }
     };
-    // The browser fires a click after a drag's mouseup/touchend. Catch it in the capture phase on
-    // the container so it never reaches slide content that carries its own onClick (e.g. product
-    // cards that open a quickview) — those handlers can't know a drag just happened.
-    const handleContainerClickCapture = (event) => {
-        if (!hasDraggedRef.current)
-            return;
-        hasDraggedRef.current = false;
-        event.stopPropagation();
-        event.preventDefault();
-    };
     // Handle image click
     const handleSlideClick = (slide, index) => {
         if (slide.onClick && !isDragging && !hasDraggedRef.current) {
@@ -681,29 +653,27 @@ export const Slideshow = observer((properties) => {
     }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__slideshow', className), ref: slideshowRef, role: "region", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-roledescription": "slideshow", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 
             // @ts-ignore - ignore
-            onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsx("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), _jsx("div", { className: "ss__slideshow__container", 
-                    // @ts-ignore - capture-phase click
-                    onClickCapture: touchDragging ? handleContainerClickCapture : undefined, 
-                    // Touch events
-                    // @ts-ignore - touch events
-                    onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
-                    // @ts-ignore - touch events
-                    onTouchMove: touchDragging
-                        ? (event) => {
-                            if (isDraggingRef.current) {
-                                event.preventDefault(); // Prevent scrolling while dragging
-                            }
-                            const touch = event.touches[0];
-                            handleDragMove(touch.clientX);
-                        }
-                        : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
-                    // mouse events for desktop dragging
-                    // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the container
-                    // @ts-ignore - mouse events
-                    onMouseDown: touchDragging ? handleMouseDown : undefined, children: _jsx("div", { ref: trackRef, className: classnames('ss__slideshow__track', {
+            onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsx("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), _jsx("div", { className: "ss__slideshow__container", children: _jsx("div", { ref: trackRef, className: classnames('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
                             'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
-                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, children: normalizedSlides.map((slide, index) => {
+                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
+                        // Touch events
+                        // @ts-ignore - touch events
+                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
+                        // @ts-ignore - touch events
+                        onTouchMove: touchDragging
+                            ? (event) => {
+                                if (isDraggingRef.current) {
+                                    event.preventDefault(); // Prevent scrolling while dragging
+                                }
+                                const touch = event.touches[0];
+                                handleDragMove(touch.clientX);
+                            }
+                            : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
+                        // mouse events for desktop dragging
+                        // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the track
+                        // @ts-ignore - mouse events
+                        onMouseDown: touchDragging ? handleMouseDown : undefined, children: normalizedSlides.map((slide, index) => {
                             const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts

@@ -5,7 +5,7 @@ import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabMan
 export declare const AutocompleteLayout: ((properties: AutocompleteLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
-export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | 'tabSelection' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
+export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | 'tabSelection' | 'searchInput' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
 type ColumnsNames = 'c1' | 'c2' | 'c3' | 'c4';
 type PrebuiltLayouts = 'terms' | 'mobile' | 'desktop' | 'tablet';
 type ModuleNamesWithColumns = ModuleNames | ColumnsNames | ModuleNames[] | ColumnsNames[];
@@ -14,12 +14,14 @@ type Column = {
     width: string | 'auto';
     alignContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between';
 };
+export declare function layoutHasModule({ layout, column1, column2, column3, column4, }: Pick<AutocompleteLayoutTemplatesLegalProps, 'layout' | 'column1' | 'column2' | 'column3' | 'column4'>, moduleToFind: ModuleNames): boolean;
 export type AutocompleteLayoutProps = {
     input: Element | string;
     resultComponent?: JSXComponent | JSX.Element;
     controller: AutocompleteController;
     lang?: Partial<AutocompleteLayoutLang>;
     tabManager?: TabManagerStore;
+    searchInputSlot?: JSX.Element;
 } & Omit<AutocompleteLayoutTemplatesLegalProps, 'resultComponent'> & ComponentProps<AutocompleteLayoutProps>;
 export type AutocompleteLayoutTemplatesLegalProps = {
     resultComponent?: string;

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAA4B,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AASvI,OAAO,EAAE,cAAc,EAAgB,4BAA4B,EAA6C,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrJ,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAOxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAgL3F,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAgnB7E,CAAC;AAeH,MAAM,MAAM,WAAW,GACpB,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,QAAQ,GACR,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,cAAc,GACd,aAAa,GACb,GAAG,GACH,aAAa,GACb,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AACnB,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjE,KAAK,sBAAsB,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;AAE1F,KAAK,MAAM,GAAG;IACb,MAAM,EAAE,WAAW,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;CACtE,CAAC;AAUF,wBAAgB,eAAe,CAC9B,EACC,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,GACP,EAAE,IAAI,CAAC,qCAAqC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC,EACxG,YAAY,EAAE,WAAW,GACvB,OAAO,CAaT;AAED,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC9B,GAAG,IAAI,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,GACjE,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,sBAAsB,EAAE,GAAG,eAAe,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE;QACX,cAAc,CAAC,EAAE;YAChB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;YACzC,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;SACjD,CAAC;KACF,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACtC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.js

@@ -126,6 +126,9 @@ const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, col
         '.ss__autocomplete__facets-wrapper': {
             width: '100%',
         },
+        '.ss__autocomplete__search-input-wrapper': {
+            width: '100%',
+        },
         '.ss__autocomplete__content': {
             display: 'flex',
             flex: `1 1 0%`,
@@ -275,7 +278,7 @@ export const AutocompleteLayout = observer((properties) => {
             input = document.querySelector(input);
         }
     }
-    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, } = props;
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, searchInputSlot, } = props;
     let layout = props.layout;
     const subProps = {
         button: {
@@ -331,6 +334,7 @@ export const AutocompleteLayout = observer((properties) => {
         facetsHorizontal: {
             name: 'autocomplete',
             // default props
+            controller,
             // inherited props
             ...defined({
                 disableStyles,
@@ -400,8 +404,10 @@ export const AutocompleteLayout = observer((properties) => {
             controller.bind();
         }, []);
     }
-    const visible = Boolean(input === state.focusedInput) &&
-        (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    // content modules require a focused input and something to show (terms, or a loaded query)
+    const contentVisible = Boolean(input === state.focusedInput) &&
+        Boolean(terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    const visible = contentVisible || Boolean(searchInputSlot);
     const showResultsBool = () => Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string || loading);
     const [showResults, setShowResults] = useState(showResultsBool());
     const checkAndSetShowResults = () => {
@@ -458,6 +464,8 @@ export const AutocompleteLayout = observer((properties) => {
         RecommendationTemplateResultComponent = recs.RecommendationTemplateResultComponent;
         recsController = recs.recsController;
     }
+    // the slot element can only be rendered once - the first 'searchInput' module claims it
+    let searchInputRendered = false;
     const findModule = (module, rowCounter) => {
         //new row
         if (typeof module !== 'string') {
@@ -499,6 +507,15 @@ export const AutocompleteLayout = observer((properties) => {
                 return null;
             return _jsx("div", { className: "ss__autocomplete__column ss__autocomplete__column--c4", children: children });
         }
+        if (module == 'searchInput') {
+            if (!searchInputSlot || searchInputRendered)
+                return null;
+            searchInputRendered = true;
+            return _jsx("div", { className: "ss__autocomplete__search-input-wrapper", children: searchInputSlot });
+        }
+        // separators render whenever the layout does; every other module needs a focused input with content
+        if (module !== '_' && !contentVisible)
+            return null;
         if (module == 'termsList') {
             if (!terms?.length && !history?.length && !trending?.length)
                 return null;
@@ -552,23 +569,11 @@ export const AutocompleteLayout = observer((properties) => {
         if (module == 'button.see-more' && showResults && search?.query?.string && results.length > 0) {
             return (_jsxs(Button, { ...subProps.button, ...mergedLang.seeMoreButton.attributes, children: [_jsx("span", { ...mergedLang.seeMoreButton.value }), _jsx(Icon, { ...subProps.icon })] }));
         }
+        return null;
     };
-    if (typeof props.layout === 'string') {
-        if (props.layout === 'terms') {
-            layout = [['termsList'], ['no-results'], ['_', 'button.see-more']];
-        }
-        if (props.layout === 'mobile') {
-            layout = [['termsList'], ['content'], ['_', 'button.see-more']];
-        }
-        if (props.layout === 'tablet') {
-            layout = [['c1', 'c3']];
-        }
-        if (props.layout === 'desktop') {
-            layout = [['c1', 'c2', 'c3']];
-        }
-    }
+    layout = typeof props.layout === 'string' ? PREBUILT_LAYOUTS[props.layout] : props.layout;
     //fallback for unsupported layout values
-    if (typeof layout === 'string') {
+    if (typeof props.layout === 'string' && !layout) {
         controller.log.warn(`unsupported layout found. ${props.layout}`);
         layout = [];
     }
@@ -580,7 +585,24 @@ export const AutocompleteLayout = observer((properties) => {
                     role: 'tabpanel',
                     'aria-labelledby': `ss__tab--${tabControllerId}`,
                 }
-                : {}), children: [_jsx("span", { role: 'link', ref: (e) => useA11y(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout?.map((module) => {
-                    return findModule(module, topRowCounter);
-                })] }) })) : null;
+                : {}), children: [_jsx("span", { role: 'link', ref: (e) => useA11y(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout.map((module) => findModule(module, topRowCounter))] }) })) : null;
 });
+const PREBUILT_LAYOUTS = {
+    terms: [['termsList'], ['no-results'], ['_', 'button.see-more']],
+    mobile: [['termsList'], ['content'], ['_', 'button.see-more']],
+    tablet: [['c1', 'c3']],
+    desktop: [['c1', 'c2', 'c3']],
+};
+// checks a layout (and the column layouts it references) for a module
+export function layoutHasModule({ layout, column1, column2, column3, column4, }, moduleToFind) {
+    //recast names back to c1 style
+    const columns = {
+        c1: column1,
+        c2: column2,
+        c3: column3,
+        c4: column4,
+    };
+    const modulesList = (typeof layout === 'string' ? PREBUILT_LAYOUTS[layout] : layout)?.flat() || [];
+    // a module is either listed directly or inside a referenced column's layout
+    return modulesList.some((entry) => entry === moduleToFind || Boolean(columns[entry]?.layout.flat().includes(moduleToFind)));
+}

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.d.ts

@@ -21,6 +21,7 @@ export type FacetsHorizontalTemplatesLegalProps = {
     limit?: number;
     alwaysShowToggleSidebarButton?: boolean;
     hideToggleSidebarButton?: boolean;
+    openFacetsInSidebar?: boolean;
     iconCollapse?: IconType | Partial<IconProps>;
     iconExpand?: IconType | Partial<IconProps>;
     toggleSidebarButtonText?: string;

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetsHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAE5F,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiF7D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA2TzE,CAAC;AAYH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAE7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,mBAAmB,CAAC;QACnC,KAAK,EAAE,mBAAmB,CAAC;KAC3B,CAAC,CAAC;IACH,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7F"}
+{"version":3,"file":"FacetsHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE/F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAwD,MAAM,gBAAgB,CAAC;AAE5F,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAkF7D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAwYzE,CAAC;AAYH,MAAM,MAAM,qBAAqB,GAAG;IACnC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAE7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,mBAAmB,CAAC;QACnC,KAAK,EAAE,mBAAmB,CAAC;KAC3B,CAAC,CAAC;IACH,uBAAuB,CAAC,EAAE,IAAI,CAAC;QAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC;QAAC,gBAAgB,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7F"}

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -13,6 +13,7 @@ import { Icon } from '../../Atoms/Icon';
 import { Button } from '../../Atoms/Button';
 import { Slideout } from '../../Molecules/Slideout';
 import { Sidebar } from '../Sidebar';
+import { useA11y } from '../../../hooks/useA11y';
 const defaultStyles = ({ theme }) => {
     return css({
         margin: '10px 0px',
@@ -95,6 +96,8 @@ export const FacetsHorizontal = observer((properties) => {
     };
     let props = mergeProps('facetsHorizontal', globalTheme, defaultProps, properties);
     const { facets, limit, alwaysShowToggleSidebarButton, hideToggleSidebarButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, toggleSidebarButtonText, disableStyles, className, internalClassName, controller, treePath, } = props;
+    //we just dont allow this prop to be used outside of the search controller.
+    const openFacetsInSidebar = controller?.type !== 'search' ? false : props.openFacetsInSidebar;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('facetsHorizontal', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -136,6 +139,7 @@ export const FacetsHorizontal = observer((properties) => {
         }
     }
     const [sidebarOpenState, setSidebarOpenState] = useState(false);
+    const renderToggleSidebarButton = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
     const subProps = {
         dropdown: {
             // default props
@@ -176,7 +180,7 @@ export const FacetsHorizontal = observer((properties) => {
             internalClassName: `ss__facets-horizontal__content__facet`,
             justContent: true,
             // this should be turned on if there is ever a filters button rendering.
-            statefulOverflow: !hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton) ? true : undefined,
+            statefulOverflow: renderToggleSidebarButton ? true : undefined,
             // inherited props
             ...defined({
                 disableStyles,
@@ -200,6 +204,7 @@ export const FacetsHorizontal = observer((properties) => {
         sidebar: {
             // default props
             internalClassName: 'ss__facets-horizontal__sidebar',
+            onToggleSidebar: () => setSidebarOpenState(false),
             // inherited props
             ...defined({
                 disableStyles,
@@ -223,6 +228,54 @@ export const FacetsHorizontal = observer((properties) => {
     const innerRef = useClickOutside(() => {
         selectedFacet && setSelectedFacet(undefined);
     });
+    // facet field to scroll into view once the slideout renders
+    const [sidebarFacetField, setSidebarFacetField] = useState(undefined);
+    // facet expanded by a header click; collapsed again when the sidebar closes
+    const autoOpenedFacet = useRef(undefined);
+    // field of the header that opened the sidebar; focus returns to it when the sidebar closes
+    const openerField = useRef(undefined);
+    const openFacetsInSidebarFunc = (facet) => {
+        // expand the facet so it renders open in the sidebar
+        if (facet.collapsed) {
+            facet.toggleCollapse();
+            autoOpenedFacet.current = facet;
+        }
+        openerField.current = facet.field;
+        setSidebarFacetField(facet.field);
+        setSidebarOpenState(true);
+    };
+    useEffect(() => {
+        if (!sidebarFacetField || !sidebarOpenState)
+            return;
+        // slideout content is already mounted; match by class so field names need no CSS escaping
+        const slideoutElem = innerRef.current?.querySelector('.ss__facets-horizontal__slideout');
+        const facetElem = Array.from(slideoutElem?.querySelectorAll('.ss__facet') || []).find((elem) => elem.classList.contains(`ss__facet--${sidebarFacetField}`));
+        if (facetElem) {
+            if (typeof facetElem.scrollIntoView == 'function') {
+                facetElem.scrollIntoView({ block: 'start' });
+            }
+            // move focus into the sidebar so keyboard navigation continues from the opened facet
+            facetElem.querySelector('.ss__facet__header')?.focus({ preventScroll: true });
+        }
+        setSidebarFacetField(undefined);
+    }, [sidebarFacetField, sidebarOpenState]);
+    useEffect(() => {
+        if (sidebarOpenState)
+            return;
+        // re-collapse the auto-opened facet (slideout content is already unmounted, so nothing flickers)
+        const facet = autoOpenedFacet.current;
+        autoOpenedFacet.current = undefined;
+        if (facet && !facet.collapsed && typeof facet.toggleCollapse == 'function') {
+            facet.toggleCollapse();
+        }
+        // return focus to the header that opened the sidebar
+        const field = openerField.current;
+        openerField.current = undefined;
+        if (field) {
+            const headerDropdown = Array.from(innerRef.current?.querySelectorAll('.ss__facets-horizontal__header__dropdown') || []).find((elem) => elem.classList.contains(`ss__facets-horizontal__header__dropdown--${field}`));
+            headerDropdown?.querySelector('.ss__dropdown__button')?.focus();
+        }
+    }, [sidebarOpenState]);
     //initialize lang
     const defaultLang = {
         toggleSidebarButtonText: {
@@ -235,7 +288,8 @@ export const FacetsHorizontal = observer((properties) => {
     const ToggleSidebarButton = ({ sidebarOpenState, setSidebarOpenState, subProps }) => {
         return (_jsx(Button, { ...subProps.toggleSidebarButton, internalClassName: "ss__facets-horizontal__header__toggle-sidebar", onClick: () => setSidebarOpenState(!sidebarOpenState), children: _jsx("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
     };
-    const renderSidebar = Boolean(!hideToggleSidebarButton && (isOverflowing || alwaysShowToggleSidebarButton));
+    // the slideout is also needed when facet headers open the sidebar
+    const renderSlideout = renderToggleSidebarButton || Boolean(openFacetsInSidebar);
     //todo investigate keyboard navigation here when overlay prop is true/false
     return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: [_jsxs("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
                             const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
@@ -258,8 +312,12 @@ export const FacetsHorizontal = observer((properties) => {
                                 selectedFacet,
                                 facet,
                             }, { activeBreakpoint: globalTheme?.activeBreakpoint });
-                            return (_jsx(Dropdown, { ...subProps.dropdown, internalClassName: classnames(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
-                                    // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
+                            return (_jsx(Dropdown, { ...subProps.dropdown, internalClassName: classnames(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: openFacetsInSidebar ? false : selectedFacet?.field === facet.field, onClick: (e) => {
+                                    if (openFacetsInSidebar) {
+                                        openFacetsInSidebarFunc(facet);
+                                        return;
+                                    }
+                                    // @ts-ignore - escape key closes the dropdown
                                     if (selectedFacet !== facet && e.code !== 'Escape') {
                                         setSelectedFacet(facet);
                                     }
@@ -271,6 +329,6 @@ export const FacetsHorizontal = observer((properties) => {
                                                         facet?.clear.url.link.onClick();
                                                     }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
                                                 ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
-                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
-                        }), renderSidebar && _jsx(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps })] }), renderSidebar && (_jsx(Slideout, { ...subProps.slideout, active: sidebarOpenState, children: _jsx(Sidebar, { ...subProps.sidebar, controller: controller }) }))] }) })) : null;
+                                                : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: !openFacetsInSidebar && _jsx(Facet, { ...subProps.facet, facet: facet }) }));
+                        }), renderToggleSidebarButton && (_jsx(ToggleSidebarButton, { sidebarOpenState: sidebarOpenState, setSidebarOpenState: setSidebarOpenState, subProps: subProps }))] }), renderSlideout && (_jsx(Slideout, { ...subProps.slideout, active: sidebarOpenState, children: _jsx("div", { className: 'ss__facets-horizontal__slideout__sidebar-wrapper', ref: (e) => useA11y(e, 0, true, () => setSidebarOpenState((prev) => !prev)), children: _jsx(Sidebar, { ...subProps.sidebar, controller: controller }) }) }))] }) })) : null;
 });

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

@@ -22,6 +22,8 @@ export type FilterSummaryTemplatesLegalProps = {
     hideFacetLabel?: boolean;
     clearAllLabel?: string;
     hideClearAll?: boolean;
+    noFiltersText?: string;
+    hideNoFiltersText?: boolean;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, filterFilter: FilterType) => void;
     onClearAllClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 };
@@ -33,5 +35,8 @@ export interface FilterSummaryLang {
         label?: string;
         value?: string;
     }>;
+    noFiltersText: Lang<{
+        controller?: SearchController | AutocompleteController;
+    }>;
 }
 //# sourceMappingURL=FilterSummary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AA0D3E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CA0HnE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAChC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAClC,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IACnD,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IACrD,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;CAC/E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;KACtB,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACH"}
+{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AA6D3E,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CAsInE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAChC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAClC,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IACnD,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,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;CAC/E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;KACtB,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;KACvD,CAAC,CAAC;CACH"}

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

@@ -20,6 +20,9 @@ const defaultStyles = (props) => {
             gap: '10px',
             flexWrap: 'wrap',
         },
+        '.ss__filter-summary__no-filters': {
+            margin: '5px 0',
+        },
         '&.ss__filter-summary--list': {
             '& .ss__filter-summary__clear-all .ss__filter__value': {
                 marginLeft: '5px',
@@ -64,6 +67,8 @@ export const FilterSummary = observer((properties) => {
         title: 'Current Filters',
         type: 'inline',
         clearAllLabel: 'Clear All',
+        noFiltersText: 'No filters applied',
+        hideNoFiltersText: true,
         clearAllIcon: 'close-thin',
         filterIcon: 'close-thin',
         filters: properties.controller?.store?.filters,
@@ -71,7 +76,7 @@ export const FilterSummary = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('filterSummary', globalTheme, defaultProps, properties);
-    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
+    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, noFiltersText, hideNoFiltersText, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('filterSummary', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -102,16 +107,22 @@ export const FilterSummary = observer((properties) => {
         clearAllLabel: {
             value: clearAllLabel,
         },
+        noFiltersText: {
+            value: noFiltersText,
+        },
     };
     //deep merge with props.lang
     const lang = deepmerge(defaultLang, props.lang || {});
-    const mergedLang = useLang(lang, {
-        filters,
-    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    return filters?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, className, internalClassName), children: [!hideTitle && _jsx("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), _jsxs("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => (_jsx(Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && (_jsx(Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
+    const langOptions = { activeBreakpoint: globalTheme?.activeBreakpoint };
+    const mergedLang = {
+        ...useLang({ title: lang.title }, { filters }, langOptions),
+        ...useLang({ noFiltersText: lang.noFiltersText }, { controller: properties.controller }, langOptions),
+    };
+    if (!filters?.length && hideNoFiltersText) {
+        return null;
+    }
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, { 'ss__filter-summary--no-filters': !filters?.length }, className, internalClassName), children: [!hideTitle && _jsx("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), filters?.length ? (_jsxs("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => (_jsx(Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && (_jsx(Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
                                 onClearAllClick && onClearAllClick(e);
                                 properties.controller?.urlManager.remove('filter').remove('page').go();
-                            }, lang: {
-                                filter: { attributes: { 'aria-label': clearAllLabel } },
-                            } }))] })] }) })) : null;
+                            }, lang: { filter: lang.clearAllLabel } }))] })) : (_jsx("div", { className: "ss__filter-summary__no-filters", ...mergedLang.noFiltersText?.all }))] }) }));
 });