react-modal-sheet 5.2.1 → 5.2.3

package/dist/index.d.mts

@@ -6,7 +6,8 @@ type CommonProps = {
     className?: string;
     unstyled?: boolean;
 };
-type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -50,7 +51,7 @@ type SheetContentProps = MotionCommonProps & CommonProps & {
     scrollClassName?: string;
     scrollStyle?: MotionProps['style'];
 };
-type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetBackdropProps = MotionDivProps & CommonProps;
 type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
 type SheetStateInfo = {
     scrollPosition?: 'top' | 'bottom' | 'middle';

package/dist/index.d.ts

@@ -6,7 +6,8 @@ type CommonProps = {
     className?: string;
     unstyled?: boolean;
 };
-type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -50,7 +51,7 @@ type SheetContentProps = MotionCommonProps & CommonProps & {
     scrollClassName?: string;
     scrollStyle?: MotionProps['style'];
 };
-type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetBackdropProps = MotionDivProps & CommonProps;
 type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
 type SheetStateInfo = {
     scrollPosition?: 'top' | 'bottom' | 'middle';

package/dist/index.js

@@ -221,14 +221,14 @@ var SheetBackdrop = React4.forwardRef(
     return /* @__PURE__ */ React4__default.default.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
       }
     );
   }
@@ -277,63 +277,88 @@ function useDragConstraints() {
   const onMeasure = React4.useCallback(() => constraints, []);
   return { ref, onMeasure };
 }
+var useIsomorphicLayoutEffect = IS_SSR ? React4.useEffect : React4.useLayoutEffect;
+
+// src/hooks/use-stable-callback.ts
+function useStableCallback(handler) {
+  const handlerRef = React4.useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return React4.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 = React4.useRef(null);
   const [element, setElement] = React4.useState(null);
   const [scrollPosition, setScrollPosition] = React4.useState(void 0);
-  React4.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 = React4.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);
+      });
+    }
+  });
+  React4.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
   };
 }
@@ -354,7 +379,9 @@ var SheetContent = React4.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
@@ -378,6 +405,9 @@ var SheetContent = React4.forwardRef(
     if (disableScroll) {
       scrollStyle.overflowY = "hidden";
     }
+    if (dragProps !== void 0) {
+      scrollStyle.touchAction = "pan-down";
+    }
     return /* @__PURE__ */ React4__default.default.createElement(
       react.motion.div,
       {
@@ -473,9 +503,6 @@ var SheetHeader = React4.forwardRef(
   }
 );
 SheetHeader.displayName = "SheetHeader";
-var useIsomorphicLayoutEffect = IS_SSR ? React4.useEffect : React4.useLayoutEffect;
-
-// src/hooks/use-dimensions.ts
 function useDimensions() {
   const [dimensions, setDimensions] = React4.useState(() => ({
     windowHeight: !IS_SSR ? window.innerHeight : 0,
@@ -836,18 +863,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 = React4.useRef(void 0);
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  });
-  return React4.useCallback((...args) => {
-    const fn = handlerRef.current;
-    return fn == null ? void 0 : fn(...args);
-  }, []);
-}
-
-// src/hooks/use-sheet-state.ts
 function useSheetState({
   isOpen,
   onClosed: _onClosed,