react-modal-sheet 3.2.0 → 3.4.0

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import React2, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, Children, cloneElement, useLayoutEffect, useCallback, useState, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence } from 'framer-motion';
-import { useLayoutEffect as useLayoutEffect$1, isIOS, chain, getScrollParent } from '@react-aria/utils';
+import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence, transform } from 'framer-motion';
 
 // src/sheet.tsx
 
@@ -16,107 +15,88 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
   ease: "linear",
   duration: 0.01
 };
-var DRAG_CLOSE_THRESHOLD = 0.6;
-var DRAG_VELOCITY_THRESHOLD = 500;
+var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
+var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
 
-// src/utils.ts
-function getClosest(nums, goal) {
-  let closest = nums[0];
-  let minDifference = Math.abs(nums[0] - goal);
-  for (let i = 1; i < nums.length; i++) {
-    const difference = Math.abs(nums[i] - goal);
-    if (difference < minDifference) {
-      closest = nums[i];
-      minDifference = difference;
-    }
-  }
-  return closest;
-}
-function applyRootStyles(rootId) {
-  const body = document.querySelector("body");
-  const root = document.querySelector(`#${rootId}`);
-  if (root) {
-    const p = 24;
-    const h = window.innerHeight;
-    const s = (h - p) / h;
+// src/hooks.tsx
+var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
+function useModalEffect({
+  y,
+  rootId,
+  sheetRef
+}) {
+  const heightRef = useRef(IS_SSR ? 0 : window.innerHeight);
+  function setup() {
+    const root = document.querySelector(`#${rootId}`);
+    const body = document.querySelector("body");
+    if (!root)
+      return;
     body.style.backgroundColor = "#000";
     root.style.overflow = "hidden";
-    root.style.willChange = "transform";
-    root.style.transition = "transform 200ms ease-in-out, border-radius 200ms linear";
-    root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`;
-    root.style.borderTopRightRadius = "10px";
-    root.style.borderTopLeftRadius = "10px";
+    root.style.transitionTimingFunction = "cubic-bezier(0.32, 0.72, 0, 1)";
+    root.style.transitionProperty = "transform, border-radius";
+    root.style.transitionDuration = "0.5s";
+    root.style.transformOrigin = "center top";
   }
-}
-function cleanupRootStyles(rootId) {
-  const body = document.querySelector("body");
-  const root = document.getElementById(rootId);
-  function onTransitionEnd() {
-    root.style.removeProperty("overflow");
-    root.style.removeProperty("will-change");
-    root.style.removeProperty("transition");
-    body.style.removeProperty("background-color");
-    root.removeEventListener("transitionend", onTransitionEnd);
-  }
-  if (root) {
-    root.style.removeProperty("border-top-right-radius");
-    root.style.removeProperty("border-top-left-radius");
-    root.style.removeProperty("transform");
-    root.addEventListener("transitionend", onTransitionEnd);
-  }
-}
-function inDescendingOrder(arr) {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i])
-      return false;
-  }
-  return true;
-}
-function validateSnapTo({
-  snapTo,
-  sheetHeight
-}) {
-  if (snapTo < 0) {
-    console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
-    );
+  function cleanup() {
+    const root = document.querySelector(`#${rootId}`);
+    const body = document.querySelector("body");
+    if (!root)
+      return;
+    setTimeout(() => {
+      body.style.removeProperty("background-color");
+      root.style.removeProperty("overflow");
+      root.style.removeProperty("transition-timing-function");
+      root.style.removeProperty("transition-property");
+      root.style.removeProperty("transition-duration");
+      root.style.removeProperty("transform-origin");
+      root.style.removeProperty("transform");
+      root.style.removeProperty("border-top-right-radius");
+      root.style.removeProperty("border-top-left-radius");
+    }, 100);
   }
-  return Math.max(Math.round(snapTo), 0);
-}
-function mergeRefs(refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref) {
-        ref.current = value;
-      }
-    });
-  };
-}
-function isTouchDevice() {
-  if (typeof window === "undefined")
-    return false;
-  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
-}
-
-// src/hooks.tsx
-var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
-function useModalEffect(isOpen, rootId) {
-  const prevOpen = usePrevious(isOpen);
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (rootId)
+        cleanup();
+    };
+  }, []);
   useEffect(() => {
-    if (rootId && !prevOpen && isOpen) {
-      applyRootStyles(rootId);
-    } else if (rootId && !isOpen && prevOpen) {
-      cleanupRootStyles(rootId);
+    const root = document.querySelector(`#${rootId}`);
+    if (!root)
+      return;
+    function onCompleted() {
+      if (y.get() - 10 >= heightRef.current)
+        cleanup();
     }
-  }, [isOpen, prevOpen]);
-  useEffect(() => {
+    const removeStartListener = y.on("animationStart", () => {
+      var _a;
+      heightRef.current = ((_a = sheetRef.current) == null ? void 0 : _a.offsetHeight) || window.innerHeight;
+      setup();
+    });
+    const removeChangeListener = y.on("change", (value) => {
+      if (root) {
+        const progress = Math.max(0, 1 - value / heightRef.current);
+        const pageWidth = window.innerWidth;
+        const scale = (pageWidth - 16) / pageWidth;
+        const ty = transform(progress, [0, 1], [0, 24]);
+        const s = transform(progress, [0, 1], [1, scale]);
+        const borderRadius = transform(progress, [0, 1], [0, 10]);
+        const inset = "env(safe-area-inset-top)";
+        root.style.transform = `scale(${s}) translate3d(0, calc(${inset} + ${ty}px), 0)`;
+        root.style.borderTopRightRadius = `${borderRadius}px`;
+        root.style.borderTopLeftRadius = `${borderRadius}px`;
+      }
+    });
+    const removeCompleteListener = y.on("animationComplete", onCompleted);
+    const removeCancelListener = y.on("animationCancel", onCompleted);
     return () => {
-      if (rootId && isOpen)
-        cleanupRootStyles(rootId);
+      removeStartListener();
+      removeChangeListener();
+      removeCompleteListener();
+      removeCancelListener();
     };
-  }, [isOpen]);
+  }, [y, rootId]);
 }
 function useEventCallbacks(isOpen, callbacks) {
   const prevOpen = usePrevious(isOpen);
@@ -142,7 +122,10 @@ function useEventCallbacks(isOpen, callbacks) {
   return { handleAnimationComplete };
 }
 function useDimensions() {
-  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
+  const [dimensions, setDimensions] = useState({
+    height: !IS_SSR ? window.innerHeight : 0,
+    width: !IS_SSR ? window.innerWidth : 0
+  });
   useIsomorphicLayoutEffect(() => {
     function handler() {
       setDimensions({
@@ -218,7 +201,120 @@ var useSheetScrollerContext = () => {
     throw Error("Sheet scroller context error");
   return context;
 };
-var visualViewport = typeof window !== "undefined" ? window.visualViewport : void 0;
+
+// src/utils.ts
+function getClosest(nums, goal) {
+  let closest = nums[0];
+  let minDifference = Math.abs(nums[0] - goal);
+  for (let i = 1; i < nums.length; i++) {
+    const difference = Math.abs(nums[i] - goal);
+    if (difference < minDifference) {
+      closest = nums[i];
+      minDifference = difference;
+    }
+  }
+  return closest;
+}
+function inDescendingOrder(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i + 1] > arr[i])
+      return false;
+  }
+  return true;
+}
+function validateSnapTo({
+  snapTo,
+  sheetHeight
+}) {
+  if (snapTo < 0) {
+    console.warn(
+      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
+    );
+  }
+  return Math.max(Math.round(snapTo), 0);
+}
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+function isTouchDevice() {
+  if (typeof window === "undefined")
+    return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+function testPlatform(re) {
+  var _a;
+  return typeof window !== "undefined" && window.navigator != null ? re.test(
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/dot-notation
+    ((_a = window.navigator["userAgentData"]) == null ? void 0 : _a.platform) || window.navigator.platform
+  ) : false;
+}
+function cached(fn) {
+  let res = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+var isMac = cached(function() {
+  return testPlatform(/^Mac/i);
+});
+var isIPhone = cached(function() {
+  return testPlatform(/^iPhone/i);
+});
+var isIPad = cached(function() {
+  return testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1;
+});
+var isIOS = cached(function() {
+  return isIPhone() || isIPad();
+});
+
+// src/use-prevent-scroll.ts
+var KEYBOARD_BUFFER = 24;
+function chain(...callbacks) {
+  return (...args) => {
+    for (const callback of callbacks) {
+      if (typeof callback === "function") {
+        callback(...args);
+      }
+    }
+  };
+}
+var visualViewport = typeof document !== "undefined" && window.visualViewport;
+function isScrollable(node, checkForOverflow) {
+  if (!node) {
+    return false;
+  }
+  const style = window.getComputedStyle(node);
+  let isScrollable2 = /(auto|scroll)/.test(
+    style.overflow + style.overflowX + style.overflowY
+  );
+  if (isScrollable2 && checkForOverflow) {
+    isScrollable2 = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+  }
+  return isScrollable2;
+}
+function getScrollParent(node, checkForOverflow) {
+  let scrollableNode = node;
+  if (isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+  return scrollableNode || document.scrollingElement || document.documentElement;
+}
 var nonTextInputTypes = /* @__PURE__ */ new Set([
   "checkbox",
   "radio",
@@ -234,7 +330,7 @@ var preventScrollCount = 0;
 var restore;
 function usePreventScroll(options = {}) {
   const { isDisabled } = options;
-  useLayoutEffect$1(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isDisabled) {
       return;
     }
@@ -249,7 +345,7 @@ function usePreventScroll(options = {}) {
     return () => {
       preventScrollCount--;
       if (preventScrollCount === 0) {
-        restore();
+        restore == null ? void 0 : restore();
       }
     };
   }, [isDisabled]);
@@ -268,7 +364,7 @@ function preventScrollMobileSafari() {
   let scrollable;
   let lastY = 0;
   const onTouchStart = (e) => {
-    scrollable = getScrollParent(e.target);
+    scrollable = getScrollParent(e.target, true);
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
@@ -278,7 +374,7 @@ function preventScrollMobileSafari() {
     if (scrollable === void 0) {
       return;
     }
-    if (scrollable === document.documentElement || scrollable === document.body) {
+    if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
       e.preventDefault();
       return;
     }
@@ -318,9 +414,7 @@ function preventScrollMobileSafari() {
           } else {
             visualViewport.addEventListener(
               "resize",
-              () => {
-                scrollIntoView(target);
-              },
+              () => scrollIntoView(target),
               { once: true }
             );
           }
@@ -385,7 +479,9 @@ function scrollIntoView(target) {
     if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
       const scrollableTop = scrollable.getBoundingClientRect().top;
       const targetTop = target.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + target.clientHeight) {
+      const targetBottom = target.getBoundingClientRect().bottom;
+      const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+      if (targetBottom > keyboardHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }
     }
@@ -476,7 +572,7 @@ var Sheet = forwardRef(
     children,
     disableScrollLocking = false,
     isOpen,
-    snapPoints,
+    snapPoints: snapPointsProp,
     rootId,
     mountPoint,
     style,
@@ -485,6 +581,8 @@ var Sheet = forwardRef(
     disableDrag = false,
     prefersReducedMotion = false,
     tweenConfig = DEFAULT_TWEEN_CONFIG,
+    dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
+    dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
     ...rest
   }, ref) => {
     const sheetRef = useRef(null);
@@ -496,7 +594,7 @@ var Sheet = forwardRef(
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const y = useMotionValue(0);
+    const y = useMotionValue(windowHeight);
     const zIndex = useTransform(
       y,
       (value) => value + 2 >= windowHeight ? -1 : 9999999
@@ -519,6 +617,7 @@ var Sheet = forwardRef(
         onCloseEnd
       };
     });
+    let snapPoints = snapPointsProp;
     if (snapPoints) {
       snapPoints = snapPoints.map((point) => {
         if (point > 0 && point <= 1)
@@ -550,7 +649,7 @@ var Sheet = forwardRef(
       }
     });
     const onDragEnd = useEffectEvent((_, { velocity }) => {
-      if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
+      if (velocity.y > dragVelocityThreshold) {
         onClose();
       } else {
         const sheetHeight = sheetRef.current.getBoundingClientRect().height;
@@ -564,7 +663,7 @@ var Sheet = forwardRef(
             snapToValues.unshift(0);
           }
           snapTo = getClosest(snapToValues, currentY);
-        } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {
+        } else if (currentY / sheetHeight > dragCloseThreshold) {
           snapTo = sheetHeight;
         }
         snapTo = validateSnapTo({ snapTo, sheetHeight });
@@ -606,7 +705,11 @@ var Sheet = forwardRef(
         }
       }
     }));
-    useModalEffect(isOpen, rootId);
+    useModalEffect({
+      y,
+      rootId,
+      sheetRef
+    });
     usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });
     const dragProps = useMemo(() => {
       const dragProps2 = {
@@ -786,8 +889,8 @@ var SheetScroller = forwardRef(
     const sheetScrollerContext = useSheetScrollerContext();
     function determineDragState(element) {
       const { scrollTop, scrollHeight, clientHeight } = element;
-      const isScrollable = scrollHeight > clientHeight;
-      if (!isScrollable)
+      const isScrollable2 = scrollHeight > clientHeight;
+      if (!isScrollable2)
         return;
       const isAtTop = scrollTop <= 0;
       const isAtBottom = scrollHeight - scrollTop === clientHeight;