jfs-components 0.1.28 → 0.1.30

package/src/components/MoneyValue/MoneyValue.tsx

@@ -1,9 +1,14 @@
-import React, { useMemo, useEffect, useRef } from 'react'
+import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react'
 import {
   View,
   Text,
+  TextInput,
   Pressable,
   Animated,
+  Platform,
+  Keyboard,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
@@ -58,6 +63,15 @@ export type MoneyValueProps = {
   hidden?: boolean
   /** When true, a blinking vertical cursor is shown at the end of the value text. */
   focused?: boolean
+  /**
+   * When true, tapping the component enters an inline edit mode where the value
+   * becomes a numeric TextInput. The user can type digits or delete the existing
+   * amount. Only numeric characters (including one decimal point) are accepted.
+   * On blur or submit the edit is committed and the display restores.
+   */
+  editable?: boolean
+  /** Called when the value changes during editing (after commit on blur). */
+  onValueChange?: (newValue: string | number) => void
   /** Modes configuration mapped to Figma tokens. */
   modes?: Modes
   style?: StyleProp<ViewStyle>
@@ -85,6 +99,8 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
+  editable = false,
+  onValueChange,
   modes = EMPTY_MODES,
   style,
   valueStyle,
@@ -96,23 +112,60 @@ function MoneyValue({
   ...rest
 }: MoneyValueProps) {
   // Auto-detect negative from value and compute display value
-  const { isNegative, displayValue } = useMemo(() => {
-    const stringValue = String(value)
-    const trimmed = stringValue.trim()
-    const valueIsNegative =
-      trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
+  const stringValue = String(value)
+  const trimmed = stringValue.trim()
+  const valueIsNegative =
+    trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
 
-    // Strip leading minus sign for display (we show it separately)
-    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
+  // Strip leading minus sign for display (we show it separately)
+  const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
 
-    // Use explicit negative prop if provided, otherwise use auto-detected
-    const showNegative = negative !== undefined ? negative : valueIsNegative
+  // Use explicit negative prop if provided, otherwise use auto-detected
+  const showNegative = negative !== undefined ? negative : valueIsNegative
 
-    return {
-      isNegative: hidden ? false : showNegative,
-      displayValue: hidden ? '•••' : absoluteValue,
+  const isNegative = hidden ? false : showNegative
+  const displayValue = hidden ? '•••' : absoluteValue
+
+  // Inline editing state
+  const [isEditing, setIsEditing] = useState(false)
+  const [editBuffer, setEditBuffer] = useState('')
+  const inputRef = useRef<TextInput>(null)
+  // Always-current snapshot of the display value for callbacks to reference.
+  const displayValueRef = useRef(displayValue)
+  displayValueRef.current = displayValue
+
+  const enterEditMode = useCallback(() => {
+    setIsEditing(true)
+    setEditBuffer(displayValueRef.current)
+    // Focus the input on next frame so the keyboard opens
+    setTimeout(() => inputRef.current?.focus(), 0)
+  }, [])
+
+  const commitEdit = useCallback(() => {
+    setIsEditing(false)
+    const resolved = editBuffer || '0'
+    if (resolved !== displayValueRef.current) {
+      onValueChange?.(resolved)
+    }
+  }, [editBuffer, onValueChange])
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // Allow only digits and at most one decimal point
+      const filtered = text.replace(/[^0-9.]/g, '')
+      const parts = filtered.split('.')
+      const clean = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : filtered
+      setEditBuffer(clean)
+    },
+    [],
+  )
+
+  const handlePress = useCallback((event: GestureResponderEvent) => {
+    if (editable) {
+      enterEditMode()
     }
-  }, [value, negative, hidden])
+    onPress?.(event)
+  }, [editable, enterEditMode, onPress])
 
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes)
@@ -191,64 +244,162 @@ function MoneyValue({
     }
   }, [focused, cursorOpacity])
 
-  return (
-    <Pressable
-      style={[containerStyle, style]}
-      accessibilityRole="text"
-      accessibilityLabel={undefined}
-      accessibilityHint={accessibilityHint}
-      onPress={onPress}
-      disabled={!onPress}
-      {...rest}
-    >
-      {isNegative && (
-        <Text
-          style={[currencyTextStyle, negativeSignStyle]}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        >
-          -
-        </Text>
-      )}
-      <Text
-        style={[currencyTextStyle, currencyStyle]}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      >
-        {resolvedCurrency}
-      </Text>
-
-      {/* Group value and cursor in their own view to bypass the parent's generic gap constraint */}
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <Text
-          style={[valueTextStyle, valueStyle]}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        >
-          {displayValue}
-        </Text>
-        {focused && (
-          <Animated.View
-            style={{
-              opacity: cursorOpacity,
-              width: 2,
-              height: (valueFontSize as number) * 1.1,
-              backgroundColor: textColor,
-              marginLeft: 2,
-            }}
-          />
-        )}
-      </View>
-    </Pressable>
+  // Keyboard avoidance — lift the component when the keyboard would cover it.
+  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Resets when editing ends or the keyboard hides.
+  const rootRef = useRef<View>(null)
+  const keyboardLift = useRef(new Animated.Value(0)).current
+  const rootWindowYRef = useRef(0)
+  const rootMeasuredHeightRef = useRef(0)
+
+  const measureRoot = useCallback(() => {
+    rootRef.current?.measureInWindow((_x, y, _w, h) => {
+      rootWindowYRef.current = y
+      rootMeasuredHeightRef.current = h
+    })
+  }, [])
+
+  const handleRootLayout = useCallback(
+    (_e: LayoutChangeEvent) => {
+      // measureInWindow gives the component's position relative to the window,
+      // which is what we need for keyboard overlap calculation. onLayout fires
+      // after the component mounts and whenever its size changes.
+      measureRoot()
+    },
+    [measureRoot],
   )
-}
 
