jfs-components 0.0.95 → 0.0.99

package/lib/module/skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useId, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from 'react-native-svg';
 import { getVariableByName } from '../design-tokens/figma-variables-resolver';
@@ -16,12 +16,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 = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   overflow: 'hidden',
   pointerEvents: 'none'
 };
 const solidOverlayStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   backgroundColor: SOLID_OVERLAY_COLOR
 };
 

package/lib/typescript/src/components/Drawer/Drawer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type DrawerProps = {
+export type DrawerProps = {
     modes?: Record<string, any>;
     style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
     title?: string;
@@ -11,7 +11,19 @@ type DrawerProps = {
     children?: React.ReactNode;
     collapsedHeight?: number;
     expandedRatio?: number;
+    /**
+     * Sets the drawer state when it first mounts (uncontrolled mode).
+     * Ignored once `state` is provided (controlled mode).
+     */
     initialState?: 'collapsed' | 'expanded';
+    /**
+     * Programmatically controls the drawer's collapsed/expanded state.
+     * When provided, the drawer becomes a controlled component: it will
+     * animate to match this value (reusing the same spring used by gestures)
+     * and gesture-driven changes are reported via `onStateChange` for the
+     * parent to apply back. Leave undefined for uncontrolled behaviour.
+     */
+    state?: 'collapsed' | 'expanded';
     contentStyle?: any;
     sheetStyle?: any;
     accessibilityLabel?: string;
@@ -31,9 +43,16 @@ type DrawerProps = {
     onStateChange?: (state: 'collapsed' | 'expanded') => void;
 };
 /**
- * Drawer component with nested scrolling support.
- * Uses react-native-gesture-handler and react-native-reanimated.
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
  */
-declare function Drawer({ modes, style, title, header, children, collapsedHeight, expandedRatio, initialState, contentStyle, sheetStyle, accessibilityLabel, accessibilityHint, contentContainerStyle, showsVerticalScrollIndicator, bottomInset, onStateChange, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerHandle = {
+    expand: () => void;
+    collapse: () => void;
+    toggle: () => void;
+    /** Current settled state of the drawer. */
+    getState: () => 'collapsed' | 'expanded';
+};
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerHandle>>;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -22,7 +22,7 @@ export { default as CardFinancialCondition, type CardFinancialConditionProps } f
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
-export { default as Drawer } from './Drawer/Drawer';
+export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';

package/lib/typescript/src/icons/registry.d.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-06-04T14:40:09.533Z
+ * Generated: 2026-06-08T14:11:35.036Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.95",
+  "version": "0.0.99",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Drawer/Drawer.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { Platform, StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native'
 import {
   Gesture,
   GestureDetector,
-  GestureHandlerRootView,
   ScrollView,
 } from 'react-native-gesture-handler'
 import Animated, {
@@ -53,7 +52,7 @@ function rubberBand(value: number, min: number, max: number, friction: number =
   return value
 }
 
-type DrawerProps = {
+export type DrawerProps = {
 
   modes?: Record<string, any>
   style?: import('react-native').StyleProp<import('react-native').ViewStyle>
@@ -66,7 +65,19 @@ type DrawerProps = {
   children?: React.ReactNode
   collapsedHeight?: number
   expandedRatio?: number
+  /**
+   * Sets the drawer state when it first mounts (uncontrolled mode).
+   * Ignored once `state` is provided (controlled mode).
+   */
   initialState?: 'collapsed' | 'expanded'
+  /**
+   * Programmatically controls the drawer's collapsed/expanded state.
+   * When provided, the drawer becomes a controlled component: it will
+   * animate to match this value (reusing the same spring used by gestures)
+   * and gesture-driven changes are reported via `onStateChange` for the
+   * parent to apply back. Leave undefined for uncontrolled behaviour.
+   */
+  state?: 'collapsed' | 'expanded'
   contentStyle?: any
   sheetStyle?: any
   accessibilityLabel?: string
@@ -86,11 +97,23 @@ type DrawerProps = {
   onStateChange?: (state: 'collapsed' | 'expanded') => void
 }
 
+/**
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
+ */
+export type DrawerHandle = {
+  expand: () => void
+  collapse: () => void
+  toggle: () => void
+  /** Current settled state of the drawer. */
+  getState: () => 'collapsed' | 'expanded'
+}
+
 /**
  * Drawer component with nested scrolling support.
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
-function Drawer({
+function DrawerInner({
 
   modes = EMPTY_MODES,
   style,
@@ -100,6 +123,7 @@ function Drawer({
   collapsedHeight = 200,
   expandedRatio = 0.90,
   initialState = 'collapsed',
+  state,
   contentStyle,
   sheetStyle,
   accessibilityLabel,
@@ -108,7 +132,7 @@ function Drawer({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange,
-}: DrawerProps) {
+}: DrawerProps, ref: React.Ref<DrawerHandle>) {
   const { height: screenHeight } = useWindowDimensions()
 
   // Calculate snap points
@@ -168,15 +192,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: 'collapsed' | 'expanded') => {
-    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: 'collapsed' | 'expanded') => {
+    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
@@ -362,7 +429,16 @@ function Drawer({
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
   return (
-    <GestureHandlerRootView style={[styles.host, style]} pointerEvents="box-none">
+    // 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.
+    <View style={[styles.host, style]} pointerEvents="box-none">
       <GestureDetector gesture={gesture}>
         <Animated.View
           style={[
@@ -457,7 +533,7 @@ function Drawer({
           </View>
         </Animated.View>
       </GestureDetector>
-    </GestureHandlerRootView>
+    </View>
   )
 }
 
@@ -492,4 +568,7 @@ const styles = StyleSheet.create({
   },
 })
 
+const Drawer = forwardRef<DrawerHandle, DrawerProps>(DrawerInner)
+Drawer.displayName = 'Drawer'
+
 export default Drawer

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -7,6 +7,7 @@ import {
   type ViewStyle,
   type TextStyle,
 } 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'
@@ -260,6 +261,23 @@ function FullscreenModal({
 
   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<ViewStyle>(
+    () => ({ 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<ViewStyle>(() => {
+    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
@@ -388,7 +406,9 @@ function FullscreenModal({
       </Animated.ScrollView>
 
       {footerContent ? (
-        <ActionFooter modes={modes}>{footerContent}</ActionFooter>
+        <ActionFooter modes={modes} style={footerInsetStyle}>
+          {footerContent}
+        </ActionFooter>
       ) : null}
 
       {showClose ? (
@@ -396,7 +416,7 @@ function FullscreenModal({
           iconName="ic_close"
           modes={modes}
           accessibilityLabel={closeAccessibilityLabel}
-          style={closeButtonStyle}
+          style={[closeButtonStyle, closeButtonInsetStyle]}
           {...(onClose ? { onPress: onClose } : {})}
         />
       ) : null}

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
 import Animated, {
   Easing,
   cancelAnimation,
@@ -171,7 +171,7 @@ const useSegmentRotation = (
     }
   }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac])
 
-const fullSize: ViewStyle = { ...StyleSheet.absoluteFillObject }
+const fullSize: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }
 
 function Spinner({
   size = DEFAULT_SIZE,

package/src/components/index.ts

@@ -22,7 +22,7 @@ export { default as CardFinancialCondition, type CardFinancialConditionProps } f
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
-export { default as Drawer } from './Drawer/Drawer';
+export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';

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-06-04T14:40:09.533Z
+ * Generated: 2026-06-08T14:11:35.036Z
  */
 
 // Icon name to SVG data mapping

package/src/skeleton/Skeleton.tsx

@@ -1,7 +1,6 @@
 import React, { useId, useMemo, useState } from 'react'
 import {
   type LayoutChangeEvent,
-  StyleSheet,
   View,
   type DimensionValue,
   type StyleProp,
@@ -60,13 +59,21 @@ 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: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   overflow: 'hidden',
   pointerEvents: 'none',
 }
 
 const solidOverlayStyle: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   backgroundColor: SOLID_OVERLAY_COLOR,
 }