jfs-components 0.1.56 → 0.1.57

package/lib/module/components/CardCTA/CardCTA.js

@@ -210,12 +210,11 @@ function CardCTA({
     borderColor,
     flexDirection: isRating || isSip ? 'column' : 'row',
     overflow: 'visible',
-    // Rating cards fill equal-height carousel slots and pin the footer down
-    // when free space exists; intrinsic height is unchanged when not stretched.
+    // Pin footer to the bottom when a parent (e.g. equal-height Carousel)
+    // assigns an explicit height. Do not flexGrow — that unbounded-grows
+    // inside horizontal ScrollViews and blows cards to infinite height.
     ...(isRating ? {
-      alignSelf: 'stretch',
-      justifyContent: 'space-between',
-      flexGrow: 1
+      justifyContent: 'space-between'
     } : {})
   };
 

package/lib/module/components/Carousel/Carousel.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { View, ScrollView, Animated, Pressable } from 'react-native';
+import { View, ScrollView, Animated, Pressable, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import AutoplayControl from '../AutoplayControl/AutoplayControl';
@@ -96,6 +96,35 @@ export function Carousel({
     return containerWidth - containerPaddingH * 4;
   }, [itemWidthProp, itemInset, containerWidth, containerPaddingH, isNumbered]);
 
+  // Equal-height: measure each slide's intrinsic height, then lock every slot
+  // to the tallest. Do NOT use contentContainerStyle.alignItems:'stretch' or
+  // height:'100%' without a bounded cross-axis — in a horizontal ScrollView
+  // that resolves to an unbounded/infinite height.
+  const slideHeightsRef = useRef({});
+  const [equalizedHeight, setEqualizedHeight] = useState();
+  const equalizedHeightRef = useRef(undefined);
+  equalizedHeightRef.current = equalizedHeight;
+  useEffect(() => {
+    slideHeightsRef.current = {};
+    equalizedHeightRef.current = undefined;
+    setEqualizedHeight(undefined);
+  }, [totalItems, effectiveItemWidth, equalHeight]);
+  const handleSlideLayout = useCallback(index => event => {
+    if (!equalHeight) return;
+    // Only measure while unconstrained. After lock, the slot height is forced
+    // and onLayout would just echo equalizedHeight.
+    if (equalizedHeightRef.current != null) return;
+    const height = Math.ceil(event.nativeEvent.layout.height);
+    if (height <= 0) return;
+    const previous = slideHeightsRef.current[index] ?? 0;
+    if (height <= previous) return;
+    slideHeightsRef.current[index] = height;
+    const measured = items.map((_, i) => slideHeightsRef.current[i]);
+    if (measured.some(value => value == null)) return;
+    const next = Math.max(...measured);
+    setEqualizedHeight(next);
+  }, [equalHeight, items]);
+
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap;
 
@@ -250,8 +279,9 @@ export function Carousel({
   const contentContainerStyle = {
     paddingHorizontal: effectivePaddingH,
     gap,
-    // Stretch so every slide matches the tallest (default). Opt out with equalHeight={false}.
-    alignItems: equalHeight ? 'stretch' : 'flex-start'
+    // Always flex-start on the cross axis. Stretch + unbounded ScrollView
+    // height is what caused infinite-tall slides.
+    alignItems: 'flex-start'
   };
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: contextValue,
@@ -273,6 +303,8 @@ export function Carousel({
         onScrollEndDrag: handleScrollEndDrag,
         onMomentumScrollEnd: finishProgrammaticScroll,
         children: items.map((child, index) => {
+          const hasEqualizedHeight = equalHeight && equalizedHeight != null && equalizedHeight > 0;
+
           // Strict slot box: width must be honored; never grow or shrink with
           // content, and clip anything that misbehaves (e.g. a child whose
           // inner flex layout would otherwise leak into the next slot on
@@ -283,8 +315,8 @@ export function Carousel({
             flexShrink: 0,
             flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
             overflow: 'hidden',
-            ...(equalHeight ? {
-              alignSelf: 'stretch'
+            ...(hasEqualizedHeight ? {
+              height: equalizedHeight
             } : {})
           };
 
@@ -294,11 +326,11 @@ export function Carousel({
           const childOverrideStyle = {
             width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
             maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
-            flexGrow: equalHeight ? 1 : 0,
+            flexGrow: 0,
             flexShrink: 0,
-            ...(equalHeight ? {
-              alignSelf: 'stretch',
-              height: '100%'
+            ...(hasEqualizedHeight ? {
+              height: '100%',
+              alignSelf: 'stretch'
             } : {})
           };
 
@@ -312,7 +344,11 @@ export function Carousel({
           }) : child;
           return /*#__PURE__*/_jsx(View, {
             style: slotStyle,
-            children: childWithModes
+            children: /*#__PURE__*/_jsx(View, {
+              style: hasEqualizedHeight ? styles.equalizedFill : undefined,
+              onLayout: handleSlideLayout(index),
+              children: childWithModes
+            })
           }, index);
         })
       }), !isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/_jsx(Pagination, {
@@ -461,6 +497,11 @@ function AnimatedDot({
     }
   });
 }
+const styles = StyleSheet.create({
+  equalizedFill: {
+    flex: 1
+  }
+});
 
 // ---------------------------------------------------------------------------
 // Attach sub-components