jfs-components 0.1.56 → 0.1.58

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

package/lib/module/components/TextInput/TextInput.js

@@ -143,6 +143,14 @@ const TextInputBase = /*#__PURE__*/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',
@@ -152,7 +160,10 @@ const TextInputBase = /*#__PURE__*/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 ? {
@@ -163,18 +174,15 @@ const TextInputBase = /*#__PURE__*/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,