@athoscommerce/snap-preact 1.7.0 → 1.7.1-beta.121

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.d.ts

@@ -0,0 +1,32 @@
+import type { RefObject } from 'preact';
+export type UseChatFileUploadOptions = {
+    /**
+     * When false, drag handlers are no-ops and the dragging indicator never activates.
+     */
+    enabled: boolean;
+    /**
+     * Called when image files are dropped onto the footer. Receives a freshly-built
+     * FileList (filtered to only image/* types).
+     */
+    onUpload: (files: FileList) => void | Promise<void>;
+};
+export type UseChatFileUploadResult = {
+    /** Attach to a hidden `<input type="file">` so the upload button can trigger it. */
+    fileInputRef: RefObject<HTMLInputElement>;
+    /** True while the user is actively dragging files over the footer. */
+    isDraggingFile: boolean;
+    /** Spread these onto the drop-zone element. */
+    dragHandlers: {
+        onDragEnter: (e: any) => void;
+        onDragOver: (e: any) => void;
+        onDragLeave: (e: any) => void;
+        onDrop: (e: any) => void;
+    };
+};
+/**
+ * Wires drag-and-drop image upload onto the chat footer plus a ref for the
+ * hidden file input. `dragenter` / `dragleave` fire on every child crossing,
+ * so a counter is kept to know when the pointer has truly left the footer.
+ */
+export declare const useChatFileUpload: ({ enabled, onUpload }: UseChatFileUploadOptions) => UseChatFileUploadResult;
+//# sourceMappingURL=useChatFileUpload.d.ts.map

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatFileUpload.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/hooks/useChatFileUpload.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,wBAAwB,GAAG;IACtC;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,oFAAoF;IACpF,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC1C,sEAAsE;IACtE,cAAc,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,YAAY,EAAE;QACb,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC7B,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACzB,CAAC;CACF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,0BAA2B,wBAAwB,KAAG,uBA4CnF,CAAC"}

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js

