jfs-components 0.0.62 → 0.0.63

package/src/components/ListItem/ListItem.tsx

@@ -1,18 +1,20 @@
-import React, { useMemo } from 'react'
-import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type AccessibilityState } from 'react-native'
+import React, { useCallback, useMemo, useRef } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityState,
+  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'
-
-/**
- * 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.
- *
- * @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
- *                      Useful for slots that need to enforce specific context values.
- */
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 type ListItemProps = {
   layout?: 'Vertical' | 'Horizontal';
@@ -37,6 +39,113 @@ type ListItemProps = {
   webAccessibilityProps?: WebAccessibilityProps;
 } & React.ComponentProps<typeof View>;
 
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+// Forced modes for the endSlot — `Context: 'ListItem'` can never be
+// overridden by external modes. Frozen so identity is stable across renders.
+const END_SLOT_FORCED_MODES = Object.freeze({ Context: 'ListItem' })
+
+// Pressed visual is applied on the host view through Pressable's style
+// callback, so a scroll-cancelled touch never schedules a React render.
+const pressedOverlayStyle: ViewStyle = { opacity: 0.85 }
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes) tuple.
+// ---------------------------------------------------------------------------
+
+interface ListItemTokens {
+  baseContainerStyle: ViewStyle;
+  horizontalLayoutStyle: ViewStyle;
+  verticalLayoutStyle: ViewStyle;
+  innerContentBaseStyle: ViewStyle;
+  verticalContentBaseStyle: ViewStyle;
+  titleTextStyle: TextStyle;
+  supportTextStyle: TextStyle;
+  trailingWrapperStyle: ViewStyle;
+  textWrapGap: number;
+  resolvedModes: Record<string, any>;
+}
+
+function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
+  const resolvedModes = { ...modes, Context: 'ListItem' }
+
+  const gap = (getVariableByName('listItem/gap', resolvedModes) ?? 8) as number
+  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0
+  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0
+  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0
+  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
+  const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
+
+  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System'
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14'
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System'
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500
+  const supportFontWeight =
+    typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw
+
+  return {
+    baseContainerStyle: {
+      paddingTop: paddingTop as number,
+      paddingBottom: paddingBottom as number,
+      paddingLeft: paddingLeft as number,
+      paddingRight: paddingRight as number,
+    },
+    horizontalLayoutStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap,
+    },
+    verticalLayoutStyle: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap,
+    },
+    innerContentBaseStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      gap,
+    },
+    verticalContentBaseStyle: {
+      alignItems: 'center',
+      gap,
+    },
+    titleTextStyle: {
+      color: titleColor as string,
+      fontSize: titleFontSize as number,
+      lineHeight: titleLineHeight as number,
+      fontFamily: titleFontFamily as string,
+      fontWeight: titleFontWeight as TextStyle['fontWeight'],
+    },
+    supportTextStyle: {
+      color: supportColor as string,
+      fontSize: supportFontSize as number,
+      lineHeight: supportLineHeight as number,
+      fontFamily: supportFontFamily as string,
+      fontWeight: supportFontWeight as TextStyle['fontWeight'],
+    },
+    trailingWrapperStyle: { marginLeft: gap / 2 },
+    textWrapGap,
+    resolvedModes,
+  }
+}
+
+const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
+
 /**
  * ListItem component that mirrors the Figma "List Item" component.
  *
@@ -68,8 +177,20 @@ type ListItemProps = {
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes])`.
+ *  - The pressed visual is applied via Pressable's `style={({pressed}) => ...}`
+ *    callback so RN updates the host view directly — no React render is
+ *    scheduled by a touch. On iOS the touch is additionally delayed via
+ *    `unstable_pressDelay={130}` so a scroll-cancelled tap never even
+ *    transiently applies the pressed style. This is the fix for the
+ *    "People / Setup card flicker during scroll" report.
+ *  - User-supplied event handlers are read through a ref so the wrapper
+ *    handlers stay referentially stable across renders.
+ *  - The component is wrapped in `React.memo`.
  */
