@ticketboothapp/booking 1.2.37 → 1.2.38

package/package.json

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

package/src/components/booking/BookingFlow.tsx

@@ -1423,11 +1423,17 @@ export function BookingFlow({
       return null;
     };
 
-    const scrollParent = findScrollParent(el);
-    const scrollTarget =
-      useWindowScroll || !scrollParent
-        ? (typeof window !== 'undefined' ? window : null)
-        : scrollParent;
+    // 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);
+    }
 
     let ticking = false;
     const COOLDOWN_MS = 600; // After a state change, ignore reverse changes for this long (covers 0.25s collapse animation + layout settle)
@@ -1441,7 +1447,7 @@ export function BookingFlow({
       const wasSticky = isItineraryStickyRef.current;
 
       const containerTop =
-        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
+        detectedScrollParent && !useWindowScroll ? detectedScrollParent.getBoundingClientRect().top : 0;
       const topInset = Math.max(0, flowUi?.itineraryStickyTopOffsetPx ?? 0);
       const stickLine = containerTop + topInset;
       const enterStickyThreshold = stickLine + 1;
@@ -1469,13 +1475,16 @@ export function BookingFlow({
       }
     };
 
-    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
+    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
 
   // 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.module.css

@@ -101,6 +101,7 @@
   transition: all 0.3s;
 }
 
+
 .titleSticky {
   font-size: 1rem;
   margin-bottom: 0.25rem;
@@ -215,13 +216,13 @@
 }
 
 .placeLink {
-  color: var(--booking-stone-400, #a8a29e);
+  color: var(--booking-emerald-600, #059669);
   text-decoration: underline;
   cursor: pointer;
 }
 
 .placeLink:hover {
-  color: var(--booking-stone-600, #57534e);
+  color: var(--booking-emerald-700, #047857);
 }
 
 .tooltip {

package/src/components/booking/ItineraryBox.tsx

@@ -280,7 +280,7 @@ export function ItineraryBox({
                           <button
                             type="button"
                             onClick={handlePickupLocationClick}
-                            className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
+                            className={styles.placeLink}
                           >
                             {getDisplayLabel(locationOnlyDisplay)}
                           </button>
@@ -312,7 +312,7 @@ export function ItineraryBox({
                           <button
                             type="button"
                             onClick={handlePickupLocationClick}
-                            className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
+                            className={styles.placeLink}
                           >
                             {getDisplayLabel(locationOnlyDisplay)}
                           </button>