react-modal-sheet 4.4.0 → 5.1.0

package/src/SheetContent.tsx

@@ -1,34 +1,97 @@
+import { type MotionStyle, motion } from 'motion/react';
 import React, { forwardRef } from 'react';
-import { motion } from 'motion/react';
 
-import { type SheetDraggableProps } from './types';
-import { useSheetScrollerContext, useSheetContext } from './context';
+import { useSheetContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
-import { mergeRefs } from './utils';
+import { useScrollPosition } from './hooks/use-scroll-position';
 import { styles } from './styles';
+import { type SheetContentProps } from './types';
+import { applyStyles, mergeRefs } from './utils';
 
-export const SheetContent = forwardRef<any, SheetDraggableProps>(
-  ({ children, style, disableDrag, className = '', ...rest }, ref) => {
+export const SheetContent = forwardRef<any, SheetContentProps>(
+  (
+    {
+      disableScroll: disableScrollProp,
+      disableDrag: disableDragProp,
+      children,
+      style: styleProp,
+      className = '',
+      scrollRef: scrollRefProp = null,
+      unstyled,
+      ...rest
+    },
+    ref
+  ) => {
     const sheetContext = useSheetContext();
-    const sheetScrollerContext = useSheetScrollerContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
+    const dragConstraints = useDragConstraints();
+    const scroll = useScrollPosition();
+
+    const disableScroll =
+      typeof disableScrollProp === 'function'
+        ? disableScrollProp({
+            scrollPosition: scroll.scrollPosition,
+            currentSnap: sheetContext.currentSnap,
+          })
+        : Boolean(disableScrollProp);
+
+    const disableDragDueToScroll =
+      !disableScroll &&
+      scroll.scrollPosition &&
+      scroll.scrollPosition !== 'top';
+
+    const disableDragDueToProp =
+      typeof disableDragProp === 'function'
+        ? disableDragProp({
+            scrollPosition: scroll.scrollPosition,
+            currentSnap: sheetContext.currentSnap,
+          })
+        : Boolean(disableDragProp);
+
+    const disableDrag =
+      disableDragDueToProp ||
+      disableDragDueToScroll ||
+      sheetContext.disableDrag;
 
     const dragProps =
-      disableDrag || sheetScrollerContext.disableDrag
+      disableDrag || sheetContext.disableDrag
         ? undefined
         : sheetContext.dragProps;
 
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+
+    const contentStyle: MotionStyle = {
+      ...applyStyles(styles.content, isUnstyled),
+      ...styleProp,
+    };
+
+    const scrollStyle: MotionStyle = applyStyles(styles.scroller, isUnstyled);
+
+    if (sheetContext.avoidKeyboard) {
+      scrollStyle.paddingBottom =
+        'env(keyboard-inset-height, var(--keyboard-inset-height, 0px))';
+    }
+
+    if (disableScroll) {
+      scrollStyle.overflowY = 'hidden';
+    }
+
     return (
       <motion.div
         {...rest}
-        ref={mergeRefs([ref, constraintsRef])}
+        ref={mergeRefs([ref, dragConstraints.ref])}
         className={`react-modal-sheet-content ${className}`}
-        style={{ ...styles.content, ...style }}
+        style={contentStyle}
         {...dragProps}
-        dragConstraints={constraintsRef}
-        onMeasureDragConstraints={onMeasureDragConstraints}
+        dragConstraints={dragConstraints.ref}
+        onMeasureDragConstraints={dragConstraints.onMeasure}
       >
-        {children}
+        <motion.div
+          ref={mergeRefs([scroll.ref, scrollRefProp])}
+          style={scrollStyle}
+          className="react-modal-sheet-content-scroller"
+        >
+          {children}
+        </motion.div>
       </motion.div>
     );
   }

package/src/SheetDragIndicator.tsx

@@ -0,0 +1,52 @@
+import { motion, useTransform } from 'motion/react';
+import React from 'react';
+
+import { useSheetContext } from './context';
+import { styles } from './styles';
+import type { SheetDragIndicatorProps } from './types';
+import { applyStyles } from './utils';
+
+export function SheetDragIndicator({
+  style,
+  className = '',
+  unstyled,
+  ...rest
+}: SheetDragIndicatorProps) {
+  const sheetContext = useSheetContext();
+
+  const indicator1Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(2px) rotate(${r}deg)`
+  );
+
+  const indicator2Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(-2px) rotate(${-1 * r}deg)`
+  );
+
+  const isUnstyled = unstyled ?? sheetContext.unstyled;
+
+  const indicatorWrapperStyle = {
+    ...applyStyles(styles.indicatorWrapper, isUnstyled),
+    ...style,
+  };
+
+  const indicatorStyle = applyStyles(styles.indicator, isUnstyled);
+
+  return (
+    <div
+      className={`react-modal-sheet-drag-indicator-container ${className}`}
+      style={indicatorWrapperStyle}
+      {...rest}
+    >
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator1Transform }}
+      />
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator2Transform }}
+      />
+    </div>
+  );
+}

