jfs-components 0.0.86 → 0.0.99

package/lib/commonjs/skeleton/Skeleton.js

@@ -21,12 +21,20 @@ const SOLID_OVERLAY_COLOR = 'rgba(255, 255, 255, 1)';
 // `pointerEvents: 'none'` lives on the style (not the deprecated prop) so it
 // works on both native and React Native Web without warnings.
 const absoluteFillStyle = {
-  ..._reactNative.StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   overflow: 'hidden',
   pointerEvents: 'none'
 };
 const solidOverlayStyle = {
-  ..._reactNative.StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   backgroundColor: SOLID_OVERLAY_COLOR
 };
 

package/lib/module/assets.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/module/components/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 "use strict";
 
-import React, { useCallback, useEffect, useState, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
@@ -40,11 +40,17 @@ function rubberBand(value, min, max, friction = 0.55) {
   }
   return value;
 }
+
+/**
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
+ */
+
 /**
  * Drawer component with nested scrolling support.
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
-function Drawer({
+function DrawerInner({
   modes = EMPTY_MODES,
   style,
   title,
@@ -53,6 +59,7 @@ function Drawer({
   collapsedHeight = 200,
   expandedRatio = 0.90,
   initialState = 'collapsed',
+  state,
   contentStyle,
   sheetStyle,
   accessibilityLabel,
@@ -61,7 +68,7 @@ function Drawer({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange
-}) {
+}, ref) {
   const {
     height: screenHeight
   } = useWindowDimensions();
@@ -123,15 +130,58 @@ function Drawer({
     translateY.value = withSpring(destination, SPRING_CONFIG);
   }, [translateY]);
 
-  // Update JS state for accessibility/logic if needed
+  // Update the JS-side mode. Pure: only schedules the state update. Side
+  // effects (notifying the parent via onStateChange) MUST NOT live inside the
+  // setState updater — doing so calls the parent's setState during React's
+  // render phase, which throws "Cannot update a component while rendering a
+  // different component" and causes an infinite update loop. We report changes
+  // from a dedicated effect below instead.
   const updateMode = useCallback(newMode => {
-    setMode(prev => {
-      if (prev !== newMode) {
-        onStateChange?.(newMode);
-      }
-      return newMode;
-    });
-  }, [onStateChange]);
+    setMode(newMode);
+  }, []);
+
+  // Notify the parent exactly once per settled mode change, after commit.
+  const reportedModeRef = useRef(mode);
+  useEffect(() => {
+    if (reportedModeRef.current !== mode) {
+      reportedModeRef.current = mode;
+      onStateChange?.(mode);
+    }
+  }, [mode, onStateChange]);
+
+  // Programmatic transition (JS thread). Reuses the same spring as gestures:
+  // animates `translateY`, keeps the scroll-gate (`isFullyExpanded`) in sync,
+  // and updates `mode` (which notifies via the onStateChange effect above).
+  const applyMode = useCallback(newMode => {
+    const target = newMode === 'expanded' ? minTranslateY : maxTranslateY;
+    translateY.value = withSpring(target, SPRING_CONFIG);
+    isFullyExpanded.value = newMode === 'expanded';
+    setMode(newMode);
+  }, [minTranslateY, maxTranslateY, translateY, isFullyExpanded]);
+
+  // Controlled mode: react ONLY to genuine changes of the `state` prop, tracked
+  // against its previous value. We must NOT reconcile `state` against the
+  // internal `mode` on every render: a gesture updates `mode` optimistically
+  // one render before the parent echoes it back through `onStateChange` into
+  // `state`, so a `state !== mode` check would "correct" the gesture and fight
+  // the echo, ping-ponging forever (Maximum update depth exceeded).
+  // `applyMode` is idempotent, so re-applying the already-current mode is a
+  // no-op when the parent simply mirrors our own change back.
+  const prevStateProp = useRef(state);
+  useEffect(() => {
+    if (state === undefined) return;
+    if (state === prevStateProp.current) return;
+    prevStateProp.current = state;
+    applyMode(state);
+  }, [state, applyMode]);
+
+  // Imperative API for parents holding a ref.
+  useImperativeHandle(ref, () => ({
+    expand: () => applyMode('expanded'),
+    collapse: () => applyMode('collapsed'),
+    toggle: () => applyMode(mode === 'expanded' ? 'collapsed' : 'expanded'),
+    getState: () => mode
+  }), [applyMode, mode]);
 
   // Gesture policy:
   //  • activeOffsetY: require a clear *vertical* drag (10px) before this
@@ -304,84 +354,96 @@ function Drawer({
     default: {}
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
-  return /*#__PURE__*/_jsx(GestureHandlerRootView, {
-    style: [styles.host, style],
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: gesture,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.sheet, {
-          // Constraint the height strictly to the expanded height
-          // This ensures the ScrollView has a finite frame to scroll within
-          height: expandedHeight,
-          backgroundColor,
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius
-        }, shadowStyle, sheetStyle, animatedStyle],
-        accessible: true,
-        ...(Platform.OS === 'web' ? {
-          accessibilityRole: 'dialog'
-        } : undefined),
-        accessibilityLabel: undefined,
-        accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: /*#__PURE__*/_jsxs(View, {
-          style: [styles.sheetInner, {
+  return (
+    /*#__PURE__*/
+    // IMPORTANT: the host is a plain box-none View, NOT a GestureHandlerRootView.
+    // On Android, GestureHandlerRootView renders a *native* root view that
+    // intercepts every touch within its bounds (to feed the gesture system) and
+    // does NOT honor pointerEvents="box-none". Because this host fills the whole
+    // screen as an overlay, using GestureHandlerRootView here swallowed all
+    // touches to content rendered behind the drawer (buttons, page content).
+    // Per the standard react-native-gesture-handler architecture, a single
+    // GestureHandlerRootView must wrap the app root; this overlay only needs to
+    // let touches fall through where the sheet isn't.
+    _jsx(View, {
+      style: [styles.host, style],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: gesture,
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.sheet, {
+            // Constraint the height strictly to the expanded height
+            // This ensures the ScrollView has a finite frame to scroll within
+            height: expandedHeight,
+            backgroundColor,
             borderTopLeftRadius: radius,
-            borderTopRightRadius: radius,
-            paddingLeft,
-            paddingRight,
-            paddingBottom,
-            rowGap: drawerGap
-          }],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.handleArea, !title && !header && {
-              paddingBottom: 0
+            borderTopRightRadius: radius
+          }, shadowStyle, sheetStyle, animatedStyle],
+          accessible: true,
+          ...(Platform.OS === 'web' ? {
+            accessibilityRole: 'dialog'
+          } : undefined),
+          accessibilityLabel: undefined,
+          accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
+          children: /*#__PURE__*/_jsxs(View, {
+            style: [styles.sheetInner, {
+              borderTopLeftRadius: radius,
+              borderTopRightRadius: radius,
+              paddingLeft,
+              paddingRight,
+              paddingBottom,
+              rowGap: drawerGap
             }],
-            children: /*#__PURE__*/_jsx(View, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.handleArea, !title && !header && {
+                paddingBottom: 0
+              }],
+              children: /*#__PURE__*/_jsx(View, {
+                style: [{
+                  backgroundColor: handleColor,
+                  width: handleWidth,
+                  height: handleHeight,
+                  borderRadius: handleRadius
+                }]
+              })
+            }), header, title && /*#__PURE__*/_jsx(Text, {
               style: [{
-                backgroundColor: handleColor,
-                width: handleWidth,
-                height: handleHeight,
-                borderRadius: handleRadius
-              }]
-            })
-          }), header, title && /*#__PURE__*/_jsx(Text, {
-            style: [{
-              color: titleColor,
-              fontSize: titleSize,
-              fontWeight: titleWeight,
-              lineHeight: titleLineHeight,
-              marginBottom: titlePaddingBottom
-            }],
-            children: title
-          }), /*#__PURE__*/_jsx(AnimatedScrollView, {
-            ref: scrollRef,
-            style: [styles.content, contentStyle],
-            contentContainerStyle: [{
-              paddingBottom: paddingBottom + bottomInset,
-              gap: drawerGap,
-              flexDirection: 'column',
-              alignItems: 'stretch'
-            }, contentContainerStyle],
-            showsVerticalScrollIndicator: showsVerticalScrollIndicator
-            // Let a tap on an input inside the sheet focus it on the FIRST tap
-            // even while the keyboard is already open (default 'never' would
-            // eat that tap just to dismiss the keyboard).
-            ,
-            keyboardShouldPersistTaps: "handled",
-            animatedProps: animatedScrollProps,
-            alwaysBounceVertical: false,
-            overScrollMode: "always",
-            onScroll: useAnimatedScrollHandler(event => {
-              scrollY.value = event.contentOffset.y;
-            }),
-            scrollEventThrottle: 16,
-            children: children
-          })]
+                color: titleColor,
+                fontSize: titleSize,
+                fontWeight: titleWeight,
+                lineHeight: titleLineHeight,
+                marginBottom: titlePaddingBottom
+              }],
+              children: title
+            }), /*#__PURE__*/_jsx(AnimatedScrollView, {
+              ref: scrollRef,
+              style: [styles.content, contentStyle],
+              contentContainerStyle: [{
+                paddingBottom: paddingBottom + bottomInset,
+                gap: drawerGap,
+                flexDirection: 'column',
+                alignItems: 'stretch'
+              }, contentContainerStyle],
+              showsVerticalScrollIndicator: showsVerticalScrollIndicator
+              // Let a tap on an input inside the sheet focus it on the FIRST tap
+              // even while the keyboard is already open (default 'never' would
+              // eat that tap just to dismiss the keyboard).
+              ,
+              keyboardShouldPersistTaps: "handled",
+              animatedProps: animatedScrollProps,
+              alwaysBounceVertical: false,
+              overScrollMode: "always",
+              onScroll: useAnimatedScrollHandler(event => {
+                scrollY.value = event.contentOffset.y;
+              }),
+              scrollEventThrottle: 16,
+              children: children
+            })]
+          })
         })
       })
     })