-function ListItem({
+function ListItemImpl({
   layout = 'Vertical',
   title = 'Title',
   supportText = 'Support Text',
@@ -78,7 +199,7 @@ function ListItem({
   supportSlot,
   endSlot,
   navArrow = true,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   style,
   contentStyle,
@@ -88,98 +209,17 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }: ListItemProps) {
-  const resolvedModes = { ...modes, "Context": "ListItem" }
-
-  // Resolve container spacing tokens
-  const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8
-  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0
-  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0
-  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0
-  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
-  const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0
-
-  // Title typography (horizontal layout)
-  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16
-  const titleFontFamily =
-    getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System'
-  const titleFontWeightRaw =
-    getVariableByName('listItem/title/fontWeight', resolvedModes) || 700
-  const titleFontWeight =
-    typeof titleFontWeightRaw === 'number'
-      ? titleFontWeightRaw.toString()
-      : titleFontWeightRaw
-
-  // Support text typography (used in both layouts)
-  const supportColor =
-    getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14'
-  const supportFontSize =
-    getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12
-  const supportLineHeight =
-    getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14
-  const supportFontFamily =
-    getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System'
-  const supportFontWeightRaw =
-    getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500
-  const supportFontWeight =
-    typeof supportFontWeightRaw === 'number'
-      ? supportFontWeightRaw.toString()
-      : supportFontWeightRaw
-
-  const baseContainerStyle = {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-  }
-
-  const sharedLayoutStyle: ViewStyle =
-    layout === 'Horizontal'
-      ? {
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        gap,
-      }
-      : {
-        flexDirection: 'column' as const,
-        alignItems: 'center' as const,
-        gap,
-      }
-
-  const innerContentBaseStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    gap,
-  }
-
-  const verticalContentBaseStyle: ViewStyle = {
-    alignItems: 'center',
-    gap,
-  }
-
-  const titleTextStyle: TextStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    lineHeight: titleLineHeight,
-    fontFamily: titleFontFamily,
-    fontWeight: titleFontWeight,
-  }
-
-  const supportTextStyle: TextStyle = {
-    color: supportColor,
-    fontSize: supportFontSize,
-    lineHeight: supportLineHeight,
-    fontFamily: supportFontFamily,
-    fontWeight: supportFontWeight,
-  }
-
-  const trailingWrapperStyle = useMemo(
-    () => ({ marginLeft: gap / 2 }),
-    [gap],
-  )
+  const tokens = useMemo(() => resolveListItemTokens(modes), [modes])
 
+  // Mirror user-supplied handlers in a ref so our wrappers can stay
+  // referentially stable. Without this, every parent re-render hands
+  // Pressable a fresh function identity for each event prop.
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
 
   // Generate default accessibility label from title and supportText if not provided
   const defaultAccessibilityLabel = accessibilityLabel ||
@@ -187,8 +227,9 @@ function ListItem({
       ? `${title}${showSupportText && supportText ? `, ${supportText}` : ''}`
       : supportText)
 
-  // Get web platform support props (only used when onPress is defined)
-  const webPropsHorizontal = usePressableWebSupport({
+  // Single web-platform support payload — the previous version called
+  // `usePressableWebSupport` twice with identical args, which was dead work.
+  const webProps = usePressableWebSupport({
     restProps: rest,
     onPress,
     disabled: false,
@@ -196,52 +237,54 @@ function ListItem({
     webAccessibilityProps,
   })
 
-  const webPropsVertical = usePressableWebSupport({
-    restProps: rest,
-    onPress,
-    disabled: false,
-    accessibilityLabel: defaultAccessibilityLabel,
-    webAccessibilityProps,
-  })
+  // 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)
+      : []
+    if (processed.length === 0) {
+      return <IconCapsule modes={tokens.resolvedModes} accessibilityLabel={undefined} />
+    }
+    return processed.length === 1 ? processed[0] : processed
+  }, [leading, tokens.resolvedModes])
 
-  // Process leading slot to pass modes to children
-  const processedLeading = leading
-    ? cloneChildrenWithModes(React.Children.toArray(leading), resolvedModes)
-    : []
-  // Extract single element if array has one element, otherwise use array
-  const leadingElement =
-    processedLeading.length > 0
-      ? processedLeading.length === 1
-        ? processedLeading[0]
-        : processedLeading
-      : <IconCapsule modes={resolvedModes} accessibilityLabel={undefined} />
+  const processedSupportSlot = useMemo(() => {
+    if (!supportSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(supportSlot),
+      tokens.resolvedModes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [supportSlot, tokens.resolvedModes])
+
+  const processedEndSlot = useMemo(() => {
+    if (!endSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(endSlot),
+      tokens.resolvedModes,
+      END_SLOT_FORCED_MODES
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [endSlot, tokens.resolvedModes])
 
   const renderSupportContent = () => {
-    if (supportSlot) {
-      // Process supportSlot to pass modes to children
-      const processedSupportSlot = cloneChildrenWithModes(
-        React.Children.toArray(supportSlot),
-        resolvedModes
-      )
-      // Extract single element if array has one element, otherwise use array
-      return processedSupportSlot.length === 1
-        ? processedSupportSlot[0]
-        : processedSupportSlot
-    }
+    if (processedSupportSlot) return processedSupportSlot
 
-    // Default support text (used for:
-    //  - vertical layout main text
-    //  - horizontal layout secondary line)
+    // Default support text:
+    //  - vertical layout: main text (line-broken on spaces)
+    //  - horizontal layout: secondary line (clamped to 2 lines)
     const displayText = layout === 'Vertical'
       ? supportText.replace(/ /g, '\n')
       : supportText
 
     return (
       <Text
-        style={[
-          supportTextStyle,
-          layout === 'Vertical' ? { textAlign: 'center' } : undefined,
-        ]}
+        style={
+          layout === 'Vertical'
+            ? [tokens.supportTextStyle, verticalSupportTextOverride]
+            : tokens.supportTextStyle
+        }
         numberOfLines={layout === 'Horizontal' ? 2 : undefined}
       >
         {displayText}
@@ -249,44 +292,77 @@ function ListItem({
     )
   }
 
-  if (layout === 'Horizontal') {
-    // Process endSlot to pass modes to children
-    // Force Context: 'ListItem' - this value can never be overridden by external modes
-    const processedEndSlot = endSlot
-      ? cloneChildrenWithModes(React.Children.toArray(endSlot), resolvedModes, { "Context": 'ListItem' })
-      : []
-    // Extract single element if array has one element, otherwise use array
-    const trailingContent =
-      processedEndSlot.length > 0
-        ? processedEndSlot.length === 1
-          ? processedEndSlot[0]
-          : processedEndSlot
-        : null
+  // Stable handlers — user-supplied callbacks are forwarded via ref.
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+
+  const horizontalContainerStyleArray = useMemo(
+    () => [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style],
+    [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]
+  )
+
+  const verticalContainerStyleArray = useMemo(
+    () => [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style],
+    [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]
+  )
+
+  const horizontalPressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.baseContainerStyle,
+      tokens.horizontalLayoutStyle,
+      pressed ? pressedOverlayStyle : null,
+      style,
+    ],
+    [tokens.baseContainerStyle, tokens.horizontalLayoutStyle, style]
+  )
+
+  const verticalPressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.baseContainerStyle,
+      tokens.verticalLayoutStyle,
+      pressed ? pressedOverlayStyle : null,
+      style,
+    ],
+    [tokens.baseContainerStyle, tokens.verticalLayoutStyle, style]
+  )
+
+  const innerContentStyleArray = useMemo(
+    () => [tokens.innerContentBaseStyle, contentStyle],
+    [tokens.innerContentBaseStyle, contentStyle]
+  )
+
+  const verticalContentStyleArray = useMemo(
+    () => [tokens.verticalContentBaseStyle, contentStyle],
+    [tokens.verticalContentBaseStyle, contentStyle]
+  )
 
+  if (layout === 'Horizontal') {
     const innerContent = (
-      <View
-        style={[innerContentBaseStyle, contentStyle]}
-      >
+      <View style={innerContentStyleArray}>
         {leadingElement}
         <View
           style={{
             flex: 1,
             minWidth: 1,
-            gap: textWrapGap,
+            gap: tokens.textWrapGap,
           }}
         >
           <Text
-            style={titleTextStyle}
+            style={tokens.titleTextStyle}
             numberOfLines={1}
           >
             {title}
           </Text>
           {showSupportText && renderSupportContent()}
         </View>
-        {trailingContent ? (
-          <View style={trailingWrapperStyle}>{trailingContent}</View>
+        {processedEndSlot ? (
+          <View style={tokens.trailingWrapperStyle}>{processedEndSlot}</View>
         ) : null}
-        {navArrow && <NavArrow direction="Forward" modes={resolvedModes} />}
+        {navArrow && <NavArrow direction="Forward" modes={tokens.resolvedModes} />}
       </View>
     )
 
@@ -296,17 +372,13 @@ function ListItem({
           accessibilityRole="button"
           accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint}
-          accessibilityState={{
-            ...accessibilityState
-          }}
+          accessibilityState={accessibilityState}
           onPress={onPress}
-          style={({ pressed }) => [
-            baseContainerStyle,
-            sharedLayoutStyle,
-            pressed ? { opacity: 0.85 } : null,
-            style,
-          ]}
-          {...webPropsHorizontal}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          unstable_pressDelay={PRESS_DELAY}
+          style={horizontalPressableStyle}
+          {...webProps}
         >
           {innerContent}
         </Pressable>
@@ -318,7 +390,7 @@ function ListItem({
         accessibilityRole={undefined}
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
-        style={[baseContainerStyle, sharedLayoutStyle, style]}
+        style={horizontalContainerStyleArray}
         {...rest}
       >
         {innerContent}
@@ -326,9 +398,9 @@ function ListItem({
     )
   }
 
-  // Vertical layout - icon on top, support text/slot below
+  // Vertical layout — icon on top, support text/slot below
   const verticalContent = (
-    <View style={[verticalContentBaseStyle, contentStyle]}>
+    <View style={verticalContentStyleArray}>
       {leadingElement}
       {renderSupportContent()}
     </View>
@@ -340,17 +412,13 @@ function ListItem({
         accessibilityRole="button"
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
-        accessibilityState={{
-          ...accessibilityState
-        }}
+        accessibilityState={accessibilityState}
         onPress={onPress}
-        style={({ pressed }) => [
-          baseContainerStyle,
-          sharedLayoutStyle,
-          pressed ? { opacity: 0.85 } : null,
-          style,
-        ]}
-        {...webPropsVertical}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        unstable_pressDelay={PRESS_DELAY}
+        style={verticalPressableStyle}
+        {...webProps}
       >
         {verticalContent}
       </Pressable>
@@ -362,7 +430,7 @@ function ListItem({
       accessibilityRole={undefined}
       accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
-      style={[baseContainerStyle, sharedLayoutStyle, style]}
+      style={verticalContainerStyleArray}
       {...rest}
     >
       {verticalContent}
@@ -370,4 +438,6 @@ function ListItem({
   )
 }
 
+const ListItem = React.memo(ListItemImpl)
+
 export default ListItem

package/src/components/MediaCard/MediaCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp,
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Button, { type ButtonProps } from '../Button/Button';
 import Avatar, { type AvatarProps } from '../Avatar/Avatar';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 /**
  * Context to share 'modes' with child components.
@@ -37,7 +38,7 @@ export interface MediaCardProps {
 export function MediaCard({
     media,
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: MediaCardProps) {
     // Container Tokens

package/src/components/MerchantProfile/MerchantProfile.tsx

@@ -7,6 +7,7 @@ import {
   type StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Avatar, { type AvatarProps } from '../Avatar/Avatar'
 
 export type MerchantProfileProps = {
@@ -76,7 +77,7 @@ export type MerchantProfileProps = {
 function MerchantProfile({
   title = 'Uber India Systems Private Limited',
   subtitle = 'UPI ID: uberindia@ybl',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   avatarProps,
   accessibilityLabel,

package/src/components/MoneyValue/MoneyValue.tsx

@@ -9,6 +9,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 // Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
@@ -83,7 +84,7 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   valueStyle,
   currencyStyle,