jfs-components 0.0.62 → 0.0.64

package/src/components/Drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react'
-import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { Platform, StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -15,6 +15,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
@@ -86,7 +87,7 @@ type DrawerProps = {
  */
 function Drawer({
 
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   title,
   header,
@@ -166,10 +167,19 @@ function Drawer({
     setMode(newMode)
   }, [])
 
+  // Gesture policy:
+  //  • activeOffsetY: require a clear *vertical* drag (10px) before this
+  //    pan claims the gesture.  Matches typical iOS scroll activation feel.
+  //  • failOffsetX:  if the finger crosses ~16px horizontally *before* we
+  //    activate, surrender the gesture entirely so any horizontal child
+  //    (FlatList horizontal, swiper, slider, etc.) can scroll cleanly
+  //    without the drawer also translating on Y.
+  //  • simultaneousWithExternalGesture(scrollRef): cooperate with the
+  //    drawer's own internal vertical ScrollView for nested scrolling.
   const gesture = Gesture.Pan()
     .simultaneousWithExternalGesture(scrollRef)
-    .activeOffsetY([-5, 5])
-    .activeOffsetX([-5, 5])
+    .activeOffsetY([-10, 10])
+    .failOffsetX([-16, 16])
     .onStart(() => {
       context.value = { y: translateY.value }
       isDrawerActive.value = true
@@ -178,6 +188,16 @@ function Drawer({
       scrollTopTranslationOffset.value = 0
     })
     .onUpdate((event) => {
+      // Defense-in-depth: even after vertical activation, if the *current*
+      // motion is dominantly horizontal (e.g., the user activated with a
+      // small Y nudge and then curved into a horizontal swipe on a child
+      // carousel), don't translate the drawer this frame.  failOffsetX
+      // already prevents activation in pure-horizontal swipes; this guards
+      // the diagonal-then-horizontal case.
+      if (Math.abs(event.translationX) > Math.abs(event.translationY) * 1.5) {
+        return
+      }
+
       // Logic for nested scrolling:
       // If we are at the expanded position (minTranslateY) AND content is
       // scrolled down (scrollY > 0), let the ScrollView handle the gesture.
@@ -298,6 +318,36 @@ function Drawer({
   const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17
   const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8
 
+  // Drop shadow — Figma layers two shadows (primary + secondary) sharing
+  // the same offsetY/blur but with their own offsetX and color.
+  const shadowPrimaryOffsetX = (getVariableByName('drawer/shadow/primary/offsetX', modes) ?? 0) as number
+  const shadowPrimaryOffsetY = (getVariableByName('drawer/shadow/primary/offsetY', modes) ?? 16) as number
+  const shadowPrimaryBlur = (getVariableByName('drawer/shadow/primary/blur', modes) ?? 48) as number
+  const shadowPrimaryColor = (getVariableByName('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)') as string
+  const shadowSecondaryOffsetX = (getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0) as number
+  const shadowSecondaryColor = (getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)') as string
+
+  // Cross-platform shadow style. Web supports stacking two shadows via
+  // boxShadow. iOS only supports a single native shadow per view, so we
+  // apply the more prominent (primary) one. Android uses elevation.
+  const shadowStyle: ViewStyle = Platform.select({
+    web: {
+      boxShadow:
+        `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
+        `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
+    } as ViewStyle,
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: { width: shadowPrimaryOffsetX, height: shadowPrimaryOffsetY },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2,
+    },
+    android: {
+      elevation: 16,
+    },
+    default: {},
+  }) as ViewStyle
+
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
   return (
@@ -313,11 +363,8 @@ function Drawer({
               backgroundColor,
               borderTopLeftRadius: radius,
               borderTopRightRadius: radius,
-              paddingLeft,
-              paddingRight,
-              paddingBottom,
-              rowGap: drawerGap,
             },
+            shadowStyle,
             sheetStyle,
             animatedStyle,
           ]}
@@ -326,57 +373,73 @@ function Drawer({
           accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint || 'Swipe up to expand, swipe down to collapse'}
         >
-          {/* Handle Area */}
-          <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
-            <View
-              style={[
-                {
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                },
-              ]}
-            />
-          </View>
-
-          {/* Custom Header Slot */}
-          {header}
-
-          {/* Title (Legacy/Simple Mode) */}
-          {title && (
-            <Text
-              style={[
-                {
-                  color: titleColor,
-                  fontSize: titleSize,
-                  fontWeight: titleWeight as any,
-                  lineHeight: titleLineHeight,
-                  marginBottom: titlePaddingBottom,
-                }
-              ]}
-            >
-              {title}
-            </Text>
-          )}
-
-          {/* Scrollable Content */}
-          <AnimatedScrollView
-            ref={scrollRef}
-            style={[styles.content, contentStyle]}
-            contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
-            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            animatedProps={animatedScrollProps}
-            alwaysBounceVertical={false}
-            overScrollMode="always"
-            onScroll={useAnimatedScrollHandler((event) => {
-              scrollY.value = event.contentOffset.y
-            })}
-            scrollEventThrottle={16}
+          {/* Inner clip layer — keeps overflow:'hidden' off the shadow-carrying
+              outer view so iOS doesn't clip the drop shadow. */}
+          <View
+            style={[
+              styles.sheetInner,
+              {
+                borderTopLeftRadius: radius,
+                borderTopRightRadius: radius,
+                paddingLeft,
+                paddingRight,
+                paddingBottom,
+                rowGap: drawerGap,
+              },
+            ]}
           >
-            {/* Prevent touch propagation for text selection if needed */}
-            {children}
-          </AnimatedScrollView>
+            {/* Handle Area */}
+            <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
+              <View
+                style={[
+                  {
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  },
+                ]}
+              />
+            </View>
+
+            {/* Custom Header Slot */}
+            {header}
+
+            {/* Title (Legacy/Simple Mode) */}
+            {title && (
+              <Text
+                style={[
+                  {
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight as any,
+                    lineHeight: titleLineHeight,
+                    marginBottom: titlePaddingBottom,
+                  }
+                ]}
+              >
+                {title}
+              </Text>
+            )}
+
+            {/* Scrollable Content */}
+            <AnimatedScrollView
+              ref={scrollRef}
+              style={[styles.content, contentStyle]}
+              contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
+              showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              animatedProps={animatedScrollProps}
+              alwaysBounceVertical={false}
+              overScrollMode="always"
+              onScroll={useAnimatedScrollHandler((event) => {
+                scrollY.value = event.contentOffset.y
+              })}
+              scrollEventThrottle={16}
+            >
+              {/* Prevent touch propagation for text selection if needed */}
+              {children}
+            </AnimatedScrollView>
+          </View>
         </Animated.View>
       </GestureDetector>
     </GestureHandlerRootView>
@@ -398,6 +461,9 @@ const styles = StyleSheet.create({
     width: '100%',
     position: 'absolute',
     top: 0,
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden',
   },
   handleArea: {

package/src/components/EmptyState/EmptyState.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type EmptyStateProps = {
     /**
@@ -50,7 +51,7 @@ function EmptyState({
     showDescription = true,
     iconSlot,
     buttonSlot,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     testID,
 }: EmptyStateProps) {

package/src/components/FilterBar/FilterBar.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TextInput from '../TextInput/TextInput'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 type RenderInputArgs = {
   placeholder: string;
@@ -61,7 +61,7 @@ function FilterBar({
   onChangeText,
   children,
   renderInput,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/src/components/Form/Form.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, useMemo, useCallback } from
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type FormContextValue = {
   validationErrors: Record<string, string | string[]>;
@@ -28,7 +29,7 @@ function Form({
   children,
   validationErrors: externalErrors,
   onSubmit,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   accessibilityLabel,
   testID,

package/src/components/FormField/FormField.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useCallback } from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import TextInput from '../TextInput/TextInput'
 import SupportText from '../SupportText/SupportText'
@@ -42,7 +43,7 @@ function useFormField(props: FormFieldProps) {
     isInvalid = false,
     supportText,
     errorMessage,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     onFocus,
     onBlur,
   } = props
@@ -178,7 +179,7 @@ function FormField({
   isInvalid = false,
   supportText,
   errorMessage,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   onFocus,
   onBlur,

package/src/components/HStack/HStack.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 export interface HStackProps extends ViewProps {
     /**
@@ -48,7 +48,7 @@ export const HStack = ({
     wrap,
     reverse = false,
     as,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     ...rest
 }: HStackProps) => {

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import RadioButton from '../RadioButton/RadioButton'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface HoldingsCardDetailItem {
     label: string
@@ -57,7 +58,7 @@ export default function HoldingsCard({
     selected = false,
     disabled = false,
     onPress,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     testID,
 }: HoldingsCardProps) {