react-modal-sheet 5.5.0 → 5.6.0

package/package.json

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

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

package/src/sheet.tsx

@@ -10,6 +10,7 @@ import {
 import React, {
   forwardRef,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -23,7 +24,7 @@ import {
   IS_SSR,
   REDUCED_MOTION_TWEEN_CONFIG,
 } from './constants';
-import { SheetContext } from './context';
+import { ExposedSheetContext, InternalSheetContext } from './context';
 import { useDimensions } from './hooks/use-dimensions';
 import { useKeyboardAvoidance } from './hooks/use-keyboard-avoidance';
 import { useModalEffect } from './hooks/use-modal-effect';
@@ -32,8 +33,12 @@ import { useSheetState } from './hooks/use-sheet-state';
 import { useStableCallback } from './hooks/use-stable-callback';
 import { classifyDragEnd, computeSnapPoints } from './snap';
 import { styles } from './styles';
-import { type SheetContextType, type SheetProps } from './types';
-import { applyStyles, waitForElement, willOpenKeyboard } from './utils';
+import type {
+  ExposedContextType,
+  InternalContextType,
+  SheetProps,
+} from './types';
+import { applyStyles, clamp, waitForElement, willOpenKeyboard } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -74,17 +79,12 @@ export const Sheet = forwardRef<any, SheetProps>(
     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 yProgress = useTransform(y, (val) => clamp(1 - val / closedY, 0, 1));
     const indicatorRotation = useMotionValue(0);
-
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions: Transition = {
@@ -100,6 +100,13 @@ export const Sheet = forwardRef<any, SheetProps>(
       val + 2 >= closedY ? 'hidden' : 'visible'
     );
 
+    // Memo snap points as we expose them in context so we want them to be stable
+    const snapPoints = useMemo(() => {
+      return snapPointsProp && sheetHeight > 0
+        ? computeSnapPoints({ sheetHeight, snapPointsProp })
+        : [];
+    }, [sheetHeight, snapPointsProp?.join('')]);
+
     const updateSnap = useStableCallback((snapIndex: number) => {
       setCurrentSnap(snapIndex);
       onSnap?.(snapIndex);
@@ -268,13 +275,6 @@ export const Sheet = forwardRef<any, SheetProps>(
       indicatorRotation.set(0);
     });
 
-    useImperativeHandle(ref, () => ({
-      y,
-      yInverted,
-      height: sheetHeight,
-      snapTo,
-    }));
-
     useModalEffect({
       y,
       detent,
@@ -310,23 +310,17 @@ export const Sheet = forwardRef<any, SheetProps>(
         const yTo = initialSnapPoint?.snapValueY ?? 0;
 
         await animate(y, yTo, animationOptions);
-
-        if (initialSnap !== undefined) {
-          updateSnap(initialSnap);
-        }
-
+        if (initialSnap !== undefined) updateSnap(initialSnap);
         onOpenEnd?.();
       },
       onClosing: async () => {
         onCloseStart?.();
-
         await animate(y, closedY, animationOptions);
-
         onCloseEnd?.();
       },
     });
 
-    const dragProps: SheetContextType['dragProps'] = {
+    const dragProps: InternalContextType['dragProps'] = {
       drag: 'y',
       dragElastic: 0,
       dragMomentum: false,
@@ -336,7 +330,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       onDragEnd,
     };
 
-    const context: SheetContextType = {
+    const internalContext: InternalContextType = {
       currentSnap,
       detent,
       disableDrag,
@@ -347,11 +341,24 @@ export const Sheet = forwardRef<any, SheetProps>(
       sheetBoundsRef,
       sheetRef,
       unstyled,
+      yProgress,
       y,
     };
 
+    const exposedContext: ExposedContextType = {
+      height: sheetHeight,
+      currentSnap,
+      snapPoints,
+      snapTo,
+      y,
+      yInverted,
+      yProgress,
+    };
+
+    useImperativeHandle(ref, () => exposedContext);
+
     const sheet = (
-      <SheetContext.Provider value={context}>
+      <InternalSheetContext.Provider value={internalContext}>
         <motion.div
           {...rest}
           ref={ref}
@@ -364,9 +371,11 @@ export const Sheet = forwardRef<any, SheetProps>(
             ...style,
           }}
         >
-          {state !== 'closed' ? children : null}
+          <ExposedSheetContext.Provider value={exposedContext}>
+            {state !== 'closed' ? children : null}
+          </ExposedSheetContext.Provider>
         </motion.div>
-      </SheetContext.Provider>
+      </InternalSheetContext.Provider>
     );
 
     if (IS_SSR) return sheet;

package/src/snap.ts

@@ -1,6 +1,6 @@
 import type { PanInfo } from 'motion';
 import type { SheetSnapPoint } from './types';
-import { isAscendingOrder } from './utils';
+import { clamp, isAscendingOrder } from './utils';
 
 /**
  * Convert negative / percentage snap points to absolute values
@@ -108,10 +108,6 @@ export function computeSnapPoints({
   }));
 }
 
-function clamp(value: number, min: number, max: number) {
-  return Math.min(Math.max(value, min), max);
-}
-
 function sign(value: number) {
   if (value > 0) return 1;
   if (value < 0) return -1;

package/src/types.tsx

@@ -103,7 +103,7 @@ export type SheetSnapPoint = {
   snapValueY: number; // Y value is inverted as `y = 0` means sheet is at the top
 };
 
-export interface SheetContextType {
+export interface InternalContextType {
   currentSnap?: number;
   detent: SheetDetent;
   disableDrag: boolean;
@@ -114,9 +114,20 @@ export interface SheetContextType {
   sheetBoundsRef: (node: HTMLDivElement | null) => void;
   sheetRef: RefObject<any>;
   unstyled: boolean;
+  yProgress: MotionValue<number>;
   y: MotionValue<any>;
 }
 
+export interface ExposedContextType {
+  currentSnap?: number;
+  height: number;
+  snapPoints: SheetSnapPoint[];
+  snapTo: (index: number) => void;
+  y: MotionValue<number>;
+  yInverted: MotionValue<number>;
+  yProgress: MotionValue<number>;
+}
+
 export interface SheetScrollerContextType {
   disableDrag: boolean;
   setDragDisabled: () => void;
@@ -149,6 +160,7 @@ interface SheetCompoundComponent {
   DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
   Content: ContentComponent;
   Backdrop: BackdropComponent;
+  useContext: () => ExposedContextType;
 }
 
 export type SheetCompound = SheetComponent & SheetCompoundComponent;

package/src/utils.ts

@@ -114,3 +114,7 @@ export function willOpenKeyboard(target: Element) {
 export function isHTTPS() {
   return typeof window !== 'undefined' && window.isSecureContext;
 }
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}