@hero-design/rn 8.128.3 → 8.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.128.3",
+  "version": "8.129.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -5,11 +5,11 @@ import {
   Animated,
   KeyboardAvoidingView,
   Pressable,
-  SafeAreaView,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);

package/src/components/Drawer/DragableDrawer/DragableDrawerContext.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react';
+import type { MutableRefObject } from 'react';
+
+interface DragableDrawerContextValue {
+  /** Whether the drawer has settled at maximum height (offset === 0). */
+  isAtMaxHeight: boolean;
+  /** Current vertical scroll offset reported by DragableScrollView. */
+  scrollYRef: MutableRefObject<number>;
+  /** Report scroll offset changes from DragableScrollView. */
+  onScrollY: (y: number) => void;
+  /** Begin a drawer pan gesture (stops any running animation). */
+  beginPan: () => void;
+  /** Move the drawer by dy pixels during an active pan. */
+  movePan: (dy: number) => void;
+  /** End pan and snap to the nearest snap point. */
+  releasePan: (dy: number, vy: number) => void;
+}
+
+const noop = () => ({});
+
+const DragableDrawerContext = createContext<DragableDrawerContextValue>({
+  isAtMaxHeight: false,
+  scrollYRef: { current: 0 },
+  onScrollY: noop,
+  beginPan: noop,
+  movePan: noop,
+  releasePan: noop,
+});
+
+export const useDragableDrawerContext = () => useContext(DragableDrawerContext);
+
+export default DragableDrawerContext;

package/src/components/Drawer/DragableDrawer/DragableScrollView.tsx

