react-modal-sheet 4.3.0 → 5.0.0

package/src/snap.ts

@@ -0,0 +1,226 @@
+import type { SheetSnapPoint } from './types';
+import { isAscendingOrder } from './utils';
+
+/**
+ * Convert negative / percentage snap points to absolute values
+ *
+ * Example output:
+ *
+ * ```json
+ * [
+ *     {
+ *         "snapIndex": 0, // <-- bottom snap point
+ *         "snapValue": 0,
+ *         "snapValueY": 810
+ *     },
+ *     {
+ *         "snapIndex": 1,
+ *         "snapValue": 170,
+ *         "snapValueY": 640
+ *     },
+ *     {
+ *         "snapIndex": 2,
+ *         "snapValue": 405,
+ *         "snapValueY": 405
+ *     },
+ *     {
+ *         "snapIndex": 3,
+ *         "snapValue": 760,
+ *         "snapValueY": 50
+ *     },
+ *     {
+ *         "snapIndex": 4, // <-- top snap point
+ *         "snapValue": 810,
+ *         "snapValueY": 0
+ *     }
+ * ]
+ * ```
+ */
+export function computeSnapPoints({
+  snapPointsProp,
+  sheetHeight,
+}: {
+  snapPointsProp: number[];
+  sheetHeight: number;
+}): SheetSnapPoint[] {
+  if (sheetHeight <= 0) {
+    console.warn(
+      `Sheet height is ${sheetHeight}, cannot compute snap points. ` +
+        'Make sure the sheet is mounted and has a valid height.'
+    );
+    return [];
+  }
+
+  const snapPointValues = snapPointsProp.map((point) => {
+    // Percentage values e.g. between 0.0 and 1.0
+    if (point > 0 && point <= 1) {
+      return Math.round(point * sheetHeight);
+    }
+
+    return point < 0 ? sheetHeight + point : point; // negative values
+  });
+
+  console.assert(
+    isAscendingOrder(snapPointValues),
+    `Snap points need to be in ascending order got: [${snapPointsProp.join(', ')}]`
+  );
+
+  // Make sure all snap points are within the sheet height
+  snapPointValues.forEach((snap) => {
+    if (snap < 0 || snap > sheetHeight) {
+      console.warn(
+        `Snap point ${snap} is outside of the sheet height ${sheetHeight}. ` +
+          'This can cause unexpected behavior. Consider adjusting your snap points.'
+      );
+    }
+  });
+
+  if (!snapPointValues.includes(sheetHeight)) {
+    console.warn(
+      'Snap points do not include the sheet height.' +
+        'Please include `1` as the last snap point or it will be included automatically.' +
+        'This is to ensure the sheet can be fully opened.'
+    );
+    snapPointValues.push(sheetHeight);
+  }
+
+  return snapPointValues.map((snap, index) => ({
+    snapIndex: index,
+    snapValue: snap, // Absolute value from the bottom of the sheet
+    snapValueY: sheetHeight - snap, // Y value is inverted as `y = 0` means sheet is at the top
+  }));
+}
+
+function findClosestSnapPoint({
+  snapPoints,
+  currentY,
+}: {
+  snapPoints: SheetSnapPoint[];
+  currentY: number;
+}) {
+  return snapPoints.reduce((closest, snap) =>
+    Math.abs(snap.snapValueY - currentY) <
+    Math.abs(closest.snapValueY - currentY)
+      ? snap
+      : closest
+  );
+}
+
+function findNextSnapPointInDirection({
+  y,
+  snapPoints,
+  dragDirection,
+}: {
+  y: number;
+  snapPoints: SheetSnapPoint[];
+  dragDirection: 'up' | 'down';
+}) {
+  // NOTE: lower Y means higher in the sheet position!
+  if (dragDirection === 'down') {
+    /**
+     * Example:
+     *
+     * [
+     *   { snapIndex: 0, snapValueY: 810 },
+     *   { snapIndex: 1, snapValueY: 640 },
+     *   { snapIndex: 2, snapValueY: 405 }, <-- next down
+     *   ------------- Y = 60 ------------
+     *   { snapIndex: 3, snapValueY: 50 },
+     *   { snapIndex: 4, snapValueY: 0 },
+     * ]
+     */
+    return snapPoints
+      .slice()
+      .reverse()
+      .find((s) => s.snapValueY > y);
+  } else {
+    /**
+     * Example:
+     * [
+     *   { snapIndex: 0, snapValueY: 810 },
+     *   { snapIndex: 1, snapValueY: 640 },
+     *   { snapIndex: 2, snapValueY: 405 },
+     *   ------------- Y = 60 ------------
+     *   { snapIndex: 3, snapValueY: 50 }, <-- next up
+     *   { snapIndex: 4, snapValueY: 0 },
+     * ]
+     */
+    return snapPoints.find((s) => s.snapValueY < y);
+  }
+}
+export function handleHighVelocityDrag({
+  dragDirection,
+  snapPoints,
+}: {
+  dragDirection: 'up' | 'down';
+  snapPoints: SheetSnapPoint[];
+}) {
+  // Go to either the last or the first snap point depending on the direction
+  const bottomSnapPoint = snapPoints[0];
+  const topSnapPoint = snapPoints[snapPoints.length - 1];
+
+  if (dragDirection === 'down') {
+    return {
+      yTo: bottomSnapPoint.snapValueY,
+      snapIndex: bottomSnapPoint.snapIndex,
+    };
+  }
+  return {
+    yTo: topSnapPoint.snapValueY,
+    snapIndex: topSnapPoint.snapIndex,
+  };
+}
+
+export function handleLowVelocityDrag({
+  currentSnapPoint,
+  currentY,
+  dragDirection,
+  snapPoints,
+  velocity,
+}: {
+  currentSnapPoint: SheetSnapPoint;
+  currentY: number;
+  dragDirection: 'up' | 'down';
+  snapPoints: SheetSnapPoint[];
+  velocity: number;
+}) {
+  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
+    snapPoints,
+    currentY,
+  });
+
+  /**
+   * If velocity is very low the user has stopped the sheet to a specific
+   * position and we should snap to the closest snap point as there is no
+   * "momentum" that would push the sheet further to the given direction
+   */
+  if (Math.abs(velocity) < 20) {
+    return {
+      yTo: closestSnapRelativeToCurrentY.snapValueY,
+      snapIndex: closestSnapRelativeToCurrentY.snapIndex,
+    };
+  }
+
+  /**
+   * If the dragging has a bit more velocity, we instead want to go to
+   * the next snap point in the given direction if it exists
+   */
+  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
+    y: currentY,
+    snapPoints,
+    dragDirection,
+  });
+
+  if (nextSnapInDirectionRelativeToCurrentY) {
+    return {
+      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
+      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex,
+    };
+  }
+
+  // No snap point down, stay at current
+  return {
+    yTo: currentSnapPoint.snapValueY,
+    snapIndex: currentSnapPoint.snapIndex,
+  };
+}

