react-modal-sheet 5.2.1 → 5.2.3

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { motion, useMotionValue, useTransform, useReducedMotion, animate } from 'motion/react';
-import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useCallback, useEffect, useLayoutEffect } from 'react';
+import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import useMeasure from 'react-use-measure';
 import { transform } from 'motion';
@@ -214,14 +214,14 @@ var SheetBackdrop = forwardRef(
     return /* @__PURE__ */ React4.createElement(
       Comp,
       {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: backdropStyle,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        transition: { duration: 1 }
+        transition: { duration: 1 },
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle
       }
     );
   }
@@ -270,63 +270,88 @@ function useDragConstraints() {
   const onMeasure = useCallback(() => constraints, []);
   return { ref, onMeasure };
 }
+var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
+
+// src/hooks/use-stable-callback.ts
+function useStableCallback(handler) {
+  const handlerRef = useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn == null ? void 0 : fn(...args);
+  }, []);
+}
+
+// src/hooks/use-scroll-position.ts
 function useScrollPosition(options = {}) {
   const { debounceDelay = 32, isEnabled = true } = options;
+  const scrollTimeoutRef = useRef(null);
   const [element, setElement] = useState(null);
   const [scrollPosition, setScrollPosition] = useState(void 0);
-  useEffect(() => {
-    if (!element || !isEnabled) return;
-    let scrollTimeout = null;
-    function determineScrollPosition(element2) {
-      const { scrollTop, scrollHeight, clientHeight } = element2;
-      const isScrollable2 = scrollHeight > clientHeight;
-      if (!isScrollable2) {
-        if (scrollPosition) setScrollPosition(void 0);
-        return;
-      }
-      const isAtTop = scrollTop <= 0;
-      const isAtBottom = Math.ceil(scrollHeight) - Math.ceil(scrollTop) === Math.ceil(clientHeight);
-      let position;
-      if (isAtTop) {
-        position = "top";
-      } else if (isAtBottom) {
-        position = "bottom";
-      } else {
-        position = "middle";
-      }
-      if (position === scrollPosition) return;
-      setScrollPosition(position);
+  const scrollRef = useMemo(
+    () => (element2) => {
+      setElement(element2);
+    },
+    []
+  );
+  const determineScrollPosition = useStableCallback((element2) => {
+    const { scrollTop, scrollHeight, clientHeight } = element2;
+    const isScrollable2 = scrollHeight > clientHeight;
+    if (!isScrollable2) {
+      if (scrollPosition) setScrollPosition(void 0);
+      return;
     }
-    function onScroll(event) {
-      if (event.currentTarget instanceof HTMLElement) {
-        const el = event.currentTarget;
-        if (scrollTimeout) clearTimeout(scrollTimeout);
-        if (debounceDelay === 0) {
-          determineScrollPosition(el);
-        } else {
-          scrollTimeout = setTimeout(
-            () => determineScrollPosition(el),
-            debounceDelay
-          );
-        }
-      }
+    const isAtTop = scrollTop <= 0;
+    const isAtBottom = Math.ceil(scrollHeight) - Math.ceil(scrollTop) === Math.ceil(clientHeight);
+    let position;
+    if (isAtTop) {
+      position = "top";
+    } else if (isAtBottom) {
+      position = "bottom";
+    } else {
+      position = "middle";
     }
-    function onTouchStart(event) {
-      if (event.currentTarget instanceof HTMLElement) {
-        determineScrollPosition(event.currentTarget);
+    element2.style.touchAction = isAtTop ? "pan-down" : "";
+    if (position === scrollPosition) return;
+    setScrollPosition(position);
+  });
+  const onScroll = useStableCallback((event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const el = event.currentTarget;
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      if (debounceDelay === 0) {
+        determineScrollPosition(el);
+      } else {
+        scrollTimeoutRef.current = setTimeout(
+          () => determineScrollPosition(el),
+          debounceDelay
+        );
       }
     }
+  });
+  const onTouchStart = useStableCallback((event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const element2 = event.currentTarget;
+      requestAnimationFrame(() => {
+        determineScrollPosition(element2);
+      });
+    }
+  });
+  useEffect(() => {
+    if (!element || !isEnabled) return;
     determineScrollPosition(element);
     element.addEventListener("scroll", onScroll);
     element.addEventListener("touchstart", onTouchStart);
     return () => {
-      if (scrollTimeout) clearTimeout(scrollTimeout);
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
       element.removeEventListener("scroll", onScroll);
       element.removeEventListener("touchstart", onTouchStart);
     };
   }, [element, isEnabled]);
   return {
-    scrollRef: (element2) => setElement(element2),
+    scrollRef,
     scrollPosition
   };
 }
@@ -347,7 +372,9 @@ var SheetContent = forwardRef(
   }, ref) => {
     const sheetContext = useSheetContext();
     const dragConstraints = useDragConstraints();
-    const scroll = useScrollPosition();
+    const scroll = useScrollPosition({
+      isEnabled: typeof disableScrollProp === "function" ? true : !disableScrollProp
+    });
     const disableScroll = typeof disableScrollProp === "function" ? disableScrollProp({
       scrollPosition: scroll.scrollPosition,
       currentSnap: sheetContext.currentSnap
@@ -371,6 +398,9 @@ var SheetContent = forwardRef(
     if (disableScroll) {
       scrollStyle.overflowY = "hidden";
     }
+    if (dragProps !== void 0) {
+      scrollStyle.touchAction = "pan-down";
+    }
     return /* @__PURE__ */ React4.createElement(
       motion.div,
       {
@@ -466,9 +496,6 @@ var SheetHeader = forwardRef(
   }
 );
 SheetHeader.displayName = "SheetHeader";
-var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
-
-// src/hooks/use-dimensions.ts
 function useDimensions() {
   const [dimensions, setDimensions] = useState(() => ({
     windowHeight: !IS_SSR ? window.innerHeight : 0,
@@ -829,18 +856,6 @@ function scrollIntoView(target) {
 function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
-function useStableCallback(handler) {
-  const handlerRef = useRef(void 0);
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  });
-  return useCallback((...args) => {
-    const fn = handlerRef.current;
-    return fn == null ? void 0 : fn(...args);
-  }, []);
-}
-
-// src/hooks/use-sheet-state.ts
 function useSheetState({
   isOpen,
   onClosed: _onClosed,