@ticketboothapp/booking 1.2.40 → 1.2.41

package/package.json

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

package/src/components/booking/BookingFlow.tsx

@@ -1423,86 +1423,59 @@ export function BookingFlow({
       return null;
     };
 
-    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);
+    const scrollParent = findScrollParent(el);
+    const scrollTarget =
+      useWindowScroll || !scrollParent
+        ? (typeof window !== 'undefined' ? window : null)
+        : scrollParent;
 
+    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 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();
-      };
-    }
+    const atTopBand = 48; // px - must scroll back up past this band to expand again (wider = less oscillation at edges)
 
-    // 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;
-      setStickyState(rect.top <= containerTop + topInset + 1);
+      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;
+      }
     };
 
     if (scrollTarget) {
-      scrollTarget.addEventListener('scroll', updateStickyState, { passive: true });
+      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
       updateStickyState();
-      return () => scrollTarget.removeEventListener('scroll', updateStickyState);
+      return () => scrollTarget.removeEventListener('scroll', handleScroll);
     }
     return undefined;
-  }, [selectedDate, selectedAvailability, useWindowScroll, flowUi?.itineraryStickyTopOffsetPx, contentRef]); // Re-check when itinerary / scroll mode / host chrome changes
+  }, [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

package/src/components/booking/ItineraryBox.tsx

@@ -166,36 +166,8 @@ export function ItineraryBox({
   const handlePickupLocationClick = () => {
     const pickupSection = document.getElementById('pickup-location-section');
     if (!pickupSection) return;
-
-    const findScrollParent = (node: HTMLElement): HTMLElement | null => {
-      let parent = node.parentElement;
-      while (parent) {
-        const { overflowY } = getComputedStyle(parent);
-        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return parent;
-        parent = parent.parentElement;
-      }
-      return null;
-    };
-
-    const scrollParent = useWindowScroll ? null : findScrollParent(pickupSection);
-    const itineraryBox = document.querySelector('[class*="sticky top-"]');
-    const itineraryHeight = itineraryBox?.getBoundingClientRect().height ?? 0;
-    // Extra offset so sticky header doesn't block the pickup section (mobile needs more clearance)
-    const STICKY_HEADER_CLEARANCE = isMobile ? 280 : 270;
-    const targetOffsetFromTop = itineraryHeight + 16 + STICKY_HEADER_CLEARANCE;
-
-    if (scrollParent) {
-      const elementPosition = pickupSection.getBoundingClientRect().top;
-      const scrollDelta = elementPosition - targetOffsetFromTop;
-      scrollParent.scrollTo({
-        top: Math.max(0, scrollParent.scrollTop + scrollDelta),
-        behavior: 'smooth',
-      });
-    } else if (typeof window !== 'undefined') {
-      const elementPosition = pickupSection.getBoundingClientRect().top + window.scrollY;
-      const scrollTop = Math.max(0, elementPosition - targetOffsetFromTop);
-      window.scrollTo({ top: scrollTop, behavior: 'smooth' });
-    }
+    // Let browser handle the active scroll container (window or nested dialog/content area).
+    pickupSection.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
   };
 
   const getDisplayLabel = (label: string): string => {