react-modal-sheet 4.1.0 → 4.3.0

package/dist/index.mjs

@@ -46,6 +46,26 @@ function getSnapPoints({
   );
   return snapPointValues;
 }
+function getClosestSnapPoint({
+  snapPoints,
+  currentY,
+  sheetHeight,
+  detent
+}) {
+  const snapInverse = snapPoints.map(
+    (p) => sheetHeight - Math.min(p, sheetHeight)
+  );
+  if (detent === "content-height" && !snapInverse.includes(0)) {
+    snapInverse.unshift(0);
+  }
+  const snapTo = getClosest(snapInverse, currentY);
+  const snapIndex = snapInverse.indexOf(snapTo);
+  const snapY = validateSnapTo({
+    snapTo: getClosest(snapInverse, currentY),
+    sheetHeight
+  });
+  return { snapY, snapIndex };
+}
 function getClosest(nums, goal) {
   let closest = nums[0];
   let minDifference = Math.abs(nums[0] - goal);
@@ -136,11 +156,11 @@ var isIOS = cached(function() {
 var SheetContext = createContext(
   void 0
 );
-var useSheetContext = () => {
+function useSheetContext() {
   const context = useContext(SheetContext);
   if (!context) throw new Error("Sheet context error");
   return context;
-};
+}
 var SheetScrollerContext = createContext(void 0);
 function SheetScrollerContextProvider({
   children
@@ -161,11 +181,11 @@ function SheetScrollerContextProvider({
     children
   );
 }
-var useSheetScrollerContext = () => {
+function useSheetScrollerContext() {
   const context = useContext(SheetScrollerContext);
   if (!context) throw new Error("Sheet scroller context error");
   return context;
-};
+}
 
 // src/styles.ts
 var styles = {
@@ -188,6 +208,7 @@ var styles = {
     backgroundColor: "rgba(0, 0, 0, 0.2)",
     touchAction: "none",
     border: "none",
+    userSelect: "none",
     WebkitTapHighlightColor: "transparent"
   },
   container: {
@@ -230,7 +251,8 @@ var styles = {
   },
   scroller: {
     height: "100%",
-    overflowY: "auto"
+    overflowY: "auto",
+    overscrollBehaviorY: "none"
   }
 };
 var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
@@ -661,11 +683,21 @@ var Sheet = forwardRef(
         onCloseEnd
       };
     });
-    const onDrag = useStableCallback((_, { delta }) => {
+    const onDrag = useStableCallback((_, info) => {
+      const currentY = y.get();
+      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;
+        }
+      }
       const velocity = y.getVelocity();
       if (velocity > 0) indicatorRotation.set(10);
       if (velocity < 0) indicatorRotation.set(-10);
-      y.set(Math.max(y.get() + delta.y, 0));
+      y.set(Math.max(currentY + info.delta.y, 0));
     });
     const onDragStart = useStableCallback(() => {
       const focusedElement = document.activeElement;
@@ -684,18 +716,13 @@ var Sheet = forwardRef(
         let yTo = 0;
         const snapPoints = snapPointsProp ? getSnapPoints({ snapPointsProp, sheetHeight }) : void 0;
         if (snapPoints) {
-          const snapInverse = snapPoints.map(
-            (p) => sheetHeight - Math.min(p, sheetHeight)
-          );
-          if (detent === "content-height" && !snapInverse.includes(0)) {
-            snapInverse.unshift(0);
-          }
-          const snapTo = getClosest(snapInverse, currentY);
-          const snapIndex = snapInverse.indexOf(snapTo);
-          yTo = validateSnapTo({
-            snapTo: getClosest(snapInverse, currentY),
-            sheetHeight
+          const { snapY, snapIndex } = getClosestSnapPoint({
+            snapPoints,
+            currentY,
+            sheetHeight,
+            detent
           });
+          yTo = snapY;
           onSnap == null ? void 0 : onSnap(snapIndex);
         } else if (currentY / sheetHeight > dragCloseThreshold) {
           yTo = sheetHeight;
@@ -719,9 +746,9 @@ var Sheet = forwardRef(
         const snapIndex = initialSnap;
         const sheetHeight = getSheetHeight(sheetRef);
         const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
-        if (ySnap !== null) {
-          yTo = ySnap;
+        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        if (snapY !== null) {
+          yTo = snapY;
         }
       }
       animate(y, yTo, animationOptions);
@@ -735,11 +762,11 @@ var Sheet = forwardRef(
         }
         const sheetHeight = getSheetHeight(sheetRef);
         const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
-        if (ySnap !== null) {
-          animate(y, ySnap, animationOptions);
+        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        if (snapY !== null) {
+          animate(y, snapY, animationOptions);
           onSnap == null ? void 0 : onSnap(snapIndex);
-          if (ySnap + 1 >= sheetHeight) {
+          if (snapY + 1 >= sheetHeight) {
             onClose();
           }
         }
@@ -847,19 +874,15 @@ var SheetContainer = forwardRef(
       animationOptions
     } = useSheetContext();
     const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);
+    const height = detent === "full-height" ? MAX_HEIGHT : void 0;
+    const maxHeight = detent === "content-height" ? MAX_HEIGHT : void 0;
     return /* @__PURE__ */ React2.createElement(
       motion.div,
       {
         ...rest,
         ref: mergeRefs([sheetRef, ref]),
         className: `react-modal-sheet-container ${className}`,
-        style: {
-          ...styles.container,
-          ...style,
-          ...detent === "full-height" && { height: MAX_HEIGHT },
-          ...detent === "content-height" && { maxHeight: MAX_HEIGHT },
-          y
-        },
+        style: { ...styles.container, height, maxHeight, ...style, y },
         initial: { y: windowHeight },
         exit: { y: windowHeight, transition: animationOptions },
         onAnimationComplete: handleAnimationComplete
@@ -960,9 +983,20 @@ var SheetBackdrop = forwardRef(
 );
 SheetBackdrop.displayName = "SheetBackdrop";
 var SheetScroller = forwardRef(
-  ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
-    const sheetScrollerContext = useSheetScrollerContext();
+  ({
+    disableScroll = false,
+    draggableAt = "top",
+    children,
+    style,
+    className = "",
+    ...rest
+  }, ref) => {
+    const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
     function determineDragState(element) {
+      if (disableScroll) {
+        setDragEnabled();
+        return;
+      }
       const { scrollTop, scrollHeight, clientHeight } = element;
       const isScrollable2 = scrollHeight > clientHeight;
       if (!isScrollable2) return;
@@ -970,22 +1004,18 @@ var SheetScroller = forwardRef(
       const isAtBottom = scrollHeight - scrollTop === clientHeight;
       const shouldEnable = draggableAt === "top" && isAtTop || draggableAt === "bottom" && isAtBottom || draggableAt === "both" && (isAtTop || isAtBottom);
       if (shouldEnable) {
-        sheetScrollerContext.setDragEnabled();
+        setDragEnabled();
       } else {
-        sheetScrollerContext.setDragDisabled();
+        setDragDisabled();
       }
     }
-    function onScroll(e) {
-      determineDragState(e.currentTarget);
-      if (rest.onScroll) {
-        rest.onScroll(e);
-      }
+    function onScroll(event) {
+      determineDragState(event.currentTarget);
+      if (rest.onScroll) rest.onScroll(event);
     }
-    function onTouchStart(e) {
-      determineDragState(e.currentTarget);
-      if (rest.onTouchStart) {
-        rest.onTouchStart(e);
-      }
+    function onTouchStart(event) {
+      determineDragState(event.currentTarget);
+      if (rest.onTouchStart) rest.onTouchStart(event);
     }
     const scrollProps = isTouchDevice() ? { onScroll, onTouchStart } : void 0;
     return /* @__PURE__ */ React2.createElement(
@@ -994,7 +1024,11 @@ var SheetScroller = forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
-        style: { ...styles.scroller, ...style },
+        style: {
+          ...styles.scroller,
+          ...style,
+          overflowY: disableScroll ? "hidden" : "auto"
+        },
         ...scrollProps
       },
       children