-  });
+  );
 }
 const styles = StyleSheet.create({
   host: {
@@ -411,4 +473,6 @@ const styles = StyleSheet.create({
     flex: 1
   }
 });
+const Drawer = /*#__PURE__*/forwardRef(DrawerInner);
+Drawer.displayName = 'Drawer';
 export default Drawer;

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import React, { useMemo } from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import React, { useMemo, useRef } from 'react';
+import { View, Text, Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -28,6 +29,19 @@ const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
   context5: 'Fullscreen Modal'
 });
 
+// ---------------------------------------------------------------------------
+// Default modes
+//
+// A FullscreenModal is a "JioPlus" surface, so it defaults the `Page type`
+// collection to `'JioPlus'`. Unlike the forced modes above this IS
+// overridable — it is applied before the caller's `modes`, so passing
+// `modes={{ 'Page type': 'SubPage' }}` still wins. Frozen for stable identity
+// (keeps the token resolver's per-modes cache hot).
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_DEFAULT_MODES = Object.freeze({
+  'Page type': 'JioPlus'
+});
+
 // ---------------------------------------------------------------------------
 // Hero text — the eyebrow / headline / supporting / price block. Built inline
 // (rather than reusing <PageHero>) so we can render BOTH a supporting
@@ -127,12 +141,21 @@ function HeroText({
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Hero
- * The `heroMedia` is rendered full modal width inside the scroll body and
- * takes its height from its own aspect ratio. The hero text (eyebrow /
- * headline / supporting / price) is overlaid on top, anchored to the bottom.
- * The whole hero scrolls together with the rest of the content — there is no
- * parallax effect.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -142,7 +165,7 @@ function HeroText({
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -167,7 +190,6 @@ function FullscreenModal({
   primaryActionLabel = 'Upgrade for free',
   onPrimaryAction,
   disclaimer = "By upgrading, we'll check your eligibility with Experian.",
-  backgroundColor = '#0f0d0a',
   children,
   modes: propModes = EMPTY_MODES,
   style,
@@ -178,31 +200,74 @@ function FullscreenModal({
     modes: globalModes
   } = useTokens();
 
-  // context5 is appended last so it always wins, regardless of what the
-  // caller (or the global theme) passes.
+  // Merge order (low → high priority):
+  //   global theme → component defaults (Page type: JioPlus) → caller modes →
+  //   forced modes (context5). So `Page type` defaults to JioPlus but the
+  //   caller can override it, while `context5` always wins. This single `modes`
+  //   object is what cascades to the body, hero media, and the ActionFooter.
   const modes = useMemo(() => ({
     ...globalModes,
+    ...FULLSCREEN_MODAL_DEFAULT_MODES,
     ...propModes,
     ...FULLSCREEN_MODAL_FORCED_MODES
   }), [globalModes, propModes]);
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
+
+  // Safe-area insets so the floating chrome clears the system bars: the close
+  // button drops below the status bar / notch, and the sticky footer keeps its
+  // designed bottom padding ON TOP of the bottom inset (home indicator /
+  // Android gesture or nav bar). On web — and anywhere without a
+  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  const insets = useSafeAreaInsets();
+  const closeButtonInsetStyle = useMemo(() => ({
+    top: 12 + insets.top
+  }), [insets.top]);
+  // Extend (not replace) the footer's token bottom padding by the bottom inset
+  // so the action button never sits under the system navigation area.
+  const footerInsetStyle = useMemo(() => {
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41;
+    return {
+      paddingBottom: base + insets.bottom
+    };
+  }, [modes, insets.bottom]);
+
+  // Drives the background's parallax-free sync with the scroll. The hero media
+  // lives at the ROOT (so it is never clipped to the content height and sits
+  // behind the transparent footer), but we translate it up by the exact scroll
+  // offset so it moves in lockstep with the content — i.e. it scrolls WITH the
+  // body without ever contributing to the scroll height.
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const onScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true
+  }), [scrollY]);
+  const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY]);
   const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
   const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
 
-  // No-media fallback: without hero media the text region needs an explicit
-  // resting height (driven by `heroHeight`) so the hero still has presence.
-  const heroTextFallbackStyle = useMemo(() => ({
+  // The hero text region always reserves `heroHeight` and anchors its content
+  // to the bottom, so the eyebrow/headline block sits in the lower part of the
+  // first screenful — over the background media when present, in flow
+  // otherwise.
+  const heroTextRegionStyle = useMemo(() => ({
     minHeight: heroHeight,
     justifyContent: 'flex-end',
     paddingHorizontal: 16,
     paddingBottom: 16
   }), [heroHeight]);
+
+  // Body is intentionally transparent — the background media shows through
+  // behind it. There is no solid "body box" stacked on top of the image.
   const bodyStyle = useMemo(() => [{
-    backgroundColor,
     gap: rootGap,
     paddingTop: rootGap,
     paddingBottom: 24
-  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
+  }, contentContainerStyle], [rootGap, contentContainerStyle]);
   const heroTextNode = /*#__PURE__*/_jsx(HeroText, {
     eyebrow: eyebrow,
     headline: headline,
@@ -211,22 +276,6 @@ function FullscreenModal({
     modes: modes
   });
 
-  // The hero scrolls inline with the body (no parallax). When media is present
-  // it is laid out full modal width and takes its height from its own aspect
-  // ratio; the hero text is overlaid on top, anchored to the bottom. Without
-  // media the text simply renders in flow at the fallback height.
-  const hero = processedHeroMedia ? /*#__PURE__*/_jsxs(View, {
-    style: heroMediaContainerStyle,
-    children: [processedHeroMedia, /*#__PURE__*/_jsx(View, {
-      style: heroTextOverlayStyle,
-      pointerEvents: "box-none",
-      children: heroTextNode
-    })]
-  }) : /*#__PURE__*/_jsx(View, {
-    style: heroTextFallbackStyle,
-    children: heroTextNode
-  });
-
   // Footer: a fully custom node, or the default Button + Disclaimer column.
   let footerContent = null;
   if (footer) {
@@ -249,30 +298,45 @@ function FullscreenModal({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    style: [rootStyle, {
-      backgroundColor
-    }, style],
+    style: [rootStyle, style],
     testID: testID,
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
+    children: [processedHeroMedia ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [heroBackgroundStyle, {
+        transform: [{
+          translateY: heroTranslateY
+        }]
+      }],
+      pointerEvents: "none",
+      children: processedHeroMedia
+    }) : null, /*#__PURE__*/_jsx(Animated.ScrollView, {
       style: scrollViewStyle,
       contentContainerStyle: scrollContentStyle,
-      showsVerticalScrollIndicator: false
+      showsVerticalScrollIndicator: false,
+      onScroll: onScroll,
+      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: [hero, /*#__PURE__*/_jsx(View, {
-        style: bodyStyle,
-        children: processedChildren
-      })]
+      children: /*#__PURE__*/_jsxs(View, {
+        style: foregroundFlowStyle,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: heroTextRegionStyle,
+          children: heroTextNode
+        }), processedChildren ? /*#__PURE__*/_jsx(View, {
+          style: bodyStyle,
+          children: processedChildren
+        }) : null]
+      })
     }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
       modes: modes,
+      style: footerInsetStyle,
       children: footerContent
     }) : null, showClose ? /*#__PURE__*/_jsx(IconButton, {
       iconName: "ic_close",
       modes: modes,
       accessibilityLabel: closeAccessibilityLabel,
-      style: closeButtonStyle,
+      style: [closeButtonStyle, closeButtonInsetStyle],
       ...(onClose ? {
         onPress: onClose
       } : {})
@@ -300,16 +364,19 @@ const closeButtonStyle = {
   top: 12,
   right: 12
 };
-// Full-width hero wrapper; height comes from the media's own aspect ratio.
-const heroMediaContainerStyle = {
-  width: '100%',
-  position: 'relative'
+// Root-level full-bleed background media. Pinned to the top at full modal
+// width; the media inside keeps its own natural aspect ratio (only `top` is
+// pinned — no `bottom`/`overflow` clip), so it is NEVER cut to the content
+// height and fills the surface behind the scrolling content and the footer.
+// Living outside the ScrollView, it adds nothing to the scroll height.
+const heroBackgroundStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0
 };
-// Hero text overlaid on the media, anchored to the bottom edge.
-const heroTextOverlayStyle = {
-  ...StyleSheet.absoluteFillObject,
-  justifyContent: 'flex-end',
-  paddingHorizontal: 16,
-  paddingBottom: 16
+// The foreground always flows normally — its content drives the scroll height.
+const foregroundFlowStyle = {
+  width: '100%'
 };
 export default FullscreenModal;