jfs-components 0.0.79 → 0.0.84

package/src/components/Drawer/Drawer.tsx

@@ -439,6 +439,10 @@ function Drawer({
               style={[styles.content, contentStyle]}
               contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
               showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              // Let a tap on an input inside the sheet focus it on the FIRST tap
+              // even while the keyboard is already open (default 'never' would
+              // eat that tap just to dismiss the keyboard).
+              keyboardShouldPersistTaps="handled"
               animatedProps={animatedScrollProps}
               alwaysBounceVertical={false}
               overScrollMode="always"

package/src/components/DropdownInput/DropdownInput.tsx

@@ -117,8 +117,9 @@ export type DropdownInputProps = {
      */
     menuMaxHeight?: number
     /**
-     * Pixel offset between the trigger and the popup. Defaults to 4 so the
-     * popup visually peeks below the input.
+     * Pixel gap between the trigger and the popup. When omitted, it defaults
+     * to the `formField/gap` design token so the menu sits the same distance
+     * below the input as the rest of the field's internal spacing.
      */
     menuOffset?: number
     /**
@@ -325,7 +326,7 @@ function DropdownInput({
     supportText,
     errorMessage,
     menuMaxHeight = 240,
-    menuOffset = 6,
+    menuOffset,
     matchTriggerWidth = true,
     closeOnBackdropPress = true,
     modes: propModes = EMPTY_MODES,
@@ -422,11 +423,30 @@ function DropdownInput({
     const tokens = useFormFieldTokens(modes)
     const chevron = useChevronTokens(modes)
 
+    // Gap between the input and the popup. Falls back to the `formField/gap`
+    // token so the menu's offset matches the field's own internal spacing.
+    const effectiveMenuOffset = menuOffset ?? tokens.gap
+
     // ---------------- Layout / measurement ----------------
     const triggerRef = useRef<View>(null)
     const [triggerRect, setTriggerRect] = useState<Rect | null>(null)
     const insets = useSafeAreaInsets()
 
+    // Android coordinate-space bridge.
+    //
+    // The popup lives inside a `statusBarTranslucent` Modal, whose window is
+    // laid out from the PHYSICAL top of the screen (behind the status bar).
+    // The trigger, however, is rendered inside the app's content area (Expo
+    // Router / react-native-screens under edge-to-edge), so its
+    // `measureInWindow` Y is relative to the content area — it does NOT include
+    // the status bar height. Feeding that Y straight into the Modal would place
+    // the popup one status-bar-height too high, landing it on top of the input.
+    //
+    // Adding `insets.top` converts the trigger's content-relative Y into the
+    // Modal's full-screen coordinate space. iOS/web share a single coordinate
+    // space for the Modal and the trigger, so no shift is needed there.
+    const windowTopOffset = Platform.OS === 'android' ? insets.top : 0
+
     const measure = useCallback(() => {
         if (!triggerRef.current) return
         triggerRef.current.measureInWindow((x, y, width, height) => {
@@ -503,7 +523,7 @@ function DropdownInput({
             menuSize?.height ?? menuMaxHeight,
             menuMaxHeight
         )
-        const needed = desiredHeight + menuOffset + 8
+        const needed = desiredHeight + effectiveMenuOffset + 8
         if (placement === 'top') {
             return spaceAbove >= needed || spaceAbove >= spaceBelow
                 ? 'top'
@@ -523,7 +543,7 @@ function DropdownInput({
         windowHeight,
         menuSize?.height,
         menuMaxHeight,
-        menuOffset,
+        effectiveMenuOffset,
         insets.top,
         insets.bottom,
     ])
@@ -544,15 +564,18 @@ function DropdownInput({
         if (leftPos > maxLeft) leftPos = maxLeft
         if (leftPos < minLeft) leftPos = minLeft
 
+        // Trigger top expressed in the Modal's (full-screen) coordinate space.
+        const triggerTop = triggerRect.y + windowTopOffset
+
         let topPos: number
         if (computedPlacement === 'top') {
             const desiredHeight = menuSize?.height ?? menuMaxHeight
-            topPos = triggerRect.y - desiredHeight - menuOffset
+            topPos = triggerTop - desiredHeight - effectiveMenuOffset
             if (topPos < insets.top + screenPadding) {
                 topPos = insets.top + screenPadding
             }
         } else {
-            topPos = triggerRect.y + triggerRect.height + menuOffset
+            topPos = triggerTop + triggerRect.height + effectiveMenuOffset
         }
 
         const style: ViewStyle = {
@@ -569,7 +592,8 @@ function DropdownInput({
         triggerRect,
         computedPlacement,
         menuSize,
-        menuOffset,
+        effectiveMenuOffset,
+        windowTopOffset,
         menuMaxHeight,
         matchTriggerWidth,
         windowWidth,
@@ -779,22 +803,32 @@ function DropdownInput({
             )}
 
             {/*
-              IMPORTANT: do NOT pass `statusBarTranslucent` to this Modal.
-              On Android, a `statusBarTranslucent` Modal opens its own window
-              that spans the entire screen (origin at screen-top, including
-              the status bar), but `measureInWindow` on the trigger returns
-              coordinates relative to the *activity* window — which on a
-              default Android setup starts BELOW the status bar. The two
-              coordinate spaces then differ by `StatusBar.currentHeight`, so
-              `triggerRect.y + triggerRect.height + menuOffset` lands roughly
-              one status-bar-height ABOVE the visible input, making the
-              popup overlap the input row. Leaving `statusBarTranslucent`
-              off keeps the Modal's window aligned with the activity
-              window, which is what every measurement here assumes.
+              IMPORTANT: this Modal MUST be `statusBarTranslucent` (and
+              `navigationBarTranslucent`) on Android.
+
+              The app runs edge-to-edge (Expo SDK 54+ / Android 15 enforce it
+              and it cannot be disabled). That means the activity window spans
+              the entire physical screen, so `measureInWindow` on the trigger
+              returns a `y` measured from the very TOP of the screen — the
+              status bar height is INCLUDED.
+
+              A non-translucent Modal, however, opens a window whose content
+              area starts BELOW the status bar, so `top: 0` inside it maps to
+              screen-Y = statusBarHeight. Every `top` we compute is then
+              shifted UP by one status-bar-height relative to the trigger,
+              which (because the input row height is roughly a status bar tall)
+              drops the popup right on top of the input.
+
+              Making the Modal translucent gives it a full-screen window whose
+              origin matches the edge-to-edge activity window, so the
+              `measureInWindow` coordinates and the popup's absolute `top`/
+              `left` finally live in the same coordinate space.
             */}
             <Modal
                 visible={isOpen}
                 transparent
+                statusBarTranslucent
+                navigationBarTranslucent
                 animationType="fade"
                 onRequestClose={closeMenu}
             >

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -129,10 +129,6 @@ function ExpandableCheckbox({
 
   const rowGap =
     (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
-  const rowPaddingHorizontal =
-    (getVariableByName('checkboxItem/padding/horizontal', modes) as number | null) ?? 0
-  const rowPaddingVertical =
-    (getVariableByName('checkboxItem/padding/vertical', modes) as number | null) ?? 0
 
   const labelColor =
     (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
@@ -163,12 +159,10 @@ function ExpandableCheckbox({
       alignSelf: isExpanded ? 'stretch' : 'auto',
       minWidth: 0,
       flexDirection: 'row',
-      alignItems: 'flex-start',
+      alignItems: isExpanded ? 'flex-start' : 'center',
       gap: rowGap,
-      paddingHorizontal: rowPaddingHorizontal,
-      paddingVertical: rowPaddingVertical,
     }),
-    [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]
+    [isExpanded, rowGap]
   )
 
   const resolvedLabelStyle: TextStyle = useMemo(
@@ -180,6 +174,13 @@ function ExpandableCheckbox({
       fontSize: labelFontSize,
       lineHeight: labelLineHeight,
       fontWeight: labelFontWeight,
+      // Android adds asymmetric font padding and top-aligns the glyph inside
+      // an inflated line box when `lineHeight` is set. That makes the centered
+      // checkbox look like it drops below the text. Disabling the extra
+      // padding + centering the glyph keeps the single-line label optically
+      // aligned with the checkbox. No-op on iOS / web.
+      includeFontPadding: false,
+      textAlignVertical: isExpanded ? 'top' : 'center',
     }),
     [
       labelColor,
@@ -187,11 +188,14 @@ function ExpandableCheckbox({
       labelFontSize,
       labelLineHeight,
       labelFontWeight,
+      isExpanded,
     ]
   )
 
+  // Layer component modes first (e.g. Color Mode), then button defaults so
+  // Secondary / XS / Low always win unless a dedicated override prop is added.
   const buttonModes = useMemo(
-    () => ({ ...BUTTON_DEFAULT_MODES, ...modes }),
+    () => ({ ...modes, ...BUTTON_DEFAULT_MODES }),
     [modes]
   )
 

package/src/components/FormField/FormField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   View,
   Text,
-  Pressable,
   TextInput as RNTextInput,
   type StyleProp,
   type TextInputProps as RNTextInputProps,
@@ -347,16 +346,6 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false)
   const interactive = !isDisabled && !isReadOnly
 
-  // Ref to the native input so tapping anywhere in the input row (padding,
-  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
-  // "two taps to open the keyboard" issue caused by the row intercepting the
-  // initial touch.
-  const inputRef = useRef<RNTextInput>(null)
-  const focusInput = useCallback(() => {
-    if (!interactive) return
-    inputRef.current?.focus()
-  }, [interactive])
-
   // 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
@@ -552,11 +541,7 @@ function FormField({
         </View>
       )}
 
-      <Pressable
-        style={[inputRowStyle, inputStyle]}
-        onPress={focusInput}
-        accessible={false}
-      >
+      <View style={[inputRowStyle, inputStyle]}>
         {processedLeading != null && (
           <View
             accessibilityElementsHidden
@@ -566,7 +551,6 @@ function FormField({
           </View>
         )}
         <RNTextInput
-          ref={inputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -594,7 +578,7 @@ function FormField({
             {processedTrailing}
           </View>
         )}
-      </Pressable>
+      </View>
 
       {supportLabel != null && supportLabel !== '' && (
         <SupportText

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -374,6 +374,9 @@ function FullscreenModal({
         showsVerticalScrollIndicator={false}
         onScroll={onScroll}
         scrollEventThrottle={16}
+        // Tap an input in the body and it focuses on the FIRST tap, even when
+        // the keyboard is already open (default 'never' eats that tap).
+        keyboardShouldPersistTaps="handled"
       >
         <View style={heroTextRegionStyle}>
           <HeroText

package/src/components/ListItem/ListItem.tsx

@@ -11,7 +11,6 @@ import {
   type PressableStateCallbackType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import IconCapsule from '../IconCapsule/IconCapsule'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -21,8 +20,8 @@ type ListItemProps = {
   title?: string;
   supportText?: string;
   showSupportText?: boolean;
-  /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
-  leading?: React.ReactNode;
+  /** Leading slot (Figma "leading"). Omitted or `null` renders nothing. */
+  leading?: React.ReactNode | null;
   supportSlot?: React.ReactNode;
   /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
   trailing?: React.ReactNode;
@@ -188,7 +187,7 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
@@ -263,16 +262,15 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = useMemo(() => {
-    const processed = leading
-      ? cloneChildrenWithModes(
-          React.Children.toArray(leading),
-          tokens.resolvedModes,
-          SLOT_FORCED_MODES
-        )
-      : []
-    if (processed.length === 0) {
-      return <IconCapsule modes={tokens.resolvedModes} accessibilityLabel={undefined} />
-    }
+    if (leading == null) return null
+
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(leading),
+      tokens.resolvedModes,
+      SLOT_FORCED_MODES
+    )
+    if (processed.length === 0) return null
+
     return processed.length === 1 ? processed[0] : processed
   }, [leading, tokens.resolvedModes])
 
@@ -373,7 +371,7 @@ function ListItemImpl({
   if (layout === 'Horizontal') {
     const innerContent = (
       <View style={innerContentStyleArray}>
-        {leadingElement}
+        {leadingElement ?? null}
         <View
           style={{
             flex: 1,
@@ -431,7 +429,7 @@ function ListItemImpl({
   // Vertical layout — icon on top, support text/slot below
   const verticalContent = (
     <View style={verticalContentStyleArray}>
-      {leadingElement}
+      {leadingElement ?? null}
       {renderSupportContent()}
     </View>
   )

package/src/components/MessageField/MessageField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
     View,
     Text,
-    Pressable,
     TextInput as RNTextInput,
     type StyleProp,
     type TextInputProps as RNTextInputProps,
@@ -297,15 +296,6 @@ function MessageField({
     const [isFocused, setIsFocused] = useState(false)
     const interactive = !isDisabled && !isReadOnly
 
-    // Ref to the native textarea so tapping anywhere in the (padded) textarea
-    // container focuses it on the FIRST tap, fixing the Android "two taps to
-    // open the keyboard" issue.
-    const inputRef = useRef<RNTextInput>(null)
-    const focusInput = useCallback(() => {
-        if (!interactive) return
-        inputRef.current?.focus()
-    }, [interactive])
-
     const { modes: globalModes } = useTokens()
     const baseModes = useMemo(
         () => ({ ...globalModes, ...propModes }),
@@ -508,13 +498,8 @@ function MessageField({
                 </View>
             )}
 
-            <Pressable
-                style={[textareaContainerStyle, textareaStyle]}
-                onPress={focusInput}
-                accessible={false}
-            >
+            <View style={[textareaContainerStyle, textareaStyle]}>
                 <RNTextInput
-                    ref={inputRef}
                     multiline
                     value={currentValue}
                     onChangeText={handleChangeText}
@@ -529,7 +514,7 @@ function MessageField({
                     accessibilityHint={accessibilityHint}
                     style={[inputTextStyle, inputStyle]}
                 />
-            </Pressable>
+            </View>
 
             {shouldShowCounter && (
                 <Text style={counterTextStyle} accessibilityElementsHidden>

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -1,9 +1,9 @@
-import React, { type ReactNode, isValidElement, cloneElement } from 'react'
+import React, { type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -20,7 +20,11 @@ export type PaymentFeedbackProps = {
   iconName?: string
   /** Optional custom media slot that replaces the default IconCapsule */
   renderMedia?: ReactNode
-  /** Mode configuration for design tokens */
+  /**
+   * Mode configuration for design tokens. Also drives the default
+   * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+   * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+   */
   modes?: Record<string, any>
   style?: ViewStyle
 }
@@ -28,7 +32,7 @@ export type PaymentFeedbackProps = {
 export default function PaymentFeedback({
   title = '₹50,000',
   subtitle = 'Payment successful',
-  body = 'Your payment has been\nsuccessfully processed.',
+  body,
   details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
   showDetails = true,
   iconName = 'ic_confirm',
@@ -123,14 +127,17 @@ export default function PaymentFeedback({
     textAlign: 'center',
   }
 
-  const mediaContent = isValidElement(renderMedia)
-    ? cloneElement(renderMedia as React.ReactElement<any>, { modes })
-    : renderMedia
+  // Cascade modes into a custom media slot (per the modes-cascade convention);
+  // any modes the consumer set on the slot child still take precedence.
+  const mediaContent =
+    renderMedia != null ? cloneChildrenWithModes(renderMedia, modes) : null
 
   const defaultMedia = (
     <IconCapsule
       iconName={iconName}
-      modes={{ ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System', AppearanceSystem: 'positive' }}
+      // `positive` is the default; consumers override the capsule color by
+      // passing `AppearanceSystem` (or any other mode) via the `modes` prop.
+      modes={{ AppearanceSystem: 'positive', ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System' }}
     />
   )