jfs-components 0.0.53 → 0.0.55

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, 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';
@@ -181,17 +181,24 @@ function Drawer({
     const totalRange = maxTranslateY - minTranslateY;
     const currentRatio = totalRange > 0 ? (translateY.value - minTranslateY) / totalRange : 0;
 
-    // Fast fling → always follow the fling direction
-    if (event.velocityY < -500) {
+    // How far the drawer sheet itself moved from its position at gesture
+    // start.  When the scroll view consumed the gesture (content was not
+    // at the top), the drawer stays put and displacement ≈ 0 — even
+    // though the finger moved fast.  We must NOT use velocity to snap in
+    // that case; otherwise a fast content-scroll collapses the drawer.
+    const drawerDisplacement = Math.abs(translateY.value - context.value.y);
+    const drawerMovedEnough = drawerDisplacement > 10;
+    if (drawerMovedEnough && event.velocityY < -500) {
       scrollTo(minTranslateY);
       isFullyExpanded.value = true;
       runOnJS(updateMode)('expanded');
-    } else if (event.velocityY > 500) {
+    } else if (drawerMovedEnough && event.velocityY > 500) {
       scrollTo(maxTranslateY);
       isFullyExpanded.value = false;
       runOnJS(updateMode)('collapsed');
     } else {
-      // Slow / medium gesture → use asymmetric snap thresholds.
+      // Slow / medium gesture, or the drawer barely moved → position
+      // based snap with asymmetric thresholds.
       // Down stroke: must cross 75% to collapse (hard to dismiss).
       // Up stroke: must reach top 35% to expand (35% from top).
       const isDraggingDown = event.velocityY >= 0;
@@ -258,7 +265,9 @@ function Drawer({
           rowGap: drawerGap
         }, sheetStyle, animatedStyle],
         accessible: true,
-        accessibilityRole: 'dialog',
+        ...(Platform.OS === 'web' ? {
+          accessibilityRole: 'dialog'
+        } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
         children: [/*#__PURE__*/_jsx(View, {

package/lib/module/components/ListGroup/ListGroup.js

@@ -15,17 +15,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
@@ -34,6 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -70,10 +75,11 @@ function ListGroup({
     fontWeight: labelFontWeight
   };
 
-  // Clone listGroupSlot children and pass modes to all children that accept it
-  // We flatten children first so that if a Fragment is passed, the items inside
-  // become direct children of the container, allowing `gap` to apply correctly between them.
-  const processedSlot = listGroupSlot ? cloneChildrenWithModes(flattenChildren(listGroupSlot), modes) : null;
+  // Merge listGroupSlot and children into a single list, then flatten and
+  // propagate modes.  Both props are interchangeable; when both are provided
+  // the slot items render first, followed by children.
+  const rawItems = [...(listGroupSlot ? flattenChildren(listGroupSlot) : []), ...(children ? flattenChildren(children) : [])];
+  const processedSlot = rawItems.length > 0 ? cloneChildrenWithModes(rawItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";

package/lib/module/components/Section/Section.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useState } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
@@ -152,7 +152,9 @@ function Section({
   });
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
-    accessibilityRole: 'region',
+    ...(Platform.OS === 'web' ? {
+      accessibilityRole: 'region'
+    } : undefined),
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,
@@ -252,7 +254,9 @@ function SectionBento({
   const processedUpiSlot = upiSlot ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
-    accessibilityRole: 'region',
+    ...(Platform.OS === 'web' ? {
+      accessibilityRole: 'region'
+    } : undefined),
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,