jfs-components 0.0.79 → 0.0.85

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -145,7 +145,7 @@ function DropdownInput({
   supportText,
   errorMessage,
   menuMaxHeight = 240,
-  menuOffset = 6,
+  menuOffset,
   matchTriggerWidth = true,
   closeOnBackdropPress = true,
   modes: propModes = _reactUtils.EMPTY_MODES,
@@ -208,10 +208,29 @@ function DropdownInput({
   const tokens = useFormFieldTokens(modes);
   const chevron = useChevronTokens(modes);
 
+  // Gap between the input and the popup. Falls back to the `formField/gap`
+  // token so the menu's offset matches the field's own internal spacing.
+  const effectiveMenuOffset = menuOffset ?? tokens.gap;
+
   // ---------------- Layout / measurement ----------------
   const triggerRef = (0, _react.useRef)(null);
   const [triggerRect, setTriggerRect] = (0, _react.useState)(null);
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+
+  // Android coordinate-space bridge.
+  //
+  // The popup lives inside a `statusBarTranslucent` Modal, whose window is
+  // laid out from the PHYSICAL top of the screen (behind the status bar).
+  // The trigger, however, is rendered inside the app's content area (Expo
+  // Router / react-native-screens under edge-to-edge), so its
+  // `measureInWindow` Y is relative to the content area — it does NOT include
+  // the status bar height. Feeding that Y straight into the Modal would place
+  // the popup one status-bar-height too high, landing it on top of the input.
+  //
+  // Adding `insets.top` converts the trigger's content-relative Y into the
+  // Modal's full-screen coordinate space. iOS/web share a single coordinate
+  // space for the Modal and the trigger, so no shift is needed there.
+  const windowTopOffset = _reactNative.Platform.OS === 'android' ? insets.top : 0;
   const measure = (0, _react.useCallback)(() => {
     if (!triggerRef.current) return;
     triggerRef.current.measureInWindow((x, y, width, height) => {
@@ -277,7 +296,7 @@ function DropdownInput({
     const spaceBelow = windowHeight - (triggerRect.y + triggerRect.height) - insets.bottom;
     const spaceAbove = triggerRect.y - insets.top;
     const desiredHeight = Math.min(menuSize?.height ?? menuMaxHeight, menuMaxHeight);
-    const needed = desiredHeight + menuOffset + 8;
+    const needed = desiredHeight + effectiveMenuOffset + 8;
     if (placement === 'top') {
       return spaceAbove >= needed || spaceAbove >= spaceBelow ? 'top' : 'bottom';
     }
@@ -285,7 +304,7 @@ function DropdownInput({
       return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
     }
     return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
-  }, [triggerRect, placement, windowHeight, menuSize?.height, menuMaxHeight, menuOffset, insets.top, insets.bottom]);
+  }, [triggerRect, placement, windowHeight, menuSize?.height, menuMaxHeight, effectiveMenuOffset, insets.top, insets.bottom]);
   const popupStyle = (0, _react.useMemo)(() => {
     if (!triggerRect) {
       return {
@@ -304,15 +323,18 @@ function DropdownInput({
     const minLeft = insets.left + screenPadding;
     if (leftPos > maxLeft) leftPos = maxLeft;
     if (leftPos < minLeft) leftPos = minLeft;
+
+    // Trigger top expressed in the Modal's (full-screen) coordinate space.
+    const triggerTop = triggerRect.y + windowTopOffset;
     let topPos;
     if (computedPlacement === 'top') {
       const desiredHeight = menuSize?.height ?? menuMaxHeight;
-      topPos = triggerRect.y - desiredHeight - menuOffset;
+      topPos = triggerTop - desiredHeight - effectiveMenuOffset;
       if (topPos < insets.top + screenPadding) {
         topPos = insets.top + screenPadding;
       }
     } else {
-      topPos = triggerRect.y + triggerRect.height + menuOffset;
+      topPos = triggerTop + triggerRect.height + effectiveMenuOffset;
     }
     const style = {
       position: 'absolute',
@@ -324,7 +346,7 @@ function DropdownInput({
     // the wrong place. menuSize becomes truthy after the first layout.
     if (menuSize == null) style.opacity = 0;
     return style;
-  }, [triggerRect, computedPlacement, menuSize, menuOffset, menuMaxHeight, matchTriggerWidth, windowWidth, insets.top, insets.left, insets.right]);
+  }, [triggerRect, computedPlacement, menuSize, effectiveMenuOffset, windowTopOffset, menuMaxHeight, matchTriggerWidth, windowWidth, insets.top, insets.left, insets.right]);
 
   // Reset menu size when closing so the next open re-measures (handles items
   // changing while the menu was closed).
@@ -513,6 +535,8 @@ function DropdownInput({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
       visible: isOpen,
       transparent: true,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
       animationType: "fade",
       onRequestClose: closeMenu,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -88,8 +88,6 @@ function ExpandableCheckbox({
   }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('expandableCheckbox/gap', modes) ?? 8;
   const rowGap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
-  const rowPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
-  const rowPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/foreground', modes) ?? '#1a1c1f';
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
   const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontSize', modes) ?? 14;
@@ -110,11 +108,9 @@ function ExpandableCheckbox({
     alignSelf: isExpanded ? 'stretch' : 'auto',
     minWidth: 0,
     flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: rowGap,
-    paddingHorizontal: rowPaddingHorizontal,
-    paddingVertical: rowPaddingVertical
-  }), [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]);
+    alignItems: isExpanded ? 'flex-start' : 'center',
+    gap: rowGap
+  }), [isExpanded, rowGap]);
   const resolvedLabelStyle = (0, _react.useMemo)(() => ({
     flex: 1,
     minWidth: 0,
@@ -122,11 +118,21 @@ function ExpandableCheckbox({
     fontFamily: labelFontFamily,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+    fontWeight: labelFontWeight,
+    // Android adds asymmetric font padding and top-aligns the glyph inside
+    // an inflated line box when `lineHeight` is set. That makes the centered
+    // checkbox look like it drops below the text. Disabling the extra
+    // padding + centering the glyph keeps the single-line label optically
+    // aligned with the checkbox. No-op on iOS / web.
+    includeFontPadding: false,
+    textAlignVertical: isExpanded ? 'top' : 'center'
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight, isExpanded]);
+
+  // Layer component modes first (e.g. Color Mode), then button defaults so
+  // Secondary / XS / Low always win unless a dedicated override prop is added.
   const buttonModes = (0, _react.useMemo)(() => ({
-    ...BUTTON_DEFAULT_MODES,
-    ...modes
+    ...modes,
+    ...BUTTON_DEFAULT_MODES
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;

package/lib/commonjs/components/FormField/FormField.js

@@ -208,16 +208,6 @@ function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
-  // Ref to the native input so tapping anywhere in the input row (padding,
-  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
-  // "two taps to open the keyboard" issue caused by the row intercepting the
-  // initial touch.
-  const inputRef = (0, _react.useRef)(null);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!interactive) return;
-    inputRef.current?.focus();
-  }, [interactive]);
-
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -350,16 +340,13 @@ function FormField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [inputRowStyle, inputStyle],
-      onPress: focusInput,
-      accessible: false,
       children: [processedLeading != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -301,7 +301,11 @@ function FullscreenModal({
       contentContainerStyle: scrollContentStyle,
       showsVerticalScrollIndicator: false,
       onScroll: onScroll,
-      scrollEventThrottle: 16,
+      scrollEventThrottle: 16
+      // Tap an input in the body and it focuses on the FIRST tap, even when
+      // the keyboard is already open (default 'never' eats that tap).
+      ,
+      keyboardShouldPersistTaps: "handled",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: heroTextRegionStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeroText, {

package/lib/commonjs/components/ListItem/ListItem.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
@@ -150,7 +149,7 @@ const verticalSupportTextOverride = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
@@ -219,13 +218,9 @@ function ListItemImpl({
   // 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 = (0, _react.useMemo)(() => {
-    const processed = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes, SLOT_FORCED_MODES) : [];
-    if (processed.length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-        modes: tokens.resolvedModes,
-        accessibilityLabel: undefined
-      });
-    }
+    if (leading == null) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), tokens.resolvedModes, SLOT_FORCED_MODES);
+    if (processed.length === 0) return null;
     return processed.length === 1 ? processed[0] : processed;
   }, [leading, tokens.resolvedModes]);
   const processedSupportSlot = (0, _react.useMemo)(() => {
@@ -275,7 +270,7 @@ function ListItemImpl({
   if (layout === 'Horizontal') {
     const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: innerContentStyleArray,
-      children: [leadingElement, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [leadingElement ?? null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
           flex: 1,
           minWidth: 1,
@@ -322,7 +317,7 @@ function ListItemImpl({
   // Vertical layout — icon on top, support text/slot below
   const verticalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: verticalContentStyleArray,
-    children: [leadingElement, renderSupportContent()]
+    children: [leadingElement ?? null, renderSupportContent()]
   });
   if (onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/MessageField/MessageField.js

@@ -145,15 +145,6 @@ function MessageField({
   const currentValue = isControlled ? value : uncontrolledValue;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
-
-  // Ref to the native textarea so tapping anywhere in the (padded) textarea
-  // container focuses it on the FIRST tap, fixing the Android "two taps to
-  // open the keyboard" issue.
-  const inputRef = (0, _react.useRef)(null);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!interactive) return;
-    inputRef.current?.focus();
-  }, [interactive]);
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
@@ -288,12 +279,9 @@ function MessageField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [textareaContainerStyle, textareaStyle],
-      onPress: focusInput,
-      accessible: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: inputRef,
         multiline: true,
         value: currentValue,
         onChangeText: handleChangeText,

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -22,6 +22,7 @@ function MetricLegendItem({
   label = 'Current (4 months)',
   value,
   indicatorColor,
+  indicatorShape = 'dot',
   modes = _reactUtils.EMPTY_MODES,
   style,
   indicatorStyle,
@@ -54,7 +55,12 @@ function MetricLegendItem({
     }, style],
     accessibilityRole: "text",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
+      style: [indicatorShape === 'line' ? {
+        width: indicatorSize * 2,
+        height: Math.max(2, Math.round(indicatorSize / 4)),
+        borderRadius: indicatorRadius,
+        backgroundColor: indicatorBg
+      } : {
         width: indicatorSize,
         height: indicatorSize,
         borderRadius: indicatorRadius,

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PaymentFeedback;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
@@ -12,11 +12,10 @@ var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"))
 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); }
 function PaymentFeedback({
   title = '₹50,000',
   subtitle = 'Payment successful',
-  body = 'Your payment has been\nsuccessfully processed.',
+  body,
   details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
   showDetails = true,
   iconName = 'ic_confirm',
@@ -103,17 +102,21 @@ function PaymentFeedback({
     fontWeight: String(detailsFontWeight),
     textAlign: 'center'
   };
-  const mediaContent = /*#__PURE__*/(0, _react.isValidElement)(renderMedia) ? /*#__PURE__*/(0, _react.cloneElement)(renderMedia, {
-    modes
-  }) : renderMedia;
+
+  // Cascade modes into a custom media slot (per the modes-cascade convention);
+  // any modes the consumer set on the slot child still take precedence.
+  const mediaContent = renderMedia != null ? (0, _reactUtils.cloneChildrenWithModes)(renderMedia, modes) : null;
   const defaultMedia = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
-    iconName: iconName,
+    iconName: iconName
+    // `positive` is the default; consumers override the capsule color by
+    // passing `AppearanceSystem` (or any other mode) via the `modes` prop.
+    ,
     modes: {
+      AppearanceSystem: 'positive',
       ...modes,
       'Icon Capsule Size': 'L',
       Emphasis: 'High',
-      'Semantic Intent': 'System',
-      AppearanceSystem: 'positive'
+      'Semantic Intent': 'System'
     }
   });
   const detailLines = details?.split('\n') ?? [];