jfs-components 0.1.2 → 0.1.12

package/src/components/ComparisonBar/ComparisonBar.tsx

@@ -0,0 +1,356 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} 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 { usePressableWebSupport } from '../../utils/web-platform-utils'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+export type ComparisonBarItem = {
+  /**
+   * Stable identifier for this slot. Returned to callbacks so the consumer
+   * can target the exact item that was interacted with. Falls back to the
+   * array index when omitted.
+   */
+  id?: string | number
+  /**
+   * Image to render in the slot. When provided the slot renders in the
+   * "Image Added" state; when omitted/`null` it renders the empty "Add" state.
+   * Accepts the same shapes as the library `Image` component (remote URL
+   * string, `{ uri }`, or a `require()`d asset).
+   */
+  imageSource?: ImageSourcePropType | string | null
+  /** Accessibility label for the slot. Defaults to a generic add/remove label. */
+  accessibilityLabel?: string
+}
+
+export type ComparisonBarProps = {
+  /**
+   * The slots rendered before the Compare button. Each entry controls its own
+   * add/image state via {@link ComparisonBarItem.imageSource}.
+   */
+  items: ComparisonBarItem[]
+  /**
+   * Fired when an empty (Add) slot is tapped. The consumer is expected to react
+   * by opening whatever picker is appropriate and then updating that item's
+   * `imageSource` to flip it into the "Image Added" state — the component does
+   * not know how images are sourced. Receives the item's `id` (or index when no
+   * id was supplied) and the slot index.
+   */
+  onItemPress?: (id: ComparisonBarItem['id'], index: number) => void
+  /**
+   * Fired when a filled slot is tapped. For better mobile ergonomics the
+   * *entire* filled slot is the remove target (the dismiss capsule is just a
+   * visual affordance), so a fingertip anywhere on the item triggers this. The
+   * consumer is expected to clear that item's `imageSource` to return it to the
+   * "Add" state. Receives the item's `id` (or index) and the slot index.
+   */
+  onItemRemove?: (id: ComparisonBarItem['id'], index: number) => void
+  /** Fired when the Compare button is pressed. */
+  onCompare?: () => void
+  /** Label for the trailing action button. Defaults to `"Compare"`. */
+  compareLabel?: string
+  /**
+   * Explicitly controls the Compare button's *functional* disabled state — a
+   * truly disabled button is non-interactive (its `onPress` never fires), not
+   * just dimmed. Note that `modes` only affects appearance, so dimming the
+   * button via tokens does NOT stop taps; that is what this prop is for.
+   *
+   * When provided (a boolean), it always wins over
+   * {@link ComparisonBarProps.disableCompareWhenEmpty}. Leave it `undefined`
+   * to fall back to the auto behavior.
+   */
+  compareDisabled?: boolean
+  /**
+   * When `true` (default) the Compare button is automatically (and truly)
+   * disabled while no slot has an image — there is nothing to compare yet. Set
+   * to `false` to keep it tappable even when empty. Ignored when
+   * {@link ComparisonBarProps.compareDisabled} is set explicitly.
+   */
+  disableCompareWhenEmpty?: boolean
+  /** Mode configuration passed to the token resolver. */
+  modes?: Modes
+  /** Style overrides for the outer floating card. */
+  style?: StyleProp<ViewStyle>
+}
+
+const ITEM_WIDTH = 45
+const ITEM_HEIGHT = 44
+
+interface ComparisonBarTokens {
+  card: ViewStyle
+  item: ViewStyle
+  itemImageState: ViewStyle
+  imageRadius: number
+}
+
+function resolveTokens(modes: Modes): ComparisonBarTokens {
+  const cardGap = (getVariableByName('compareFloatCard/gap', modes) ?? 12) as number
+  const cardPadH = (getVariableByName('compareFloatCard/padding/horizontal', modes) ?? 12) as number
+  const cardPadV = (getVariableByName('compareFloatCard/padding/vertical', modes) ?? 10) as number
+  const cardRadius = (getVariableByName('compareFloatCard/radius', modes) ?? 12) as number
+  const cardBackground = (getVariableByName('compareFloatCard/background', modes) ?? '#ffffff') as string
+  const cardBorderColor = (getVariableByName('compareFloatCard/border/color', modes) ?? '#f5f5f5') as string
+
+  const itemPadH = (getVariableByName('compareCardItem/padding/horizontal', modes) ?? 6) as number
+  const itemPadV = (getVariableByName('compareCardItem/padding/vertical', modes) ?? 8) as number
+  const itemRadius = (getVariableByName('compareCardItem/radius', modes) ?? 8) as number
+  const itemBackground = (getVariableByName('compareCardItem/background', modes) ?? '#ebebed') as string
+
+  const imageRadius = (getVariableByName('image/radius', modes) ?? 8) as number
+
+  return {
+    card: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: cardGap,
+      paddingHorizontal: cardPadH,
+      paddingVertical: cardPadV,
+      borderRadius: cardRadius,
+      borderWidth: 1,
+      borderColor: cardBorderColor,
+      backgroundColor: cardBackground,
+      alignSelf: 'flex-start',
+    },
+    item: {
+      width: ITEM_WIDTH,
+      height: ITEM_HEIGHT,
+      borderRadius: itemRadius,
+      backgroundColor: itemBackground,
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    itemImageState: {
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+    },
+    imageRadius,
+  }
+}
+
+type AdditemProps = {
+  item: ComparisonBarItem
+  index: number
+  tokens: ComparisonBarTokens
+  addCapsuleModes: Modes
+  closeCapsuleModes: Modes
+  onPress?: ComparisonBarProps['onItemPress']
+  onRemove?: ComparisonBarProps['onItemRemove']
+}
+
+/**
+ * Internal slot renderer for {@link ComparisonBar}. Intentionally NOT exported
+ * — it is meaningless outside of a `ComparisonBar` (its layout, sizing and
+ * remove affordance all assume the surrounding card) and is kept private so
+ * the public surface stays a single, cohesive component.
+ */
+function Additem({ item, index, tokens, addCapsuleModes, closeCapsuleModes, onPress, onRemove }: AdditemProps) {
+  const hasImage = item.imageSource != null && item.imageSource !== ''
+  const id = item.id ?? index
+
+  const addWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onPress?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison',
+  })
+
+  const removeWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onRemove?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison',
+  })
+
+  if (!hasImage) {
+    return (
+      <Pressable
+        style={tokens.item}
+        accessibilityRole="button"
+        accessibilityLabel={item.accessibilityLabel ?? 'Add item to comparison'}
+        onPress={() => onPress?.(id, index)}
+        {...addWebProps}
+      >
+        <IconCapsule iconName="ic_add" modes={addCapsuleModes} style={ADD_CAPSULE_STYLE} />
+      </Pressable>
+    )
+  }
+
+  // Mobile-first: the entire filled slot is the remove target, not just the
+  // tiny close capsule (which a fingertip struggles to hit). The capsule stays
+  // purely as a visual affordance and is marked non-interactive so it never
+  // intercepts the press from the surrounding Pressable.
+  return (
+    <Pressable
+      style={[tokens.item, tokens.itemImageState]}
+      accessibilityRole="button"
+      accessibilityLabel={item.accessibilityLabel ?? 'Remove item from comparison'}
+      onPress={() => onRemove?.(id, index)}
+      {...removeWebProps}
+    >
+      <Image
+        imageSource={item.imageSource as any}
+        width="100%"
+        height="100%"
+        borderRadius={tokens.imageRadius}
+        resizeMode="cover"
+        accessibilityLabel={item.accessibilityLabel ?? 'Comparison item image'}
+      />
+      <View style={CLOSE_CAPSULE_WRAPPER_STYLE} pointerEvents="none">
+        <IconCapsule iconName="ic_close" modes={closeCapsuleModes} />
+      </View>
+    </Pressable>
+  )
+}
+
+// The Add capsule is the transparent IconCapsule variant from Figma (the gray
+// item box is the visible surface); its size/icon come from the resolved
+// `Icon Capsule Size: S` tokens, we only flatten the background/border here.
+const ADD_CAPSULE_STYLE: ViewStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+}
+
+// Positions the dismiss IconCapsule in the slot's top-right corner. The capsule
+// itself (size/background/icon) is fully token-driven via `closeCapsuleModes`.
+const CLOSE_CAPSULE_WRAPPER_STYLE: ViewStyle = {
+  position: 'absolute',
+  top: 1,
+  right: 1,
+}
+
+// Mode overrides applied on top of the consumer's `modes` for each capsule.
+// These mirror the Figma component's IconCapsule variant selections so the
+// sizing and colours come from design tokens instead of magic numbers.
+const ADD_CAPSULE_MODE_OVERRIDES: Modes = { 'Icon Capsule Size': 'XS' }
+const CLOSE_CAPSULE_MODE_OVERRIDES: Modes = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS',
+}
+
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+function ComparisonBar({
+  items,
+  onItemPress,
+  onItemRemove,
+  onCompare,
+  compareLabel = 'Compare',
+  compareDisabled,
+  disableCompareWhenEmpty = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+}: ComparisonBarProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+  // Capsule modes = consumer modes + this component's fixed IconCapsule variant
+  // selections. Memoized so each `Additem`'s `IconCapsule` keeps a stable
+  // `modes` identity and hits the resolver cache.
+  const addCapsuleModes = useMemo(
+    () => ({ ...modes, ...ADD_CAPSULE_MODE_OVERRIDES }),
+    [modes]
+  )
+  const closeCapsuleModes = useMemo(
+    () => ({ ...modes, ...CLOSE_CAPSULE_MODE_OVERRIDES }),
+    [modes]
+  )
+
+  // An explicit `compareDisabled` always wins (functional disable — the tap is
+  // truly blocked, not merely dimmed). Otherwise auto-disable while no slot has
+  // an image, since there is nothing to compare yet.
+  const hasAnyImage = useMemo(
+    () => items.some((it) => it.imageSource != null && it.imageSource !== ''),
+    [items]
+  )
+  const isCompareDisabled =
+    compareDisabled ?? (disableCompareWhenEmpty && !hasAnyImage)
+
+  return (
+    <View style={[tokens.card, style]}>
+      {items.map((item, index) => (
+        <Additem
+          key={item.id ?? index}
+          item={item}
+          index={index}
+          tokens={tokens}
+          addCapsuleModes={addCapsuleModes}
+          closeCapsuleModes={closeCapsuleModes}
+          onPress={onItemPress}
+          onRemove={onItemRemove}
+        />
+      ))}
+      <Button
+        label={compareLabel}
+        modes={modes}
+        disabled={isCompareDisabled}
+        {...(onCompare !== undefined ? { onPress: onCompare } : {})}
+      />
+    </View>
+  )
+}
+
+export default React.memo(ComparisonBar)

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

