jfs-components 0.0.77 → 0.0.78

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Checkbox from '../Checkbox/Checkbox'
+import Button from '../Button/Button'
+
+export type ExpandableCheckboxProps = {
+  /** Long text label rendered next to the checkbox. */
+  label?: string
+  /** Whether the checkbox is checked (controlled). */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onValueChange?: (checked: boolean) => void
+  /** Whether the row is expanded to reveal the full label (controlled). */
+  expanded?: boolean
+  /** Initial expanded state (uncontrolled). Defaults to `false` (Idle). */
+  defaultExpanded?: boolean
+  /** Callback fired when the expanded state changes. */
+  onExpandedChange?: (expanded: boolean) => void
+  /** Whether the entire row is disabled. */
+  disabled?: boolean
+  /** Label for the toggle button shown when the row is collapsed. */
+  readMoreLabel?: string
+  /** Label for the toggle button shown when the row is expanded. */
+  readLessLabel?: string
+  /** Number of lines to show when collapsed. Defaults to `1`. */
+  collapsedLines?: number
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override outer container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the label text styles. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the checkbox. Falls back to `label`. */
+  accessibilityLabel?: string
+}
+
+/**
+ * Default modes applied to the inner toggle `Button`. These resolve the
+ * tertiary-style pill in the Figma reference (small, transparent background,
+ * brand purple foreground). Any value supplied via the consumer `modes` prop
+ * takes precedence over these defaults.
+ */
+const BUTTON_DEFAULT_MODES = {
+  'Button / Size': 'XS',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low',
+} as const
+
+/**
+ * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
+ * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
+ * component with two states:
+ *
+ *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
+ *    in a horizontal row (cross-axis centered).
+ *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
+ *    button right-aligned beneath the row.
+ *
+ * The checkbox and the toggle button have independent press handlers — pressing
+ * the toggle does not affect the checked state, and toggling the checkbox does
+ * not collapse / expand the row.
+ *
+ * @component
+ * @param {ExpandableCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCheckbox
+ *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   defaultChecked
+ *   onValueChange={setAccepted}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function ExpandableCheckbox({
+  label = '',
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  disabled = false,
+  readMoreLabel = 'Read more',
+  readLessLabel = 'Read less',
+  collapsedLines = 1,
+  modes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: ExpandableCheckboxProps) {
+  const isCheckedControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked
+
+  const isExpandedControlled = controlledExpanded !== undefined
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded
+
+  const handleToggleChecked = useCallback(
+    (next: boolean) => {
+      if (disabled) return
+      if (!isCheckedControlled) setInternalChecked(next)
+      onValueChange?.(next)
+    },
+    [disabled, isCheckedControlled, onValueChange]
+  )
+
+  const handleToggleExpanded = useCallback(() => {
+    if (disabled) return
+    const next = !isExpanded
+    if (!isExpandedControlled) setInternalExpanded(next)
+    onExpandedChange?.(next)
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange])
+
+  const gap =
+    (getVariableByName('expandableCheckbox/gap', modes) as number | null) ?? 8
+
+  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'
+  const labelFontFamily =
+    (getVariableByName('checkboxItem/label/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const labelFontSize =
+    (getVariableByName('checkboxItem/label/fontSize', modes) as number | null) ?? 14
+  const labelLineHeight =
+    (getVariableByName('checkboxItem/label/lineHeight', modes) as number | null) ?? 19
+  const labelFontWeightRaw =
+    getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400
+  const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+
+  const containerStyle: ViewStyle = useMemo(
+    () => ({
+      flexDirection: isExpanded ? 'column' : 'row',
+      alignItems: isExpanded ? 'flex-end' : 'center',
+      gap,
+      width: '100%',
+      ...(disabled ? { opacity: 0.6 } : null),
+    }),
+    [isExpanded, gap, disabled]
+  )
+
+  const rowStyle: ViewStyle = useMemo(
+    () => ({
+      flex: isExpanded ? undefined : 1,
+      alignSelf: isExpanded ? 'stretch' : 'auto',
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: rowGap,
+      paddingHorizontal: rowPaddingHorizontal,
+      paddingVertical: rowPaddingVertical,
+    }),
+    [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]
+  )
+
+  const resolvedLabelStyle: TextStyle = useMemo(
+    () => ({
+      flex: 1,
+      minWidth: 0,
+      color: labelColor,
+      fontFamily: labelFontFamily,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+    }),
+    [
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+    ]
+  )
+
+  const buttonModes = useMemo(
+    () => ({ ...BUTTON_DEFAULT_MODES, ...modes }),
+    [modes]
+  )
+
+  const a11yLabel =
+    accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
+  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
+
+  const labelNumberOfLinesProps =
+    !isExpanded && collapsedLines > 0
+      ? { numberOfLines: collapsedLines, ellipsizeMode: 'tail' as const }
+      : null
+
+  return (
+    <View style={[containerStyle, style]}>
+      <View style={rowStyle}>
+        <Checkbox
+          checked={isChecked}
+          disabled={disabled}
+          onValueChange={handleToggleChecked}
+          modes={modes}
+          {...(a11yLabel !== undefined ? { accessibilityLabel: a11yLabel } : {})}
+        />
+        <Text
+          style={[resolvedLabelStyle, labelStyle]}
+          selectable={false}
+          {...(labelNumberOfLinesProps ?? {})}
+        >
+          {label}
+        </Text>
+      </View>
+      <Button
+        label={buttonLabel}
+        onPress={handleToggleExpanded}
+        disabled={disabled}
+        modes={buttonModes}
+        accessibilityLabel={buttonLabel}
+        accessibilityState={{ expanded: isExpanded }}
+      />
+    </View>
+  )
+}
+
+export default ExpandableCheckbox

package/src/components/FormField/FormField.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
   View,
   Text,
+  Pressable,
   TextInput as RNTextInput,
   type StyleProp,
   type TextInputProps as RNTextInputProps,
@@ -346,6 +347,16 @@ 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
@@ -541,7 +552,11 @@ function FormField({
         </View>
       )}
 
-      <View style={[inputRowStyle, inputStyle]}>
+      <Pressable
+        style={[inputRowStyle, inputStyle]}
+        onPress={focusInput}
+        accessible={false}
+      >
         {processedLeading != null && (
           <View
             accessibilityElementsHidden
@@ -551,6 +566,7 @@ function FormField({
           </View>
         )}
         <RNTextInput
+          ref={inputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -578,7 +594,7 @@ function FormField({
             {processedTrailing}
           </View>
         )}
-      </View>
+      </Pressable>
 
       {supportLabel != null && supportLabel !== '' && (
         <SupportText