react-modal-sheet 4.2.0 → 4.4.0

package/src/sheet.tsx

@@ -30,11 +30,10 @@ import {
 } from './constants';
 
 import {
-  getClosest,
   getSheetHeight,
   getSnapY,
   getSnapPoints,
-  validateSnapTo,
+  getClosestSnapPoint,
 } from './utils';
 
 import { type SheetContextType, type SheetProps } from './types';
@@ -116,7 +115,24 @@ export const Sheet = forwardRef<any, SheetProps>(
       };
     });
 
-    const onDrag = useStableCallback((_, { delta }: PanInfo) => {
+    const onDrag = useStableCallback((_: PointerEvent, info: PanInfo) => {
+      const currentY = y.get();
+
+      /**
+       * Make sure the user cannot drag the sheet beyond the upmost snap point
+       * if the `snapPoints` prop is provided.
+       */
+      if (snapPointsProp) {
+        const sheetHeight = getSheetHeight(sheetRef);
+        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
+        const topSnapPoint = sheetHeight - snapPoints[0];
+
+        if (info.delta.y < 0 && currentY <= topSnapPoint) {
+          y.set(topSnapPoint);
+          return;
+        }
+      }
+
       // Update drag indicator rotation based on drag velocity
       const velocity = y.getVelocity();
 
@@ -124,7 +140,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       if (velocity < 0) indicatorRotation.set(-10);
 
       // Make sure user cannot drag beyond the top of the sheet
-      y.set(Math.max(y.get() + delta.y, 0));
+      y.set(Math.max(currentY + info.delta.y, 0));
     });
 
     const onDragStart = useStableCallback(() => {
@@ -158,25 +174,15 @@ export const Sheet = forwardRef<any, SheetProps>(
           : undefined;
 
         if (snapPoints) {
-          // Inverse values are the values that can be passed to `animate`
-          const snapInverse = snapPoints.map(
-            (p) => sheetHeight - Math.min(p, sheetHeight)
-          );
-
-          // Allow snapping to the top of the sheet if detent is set to `content-height`
-          if (detent === 'content-height' && !snapInverse.includes(0)) {
-            snapInverse.unshift(0);
-          }
-
-          // Get the closest snap point
-          const snapTo = getClosest(snapInverse, currentY);
-          const snapIndex = snapInverse.indexOf(snapTo);
-
-          yTo = validateSnapTo({
-            snapTo: getClosest(snapInverse, currentY),
+          const { snapY, snapIndex } = getClosestSnapPoint({
+            snapPoints,
+            currentY,
             sheetHeight,
+            detent,
           });
 
+          yTo = snapY;
+
           // This happens before calling `animate` but it doesn't really matter
           onSnap?.(snapIndex);
         } else if (currentY / sheetHeight > dragCloseThreshold) {
@@ -214,10 +220,10 @@ export const Sheet = forwardRef<any, SheetProps>(
         const snapIndex = initialSnap;
         const sheetHeight = getSheetHeight(sheetRef);
         const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
 
-        if (ySnap !== null) {
-          yTo = ySnap;
+        if (snapY !== null) {
+          yTo = snapY;
         }
       }
 
@@ -234,14 +240,14 @@ export const Sheet = forwardRef<any, SheetProps>(
 
         const sheetHeight = getSheetHeight(sheetRef);
         const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
 
-        if (ySnap !== null) {
-          animate(y, ySnap, animationOptions);
+        if (snapY !== null) {
+          animate(y, snapY, animationOptions);
           onSnap?.(snapIndex);
 
           // +1px for imprecision tolerance
-          if (ySnap + 1 >= sheetHeight) {
+          if (snapY + 1 >= sheetHeight) {
             onClose();
           }
         }

package/src/styles.ts

@@ -20,6 +20,7 @@ export const styles: Record<string, Properties> = {
     backgroundColor: 'rgba(0, 0, 0, 0.2)',
     touchAction: 'none',
     border: 'none',
+    userSelect: 'none',
     WebkitTapHighlightColor: 'transparent',
   },
   container: {
@@ -63,5 +64,6 @@ export const styles: Record<string, Properties> = {
   scroller: {
     height: '100%',
     overflowY: 'auto',
+    overscrollBehaviorY: 'none',
   },
 };

package/src/types.tsx

@@ -1,8 +1,6 @@
 import {
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
-  type HTMLAttributes,
-  type MutableRefObject,
   type ReactNode,
   type RefAttributes,
   type RefObject,
@@ -31,6 +29,8 @@ type CommonProps = MotionProps & {
   className?: string;
 };
 
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+
 export interface SheetTweenConfig {
   ease: EasingDefinition;
   duration: number;
@@ -55,7 +55,7 @@ export type SheetProps = {
   dragCloseThreshold?: number;
   modalEffectThreshold?: number;
 } & SheetEvents &
-  ComponentPropsWithoutRef<typeof motion.div>;
+  MotionDivProps;
 
 export type SheetContainerProps = Omit<
   CommonProps,
@@ -83,8 +83,10 @@ export type SheetBackdropProps = Omit<
   'initial' | 'animate' | 'exit'
 >;
 
-export type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+export type SheetScrollerProps = MotionDivProps & {
   draggableAt?: 'top' | 'bottom' | 'both';
+  disableScroll?: boolean;
+  autoPadding?: boolean;
 };
 
 export interface SheetDragProps {

package/src/utils.ts

@@ -1,5 +1,6 @@
 import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
 import { IS_SSR } from './constants';
+import type { SheetDetent } from './types';
 
 /**
  * Get the rounded height of the sheet element and log a warning if the
@@ -45,6 +46,39 @@ export function getSnapPoints({
   return snapPointValues;
 }
 
+export function getClosestSnapPoint({
+  snapPoints,
+  currentY,
+  sheetHeight,
+  detent,
+}: {
+  snapPoints: number[];
+  currentY: number;
+  sheetHeight: number;
+  detent?: SheetDetent;
+}) {
+  // Inverse values are the values that can be passed to `animate`
+  const snapInverse = snapPoints.map(
+    (p) => sheetHeight - Math.min(p, sheetHeight)
+  );
+
+  // Allow snapping to the top of the sheet if detent is set to `content-height`
+  if (detent === 'content-height' && !snapInverse.includes(0)) {
+    snapInverse.unshift(0);
+  }
+
+  // Get the closest snap point
+  const snapTo = getClosest(snapInverse, currentY);
+  const snapIndex = snapInverse.indexOf(snapTo);
+
+  const snapY = validateSnapTo({
+    snapTo: getClosest(snapInverse, currentY),
+    sheetHeight,
+  });
+
+  return { snapY, snapIndex };
+}
+
 /**
  * Get the closest number to the goal from the array of numbers.
  */