jfs-components 0.1.2 → 0.1.12

package/lib/module/components/Table/Table.js

@@ -0,0 +1,315 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, ScrollView, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+
+/* -------------------------------------------------------------------------------------------------
+ * Shared types & token resolution
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Resolved styling for a header cell and a body cell, derived from design tokens. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
+
+/**
+ * Resolve every token the table family needs in one place. Sub-components call
+ * this with their cascaded `modes` so they render correctly both inside a
+ * `Table` and when used standalone. Fallbacks mirror the Figma node values
+ * (`tableCell/*`, `tableHeader/*`) so the component is faithful even before the
+ * tokens are published to the local store.
+ */
+function resolveTableTokens(modes) {
+  const headerFontFamily = getVariableByName('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontSize = getVariableByName('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontWeight = getVariableByName('tableHeader/label/fontweight', modes) ?? 600;
+  const cellFontFamily = getVariableByName('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontSize = getVariableByName('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontWeight = getVariableByName('tableCell/label/fontweight', modes) ?? 400;
+  return {
+    headerBg: getVariableByName('tableHeader/background/color', modes) ?? '#f5f5f5',
+    headerPaddingH: getVariableByName('tableHeader/padding/horizontal', modes) ?? 12,
+    headerPaddingV: getVariableByName('tableHeader/padding/vertical', modes) ?? 12,
+    headerText: {
+      color: getVariableByName('tableHeader/label/color', modes) ?? '#000000',
+      fontFamily: headerFontFamily,
+      fontSize: headerFontSize,
+      fontWeight: toWeight(headerFontWeight),
+      lineHeight: 20
+    },
+    cellBg: getVariableByName('tableCell/background/color', modes) ?? '#ffffff',
+    cellPaddingH: getVariableByName('tableCell/padding/horizontal', modes) ?? 12,
+    cellPaddingV: getVariableByName('tableCell/padding/vertical', modes) ?? 12,
+    cellText: {
+      color: getVariableByName('tableCell/label/color', modes) ?? '#000000',
+      fontFamily: cellFontFamily,
+      fontSize: cellFontSize,
+      fontWeight: toWeight(cellFontWeight),
+      lineHeight: 20
+    },
+    borderColor: getVariableByName('tableCell/border/color', modes) ?? '#eeeeee',
+    borderSize: getVariableByName('tableCell/border/size', modes) ?? 1
+  };
+}
+const alignToJustify = align => align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start';
+
+/** Renders text children through the resolved label style; passes elements through untouched. */
+function renderCellContent(children, textStyle, align, modes) {
+  if (children == null || children === false) return null;
+  if (typeof children === 'string' || typeof children === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, {
+        textAlign: align
+      }],
+      children: children
+    });
+  }
+  return cloneChildrenWithModes(children, modes);
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Cell — body cell (Figma `table-cell`, node 603:23)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single body cell. White background with a bottom + right divider, matching
+ * the Figma `table-cell` sub-component. String/number children are rendered
+ * with the token label style; any element is rendered as-is.
+ */
+function TableCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  isLastColumn = false,
+  isLastRow = false,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: t.cellBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.cellPaddingH,
+      paddingVertical: t.cellPaddingV,
+      borderColor: t.borderColor,
+      borderBottomWidth: isLastRow ? 0 : t.borderSize,
+      borderRightWidth: isLastColumn ? 0 : t.borderSize,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.cellText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.HeaderCell — header cell (Figma `table header wrap`, node 603:21)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single header cell. Muted background with the bold token label style,
+ * matching the Figma `table header wrap` sub-component. Header cells carry no
+ * dividers; the header row draws a single bottom divider beneath them.
+ */
+function TableHeaderCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: t.headerBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.headerPaddingH,
+      paddingVertical: t.headerPaddingV,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.headerText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Header — row of header cells with a bottom divider
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableHeader({
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flexDirection: 'row',
+      width: '100%',
+      borderBottomWidth: t.borderSize,
+      borderBottomColor: t.borderColor
+    }, style],
+    children: cloneChildrenWithModes(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Row — row of body cells
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableRow({
+  children,
+  onPress,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const content = cloneChildrenWithModes(children, modes);
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      style: ({
+        pressed
+      }) => [rowStyle, pressed ? {
+        opacity: 0.6
+      } : null, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [rowStyle, style],
+    children: content
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Body — column container for rows
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableBody({
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: '100%'
+    }, style],
+    children: cloneChildrenWithModes(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table — root (Figma `Table`, node 5732:3710)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Column definition for the data-driven `Table` API. `T` is the shape of one
+ * row record.
+ */
+
+/**
+ * Table renders structured rows and columns. It supports two complementary
+ * usage styles that share the same token-driven styling:
+ *
+ * 1. **Data-driven** (recommended): pass `columns` + `data`. The header and body
+ *    are built for you, columns stay aligned, and per-column `align`/`width`/
+ *    `flex`/`render` give full control.
+ *
+ * 2. **Composition**: pass `Table.Header` / `Table.Body` / `Table.Row` /
+ *    `Table.Cell` / `Table.HeaderCell` as children for bespoke layouts. These
+ *    sub-components are also exported standalone.
+ *
+ * Implementation of Figma node `5732:3710` (`Table`) with sub-components
+ * `603:23` (`table-cell`) and `603:21` (`table header wrap`).
+ *
+ * @component
+ */
+function Table({
+  columns,
+  data,
+  children,
+  showHeader = true,
+  getRowKey,
+  onRowPress,
+  scrollable = false,
+  accessibilityLabel,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const isComposition = children != null;
+  const body = isComposition ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeader && columns && columns.length > 0 && /*#__PURE__*/_jsx(TableHeader, {
+      modes: modes,
+      children: columns.map(col => /*#__PURE__*/_jsx(TableHeaderCell, {
+        align: col.headerAlign ?? col.align ?? 'left',
+        width: col.width,
+        flex: col.flex ?? 1,
+        modes: modes,
+        children: col.header ?? col.key
+      }, col.key))
+    }), columns && data && data.length > 0 && /*#__PURE__*/_jsx(TableBody, {
+      modes: modes,
+      children: data.map((row, rowIndex) => {
+        const isLastRow = rowIndex === data.length - 1;
+        return /*#__PURE__*/_jsx(TableRow, {
+          onPress: onRowPress ? () => onRowPress(row, rowIndex) : undefined,
+          modes: modes,
+          children: columns.map((col, colIndex) => /*#__PURE__*/_jsx(TableCell, {
+            align: col.align ?? 'left',
+            width: col.width,
+            flex: col.flex ?? 1,
+            isLastColumn: colIndex === columns.length - 1,
+            isLastRow: isLastRow,
+            modes: modes,
+            children: col.render ? col.render(row, rowIndex) : row[col.key]
+          }, col.key))
+        }, getRowKey?.(row, rowIndex) ?? rowIndex);
+      })
+    })]
+  });
+  const container = /*#__PURE__*/_jsx(View, {
+    accessibilityRole: Platform.OS === 'web' ? 'table' : undefined,
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      overflow: 'hidden'
+    }, !scrollable && {
+      width: '100%'
+    }, style],
+    children: body
+  });
+  if (scrollable) {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: container
+    });
+  }
+  return container;
+}
+Table.Header = TableHeader;
+Table.HeaderCell = TableHeaderCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+export { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell };
+export default Table;

