jfs-components 0.1.28 → 0.1.30

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.30] - 2026-07-10
+
+- `MoneyValue` — new `editable` prop (inline edit mode): tapping the value shows a numeric `TextInput` that accepts only digits + one decimal point; edit commits on blur/submit via new `onValueChange` callback; keyboard avoidance lifts the component above the keyboard using `Keyboard.addListener` + `measureInWindow` (same pattern as `ActionFooter`).
+- `ContentSheet` — new `visible` prop controls a bottom pop-up / exit animation driven by Reanimated's `withSpring` (same spring config as `Drawer`: damping 32, stiffness 300). Sheet springs up from below the bottom edge on mount / `visible=true` and springs back down on `visible=false`. Animation composes with keyboard avoidance so both `translateY` offsets are summed in a single `useAnimatedStyle`.
+- `CompareTable` — new `columnWidth` prop enables fixed-width scroll mode: each selection card and table cell gets this exact width; the cards row and every section body become independent horizontal `ScrollView`s whose scroll events are chained so they stay aligned in lockstep; the cards row pins to the top as a sticky header on the vertical axis; gray section-header rows render full-width outside the horizontal scroll so they don't slide with the cells.
+- `PdpCcCard` — new `numberOfLines`, `disableTruncation`, and `singleLine` props passed through to the `Title` component for precise control over title truncation and wrapping.
+- `Table` — new `columnWidth` prop applies a fixed width to every column (header + body) for uniform column sizing in scrollable layouts; new `scrollable` prop wraps the table in a horizontal `ScrollView`.
+- Stories and MDX documentation updated for all new features.
+
+---
+
 ## [0.1.28] - 2026-07-07
 
 - Added `FormUpload` — token-driven attachment field with label, support text, `<Form>` validation integration, and a controlled `attachments` / `onAttachmentsChange` API. Renders a row of `Additem` cells (preview + empty upload trigger) with optional `maxCount` cap; accepts an injected `picker` callback so consumers wire their own image/document picker without adding native deps to the library.
@@ -17,10 +28,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [0.1.27] - 2026-07-07
 
-- Added `ProfileCard` — dark rounded profile summary card with `Attached` monogram `Avatar`, optional badge, name + `UpiHandle` pill row, and a body slot; `Profile Card Appearance` mode (`Default` | `Premium`) recolors the whole card via `modes`.
+- Added `ProfileCard` — dark rounded profile summary card (`profileCard/*` tokens) with an `Attached` monogram `Avatar` (optional `IconCapsule` badge), declarative header props (`name`, `monogram`, `avatarSource`, `upiHandles`) or a full `header` slot override, and a body slot below a `Divider`. Forces `context 10: jioPlus` so nested children (`ListItem`, `UpiHandle`, `Text`, `Button`, …) resolve on-dark profile-card tokens automatically; `Profile Card Appearance` mode (`Default` | `Premium`) recolors the whole card via `modes`.
+- `UpiHandle` — avatar visibility is now **source-driven**: the leading image renders only when `source` / `avatarSource` is provided; omitting it hides the avatar and force-sets `UPI Handle Image: False` so left padding stays symmetric (imageless layout used by `ProfileCard` handle pills). Removed the bundled default `Image.png` placeholder. Consumer `UPI Handle Image` mode values are overridden by source presence so avatar visibility and token layout stay in lockstep. New `WithoutImage` story and MDX usage docs.
+- `Section` — `Section.Bento` stories updated with `UpiHandle` pills that pass explicit avatar `source` values, matching the Figma Bento nav/upi layout (node 216-13845).
+- Figma token sync — `context 10` mode renamed `Profile card` → `jioPlus`; `Profile Card Appearance` collection wired for `ProfileCard` / `UpiHandle`.
 - `Carousel` — new `type="Numbered"` variant: full-bleed slides with floating `AutoplayControl` + `NumberPagination` overlay at the bottom center; interactive play/pause state wired to autoplay.
 - `Carousel` — **Fix:** autoplay pagination no longer flickers back to the previous active page during scroll animations; `activeIndex` is derived from settled offsets instead of intermediate scroll positions.