-export default MoneyValue
+  useEffect(() => {
+    if (!editable) return
+
+    const showSub = Keyboard.addListener('keyboardDidShow', (e) => {
+      measureRoot()
+      if (!isEditing) return
 
+      const kbHeight = e.endCoordinates.height
+      const { height: screenH } = require('react-native').Dimensions.get('window')
+      const componentBottom = rootWindowYRef.current + rootMeasuredHeightRef.current
+      const visibleBottom = screenH - kbHeight
+      const overlap = componentBottom - visibleBottom + 12
 
+      if (overlap > 0) {
+        Animated.timing(keyboardLift, {
+          toValue: -overlap,
+          duration: e.duration ?? 250,
+          useNativeDriver: true,
+        }).start()
+      }
+    })
 
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      Animated.timing(keyboardLift, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }).start()
+    })
 
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [editable, isEditing, keyboardLift, measureRoot])
+
+  // Reset lift when editing ends
+  useEffect(() => {
+    if (!isEditing) {
+      keyboardLift.setValue(0)
+    }
+  }, [isEditing, keyboardLift])
 
+  const handleBlur = useCallback(() => {
+    commitEdit()
+  }, [commitEdit])
 
+  const handleSubmitEditing = useCallback(() => {
+    commitEdit()
+  }, [commitEdit])
 
