jfs-components 0.1.2 → 0.1.12

package/src/components/FormField/FormField.tsx

@@ -1,5 +1,6 @@
-import React, { 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'
@@ -301,7 +303,7 @@ function firstError(error: string | string[] | undefined): string | undefined {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = forwardRef<RNTextInput, FormFieldProps>(function FormField({
   label,
   placeholder,
   value,
@@ -329,7 +331,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID,
-}: FormFieldProps) {
+}: FormFieldProps, ref: React.Ref<RNTextInput>) {
   // -- Form context integration -------------------------------------------
   const formCtx = useFormContext()
   const formError =
@@ -347,6 +349,25 @@ 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 @@ 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 @@ function FormField({
 
   return (
     <View
+      ref={rootRef}
       style={[wrapperStyle, style]}
       pointerEvents={isDisabled ? 'none' : 'auto'}
       testID={testID}
@@ -552,6 +597,7 @@ function FormField({
           </View>
         )}
         <RNTextInput
+          ref={mergedInputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -590,6 +636,6 @@ function FormField({
       )}
     </View>
   )
-}
+})
 
 export default FormField

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/InputSearch/InputSearch.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native'
+import React, { forwardRef, useState } from 'react'
+import { View, Text, Pressable, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
@@ -81,7 +81,7 @@ export type InputSearchProps = {
     accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-export default function InputSearch({
+const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSearch({
     supportText = true,
     supportTextLabel = "Support Text",
     supportTextIcon = "ic_info",
@@ -96,7 +96,7 @@ export default function InputSearch({
     trailing,
     inputStyle,
     ...rest
-}: InputSearchProps) {
+}: InputSearchProps, ref: React.Ref<RNTextInput>) {
     const [isFocused, setIsFocused] = useState(false)
 
     // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -156,6 +156,7 @@ export default function InputSearch({
             gap: formFieldGap,
         }, containerStyle]}>
             <TextInput
+                ref={ref}
                 placeholder={placeholder}
                 value={value || ''}
                 onChangeText={onChangeText || (() => { })}
@@ -178,4 +179,6 @@ export default function InputSearch({
             )}
         </View>
     )
-}
+})
+
+export default InputSearch

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"
         >

package/src/components/ListItem/ListItem.tsx

@@ -13,7 +13,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 type ListItemProps = {
@@ -45,6 +45,12 @@ type ListItemProps = {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * 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;
 } & React.ComponentProps<typeof View>;
 
 // ---------------------------------------------------------------------------
@@ -230,6 +236,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: ListItemProps) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes])
@@ -314,7 +321,7 @@ function ListItemImpl({
             ? [tokens.supportTextStyle, verticalSupportTextOverride]
             : tokens.supportTextStyle
         }
-        numberOfLines={layout === 'Horizontal' ? 2 : undefined}
+        {...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined)}
       >
         {displayText}
       </Text>
@@ -382,7 +389,7 @@ function ListItemImpl({
         >
           <Text
             style={tokens.titleTextStyle}
-            numberOfLines={1}
+            {...resolveTruncation(disableTruncation, 1)}
           >
             {title}
           </Text>

package/src/components/MediaCard/MediaCard.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react'
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
-import GlassFill, { type GlassTint } from './GlassFill'
+import GlassFill, { type GlassTint } from '../../utils/GlassFill/GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -225,7 +225,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
             ]}
             pointerEvents="box-none"
         >
-            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} />
+            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} webBlurScale={0.3} webBlurMaxPx={30} />
 
             <View
                 style={{

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -7,7 +7,7 @@ import {
     type TextStyle,
 } 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 type { Modes } from '../../design-tokens'
 
 export type MetricLegendItemProps = {
@@ -39,6 +39,12 @@ export type MetricLegendItemProps = {
     labelStyle?: StyleProp<TextStyle>
     /** Override the value text styles. */
     valueStyle?: StyleProp<TextStyle>
+    /**
+     * 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
 }
 
 /**
@@ -59,6 +65,7 @@ function MetricLegendItem({
     indicatorStyle,
     labelStyle,
     valueStyle,
+    disableTruncation,
 }: MetricLegendItemProps) {
     const gap = (getVariableByName('metricLegendItem/gap', modes) as number | null) ?? 4
     const textWrapGap =
@@ -169,7 +176,7 @@ function MetricLegendItem({
                             },
                             valueStyle,
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {value}
                     </Text>

package/src/components/MonthlyStatusGrid/MonthlyStatusGrid.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 } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 
@@ -83,6 +83,12 @@ export type MonthlyStatusGridProps = {
   legendStyle?: StyleProp<ViewStyle>
   /** 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
 }
 
 const DEFAULT_MONTH_LABELS: readonly string[] = [
@@ -170,6 +176,12 @@ export type CalendarGlyphProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `"{label}, {status}"`. */
   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
 }
 
 /**
@@ -186,6 +198,7 @@ function CalendarGlyph({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: CalendarGlyphProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -244,7 +257,7 @@ function CalendarGlyph({
       ]}
     >
       <Text
-        numberOfLines={1}
+        {...resolveTruncation(disableTruncation, 1)}
         style={[
           {
             color: foreground,
@@ -312,6 +325,7 @@ function MonthlyStatusGrid({
   labelStyle,
   legendStyle,
   accessibilityLabel,
+  disableTruncation,
 }: MonthlyStatusGridProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -391,6 +405,7 @@ function MonthlyStatusGrid({
                   label={label}
                   status={month.status}
                   modes={glyphModes}
+                  disableTruncation={disableTruncation}
                   {...(glyphStyle !== undefined ? { style: glyphStyle } : {})}
                   {...(labelStyle !== undefined ? { labelStyle } : {})}
                   {...(month.accessibilityLabel !== undefined

package/src/components/NoteInput/NoteInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { forwardRef, useState, useRef } from 'react'
 import {
     View,
     TextInput as RNTextInput,
@@ -11,7 +11,7 @@ import {
     type TextInputProps,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, mergeRefs } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type NoteInputProps = {
@@ -35,7 +35,7 @@ export type NoteInputProps = {
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({
+const NoteInput = forwardRef<RNTextInput, NoteInputProps>(function NoteInput({
     value = '',
     placeholder = 'Add note',
     onChangeText,
@@ -46,7 +46,7 @@ export default function NoteInput({
     onFocus,
     onBlur,
     ...rest
-}: NoteInputProps) {
+}: NoteInputProps, ref: React.Ref<RNTextInput>) {
     const [internalFocused, setInternalFocused] = useState(false)
     const inputRef = useRef<RNTextInput>(null)
 
@@ -120,7 +120,7 @@ export default function NoteInput({
                     {internalFocused ? (value || ' ') : (value || placeholder)}
                 </Text>
                 <RNTextInput
-                    ref={inputRef}
+                    ref={mergeRefs(inputRef, ref)}
                     value={value}
                     onChangeText={onChangeText}
                     placeholder={internalFocused ? '' : placeholder}
@@ -145,4 +145,6 @@ export default function NoteInput({
             </View>
         </Pressable>
     )
-}
+})
+
+export default NoteInput