react-modal-sheet 4.4.0 → 5.1.0

package/src/sheet.tsx

@@ -1,82 +1,94 @@
-import { createPortal } from 'react-dom';
-
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
-
 import {
+  type DragHandler,
+  type Transition,
   animate,
-  AnimatePresence,
   motion,
-  type PanInfo,
-  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 {
-  REDUCED_MOTION_TWEEN_CONFIG,
-  DEFAULT_TWEEN_CONFIG,
   DEFAULT_DRAG_CLOSE_THRESHOLD,
   DEFAULT_DRAG_VELOCITY_THRESHOLD,
+  DEFAULT_TWEEN_CONFIG,
   IS_SSR,
+  REDUCED_MOTION_TWEEN_CONFIG,
 } from './constants';
-
-import {
-  getSheetHeight,
-  getSnapY,
-  getSnapPoints,
-  getClosestSnapPoint,
-} from './utils';
-
-import { type SheetContextType, type SheetProps } from './types';
-import { SheetScrollerContextProvider, SheetContext } from './context';
-import { styles } from './styles';
-import { useModalEffect } from './hooks/use-modal-effect';
+import { SheetContext } from './context';
 import { useDimensions } from './hooks/use-dimensions';
-import { useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';
-import { useStableCallback } from './hooks/use-stable-callback';
+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 { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
+import {
+  computeSnapPoints,
+  handleHighVelocityDrag,
+  handleLowVelocityDrag,
+} from './snap';
+import { styles } from './styles';
+import { type SheetContextType, type SheetProps } from './types';
+import { applyStyles } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
     {
-      onOpenStart,
-      onOpenEnd,
-      onClose,
-      onCloseStart,
-      onCloseEnd,
-      onSnap,
+      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,
-      snapPoints: snapPointsProp,
-      rootId,
       modalEffectRootId,
+      modalEffectThreshold,
       mountPoint,
-      style,
-      detent = 'full-height',
-      initialSnap = 0,
-      disableDrag = false,
       prefersReducedMotion = false,
+      snapPoints: snapPointsProp,
+      style,
       tweenConfig = DEFAULT_TWEEN_CONFIG,
-      dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
-      dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
-      modalEffectThreshold,
+      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 { height: windowHeight } = useDimensions();
+
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions: Transition = {
@@ -84,66 +96,67 @@ export const Sheet = forwardRef<any, SheetProps>(
       ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),
     };
 
-    // NOTE: the inital value for `y` doesn't matter since it is overwritten by
-    // the value driven by the `AnimatePresence` component when the sheet is opened
-    // and after that it is driven by the gestures and/or snapping
-    const y = useMotionValue(windowHeight);
+    const keyboard = useVirtualKeyboard({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef,
+    });
+
+    // Disable drag if the keyboard is open to avoid weird behavior
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
 
     // +2 for tolerance in case the animated value is slightly off
-    const zIndex = useTransform(y, (value) =>
-      value + 2 >= windowHeight ? -1 : (style?.zIndex ?? 9999)
+    const zIndex = useTransform(y, (val) =>
+      val + 2 >= closedY ? -1 : (style?.zIndex ?? 9999)
     );
-    const visibility = useTransform(y, (value) =>
-      value + 2 >= windowHeight ? 'hidden' : 'visible'
+    const visibility = useTransform(y, (val) =>
+      val + 2 >= closedY ? 'hidden' : 'visible'
     );
 
-    // Keep the callback fns up-to-date so that they can be accessed inside
-    // the effect without including them to the dependencies array
-    const callbacks = useRef({
-      onOpenStart,
-      onOpenEnd,
-      onCloseStart,
-      onCloseEnd,
+    const updateSnap = useStableCallback((snapIndex: number) => {
+      setCurrentSnap(snapIndex);
+      onSnap?.(snapIndex);
     });
 
-    useIsomorphicLayoutEffect(() => {
-      callbacks.current = {
-        onOpenStart,
-        onOpenEnd,
-        onCloseStart,
-        onCloseEnd,
-      };
+    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 onDrag = useStableCallback((_: PointerEvent, info: PanInfo) => {
-      const currentY = y.get();
-
-      /**
-       * Make sure the user cannot drag the sheet beyond the upmost snap point
-       * if the `snapPoints` prop is provided.
-       */
-      if (snapPointsProp) {
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const topSnapPoint = sheetHeight - snapPoints[0];
-
-        if (info.delta.y < 0 && currentY <= topSnapPoint) {
-          y.set(topSnapPoint);
-          return;
-        }
+    const snapTo = useStableCallback(async (snapIndex: number) => {
+      if (!snapPointsProp) {
+        console.warn('Snapping is not possible without `snapPoints` prop.');
+        return;
       }
 
-      // Update drag indicator rotation based on drag velocity
-      const velocity = y.getVelocity();
+      const snapPoint = getSnapPoint(snapIndex);
 
-      if (velocity > 0) indicatorRotation.set(10);
-      if (velocity < 0) indicatorRotation.set(-10);
+      if (snapPoint === null) {
+        console.warn(`Invalid snap index ${snapIndex}.`);
+        return;
+      }
 
-      // Make sure user cannot drag beyond the top of the sheet
-      y.set(Math.max(currentY + info.delta.y, 0));
+      if (snapIndex === 0) {
+        onClose();
+        return;
+      }
+
+      await animate(y, snapPoint.snapValueY, {
+        ...animationOptions,
+        onComplete: () => updateSnap(snapIndex),
+      });
     });
 
-    const onDragStart = useStableCallback(() => {
+    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;
@@ -159,148 +172,175 @@ export const Sheet = forwardRef<any, SheetProps>(
       }
     });
 
-    const onDragEnd = useStableCallback((_, { velocity }: PanInfo) => {
-      if (velocity.y > dragVelocityThreshold) {
-        // User flicked the sheet down
-        onClose();
-      } else {
-        const sheetHeight = getSheetHeight(sheetRef);
-        const currentY = y.get();
+    const onDrag = useStableCallback<DragHandler>((event, info) => {
+      onDragProp?.(event, info);
 
-        let yTo = 0;
+      const currentY = y.get();
 
-        const snapPoints = snapPointsProp
-          ? getSnapPoints({ snapPointsProp, sheetHeight })
-          : undefined;
+      // Update drag indicator rotation based on drag velocity
+      const velocity = y.getVelocity();
+      if (velocity > 0) indicatorRotation.set(10);
+      if (velocity < 0) indicatorRotation.set(-10);
 
-        if (snapPoints) {
-          const { snapY, snapIndex } = getClosestSnapPoint({
-            snapPoints,
-            currentY,
-            sheetHeight,
-            detent,
-          });
+      // Make sure user cannot drag beyond the top of the sheet
+      y.set(Math.max(currentY + info.delta.y, 0));
+    });
 
-          yTo = snapY;
+    const onDragStart = useStableCallback<DragHandler>((event, info) => {
+      blurActiveInput();
+      onDragStartProp?.(event, info);
+    });
 
-          // This happens before calling `animate` but it doesn't really matter
-          onSnap?.(snapIndex);
-        } else if (currentY / sheetHeight > dragCloseThreshold) {
-          // Close if dragged over enough far
-          yTo = sheetHeight;
-        }
+    const onDragEnd = useStableCallback<DragHandler>((event, info) => {
+      blurActiveInput();
+      onDragEndProp?.(event, info);
 
-        // Update the spring value so that the sheet is animated to the snap point
-        animate(y, yTo, animationOptions);
+      const currentY = y.get();
 
-        // +1px for imprecision tolerance
-        if (yTo + 1 >= sheetHeight) {
-          onClose();
-        }
-      }
+      let yTo = 0;
 
-      // Reset indicator rotation after dragging
-      indicatorRotation.set(0);
-    });
+      const currentSnapPoint =
+        currentSnap !== undefined ? getSnapPoint(currentSnap) : null;
 
-    // Trigger onSnap callback when sheet is opened or closed
-    useEffect(() => {
-      if (snapPointsProp && onSnap) {
-        onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
-      }
-    }, [isOpen]);
+      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;
 
-    // Animate the sheet open
-    useEffect(() => {
-      if (!isOpen) return; // let `AnimatePresence` handle the exit animation
+        let result: { yTo: number; snapIndex: number | undefined };
 
-      let yTo = 0;
+        if (isHighVelocity) {
+          result = handleHighVelocityDrag({
+            snapPoints,
+            dragDirection: dragVelocityDirection,
+          });
+        } else {
+          result = handleLowVelocityDrag({
+            currentSnapPoint,
+            currentY,
+            dragDirection: dragOffsetDirection,
+            snapPoints,
+            velocity: info.velocity.y,
+          });
+        }
 
-      if (snapPointsProp) {
-        const snapIndex = initialSnap;
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        yTo = result.yTo;
 
-        if (snapY !== null) {
-          yTo = snapY;
+        // 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);
-    }, [isOpen]);
-
-    useImperativeHandle(ref, () => ({
-      y,
-      snapTo: (snapIndex: number) => {
-        if (!snapPointsProp) {
-          console.warn('Snapping is not possible without `snapPoints` prop.');
-          return;
-        }
 
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+      // +1px for imprecision tolerance
+      // Only call onClose if disableDismiss is false or if we're actually closing
+      if (yTo + 1 >= sheetHeight && !disableDismiss) {
+        onClose();
+      }
 
-        if (snapY !== null) {
-          animate(y, snapY, animationOptions);
-          onSnap?.(snapIndex);
+      // Reset indicator rotation after dragging
+      indicatorRotation.set(0);
+    });
 
-          // +1px for imprecision tolerance
-          if (snapY + 1 >= sheetHeight) {
-            onClose();
-          }
-        }
-      },
+    useImperativeHandle(ref, () => ({
+      y,
+      yInverted,
+      height: sheetHeight,
+      snapTo,
     }));
 
-    if (rootId) {
-      console.warn(
-        'The `rootId` prop is deprecated and will be removed in the next major version. Use `modalEffectRootId` instead.'
-      );
-    }
-
     useModalEffect({
       y,
-      sheetRef,
-      snapPointsProp,
-      rootId: rootId || modalEffectRootId,
+      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.
+    /**
+     * 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 dragProps = useMemo(() => {
-      const dragProps: SheetContextType['dragProps'] = {
-        drag: 'y',
-        dragElastic: 0,
-        dragMomentum: false,
-        dragPropagation: false,
-        onDrag,
-        onDragStart,
-        onDragEnd,
-      };
+    const state = useSheetState({
+      isOpen,
+      onOpen: async () => {
+        onOpenStart?.();
 
-      return disableDrag ? undefined : dragProps;
-    }, [disableDrag, windowHeight]);
+        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 = {
-      y,
-      sheetRef,
-      isOpen,
-      initialSnap,
+      currentSnap,
       detent,
-      indicatorRotation,
-      callbacks,
-      dragProps,
-      windowHeight,
-      animationOptions,
-      reduceMotion,
       disableDrag,
+      dragProps,
+      indicatorRotation,
+      avoidKeyboard,
+      sheetBoundsRef,
+      sheetRef,
+      unstyled,
+      y,
     };
 
     const sheet = (
@@ -308,18 +348,16 @@ export const Sheet = forwardRef<any, SheetProps>(
         <motion.div
           {...rest}
           ref={ref}
-          style={{ ...styles.wrapper, zIndex, visibility, ...style }}
+          data-sheet-state={state}
+          className={`react-modal-sheet-root ${className}`}
+          style={{
+            ...applyStyles(styles.root, unstyled),
+            zIndex,
+            visibility,
+            ...style,
+          }}
         >
-          <AnimatePresence>
-            {/* NOTE: AnimatePresence requires us to set keys to children */}
-            {isOpen ? (
-              <SheetScrollerContextProvider>
-                {Children.map(children, (child: any, i) =>
-                  cloneElement(child, { key: `sheet-child-${i}` })
-                )}
-              </SheetScrollerContextProvider>
-            ) : null}
-          </AnimatePresence>
+          {state !== 'closed' ? children : null}
         </motion.div>
       </SheetContext.Provider>
     );