@@ -0,0 +1,104 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChatFileUpload = void 0;
+var hooks_1 = require("preact/hooks");
+var hasFiles = function (e) { var _a; return Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || []).includes('Files'); };
+/**
+ * Wires drag-and-drop image upload onto the chat footer plus a ref for the
+ * hidden file input. `dragenter` / `dragleave` fire on every child crossing,
+ * so a counter is kept to know when the pointer has truly left the footer.
+ */
+var useChatFileUpload = function (_a) {
+    var enabled = _a.enabled, onUpload = _a.onUpload;
+    var fileInputRef = (0, hooks_1.useRef)(null);
+    var _b = (0, hooks_1.useState)(false), isDraggingFile = _b[0], setIsDraggingFile = _b[1];
+    var dragCounterRef = (0, hooks_1.useRef)(0);
+    var onDragEnter = function (e) {
+        if (!enabled || !hasFiles(e))
+            return;
+        e.preventDefault();
+        dragCounterRef.current += 1;
+        setIsDraggingFile(true);
+    };
+    var onDragOver = function (e) {
+        if (!enabled || !hasFiles(e))
+            return;
+        // Required to allow the drop event to fire
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'copy';
+    };
+    var onDragLeave = function (e) {
+        if (!enabled || !hasFiles(e))
+            return;
+        dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+        if (dragCounterRef.current === 0)
+            setIsDraggingFile(false);
+    };
+    var onDrop = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var dropped, firstImage, dt;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!enabled || !hasFiles(e))
+                        return [2 /*return*/];
+                    e.preventDefault();
+                    dragCounterRef.current = 0;
+                    setIsDraggingFile(false);
+                    dropped = Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+                    firstImage = dropped.find(function (f) { return f.type.startsWith('image/'); });
+                    if (!firstImage)
+                        return [2 /*return*/];
+                    dt = new DataTransfer();
+                    dt.items.add(firstImage);
+                    return [4 /*yield*/, onUpload(dt.files)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return {
+        fileInputRef: fileInputRef,
+        isDraggingFile: isDraggingFile,
+        dragHandlers: { onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop },
+    };
+};
+exports.useChatFileUpload = useChatFileUpload;

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatGestures.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'preact';
+export type UseChatGesturesOptions = {
+    /**
+     * Ref to the panel that is being dragged (the mobile secondary panel).
+     */
+    panelRef: RefObject<HTMLDivElement>;
+    /**
+     * Whether the side chat is currently visible. Used to reset state when it toggles.
+     */
+    shouldShowSideChat: boolean;
+    /**
+     * Active message id. Used to reset state when the user navigates to a different message.
+     */
+    activeMessageId: string | undefined;
+    /**
+     * Called when the swipe gesture passes the dismiss threshold and finishes animating out.
+     */
+    onDismiss: () => void;
+};
+export type UseChatGesturesResult = {
+    /** Current vertical offset in pixels. */
+    swipeOffset: number;
+    /** Whether a snap-back / dismiss animation is currently running. */
+    swipeAnimating: boolean;
+    /** Spread these onto the panel: `onTouchStart`, `onTouchMove`, `onTouchEnd`. */
+    swipeHandlers: {
+        onTouchStart: (e: any) => void;
+        onTouchMove: (e: any) => void;
+        onTouchEnd: () => void;
+    };
+};
+/**
+ * Drag-down-to-dismiss gesture for the mobile secondary chat panel.
+ *
+ * Tracks vertical touch movement and applies a translateY offset until the user releases.
+ * If the user passes a distance or velocity threshold the panel animates the rest of the way
+ * out and `onDismiss` fires; otherwise it snaps back to zero.
+ */
+export declare const useChatGestures: ({ panelRef, shouldShowSideChat, activeMessageId, onDismiss }: UseChatGesturesOptions) => UseChatGesturesResult;
+//# sourceMappingURL=useChatGestures.d.ts.map

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatGestures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatGestures.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/hooks/useChatGestures.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACpC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACpC;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,cAAc,EAAE,OAAO,CAAC;IACxB,gFAAgF;IAChF,aAAa,EAAE;QACd,YAAY,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,iEAAkE,sBAAsB,KAAG,qBAsFtH,CAAC"}

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatGestures.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChatGestures = void 0;
+var hooks_1 = require("preact/hooks");
+/**
+ * Drag-down-to-dismiss gesture for the mobile secondary chat panel.
+ *
+ * Tracks vertical touch movement and applies a translateY offset until the user releases.
+ * If the user passes a distance or velocity threshold the panel animates the rest of the way
+ * out and `onDismiss` fires; otherwise it snaps back to zero.
+ */
+var useChatGestures = function (_a) {
+    var panelRef = _a.panelRef, shouldShowSideChat = _a.shouldShowSideChat, activeMessageId = _a.activeMessageId, onDismiss = _a.onDismiss;
+    var swipeStartY = (0, hooks_1.useRef)(0);
+    var swipeStartTime = (0, hooks_1.useRef)(0);
+    var swipeActive = (0, hooks_1.useRef)(false);
+    var swipeOffsetRef = (0, hooks_1.useRef)(0);
+    var animationTimerRef = (0, hooks_1.useRef)(null);
+    var _b = (0, hooks_1.useState)(0), swipeOffset = _b[0], setSwipeOffsetRaw = _b[1];
+    var _c = (0, hooks_1.useState)(false), swipeAnimating = _c[0], setSwipeAnimating = _c[1];
+    var updateSwipeOffset = function (value) {
+        swipeOffsetRef.current = value;
+        setSwipeOffsetRaw(value);
+    };
+    // Reset swipe state when secondary panel opens/closes or active message changes
+    (0, hooks_1.useEffect)(function () {
+        updateSwipeOffset(0);
+        setSwipeAnimating(false);
+        swipeActive.current = false;
+    }, [shouldShowSideChat, activeMessageId]);
+    var onTouchStart = function (e) {
+        swipeStartY.current = e.touches[0].clientY;
+        swipeStartTime.current = Date.now();
+        swipeActive.current = false; // only activate after dead-zone threshold
+        setSwipeAnimating(false);
+    };
+    var onTouchMove = function (e) {
+        var diff = e.touches[0].clientY - swipeStartY.current;
+        // Require a minimum drag distance before activating the swipe,
+        // so taps on buttons (e.g. close) still fire their click events.
+        if (!swipeActive.current) {
+            if (Math.abs(diff) < 8)
+                return; // still within dead-zone
+            swipeActive.current = true;
+        }
+        if (diff > 0) {
+            e.preventDefault();
+            updateSwipeOffset(diff);
+        }
+        else {
+            updateSwipeOffset(0);
+        }
+    };
+    var onTouchEnd = function () {
+        var _a;
+        if (!swipeActive.current)
+            return;
+        swipeActive.current = false;
+        var offset = swipeOffsetRef.current;
+        var height = ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 400;
+        var elapsed = Date.now() - swipeStartTime.current;
+        var velocity = offset / (elapsed || 1); // px per ms
+        // Dismiss if dragged past 25% threshold OR a quick flick (>0.5 px/ms with >50px travel)
+        var shouldDismiss = offset > height * 0.25 || (velocity > 0.5 && offset > 50);
+        if (shouldDismiss) {
+            // Animate out then dismiss
+            setSwipeAnimating(true);
+            updateSwipeOffset(height);
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+            animationTimerRef.current = setTimeout(function () {
+                onDismiss();
+                updateSwipeOffset(0);
+                setSwipeAnimating(false);
+            }, 300);
+        }
+        else {
+            // Snap back
+            setSwipeAnimating(true);
+            updateSwipeOffset(0);
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+            animationTimerRef.current = setTimeout(function () { return setSwipeAnimating(false); }, 300);
+        }
+    };
+    (0, hooks_1.useEffect)(function () {
+        return function () {
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+        };
+    }, []);
+    return {
+        swipeOffset: swipeOffset,
+        swipeAnimating: swipeAnimating,
+        swipeHandlers: { onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },
+    };
+};
+exports.useChatGestures = useChatGestures;

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatOverflow.d.ts