+  return (
+    <Animated.View style={{ transform: [{ translateY: keyboardLift }] }}>
+      <View ref={rootRef} onLayout={handleRootLayout}>
+        <Pressable
+          style={[containerStyle, style]}
+          accessibilityRole="text"
+          accessibilityLabel={undefined}
+          accessibilityHint={accessibilityHint}
+          onPress={handlePress}
+          disabled={!onPress && !editable}
+          {...rest}
+        >
+          {isNegative && (
+            <Text
+              style={[currencyTextStyle, negativeSignStyle]}
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no"
+            >
+              -
+            </Text>
+          )}
+          <Text
+            style={[currencyTextStyle, currencyStyle]}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          >
+            {resolvedCurrency}
+          </Text>
+
+          {/* Group value and cursor in their own view to bypass the parent's generic gap constraint */}
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {isEditing ? (
+              <TextInput
+                ref={inputRef}
+                value={editBuffer}
+                onChangeText={handleChangeText}
+                onBlur={handleBlur}
+                onSubmitEditing={handleSubmitEditing}
+                keyboardType="decimal-pad"
+                returnKeyType="done"
+                selectTextOnFocus
+                style={[
+                  valueTextStyle,
+                  valueStyle,
+                  {
+                    padding: 0,
+                    margin: 0,
+                    // On web a thin border helps the cursor appear precisely
+                    ...(Platform.OS === 'web' ? { outlineStyle: 'none' as any } : {}),
+                  },
+                ]}
+                accessibilityLabel={accessibilityLabel || 'Edit value'}
+              />
+            ) : (
+              <>
+                <Text
+                  style={[valueTextStyle, valueStyle]}
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no"
+                >
+                  {displayValue}
+                </Text>
+                {focused && (
+                  <Animated.View
+                    style={{
+                      opacity: cursorOpacity,
+                      width: 2,
+                      height: (valueFontSize as number) * 1.1,
+                      backgroundColor: textColor,
+                      marginLeft: 2,
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </View>
+        </Pressable>
+      </View>
+    </Animated.View>
+  )
+}
 
+export default MoneyValue

package/src/components/PdpCcCard/PdpCcCard.tsx

@@ -50,6 +50,30 @@ export interface PdpCcCardProps {
     title?: string
     /** Subtitle rendered below the title (14px medium). */
     subtitle?: string
+    /**
+     * Number of lines to limit the title to. The `Title` component defaults to
+     * `1` when this is unset, so the headline is a single line with an ellipsis
+     * by default. Pass a larger value (e.g. `2`) to allow the title to wrap onto
+     * that many lines before truncating, or set {@link disableTruncation} to
+     * remove the clamp entirely. The subtitle is never line-clamped.
+     */
+    numberOfLines?: number
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored. The text is also never shrunk by a tight parent — it keeps its
+     * full intrinsic size and overflows (even breaking the parent layout) rather
+     * than ever clipping into an ellipsis. The text still wraps onto multiple
+     * lines.
+     */
+    disableTruncation?: boolean
+    /**
+     * When `true`, forces both the title and subtitle onto a single line with no
+     * wrapping (implies {@link disableTruncation}). On web the line overflows
+     * horizontally — brutally breaking the parent layout if it has to — instead
+     * of wrapping or truncating.
+     */
+    singleLine?: boolean
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
@@ -105,6 +129,9 @@ function PdpCcCard({
     media,
     title = 'Title',
     subtitle = 'Subtitle',
+    numberOfLines,
+    disableTruncation,
+    singleLine,
     metrics = DEFAULT_METRICS,
     buttonLabel = 'button',
     buttonIcon = 'ic_add_circle',
@@ -165,7 +192,15 @@ function PdpCcCard({
         <>
             <View style={styles.mediaSlot}>{mediaNode}</View>
 
-            <Title title={title} subtitle={subtitle} textAlign="Center" modes={modes} />
+            <Title
+                title={title}
+                subtitle={subtitle}
+                textAlign="Center"
+                modes={modes}
+                numberOfLines={numberOfLines}
+                disableTruncation={disableTruncation}
+                singleLine={singleLine}
+            />
 
             {metrics.length > 0 ? (
                 <View style={styles.metricsRow}>

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { createContext, useContext } from 'react'
 import {
     View,
     Text,
@@ -13,6 +13,16 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
+/**
+ * Carries the root `Table`'s `columnWidth` down to every cell so that, when it
+ * is set, all columns (header + body, data-driven or composed) share the same
+ * fixed width without each cell having to repeat the prop. Cells still honour
+ * an explicit `width` prop over this context value. `undefined` (the default,
+ * when no `Table` ancestor is present, or `columnWidth` is unset) leaves cells
+ * to flex — preserving the original behaviour.
+ */
+const TableContext = createContext<number | undefined>(undefined)
+
 /* -------------------------------------------------------------------------------------------------
  * Shared types & token resolution
  * -----------------------------------------------------------------------------------------------*/
@@ -135,6 +145,10 @@ function TableCell({
     style,
 }: TableCellProps) {
     const t = resolveTableTokens(modes)
+    // A cell's width resolves in priority order: an explicit `width` prop, then
+    // the root Table's `columnWidth` (via context), then fall back to flex.
+    const ctxColumnWidth = useContext(TableContext)
+    const effectiveWidth = width ?? ctxColumnWidth
     return (
         <View
             style={[
@@ -148,7 +162,7 @@ function TableCell({
                     borderColor: t.borderColor,
                     borderBottomWidth: isLastRow ? 0 : t.borderSize,
                     borderRightWidth: isLastColumn ? 0 : t.borderSize,
-                    ...(width != null ? { width } : { flex, minWidth: 0 }),
+                    ...(effectiveWidth != null ? { width: effectiveWidth } : { flex, minWidth: 0 }),
                 },
                 style,
             ]}
@@ -188,6 +202,8 @@ function TableHeaderCell({
     style,
 }: TableHeaderCellProps) {
     const t = resolveTableTokens(modes)
+    const ctxColumnWidth = useContext(TableContext)
+    const effectiveWidth = width ?? ctxColumnWidth
     return (
         <View
             style={[
@@ -198,7 +214,7 @@ function TableHeaderCell({
                     justifyContent: alignToJustify(align),
                     paddingHorizontal: t.headerPaddingH,
                     paddingVertical: t.headerPaddingV,
-                    ...(width != null ? { width } : { flex, minWidth: 0 }),
+                    ...(effectiveWidth != null ? { width: effectiveWidth } : { flex, minWidth: 0 }),
                 },
                 style,
             ]}
@@ -327,6 +343,14 @@ export type TableProps<T = Record<string, unknown>> = {
      * for wide tables that exceed the viewport on mobile. @default false
      */
     scrollable?: boolean
+    /**
+     * Fixed width (px) applied to every column — header and body alike — so
+     * all columns share the same width. An explicit per-column `width` (on
+     * `TableColumn`, or on an individual `Table.Cell`/`Table.HeaderCell`) still
+     * takes precedence when set. Omit to let columns flex to share the
+     * available space.
+     */
+    columnWidth?: number
     /** Accessibility label for the table container. */
     accessibilityLabel?: string
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
@@ -360,6 +384,7 @@ function Table<T = Record<string, unknown>>({
     getRowKey,
     onRowPress,
     scrollable = false,
+    columnWidth,
     accessibilityLabel,
     modes = EMPTY_MODES,
     style,
@@ -424,7 +449,7 @@ function Table<T = Record<string, unknown>>({
             accessibilityLabel={accessibilityLabel}
             style={[{ overflow: 'hidden' }, !scrollable && { width: '100%' }, style]}
         >
-            {body}
+            <TableContext.Provider value={columnWidth}>{body}</TableContext.Provider>
         </View>
     )
 

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-07-07T17:35:34.036Z
+ * Generated: 2026-07-10T20:55:36.505Z
  */
 
 // Icon name to SVG data mapping