@swift-food-services/catering-widget 0.2.0-beta.1 → 0.2.0-beta.2

package/dist/index.cjs

@@ -3557,12 +3557,12 @@ styleInject(`/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
   .swift-catering-widget .right-8 {
     right: calc(var(--spacing) * 8);
   }
+  .swift-catering-widget .right-96 {
+    right: calc(var(--spacing) * 96);
+  }
   .swift-catering-widget .right-\\[-45px\\] {
     right: -45px;
   }
-  .swift-catering-widget .right-\\[calc\\(24rem\\+0\\.5rem\\)\\] {
-    right: 24.5rem;
-  }
   .swift-catering-widget .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -19866,7 +19866,7 @@ function SuggestionsOverlay({ onClose }) {
   const overlay = /* @__PURE__ */ jsxRuntime.jsxs(
     react$1.motion.div,
     {
-      className: "fixed bottom-0 left-2 right-[calc(24rem+0.5rem)] z-50 hidden md:block",
+      className: "fixed bottom-0 left-2 right-96 z-50 hidden md:block",
       style: { top: stickyTopOffset },
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -26720,6 +26720,7 @@ function CateringOrderBuilder() {
   };
   const { stickyTopOffset = 0, publishableKey, aiEnabled = false } = useCateringConfig();
   const effectiveRightPanelTab = aiEnabled ? rightPanelTab : "cart";
+  const [overlayVisible, setOverlayVisible] = react.useState(false);
   const basketColumnRef = react.useRef(null);
   const [basketHeight, setBasketHeight] = react.useState("100vh");
   react.useEffect(() => {
@@ -27542,17 +27543,24 @@ function CateringOrderBuilder() {
                   onRegisterMobileSearchSetter: handleRegisterMobileSearchSetter
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(SuggestionsOverlayBridge, { active: effectiveRightPanelTab === "ai" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SuggestionsOverlayBridge,
+                {
+                  active: effectiveRightPanelTab === "ai",
+                  onVisibleChange: setOverlayVisible
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: basketColumnRef,
-              className: "hidden md:flex md:w-96 flex-shrink-0 flex-col sticky overflow-hidden py-2 px-1",
+              className: `hidden md:flex md:w-96 flex-shrink-0 flex-col overflow-hidden py-2 px-1 ${overlayVisible ? "fixed z-50 bg-base-100" : "sticky"}`,
               style: {
                 top: stickyTopOffset,
-                height: basketHeight,
+                right: overlayVisible ? 0 : void 0,
+                height: overlayVisible ? `calc(100dvh - ${stickyTopOffset}px)` : basketHeight,
                 alignSelf: "flex-start"
               },
               children: mealSessions[activeSessionIndex] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col gap-2 overflow-hidden", children: [
@@ -28365,7 +28373,10 @@ function MobileAIInput({
     )
   ] });
 }
-function SuggestionsOverlayBridge({ active }) {
+function SuggestionsOverlayBridge({
+  active,
+  onVisibleChange
+}) {
   const {
     hasResults,
     suggestionsOverlayDismissed,
@@ -28374,6 +28385,9 @@ function SuggestionsOverlayBridge({ active }) {
   } = useChatSessionContext();
   const hasContent = hasResults || activeViewedPreview !== null;
   const visible = active && hasContent && !suggestionsOverlayDismissed;
+  react.useEffect(() => {
+    onVisibleChange?.(visible);
+  }, [visible, onVisibleChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
     SuggestionsOverlay,
     {