@ticketboothapp/booking 1.2.38 → 1.2.39

package/package.json

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

package/src/components/booking/BookingFlow.tsx

@@ -1423,17 +1423,26 @@ export function BookingFlow({
       return null;
     };
 
-    // Host integrations (e.g. provider dashboard) may scroll inside an explicit content container
-    // that isn't reliably discoverable from computed overflow on itinerary ancestors.
-    const explicitScrollContainer = !useWindowScroll ? contentRef?.current ?? null : null;
-    const detectedScrollParent = explicitScrollContainer ?? findScrollParent(el);
-    const scrollTargets: EventTarget[] = [];
-    if (!useWindowScroll && detectedScrollParent) {
-      scrollTargets.push(detectedScrollParent);
-    }
-    if (typeof window !== 'undefined') {
-      scrollTargets.push(window);
-    }
+    const detectedScrollParent = findScrollParent(el);
+    const explicitScrollContainer = contentRef?.current ?? null;
+    const isElementScrollable = (node: HTMLElement | null): node is HTMLElement => {
+      if (!node) return false;
+      const style = getComputedStyle(node);
+      const allowsScroll = style.overflowY === 'auto' || style.overflowY === 'scroll' || style.overflowY === 'overlay';
+      return allowsScroll && node.scrollHeight > node.clientHeight + 1;
+    };
+
+    // Deterministic host-aware choice:
+    // 1) explicit contentRef when it is truly scrollable
+    // 2) nearest detected scroll parent when it is truly scrollable
+    // 3) window scroll
+    const scrollParent =
+      !useWindowScroll && isElementScrollable(explicitScrollContainer)
+        ? explicitScrollContainer
+        : !useWindowScroll && isElementScrollable(detectedScrollParent)
+        ? detectedScrollParent
+        : 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)
@@ -1447,7 +1456,7 @@ export function BookingFlow({
       const wasSticky = isItineraryStickyRef.current;
 
       const containerTop =
-        detectedScrollParent && !useWindowScroll ? detectedScrollParent.getBoundingClientRect().top : 0;
+        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
       const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
       const stickLine = containerTop + topInset;
       const enterStickyThreshold = stickLine + 1;
@@ -1475,16 +1484,13 @@ export function BookingFlow({
       }
     };
 
-    scrollTargets.forEach((target) => {
-      target.addEventListener('scroll', handleScroll, { passive: true });
-    });
-    updateStickyState();
-    return () => {
-      scrollTargets.forEach((target) => {
-        target.removeEventListener('scroll', handleScroll);
-      });
-    };
-  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx, contentRef]); // Re-check when itinerary / scroll mode / host chrome changes
+    if (scrollTarget) {
+      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+      updateStickyState();
+      return () => scrollTarget.removeEventListener('scroll', handleScroll);
+    }
+    return undefined;
+  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx]); // 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