-- `UpiHandle` — **Fix:** avatar image visibility now follows the presence of `source` / `avatarSource` (`showImage` no longer renders an empty avatar slot when no source is provided); `UPI Handle Image` mode is force-set from the resolved source so token layout stays in sync.
 - Regenerated component MDX token documentation and `.token-metadata.json` across the library.
 
 ---

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -15,6 +15,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 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); }
 /**
  * Brand link colour used by the selection-card CTA. The Figma node resolves
  * `button/foreground` to this value, but no reproducible token mode currently
@@ -111,7 +112,8 @@ function CompareTable({
   maxColumns = 4,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  disableTruncation
+  disableTruncation,
+  columnWidth
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -168,6 +170,70 @@ function CompareTable({
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
   /** Grid columns shared by the selection-card row and every table row. */
   const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
+  const showCardsRow = columnCount > 0 || showAddCard;
+
+  // --- fixed-width scroll mode -------------------------------------------
+  // `columnWidth` opts the component into scroll mode (see prop doc). In that
+  // mode the cards row and each section's table body are independent
+  // horizontal ScrollViews; their scroll events are chained so they move in
+  // lockstep, and the cards row pins to the top on the vertical axis.
+  const useFixedWidth = columnWidth != null;
+  /** Total scrollable content width shared by every horizontal surface. */
+  const contentWidth = useFixedWidth ? gridColumnCount * columnWidth : 0;
+  const cardsScrollRef = (0, _react.useRef)(null);
+  const bodyScrollRefs = (0, _react.useRef)(new Map());
+  // Stable per-section ref-callback instances so React doesn't detach/reattach
+  // on every render (which would churn the map and re-fire scrollTo).
+  const bodyRefCallbacks = (0, _react.useRef)(new Map());
+  /** Last offset we synced everyone to. Echoed onScroll events reporting this
+   *  same value are ignored — this is what prevents feedback loops. */
+  const lastSyncX = (0, _react.useRef)(0);
+  const applySync = (0, _react.useCallback)((x, source) => {
+    if (Math.abs(x - lastSyncX.current) < 0.5) return;
+    lastSyncX.current = x;
+    if (source !== 'cards' && cardsScrollRef.current) {
+      cardsScrollRef.current.scrollTo({
+        x,
+        animated: false
+      });
+    }
+    bodyScrollRefs.current.forEach((ref, idx) => {
+      if (source === 'cards' || idx !== source) {
+        ref.scrollTo({
+          x,
+          animated: false
+        });
+      }
+    });
+  }, []);
+  const onCardsScroll = (0, _react.useCallback)(e => {
+    applySync(e.nativeEvent.contentOffset.x, 'cards');
+  }, [applySync]);
+  const onBodyScroll = (0, _react.useCallback)(idx => e => {
+    applySync(e.nativeEvent.contentOffset.x, idx);
+  }, [applySync]);
+  const getBodyRefCallback = (0, _react.useCallback)(idx => {
+    let cb = bodyRefCallbacks.current.get(idx);
+    if (!cb) {
+      cb = ref => {
+        if (ref) {
+          bodyScrollRefs.current.set(idx, ref);
+          // Bring a freshly-expanded section's body into sync with
+          // the rest of the surfaces.
+          if (lastSyncX.current > 0) {
+            ref.scrollTo({
+              x: lastSyncX.current,
+              animated: false
+            });
+          }
+        } else {
+          bodyScrollRefs.current.delete(idx);
+        }
+      };
+      bodyRefCallbacks.current.set(idx, cb);
+    }
+    return cb;
+  }, []);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -198,8 +264,12 @@ function CompareTable({
     fontWeight: toWeight(cellFontWeight)
   };
   const cardStyle = {
-    flex: 1,
-    minWidth: 0,
+    ...(useFixedWidth ? {
+      width: columnWidth
+    } : {
+      flex: 1,
+      minWidth: 0
+    }),
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
@@ -318,6 +388,7 @@ function CompareTable({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Cell, {
       modes: modes,
       flex: 1,
+      width: useFixedWidth ? columnWidth : undefined,
       align: "left",
       isLastColumn: isLastCol,
       isLastRow: isLastRow,
@@ -371,31 +442,126 @@ function CompareTable({
       })
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      width: '100%',
-      backgroundColor: cardBg,
-      borderWidth: 1,
-      borderColor: '#e8e8e8',
-      overflow: 'hidden'
-    }, style],
-    children: [(columnCount > 0 || showAddCard) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // Render a single section in fixed-width scroll mode. Unlike `renderTable`
+  // (used in flex mode), the gray header row is rendered full-width OUTSIDE
+  // the body's horizontal ScrollView so it stays put horizontally (it does
+  // not slide with the cells) while still scrolling vertically with the table.
+  // The body rows live inside a horizontal ScrollView that is scroll-synced
+  // with the cards row and every other section's body.
+  const renderSection = (section, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
+    title: section.title,
+    defaultExpanded: section.defaultExpanded ?? index === 0,
+    modes: modes,
+    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        flexDirection: 'row',
-        width: '100%'
+        width: '100%',
+        backgroundColor: headerBg,
+        paddingHorizontal: headerPaddingH,
+        paddingVertical: headerPaddingV,
+        borderBottomWidth: cellBorderSize,
+        borderBottomColor: cellBorderColor
       },
-      children: [columns.map(renderCard), showAddCard && renderAddCard()]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: headerTextStyle,
+        children: section.header
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: getBodyRefCallback(index),
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onBodyScroll(index),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: contentWidth
+        },
+        children: section.rows.map((row, rowIndex) => {
+          const isLastRow = rowIndex === section.rows.length - 1;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              flexDirection: 'row',
+              width: '100%'
+            },
+            children: [Array.from({
+              length: columnCount
+            }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+          }, row.key ?? rowIndex);
+        })
+      })
+    })]
+  }, section.key ?? section.title ?? index);
+  const outerStyle = {
+    width: '100%',
+    backgroundColor: cardBg,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    overflow: 'hidden'
+  };
+
+  // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+  if (!useFixedWidth) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [outerStyle, style],
+      children: [showCardsRow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          width: '100%'
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+          title: section.title,
+          defaultExpanded: section.defaultExpanded ?? index === 0,
+          modes: modes,
+          children: renderTable(section)
+        }, section.key ?? section.title ?? index))
+      })]
+    });
+  }
+
+  // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
+  // The cards row (index 0) is a sticky header of the vertical ScrollView so
+  // it pins to the top while the sections scroll beneath. The cards row is
+  // itself a horizontal ScrollView, synced with every section body. For the
+  // vertical scroll (and thus the sticky behaviour) to engage, the host must
+  // give CompareTable a bounded height (e.g. a sized container or flex:1).
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [outerStyle, style, {
+      flexDirection: 'column',
+      flex: 1
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       style: {
-        width: '100%'
+        width: '100%',
+        flex: 1
       },
-      children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-        title: section.title,
-        defaultExpanded: section.defaultExpanded ?? index === 0,
-        modes: modes,
-        children: renderTable(section)
-      }, section.key ?? section.title ?? index))
-    })]
+      stickyHeaderIndices: showCardsRow ? [0] : [],
+      showsVerticalScrollIndicator: false,
+      directionalLockEnabled: true,
+      children: [showCardsRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        ref: cardsScrollRef,
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        scrollEventThrottle: 16,
+        onScroll: onCardsScroll,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            width: contentWidth
+          },
+          children: [columns.map(renderCard), showAddCard && renderAddCard()]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map(renderSection)
+      })]
+    })
   });
 }
 var _default = exports.default = CompareTable;

