wip

Author: sclebal

src/SheetBackdrop.tsx

@@ -25,14 +25,14 @@ export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
 
     return (
       <Comp
-        {...(rest as any)}
         ref={ref}
         className={`react-modal-sheet-backdrop ${className}`}
         style={backdropStyle}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 1 }}
+        {...(rest as any)}
       />
     );
   }

src/SheetContainer.tsx

@@ -1,26 +1,64 @@
-import { type MotionStyle, motion } from 'motion/react';
+import {
+  type MotionStyle,
+  motion,
+  useMotionValueEvent,
+  useTransform,
+} from 'motion/react';
 import React, { forwardRef } from 'react';
 
 import { DEFAULT_HEIGHT } from './constants';
 import { useSheetContext } from './context';
 import { styles } from './styles';
 import { type SheetContainerProps } from './types';
 import { applyStyles, mergeRefs } from './utils';
+import { useDimensions } from './hooks/use-dimensions';
 
 export const SheetContainer = forwardRef<any, SheetContainerProps>(
   ({ children, style, className = '', unstyled, ...rest }, ref) => {
     const sheetContext = useSheetContext();
 
     const isUnstyled = unstyled ?? sheetContext.unstyled;
 
+    const sheetHeightConstraint = sheetContext.sheetHeightConstraint;
+
+    useMotionValueEvent(sheetContext.yOverflow, 'change', (val) => {
+      sheetContext.sheetRef.current?.style.setProperty(
+        '--overflow',
+        val + 'px'
+      );
+    });
+
+    // y might be negative due to elastic
+    // for a better experience, we clamp the y value to 0
+    // and use the overflow value to add padding to the bottom of the container
+    // causing the illusion of the sheet being elastic
+    const y = sheetContext.y;
+    const nonNegativeY = useTransform(sheetContext.y, (val) =>
+      Math.max(0, val)
+    );
+
+    const { windowHeight } = useDimensions();
+    const didHitMaxHeight =
+      windowHeight - sheetHeightConstraint <= sheetContext.sheetHeight;
+
     const containerStyle: MotionStyle = {
       ...applyStyles(styles.container, isUnstyled),
       ...style,
-      y: sheetContext.y,
+      ...(isUnstyled
+        ? {
+            y,
+          }
+        : {
+            y: nonNegativeY,
+            // compensate height for the elastic behavior of the sheet
+            ...(!didHitMaxHeight && { paddingBottom: sheetContext.yOverflow }),
+          }),
     };
 
+    const constrainedHeight = `calc(${DEFAULT_HEIGHT} - ${sheetHeightConstraint}px)`;
+
     if (sheetContext.detent === 'default') {
-      containerStyle.height = DEFAULT_HEIGHT;
+      containerStyle.height = constrainedHeight;
     }
 
     if (sheetContext.detent === 'full') {
@@ -30,7 +68,7 @@ export const SheetContainer = forwardRef<any, SheetContainerProps>(
 
     if (sheetContext.detent === 'content') {
       containerStyle.height = 'auto';
-      containerStyle.maxHeight = DEFAULT_HEIGHT;
+      containerStyle.maxHeight = constrainedHeight;
     }
 
     return (

src/SheetContent.tsx

@@ -71,10 +71,6 @@ export const SheetContent = forwardRef<any, SheetContentProps>(
         'env(keyboard-inset-height, var(--keyboard-inset-height, 0px))';
     }
 
-    if (disableScroll) {
-      scrollStyle.overflowY = 'hidden';
-    }
-
     return (
       <motion.div
         {...rest}
@@ -85,13 +81,17 @@ export const SheetContent = forwardRef<any, SheetContentProps>(
         dragConstraints={dragConstraints.ref}
         onMeasureDragConstraints={dragConstraints.onMeasure}
       >
-        <motion.div
-          ref={mergeRefs([scroll.ref, scrollRefProp])}
-          style={scrollStyle}
-          className="react-modal-sheet-content-scroller"
-        >
-          {children}
-        </motion.div>
+        {disableScroll ? (
+          children
+        ) : (
+          <motion.div
+            ref={mergeRefs([scroll.ref, scrollRefProp])}
+            style={scrollStyle}
+            className="react-modal-sheet-content-scroller"
+          >
+            {children}
+          </motion.div>
+        )}
       </motion.div>
     );
   }

src/constants.ts

@@ -1,6 +1,9 @@
 import type { SheetTweenConfig } from './types';
 
-export const DEFAULT_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
+export const DEFAULT_TOP_CONSTRAINT = 34;
+
+export const DEFAULT_HEIGHT =
+  'calc(var(--overflow, 0px) + 100% - env(safe-area-inset-top))';
 
 export const IS_SSR = typeof window === 'undefined';
 

src/hooks/use-prevent-scroll.ts

@@ -158,6 +158,7 @@ function preventScrollMobileSafari() {
   const onTouchStart = (e: TouchEvent) => {
     // Use `composedPath` to support shadow DOM.
     const target = e.composedPath()?.[0] as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
 
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = getScrollParent(target, true);

src/index.tsx

@@ -6,13 +6,17 @@ import { SheetContent } from './SheetContent';
 import { SheetDragIndicator } from './SheetDragIndicator';
 import { SheetHeader } from './SheetHeader';
 import { Sheet as SheetBase } from './sheet';
-import type { SheetCompound } from './types';
+import type { SheetCompound, SheetSnapPoint } from './types';
+import { useScrollPosition } from './hooks/use-scroll-position';
 
 export interface SheetRef {
   y: MotionValue<number>;
   yInverted: MotionValue<number>;
   height: number;
   snapTo: (index: number) => Promise<void>;
+  currentSnap: number | undefined;
+  getSnapPoint: (index: number) => SheetSnapPoint | null;
+  snapPoints: SheetSnapPoint[];
 }
 
 export const Sheet: SheetCompound = Object.assign(SheetBase, {
@@ -23,6 +27,8 @@ export const Sheet: SheetCompound = Object.assign(SheetBase, {
   Backdrop: SheetBackdrop,
 });
 
+export { useScrollPosition };
+
 // Export types
 export type {
   SheetBackdropProps,

src/sheet.tsx

@@ -1,5 +1,6 @@
 import {
   animate,
+  Axis,
   type DragHandler,
   motion,
   type Transition,
@@ -19,6 +20,7 @@ import useMeasure from 'react-use-measure';
 import {
   DEFAULT_DRAG_CLOSE_THRESHOLD,
   DEFAULT_DRAG_VELOCITY_THRESHOLD,
+  DEFAULT_TOP_CONSTRAINT,
   DEFAULT_TWEEN_CONFIG,
   IS_SSR,
   REDUCED_MOTION_TWEEN_CONFIG,
@@ -37,7 +39,7 @@ import {
 } from './snap';
 import { styles } from './styles';
 import { type SheetContextType, type SheetProps } from './types';
-import { applyStyles, waitForElement } from './utils';
+import { applyConstraints, applyStyles, waitForElement } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -61,6 +63,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       style,
       tweenConfig = DEFAULT_TWEEN_CONFIG,
       unstyled = false,
+      dragConstraints: dragConstraintsProp,
       onOpenStart,
       onOpenEnd,
       onClose,
@@ -83,9 +86,27 @@ export const Sheet = forwardRef<any, SheetProps>(
         ? computeSnapPoints({ sheetHeight, snapPointsProp })
         : [];
 
+    // for default & content detents, the sheet height is constrained instead of the drag
+    const sheetHeightConstraint =
+      detent === 'full'
+        ? 0
+        : (dragConstraintsProp?.min ?? DEFAULT_TOP_CONSTRAINT);
+
+    const dragBottomConstraint =
+      (dragConstraintsProp?.max ?? Infinity) - sheetHeightConstraint;
+
+    const dragConstraints: Axis = {
+      min: 0, // top constraint (applied through sheet height instead)
+      max: dragBottomConstraint, // bottom constraint
+    };
+
     const { windowHeight } = useDimensions();
     const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
     const y = useMotionValue(closedY);
+    const yUnconstrainedRef = useRef<number | undefined>(undefined);
+    // y is below 0 when the sheet is overextended
+    // this happens because the sheet is elastic and can be dragged beyond the full open position
+    const yOverflow = useTransform(y, (val) => (val < 0 ? Math.abs(val) : 0));
     const yInverted = useTransform(y, (val) => Math.max(sheetHeight - val, 0));
     const indicatorRotation = useMotionValue(0);
 
@@ -104,12 +125,12 @@ export const Sheet = forwardRef<any, SheetProps>(
     // Disable drag if the keyboard is open to avoid weird behavior
     const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
 
-    // +2 for tolerance in case the animated value is slightly off
+    // -10 for tolerance in case the animated value is slightly off
     const zIndex = useTransform(y, (val) =>
-      val + 2 >= closedY ? -1 : (style?.zIndex ?? 9999)
+      val - 10 >= closedY ? -1 : (style?.zIndex ?? 9999)
     );
     const visibility = useTransform(y, (val) =>
-      val + 2 >= closedY ? 'hidden' : 'visible'
+      val - 10 >= closedY ? 'hidden' : 'visible'
     );
 
     const updateSnap = useStableCallback((snapIndex: number) => {
@@ -173,27 +194,37 @@ export const Sheet = forwardRef<any, SheetProps>(
     });
 
     const onDrag = useStableCallback<DragHandler>((event, info) => {
-      onDragProp?.(event, info);
+      if (yUnconstrainedRef.current === undefined) return;
 
-      const currentY = y.get();
+      onDragProp?.(event, info);
+      if (event.defaultPrevented) return;
 
       // Update drag indicator rotation based on drag velocity
       const velocity = y.getVelocity();
       if (velocity > 0) indicatorRotation.set(10);
       if (velocity < 0) indicatorRotation.set(-10);
 
-      // Make sure user cannot drag beyond the top of the sheet
-      y.set(Math.max(currentY + info.delta.y, 0));
+      const currentY = yUnconstrainedRef.current;
+      const nextY = currentY + info.delta.y;
+      yUnconstrainedRef.current = nextY;
+      const constrainedY = applyConstraints(nextY, dragConstraints, {
+        min: 0.1,
+        max: 0.1,
+      });
+      y.set(constrainedY);
     });
 
     const onDragStart = useStableCallback<DragHandler>((event, info) => {
-      blurActiveInput();
+      yUnconstrainedRef.current = y.get();
       onDragStartProp?.(event, info);
+      if (event.defaultPrevented) return;
+      blurActiveInput();
     });
 
     const onDragEnd = useStableCallback<DragHandler>((event, info) => {
-      blurActiveInput();
       onDragEndProp?.(event, info);
+      if (event.defaultPrevented) return;
+      blurActiveInput();
 
       const currentY = y.get();
 
@@ -258,6 +289,7 @@ export const Sheet = forwardRef<any, SheetProps>(
 
       // Update the spring value so that the sheet is animated to the snap point
       animate(y, yTo, animationOptions);
+      yUnconstrainedRef.current = undefined;
 
       // +1px for imprecision tolerance
       // Only call onClose if disableDismiss is false or if we're actually closing
@@ -274,6 +306,9 @@ export const Sheet = forwardRef<any, SheetProps>(
       yInverted,
       height: sheetHeight,
       snapTo,
+      getSnapPoint,
+      snapPoints,
+      currentSnap,
     }));
 
     useModalEffect({
@@ -348,6 +383,9 @@ export const Sheet = forwardRef<any, SheetProps>(
       sheetRef,
       unstyled,
       y,
+      yOverflow,
+      sheetHeight,
+      sheetHeightConstraint,
     };
 
     const sheet = (

src/snap.ts

@@ -234,9 +234,29 @@ export function handleLowVelocityDrag({
     };
   }
 
-  // No snap point down, stay at current
-  return {
+  const noChangesResult = {
     yTo: currentSnapPoint.snapValueY,
     snapIndex: currentSnapPoint.snapIndex,
   };
+
+  switch (dragDirection) {
+    case 'down': {
+      const firstSnapPoint = snapPoints.at(0);
+      // No snap point down, stay at current
+      if (!firstSnapPoint) return noChangesResult;
+      return {
+        yTo: firstSnapPoint.snapValueY,
+        snapIndex: firstSnapPoint.snapIndex,
+      };
+    }
+    case 'up': {
+      const lastSnapPoint = snapPoints.at(-1);
+      // No snap point up, stay at current
+      if (!lastSnapPoint) return noChangesResult;
+      return {
+        yTo: lastSnapPoint.snapValueY,
+        snapIndex: lastSnapPoint.snapIndex,
+      };
+    }
+  }
 }