jfs-components 0.0.73 → 0.0.74

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -23,9 +23,21 @@ export type CheckboxItemProps = {
   /** The label text rendered next to the checkbox. */
   label?: React.ReactNode
   /**
-   * Optional content rendered on the right side (e.g. a `Button`). When provided,
+   * Position of the checkbox control relative to the label.
+   * - `'leading'` (default): checkbox is rendered on the left, then label, then optional `endSlot` on the right.
+   * - `'trailing'`: optional `endSlot` is rendered on the left, then label, then checkbox on the right.
+   *
+   * Matches the Figma "Control" variant on the Checkbox Item component.
+   */
+  control?: 'leading' | 'trailing'
+  /**
+   * Optional content rendered in the row's end slot (e.g. a `Button`). When provided,
    * it receives the same `modes` as the parent. Wrapped in a fixed-width container
    * matching the Figma `endSlot` design.
+   *
+   * Placement depends on `control`:
+   * - With `control="leading"` the slot appears on the right edge (after the label).
+   * - With `control="trailing"` the slot appears on the left edge (before the label).
    */
   endSlot?: React.ReactNode
   /** Width of the end slot container in pixels. Defaults to 80 to match the Figma reference. */
@@ -45,6 +57,9 @@ export type CheckboxItemProps = {
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
  * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
  *
+ * Use the `control` prop to swap the checkbox between the leading (left, default)
+ * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
  * design tokens for typography and spacing.
  *
@@ -59,6 +74,7 @@ export type CheckboxItemProps = {
  *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
+ *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
@@ -69,6 +85,7 @@ function CheckboxItem({
   onValueChange,
   disabled = false,
   label = 'Fixed deposit • 0245',
+  control = 'leading',
   endSlot,
   endSlotWidth = 80,
   modes = EMPTY_MODES,
@@ -76,6 +93,7 @@ function CheckboxItem({
   labelStyle,
   accessibilityLabel,
 }: CheckboxItemProps) {
+  const isTrailing = control === 'trailing'
   const isControlled = controlledChecked !== undefined
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
   const isChecked = isControlled ? controlledChecked : internalChecked
@@ -129,6 +147,39 @@ function CheckboxItem({
   const a11yLabel =
     accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
 
+  const checkboxNode = (
+    <Checkbox
+      checked={isChecked}
+      disabled={disabled}
+      onValueChange={handleToggle}
+      modes={modes}
+      {...(a11yLabel !== undefined ? { accessibilityLabel: a11yLabel } : {})}
+    />
+  )
+
+  const labelNode =
+    label != null && label !== false ? (
+      typeof label === 'string' || typeof label === 'number' ? (
+        <Text style={[resolvedLabelStyle, labelStyle]} selectable={false}>
+          {label}
+        </Text>
+      ) : (
+        <View style={{ flex: 1, minWidth: 0 }}>{label}</View>
+      )
+    ) : null
+
+  const endSlotNode = endSlot ? (
+    <View
+      style={{
+        width: endSlotWidth,
+        flexShrink: 0,
+        alignItems: 'stretch',
+      }}
+    >
+      {cloneChildrenWithModes(endSlot, modes)}
+    </View>
+  ) : null
+
   return (
     <Pressable
       style={[containerStyle, style]}
@@ -138,35 +189,19 @@ function CheckboxItem({
       accessibilityState={{ checked: isChecked, disabled }}
       accessibilityLabel={a11yLabel}
     >
-      <Checkbox
-        checked={isChecked}
-        disabled={disabled}
-        onValueChange={handleToggle}
-        modes={modes}
-        accessibilityLabel={a11yLabel}
-      />
-
-      {label != null && label !== false ? (
-        typeof label === 'string' || typeof label === 'number' ? (
-          <Text style={[resolvedLabelStyle, labelStyle]} selectable={false}>
-            {label}
-          </Text>
-        ) : (
-          <View style={{ flex: 1, minWidth: 0 }}>{label}</View>
-        )
-      ) : null}
-
-      {endSlot ? (
-        <View
-          style={{
-            width: endSlotWidth,
-            flexShrink: 0,
-            alignItems: 'stretch',
-          }}
-        >
-          {cloneChildrenWithModes(endSlot, modes)}
-        </View>
-      ) : null}
+      {isTrailing ? (
+        <>
+          {endSlotNode}
+          {labelNode}
+          {checkboxNode}
+        </>
+      ) : (
+        <>
+          {checkboxNode}
+          {labelNode}
+          {endSlotNode}
+        </>
+      )}
     </Pressable>
   )
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,331 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+    Platform,
+    Pressable,
+    ScrollView,
+    Text,
+    View,
+    type AccessibilityProps,
+    type PressableStateCallbackType,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} 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 Icon from '../../icons/Icon'
+
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+export type DropdownItemProps = {
+    /** Display text for the item. Ignored when `children` is provided. */
+    label?: string
+    /**
+     * Value associated with the item. Used by the parent `Dropdown` /
+     * `DropdownInput` to identify the selected item. Optional when the item
+     * is purely informational or used outside of a selection context.
+     */
+    value?: string | number | null
+    /** Whether the item is currently selected (renders the trailing check). */
+    selected?: boolean
+    /** Whether the item is disabled and non-interactive. */
+    disabled?: boolean
+    /** Optional element rendered before the label (icon, avatar, etc.). */
+    leading?: React.ReactNode
+    /**
+     * Optional element rendered after the label. When omitted and `selected`
+     * is true, a check icon is rendered automatically.
+     */
+    trailing?: React.ReactNode
+    /** Press handler. Receives the item's `value` if provided. */
+    onPress?: (value: DropdownItemProps['value']) => void
+    /** Optional custom child content (overrides `label`). */
+    children?: React.ReactNode
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>
+    /** Style overrides for the item container. */
+    style?: StyleProp<ViewStyle>
+    /** Style overrides for the item label text. */
+    labelStyle?: StyleProp<TextStyle>
+    /** Accessibility label (defaults to label / inferred from children). */
+    accessibilityLabel?: string
+    /** Accessibility hint. */
+    accessibilityHint?: string
+}
+
+function useDropdownItemTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        // The `dropdownItem/background` token aliases through the
+        // `Dropdown Item State` collection (Idle | Selected), so we resolve
+        // both possibilities up-front and pick at render time.
+        const idleBackground =
+            (getVariableByName('dropdownItem/background', {
+                ...modes,
+                'Dropdown Item State': 'Idle',
+            }) as string) || '#ffffff'
+        const selectedBackground =
+            (getVariableByName('dropdownItem/background', {
+                ...modes,
+                'Dropdown Item State': 'Selected',
+            }) as string) || '#f5f5f5'
+        const foreground =
+            (getVariableByName('dropdownItem/foreground', modes) as string) ||
+            '#000000'
+        const fontFamily =
+            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
+            'JioType Var'
+        const fontSize =
+            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16
+        const fontWeight =
+            (getVariableByName('dropdownItem/fontWeight', modes) as string) ||
+            '400'
+        const lineHeight =
+            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19
+        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8
+        const paddingHorizontal =
+            parseInt(
+                getVariableByName('dropdownItem/padding/horizontal', modes),
+                10
+            ) || 12
+        const paddingVertical =
+            parseInt(
+                getVariableByName('dropdownItem/padding/vertical', modes),
+                10
+            ) || 12
+
+        return {
+            idleBackground,
+            selectedBackground,
+            foreground,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            lineHeight,
+            gap,
+            paddingHorizontal,
+            paddingVertical,
+        }
+    }, [modes])
+}
+
+export function DropdownItem({
+    label,
+    value = null,
+    selected = false,
+    disabled = false,
+    leading,
+    trailing,
+    onPress,
+    children,
+    modes: propModes = EMPTY_MODES,
+    style,
+    labelStyle,
+    accessibilityLabel,
+    accessibilityHint,
+}: DropdownItemProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const tokens = useDropdownItemTokens(modes)
+    const [isHovered, setIsHovered] = useState(false)
+
+    const handlePress = useCallback(() => {
+        if (disabled) return
+        onPress?.(value)
+    }, [disabled, onPress, value])
+
+    const containerStyle = useCallback(
+        ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+            const showSelected =
+                pressed || (isHovered && IS_WEB) || selected
+            const base: ViewStyle = {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: tokens.gap,
+                paddingHorizontal: tokens.paddingHorizontal,
+                paddingVertical: tokens.paddingVertical,
+                backgroundColor: showSelected
+                    ? tokens.selectedBackground
+                    : tokens.idleBackground,
+                opacity: disabled ? 0.4 : 1,
+                width: '100%',
+            }
+            return [base, style]
+        },
+        [
+            tokens.gap,
+            tokens.paddingHorizontal,
+            tokens.paddingVertical,
+            tokens.idleBackground,
+            tokens.selectedBackground,
+            isHovered,
+            selected,
+            disabled,
+            style,
+        ]
+    )
+
+    const textStyle: TextStyle = {
+        color: tokens.foreground,
+        fontFamily: tokens.fontFamily,
+        fontSize: tokens.fontSize,
+        fontWeight: tokens.fontWeight as TextStyle['fontWeight'],
+        lineHeight: tokens.lineHeight,
+        flexShrink: 1,
+    }
+
+    const processedLeading = leading
+        ? cloneChildrenWithModes(React.Children.toArray(leading), modes)
+        : null
+
+    const customTrailing = trailing
+        ? cloneChildrenWithModes(React.Children.toArray(trailing), modes)
+        : null
+
+    const showDefaultCheck = !trailing && selected
+
+    const fallbackA11yLabel =
+        accessibilityLabel ||
+        (typeof label === 'string' ? label : 'Dropdown item')
+
+    const a11yProps: AccessibilityProps = {
+        accessibilityRole: 'menuitem',
+        accessibilityLabel: fallbackA11yLabel,
+        accessibilityState: { selected, disabled },
+    }
+    if (accessibilityHint) {
+        a11yProps.accessibilityHint = accessibilityHint
+    }
+
+    const handleHoverIn = useCallback(() => {
+        if (IS_WEB && !disabled) setIsHovered(true)
+    }, [disabled])
+    const handleHoverOut = useCallback(() => {
+        if (IS_WEB) setIsHovered(false)
+    }, [])
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            disabled={disabled}
+            onHoverIn={handleHoverIn}
+            onHoverOut={handleHoverOut}
+            style={containerStyle}
+            {...a11yProps}
+        >
+            {processedLeading}
+            {children != null ? (
+                children
+            ) : (
+                <Text style={[textStyle, labelStyle]} numberOfLines={1}>
+                    {label}
+                </Text>
+            )}
+            {customTrailing}
+            {showDefaultCheck && (
+                <Icon name="ic_confirm" size={16} color={tokens.foreground} />
+            )}
+        </Pressable>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+export type DropdownProps = {
+    /** Dropdown items, typically `<DropdownItem />` children. */
+    children?: React.ReactNode
+    /**
+     * Maximum height of the popup before its content becomes scrollable.
+     * Defaults to no limit.
+     */
+    maxHeight?: number
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>
+    /** Style overrides for the popup container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the menu surface. */
+    accessibilityLabel?: string
+}
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+export function Dropdown({
+    children,
+    maxHeight,
+    modes: propModes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: DropdownProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const radius =
+        parseInt(getVariableByName('dropdown/radius', modes), 10) || 8
+    const background =
+        (getVariableByName('dropdown/background', modes) as string) || '#ffffff'
+    const shadowColor =
+        (getVariableByName('dropdown/shadow/color', modes) as string) ||
+        'rgba(0, 0, 0, 0.08)'
+    const shadowOffsetX =
+        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0
+    const shadowOffsetY =
+        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4
+    const shadowBlur =
+        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
+
+    const containerStyle: ViewStyle = {
+        backgroundColor: background,
+        borderRadius: radius,
+        overflow: 'hidden',
+        shadowColor,
+        shadowOffset: { width: shadowOffsetX, height: shadowOffsetY },
+        shadowOpacity: 1,
+        shadowRadius: shadowBlur / 2,
+        elevation: 4,
+    }
+
+    const content = (
+        <View style={{ flexDirection: 'column' }}>
+            {cloneChildrenWithModes(children, modes)}
+        </View>
+    )
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityRole="menu"
+            accessibilityLabel={accessibilityLabel || 'Dropdown menu'}
+        >
+            {maxHeight != null ? (
+                <ScrollView
+                    style={{ maxHeight }}
+                    showsVerticalScrollIndicator={true}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    {content}
+                </ScrollView>
+            ) : (
+                content
+            )}
+        </View>
+    )
+}
+
+export default Dropdown