package/lib/module/components/Text/Text.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,6 +18,7 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
   loading,
   skeletonWidth,
   skeletonLines
@@ -70,7 +71,7 @@ function Text({
   const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/_jsx(RNText, {
     style: [textStyle, style],
-    numberOfLines: numberOfLines,
+    ...resolveTruncation(disableTruncation, numberOfLines),
     children: content
   });
 }

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

@@ -1,10 +1,10 @@
 "use strict";
 
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -95,7 +95,7 @@ function makePlaceholderColor(color, opacity = 0.5) {
   // Fallback: return original color
   return color;
 }
-function TextInput({
+const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -110,7 +110,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}) {
+}, ref) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -166,7 +166,15 @@ function TextInput({
     flex: 1,
     color: textColor,
     fontSize,
-    lineHeight,
+    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
+    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
+    // text/placeholder sits below center (iOS native font-metrics bug — see
+    // facebook/react-native#39145 / #28012). The container centers via
+    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
+    // (UITextField centers natively) and keep it on Android/Web where it's fine.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight
+    }),
     fontFamily,
     fontWeight,
     padding: 0,
@@ -225,7 +233,7 @@ function TextInput({
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/_jsx(RNTextInput, {
-      ref: inputRef,
+      ref: mergeRefs(inputRef, ref),
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,
@@ -258,7 +266,7 @@ function TextInput({
     style: containerStyleArray,
     children: inner
   });
-}
+});
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -280,7 +288,7 @@ function TextInput({
  * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
  */
 
-function TextInputSearch({
+const TextInputSearch = /*#__PURE__*/forwardRef(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -293,7 +301,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   // Resolve icon tokens for default search icon
   const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b';
   const iconSize = getVariableByName('textInput/icon/size', modes) || 18;
@@ -330,10 +338,15 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint;
   }
   return /*#__PURE__*/_jsx(TextInput, {
+    ref: ref,
     ...textInputProps
   });
-}
+});
+
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
 
-// Attach Search as a property of TextInput using namespace pattern
+const TextInput = TextInputBase;
 TextInput.Search = TextInputSearch;
 export default TextInput;

package/lib/module/components/TextSegment/TextSegment.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
+
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes) {
+  return {
+    color: getVariableByName('text/foreground', modes) ?? '#000000',
+    fontFamily: getVariableByName('text/fontFamily', modes) ?? 'JioType',
+    fontSize: getVariableByName('text/fontSize', modes) ?? 14,
+    fontWeight: String(getVariableByName('text/fontWeight', modes) ?? '500'),
+    lineHeight: getVariableByName('text/lineHeight', modes) ?? 20,
+    letterSpacing: getVariableByName('text/letterSpacing', modes) ?? -0.5
+  };
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  disableTruncation,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const baseStyle = useMemo(() => ({
+    ...resolveTextStyle(modes),
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  }), [modes, textAlign]);
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false;
+  const renderedSegments = useMemo(() => {
+    if (hasChildren || !segments?.length) return null;
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? {
+        ...modes,
+        ...run.modes
+      } : modes;
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined;
+      return /*#__PURE__*/_jsx(RNText, {
+        style: [runStyle, run.style],
+        children: run.text
+      }, index);
+    });
+  }, [segments, hasChildren, modes]);
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments;
+  return /*#__PURE__*/_jsx(RNText, {
+    style: [baseStyle, style],
+    ...resolveTruncation(disableTruncation, numberOfLines),
+    children: content
+  });
+}
+export default /*#__PURE__*/React.memo(TextSegment);

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -3,7 +3,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
@@ -14,7 +14,8 @@ export default function ThreadHero({
   caption,
   renderAvatar,
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // Container Gaps
   const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8;
@@ -95,14 +96,12 @@ export default function ThreadHero({
         children: title
       }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...resolveTruncation(disableTruncation, 1, 'tail'),
         children: subtitle
       }) : null]
     }), caption ? /*#__PURE__*/_jsx(Text, {
       style: captionStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       children: caption
     }) : null]
   });

