jfs-components 0.1.8 → 0.1.12

package/src/components/CompareTable/CompareTable.tsx

@@ -10,8 +10,9 @@ import {
     type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Accordion from '../Accordion/Accordion'
+import Table from '../Table/Table'
 import Image from '../Image/Image'
 import IconButton from '../IconButton/IconButton'
 import Icon from '../../icons/Icon'
@@ -133,6 +134,12 @@ export type CompareTableProps = {
     modes?: Modes;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 
 const DEFAULT_COLUMNS: CompareTableColumn[] = [
@@ -173,6 +180,7 @@ function CompareTable({
     maxColumns = 4,
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
     const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
@@ -186,6 +194,11 @@ function CompareTable({
     const cardLabelFontFamily = (getVariableByName('selectionCard/label/fontfamily', modes) as string) ?? 'JioType Var'
     const cardLabelFontWeight = (getVariableByName('selectionCard/label/fontweight', modes) as number | string) ?? 700
     const imageRadius = (getVariableByName('image/radius', modes) as number) ?? 8
+    // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
+    // The published token store is still out of sync (the variable resolves to
+    // `0` in the design), so the read falls back to `0` and will pick up a
+    // rounded value automatically once the store syncs.
+    const cardRadius = (getVariableByName('selectionCard/radius', modes) as number) ?? 0
 
     // --- add-a-card icon button tokens ---------------------------------------
     // padding/size/border come from the shared iconButton tokens; the filled
@@ -195,6 +208,9 @@ function CompareTable({
     const addBorderSize = (getVariableByName('iconButton/border/size', modes) as number) ?? 1
     const addPadding = (getVariableByName('iconButton/padding', modes) as number) ?? 11
     const addIconSize = (getVariableByName('iconButton/icon/size', modes) as number) ?? 18
+    // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+    // circle"), mirroring IconButton's own resolution.
+    const addRadius = (getVariableByName('iconButton/radius', modes) as number) ?? 9999
     const addBg = ADD_BUTTON_BG
     const addIconColor = ADD_BUTTON_ICON_COLOR
 
@@ -220,6 +236,8 @@ function CompareTable({
 
     const columnCount = columns.length
     const showAddCard = onAddColumn != null && columnCount < maxColumns
+    /** Grid columns shared by the selection-card row and every table row. */
+    const gridColumnCount = columnCount + (showAddCard ? 1 : 0)
 
     const cardLabelStyle: TextStyle = {
         ...NO_WRAP_TEXT,
@@ -259,6 +277,7 @@ function CompareTable({
         minWidth: 0,
         minHeight: 147,
         backgroundColor: cardBg,
+        borderRadius: cardRadius,
         alignItems: 'center',
         justifyContent: 'center',
         gap: cardGap,
@@ -292,7 +311,7 @@ function CompareTable({
                     />
                 )}
                 {column.label != null && (
-                    <Text style={cardLabelStyle} numberOfLines={2}>
+                    <Text style={cardLabelStyle} {...resolveTruncation(disableTruncation, 2)}>
                         {column.label}
                     </Text>
                 )}
@@ -334,7 +353,7 @@ function CompareTable({
                 style={{
                     width: addPadding * 2 + addIconSize,
                     height: addPadding * 2 + addIconSize,
-                    borderRadius: 9999,
+                    borderRadius: addRadius,
                     borderWidth: addBorderSize,
                     borderColor: addBorderColor,
                     backgroundColor: addBg,
@@ -350,7 +369,7 @@ function CompareTable({
                     importantForAccessibility="no"
                 />
             </View>
-            <Text style={cardLabelStyle} numberOfLines={1}>
+            <Text style={cardLabelStyle} {...resolveTruncation(disableTruncation, 1)}>
                 {addColumnLabel}
             </Text>
         </Pressable>
@@ -380,61 +399,91 @@ function CompareTable({
         return cloneChildrenWithModes(value, modes)
     }
 
+    // Renders a section's comparison grid using the shared `Table` component.
+    // CompareTable keeps ownership of token resolution and passes the resolved
+    // values as style overrides so the appearance is byte-identical to the
+    // previous hand-rolled grid (full outer border + suppressed last-edge
+    // dividers), while reusing Table's structure and `modes` cascade.
+    //
+    // When the "Add a card" tile is visible, each table row appends an empty
+    // trailing cell with the same flex weight so data columns stay 1:1 beneath
+    // their selection card.
+    const renderTableCell = (
+        content: React.ReactNode,
+        colIndex: number,
+        isLastRow: boolean,
+        key: React.Key,
+    ) => {
+        const isLastCol = colIndex === gridColumnCount - 1
+        return (
+            <Table.Cell
+                key={key}
+                modes={modes}
+                flex={1}
+                align="left"
+                isLastColumn={isLastCol}
+                isLastRow={isLastRow}
+                style={{
+                    backgroundColor: cellBg,
+                    borderColor: cellBorderColor,
+                    borderRightWidth: isLastCol ? 0 : cellBorderSize,
+                    borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+                    paddingHorizontal: cellPaddingH,
+                    paddingVertical: cellPaddingV,
+                }}
+            >
+                {content}
+            </Table.Cell>
+        )
+    }
+
     const renderTable = (section: CompareTableSection) => (
-        <View
+        <Table
+            modes={modes}
             style={{
                 width: '100%',
                 borderWidth: cellBorderSize,
                 borderColor: cellBorderColor,
-                overflow: 'hidden',
             }}
         >
             {section.header != null && (
-                <View
-                    style={{
-                        backgroundColor: headerBg,
-                        paddingHorizontal: headerPaddingH,
-                        paddingVertical: headerPaddingV,
-                        borderBottomWidth: cellBorderSize,
-                        borderBottomColor: cellBorderColor,
-                    }}
+                <Table.Header
+                    modes={modes}
+                    style={{ borderBottomWidth: cellBorderSize, borderBottomColor: cellBorderColor }}
                 >
-                    <Text style={headerTextStyle}>{section.header}</Text>
-                </View>
-            )}
-            {section.rows.map((row, rowIndex) => {
-                const isLastRow = rowIndex === section.rows.length - 1
-                return (
-                    <View
-                        key={row.key ?? rowIndex}
-                        style={{ flexDirection: 'row', width: '100%' }}
+                    <Table.HeaderCell
+                        modes={modes}
+                        flex={1}
+                        style={{
+                            backgroundColor: headerBg,
+                            paddingHorizontal: headerPaddingH,
+                            paddingVertical: headerPaddingV,
+                        }}
                     >
-                        {Array.from({ length: columnCount }).map((_, colIndex) => {
-                            const isLastCol = colIndex === columnCount - 1
-                            return (
-                                <View
-                                    key={colIndex}
-                                    style={{
-                                        flex: 1,
-                                        minWidth: 0,
-                                        backgroundColor: cellBg,
-                                        justifyContent: 'center',
-                                        paddingHorizontal: cellPaddingH,
-                                        paddingVertical: cellPaddingV,
-                                        borderRightWidth: isLastCol ? 0 : cellBorderSize,
-                                        borderRightColor: cellBorderColor,
-                                        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
-                                        borderBottomColor: cellBorderColor,
-                                    }}
-                                >
-                                    {renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)}
-                                </View>
-                            )
-                        })}
-                    </View>
-                )
-            })}
-        </View>
+                        <Text style={headerTextStyle}>{section.header}</Text>
+                    </Table.HeaderCell>
+                </Table.Header>
+            )}
+            <Table.Body modes={modes}>
+                {section.rows.map((row, rowIndex) => {
+                    const isLastRow = rowIndex === section.rows.length - 1
+                    return (
+                        <Table.Row key={row.key ?? rowIndex} modes={modes}>
+                            {Array.from({ length: columnCount }).map((_, colIndex) =>
+                                renderTableCell(
+                                    renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`),
+                                    colIndex,
+                                    isLastRow,
+                                    colIndex,
+                                ),
+                            )}
+                            {showAddCard &&
+                                renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')}
+                        </Table.Row>
+                    )
+                })}
+            </Table.Body>
+        </Table>
     )
 
     return (
@@ -464,7 +513,6 @@ function CompareTable({
                         title={section.title}
                         defaultExpanded={section.defaultExpanded ?? index === 0}
                         modes={modes}
-                        style={{ paddingHorizontal: headerPaddingH }}
                     >
                         {renderTable(section)}
                     </Accordion>

package/src/components/CoverageBarComparison/CoverageBarComparison.tsx

@@ -10,7 +10,7 @@ import {
 import Svg, { Rect } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 
@@ -97,6 +97,12 @@ export type CoverageBarComparisonProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label for the entire component. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 /**
@@ -221,6 +227,7 @@ function CoverageBarComparison({
   legendStyle,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: CoverageBarComparisonProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -331,7 +338,7 @@ function CoverageBarComparison({
             >
               {hasLabel ? (
                 <Text
-                  numberOfLines={1}
+                  {...resolveTruncation(disableTruncation, 1)}
                   style={[computedLabelStyle, labelStyle]}
                 >
                   {original.label}

package/src/components/DonutChart/DonutChart.tsx

@@ -10,7 +10,7 @@ import {
 import Svg, { Circle } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -83,6 +83,12 @@ export type DonutChartProps = {
     labelStyle?: StyleProp<TextStyle>
     /** Accessibility label announced for the whole donut chart. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_APPEARANCE_CYCLE = [
@@ -222,6 +228,7 @@ function DonutChart({
     valueStyle,
     labelStyle,
     accessibilityLabel,
+    disableTruncation,
 }: DonutChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
@@ -388,7 +395,7 @@ function DonutChart({
                                 },
                                 valueStyle,
                             ]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {value}
                         </Text>
@@ -406,7 +413,7 @@ function DonutChart({
                                 },
                                 labelStyle,
                             ]}
-                            numberOfLines={1}
+                            {...resolveTruncation(disableTruncation, 1)}
                         >
                             {label}
                         </Text>

package/src/components/Dropdown/Dropdown.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
@@ -57,6 +57,12 @@ export type DropdownItemProps = {
     accessibilityLabel?: string
     /** Accessibility hint. */
     accessibilityHint?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 function useDropdownItemTokens(modes: Modes) {
@@ -128,6 +134,7 @@ export function DropdownItem({
     labelStyle,
     accessibilityLabel,
     accessibilityHint,
+    disableTruncation,
 }: DropdownItemProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(
@@ -226,7 +233,7 @@ export function DropdownItem({
             {children != null ? (
                 children
             ) : (
-                <Text style={[textStyle, labelStyle]} numberOfLines={1}>
+                <Text style={[textStyle, labelStyle]} {...resolveTruncation(disableTruncation, 1)}>
                     {label}
                 </Text>
             )}

package/src/components/DropdownInput/DropdownInput.tsx

@@ -24,7 +24,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
@@ -171,6 +171,12 @@ export type DropdownInputProps = {
     onFocus?: (e: any) => void
     /** Called when the trigger loses focus (web only). */
     onBlur?: (e: any) => void
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 // ---------------------------------------------------------------------------
@@ -362,6 +368,7 @@ const DropdownInput = forwardRef<DropdownInputHandle, DropdownInputProps>(functi
     accessibilityHint,
     onFocus,
     onBlur,
+    disableTruncation,
 }: DropdownInputProps, ref: React.Ref<DropdownInputHandle>) {
     // ---------------- Modes ----------------
     const { modes: globalModes } = useTokens()
@@ -829,7 +836,7 @@ const DropdownInput = forwardRef<DropdownInputHandle, DropdownInputProps>(functi
                             valueTextStyle,
                             !hasValue && { color: placeholderColor },
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {displayLabel}
                     </Text>

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -35,6 +35,12 @@ export type ExpandableCheckboxProps = {
   readLessLabel?: string
   /** Number of lines to show when collapsed. Defaults to `1`. */
   collapsedLines?: number
+  /**
+   * When `true`, disables truncation of the collapsed label: the trailing
+   * ellipsis (`…`) is never shown and the `collapsedLines` clamp is ignored, so
+   * the label wraps fully even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
   modes?: Modes
   /** Override outer container styles. */
@@ -96,6 +102,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = EMPTY_MODES,
   style,
   labelStyle,
@@ -205,7 +212,7 @@ function ExpandableCheckbox({
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
 
   const labelNumberOfLinesProps =
-    !isExpanded && collapsedLines > 0
+    !disableTruncation && !isExpanded && collapsedLines > 0
       ? { numberOfLines: collapsedLines, ellipsizeMode: 'tail' as const }
       : null
 

package/src/components/FormField/FormField.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useCallback, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
 import {
+  Platform,
   View,
   Text,
   TextInput as RNTextInput,
@@ -10,7 +11,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils'
+import { useWebOutsidePress } from '../../utils/web-platform-utils'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Icon from '../../icons/Icon'
@@ -347,6 +349,25 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
   const [isFocused, setIsFocused] = useState(false)
   const interactive = !isDisabled && !isReadOnly
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = useRef<RNTextInput>(null)
+  const rootRef = useRef<View>(null)
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref])
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  useWebOutsidePress(
+    rootRef,
+    useCallback(() => inputRef.current?.blur(), []),
+    isFocused,
+  )
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -478,7 +499,30 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
       color: tokens.inputTextColor,
       fontFamily: tokens.inputFontFamily,
       fontSize: tokens.inputFontSize,
-      lineHeight: tokens.inputLineHeight,
+      // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+      // This has regressed twice — read this before "simplifying" it.
+      //
+      // `inputLineHeight` comes from the Figma token `formField/input/label`
+      // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+      // HEIGHT, not the text leading. The row height is already applied via
+      // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+      // needs this value as its own `lineHeight`.
+      //
+      // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+      // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+      // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+      // bottom of the box instead of centering. Android and Web distribute the
+      // space evenly and look correct. This is a long-standing iOS native
+      // font-metrics bug in UITextField — see facebook/react-native#39145 and
+      // #28012; the documented workaround is exactly "drop lineHeight on the
+      // single-line input and let a wrapper center it". A single-line UITextField
+      // with no lineHeight centers its text natively (see react-native#56774).
+      //
+      // So: omit lineHeight on iOS (native centering via the row), and keep the
+      // token value on Android/Web where it already renders correctly.
+      ...(Platform.OS === 'ios'
+        ? null
+        : { lineHeight: tokens.inputLineHeight }),
       fontWeight: tokens.inputFontWeight,
       padding: 0,
       margin: 0,
@@ -530,6 +574,7 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
 
   return (
     <View
+      ref={rootRef}
       style={[wrapperStyle, style]}
       pointerEvents={isDisabled ? 'none' : 'auto'}
       testID={testID}
@@ -552,7 +597,7 @@ const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
           </View>
         )}
         <RNTextInput
-          ref={ref}
+          ref={mergedInputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}

package/src/components/Gauge/Gauge.tsx

@@ -91,7 +91,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 
 const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
   const flattened = StyleSheet.flatten(style)
-  return typeof flattened.backgroundColor === 'string'
+  return flattened && typeof flattened.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Radio from '../Radio/Radio'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export interface HoldingsCardDetailItem {
@@ -39,6 +39,12 @@ export interface HoldingsCardProps {
     style?: StyleProp<ViewStyle>
     /** Test ID for testing. */
     testID?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const GRID_COLUMNS = 3
@@ -62,6 +68,7 @@ export default function HoldingsCard({
     modes = EMPTY_MODES,
     style,
     testID,
+    disableTruncation,
 }: HoldingsCardProps) {
     // ---- Container tokens ----
     const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5'
@@ -268,7 +275,7 @@ export default function HoldingsCard({
                                             lineHeight: detailValueLineHeight,
                                             fontWeight: detailValueFontWeight as any,
                                         }}
-                                        numberOfLines={1}
+                                        {...resolveTruncation(disableTruncation, 1)}
                                     >
                                         {item.value}
                                     </Text>

package/src/components/InstitutionBadge/InstitutionBadge.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import type { Modes } from '../../design-tokens'
 
@@ -43,6 +43,12 @@ export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `label`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 interface InstitutionBadgeTokens {
@@ -155,6 +161,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: InstitutionBadgeProps) {
   const { modes: globalModes } = useTokens()
@@ -207,7 +214,7 @@ function InstitutionBadge({
           />
         </View>
       )}
-      <Text style={[tokens.labelStyle, labelStyle]} numberOfLines={1}>
+      <Text style={[tokens.labelStyle, labelStyle]} {...resolveTruncation(disableTruncation, 1)}>
         {label}
       </Text>
     </View>

package/src/components/ListGroup/ListGroup.tsx

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 type ListGroupProps = {
@@ -17,6 +17,12 @@ type ListGroupProps = {
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'children'>;
 
 /**
@@ -52,6 +58,7 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }: ListGroupProps) {
   // Resolve container tokens
@@ -113,7 +120,7 @@ function ListGroup({
       {label ? (
         <Text
           style={[labelStyle, processedSlot && { marginBottom: gap }]}
-          numberOfLines={1}
+          {...resolveTruncation(disableTruncation, 1)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >