jfs-components 0.1.28 → 0.1.30

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -61,6 +61,8 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
+  editable = false,
+  onValueChange,
   modes = _reactUtils.EMPTY_MODES,
   style,
   valueStyle,
@@ -72,24 +74,51 @@ function MoneyValue({
   ...rest
 }) {
   // Auto-detect negative from value and compute display value
-  const {
-    isNegative,
-    displayValue
-  } = (0, _react.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;
-    return {
-      isNegative: hidden ? false : showNegative,
-      displayValue: hidden ? '•••' : absoluteValue
-    };
-  }, [value, negative, hidden]);
+  // Use explicit negative prop if provided, otherwise use auto-detected
+  const showNegative = negative !== undefined ? negative : valueIsNegative;
+  const isNegative = hidden ? false : showNegative;
+  const displayValue = hidden ? '•••' : absoluteValue;
+
+  // Inline editing state
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const [editBuffer, setEditBuffer] = (0, _react.useState)('');
+  const inputRef = (0, _react.useRef)(null);
+  // Always-current snapshot of the display value for callbacks to reference.
+  const displayValueRef = (0, _react.useRef)(displayValue);
+  displayValueRef.current = displayValue;
+  const enterEditMode = (0, _react.useCallback)(() => {
+    setIsEditing(true);
+    setEditBuffer(displayValueRef.current);
+    // Focus the input on next frame so the keyboard opens
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, []);
+  const commitEdit = (0, _react.useCallback)(() => {
+    setIsEditing(false);
+    const resolved = editBuffer || '0';
+    if (resolved !== displayValueRef.current) {
+      onValueChange?.(resolved);
+    }
+  }, [editBuffer, onValueChange]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    // 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 = (0, _react.useCallback)(event => {
+    if (editable) {
+      enterEditMode();
+    }
+    onPress?.(event);
+  }, [editable, enterEditMode, onPress]);
 
   // Resolve typography and layout tokens from Figma
   const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes);
@@ -150,44 +179,140 @@ function MoneyValue({
       cursorOpacity.setValue(0);
     }
   }, [focused, cursorOpacity]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-    style: [containerStyle, style],
-    accessibilityRole: "text",
-    accessibilityLabel: undefined,
-    accessibilityHint: accessibilityHint,
-    onPress: onPress,
-    disabled: !onPress,
-    ...rest,
-    children: [isNegative && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [currencyTextStyle, negativeSignStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: "-"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [currencyTextStyle, currencyStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: resolvedCurrency
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [valueTextStyle, valueStyle],
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no",
-        children: displayValue
-      }), focused && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: {
-          opacity: cursorOpacity,
-          width: 2,
-          height: valueFontSize * 1.1,
-          backgroundColor: textColor,
-          marginLeft: 2
-        }
-      })]
-    })]
+
+  // 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 = (0, _react.useRef)(null);
+  const keyboardLift = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const rootWindowYRef = (0, _react.useRef)(0);
+  const rootMeasuredHeightRef = (0, _react.useRef)(0);
+  const measureRoot = (0, _react.useCallback)(() => {
+    rootRef.current?.measureInWindow((_x, y, _w, h) => {
+      rootWindowYRef.current = y;
+      rootMeasuredHeightRef.current = h;
+    });
+  }, []);
+  const handleRootLayout = (0, _react.useCallback)(_e => {
+    // 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]);
+  (0, _react.useEffect)(() => {
+    if (!editable) return;
+    const showSub = _reactNative.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) {
+        _reactNative.Animated.timing(keyboardLift, {
+          toValue: -overlap,
+          duration: e.duration ?? 250,
+          useNativeDriver: true
+        }).start();
+      }
+    });
+    const hideSub = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
+      _reactNative.Animated.timing(keyboardLift, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [editable, isEditing, keyboardLift, measureRoot]);
+
+  // Reset lift when editing ends
+  (0, _react.useEffect)(() => {
+    if (!isEditing) {
+      keyboardLift.setValue(0);
+    }
+  }, [isEditing, keyboardLift]);
+  const handleBlur = (0, _react.useCallback)(() => {
+    commitEdit();
+  }, [commitEdit]);
+  const handleSubmitEditing = (0, _react.useCallback)(() => {
+    commitEdit();
+  }, [commitEdit]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        translateY: keyboardLift
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: rootRef,
+      onLayout: handleRootLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+        style: [containerStyle, style],
+        accessibilityRole: "text",
+        accessibilityLabel: undefined,
+        accessibilityHint: accessibilityHint,
+        onPress: handlePress,
+        disabled: !onPress && !editable,
+        ...rest,
+        children: [isNegative && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [currencyTextStyle, negativeSignStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [currencyTextStyle, currencyStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: resolvedCurrency
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          children: isEditing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            ref: inputRef,
+            value: editBuffer,
+            onChangeText: handleChangeText,
+            onBlur: handleBlur,
+            onSubmitEditing: handleSubmitEditing,
+            keyboardType: "decimal-pad",
+            returnKeyType: "done",
+            selectTextOnFocus: true,
+            style: [valueTextStyle, valueStyle, {
+              padding: 0,
+              margin: 0,
+              // On web a thin border helps the cursor appear precisely
+              ...(_reactNative.Platform.OS === 'web' ? {
+                outlineStyle: 'none'
+              } : {})
+            }],
+            accessibilityLabel: accessibilityLabel || 'Edit value'
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [valueTextStyle, valueStyle],
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: displayValue
+            }), focused && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+              style: {
+                opacity: cursorOpacity,
+                width: 2,
+                height: valueFontSize * 1.1,
+                backgroundColor: textColor,
+                marginLeft: 2
+              }
+            })]
+          })
+        })]
+      })
+    })
   });
 }
 var _default = exports.default = MoneyValue;

package/lib/commonjs/components/PdpCcCard/PdpCcCard.js

@@ -45,6 +45,9 @@ function PdpCcCard({
   media,
   title = 'Title',
   subtitle = 'Subtitle',
+  numberOfLines,
+  disableTruncation,
+  singleLine,
   metrics = DEFAULT_METRICS,
   buttonLabel = 'button',
   buttonIcon = 'ic_add_circle',
@@ -96,7 +99,10 @@ function PdpCcCard({
       title: title,
       subtitle: subtitle,
       textAlign: "Center",
-      modes: modes
+      modes: modes,
+      numberOfLines: numberOfLines,
+      disableTruncation: disableTruncation,
+      singleLine: singleLine
     }), metrics.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.metricsRow,
       children: metrics.map((metric, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {

package/lib/commonjs/components/Table/Table.js

@@ -9,12 +9,22 @@ exports.TableHeader = TableHeader;
 exports.TableHeaderCell = TableHeaderCell;
 exports.TableRow = TableRow;
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 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 = /*#__PURE__*/(0, _react.createContext)(undefined);
+
 /* -------------------------------------------------------------------------------------------------
  * Shared types & token resolution
  * -----------------------------------------------------------------------------------------------*/
@@ -98,6 +108,10 @@ function TableCell({
   style
 }) {
   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 = (0, _react.useContext)(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [{
       backgroundColor: t.cellBg,
@@ -109,8 +123,8 @@ function TableCell({
       borderColor: t.borderColor,
       borderBottomWidth: isLastRow ? 0 : t.borderSize,
       borderRightWidth: isLastColumn ? 0 : t.borderSize,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -138,6 +152,8 @@ function TableHeaderCell({
   style
 }) {
   const t = resolveTableTokens(modes);
+  const ctxColumnWidth = (0, _react.useContext)(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [{
       backgroundColor: t.headerBg,
@@ -146,8 +162,8 @@ function TableHeaderCell({
       justifyContent: alignToJustify(align),
       paddingHorizontal: t.headerPaddingH,
       paddingVertical: t.headerPaddingV,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -262,6 +278,7 @@ function Table({
   getRowKey,
   onRowPress,
   scrollable = false,
+  columnWidth,
   accessibilityLabel,
   modes = _reactUtils.EMPTY_MODES,
   style
@@ -305,7 +322,10 @@ function Table({
     }, !scrollable && {
       width: '100%'
     }, style],
-    children: body
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
+      value: columnWidth,
+      children: body
+    })
   });
   if (scrollable) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {