react-modal-sheet 4.0.2 → 4.1.0

package/src/hooks/use-modal-effect.ts

@@ -0,0 +1,165 @@
+import { transform, type MotionValue } from 'motion';
+import { type RefObject } from 'react';
+
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+import { useSafeAreaInsets } from './use-safe-area-insets';
+import { getSheetHeight, getSnapPoints } from '../utils';
+
+export function useModalEffect({
+  y,
+  rootId,
+  sheetRef,
+  snapPointsProp,
+  startThreshold,
+}: {
+  y: MotionValue<number>;
+  rootId?: string;
+  sheetRef: RefObject<HTMLDivElement | null>;
+  snapPointsProp?: number[];
+  startThreshold?: number;
+}) {
+  const insetTop = useSafeAreaInsets().top;
+
+  // Cleanup on unmount
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (rootId) cleanupModalEffect(rootId);
+    };
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!rootId) return;
+
+    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+    if (!root) return;
+
+    let sheetHeight = 0;
+
+    const removeStartListener = y.on('animationStart', () => {
+      /**
+       * Only calculate the sheet height when the animation starts to avoid
+       * unnecessary layout calculations when y value changes.
+       */
+      sheetHeight = getSheetHeight(sheetRef);
+
+      // biome-ignore lint/style/noNonNullAssertion: root is always defined here
+      setupModalEffect(rootId!);
+    });
+
+    /**
+     * NOTE: The `y` value gets smaller when the sheet is opened and larger
+     * when the sheet is being closed.
+     */
+    const removeChangeListener = y.on('change', (yValue) => {
+      if (!root) return;
+
+      let progress = Math.max(0, 1 - yValue / sheetHeight);
+
+      const snapPoints = snapPointsProp
+        ? getSnapPoints({ snapPointsProp, sheetHeight })
+        : undefined;
+
+      /**
+       * Start the effect only if we have dragged over the second snap point
+       * to make the effect more natural as the sheet will reach it's final
+       * position when the user drags it over the second snap point.
+       */
+      const snapThresholdPoint =
+        snapPoints && snapPoints.length > 1 ? snapPoints[1] : undefined;
+
+      /**
+       * If we have snap points, we need to calculate the progress percentage
+       * based on the snap point threshold. Note that the maximum value is also
+       * different in this case as the range between the start of the effect
+       * and its end is different.
+       */
+      if (snapThresholdPoint !== undefined) {
+        const snapThresholdValue =
+          sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
+
+        if (yValue <= snapThresholdValue) {
+          progress = (snapThresholdValue - yValue) / snapThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+
+      /**
+       * If we have a start threshold, we need to calculate the progress
+       * percentage based on the start threshold (0 to 1). For example,
+       * if the start threshold is 0.5, the progress will be 0 until the sheet
+       * is dragged over 50% of the complete drag distance.
+       */
+      if (startThreshold !== undefined) {
+        const startThresholdValue =
+          sheetHeight -
+          Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
+
+        if (yValue <= startThresholdValue) {
+          progress = (startThresholdValue - yValue) / startThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+
+      // Make sure progress is between 0 and 1
+      progress = Math.max(0, Math.min(1, progress));
+
+      const pageWidth = window.innerWidth;
+      const ty = transform(progress, [0, 1], [0, 24 + insetTop]);
+      const s = transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
+      const borderRadius = transform(progress, [0, 1], [0, 10]);
+
+      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
+      root.style.borderTopRightRadius = `${borderRadius}px`;
+      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    });
+
+    function onCompleted() {
+      // -5 just to take into account some inprecision to ensure the cleanup is done
+      if (y.get() - 5 >= sheetHeight) {
+        // biome-ignore lint/style/noNonNullAssertion: root is always defined here
+        cleanupModalEffect(rootId!);
+      }
+    }
+
+    const removeCompleteListener = y.on('animationComplete', onCompleted);
+    const removeCancelListener = y.on('animationCancel', onCompleted);
+
+    return () => {
+      removeStartListener();
+      removeChangeListener();
+      removeCompleteListener();
+      removeCancelListener();
+    };
+  }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
+}
+
+function setupModalEffect(rootId: string) {
+  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+  const body = document.querySelector('body') as HTMLBodyElement;
+  if (!root) return;
+
+  body.style.backgroundColor = '#000';
+  root.style.overflow = 'hidden';
+  root.style.transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
+  root.style.transitionProperty = 'transform, border-radius';
+  root.style.transitionDuration = '0.5s';
+  root.style.transformOrigin = 'center top';
+}
+
+function cleanupModalEffect(rootId: string) {
+  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+  const body = document.querySelector('body') as HTMLBodyElement;
+  if (!root) return;
+
+  body.style.removeProperty('background-color');
+  root.style.removeProperty('overflow');
+  root.style.removeProperty('transition-timing-function');
+  root.style.removeProperty('transition-property');
+  root.style.removeProperty('transition-duration');
+  root.style.removeProperty('transform-origin');
+  root.style.removeProperty('transform');
+  root.style.removeProperty('border-top-right-radius');
+  root.style.removeProperty('border-top-left-radius');
+}

package/src/{use-prevent-scroll.ts → hooks/use-prevent-scroll.ts}

@@ -1,7 +1,7 @@
 // This code originates from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 
-import { useIsomorphicLayoutEffect } from './hooks';
-import { isIOS } from './utils';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+import { isIOS } from '../utils';
 
 const KEYBOARD_BUFFER = 24;
 

package/src/hooks/use-safe-area-insets.ts

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { IS_SSR } from '../constants';
+
+export function useSafeAreaInsets() {
+  const [insets] = useState(() => {
+    const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
+
+    if (IS_SSR) return fallback;
+
+    const root = document.querySelector<HTMLElement>(':root');
+
+    if (!root) return fallback;
+
+    root.style.setProperty('--rms-sat', 'env(safe-area-inset-top)');
+    root.style.setProperty('--rms-sal', 'env(safe-area-inset-left)');
+    root.style.setProperty('--rms-sar', 'env(safe-area-inset-right)');
+    root.style.setProperty('--rms-sab', 'env(safe-area-inset-bottom)');
+
+    const computedStyle = getComputedStyle(root);
+    const sat = getComputedValue(computedStyle, '--rms-sat');
+    const sal = getComputedValue(computedStyle, '--rms-sal');
+    const sar = getComputedValue(computedStyle, '--rms-sar');
+    const sab = getComputedValue(computedStyle, '--rms-sab');
+
+    root.style.removeProperty('--rms-sat');
+    root.style.removeProperty('--rms-sal');
+    root.style.removeProperty('--rms-sar');
+    root.style.removeProperty('--rms-sab');
+
+    return { top: sat, left: sal, right: sar, bottom: sab };
+  });
+
+  return insets;
+}
+
+function getComputedValue(computed: CSSStyleDeclaration, property: string) {
+  const strValue = computed.getPropertyValue(property).replace('px', '').trim();
+  return parseInt(strValue, 10) || 0;
+}

package/src/hooks/use-stable-callback.ts

@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react';
+
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+
+export function useStableCallback<T extends (...args: any[]) => any>(
+  handler: T
+) {
+  const handlerRef = useRef<T>(undefined);
+
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  return useCallback((...args: any[]) => {
+    const fn = handlerRef.current;
+    return fn?.(...args);
+  }, []) as T;
+}

package/src/sheet.tsx

@@ -1,3 +1,5 @@
+import { createPortal } from 'react-dom';
+
 import React, {
   Children,
   cloneElement,
@@ -8,8 +10,6 @@ import React, {
   useRef,
 } from 'react';
 
-import { createPortal } from 'react-dom';
-
 import {
   animate,
   AnimatePresence,
@@ -21,13 +21,6 @@ import {
   useTransform,
 } from 'motion/react';
 
-import {
-  useModalEffect,
-  useDimensions,
-  useIsomorphicLayoutEffect,
-  useEffectEvent,
-} from './hooks';
-
 import {
   REDUCED_MOTION_TWEEN_CONFIG,
   DEFAULT_TWEEN_CONFIG,
@@ -36,11 +29,22 @@ import {
   IS_SSR,
 } from './constants';
 
+import {
+  getClosest,
+  getSheetHeight,
+  getSnapY,
+  getSnapPoints,
+  validateSnapTo,
+} from './utils';
+
 import { type SheetContextType, type SheetProps } from './types';
 import { SheetScrollerContextProvider, SheetContext } from './context';
-import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
-import { usePreventScroll } from './use-prevent-scroll';
 import { styles } from './styles';
+import { useModalEffect } from './hooks/use-modal-effect';
+import { useDimensions } from './hooks/use-dimensions';
+import { useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';
+import { useStableCallback } from './hooks/use-stable-callback';
+import { usePreventScroll } from './hooks/use-prevent-scroll';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -56,6 +60,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       isOpen,
       snapPoints: snapPointsProp,
       rootId,
+      modalEffectRootId,
       mountPoint,
       style,
       detent = 'full-height',
@@ -65,6 +70,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       tweenConfig = DEFAULT_TWEEN_CONFIG,
       dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
       dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+      modalEffectThreshold,
       ...rest
     },
     ref
@@ -110,25 +116,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       };
     });
 
-    let snapPoints: number[] | undefined = snapPointsProp;
-
-    if (snapPoints) {
-      // Convert negative / percentage snap points to absolute values
-      snapPoints = snapPoints.map((point) => {
-        // Percentage values e.g. between 0.0 and 1.0
-        if (point > 0 && point <= 1) return Math.round(point * windowHeight);
-        return point < 0 ? windowHeight + point : point; // negative values
-      });
-
-      console.assert(
-        inDescendingOrder(snapPoints) || windowHeight === 0,
-        `Snap points need to be in descending order got: [${snapPoints.join(
-          ', '
-        )}]`
-      );
-    }
-
-    const onDrag = useEffectEvent((_, { delta }: PanInfo) => {
+    const onDrag = useStableCallback((_, { delta }: PanInfo) => {
       // Update drag indicator rotation based on drag velocity
       const velocity = y.getVelocity();
 
@@ -139,7 +127,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       y.set(Math.max(y.get() + delta.y, 0));
     });
 
-    const onDragStart = useEffectEvent(() => {
+    const onDragStart = 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;
@@ -155,51 +143,54 @@ export const Sheet = forwardRef<any, SheetProps>(
       }
     });
 
-    const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {
+    const onDragEnd = useStableCallback((_, { velocity }: PanInfo) => {
       if (velocity.y > dragVelocityThreshold) {
         // User flicked the sheet down
         onClose();
       } else {
-        // biome-ignore lint/style/noNonNullAssertion: ref should be defined here
-        const sheetHeight = sheetRef.current!.getBoundingClientRect().height;
+        const sheetHeight = getSheetHeight(sheetRef);
         const currentY = y.get();
 
-        let snapTo = 0;
+        let yTo = 0;
+
+        const snapPoints = snapPointsProp
+          ? getSnapPoints({ snapPointsProp, sheetHeight })
+          : undefined;
 
         if (snapPoints) {
-          const snapToValues = snapPoints.map(
+          // 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' && !snapToValues.includes(0)) {
-            snapToValues.unshift(0);
+          if (detent === 'content-height' && !snapInverse.includes(0)) {
+            snapInverse.unshift(0);
           }
 
           // Get the closest snap point
-          snapTo = getClosest(snapToValues, currentY);
+          const snapTo = getClosest(snapInverse, currentY);
+          const snapIndex = snapInverse.indexOf(snapTo);
+
+          yTo = validateSnapTo({
+            snapTo: getClosest(snapInverse, currentY),
+            sheetHeight,
+          });
+
+          // This happens before calling `animate` but it doesn't really matter
+          onSnap?.(snapIndex);
         } else if (currentY / sheetHeight > dragCloseThreshold) {
           // Close if dragged over enough far
-          snapTo = sheetHeight;
+          yTo = sheetHeight;
         }
 
-        snapTo = validateSnapTo({ snapTo, sheetHeight });
-
         // Update the spring value so that the sheet is animated to the snap point
-        animate(y, snapTo, animationOptions);
+        animate(y, yTo, animationOptions);
 
-        if (snapPoints && onSnap) {
-          const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
-          const snapIndex = snapPoints.indexOf(
-            getClosest(snapPoints, snapValue)
-          );
-          onSnap(snapIndex);
+        // +1px for imprecision tolerance
+        if (yTo + 1 >= sheetHeight) {
+          onClose();
         }
-
-        const roundedSheetHeight = Math.round(sheetHeight);
-        const shouldClose = snapTo + 2 >= roundedSheetHeight; // 2px tolerance
-
-        if (shouldClose) onClose();
       }
 
       // Reset indicator rotation after dragging
@@ -208,40 +199,74 @@ export const Sheet = forwardRef<any, SheetProps>(
 
     // Trigger onSnap callback when sheet is opened or closed
     useEffect(() => {
-      if (!snapPoints || !onSnap) return;
-      const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
-      onSnap(snapIndex);
+      if (snapPointsProp && onSnap) {
+        onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
+      }
+    }, [isOpen]);
+
+    // Animate the sheet open
+    useEffect(() => {
+      if (!isOpen) return; // let `AnimatePresence` handle the exit animation
+
+      let yTo = 0;
+
+      if (snapPointsProp) {
+        const snapIndex = initialSnap;
+        const sheetHeight = getSheetHeight(sheetRef);
+        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
+        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
+
+        if (ySnap !== null) {
+          yTo = ySnap;
+        }
+      }
+
+      animate(y, yTo, animationOptions);
     }, [isOpen]);
 
     useImperativeHandle(ref, () => ({
       y,
       snapTo: (snapIndex: number) => {
-        const sheetEl = sheetRef.current;
+        if (!snapPointsProp) {
+          console.warn('Snapping is not possible without `snapPoints` prop.');
+          return;
+        }
 
-        if (snapPoints?.[snapIndex] !== undefined && sheetEl) {
-          const sheetHeight = sheetEl.getBoundingClientRect().height;
-          const snapPoint = snapPoints[snapIndex];
-          const snapTo = validateSnapTo({
-            snapTo: sheetHeight - snapPoint,
-            sheetHeight,
-          });
+        const sheetHeight = getSheetHeight(sheetRef);
+        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
+        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
 
-          animate(y, snapTo, animationOptions);
-          if (onSnap) onSnap(snapIndex);
-          if (snapTo >= sheetHeight) onClose();
+        if (ySnap !== null) {
+          animate(y, ySnap, animationOptions);
+          onSnap?.(snapIndex);
+
+          // +1px for imprecision tolerance
+          if (ySnap + 1 >= sheetHeight) {
+            onClose();
+          }
         }
       },
     }));
 
+    if (rootId) {
+      console.warn(
+        'The `rootId` prop is deprecated and will be removed in the next major version. Use `modalEffectRootId` instead.'
+      );
+    }
+
     useModalEffect({
       y,
-      rootId,
       sheetRef,
+      snapPointsProp,
+      rootId: rootId || modalEffectRootId,
+      startThreshold: modalEffectThreshold,
     });
 
-    // Framer Motion should handle body scroll locking but it's not working
+    // 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 });
+    usePreventScroll({
+      isDisabled: disableScrollLocking || !isOpen,
+    });
 
     const dragProps = useMemo(() => {
       const dragProps: SheetContextType['dragProps'] = {
@@ -262,7 +287,6 @@ export const Sheet = forwardRef<any, SheetProps>(
       sheetRef,
       isOpen,
       initialSnap,
-      snapPoints,
       detent,
       indicatorRotation,
       callbacks,

package/src/styles.ts

@@ -18,7 +18,7 @@ export const styles: Record<string, Properties> = {
     width: '100%',
     height: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    touchAction: 'none', // Disable iOS body scrolling
+    touchAction: 'none',
     border: 'none',
     WebkitTapHighlightColor: 'transparent',
   },

package/src/types.tsx

@@ -5,6 +5,7 @@ import {
   type MutableRefObject,
   type ReactNode,
   type RefAttributes,
+  type RefObject,
 } from 'react';
 
 import {
@@ -39,7 +40,9 @@ export type SheetProps = {
   isOpen: boolean;
   children: ReactNode;
   onClose: () => void;
+  /** @deprecated Use `modalEffectRootId` instead! */
   rootId?: string;
+  modalEffectRootId?: string;
   mountPoint?: Element;
   snapPoints?: number[];
   detent?: SheetDetent;
@@ -50,6 +53,7 @@ export type SheetProps = {
   prefersReducedMotion?: boolean;
   dragVelocityThreshold?: number;
   dragCloseThreshold?: number;
+  modalEffectThreshold?: number;
 } & SheetEvents &
   ComponentPropsWithoutRef<typeof motion.div>;
 
@@ -95,13 +99,12 @@ export interface SheetDragProps {
 
 export interface SheetContextType {
   y: MotionValue<any>;
-  sheetRef: MutableRefObject<any>;
+  sheetRef: RefObject<any>;
   isOpen: boolean;
-  snapPoints: SheetProps['snapPoints'];
   detent: SheetDetent;
   initialSnap: SheetProps['initialSnap'];
   indicatorRotation: MotionValue<number>;
-  callbacks: MutableRefObject<SheetEvents>;
+  callbacks: RefObject<SheetEvents>;
   dragProps?: SheetDragProps;
   windowHeight: number;
   animationOptions: Transition;