jfs-components 0.1.56 → 0.1.58

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.58] - 2026-07-27
+
+- `TextInput` / `InputSearch` — restore iOS single-line vertical centering (FormField pattern): row owns height via `minHeight` + `paddingVertical: 0`; omit `lineHeight` on the field on iOS so placeholder and typed text stay centered (RN #39145 / #56774).
+
+## [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

package/lib/commonjs/components/TextInput/TextInput.js

@@ -149,6 +149,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius;
+
+  // Row height from tokens: vertical padding above/below the text line.
+  // Applied as container `minHeight` (FormField pattern) — NOT as TextInput
+  // `lineHeight` / `minHeight`, which breaks iOS vertical centering.
+  const padV = typeof paddingVertical === 'number' ? paddingVertical : 0;
+  const textLine = typeof lineHeight === 'number' ? lineHeight : 0;
+  const iconH = typeof iconSize === 'number' ? iconSize : 0;
+  const rowMinHeight = padV * 2 + Math.max(textLine, iconH);
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -158,7 +166,10 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
     borderStyle: 'solid',
     borderRadius,
     paddingHorizontal,
-    paddingVertical,
+    // Same as FormField / SuggestiveSearch: the ROW owns height via minHeight;
+    // paddingVertical on the row would fight that and let the field stretch.
+    paddingVertical: 0,
+    minHeight: rowMinHeight > 0 ? rowMinHeight : undefined,
     gap: 8
   };
   const hoverStyle = isHovered ? {
@@ -169,18 +180,15 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
     borderWidth: 1
   } : {};
 
-  // ⚠️ DO NOT change to an unconditional `lineHeight`, and do NOT put
-  // `minHeight: lineHeight` on this single-line input on iOS. Same contract as
-  // FormField / SuggestiveSearch — read before "simplifying".
+  // ⚠️ Same contract as FormField / SuggestiveSearch — do not "simplify".
   //
-  // facebook/react-native#39145 / #28012: on iOS, a single-line RN TextInput
-  // (UITextField) with `lineHeight` > font metrics puts ALL the extra space
-  // ABOVE the glyphs, so placeholder/value sink. Android/Web distribute evenly.
-  // RN's documented workaround (#39145) and #56774: omit `lineHeight` on
-  // single-line iOS inputs — UITextField centers natively — and let the
-  // wrapper (`alignItems: 'center'` + padding/icon) own vertical layout.
-  // Pinning `lineHeight` to `fontSize` is NOT a substitute; it clips custom
-  // font metrics and floats typed text above center.
+  // facebook/react-native#39145 / #28012 / #56774:
+  // Single-line iOS UITextField + `lineHeight` (or a tall field box) puts ALL
+  // extra space ABOVE the glyphs → placeholder/value sink. Documented fix:
+  // omit `lineHeight` on the single-line input; let the wrapper
+  // (`alignItems: 'center'` + `minHeight`) center it. UITextField centers
+  // natively when it is only as tall as its font. Do NOT pin lineHeight to
+  // fontSize (clips custom fonts / floats typed text).
   const textInputStyle = {
     flex: 1,
     color: textColor,