jfs-components 0.1.2 → 0.1.12

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle
 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 type { Modes } from '../../design-tokens'
 
@@ -40,6 +40,12 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
   supportTextStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole progress 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
 }
 
 const STROKE_WIDTH_RATIO = 8 / 60
@@ -72,8 +78,11 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 }
 
 const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  // `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'
+  return typeof flattened?.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }
@@ -90,6 +99,7 @@ function CircularProgressBar({
   valueStyle,
   supportTextStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CircularProgressBarProps) {
   const { modes: globalModes } = useTokens()
@@ -232,11 +242,11 @@ function CircularProgressBar({
       {isActive ? (
         <View style={textStackStyle} pointerEvents="none">
           {hasSupportText ? (
-            <Text style={[computedSupportTextStyle, supportTextStyle]} numberOfLines={1}>
+            <Text style={[computedSupportTextStyle, supportTextStyle]} {...resolveTruncation(disableTruncation, 1)}>
               {supportText}
             </Text>
           ) : null}
-          <Text style={[computedValueStyle, valueStyle]} numberOfLines={1}>
+          <Text style={[computedValueStyle, valueStyle]} {...resolveTruncation(disableTruncation, 1)}>
             {displayValue}
           </Text>
         </View>

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -11,7 +11,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 { IconChevronright } from '../../icons/components/IconChevronright'
 import type { Modes } from '../../design-tokens'
 
@@ -58,6 +58,12 @@ export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps &
   tierLabelStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole progress 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
 }
 
 const DEFAULT_DOT_COUNT = 24
@@ -92,7 +98,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 
 const getBackgroundColor = (style: StyleProp<ViewStyle>, fallback: string) => {
   const flattened = StyleSheet.flatten(style)
-  return typeof flattened.backgroundColor === 'string'
+  return flattened && typeof flattened.backgroundColor === 'string'
     ? flattened.backgroundColor
     : fallback
 }
@@ -118,6 +124,7 @@ function CircularProgressBarDoted({
   scoreLabelStyle,
   tierLabelStyle,
   accessibilityLabel,
+  disableTruncation,
   onLayout,
   ...rest
 }: CircularProgressBarDotedProps) {
@@ -277,7 +284,7 @@ function CircularProgressBarDoted({
 
   const trendContent = (
     <>
-      <Text numberOfLines={1} style={[computedTierLabelStyle, tierLabelStyle]}>
+      <Text {...resolveTruncation(disableTruncation, 1)} style={[computedTierLabelStyle, tierLabelStyle]}>
         {tierLabel}
       </Text>
       {showChevron ? (

package/src/components/CircularRating/CircularRating.tsx

@@ -9,7 +9,7 @@ import {
 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 type { Modes } from '../../design-tokens'
@@ -57,6 +57,12 @@ export type CircularRatingProps = CircularRatingBaseProps & {
   nudgeStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the whole 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
 }
 
 interface CircularRatingTokens {
@@ -161,6 +167,7 @@ function CircularRating({
   footerTextStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }: CircularRatingProps) {
   const { modes: globalModes } = useTokens()
@@ -207,7 +214,7 @@ function CircularRating({
       <View style={[tokens.footerStyle, footerStyle]}>
         {processedFooterSlot || (
           <>
-            <Text numberOfLines={1} style={[tokens.footerTextStyle, footerTextStyle]}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={[tokens.footerTextStyle, footerTextStyle]}>
               {footerText}
             </Text>
             {showFooterIcon ? (

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -11,7 +11,7 @@ import {
 } 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 type { Modes } from '../../design-tokens'
 
 /** Where the value/label text sits relative to the circle. */
@@ -76,6 +76,12 @@ export type ClusterBubbleProps = {
     modes?: Modes
     /** Accessibility label. Defaults to a `value + label` composite. */
     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_FILL = '#5d00b5'
@@ -149,6 +155,7 @@ function ClusterBubble({
     style,
     modes: propModes = EMPTY_MODES,
     accessibilityLabel,
+    disableTruncation,
 }: ClusterBubbleProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
@@ -207,7 +214,7 @@ function ClusterBubble({
         if (node === undefined || node === null || node === false) return null
         if (typeof node === 'string' || typeof node === 'number') {
             return (
-                <Text style={[baseStyle, override]} numberOfLines={2}>
+                <Text style={[baseStyle, override]} {...resolveTruncation(disableTruncation, 2)}>
                     {node}
                 </Text>
             )