package/src/SheetHeader.tsx

@@ -1,47 +1,47 @@
+import { motion } from 'motion/react';
 import React, { forwardRef } from 'react';
-import { motion, useTransform } from 'motion/react';
 
-import { type SheetDraggableProps } from './types';
+import { SheetDragIndicator } from './SheetDragIndicator';
 import { useSheetContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
-import { mergeRefs } from './utils';
 import { styles } from './styles';
+import { type SheetHeaderProps } from './types';
+import { applyStyles, mergeRefs } from './utils';
 
-export const SheetHeader = forwardRef<any, SheetDraggableProps>(
-  ({ children, style, disableDrag, ...rest }, ref) => {
-    const { indicatorRotation, dragProps } = useSheetContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
-    const _dragProps = disableDrag ? undefined : dragProps;
+export const SheetHeader = forwardRef<any, SheetHeaderProps>(
+  (
+    { children, style, disableDrag, unstyled, className = '', ...rest },
+    ref
+  ) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const dragProps =
+      disableDrag || sheetContext.disableDrag
+        ? undefined
+        : sheetContext.dragProps;
 
-    const indicator1Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
 
-    const indicator2Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(-2px) rotate(${-1 * r}deg)`
-    );
+    const headerWrapperStyle = {
+      ...applyStyles(styles.headerWrapper, isUnstyled),
+      ...style,
+    };
+
+    const headerStyle = applyStyles(styles.header, isUnstyled);
 
     return (
       <motion.div
         {...rest}
-        ref={mergeRefs([ref, constraintsRef])}
-        style={{ ...styles.headerWrapper, ...style }}
-        {..._dragProps}
-        dragConstraints={constraintsRef}
-        onMeasureDragConstraints={onMeasureDragConstraints}
+        ref={mergeRefs([ref, dragConstraints.ref])}
+        style={headerWrapperStyle}
+        className={`react-modal-sheet-header-container ${className}`}
+        {...dragProps}
+        dragConstraints={dragConstraints.ref}
+        onMeasureDragConstraints={dragConstraints.onMeasure}
       >
         {children || (
-          <div className="react-modal-sheet-header" style={styles.header}>
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator1Transform }}
-            />
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator2Transform }}
-            />
+          <div className="react-modal-sheet-header" style={headerStyle}>
+            <SheetDragIndicator />
           </div>
         )}
       </motion.div>

package/src/constants.ts

@@ -1,13 +1,15 @@
-export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
+import type { SheetTweenConfig } from './types';
+
+export const DEFAULT_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
 
 export const IS_SSR = typeof window === 'undefined';
 
-export const DEFAULT_TWEEN_CONFIG = {
+export const DEFAULT_TWEEN_CONFIG: SheetTweenConfig = {
   ease: 'easeOut',
   duration: 0.2,
 };
 
-export const REDUCED_MOTION_TWEEN_CONFIG = {
+export const REDUCED_MOTION_TWEEN_CONFIG: SheetTweenConfig = {
   ease: 'linear',
   duration: 0.01,
 };

package/src/context.tsx

@@ -1,10 +1,5 @@
-import React, {
-  type ReactNode,
-  createContext,
-  useContext,
-  useState,
-} from 'react';
-import { type SheetScrollerContextType, type SheetContextType } from './types';
+import { createContext, useContext } from 'react';
+import { type SheetContextType } from './types';
 
 export const SheetContext = createContext<SheetContextType | undefined>(
   undefined
@@ -15,38 +10,3 @@ export function useSheetContext() {
   if (!context) throw new Error('Sheet context error');
   return context;
 }
-
-export const SheetScrollerContext = createContext<
-  SheetScrollerContextType | undefined
->(undefined);
-
-export function SheetScrollerContextProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const sheetContext = useSheetContext();
-  const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
-
-  function setDragEnabled() {
-    if (!sheetContext.disableDrag) setDisableDrag(false);
-  }
-
-  function setDragDisabled() {
-    if (!disableDrag) setDisableDrag(true);
-  }
-
-  return (
-    <SheetScrollerContext.Provider
-      value={{ disableDrag, setDragEnabled, setDragDisabled }}
-    >
-      {children}
-    </SheetScrollerContext.Provider>
-  );
-}
-
-export function useSheetScrollerContext() {
-  const context = useContext(SheetScrollerContext);
-  if (!context) throw new Error('Sheet scroller context error');
-  return context;
-}

package/src/hooks/use-dimensions.ts

@@ -5,15 +5,15 @@ import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
 export function useDimensions() {
   const [dimensions, setDimensions] = useState(() => ({
-    height: !IS_SSR ? window.innerHeight : 0,
-    width: !IS_SSR ? window.innerWidth : 0,
+    windowHeight: !IS_SSR ? window.innerHeight : 0,
+    windowWidth: !IS_SSR ? window.innerWidth : 0,
   }));
 
   useIsomorphicLayoutEffect(() => {
     function handler() {
       setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth,
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth,
       });
     }
 

package/src/hooks/use-drag-constraints.ts

@@ -8,7 +8,7 @@ import { type BoundingBox } from 'motion/react';
 const constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };
 
 export function useDragConstraints() {
-  const constraintsRef = useRef<any>(null);
-  const onMeasureDragConstraints = useCallback(() => constraints, []);
-  return { constraintsRef, onMeasureDragConstraints };
+  const ref = useRef<any>(null);
+  const onMeasure = useCallback(() => constraints, []);
+  return { ref, onMeasure };
 }

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

@@ -1,25 +1,34 @@
-import { transform, type MotionValue } from 'motion';
+import { type MotionValue, transform } from 'motion';
 import { type RefObject } from 'react';
 
+import type { SheetDetent, SheetSnapPoint } from '../types';
 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,
+  detent,
+  rootId: _rootId,
+  sheetHeight,
+  snapPoints,
   startThreshold,
 }: {
   y: MotionValue<number>;
+  detent: SheetDetent;
   rootId?: string;
-  sheetRef: RefObject<HTMLDivElement | null>;
-  snapPointsProp?: number[];
+  sheetHeight: number;
+  snapPoints: SheetSnapPoint[];
   startThreshold?: number;
 }) {
   const insetTop = useSafeAreaInsets().top;
 
+  let rootId: string | undefined = _rootId;
+
+  if (rootId && detent === 'full') {
+    console.warn('Using "full" detent with modal effect is not supported.');
+    rootId = undefined;
+  }
+
   // Cleanup on unmount
   useIsomorphicLayoutEffect(() => {
     return () => {
@@ -33,15 +42,7 @@ export function useModalEffect({
     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!);
     });
@@ -55,17 +56,13 @@ export function useModalEffect({
 
       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;
+        snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : undefined;
 
       /**
        * If we have snap points, we need to calculate the progress percentage
@@ -74,8 +71,7 @@ export function useModalEffect({
        * and its end is different.
        */
       if (snapThresholdPoint !== undefined) {
-        const snapThresholdValue =
-          sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
+        const snapThresholdValue = snapThresholdPoint.snapValueY;
 
         if (yValue <= snapThresholdValue) {
           progress = (snapThresholdValue - yValue) / snapThresholdValue;
@@ -132,7 +128,7 @@ export function useModalEffect({
       removeCompleteListener();
       removeCancelListener();
     };
-  }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
+  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
 }
 
 function setupModalEffect(rootId: string) {

package/src/hooks/use-resize-observer.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import { useStableCallback } from './use-stable-callback';
+
+export function useResizeObserver<T extends Element = HTMLDivElement>(
+  callback: ResizeObserverCallback
+) {
+  const observeRef = useRef<T | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const debouncedCallback: ResizeObserverCallback = useStableCallback(
+    (entries, observer) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => callback(entries, observer), 32);
+    }
+  );
+
+  useEffect(() => {
+    const element = observeRef.current;
+    if (!element) return;
+
+    const observer = new ResizeObserver(debouncedCallback);
+    observer.observe(element, { box: 'border-box' });
+
+    return () => {
+      observer.disconnect();
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return { observeRef };
+}

package/src/hooks/use-scroll-position.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useScrollPosition() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scrollPosition, setScrollPosition] = useState<
+    'top' | 'bottom' | 'middle' | undefined
+  >(undefined);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    let scrollTimeout: number | null = null;
+
+    function determineScrollPosition(element: HTMLDivElement) {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      const isScrollable = scrollHeight > clientHeight;
+
+      if (!isScrollable) {
+        // Reset scroll position if the content is not scrollable anymore
+        if (scrollPosition) setScrollPosition(undefined);
+        return;
+      }
+
+      const isAtTop = scrollTop <= 0;
+      const isAtBottom =
+        Math.ceil(scrollHeight) - Math.ceil(scrollTop) ===
+        Math.ceil(clientHeight);
+
+      let position: 'top' | 'bottom' | 'middle';
+
+      if (isAtTop) {
+        position = 'top';
+      } else if (isAtBottom) {
+        position = 'bottom';
+      } else {
+        position = 'middle';
+      }
+
+      if (position === scrollPosition) return;
+      setScrollPosition(position);
+    }
+
+    function onScroll(event: Event) {
+      if (event.currentTarget instanceof HTMLDivElement) {
+        const el = event.currentTarget;
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        // Debounce the scroll handler
+        scrollTimeout = setTimeout(() => determineScrollPosition(el), 32);
+      }
+    }
+
+    function onTouchStart(event: Event) {
+      if (event.currentTarget instanceof HTMLDivElement) {
+        determineScrollPosition(event.currentTarget);
+      }
+    }
+
+    determineScrollPosition(element);
+
+    element.addEventListener('scroll', onScroll);
+    element.addEventListener('touchstart', onTouchStart);
+
+    return () => {
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      element.removeEventListener('scroll', onScroll);
+      element.removeEventListener('touchstart', onTouchStart);
+    };
+  }, []);
+
+  return { ref, scrollPosition };
+}

package/src/hooks/use-sheet-state.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { useStableCallback } from './use-stable-callback';
+
+type SheetState = 'closed' | 'opening' | 'open' | 'closing';
+
+type UseSheetStatesProps = {
+  isOpen: boolean;
+  onClosed?: () => Promise<void> | void;
+  onOpening?: () => Promise<void> | void;
+  onOpen?: () => Promise<void> | void;
+  onClosing?: () => Promise<void> | void;
+};
+
+export function useSheetState({
+  isOpen,
+  onClosed: _onClosed,
+  onOpening: _onOpening,
+  onOpen: _onOpen,
+  onClosing: _onClosing,
+}: UseSheetStatesProps) {
+  const [state, setState] = useState<SheetState>(isOpen ? 'opening' : 'closed');
+  const onClosed = useStableCallback(() => _onClosed?.());
+  const onOpening = useStableCallback(() => _onOpening?.());
+  const onOpen = useStableCallback(() => _onOpen?.());
+  const onClosing = useStableCallback(() => _onClosing?.());
+
+  useEffect(() => {
+    if (isOpen && state === 'closed') {
+      setState('opening');
+    } else if (!isOpen && (state === 'open' || state === 'opening')) {
+      setState('closing');
+    }
+  }, [isOpen, state]);
+
+  useEffect(() => {
+    async function handle() {
+      switch (state) {
+        case 'closed':
+          await onClosed?.();
+          break;
+
+        case 'opening':
+          await onOpening?.();
+          setState('open');
+          break;
+
+        case 'open':
+          await onOpen?.();
+          break;
+
+        case 'closing':
+          await onClosing?.();
+          setState('closed');
+          break;
+      }
+    }
+    handle().catch((error) => {
+      console.error('Internal sheet state error:', error);
+    });
+  }, [state]);
+
+  return state;
+}