jfs-components 0.1.8 → 0.1.12

package/lib/module/components/CardBankAccount/CardBankAccount.js

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { View, Text } 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 Badge from '../Badge/Badge';
 import Button from '../Button/Button';
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge';
@@ -66,7 +66,8 @@ function CardBankAccount({
   footer,
   modes: propModes = EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   // Merge caller modes on top of `DEFAULT_MODES` so every default key
   // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -183,7 +184,7 @@ function CardBankAccount({
           })
         }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/_jsx(Text, {
           style: valueTextStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: item.value
         }) : cloneChildrenWithModes(item.value, modes)]
       }, `${item.label}-${index}`))

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

@@ -10,8 +10,17 @@ import Button from '../Button/Button';
 import Badge from '../Badge/Badge';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import IconButton from '../IconButton/IconButton';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from '../Avatar/Avatar';
+
+/**
+ * Accepted `type` values. The canonical (and historical) values are lowercase
+ * (`'cta' | 'rating' | 'sip'`). The Figma variant names are PascalCase
+ * (`'CTA' | 'Rating' | 'Sip'`) — we accept those too and normalize internally
+ * so callers can pass either casing without a breaking change.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const optionalTokenAvailability = new Map();
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
 function getOptionalVariableByName(name, modes, fallback) {
   let isAvailable = optionalTokenAvailability.get(name);
   if (isAvailable === undefined) {
@@ -34,11 +43,16 @@ function CardCTA({
   showRatingActions = true,
   onPressLike,
   onPressDislike,
+  headline = 'Headline',
+  description = 'Description',
+  subtitle = 'Subtitle',
+  avatarSource,
   modes: propModes = EMPTY_MODES,
   iconSlot,
   buttonSlot,
   ratingBadgeSlot,
   ratingActionsSlot,
+  avatarSlot,
   style
 }) {
   const {
@@ -48,7 +62,10 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
-  const isRating = type === 'rating';
+  // Accept both lowercase (canonical) and Figma PascalCase variant names.
+  const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
+  const isRating = normalizedType === 'rating';
+  const isSip = normalizedType === 'sip';
   const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
   const radius = getVariableByName('cardCTA/radius', modes) || 12;
   const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
@@ -62,13 +79,13 @@ function CardCTA({
   const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10';
   const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var';
   const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18;
   const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
   const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d';
   const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 10;
-  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14;
+  const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17;
   const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400;
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
@@ -77,6 +94,33 @@ function CardCTA({
   const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16);
   const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0);
   const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12);
+
+  // Sip variant footer text block (Headline / Description / Subtitle). These
+  // `ccCard/*` tokens were introduced for the Sip layout — resolve them
+  // optionally so older token snapshots that lack them fall back gracefully.
+  const sipFooterGap = getOptionalVariableByName('ccCard/footer/textWrap/gap', modes, 4);
+  const sipHeadlineColor = getOptionalVariableByName('ccCard/headline/color', modes, '#707275');
+  const sipHeadlineFontFamily = getOptionalVariableByName('ccCard/headline/fontFamily', modes, 'JioType Var');
+  const sipHeadlineFontSize = getOptionalVariableByName('ccCard/headline/fontSize', modes, 10);
+  const sipHeadlineLineHeight = getOptionalVariableByName('ccCard/headline/lineHeight', modes, 13);
+  const sipHeadlineFontWeightRaw = getOptionalVariableByName('ccCard/headline/fontWeight', modes, 500);
+  const sipHeadlineFontWeight = typeof sipHeadlineFontWeightRaw === 'number' ? sipHeadlineFontWeightRaw.toString() : sipHeadlineFontWeightRaw;
+  const sipDescriptionColor = getOptionalVariableByName('ccCard/title/color', modes, '#081007');
+  const sipDescriptionFontFamily = getOptionalVariableByName('ccCard/title/fontFamily', modes, 'JioType Var');
+  const sipDescriptionFontSize = getOptionalVariableByName('ccCard/title/fontSize', modes, 14);
+  const sipDescriptionLineHeight = getOptionalVariableByName('ccCard/title/lineHeight', modes, 15);
+  const sipDescriptionFontWeightRaw = getOptionalVariableByName('ccCard/title/fontWeight', modes, 700);
+  const sipDescriptionFontWeight = typeof sipDescriptionFontWeightRaw === 'number' ? sipDescriptionFontWeightRaw.toString() : sipDescriptionFontWeightRaw;
+  const sipSubtitleColor = getOptionalVariableByName('ccCard/subtitle/color', modes, '#707275');
+  const sipSubtitleFontFamily = getOptionalVariableByName('ccCard/subtitle/fontFamily', modes, 'JioType Var');
+  const sipSubtitleFontSize = getOptionalVariableByName('ccCard/subtitle/fontSize', modes, 10);
+  const sipSubtitleLineHeight = getOptionalVariableByName('ccCard/subtitle/lineHeight', modes, 13);
+  const sipSubtitleFontWeightRaw = getOptionalVariableByName('ccCard/subtitle/fontWeight', modes, 500);
+  const sipSubtitleFontWeight = typeof sipSubtitleFontWeightRaw === 'number' ? sipSubtitleFontWeightRaw.toString() : sipSubtitleFontWeightRaw;
+  const avatarModes = {
+    ...modes,
+    'Avatar Size': 'L'
+  };
   const buttonModes = {
     ...modes,
     AppearanceBrand: 'Secondary',
@@ -93,25 +137,72 @@ function CardCTA({
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState(null);
   const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20;
   const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1;
-  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
-  const handleButtonLabelTextLayout = React.useCallback(event => {
-    const lines = event?.nativeEvent?.lines;
-    if (!Array.isArray(lines) || lines.length === 0) return;
-    const nextWidth = Math.ceil(lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0));
-    if (nextWidth <= 0) return;
-    setMeasuredButtonLabelWidth(currentWidth => {
-      if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
-        return currentWidth;
-      }
-      return nextWidth;
-    });
+  // Small safety pad so sub-pixel rounding between the measure pass and the
+  // rendered glyph run can never clip the final character.
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2 + 2);
+
+  // ROOT-CAUSE FIX for the Android "jumping button" feedback loop + clipping.
+  //
+  // Previously the *visible* label measured itself via `onTextLayout` and we
+  // fed that width straight back onto the same Button. Because the button is
+  // width-constrained by its parent, Android clamps the overflowing text and
+  // even character-breaks a single word ("Save" -> "Sav"/"e"); the re-applied
+  // width re-triggers layout, producing an endless ~60fps width oscillation.
+  //
+  // We now measure an *off-screen* copy of the label, laid out at an
+  // effectively unbounded width, so its reported single-line width is
+  // intrinsic and constant regardless of the button's applied width — the
+  // measurement can no longer depend on the value it produces, so the loop is
+  // impossible. Crucially the measurer reuses the Button's own resolved label
+  // styles (passed into `renderContent`), so the measured font matches the
+  // rendered font exactly and the width is never an under-estimate. The label
+  // is always a single line that overflows rather than wraps or truncates.
+  const handleMeasureTextLayout = React.useCallback(event => {
+    const line = event?.nativeEvent?.lines?.[0];
+    const width = line && typeof line.width === 'number' ? line.width : 0;
+    if (width <= 0) return;
+    setMeasuredButtonLabelWidth(currentWidth => currentWidth !== null && Math.abs(currentWidth - width) < 0.5 ? currentWidth : Math.ceil(width));
   }, []);
+
+  // Off-screen measurer wrapper: absolute + opacity 0 + pointerEvents none =>
+  // out of flow, invisible, never intercepts touches, zero layout impact.
+  const measurerWrapStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    opacity: 0
+  };
+
+  // Renders the visible single-line label (never wraps, never ellipsizes) plus
+  // the co-located off-screen measurer that shares the Button's exact label
+  // styles. `width: 9999` forces the measurer onto one line so `onTextLayout`
+  // reports the true intrinsic width.
+  const renderButtonContent = labelExtraStyle => labelStyles => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "clip",
+      style: [labelStyles, labelExtraStyle],
+      children: nonWrappingButtonLabel
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: measurerWrapStyle,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [labelStyles, {
+          width: 9999
+        }],
+        onTextLayout: handleMeasureTextLayout,
+        children: nonWrappingButtonLabel
+      })
+    })]
+  });
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: isRating ? 'column' : 'row',
+    flexDirection: isRating || isSip ? 'column' : 'row',
     overflow: 'visible'
   };
 
@@ -197,6 +288,47 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const sipWrapStyle = {
+    width: '100%',
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    overflow: 'visible'
+  };
+  const sipFooterTextWrapStyle = {
+    gap: sipFooterGap,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    minWidth: 0
+  };
+  const sipDescriptionWrapStyle = {
+    flexDirection: 'row',
+    gap: sipFooterGap,
+    alignItems: 'flex-end'
+  };
+  const sipHeadlineStyle = {
+    color: sipHeadlineColor,
+    fontFamily: sipHeadlineFontFamily,
+    fontSize: sipHeadlineFontSize,
+    lineHeight: sipHeadlineLineHeight,
+    fontWeight: toWeight(sipHeadlineFontWeightRaw)
+  };
+  const sipDescriptionStyle = {
+    color: sipDescriptionColor,
+    fontFamily: sipDescriptionFontFamily,
+    fontSize: sipDescriptionFontSize,
+    lineHeight: sipDescriptionLineHeight,
+    fontWeight: toWeight(sipDescriptionFontWeightRaw)
+  };
+  const sipSubtitleStyle = {
+    color: sipSubtitleColor,
+    fontFamily: sipSubtitleFontFamily,
+    fontSize: sipSubtitleFontSize,
+    lineHeight: sipSubtitleLineHeight,
+    fontWeight: toWeight(sipSubtitleFontWeightRaw)
+  };
   const ratingContentStyle = {
     paddingHorizontal: ratingContentPaddingH,
     paddingVertical: ratingContentPaddingV,
@@ -243,6 +375,52 @@ function CardCTA({
     flexShrink: 0,
     flexWrap: 'nowrap'
   };
+  if (isSip) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [containerStyle, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: sipWrapStyle,
+        children: [avatarSlot ? cloneChildrenWithModes(avatarSlot, avatarModes) : /*#__PURE__*/_jsx(Avatar, {
+          style: "Image",
+          imageSource: avatarSource,
+          modes: avatarModes
+        }), /*#__PURE__*/_jsxs(View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: sipFooterTextWrapStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: sipHeadlineStyle,
+            children: headline
+          }), /*#__PURE__*/_jsxs(View, {
+            style: sipDescriptionWrapStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: sipDescriptionStyle,
+              children: description
+            }), /*#__PURE__*/_jsx(Text, {
+              style: sipSubtitleStyle,
+              children: subtitle
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: buttonWrapStyle,
+          children: buttonSlot ? cloneChildrenWithModes(buttonSlot, buttonModes) : /*#__PURE__*/_jsx(Button, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: buttonStyle,
+            renderContent: renderButtonContent(buttonLabelStyle)
+          })
+        })]
+      })
+    });
+  }
   if (isRating) {
     return /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
@@ -270,11 +448,7 @@ function CardCTA({
             onPress: onPressButton || (() => {}),
             modes: buttonModes,
             style: ratingButtonStyle,
-            renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
-              onTextLayout: handleButtonLabelTextLayout,
-              style: [labelStyles, ratingButtonLabelStyle],
-              children: nonWrappingButtonLabel
-            })
+            renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
         }), showRatingActions ? ratingActionsSlot ? cloneChildrenWithModes(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/_jsxs(ButtonGroup, {
           modes: iconButtonModes,
@@ -315,11 +489,7 @@ function CardCTA({
           onPress: onPressButton || (() => {}),
           modes: buttonModes,
           style: buttonStyle,
-          renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
-            onTextLayout: handleButtonLabelTextLayout,
-            style: [labelStyles, buttonLabelStyle],
-            children: nonWrappingButtonLabel
-          })
+          renderContent: renderButtonContent(buttonLabelStyle)
         })
       })]
     }), /*#__PURE__*/_jsx(View, {

package/lib/module/components/CardInsight/CardInsight.js

@@ -31,7 +31,9 @@ function CardInsight({
   style
 }) {
   const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
-  const radius = getVariableByName('cardInsight/radius', modes) ?? 16;
+  const radius = getVariableByName('cardInsight/radius', modes) ?? 12;
+  const borderWidth = getVariableByName('cardInsight/borderWidth', modes) ?? 1;
+  const borderColor = getVariableByName('cardInsight/border/color', modes) ?? '#ffffff';
   const paddingHorizontal = getVariableByName('cardInsight/padding/horizontal', modes) ?? 12;
   const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
   const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
@@ -104,6 +106,8 @@ function CardInsight({
       width,
       backgroundColor: background,
       borderRadius: radius,
+      borderWidth,
+      borderColor,
       paddingHorizontal,
       paddingVertical,
       gap,

package/lib/module/components/CircularProgressBar/CircularProgressBar.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import Svg, { Circle } 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 { IconMinus } from '../../icons/components/IconMinus';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STROKE_WIDTH_RATIO = 8 / 60;
@@ -30,8 +30,11 @@ const toFontWeight = (value, fallback) => {
   return fallback;
 };
 const getStrokeColor = (style, fallback) => {
+  // `StyleSheet.flatten(undefined)` returns `undefined`, so guard before
+  // reading `backgroundColor` — otherwise omitting the optional style prop
+  // crashes with "Cannot read property 'backgroundColor' of undefined".
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return typeof flattened?.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBar({
   value = 70,
@@ -45,6 +48,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -169,11 +173,11 @@ function CircularProgressBar({
       pointerEvents: "none",
       children: [hasSupportText ? /*#__PURE__*/_jsx(Text, {
         style: [computedSupportTextStyle, supportTextStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: supportText
       }) : null, /*#__PURE__*/_jsx(Text, {
         style: [computedValueStyle, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: displayValue
       })]
     }) : /*#__PURE__*/_jsx(IconMinus, {

package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } 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 { IconChevronright } from '../../icons/components/IconChevronright';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_DOT_COUNT = 24;
@@ -31,7 +31,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getBackgroundColor = (style, fallback) => {
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function CircularProgressBarDoted({
   value = 72,
@@ -54,6 +54,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }) {
@@ -188,7 +189,7 @@ function CircularProgressBarDoted({
   };
   const trendContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: [computedTierLabelStyle, tierLabelStyle],
       children: tierLabel
     }), showChevron ? /*#__PURE__*/_jsx(IconChevronright, {

package/lib/module/components/CircularRating/CircularRating.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted';
 import Nudge from '../Nudge/Nudge';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,6 +90,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -129,7 +130,7 @@ function CircularRating({
       style: [tokens.footerStyle, footerStyle],
       children: processedFooterSlot || /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           style: [tokens.footerTextStyle, footerTextStyle],
           children: footerText
         }), showFooterIcon ? /*#__PURE__*/_jsx(Icon, {

package/lib/module/components/ClusterBubble/ClusterBubble.js

@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 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';
 
 /** Where the value/label text sits relative to the circle. */
 
@@ -83,7 +83,8 @@ function ClusterBubble({
   circleStyle,
   style,
   modes: propModes = EMPTY_MODES,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -130,7 +131,7 @@ function ClusterBubble({
     if (typeof node === 'string' || typeof node === 'number') {
       return /*#__PURE__*/_jsx(Text, {
         style: [baseStyle, override],
-        numberOfLines: 2,
+        ...resolveTruncation(disableTruncation, 2),
         children: node
       });
     }