package/lib/commonjs/components/ContentSheet/ContentSheet.js

@@ -13,6 +13,18 @@ var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
 const IS_WEB = _reactNative.Platform.OS === 'web';
+
+// Spring config — mirrors the Drawer's bottom pop-up spring so the two
+// bottom-sheet surfaces share the exact same entrance feel (slight bounce,
+// snappy). Keep in sync with `Drawer.tsx` SPRING_CONFIG.
+const SPRING_CONFIG = {
+  damping: 32,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1
+};
 function resolveContentSheetStyle(modes) {
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/bg', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/gap', modes);
@@ -96,6 +108,7 @@ function ContentSheet({
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
   style,
   ...rest
 }) {
@@ -111,10 +124,25 @@ function ContentSheet({
     paddingBottom
   }, style], [pinToBottom, resolved.container, paddingBottom, style]);
 
+  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
+  // sheet is bottom-anchored, so a positive `translateY` equal to the window
+  // height parks it fully below the bottom edge. Springing it back to `0`
+  // produces the same bottom pop-up the Drawer uses. The shared value is
+  // initialised off-screen so the very first mount pops in (no flash).
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const entrance = (0, _reactNativeReanimated.useSharedValue)(windowHeight);
+  (0, _react.useEffect)(() => {
+    entrance.value = (0, _reactNativeReanimated.withSpring)(visible ? 0 : windowHeight, SPRING_CONFIG);
+  }, [visible, windowHeight, entrance]);
+
   // Switching between the keyboard-aware and plain implementation is keyed off
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
-  // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  // inside `KeyboardAwareSheet` always runs in a stable hook order. Both
+  // branches receive the `entrance` shared value so the bottom pop-up plays in
+  // every configuration.
   const header = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: resolved.headerStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -126,12 +154,14 @@ function ContentSheet({
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(KeyboardAwareSheet, {
       style: containerStyle,
       spacing: keyboardSpacing,
+      entrance: entrance,
       ...rest,
       children: [header, processedChildren]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSheet, {
     style: containerStyle,
+    entrance: entrance,
     ...rest,
     children: [header, processedChildren]
   });
@@ -139,25 +169,55 @@ function ContentSheet({
 /**
  * Native-only wrapper that lifts the sheet by the live keyboard height. The
  * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
- * sheet tracks the keyboard frame-for-frame without any JS work.
+ * sheet tracks the keyboard frame-for-frame without any JS work. The keyboard
+ * offset is summed with the entrance `translateY` (the bottom pop-up) inside a
+ * single `useAnimatedStyle` so both motions stay on the UI thread and never
+ * fight each other.
  */
 function KeyboardAwareSheet({
   style,
   spacing,
+  entrance,
   children,
   ...rest
 }) {
   const keyboard = (0, _reactNativeReanimated.useAnimatedKeyboard)();
-  const keyboardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const height = keyboard.height.value;
+    const keyboardOffset = height > 0 ? -(height + spacing) : 0;
+    return {
+      transform: [{
+        translateY: entrance.value + keyboardOffset
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [style, animatedStyle],
+    ...rest,
+    children: children
+  });
+}
+
+/**
+ * Entrance-only animated sheet (web, or when keyboard avoidance is disabled).
+ * Applies the same bottom pop-up `translateY` as `KeyboardAwareSheet`, minus
+ * the keyboard offset.
+ */
+function AnimatedSheet({
+  style,
+  entrance,
+  children,
+  ...rest
+}) {
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       transform: [{
-        translateY: height > 0 ? -(height + spacing) : 0
+        translateY: entrance.value
       }]
     };
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    style: [style, keyboardStyle],
+    style: [style, animatedStyle],
     ...rest,
     children: children
   });