package/lib/module/components/Title/Title.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -19,6 +19,7 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -88,7 +89,7 @@ function Title({
     ...rest,
     children: [/*#__PURE__*/_jsx(Text, {
       style: [titleTextStyle, textStyle],
-      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      ...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title

package/lib/module/components/Toast/Toast.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text } from 'react-native';
 import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { closeToast } from './useToast';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ANIMATION_DURATION = 250;
 function Toast({
@@ -15,7 +15,8 @@ function Toast({
   onClose,
   modes = EMPTY_MODES,
   placement = 'bottom',
-  style
+  style,
+  disableTruncation
 }) {
   const timerRef = useRef(null);
   useEffect(() => {
@@ -73,7 +74,7 @@ function Toast({
     accessibilityLiveRegion: "assertive",
     children: /*#__PURE__*/_jsx(Text, {
       style: textStyle,
-      numberOfLines: 2,
+      ...resolveTruncation(disableTruncation, 2),
       children: title
     })
   });

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue';
 import TransactionStatus from '../TransactionStatus/TransactionStatus';
 import NavArrow from '../NavArrow/NavArrow';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -40,6 +40,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const resolvedModes = {
@@ -109,7 +110,7 @@ function TransactionBubble({
       },
       children: [/*#__PURE__*/_jsx(Text, {
         style: descriptionStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: description
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: value,