@@ -0,0 +1,44 @@
+import type { RefObject } from 'preact';
+export type UseChatOverflowOptions = {
+    messagesContainerRef: RefObject<HTMLDivElement>;
+    headerRef: RefObject<HTMLDivElement>;
+    /**
+     * Whether the chat panel is open. State resets on toggle.
+     */
+    open: boolean;
+    /**
+     * Whether the controller is currently loading. Triggers a scroll-to-bottom when it flips on.
+     */
+    loading: boolean;
+    /**
+     * Length of the visible chat. Drives the new-message popup + auto-scroll behavior.
+     */
+    visibleChatLength: number;
+    /**
+     * The last visible message — needed to differentiate auto-scroll for user vs assistant messages.
+     */
+    lastVisibleMessage: {
+        messageType?: string;
+    } | undefined;
+};
+export type UseChatOverflowResult = {
+    /** True when there are messages off-screen below the current scroll position. */
+    showNewMessages: boolean;
+    /** Imperative dismiss for the "New messages" popup. */
+    setShowNewMessages: (value: boolean) => void;
+    /** True when the messages container is overflowing (used to switch comparison tray between in-flow and overlay). */
+    messagesOverflow: boolean;
+    /** Live ref tracking whether the user is currently near the bottom. */
+    isNearBottomRef: RefObject<boolean>;
+    /** Imperatively scroll the messages container to the bottom (smooth). */
+    scrollToBottom: () => void;
+    /** Conditional scroll: only scrolls if the user is already near the bottom. */
+    scrollToBottomIfNear: () => void;
+};
+/**
+ * Manages the auto-scroll, "new message" indicator, and overflow detection for the
+ * chat message list. Owns all scroll listeners and ResizeObservers so the host
+ * component just consumes the derived state.
+ */
+export declare const useChatOverflow: ({ messagesContainerRef, headerRef, open, loading, visibleChatLength, lastVisibleMessage, }: UseChatOverflowOptions) => UseChatOverflowResult;
+//# sourceMappingURL=useChatOverflow.d.ts.map

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatOverflow.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/hooks/useChatOverflow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACpC,oBAAoB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,kBAAkB,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,iFAAiF;IACjF,eAAe,EAAE,OAAO,CAAC;IACzB,uDAAuD;IACvD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,oHAAoH;IACpH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,yEAAyE;IACzE,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,+EAA+E;IAC/E,oBAAoB,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,+FAOzB,sBAAsB,KAAG,qBAyG3B,CAAC"}

