jfs-components 0.0.53 → 0.0.55

package/lib/commonjs/components/Drawer/Drawer.js

@@ -186,17 +186,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;
       (0, _reactNativeReanimated.runOnJS)(updateMode)('expanded');
-    } else if (event.velocityY > 500) {
+    } else if (drawerMovedEnough && event.velocityY > 500) {
       scrollTo(maxTranslateY);
       isFullyExpanded.value = false;
       (0, _reactNativeReanimated.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;
@@ -263,7 +270,9 @@ function Drawer({
           rowGap: drawerGap
         }, sheetStyle, animatedStyle],
         accessible: true,
-        accessibilityRole: 'dialog',
+        ...(_reactNative.Platform.OS === 'web' ? {
+          accessibilityRole: 'dialog'
+        } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -20,17 +20,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * 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
@@ -39,6 +43,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -75,10 +80,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 ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.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 ? (0, _reactUtils.flattenChildren)(listGroupSlot) : []), ...(children ? (0, _reactUtils.flattenChildren)(children) : [])];
+  const processedSlot = rawItems.length > 0 ? (0, _reactUtils.cloneChildrenWithModes)(rawItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";

package/lib/commonjs/components/Section/Section.js

@@ -158,7 +158,9 @@ function Section({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
-    accessibilityRole: 'region',
+    ...(_reactNative.Platform.OS === 'web' ? {
+      accessibilityRole: 'region'
+    } : undefined),
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,
@@ -258,7 +260,9 @@ function SectionBento({
   const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(upiSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
-    accessibilityRole: 'region',
+    ...(_reactNative.Platform.OS === 'web' ? {
+      accessibilityRole: 'region'
+    } : undefined),
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,