@simoneggert/react-modal-sheet 5.4.3

package/src/sheet.tsx

@@ -0,0 +1,414 @@
+import {
+  animate,
+  type DragHandler,
+  motion,
+  type Transition,
+  useMotionValue,
+  useReducedMotion,
+  useTransform,
+} from 'motion/react';
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import useMeasure from 'react-use-measure';
+
+import {
+  DEFAULT_DRAG_CLOSE_THRESHOLD,
+  DEFAULT_DRAG_VELOCITY_THRESHOLD,
+  DEFAULT_TWEEN_CONFIG,
+  IS_SSR,
+  REDUCED_MOTION_TWEEN_CONFIG,
+} from './constants';
+import { SheetContext } from './context';
+import { useDimensions } from './hooks/use-dimensions';
+import { useKeyboardAvoidance } from './hooks/use-keyboard-avoidance';
+import { useModalEffect } from './hooks/use-modal-effect';
+import { usePreventScroll } from './hooks/use-prevent-scroll';
+import { useSheetState } from './hooks/use-sheet-state';
+import { useStableCallback } from './hooks/use-stable-callback';
+import {
+  computeSnapPoints,
+  handleHighVelocityDrag,
+  handleLowVelocityDrag,
+} from './snap';
+import { styles } from './styles';
+import { type SheetContextType, type SheetProps } from './types';
+import { applyStyles, waitForElement, willOpenKeyboard } from './utils';
+
+export const Sheet = forwardRef<any, SheetProps>(
+  (
+    {
+      avoidKeyboard = true,
+      children,
+      className = '',
+      detent = 'default',
+      disableDismiss = false,
+      disableDrag: disableDragProp = false,
+      disableScrollLocking = false,
+      dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+      dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
+      initialSnap,
+      isOpen,
+      modalEffectRootId,
+      modalEffectThreshold,
+      mountPoint,
+      prefersReducedMotion = false,
+      snapPoints: snapPointsProp,
+      style,
+      tweenConfig = DEFAULT_TWEEN_CONFIG,
+      unstyled = false,
+      onOpenStart,
+      onOpenEnd,
+      onClose,
+      onCloseStart,
+      onCloseEnd,
+      onSnap,
+      onDrag: onDragProp,
+      onDragStart: onDragStartProp,
+      onDragEnd: onDragEndProp,
+      ...rest
+    },
+    ref
+  ) => {
+    const [sheetBoundsRef, sheetBounds] = useMeasure();
+    const sheetRef = useRef<HTMLDivElement>(null);
+    const sheetHeight = Math.round(sheetBounds.height);
+    const [currentSnap, setCurrentSnap] = useState(initialSnap);
+    const snapPoints =
+      snapPointsProp && sheetHeight > 0
+        ? computeSnapPoints({ sheetHeight, snapPointsProp })
+        : [];
+
+    const { windowHeight } = useDimensions();
+    const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
+    const y = useMotionValue(closedY);
+    const yInverted = useTransform(y, (val) => Math.max(sheetHeight - val, 0));
+    const indicatorRotation = useMotionValue(0);
+
+    const shouldReduceMotion = useReducedMotion();
+    const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
+    const animationOptions: Transition = {
+      type: 'tween',
+      ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),
+    };
+
+    // +2 for tolerance in case the animated value is slightly off
+    const zIndex = useTransform(y, (val) =>
+      val + 2 >= closedY ? -1 : (style?.zIndex ?? 9999)
+    );
+    const visibility = useTransform(y, (val) =>
+      val + 2 >= closedY ? 'hidden' : 'visible'
+    );
+
+    const updateSnap = useStableCallback((snapIndex: number) => {
+      setCurrentSnap(snapIndex);
+      onSnap?.(snapIndex);
+    });
+
+    const getSnapPoint = useStableCallback((snapIndex: number) => {
+      if (snapPointsProp && snapPoints) {
+        if (snapIndex < 0 || snapIndex >= snapPoints.length) {
+          console.warn(
+            `Invalid snap index ${snapIndex}. Snap points are: [${snapPointsProp.join(', ')}] and their computed values are: [${snapPoints
+              .map((point) => point.snapValue)
+              .join(', ')}]`
+          );
+          return null;
+        }
+        return snapPoints[snapIndex];
+      }
+      return null;
+    });
+
+    const snapTo = useStableCallback(async (snapIndex: number) => {
+      if (!snapPointsProp) {
+        console.warn('Snapping is not possible without `snapPoints` prop.');
+        return;
+      }
+
+      const snapPoint = getSnapPoint(snapIndex);
+
+      if (snapPoint === null) {
+        console.warn(`Invalid snap index ${snapIndex}.`);
+        return;
+      }
+
+      if (snapIndex === 0) {
+        onClose();
+        return;
+      }
+
+      await animate(y, snapPoint.snapValueY, {
+        ...animationOptions,
+        onComplete: () => updateSnap(snapIndex),
+      });
+    });
+
+    const keyboard = useKeyboardAvoidance({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef,
+      onWillOpenKeyboard: async () => {
+        const lastSnapPoint = snapPoints[snapPoints.length - 1];
+
+        /**
+         * If there are snap points and the sheet is not already at the last snap point,
+         * move it there to make sure the focused input is not covered by the keyboard
+         */
+        if (lastSnapPoint && lastSnapPoint.snapIndex !== currentSnap) {
+          await animate(y, lastSnapPoint.snapValueY, animationOptions);
+          updateSnap(lastSnapPoint.snapIndex);
+        }
+      },
+      onDidOpenKeyboard: (focusedElement) => {
+        const sheetElement = sheetRef.current;
+        if (!sheetElement) return;
+
+        const inputRect = focusedElement.getBoundingClientRect();
+        const containerRect = sheetElement.getBoundingClientRect();
+        const scroller = sheetElement.querySelector(
+          '.react-modal-sheet-content-scroller'
+        ) as HTMLElement;
+
+        const scrollTarget = Math.max(
+          inputRect.top -
+            containerRect.top +
+            scroller.scrollTop -
+            inputRect.height,
+          0
+        );
+
+        requestAnimationFrame(() => {
+          scroller.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+        });
+      },
+    });
+
+    // Disable drag if the keyboard is open to avoid weird behavior
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
+
+    const blurActiveInput = useStableCallback(() => {
+      /**
+       * Find focused input inside the sheet and blur it when dragging starts
+       * to prevent a weird ghost caret "bug" on mobile
+       */
+      const focusedElement = document.activeElement as HTMLElement | null;
+
+      // Only blur the focused element if it's inside the sheet
+      if (
+        focusedElement &&
+        willOpenKeyboard(focusedElement) &&
+        sheetRef.current?.contains(focusedElement)
+      ) {
+        focusedElement.blur();
+      }
+    });
+
+    const onDragStart = useStableCallback<DragHandler>((event, info) => {
+      blurActiveInput();
+      onDragStartProp?.(event, info);
+    });
+
+    const onDrag = useStableCallback<DragHandler>((event, info) => {
+      onDragProp?.(event, info);
+
+      const currentY = y.get();
+
+      // 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 onDragEnd = useStableCallback<DragHandler>((event, info) => {
+      blurActiveInput();
+      onDragEndProp?.(event, info);
+
+      const currentY = y.get();
+
+      let yTo = 0;
+
+      const currentSnapPoint =
+        currentSnap !== undefined ? getSnapPoint(currentSnap) : null;
+
+      if (currentSnapPoint) {
+        const dragOffsetDirection = info.offset.y > 0 ? 'down' : 'up';
+        const dragVelocityDirection = info.velocity.y > 0 ? 'down' : 'up';
+        const isHighVelocity =
+          Math.abs(info.velocity.y) > dragVelocityThreshold;
+
+        let result: { yTo: number; snapIndex: number | undefined };
+
+        if (isHighVelocity) {
+          result = handleHighVelocityDrag({
+            snapPoints,
+            dragDirection: dragVelocityDirection,
+          });
+        } else {
+          result = handleLowVelocityDrag({
+            currentSnapPoint,
+            currentY,
+            dragDirection: dragOffsetDirection,
+            snapPoints,
+            velocity: info.velocity.y,
+          });
+        }
+
+        yTo = result.yTo;
+
+        // If disableDismiss is true, prevent closing via gesture
+        if (disableDismiss && yTo + 1 >= sheetHeight) {
+          // Use the bottom-most open snap point
+          const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
+
+          if (bottomSnapPoint) {
+            yTo = bottomSnapPoint.snapValueY;
+            updateSnap(bottomSnapPoint.snapIndex);
+          } else {
+            // If no open snap points available, stay at current position
+            yTo = currentY;
+          }
+        } else if (result.snapIndex !== undefined) {
+          updateSnap(result.snapIndex);
+        }
+      } else if (
+        info.velocity.y > dragVelocityThreshold ||
+        currentY > sheetHeight * dragCloseThreshold
+      ) {
+        // Close the sheet if dragged past the threshold or if the velocity is high enough
+        // But only if disableDismiss is false
+        if (disableDismiss) {
+          // If disableDismiss, snap back to the open position
+          yTo = 0;
+        } else {
+          yTo = closedY;
+        }
+      }
+
+      // Update the spring value so that the sheet is animated to the snap point
+      animate(y, yTo, animationOptions);
+
+      // +1px for imprecision tolerance
+      // Only call onClose if disableDismiss is false or if we're actually closing
+      if (yTo + 1 >= sheetHeight && !disableDismiss) {
+        onClose();
+      }
+
+      // Reset indicator rotation after dragging
+      indicatorRotation.set(0);
+    });
+
+    useImperativeHandle(ref, () => ({
+      y,
+      yInverted,
+      height: sheetHeight,
+      snapTo,
+    }));
+
+    useModalEffect({
+      y,
+      detent,
+      sheetHeight,
+      snapPoints,
+      rootId: modalEffectRootId,
+      startThreshold: modalEffectThreshold,
+    });
+
+    /**
+     * Motion should handle body scroll locking but it's not working properly on iOS.
+     * Scroll locking from React Aria seems to work much better 🤷‍♂️
+     */
+    usePreventScroll({
+      isDisabled: disableScrollLocking || !isOpen,
+    });
+
+    const state = useSheetState({
+      isOpen,
+      onOpen: async () => {
+        onOpenStart?.();
+
+        /**
+         * This is not very React-y but we need to wait for the sheet
+         * but we need to wait for the sheet to be rendered and visible
+         * before we can measure it and animate it to the initial snap point.
+         */
+        await waitForElement('react-modal-sheet-container');
+
+        const initialSnapPoint =
+          initialSnap !== undefined ? getSnapPoint(initialSnap) : null;
+
+        const yTo = initialSnapPoint?.snapValueY ?? 0;
+
+        await animate(y, yTo, animationOptions);
+
+        if (initialSnap !== undefined) {
+          updateSnap(initialSnap);
+        }
+
+        onOpenEnd?.();
+      },
+      onClosing: async () => {
+        onCloseStart?.();
+
+        await animate(y, closedY, animationOptions);
+
+        onCloseEnd?.();
+      },
+    });
+
+    const dragProps: SheetContextType['dragProps'] = {
+      drag: 'y',
+      dragElastic: 0,
+      dragMomentum: false,
+      dragPropagation: false,
+      onDrag,
+      onDragStart,
+      onDragEnd,
+    };
+
+    const context: SheetContextType = {
+      currentSnap,
+      detent,
+      disableDrag,
+      dragProps,
+      indicatorRotation,
+      avoidKeyboard,
+      prefersReducedMotion,
+      sheetBoundsRef,
+      sheetRef,
+      unstyled,
+      y,
+    };
+
+    const sheet = (
+      <SheetContext.Provider value={context}>
+        <motion.div
+          {...rest}
+          ref={ref}
+          data-sheet-state={state}
+          className={`react-modal-sheet-root ${className}`}
+          style={{
+            ...applyStyles(styles.root, unstyled),
+            zIndex,
+            visibility,
+            ...style,
+          }}
+        >
+          {state !== 'closed' ? children : null}
+        </motion.div>
+      </SheetContext.Provider>
+    );
+
+    if (IS_SSR) return sheet;
+
+    return createPortal(sheet, mountPoint ?? document.body);
+  }
+);
+
+Sheet.displayName = 'Sheet';

package/src/snap.ts

@@ -0,0 +1,242 @@
+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 (snapPointsProp[0] !== 0) {
+    console.error(
+      'First snap point should be 0 to ensure the sheet can be fully closed. ' +
+        `Got: [${snapPointsProp.join(', ')}]`
+    );
+    snapPointsProp.unshift(0);
+  }
+
+  if (snapPointsProp[snapPointsProp.length - 1] !== 1) {
+    console.error(
+      'Last snap point should be 1 to ensure the sheet can be fully opened. ' +
+        `Got: [${snapPointsProp.join(', ')}]`
+    );
+    snapPointsProp.push(1);
+  }
+
+  if (sheetHeight <= 0) {
+    console.error(
+      `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,
+  };
+}