package/src/styles.ts

@@ -1,7 +1,7 @@
 import { type Properties } from 'csstype';
 
-export const styles: Record<string, Properties> = {
-  wrapper: {
+export const styles = {
+  root: {
     position: 'fixed',
     top: 0,
     bottom: 0,
@@ -66,4 +66,4 @@ export const styles: Record<string, Properties> = {
     overflowY: 'auto',
     overscrollBehaviorY: 'none',
   },
-};
+} satisfies Record<string, Properties>;

package/src/types.tsx

@@ -1,61 +1,58 @@
 import {
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
-  type HTMLAttributes,
-  type MutableRefObject,
   type ReactNode,
   type RefAttributes,
   type RefObject,
 } from 'react';
 
 import {
-  type DragHandlers,
-  type MotionValue,
-  type MotionProps,
-  type motion,
+  type DragHandler,
   type EasingDefinition,
+  type MotionProps,
+  type MotionValue,
   type Transition,
+  type motion,
 } from 'motion/react';
+import type { RectReadOnly } from 'react-use-measure';
 
-export interface SheetEvents {
-  onOpenStart?: () => void;
-  onOpenEnd?: () => void;
-  onCloseStart?: () => void;
-  onCloseEnd?: () => void;
-  onSnap?: (index: number) => void;
-}
-
-export type SheetDetent = 'full-height' | 'content-height';
+export type SheetDetent = 'default' | 'full' | 'content';
 
 type CommonProps = MotionProps & {
   className?: string;
 };
 
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+
 export interface SheetTweenConfig {
   ease: EasingDefinition;
   duration: number;
 }
 
 export type SheetProps = {
-  isOpen: boolean;
+  avoidKeyboard?: boolean;
   children: ReactNode;
-  onClose: () => void;
-  /** @deprecated Use `modalEffectRootId` instead! */
-  rootId?: string;
-  modalEffectRootId?: string;
-  mountPoint?: Element;
-  snapPoints?: number[];
   detent?: SheetDetent;
-  initialSnap?: number; // index of snap points array
-  tweenConfig?: SheetTweenConfig;
+  disableDismiss?: boolean;
   disableDrag?: boolean;
   disableScrollLocking?: boolean;
-  prefersReducedMotion?: boolean;
-  dragVelocityThreshold?: number;
   dragCloseThreshold?: number;
+  dragVelocityThreshold?: number;
+  initialSnap?: number; // index of snap points array
+  isOpen: boolean;
+  modalEffectRootId?: string;
   modalEffectThreshold?: number;
-} & SheetEvents &
-  ComponentPropsWithoutRef<typeof motion.div>;
+  mountPoint?: Element;
+  prefersReducedMotion?: boolean;
+  snapPoints?: number[];
+  tweenConfig?: SheetTweenConfig;
+  onClose: () => void;
+  onCloseEnd?: () => void;
+  onCloseStart?: () => void;
+  onOpenEnd?: () => void;
+  onOpenStart?: () => void;
+  onSnap?: (index: number) => void;
+} & MotionDivProps;
 
 export type SheetContainerProps = Omit<
   CommonProps,
@@ -64,16 +61,7 @@ export type SheetContainerProps = Omit<
   children: ReactNode;
 };
 
