react-modal-sheet 5.4.1 → 5.5.0

package/dist/index.js

@@ -137,7 +137,7 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
   duration: 0.01
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
-var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+var DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;
 
 // src/utils.ts
 function applyStyles(styles2, unstyled) {
@@ -1157,73 +1157,145 @@ function computeSnapPoints({
     // Y value is inverted as `y = 0` means sheet is at the top
   }));
 }
-function findClosestSnapPoint({
-  snapPoints,
-  currentY
-}) {
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function sign(value) {
+  if (value > 0) return 1;
+  if (value < 0) return -1;
+  return 0;
+}
+function toAscendingYSnaps(snapPoints) {
+  return snapPoints.slice().sort((a, b) => a.snapValueY - b.snapValueY);
+}
+function findNearestSnapByY(snapPoints, y) {
   return snapPoints.reduce(
-    (closest, snap) => Math.abs(snap.snapValueY - currentY) < Math.abs(closest.snapValueY - currentY) ? snap : closest
+    (closest, snap) => Math.abs(snap.snapValueY - y) < Math.abs(closest.snapValueY - y) ? snap : closest
   );
 }
-function findNextSnapPointInDirection({
+function findNearestSnapAboveY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = snaps.length - 1; i >= 0; i--) {
+    if (snaps[i].snapValueY < y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function findNearestSnapBelowY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = 0; i < snaps.length; i++) {
+    if (snaps[i].snapValueY > y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function resolveDirection({
+  offsetY,
+  velocityY,
+  deltaY
+}) {
+  if (Math.abs(velocityY) > 50) return sign(velocityY);
+  const offsetDirection = sign(offsetY);
+  if (offsetDirection !== 0) return offsetDirection;
+  return sign(deltaY);
+}
+function classifyDragEnd({
   y,
+  info,
+  sheetHeight,
   snapPoints,
-  dragDirection
+  dragVelocityThreshold,
+  dragCloseThreshold
 }) {
-  if (dragDirection === "down") {
-    return snapPoints.slice().reverse().find((s) => s.snapValueY > y);
-  } else {
-    return snapPoints.find((s) => s.snapValueY < y);
+  const flickVelocity = dragVelocityThreshold;
+  const strongFlickVelocity = Math.max(2e3, flickVelocity);
+  const distanceCommitRatio = 0.35;
+  const predictionTime = 0.2;
+  const minDragDistance = 20;
+  const snapStickiness = 24;
+  const minY = 0;
+  const maxY = sheetHeight;
+  const offsetY = info.offset.y;
+  const deltaY = info.delta.y;
+  const velocityY = info.velocity.y;
+  const predictedY = clamp(y + velocityY * predictionTime, minY, maxY);
+  const absVelocity = Math.abs(velocityY);
+  const direction = resolveDirection({ offsetY, velocityY, deltaY });
+  const isStrongFlick = absVelocity > strongFlickVelocity;
+  const isFlick = absVelocity > flickVelocity;
+  if (snapPoints.length === 0) {
+    if (isFlick) {
+      return {
+        yTo: direction < 0 ? minY : maxY,
+        snapIndex: void 0
+      };
+    }
+    const midpoint = minY + (maxY - minY) * dragCloseThreshold;
+    return {
+      yTo: predictedY < midpoint ? minY : maxY,
+      snapIndex: void 0
+    };
   }
-}
-function handleHighVelocityDrag({
-  dragDirection,
-  snapPoints
-}) {
-  const bottomSnapPoint = snapPoints[0];
-  const topSnapPoint = snapPoints[snapPoints.length - 1];
-  if (dragDirection === "down") {
+  const nearestSnap = findNearestSnapByY(snapPoints, y);
+  if (!isFlick && Math.abs(offsetY) < minDragDistance) {
     return {
-      yTo: bottomSnapPoint.snapValueY,
-      snapIndex: bottomSnapPoint.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.snapIndex
     };
   }
-  return {
-    yTo: topSnapPoint.snapValueY,
-    snapIndex: topSnapPoint.snapIndex
-  };
-}
-function handleLowVelocityDrag({
-  currentSnapPoint,
-  currentY,
-  dragDirection,
-  snapPoints,
-  velocity
-}) {
-  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
-    snapPoints,
-    currentY
-  });
-  if (Math.abs(velocity) < 20) {
+  if (!isFlick && Math.abs(y - nearestSnap.snapValueY) < snapStickiness) {
     return {
-      yTo: closestSnapRelativeToCurrentY.snapValueY,
-      snapIndex: closestSnapRelativeToCurrentY.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.snapIndex
     };
   }
-  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
-    y: currentY,
-    snapPoints,
-    dragDirection
-  });
-  if (nextSnapInDirectionRelativeToCurrentY) {
+  if (isStrongFlick) {
+    const target = direction < 0 ? minY : maxY;
+    const targetSnap = findNearestSnapByY(snapPoints, target);
+    return {
+      yTo: target,
+      snapIndex: targetSnap.snapIndex
+    };
+  }
+  if (isFlick) {
+    const nextSnap2 = direction < 0 ? findNearestSnapAboveY(snapPoints, y) : findNearestSnapBelowY(snapPoints, y);
+    const fallbackY = direction < 0 ? minY : maxY;
+    const fallbackSnap = findNearestSnapByY(snapPoints, fallbackY);
+    const targetSnap = nextSnap2 ?? fallbackSnap;
+    return {
+      yTo: targetSnap.snapValueY,
+      snapIndex: targetSnap.snapIndex
+    };
+  }
+  const firstSnap = toAscendingYSnaps(snapPoints)[0];
+  const lastSnap = toAscendingYSnaps(snapPoints)[snapPoints.length - 1];
+  const prevSnap = findNearestSnapAboveY(snapPoints, y) ?? firstSnap;
+  const nextSnap = findNearestSnapBelowY(snapPoints, y) ?? lastSnap;
+  if (prevSnap.snapIndex === nextSnap.snapIndex) {
     return {
-      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
-      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex
+      yTo: prevSnap.snapValueY,
+      snapIndex: prevSnap.snapIndex
     };
   }
+  const range = nextSnap.snapValueY - prevSnap.snapValueY;
+  const progress = range > 0 ? (y - prevSnap.snapValueY) / range : 0;
+  let selectedSnap = nearestSnap;
+  if (direction > 0) {
+    selectedSnap = progress > distanceCommitRatio ? nextSnap : prevSnap;
+  } else if (direction < 0) {
+    selectedSnap = progress < 1 - distanceCommitRatio ? prevSnap : nextSnap;
+  }
+  if (absVelocity > 200) {
+    const predictedSnap = findNearestSnapByY(snapPoints, predictedY);
+    if (Math.abs(predictedSnap.snapValueY - y) < Math.abs(selectedSnap.snapValueY - y)) {
+      selectedSnap = predictedSnap;
+    }
+  }
   return {
-    yTo: currentSnapPoint.snapValueY,
-    snapIndex: currentSnapPoint.snapIndex
+    yTo: selectedSnap.snapValueY,
+    snapIndex: selectedSnap.snapIndex
   };
 }
 
@@ -1370,45 +1442,25 @@ var Sheet = React4.forwardRef(
       blurActiveInput();
       onDragEndProp == null ? void 0 : onDragEndProp(event, info);
       const currentY = y.get();
-      let yTo = 0;
-      const currentSnapPoint = currentSnap !== void 0 ? getSnapPoint(currentSnap) : null;
-      if (currentSnapPoint) {
-        const dragOffsetDirection = info.offset.y > 0 ? "down" : "up";
-        const dragVelocityDirection = info.velocity.y > 0 ? "down" : "up";
-        const isHighVelocity = Math.abs(info.velocity.y) > dragVelocityThreshold;
-        let result;
-        if (isHighVelocity) {
-          result = handleHighVelocityDrag({
-            snapPoints,
-            dragDirection: dragVelocityDirection
-          });
-        } else {
-          result = handleLowVelocityDrag({
-            currentSnapPoint,
-            currentY,
-            dragDirection: dragOffsetDirection,
-            snapPoints,
-            velocity: info.velocity.y
-          });
-        }
-        yTo = result.yTo;
-        if (disableDismiss && yTo + 1 >= sheetHeight) {
-          const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
-          if (bottomSnapPoint) {
-            yTo = bottomSnapPoint.snapValueY;
-            updateSnap(bottomSnapPoint.snapIndex);
-          } else {
-            yTo = currentY;
-          }
-        } else if (result.snapIndex !== void 0) {
-          updateSnap(result.snapIndex);
-        }
-      } else if (info.velocity.y > dragVelocityThreshold || currentY > sheetHeight * dragCloseThreshold) {
-        if (disableDismiss) {
-          yTo = 0;
+      const result = classifyDragEnd({
+        y: currentY,
+        info,
+        sheetHeight,
+        dragCloseThreshold,
+        snapPoints,
+        dragVelocityThreshold
+      });
+      let yTo = result.yTo;
+      if (disableDismiss && yTo + 1 >= sheetHeight) {
+        const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
+        if (bottomSnapPoint) {
+          yTo = bottomSnapPoint.snapValueY;
+          updateSnap(bottomSnapPoint.snapIndex);
         } else {
-          yTo = closedY;
+          yTo = currentY;
         }
+      } else if (result.snapIndex !== void 0) {
+        updateSnap(result.snapIndex);
       }
       react.animate(y, yTo, animationOptions);
       if (yTo + 1 >= sheetHeight && !disableDismiss) {