package/dist/cjs/components/src/components/Organisms/Chat/hooks/useChatOverflow.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChatOverflow = void 0;
+var hooks_1 = require("preact/hooks");
+/**
+ * Manages the auto-scroll, "new message" indicator, and overflow detection for the
+ * chat message list. Owns all scroll listeners and ResizeObservers so the host
+ * component just consumes the derived state.
+ */
+var useChatOverflow = function (_a) {
+    var messagesContainerRef = _a.messagesContainerRef, headerRef = _a.headerRef, open = _a.open, loading = _a.loading, visibleChatLength = _a.visibleChatLength, lastVisibleMessage = _a.lastVisibleMessage;
+    var _b = (0, hooks_1.useState)(false), showNewMessages = _b[0], setShowNewMessages = _b[1];
+    var _c = (0, hooks_1.useState)(false), messagesOverflow = _c[0], setMessagesOverflow = _c[1];
+    var isNearBottomRef = (0, hooks_1.useRef)(true);
+    var scrollToBottom = function () {
+        // Scroll the messages container directly (instead of scrollIntoView on the
+        // bottom anchor) so the browser never walks up the ancestor chain. On small
+        // viewports a smooth scrollIntoView could otherwise animate the document /
+        // visual viewport and visually push the fixed-position chat off-screen.
+        var container = messagesContainerRef.current;
+        if (container) {
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        }
+    };
+    // Conditional scroll: only scrolls if the user is already near the bottom.
+    var scrollToBottomIfNear = function () {
+        if (isNearBottomRef.current) {
+            scrollToBottom();
+        }
+    };
+    // Scroll to bottom when chat opens
+    (0, hooks_1.useEffect)(function () {
+        if (open) {
+            scrollToBottom();
+            setShowNewMessages(false);
+            isNearBottomRef.current = true;
+        }
+    }, [open]);
+    // Handle new messages — auto-scroll for user messages, show popup for response messages when scrolled up
+    (0, hooks_1.useEffect)(function () {
+        if (!open || !lastVisibleMessage)
+            return;
+        if (lastVisibleMessage.messageType === 'user') {
+            scrollToBottom();
+            setShowNewMessages(false);
+        }
+        else if (isNearBottomRef.current) {
+            scrollToBottom();
+            setShowNewMessages(false);
+        }
+        else {
+            setShowNewMessages(true);
+        }
+    }, [visibleChatLength]);
+    // Scroll to show loading indicator when user sends a message
+    (0, hooks_1.useEffect)(function () {
+        if (open && loading) {
+            scrollToBottom();
+        }
+    }, [loading]);
+    // Track scroll position to dismiss the "New messages" popup when user scrolls to bottom
+    (0, hooks_1.useEffect)(function () {
+        var container = messagesContainerRef.current;
+        if (!container)
+            return;
+        var handleScroll = function () {
+            var threshold = 100;
+            var isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+            isNearBottomRef.current = isNearBottom;
+            if (isNearBottom) {
+                setShowNewMessages(false);
+            }
+        };
+        container.addEventListener('scroll', handleScroll);
+        return function () { return container.removeEventListener('scroll', handleScroll); };
+    }, [open]);
+    // Track whether the messages container is overflowing so the comparisons header
+    // can switch between in-flow (short conversations — top content stays reachable)
+    // and overlay (overflowing — avoid layout shift when toggling the tray).
+    // Hysteresis: when already in overlay, only return to in-flow if the content
+    // would still fit *with* the header re-inserted — otherwise the two states
+    // fight each other and the layout flickers.
+    (0, hooks_1.useEffect)(function () {
+        var container = messagesContainerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        var update = function () {
+            setMessagesOverflow(function (prev) {
+                var _a;
+                var headerHeight = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+                if (prev) {
+                    // Currently overlay: header isn't taking flow space. Only switch
+                    // back to in-flow if the content would fit with the header added.
+                    return container.scrollHeight > container.clientHeight - headerHeight + 1;
+                }
+                // Currently in-flow: header already takes space — straightforward check.
+                return container.scrollHeight > container.clientHeight + 1;
+            });
+        };
+        update();
+        var observer = new ResizeObserver(update);
+        observer.observe(container);
+        if (headerRef.current)
+            observer.observe(headerRef.current);
+        return function () { return observer.disconnect(); };
+    }, [open, visibleChatLength]);
+    return {
+        showNewMessages: showNewMessages,
+        setShowNewMessages: setShowNewMessages,
+        messagesOverflow: messagesOverflow,
+        isNearBottomRef: isNearBottomRef,
+        scrollToBottom: scrollToBottom,
+        scrollToBottomIfNear: scrollToBottomIfNear,
+    };
+};
+exports.useChatOverflow = useChatOverflow;