-export type SheetDraggableProps = Omit<
-  CommonProps,
-  | 'drag'
-  | 'dragElastic'
-  | 'dragConstraints'
-  | 'dragMomentum'
-  | 'onDrag'
-  | 'onDragStart'
-  | 'onDragEnd'
-> & {
+export type SheetDraggableProps = MotionDivProps & {
   children?: ReactNode;
   disableDrag?: boolean;
 };
@@ -83,34 +71,43 @@ export type SheetBackdropProps = Omit<
   'initial' | 'animate' | 'exit'
 >;
 
-export type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
-  draggableAt?: 'top' | 'bottom' | 'both';
-  disableScroll?: boolean;
-};
-
 export interface SheetDragProps {
   drag: 'y';
   dragElastic: number;
   dragMomentum: boolean;
   dragPropagation: boolean;
-  onDrag: DragHandlers['onDrag'];
-  onDragStart: DragHandlers['onDragStart'];
-  onDragEnd: DragHandlers['onDragEnd'];
+  onDrag: DragHandler;
+  onDragStart: DragHandler;
+  onDragEnd: DragHandler;
 }
 
+export type SheetStateInfo = {
+  scrollPosition?: 'top' | 'bottom' | 'middle';
+  currentSnap?: number;
+};
+
+export type SheetContentScrollableProps = MotionDivProps & {
+  disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
+  disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
+  scrollRef?: RefObject<HTMLDivElement | null>;
+};
+
+export type SheetSnapPoint = {
+  snapIndex: number;
+  snapValue: number; // Absolute value from the bottom of the sheet
+  snapValueY: number; // Y value is inverted as `y = 0` means sheet is at the top
+};
+
 export interface SheetContextType {
-  y: MotionValue<any>;
-  sheetRef: RefObject<any>;
-  isOpen: boolean;
+  currentSnap?: number;
   detent: SheetDetent;
-  initialSnap: SheetProps['initialSnap'];
-  indicatorRotation: MotionValue<number>;
-  callbacks: RefObject<SheetEvents>;
-  dragProps?: SheetDragProps;
-  windowHeight: number;
-  animationOptions: Transition;
-  reduceMotion: boolean;
   disableDrag: boolean;
+  dragProps?: SheetDragProps;
+  indicatorRotation: MotionValue<number>;
+  avoidKeyboard: boolean;
+  sheetBoundsRef: (node: HTMLDivElement | null) => void;
+  sheetRef: RefObject<any>;
+  y: MotionValue<any>;
 }
 
 export interface SheetScrollerContextType {
@@ -135,16 +132,15 @@ type SheetComponent = ForwardRefExoticComponent<
   SheetProps & RefAttributes<any>
 >;
 
-type ScrollerComponent = ForwardRefExoticComponent<
-  SheetScrollerProps & RefAttributes<any>
+type ContentScrollableComponent = ForwardRefExoticComponent<
+  SheetContentScrollableProps & RefAttributes<any>
 >;
 
 interface SheetCompoundComponent {
   Container: ContainerComponent;
   Header: DraggableComponent;
-  Content: DraggableComponent;
+  Content: ContentScrollableComponent;
   Backdrop: BackdropComponent;
-  Scroller: ScrollerComponent;
 }
 
 export type SheetCompound = SheetComponent & SheetCompoundComponent;

package/src/utils.ts

@@ -1,161 +1,13 @@
 import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
 import { IS_SSR } from './constants';
-import type { SheetDetent } from './types';
 
-/**
- * Get the rounded height of the sheet element and log a warning if the
- * element is not mounted yet but the height is requested.
- */
-export function getSheetHeight(sheetRef: RefObject<HTMLDivElement | null>) {
-  const sheetEl = sheetRef.current;
-
-  if (!sheetEl) {
-    console.warn(
-      'Sheet height is not available because the sheet element is not mounted yet.'
-    );
-    return 0;
-  }
-
-  return Math.round(sheetEl.getBoundingClientRect().height);
-}
-
-/**
- * Convert negative / percentage snap points to absolute values
- */
-export function getSnapPoints({
-  snapPointsProp,
-  sheetHeight,
-}: {
-  snapPointsProp: number[];
-  sheetHeight: number;
-}) {
-  const snapPointValues = snapPointsProp.map((point) => {
-    // Percentage values e.g. between 0.0 and 1.0
-    if (point > 0 && point <= 1) {
-      return Math.round(point * sheetHeight);
-    }
-
-    return point < 0 ? sheetHeight + point : point; // negative values
-  });
-
-  console.assert(
-    inDescendingOrder(snapPointValues) || sheetHeight === 0,
-    `Snap points need to be in descending order got: [${snapPointsProp.join(', ')}]`
-  );
-
-  return snapPointValues;
-}
-
-export function getClosestSnapPoint({
-  snapPoints,
-  currentY,
-  sheetHeight,
-  detent,
-}: {
-  snapPoints: number[];
-  currentY: number;
-  sheetHeight: number;
-  detent?: SheetDetent;
-}) {
-  // Inverse values are the values that can be passed to `animate`
-  const snapInverse = snapPoints.map(
-    (p) => sheetHeight - Math.min(p, sheetHeight)
-  );
-
-  // Allow snapping to the top of the sheet if detent is set to `content-height`
-  if (detent === 'content-height' && !snapInverse.includes(0)) {
-    snapInverse.unshift(0);
-  }
-
-  // Get the closest snap point
-  const snapTo = getClosest(snapInverse, currentY);
-  const snapIndex = snapInverse.indexOf(snapTo);
-
-  const snapY = validateSnapTo({
-    snapTo: getClosest(snapInverse, currentY),
-    sheetHeight,
-  });
-
-  return { snapY, snapIndex };
-}
-
-/**
- * Get the closest number to the goal from the array of numbers.
- */
-export function getClosest(nums: number[], goal: number) {
-  let closest = nums[0];
-  let minDifference = Math.abs(nums[0] - goal);
-
-  for (let i = 1; i < nums.length; i++) {
-    const difference = Math.abs(nums[i] - goal);
-    if (difference < minDifference) {
-      closest = nums[i];
-      minDifference = difference;
-    }
-  }
-
-  return closest;
-}
-
-/**
- * Check if the array is in descending order.
- * This is used to validate the snap points.
- */
-export function inDescendingOrder(arr: number[]) {
+export function isAscendingOrder(arr: number[]) {
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i]) return false;
+    if (arr[i + 1] < arr[i]) return false;
   }
-
   return true;
 }
 
-/**
- * Get the Y value of the given snap point. This can be passed to the `animate`
- * function to animate the sheet to the given snap point.
- */
-export function getSnapY({
-  sheetHeight,
-  snapPoints,
-  snapIndex,
-}: {
-  sheetHeight: number;
-  snapPoints: number[];
-  snapIndex: number;
-}) {
-  const snapPoint = snapPoints[snapIndex];
-
-  if (snapPoint === undefined) {
-    console.warn(
-      `Invalid snap index ${snapIndex}. Snap points are: [${snapPoints.join(', ')}]`
-    );
-    return null;
-  }
-
-  const y = validateSnapTo({ snapTo: sheetHeight - snapPoint, sheetHeight });
-
-  return y;
-}
-
-/**
- * Make sure the snap point is not out of bounds.
- * Snap points cannot be negative - `0` means the sheet is fully open.
- */
-export function validateSnapTo({
-  snapTo,
-  sheetHeight,
-}: {
-  snapTo: number;
-  sheetHeight: number;
-}) {
-  if (snapTo < 0) {
-    console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
-    );
-  }
-
-  return Math.max(Math.round(snapTo), 0);
-}
-
 export function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T> {
   return (value: any) => {
     refs.forEach((ref: any) => {

package/src/SheetScroller.tsx

@@ -1,84 +0,0 @@
-import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';
-
-import { useSheetScrollerContext } from './context';
-import { type SheetScrollerProps } from './types';
-import { isTouchDevice } from './utils';
-import { styles } from './styles';
-
-export const SheetScroller = forwardRef<any, SheetScrollerProps>(
-  (
-    {
-      disableScroll = false,
-      draggableAt = 'top',
-      children,
-      style,
-      className = '',
-      ...rest
-    },
-    ref
-  ) => {
-    const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
-
-    function determineDragState(element: HTMLDivElement) {
-      /**
-       * If the caller is managing the scrollability of the element,
-       * enable the dragging of the sheet content.
-       */
-      if (disableScroll) {
-        setDragEnabled();
-        return;
-      }
-
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      const isScrollable = scrollHeight > clientHeight;
-
-      if (!isScrollable) return;
-
-      const isAtTop = scrollTop <= 0;
-      const isAtBottom = scrollHeight - scrollTop === clientHeight;
-
-      const shouldEnable =
-        (draggableAt === 'top' && isAtTop) ||
-        (draggableAt === 'bottom' && isAtBottom) ||
-        (draggableAt === 'both' && (isAtTop || isAtBottom));
-
-      if (shouldEnable) {
-        setDragEnabled();
-      } else {
-        setDragDisabled();
-      }
-    }
-
-    function onScroll(event: UIEvent<HTMLDivElement>) {
-      determineDragState(event.currentTarget);
-      if (rest.onScroll) rest.onScroll(event);
-    }
-
-    function onTouchStart(event: TouchEvent<HTMLDivElement>) {
-      determineDragState(event.currentTarget);
-      if (rest.onTouchStart) rest.onTouchStart(event);
-    }
-
-    const scrollProps = isTouchDevice()
-      ? { onScroll, onTouchStart }
-      : undefined;
-
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={`react-modal-sheet-scroller ${className}`}
-        style={{
-          ...styles.scroller,
-          ...style,
-          overflowY: disableScroll ? 'hidden' : 'auto',
-        }}
-        {...scrollProps}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-SheetScroller.displayName = 'SheetScroller';