@@ -1,6 +1,8 @@
 import React, {
+    forwardRef,
     useCallback,
     useEffect,
+    useImperativeHandle,
     useMemo,
     useRef,
     useState,
@@ -22,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'
@@ -52,6 +54,28 @@ export type DropdownInputOption = {
 
 type Rect = { x: number; y: number; width: number; height: number }
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+export type DropdownInputHandle = {
+    /** Opens the options menu (no-op when disabled / read-only). */
+    open: () => void
+    /** Closes the options menu. */
+    close: () => void
+    /** Toggles the options menu open/closed. */
+    toggle: () => void
+    /** Moves focus to the trigger (web). */
+    focus: () => void
+    /** Removes focus from the trigger (web). */
+    blur: () => void
+    /** Measures the trigger in window coordinates. */
+    measureInWindow: (
+        callback: (x: number, y: number, width: number, height: number) => void
+    ) => void
+}
+
 export type DropdownInputProps = {
     /** Label rendered above the input. */
     label?: string
@@ -147,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
 }
 
 // ---------------------------------------------------------------------------
@@ -307,7 +337,7 @@ function collectOptionsFromChildren(
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = forwardRef<DropdownInputHandle, DropdownInputProps>(function DropdownInput({
     label,
     placeholder = 'Select an option',
     items,
@@ -338,7 +368,8 @@ function DropdownInput({
     accessibilityHint,
     onFocus,
     onBlur,
-}: DropdownInputProps) {
+    disableTruncation,
+}: DropdownInputProps, ref: React.Ref<DropdownInputHandle>) {
     // ---------------- Modes ----------------
     const { modes: globalModes } = useTokens()
     const baseModes = useMemo(
@@ -497,6 +528,34 @@ function DropdownInput({
         [measure]
     )
 
+    // ---------------- Imperative handle ----------------
+    useImperativeHandle(
+        ref,
+        () => ({
+            open: () => {
+                if (isDisabled || isReadOnly) return
+                measure()
+                setOpenState(true)
+            },
+            close: closeMenu,
+            toggle: () => {
+                if (isDisabled || isReadOnly) return
+                measure()
+                toggleMenu()
+            },
+            focus: () => {
+                ;(triggerRef.current as unknown as { focus?: () => void })?.focus?.()
+            },
+            blur: () => {
+                ;(triggerRef.current as unknown as { blur?: () => void })?.blur?.()
+            },
+            measureInWindow: (callback) => {
+                triggerRef.current?.measureInWindow(callback)
+            },
+        }),
+        [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]
+    )
+
     // ---------------- Popup positioning ----------------
     const [menuSize, setMenuSize] = useState<{
         width: number
@@ -777,7 +836,7 @@ function DropdownInput({
                             valueTextStyle,
                             !hasValue && { color: placeholderColor },
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {displayLabel}
                     </Text>
@@ -863,7 +922,7 @@ function DropdownInput({
             </Modal>
         </View>
     )
-}
+})
 
 const webNoOutline: any = {
     outlineStyle: 'none',

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