jfs-components 0.0.63 → 0.0.64

package/CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.64] - 2026-04-20
+
+### Added
+
+- **`Section.Bento` — expandable grid:** New built-in expand/collapse UX. Pass `collapsedCount` (default `4`) plus the full set of cells in `navSlot`, and `Section.Bento` auto-injects a toggle cell, owns the `expanded` boolean (uncontrolled), and animates extra cells in/out with a staggered fade cascade. Supports controlled mode via `expanded` + `onExpandedChange`, customizable labels (`toggleMoreLabel`, `toggleLessLabel`) and icons (`toggleMoreIcon`, `toggleLessIcon`), and a `renderToggle` escape hatch for non-`ListItem` toggles. The toggle is only injected when `navSlot.length > collapsedCount`, so existing usage at or below the threshold renders unchanged.
+- **Drawer drop-shadow tokens:** New design tokens `drawer/shadow/primary/{offsetX,offsetY,blur,color}` and `drawer/shadow/secondary/{offsetX,color}` resolve a layered Figma drop shadow. Web stacks both shadows via `boxShadow`; iOS applies the primary shadow natively; Android uses elevation.
+
+### Changed
+
+- **`SlotGrid` sizing — first-row-anchored:** `SlotGrid` (used by `Section.Bento`) now measures only the first row's cells once on mount and applies that max width to every cell in every row. Previously every cell was measured every render, which caused width jumps when the cell count changed (expand/collapse) and could cancel `Animated.View` `entering` cascades by re-rendering them in the same React batch as the mount. Result: stable cell width across toggles, no layout shift, animations play uninterrupted. Edge-flush behavior (first cell flush-left, last cell flush-right) is preserved via `justify-content: space-between`.
+- **`Section.Bento` height transition:** The section grows and shrinks via an explicit measured-height spring (`overflow: 'hidden'` clip + `withSpring`) instead of `LinearTransition`. Cells inside are never resized during the animation — only the container's clip rectangle interpolates.
+- **Drawer gesture policy:** Pan now requires a 10px vertical drag to activate (`activeOffsetY([-10, 10])`) and surrenders the gesture entirely after ~16px of horizontal movement (`failOffsetX([-16, 16])`). A defense-in-depth check in `onUpdate` skips Y translation on frames where horizontal motion dominates. This lets horizontal children (carousels, sliders, horizontal `FlatList`s) inside the drawer scroll cleanly without the sheet also translating.
+
+### Fixed
+
+- **Drawer iOS shadow clipping:** The sheet now renders content inside an inner clip layer so `overflow: 'hidden'` no longer trims the outer view's drop shadow on iOS.
+
+### Accessibility
+
+- All new `Section.Bento` animations honor the OS reduce-motion setting via Reanimated's `ReduceMotion.System`.
+
+---
+
 ## [0.0.63] - 2026-04-20
 
 ### Performance

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

@@ -131,7 +131,17 @@ function Drawer({
   const updateMode = (0, _react.useCallback)(newMode => {
     setMode(newMode);
   }, []);
-  const gesture = _reactNativeGestureHandler.Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-5, 5]).activeOffsetX([-5, 5]).onStart(() => {
+
+  // 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 = _reactNativeGestureHandler.Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -140,6 +150,16 @@ function Drawer({
     prevAtTop.value = scrollY.value <= 1;
     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.
@@ -251,71 +271,108 @@ function Drawer({
   const titleWeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
+
+  // 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 = _reactNative.Platform.select({
+    web: {
+      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
+    },
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: {
+        width: shadowPrimaryOffsetX,
+        height: shadowPrimaryOffsetY
+      },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2
+    },
+    android: {
+      elevation: 16
+    },
+    default: {}
+  });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.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
-        }, sheetStyle, animatedStyle],
+          borderTopRightRadius: radius
+        }, shadowStyle, sheetStyle, animatedStyle],
         accessible: true,
         ...(_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, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(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: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -333,7 +390,10 @@ const styles = _reactNative.StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {