react-modal-sheet 5.4.1 → 5.6.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.4.1",
+  "version": "5.6.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",

package/src/constants.ts

@@ -16,4 +16,4 @@ export const REDUCED_MOTION_TWEEN_CONFIG: SheetTweenConfig = {
 
 export const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 
-export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;

package/src/context.tsx

@@ -1,12 +1,22 @@
 import { createContext, useContext } from 'react';
-import { type SheetContextType } from './types';
+import type { ExposedContextType, InternalContextType } from './types';
 
-export const SheetContext = createContext<SheetContextType | undefined>(
-  undefined
-);
+export const InternalSheetContext = createContext<
+  InternalContextType | undefined
+>(undefined);
 
-export function useSheetContext() {
-  const context = useContext(SheetContext);
+export const ExposedSheetContext = createContext<
+  ExposedContextType | undefined
+>(undefined);
+
+export function useInternalContext() {
+  const context = useContext(InternalSheetContext);
+  if (!context) throw new Error('Sheet context error');
+  return context;
+}
+
+export function useExposedContext() {
+  const context = useContext(ExposedSheetContext);
   if (!context) throw new Error('Sheet context error');
   return context;
 }

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

@@ -1,9 +1,9 @@
 import { type MotionValue, transform } from 'motion';
-import { type RefObject } from 'react';
+import { useEffect } from 'react';
 
 import type { SheetDetent, SheetSnapPoint } from '../types';
-import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 import { useSafeAreaInsets } from './use-safe-area-insets';
+import { useStableCallback } from './use-stable-callback';
 
 export function useModalEffect({
   y,
@@ -29,114 +29,105 @@ export function useModalEffect({
     rootId = undefined;
   }
 
-  // Cleanup on unmount
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (rootId) cleanupModalEffect(rootId);
-    };
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
+  const handleYChange = useStableCallback((yValue: number) => {
     if (!rootId) return;
 
-    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-    if (!root) return;
+    let progress = Math.max(0, 1 - yValue / sheetHeight);
 
-    const removeStartListener = y.on('animationStart', () => {
-      // biome-ignore lint/style/noNonNullAssertion: root is always defined here
-      setupModalEffect(rootId!);
-    });
+    /**
+     * 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.length > 1 ? snapPoints[snapPoints.length - 2] : undefined;
 
     /**
-     * NOTE: The `y` value gets smaller when the sheet is opened and larger
-     * when the sheet is being closed.
+     * 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.
      */
-    const removeChangeListener = y.on('change', (yValue) => {
-      if (!root) return;
-
-      let progress = Math.max(0, 1 - yValue / sheetHeight);
-
-      /**
-       * 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.length > 1 ? snapPoints[snapPoints.length - 2] : 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 = snapThresholdPoint.snapValueY;
-
-        if (yValue <= snapThresholdValue) {
-          progress = (snapThresholdValue - yValue) / snapThresholdValue;
-        } else {
-          progress = 0;
-        }
+    if (snapThresholdPoint !== undefined) {
+      const snapThresholdValue = snapThresholdPoint.snapValueY;
+
+      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;
-        }
+    /**
+     * 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));
+    // 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]);
+    const pageWidth = window.innerWidth;
 
-      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
-      root.style.borderTopRightRadius = `${borderRadius}px`;
-      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    updateModalEffect(rootId, {
+      scale: transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]),
+      translateY: transform(progress, [0, 1], [0, 24 + insetTop]),
+      borderRadius: transform(progress, [0, 1], [0, 10]),
     });
+  });
 
-    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 handleYComplete = useStableCallback(() => {
+    if (!rootId) return;
+
+    // +5 just to take into account some inprecision to ensure the cleanup is done
+    if (y.get() + 5 >= sheetHeight) {
+      cleanupModalEffect(rootId);
     }
+  });
 
-    const removeCompleteListener = y.on('animationComplete', onCompleted);
-    const removeCancelListener = y.on('animationCancel', onCompleted);
+  useEffect(() => {
+    if (!rootId) return;
+
+    const removeStartListener = y.on('animationStart', () => {
+      if (rootId) setupModalEffect(rootId);
+    });
+
+    const removeChangeListener = y.on('change', (yValue) => {
+      handleYChange(yValue);
+    });
+
+    const removeCompleteListener = y.on('animationComplete', handleYComplete);
+    const removeCancelListener = y.on('animationCancel', handleYComplete);
 
     return () => {
+      if (rootId) cleanupModalEffect(rootId);
       removeStartListener();
       removeChangeListener();
       removeCompleteListener();
       removeCancelListener();
     };
-  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
+  }, [rootId]);
 }
 
 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';
+  const body = document.querySelector('body') as HTMLBodyElement;
+
+  body.style.backgroundColor = '#000000';
   root.style.overflow = 'hidden';
   root.style.transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
   root.style.transitionProperty = 'transform, border-radius';
@@ -144,11 +135,25 @@ function setupModalEffect(rootId: string) {
   root.style.transformOrigin = 'center top';
 }
 
+function updateModalEffect(
+  rootId: string,
+  opts: { scale: number; translateY: number; borderRadius: number }
+) {
+  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+  if (!root) return;
+
+  const { scale, translateY, borderRadius } = opts;
+  root.style.transform = `scale(${scale}) translate3d(0, ${translateY}px, 0)`;
+  root.style.borderTopRightRadius = `${borderRadius}px`;
+  root.style.borderTopLeftRadius = `${borderRadius}px`;
+}
+
 function cleanupModalEffect(rootId: string) {
   const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-  const body = document.querySelector('body') as HTMLBodyElement;
   if (!root) return;
 
+  const body = document.querySelector('body') as HTMLBodyElement;
+
   body.style.removeProperty('background-color');
   root.style.removeProperty('overflow');
   root.style.removeProperty('transition-timing-function');

package/src/index.tsx

@@ -1,19 +1,11 @@
-import type { MotionValue } from 'motion/react';
-
-import { SheetBackdrop } from './SheetBackdrop';
-import { SheetContainer } from './SheetContainer';
-import { SheetContent } from './SheetContent';
-import { SheetDragIndicator } from './SheetDragIndicator';
-import { SheetHeader } from './SheetHeader';
+import { useExposedContext } from './context';
 import { Sheet as SheetBase } from './sheet';
-import type { SheetCompound } from './types';
-
-export interface SheetRef {
-  y: MotionValue<number>;
-  yInverted: MotionValue<number>;
-  height: number;
-  snapTo: (index: number) => Promise<void>;
-}
+import { SheetBackdrop } from './sheet-backdrop';
+import { SheetContainer } from './sheet-container';
+import { SheetContent } from './sheet-content';
+import { SheetDragIndicator } from './sheet-drag-indicator';
+import { SheetHeader } from './sheet-header';
+import type { ExposedContextType, SheetCompound } from './types';
 
 export const Sheet: SheetCompound = Object.assign(SheetBase, {
   Container: SheetContainer,
@@ -21,12 +13,15 @@ export const Sheet: SheetCompound = Object.assign(SheetBase, {
   DragIndicator: SheetDragIndicator,
   Content: SheetContent,
   Backdrop: SheetBackdrop,
+  useContext: useExposedContext,
 });
 
 export { useScrollPosition } from './hooks/use-scroll-position';
 export { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
 
-// Export types
+export interface SheetContext extends ExposedContextType {}
+export interface SheetRef extends ExposedContextType {}
+
 export type {
   SheetBackdropProps,
   SheetContainerProps,

package/src/{SheetBackdrop.tsx → sheet-backdrop.tsx}

@@ -1,7 +1,7 @@
 import { type MotionStyle, motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
-import { useSheetContext } from './context';
+import { useInternalContext } from './context';
 import { styles } from './styles';
 import { type SheetBackdropProps } from './types';
 import { applyStyles } from './utils';
@@ -10,30 +10,21 @@ const isClickable = (props: any) => !!props.onClick || !!props.onTap;
 
 export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
   ({ style, className = '', unstyled, ...rest }, ref) => {
-    const sheetContext = useSheetContext();
+    const sheetContext = useInternalContext();
     const clickable = isClickable(rest);
     const Comp = clickable ? motion.button : motion.div;
     const pointerEvents = clickable ? 'auto' : 'none';
     const isUnstyled = unstyled ?? sheetContext.unstyled;
 
     const backdropStyle: MotionStyle = {
+      opacity: sheetContext.yProgress,
       ...applyStyles(styles.backdrop, isUnstyled),
       ...style,
       pointerEvents,
     };
 
-    const animationProps = sheetContext.prefersReducedMotion
-      ? {}
-      : {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 1 },
-        };
-
     return (
       <Comp
-        {...animationProps}
         {...(rest as any)}
         ref={ref}
         className={`react-modal-sheet-backdrop ${className}`}

package/src/{SheetContainer.tsx → sheet-container.tsx}

@@ -2,14 +2,14 @@ import { type MotionStyle, motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
 import { DEFAULT_HEIGHT } from './constants';
-import { useSheetContext } from './context';
+import { useInternalContext } from './context';
 import { styles } from './styles';
 import { type SheetContainerProps } from './types';
 import { applyStyles, mergeRefs } from './utils';
 
 export const SheetContainer = forwardRef<any, SheetContainerProps>(
   ({ children, style, className = '', unstyled, ...rest }, ref) => {
-    const sheetContext = useSheetContext();
+    const sheetContext = useInternalContext();
 
     const isUnstyled = unstyled ?? sheetContext.unstyled;
 

package/src/{SheetContent.tsx → sheet-content.tsx}

@@ -1,7 +1,7 @@
 import { type MotionStyle, motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
-import { useSheetContext } from './context';
+import { useInternalContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
 import { useScrollPosition } from './hooks/use-scroll-position';
 import { styles } from './styles';
@@ -24,7 +24,7 @@ export const SheetContent = forwardRef<any, SheetContentProps>(
     },
     ref
   ) => {
-    const sheetContext = useSheetContext();
+    const sheetContext = useInternalContext();
     const dragConstraints = useDragConstraints();
 
     const scroll = useScrollPosition({
@@ -84,7 +84,13 @@ export const SheetContent = forwardRef<any, SheetContentProps>(
     }
 
     if (disableScroll) {
-      scrollStyle.overflowY = 'hidden';
+      /**
+       * NOTE: use `clip` to avoid glitchy behavior where using `hidden`
+       * would actually allow scrolling but just not show the scroll content.
+       * Using `hidden` seems to work fine on iOS but on Android it causes
+       * the up drag gesture to cancel occasionally causing bad UX.
+       */
+      scrollStyle.overflowY = 'clip';
     }
 
     if (dragProps !== undefined) {

package/src/{SheetDragIndicator.tsx → sheet-drag-indicator.tsx}

@@ -1,7 +1,7 @@
 import { motion, useTransform } from 'motion/react';
 import React from 'react';
 
-import { useSheetContext } from './context';
+import { useInternalContext } from './context';
 import { styles } from './styles';
 import type { SheetDragIndicatorProps } from './types';
 import { applyStyles } from './utils';
@@ -12,7 +12,7 @@ export function SheetDragIndicator({
   unstyled,
   ...rest
 }: SheetDragIndicatorProps) {
-  const sheetContext = useSheetContext();
+  const sheetContext = useInternalContext();
 
   const indicator1Transform = useTransform(
     sheetContext.indicatorRotation,

package/src/{SheetHeader.tsx → sheet-header.tsx}

@@ -1,9 +1,9 @@
 import { motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
-import { useSheetContext } from './context';
+import { useInternalContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
-import { SheetDragIndicator } from './SheetDragIndicator';
+import { SheetDragIndicator } from './sheet-drag-indicator';
 import { styles } from './styles';
 import { type SheetHeaderProps } from './types';
 import { applyStyles, mergeRefs } from './utils';
@@ -13,7 +13,7 @@ export const SheetHeader = forwardRef<any, SheetHeaderProps>(
     { children, style, disableDrag, unstyled, className = '', ...rest },
     ref
   ) => {
-    const sheetContext = useSheetContext();
+    const sheetContext = useInternalContext();
     const dragConstraints = useDragConstraints();
     const dragProps =
       disableDrag || sheetContext.disableDrag