@ticketboothapp/booking 1.2.39 → 1.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.39",
+  "version": "1.2.40",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/BookingFlow.tsx

@@ -1444,53 +1444,65 @@ export function BookingFlow({
         : null;
     const scrollTarget = scrollParent ?? (typeof window !== 'undefined' ? window : null);
 
-    let ticking = false;
     const COOLDOWN_MS = 600; // After a state change, ignore reverse changes for this long (covers 0.25s collapse animation + layout settle)
-    const atTopBand = 48; // px - must scroll back up past this band to expand again (wider = less oscillation at edges)
+    const setStickyState = (nextSticky: boolean) => {
+      const wasSticky = isItineraryStickyRef.current;
+      if (nextSticky === wasSticky) return;
+      const now = Date.now();
+      if (now - lastStickyChangeRef.current < COOLDOWN_MS) return;
+      lastStickyChangeRef.current = now;
+      isItineraryStickyRef.current = nextSticky;
+      setIsItinerarySticky(nextSticky);
+    };
+
+    const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
+
+    // Primary path: IntersectionObserver sentinel is reliable across nested scroll containers.
+    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+      const sentinel = document.createElement('div');
+      sentinel.setAttribute('data-itinerary-sticky-sentinel', 'true');
+      sentinel.style.height = '1px';
+      sentinel.style.margin = '0';
+      sentinel.style.padding = '0';
+      sentinel.style.pointerEvents = 'none';
+      el.parentElement?.insertBefore(sentinel, el);
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          // When sentinel leaves the visible root area (adjusted by top inset), itinerary is sticky.
+          setStickyState(!entry.isIntersecting);
+        },
+        {
+          root: scrollParent,
+          rootMargin: `${-topInset}px 0px 0px 0px`,
+          threshold: 0,
+        },
+      );
+
+      observer.observe(sentinel);
+      return () => {
+        observer.disconnect();
+        sentinel.remove();
+      };
+    }
 
+    // Fallback path for environments without IntersectionObserver.
     const updateStickyState = () => {
       if (!itineraryRef.current) return;
-
       const rect = itineraryRef.current.getBoundingClientRect();
-      const currentTop = rect.top;
-      const wasSticky = isItineraryStickyRef.current;
-
       const containerTop =
         scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
-      const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
-      const stickLine = containerTop + topInset;
-      const enterStickyThreshold = stickLine + 1;
-      const nextSticky = wasSticky
-        ? currentTop >= stickLine - atTopBand && currentTop <= stickLine + atTopBand
-        : currentTop <= enterStickyThreshold;
-
-      if (nextSticky !== wasSticky) {
-        const now = Date.now();
-        if (now - lastStickyChangeRef.current < COOLDOWN_MS) return; // Cooldown: prevent rapid toggling
-
-        lastStickyChangeRef.current = now;
-        isItineraryStickyRef.current = nextSticky;
-        setIsItinerarySticky(nextSticky);
-      }
-    };
-
-    const handleScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          updateStickyState();
-          ticking = false;
-        });
-        ticking = true;
-      }
+      setStickyState(rect.top <= containerTop + topInset + 1);
     };
 
     if (scrollTarget) {
-      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+      scrollTarget.addEventListener('scroll', updateStickyState, { passive: true });
       updateStickyState();
-      return () => scrollTarget.removeEventListener('scroll', handleScroll);
+      return () => scrollTarget.removeEventListener('scroll', updateStickyState);
     }
     return undefined;
-  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx]); // Re-check when itinerary / scroll mode / host chrome changes
+  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx, contentRef]); // Re-check when itinerary / scroll mode / host chrome changes
 
   // Find the earliest availability date - memoize with a stable reference
   // Only recalculate if we don't have a cached value or if the new earliest is actually earlier