jfs-components 0.1.56 → 0.1.57

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.57] - 2026-07-27
+
+- `Carousel` — fix infinite-tall slides: equal-height no longer uses unbounded `alignItems:'stretch'` / `height:'100%'` in a horizontal ScrollView; it measures intrinsic slide heights then locks slots to the tallest.
+- `CardCTA` (rating) — pin the footer when given an explicit height without `flexGrow` (which also caused infinite height in horizontal carousels).
+
 ## [0.1.56] - 2026-07-27
 
 - `Carousel` — `equalHeight` defaults to `true` (hug tallest slide; no token `maxHeight` clip). New `itemInset`, `bleedHorizontal`, and `maxHeight` (`number | false`) props for edge-aligned cards without consumer math. Opt out with `equalHeight={false}` to keep the legacy clipped strip. Storybook docs refreshed for the new API.

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -215,12 +215,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/commonjs/components/Carousel/Carousel.js

@@ -105,6 +105,35 @@ 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 = (0, _react.useRef)({});
+  const [equalizedHeight, setEqualizedHeight] = (0, _react.useState)();
+  const equalizedHeightRef = (0, _react.useRef)(undefined);
+  equalizedHeightRef.current = equalizedHeight;
+  (0, _react.useEffect)(() => {
+    slideHeightsRef.current = {};
+    equalizedHeightRef.current = undefined;
+    setEqualizedHeight(undefined);
+  }, [totalItems, effectiveItemWidth, equalHeight]);
+  const handleSlideLayout = (0, _react.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;
 
@@ -259,8 +288,9 @@ 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__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: contextValue,
@@ -282,6 +312,8 @@ 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
@@ -292,8 +324,8 @@ function Carousel({
             flexShrink: 0,
             flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
             overflow: 'hidden',
-            ...(equalHeight ? {
-              alignSelf: 'stretch'
+            ...(hasEqualizedHeight ? {
+              height: equalizedHeight
             } : {})
           };
 
@@ -303,11 +335,11 @@ 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'
             } : {})
           };
 
@@ -321,7 +353,11 @@ function Carousel({
           }) : child;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: slotStyle,
-            children: childWithModes
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: hasEqualizedHeight ? styles.equalizedFill : undefined,
+              onLayout: handleSlideLayout(index),
+              children: childWithModes
+            })
           }, index);
         })
       }), !isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
@@ -470,6 +506,11 @@ function AnimatedDot({
     }
   });
 }
+const styles = _reactNative.StyleSheet.create({
+  equalizedFill: {
+    flex: 1
+  }
+});
 
 // ---------------------------------------------------------------------------
 // Attach sub-components