react-modal-sheet 4.1.0 → 4.3.0

package/README.md

@@ -280,9 +280,10 @@ Sheet scroller can be used to make the whole sheet content or parts of it scroll
 
 #### Scroller props
 
-| Name          | Required | Default | Description                                                                                                                            |
-| ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `draggableAt` | no       | `"top"` | Should the drag be enabled when the element is scrolled either to the top, bottom, or both. Available values: `top`, `bottom`, `both`. |
+| Name            | Required | Default | Description                                                                                                                                           |
+| --------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `draggableAt`   | no       | `"top"` | Should the drag be enabled when the element is scrolled either to the top, bottom, or both. Available values: `top`, `bottom`, `both`.                |
+| `disableScroll` | no       | false   | Disable scrolling. This can be combined with snap points to make the sheet scroller only scrollable at a given snap point (usually the top position). |
 
 ### `Sheet.Backdrop`
 
@@ -340,6 +341,39 @@ function ScrollableExample() {
 }
 ```
 
+#### Disabling scroll manually
+
+You can also disable scrolling manually by passing `disableScroll` prop to the `Sheet.Scroller` component. This can be useful if you want to have a scrollable sheet but only at a certain snap point.
+
+For example, if you have a snap point at the top of the sheet and you want to make the content scrollable only when the sheet is at that snap point, you can do the following:
+
+```tsx
+const snapPoints = [1, 0.5, 0];
+const initialSnap = 1;
+
+function DisableScrollExample() {
+  const [currentSnap, setCurrentSnap] = useState(initialSnap);
+
+  return (
+    <Sheet
+      initialSnap={initialSnap}
+      snapPoints={snapPoints}
+      onSnap={setCurrentSnap}
+    >
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>
+          <Sheet.Scroller draggableAt="top" disableScroll={currentSnap !== 0}>
+            {/*...*/}
+          </Sheet.Scroller>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
 ### 🪟 iOS Modal View effect
 
 In addition to the `Sheet.Backdrop` it's possible to apply a scaling effect to the main app element to highlight the modality of the bottom sheet. This effect mimics the [iOS Modal View](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/) presentation style to bring more focus to the sheet and add some delight to the user experience.

package/dist/index.d.mts

@@ -45,6 +45,7 @@ type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConst
 type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
 type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
     draggableAt?: 'top' | 'bottom' | 'both';
+    disableScroll?: boolean;
 };
 type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
 type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;

package/dist/index.d.ts

@@ -45,6 +45,7 @@ type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConst
 type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
 type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
     draggableAt?: 'top' | 'bottom' | 'both';
+    disableScroll?: boolean;
 };
 type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
 type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;

package/dist/index.js

@@ -52,6 +52,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);
@@ -142,11 +162,11 @@ var isIOS = cached(function() {
 var SheetContext = React2.createContext(
   void 0
 );
-var useSheetContext = () => {
+function useSheetContext() {
   const context = React2.useContext(SheetContext);
   if (!context) throw new Error("Sheet context error");
   return context;
-};
+}
 var SheetScrollerContext = React2.createContext(void 0);
 function SheetScrollerContextProvider({
   children
@@ -167,11 +187,11 @@ function SheetScrollerContextProvider({
     children
   );
 }
-var useSheetScrollerContext = () => {
+function useSheetScrollerContext() {
   const context = React2.useContext(SheetScrollerContext);
   if (!context) throw new Error("Sheet scroller context error");
   return context;
-};
+}
 
 // src/styles.ts
 var styles = {
@@ -194,6 +214,7 @@ var styles = {
     backgroundColor: "rgba(0, 0, 0, 0.2)",
     touchAction: "none",
     border: "none",
+    userSelect: "none",
     WebkitTapHighlightColor: "transparent"
   },
   container: {
@@ -236,7 +257,8 @@ var styles = {
   },
   scroller: {
     height: "100%",
-    overflowY: "auto"
+    overflowY: "auto",
+    overscrollBehaviorY: "none"
   }
 };
 var useIsomorphicLayoutEffect = IS_SSR ? React2.useEffect : React2.useLayoutEffect;
@@ -667,11 +689,21 @@ var Sheet = React2.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;
@@ -690,18 +722,13 @@ var Sheet = React2.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;
@@ -725,9 +752,9 @@ var Sheet = React2.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;
         }
       }
       react.animate(y, yTo, animationOptions);
@@ -741,11 +768,11 @@ var Sheet = React2.forwardRef(
         }
         const sheetHeight = getSheetHeight(sheetRef);
         const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
-        if (ySnap !== null) {
-          react.animate(y, ySnap, animationOptions);
+        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        if (snapY !== null) {
+          react.animate(y, snapY, animationOptions);
           onSnap == null ? void 0 : onSnap(snapIndex);
-          if (ySnap + 1 >= sheetHeight) {
+          if (snapY + 1 >= sheetHeight) {
             onClose();
           }
         }
@@ -853,19 +880,15 @@ var SheetContainer = React2.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__default.default.createElement(
       react.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
@@ -966,9 +989,20 @@ var SheetBackdrop = React2.forwardRef(
 );
 SheetBackdrop.displayName = "SheetBackdrop";
 var SheetScroller = React2.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;
@@ -976,22 +1010,18 @@ var SheetScroller = React2.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__default.default.createElement(
@@ -1000,7 +1030,11 @@ var SheetScroller = React2.forwardRef(
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
-        style: { ...styles.scroller, ...style },
+        style: {
+          ...styles.scroller,
+          ...style,
+          overflowY: disableScroll ? "hidden" : "auto"
+        },
         ...scrollProps
       },
       children