@@ -0,0 +1,113 @@
+import React, { useRef } from 'react';
+import { PanResponder, ScrollView, View } from 'react-native';
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollViewProps,
+} from 'react-native';
+import type { ReactElement } from 'react';
+
+import { useDragableDrawerContext } from './DragableDrawerContext';
+
+export type DragableScrollViewProps = ScrollViewProps;
+
+// scrollY tolerance: treat anything within this many pixels of the top as
+// "at scroll top" to handle fractional pixels and throttled scroll events.
+const SCROLL_TOP_THRESHOLD_PX = 5;
+// Minimum downward finger movement before the pull-down collapse is triggered.
+const PULL_DOWN_THRESHOLD_PX = 10;
+const DEFAULT_SCROLL_EVENT_THROTTLE = 16;
+
+/**
+ * A ScrollView that coordinates with a parent DragableDrawer.
+ *
+ * - Drawer below max height: all gestures move the drawer; scroll is locked.
+ * - Drawer at max height: native scrolling works normally.
+ * - Drawer at max + scrolled to top + pull down: drawer collapses.
+ *
+ * The native ScrollView with bounces={false}/overScrollMode="never" will not
+ * intercept a downward gesture at scrollY=0 (nothing left to scroll), so
+ * onMoveShouldSetPanResponderCapture fires cleanly on both platforms.
+ * onScrollEndDrag + onMomentumScrollEnd ensure scrollYRef is up-to-date
+ * before the next gesture starts.
+ */
+const DragableScrollView = ({
+  onScroll,
+  onScrollEndDrag: onScrollEndDragProp,
+  onMomentumScrollEnd: onMomentumScrollEndProp,
+  scrollEventThrottle = DEFAULT_SCROLL_EVENT_THROTTLE,
+  children,
+  ...props
+}: DragableScrollViewProps): ReactElement => {
+  const {
+    isAtMaxHeight,
+    scrollYRef,
+    onScrollY,
+    beginPan,
+    movePan,
+    releasePan,
+  } = useDragableDrawerContext();
+
+  // Mirror context value into a ref so PanResponder closures always read
+  // the latest value (PanResponder is created once and closures are frozen).
+  const isAtMaxHeightRef = useRef(isAtMaxHeight);
+  isAtMaxHeightRef.current = isAtMaxHeight;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      // Drawer below max: capture on start so the native ScrollView never
+      // gets the touch and scroll is completely locked.
+      onStartShouldSetPanResponderCapture: () => !isAtMaxHeightRef.current,
+
+      // Drawer at max + scroll at top + pull down: recapture for collapse.
+      // bounces={false} / overScrollMode="never" means the native ScrollView
+      // has nothing to do here, so it will not intercept the gesture and this
+      // capture fires reliably before any scroll activity begins.
+      onMoveShouldSetPanResponderCapture: (_, gesture) =>
+        isAtMaxHeightRef.current &&
+        scrollYRef.current <= SCROLL_TOP_THRESHOLD_PX &&
+        gesture.dy > PULL_DOWN_THRESHOLD_PX,
+
+      onPanResponderGrant: () => beginPan(),
+      onPanResponderMove: (_, gesture) => movePan(gesture.dy),
+      onPanResponderRelease: (_, gesture) => releasePan(gesture.dy, gesture.vy),
+    })
+  ).current;
+
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    onScrollY(e.nativeEvent.contentOffset.y);
+    onScroll?.(e);
+  };
+
+  // Keep scrollYRef accurate at every scroll boundary so the next gesture
+  // checks the correct position even when onScroll is throttled.
+  const handleScrollEndDrag = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    onScrollY(e.nativeEvent.contentOffset.y);
+    onScrollEndDragProp?.(e);
+  };
+
+  const handleMomentumScrollEnd = (
+    e: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    onScrollY(e.nativeEvent.contentOffset.y);
+    onMomentumScrollEndProp?.(e);
+  };
+
+  return (
+    <View {...panResponder.panHandlers} style={{ flex: 1 }}>
+      <ScrollView
+        {...props}
+        scrollEnabled={isAtMaxHeight}
+        onScroll={handleScroll}
+        onScrollEndDrag={handleScrollEndDrag}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        scrollEventThrottle={scrollEventThrottle}
+        overScrollMode="always"
+      >
+        {children}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default DragableScrollView;

package/src/components/Drawer/DragableDrawer/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, PanResponder, Easing, Platform } from 'react-native';
+import React, { useMemo, useState } from 'react';
 
 import type { ReactElement, ReactNode } from 'react';
 import {
@@ -8,12 +7,8 @@ import {
   StyledHandler,
   StyledHandlerContainer,
 } from '../StyledDrawer';
-import {
-  calculateAnimatedToValue,
-  calculateSnapPointsData,
-  getOffset,
-} from './helpers';
-import type { SnapPointsData } from './helpers';
+import DragableDrawerContext from './DragableDrawerContext';
+import useDragablePan from './useDragablePan';
 
 export interface DragableDrawerProps {
   /**
@@ -56,148 +51,60 @@ const DragableDrawer = ({
   testID,
 }: DragableDrawerProps): ReactElement => {
   const [height, setHeight] = useState(0);
-  const baseHeightForMeasure = useRef(0);
-  const snapPointsData = useRef<SnapPointsData>({
-    list: [],
-    minHeightOffset: 0,
-    maxHeightOffset: 0,
-  });
-
-  // Track drag
-  const pan = useRef(new Animated.Value(0)).current;
-  const offset = useRef(0);
-  const offsetBeforePan = useRef(0);
-  const [animatedToValue, setAnimatedToValue] = useState<number>(-1);
-
-  useEffect(() => {
-    const id = pan.addListener(({ value }) => {
-      offset.current = value;
-    });
-
-    return () => pan.removeListener(id);
-  }, []);
-
-  useEffect(() => {
-    if (height > 0) {
-      const initialOffset = getOffset(
-        height,
-        initialHeightPercentage || minimumHeightPercentage
-      );
-      setAnimatedToValue(initialOffset);
-    }
-  }, [height]);
-
-  useEffect(() => {
-    if (height > 0) {
-      pan.setValue(height);
-      offset.current = height;
-
-      baseHeightForMeasure.current = height;
-
-      // Calculate snap points information
-      snapPointsData.current = calculateSnapPointsData(
-        minimumHeightPercentage,
-        height,
-        snapPoints
-      );
-    }
-  }, [height, minimumHeightPercentage]);
 
-  useEffect(() => {
-    if (animatedToValue >= 0) {
-      const animation = Animated.timing(pan, {
-        toValue: animatedToValue,
-        useNativeDriver: Platform.OS !== 'web',
-        easing: Easing.inOut(Easing.cubic),
-      });
-
-      animation.start(() => {
-        if (animatedToValue === 0) {
-          onExpanded?.();
-        } else if (
-          animatedToValue === getOffset(height, minimumHeightPercentage)
-        ) {
-          onCollapsed?.();
-        }
-        setAnimatedToValue(-1);
-      });
-
-      return () => animation.stop();
-    }
-  }, [animatedToValue]);
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: () => {
-        offsetBeforePan.current = offset.current;
-        pan.setOffset(offset.current);
-        pan.setValue(0);
-      },
-      onPanResponderMove: (_, gesture) => {
-        const panDistance = gesture.dy;
-
-        // Moving toward top, stop at highest snap point
-        if (offsetBeforePan.current + panDistance < 0) {
-          pan.setValue(-offsetBeforePan.current);
-          return;
-        }
-
-        // Moving toward bottom, stop at lowest snap point
-        if (
-          offsetBeforePan.current + panDistance >
-          snapPointsData.current?.minHeightOffset
-        ) {
-          pan.setValue(
-            baseHeightForMeasure.current -
-              baseHeightForMeasure.current * (minimumHeightPercentage / 100) -
-              offsetBeforePan.current
-          );
-          return;
-        }
-
-        pan.setValue(panDistance);
-      },
-      onPanResponderRelease: (_, gesture) => {
-        pan.flattenOffset();
-
-        // Attach to nearest snappoint
-        const panDistance = gesture.dy;
-        const offsetAfterPan = offsetBeforePan.current + panDistance;
-        const animatedValue = calculateAnimatedToValue(
-          offsetAfterPan,
-          snapPointsData.current.list
-        );
+  const {
+    pan,
+    isAtMaxHeight,
+    scrollYRef,
+    onScrollY,
+    beginPan,
+    movePan,
+    releasePan,
+    panHandlers,
+  } = useDragablePan({
+    height,
+    initialHeightPercentage,
+    minimumHeightPercentage,
+    snapPoints,
+    onExpanded,
+    onCollapsed,
+  });
 
-        setAnimatedToValue(animatedValue);
-      },
-    })
-  ).current;
+  const contextValue = useMemo(
+    () => ({
+      isAtMaxHeight,
+      scrollYRef,
+      onScrollY,
+      beginPan,
+      movePan,
+      releasePan,
+    }),
+    [isAtMaxHeight, onScrollY, beginPan, movePan, releasePan]
+  );
 
   return (
-    <StyledDragableContainer
-      testID={testID}
-      enableShadow
-      pointerEvents="box-none"
-    >
-      <StyledDragableDrawerContainer
+    <DragableDrawerContext.Provider value={contextValue}>
+      <StyledDragableContainer
+        testID={testID}
         enableShadow
-        style={{
-          transform: [
-            { scaleY: baseHeightForMeasure.current > 0 ? 1 : 0 },
-            { translateY: pan },
-          ],
-        }}
-        onLayout={({ nativeEvent }) => {
-          setHeight(nativeEvent.layout.height);
-        }}
+        pointerEvents="box-none"
       >
-        <StyledHandlerContainer {...panResponder.panHandlers}>
-          <StyledHandler />
-        </StyledHandlerContainer>
-        {children}
-      </StyledDragableDrawerContainer>
-    </StyledDragableContainer>
+        <StyledDragableDrawerContainer
+          enableShadow
+          style={{
+            transform: [{ scaleY: height > 0 ? 1 : 0 }, { translateY: pan }],
+          }}
+          onLayout={({ nativeEvent }) => {
+            setHeight(nativeEvent.layout.height);
+          }}
+        >
+          <StyledHandlerContainer {...panHandlers}>
+            <StyledHandler />
+          </StyledHandlerContainer>
+          {children}
+        </StyledDragableDrawerContainer>
+      </StyledDragableContainer>
+    </DragableDrawerContext.Provider>
   );
 };
 

package/src/components/Drawer/DragableDrawer/useDragablePan.ts

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
+import { Animated, Easing, PanResponder, Platform } from 'react-native';
+import type { GestureResponderHandlers } from 'react-native';
+
+import {
+  calculateAnimatedToValue,
+  calculateSnapPointsData,
+  getOffset,
+} from './helpers';
+import type { SnapPointsData } from './helpers';
+
+const FLICK_VELOCITY_THRESHOLD = 0.3;
+const SHORT_DRAG_THRESHOLD_PX = 20;
+const VELOCITY_PROJECTION_FACTOR = 200;
+
+interface UseDragablePanOptions {
+  height: number;
+  initialHeightPercentage: number | undefined;
+  minimumHeightPercentage: number;
+  snapPoints: number[];
+  onExpanded?: () => void;
+  onCollapsed?: () => void;
+}
+
+interface UseDragablePanResult {
+  pan: Animated.Value;
+  isAtMaxHeight: boolean;
+  scrollYRef: MutableRefObject<number>;
+  onScrollY: (y: number) => void;
+  beginPan: () => void;
+  movePan: (dy: number) => void;
+  releasePan: (dy: number, vy: number) => void;
+  panHandlers: GestureResponderHandlers;
+}
+
+const useDragablePan = ({
+  height,
+  initialHeightPercentage,
+  minimumHeightPercentage,
+  snapPoints,
+  onExpanded,
+  onCollapsed,
+}: UseDragablePanOptions): UseDragablePanResult => {
+  const baseHeightForMeasure = useRef(0);
+  const snapPointsData = useRef<SnapPointsData>({
+    list: [],
+    minHeightOffset: 0,
+    maxHeightOffset: 0,
+  });
+
+  const pan = useRef(new Animated.Value(0)).current;
+  const offset = useRef(0);
+  const offsetBeforePan = useRef(0);
+  const [animatedToValue, setAnimatedToValue] = useState<number>(-1);
+
+  const [isAtMaxHeight, setIsAtMaxHeight] = useState(false);
+  const scrollYRef = useRef(0);
+  const minimumHeightPercentageRef = useRef(minimumHeightPercentage);
+  minimumHeightPercentageRef.current = minimumHeightPercentage;
+
+  const onScrollY = useCallback((y: number) => {
+    scrollYRef.current = y;
+  }, []);
+
+  useEffect(() => {
+    const id = pan.addListener(({ value }) => {
+      offset.current = value;
+    });
+
+    return () => pan.removeListener(id);
+  }, []);
+
+  useEffect(() => {
+    if (height > 0) {
+      const initialOffset = getOffset(
+        height,
+        initialHeightPercentage || minimumHeightPercentage
+      );
+      setAnimatedToValue(initialOffset);
+    }
+  }, [height, initialHeightPercentage, minimumHeightPercentage]);
+
+  useEffect(() => {
+    if (height > 0) {
+      pan.setValue(height);
+      offset.current = height;
+
+      baseHeightForMeasure.current = height;
+
+      snapPointsData.current = calculateSnapPointsData(
+        minimumHeightPercentage,
+        height,
+        snapPoints
+      );
+    }
+  }, [height, minimumHeightPercentage]);
+
+  useEffect(() => {
+    if (animatedToValue >= 0) {
+      const animation = Animated.timing(pan, {
+        toValue: animatedToValue,
+        useNativeDriver: Platform.OS !== 'web',
+        easing: Easing.inOut(Easing.cubic),
+      });
+
+      animation.start(({ finished }) => {
+        if (finished) {
+          if (animatedToValue === 0) {
+            setIsAtMaxHeight(true);
+            onExpanded?.();
+          } else {
+            setIsAtMaxHeight(false);
+            if (
+              animatedToValue === getOffset(height, minimumHeightPercentage)
+            ) {
+              onCollapsed?.();
+            }
+          }
+        }
+        setAnimatedToValue(-1);
+      });
+
+      return () => animation.stop();
+    }
+  }, [
+    animatedToValue,
+    onExpanded,
+    onCollapsed,
+    height,
+    minimumHeightPercentage,
+  ]);
+
+  const beginPan = useCallback(() => {
+    pan.stopAnimation();
+    setIsAtMaxHeight(false);
+    offsetBeforePan.current = offset.current;
+    pan.setOffset(offset.current);
+    pan.setValue(0);
+  }, []);
+
+  const movePan = useCallback((dy: number) => {
+    // Moving toward top, stop at highest snap point
+    if (offsetBeforePan.current + dy < 0) {
+      pan.setValue(-offsetBeforePan.current);
+      return;
+    }
+
+    // Moving toward bottom, stop at lowest snap point
+    if (
+      offsetBeforePan.current + dy >
+      snapPointsData.current?.minHeightOffset
+    ) {
+      pan.setValue(
+        baseHeightForMeasure.current -
+          baseHeightForMeasure.current *
+            (minimumHeightPercentageRef.current / 100) -
+          offsetBeforePan.current
+      );
+      return;
+    }
+
+    pan.setValue(dy);
+  }, []);
+
+  const releasePan = useCallback((dy: number, vy: number) => {
+    pan.flattenOffset();
+
+    const offsetAfterPan = offsetBeforePan.current + dy;
+
+    // Flick or short downward drag: snap to the next lower snap point.
+    if (vy > FLICK_VELOCITY_THRESHOLD || dy > SHORT_DRAG_THRESHOLD_PX) {
+      const lowerPoints = snapPointsData.current.list
+        .filter((p) => p > offsetBeforePan.current)
+        .sort((a, b) => a - b);
+      if (lowerPoints.length > 0) {
+        setAnimatedToValue(lowerPoints[0]);
+        return;
+      }
+    }
+
+    // Upward flick or drag: project the intended landing position using
+    // velocity, then snap to the nearest higher snap point to that projection.
+    // This allows fast flicks to skip intermediate snap points.
+    if (vy < -FLICK_VELOCITY_THRESHOLD || dy < -SHORT_DRAG_THRESHOLD_PX) {
+      const projected = offsetAfterPan + vy * VELOCITY_PROJECTION_FACTOR;
+      const higherPoints = snapPointsData.current.list
+        .filter((p) => p < offsetBeforePan.current)
+        .sort((a, b) => b - a);
+      if (higherPoints.length > 0) {
+        setAnimatedToValue(calculateAnimatedToValue(projected, higherPoints));
+        return;
+      }
+    }
+
+    // Otherwise: snap to nearest.
+    setAnimatedToValue(
+      calculateAnimatedToValue(offsetAfterPan, snapPointsData.current.list)
+    );
+  }, []);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => beginPan(),
+      onPanResponderMove: (_, gesture) => movePan(gesture.dy),
+      onPanResponderRelease: (_, gesture) => releasePan(gesture.dy, gesture.vy),
+    })
+  ).current;
+
+  return {
+    pan,
+    isAtMaxHeight,
+    scrollYRef,
+    onScrollY,
+    beginPan,
+    movePan,
+    releasePan,
+    panHandlers: panResponder.panHandlers,
+  };
+};
+
+export default useDragablePan;

package/src/components/Drawer/StyledDrawer.tsx

@@ -57,7 +57,7 @@ const StyledDragableDrawerContainer = styled(Animated.View)<{
   backgroundColor: theme.__hd__.drawer.colors.background,
   elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
   overflow: 'hidden',
-  maxHeight: '100%',
+  height: '100%',
 }));
 
 const StyledHandlerContainer = styled(View)<ViewProps>(({ theme }) => ({

package/src/components/Drawer/index.tsx

@@ -2,6 +2,7 @@ import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Dimensions, Easing } from 'react-native';
 import DragableDrawer from './DragableDrawer';
+import DragableScrollView from './DragableDrawer/DragableScrollView';
 
 import {
   StyledBackdrop,
@@ -97,4 +98,5 @@ const Drawer = ({
 
 export default Object.assign(Drawer, {
   Dragable: DragableDrawer,
+  DragableScrollView,
 });

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,5 +1,5 @@
 import type { ViewProps, KeyboardAvoidingViewProps } from 'react-native';
-import { Animated, KeyboardAvoidingView, SafeAreaView, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -12,7 +12,7 @@ declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledCompon
 }, {}, {
     ref?: import("react").Ref<KeyboardAvoidingView> | undefined;
 }>;
-declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
+declare const StyledFloatingWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native-safe-area-context").NativeSafeAreaViewProps & import("react").RefAttributes<import("react").Component<import("react-native-safe-area-context/lib/typescript/src/specs/NativeSafeAreaView").NativeProps, {}, any> & import("react-native").NativeMethods>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
@@ -20,7 +20,7 @@ declare const StyledFloatingBottomSheet: import("@emotion/native").StyledCompone
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
+declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native-safe-area-context").NativeSafeAreaViewProps & import("react").RefAttributes<import("react").Component<import("react-native-safe-area-context/lib/typescript/src/specs/NativeSafeAreaView").NativeProps, {}, any> & import("react-native").NativeMethods>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;

package/types/components/Drawer/DragableDrawer/DragableDrawerContext.d.ts

@@ -0,0 +1,18 @@
+import type { MutableRefObject } from 'react';
+interface DragableDrawerContextValue {
+    /** Whether the drawer has settled at maximum height (offset === 0). */
+    isAtMaxHeight: boolean;
+    /** Current vertical scroll offset reported by DragableScrollView. */
+    scrollYRef: MutableRefObject<number>;
+    /** Report scroll offset changes from DragableScrollView. */
+    onScrollY: (y: number) => void;
+    /** Begin a drawer pan gesture (stops any running animation). */
+    beginPan: () => void;
+    /** Move the drawer by dy pixels during an active pan. */
+    movePan: (dy: number) => void;
+    /** End pan and snap to the nearest snap point. */
+    releasePan: (dy: number, vy: number) => void;
+}
+declare const DragableDrawerContext: import("react").Context<DragableDrawerContextValue>;
+export declare const useDragableDrawerContext: () => DragableDrawerContextValue;
+export default DragableDrawerContext;