react-modal-sheet 4.2.0 → 4.4.0

package/README.md

@@ -159,7 +159,9 @@ The `y` value is an internal `MotionValue` that represents the distance to the t
 
 Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 
-The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
+The `y` value can be useful for certain situtations, eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable at any snap point.
+
+Below you can see a simplified example of this situation:
 
 ```tsx
 import { Sheet, SheetRef } from 'react-modal-sheet';
@@ -202,6 +204,11 @@ function Example() {
 }
 ```
 
+> [!NOTE]
+> As this use case is quite a common one, the `Sheet.Scroller` component has a built-in prop called `autoPadding` which automatically keeps the bottom padding in sync with the animated `y` value.
+>
+> See [Automatic padding with snap points](#automatic-padding-with-snap-points) for more details.
+
 ### Detents
 
 By default the sheet will take the full height of the page minus top padding and safe area inset. If you want the sheet height to be based on it's content you can pass `detent="content-height"` prop to the `Sheet` component:
@@ -280,9 +287,11 @@ 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).    |
+| `autoPadding`   | no       | false   | Automatically apply padding bottom to the scroller based on the dragged distance to ensure that content can be scrolled to the bottom at any snap point. |
 
 ### `Sheet.Backdrop`
 
@@ -340,6 +349,72 @@ 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>
+  );
+}
+```
+
+#### Automatic padding with snap points
+
+If you are using snap points and want to make sure that the content is scrollable at all snap points you can use the `autoPadding` prop on the `Sheet.Scroller` component.
+
+This will automatically apply padding to the bottom of the scroller based on the dragged distance to ensure that content can be scrolled to the bottom at any snap point.
+
+```tsx
+import { Sheet } from 'react-modal-sheet';
+import { useState } from 'react';
+
+const snapPoints = [-50, 0.5, 0];
+const initialSnap = 1;
+
+function AutoPaddingExample() {
+  return (
+    <Sheet initialSnap={initialSnap} snapPoints={snapPoints}>
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>
+          <Sheet.Scroller autoPadding draggableAt="both">
+            {/*...*/}
+          </Sheet.Scroller>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
+> [!NOTE]
+> For backwards compatibility the `autoPadding` prop is disabled by default but it will be enabled by default in the next major version.
+
 ### 🪟 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

@@ -1,5 +1,5 @@
 import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
 
 interface SheetEvents {
     onOpenStart?: () => void;
@@ -12,6 +12,7 @@ type SheetDetent = 'full-height' | 'content-height';
 type CommonProps = MotionProps & {
     className?: string;
 };
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -34,7 +35,7 @@ type SheetProps = {
     dragVelocityThreshold?: number;
     dragCloseThreshold?: number;
     modalEffectThreshold?: number;
-} & SheetEvents & ComponentPropsWithoutRef<typeof motion.div>;
+} & SheetEvents & MotionDivProps;
 type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
     children: ReactNode;
 };
@@ -43,8 +44,10 @@ type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConst
     disableDrag?: boolean;
 };
 type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
-type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+type SheetScrollerProps = MotionDivProps & {
     draggableAt?: 'top' | 'bottom' | 'both';
+    disableScroll?: boolean;
+    autoPadding?: boolean;
 };
 type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
 type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
 
 interface SheetEvents {
     onOpenStart?: () => void;
@@ -12,6 +12,7 @@ type SheetDetent = 'full-height' | 'content-height';
 type CommonProps = MotionProps & {
     className?: string;
 };
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -34,7 +35,7 @@ type SheetProps = {
     dragVelocityThreshold?: number;
     dragCloseThreshold?: number;
     modalEffectThreshold?: number;
-} & SheetEvents & ComponentPropsWithoutRef<typeof motion.div>;
+} & SheetEvents & MotionDivProps;
 type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
     children: ReactNode;
 };
@@ -43,8 +44,10 @@ type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConst
     disableDrag?: boolean;
 };
 type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
-type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+type SheetScrollerProps = MotionDivProps & {
     draggableAt?: 'top' | 'bottom' | 'both';
+    disableScroll?: boolean;
+    autoPadding?: 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);
@@ -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();
           }
         }
@@ -962,9 +989,22 @@ var SheetBackdrop = React2.forwardRef(
 );
 SheetBackdrop.displayName = "SheetBackdrop";
 var SheetScroller = React2.forwardRef(
-  ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
-    const sheetScrollerContext = useSheetScrollerContext();
+  ({
+    autoPadding = true,
+    disableScroll = false,
+    draggableAt = "top",
+    children,
+    style: styleProp,
+    className = "",
+    ...rest
+  }, ref) => {
+    const { y } = useSheetContext();
+    const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
     function determineDragState(element) {
+      if (disableScroll) {
+        setDragEnabled();
+        return;
+      }
       const { scrollTop, scrollHeight, clientHeight } = element;
       const isScrollable2 = scrollHeight > clientHeight;
       if (!isScrollable2) return;
@@ -972,31 +1012,37 @@ 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;
+    const style = {
+      ...styles.scroller,
+      ...styleProp
+    };
+    if (autoPadding) {
+      style.paddingBottom = y;
+    }
+    if (disableScroll) {
+      style.overflowY = "hidden";
+    }
     return /* @__PURE__ */ React2__default.default.createElement(
-      "div",
+      react.motion.div,
       {
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
-        style: { ...styles.scroller, ...style },
+        style,
         ...scrollProps
       },
       children