package/dist/cjs/components/src/components/Organisms/Chat/index.d.ts

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

package/dist/cjs/components/src/components/Organisms/Chat/index.d.ts.map

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

package/dist/cjs/components/src/components/Organisms/Chat/index.js

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

package/dist/cjs/components/src/components/Organisms/Facet/Facet.js

@@ -388,8 +388,9 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
     return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.field), "".concat(facet.collapsed ? 'ss__facet--collapsed' : ''), className, internalClassName, "".concat(facet.display ? "ss__facet--".concat(facet.display) : ''), (statefulOverflow ? (overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0 > 0 : (((_r = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _r === void 0 ? void 0 : _r.remaining) || 0) > 0) || (facet === null || facet === void 0 ? void 0 : facet.display) == 'slider'
                 ? ''
                 : 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang }))) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function () { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3 }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
+                                        var _a;
                                         e.stopPropagation();
-                                        facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
+                                        (_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
                                     }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((facet === null || facet === void 0 ? void 0 : facet.collapsed)
                             ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse))), { name: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'expand' : 'collapse' })))] })), children: (0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang })) }))) })) })) : null;
 });

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

@@ -227,8 +227,9 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
                                     setSelectedFacet(undefined);
                                 }
                             }, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__dropdown__button__heading" }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
+                                                    var _a;
                                                     e.stopPropagation();
-                                                    facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
+                                                    (_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
                                                 }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field
                                         ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse)))))] })), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet })) })));
                     }), !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) && ((0, jsx_runtime_1.jsx)(MobileSidebar_1.MobileSidebar, __assign({ controller: controller }, subProps.MobileSidebar)))] }) })) })) : null;

package/dist/cjs/components/src/components/Organisms/Results/Results.js

@@ -38,7 +38,7 @@ var defaultStyles = function (_a) {
         flexFlow: 'row wrap',
         gap: gapSize,
         gridTemplateRows: 'auto',
-        gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+        gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
         '& .ss__result, & .ss__result-layout': (_b = {
                 boxSizing: 'border-box',
                 flex: '0 1 auto',

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
-export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 interface inputBounds {

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA+CxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAmN3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA+CxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA0N3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,qCAAqC,CAAC"}

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -139,6 +139,8 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)(function (properties
                 icon: 'close-thin',
             }, closeSearchButton: {
                 onClick: function () { return reset(); },
+            }, chatButton: {
+                onClick: function () { return controller.openChat(); },
             }, inputName: inputName }, (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
@@ -206,5 +208,5 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)(function (properties
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return (layout === null || layout === void 0 ? void 0 : layout.length) && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete-fixed', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-fixed__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") })) })] }) })) })) })) : null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (layout === null || layout === void 0 ? void 0 : layout.length) && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete-fixed', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-fixed__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") })) })] }) })) })) })) : null }));
 });

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
-export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export type AutocompleteModalProps = {

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA4DxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA8J3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA4DxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAqK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,qCAAqC,CAAC"}

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -153,6 +153,8 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)(function (properties
             }, closeSearchButton: {
                 onClick: function () { return reset(); },
                 icon: 'angle-left',
+            }, chatButton: {
+                onClick: function () { return controller.openChat(); },
             }, inputName: inputName }, (0, utilities_1.defined)({
             disableStyles: disableStyles,
         })), { 
@@ -178,5 +180,5 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)(function (properties
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return (layout === null || layout === void 0 ? void 0 : layout.length) && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") }))] }) })) })) })) : null;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (layout === null || layout === void 0 ? void 0 : layout.length) && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") }))] }) })) })) })) : null }));
 });

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts

@@ -2,7 +2,7 @@ import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
 import { SlideDirectionType } from '../../Molecules/Slideout';
-export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
 export type AutocompleteSlideoutProps = {

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CAsJjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,qCAAqC,CAAC"}
+{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA6JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,qCAAqC,CAAC"}