react-modal-sheet 4.0.2 → 4.2.0

package/dist/index.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var React2 = require('react');
 var reactDom = require('react-dom');
+var React2 = require('react');
 var react = require('motion/react');
+var motion = require('motion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -24,182 +25,33 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
 
-// src/hooks.tsx
-var useIsomorphicLayoutEffect = IS_SSR ? React2.useEffect : React2.useLayoutEffect;
-function useModalEffect({
-  y,
-  rootId,
-  sheetRef
-}) {
-  const heightRef = React2.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.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 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);
+// src/utils.ts
+function getSheetHeight(sheetRef) {
+  const sheetEl = sheetRef.current;
+  if (!sheetEl) {
+    console.warn(
+      "Sheet height is not available because the sheet element is not mounted yet."
+    );
+    return 0;
   }
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (rootId) cleanup();
-    };
-  }, []);
-  React2.useEffect(() => {
-    const root = document.querySelector(`#${rootId}`);
-    if (!root) return;
-    function onCompleted() {
-      if (y.get() - 10 >= heightRef.current) cleanup();
-    }
-    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 = react.transform(progress, [0, 1], [0, 24]);
-        const s = react.transform(progress, [0, 1], [1, scale]);
-        const borderRadius = react.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 () => {
-      removeStartListener();
-      removeChangeListener();
-      removeCompleteListener();
-      removeCancelListener();
-    };
-  }, [y, rootId]);
-}
-function useEventCallbacks(isOpen, callbacks) {
-  const prevOpen = usePrevious(isOpen);
-  const didOpen = React2.useRef(false);
-  const handleAnimationComplete = React2.useCallback(() => {
-    var _a, _b, _c, _d;
-    if (!didOpen.current) {
-      (_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
-      didOpen.current = true;
-    } else {
-      (_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
-      didOpen.current = false;
-    }
-  }, [isOpen, prevOpen]);
-  React2.useEffect(() => {
-    var _a, _b, _c, _d;
-    if (!prevOpen && isOpen) {
-      (_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
-    } else if (!isOpen && prevOpen) {
-      (_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
-    }
-  }, [isOpen, prevOpen]);
-  return { handleAnimationComplete };
+  return Math.round(sheetEl.getBoundingClientRect().height);
 }
-function useDimensions() {
-  const [dimensions, setDimensions] = React2.useState({
-    height: !IS_SSR ? window.innerHeight : 0,
-    width: !IS_SSR ? window.innerWidth : 0
-  });
-  useIsomorphicLayoutEffect(() => {
-    function handler() {
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth
-      });
+function getSnapPoints({
+  snapPointsProp,
+  sheetHeight
+}) {
+  const snapPointValues = snapPointsProp.map((point) => {
+    if (point > 0 && point <= 1) {
+      return Math.round(point * sheetHeight);
     }
-    handler();
-    window.addEventListener("resize", handler);
-    return () => {
-      window.removeEventListener("resize", handler);
-    };
-  }, []);
-  return dimensions;
-}
-function usePrevious(state) {
-  const ref = React2.useRef(void 0);
-  React2.useEffect(() => {
-    ref.current = state;
+    return point < 0 ? sheetHeight + point : point;
   });
-  return ref.current;
-}
-function useEffectEvent(handler) {
-  const handlerRef = React2.useRef(void 0);
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  });
-  return React2.useCallback((...args) => {
-    const fn = handlerRef.current;
-    return fn == null ? void 0 : fn(...args);
-  }, []);
-}
-var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
-function useDragConstraints() {
-  const constraintsRef = React2.useRef(null);
-  const onMeasureDragConstraints = React2.useCallback(() => constraints, []);
-  return { constraintsRef, onMeasureDragConstraints };
-}
-var SheetContext = React2.createContext(
-  void 0
-);
-var useSheetContext = () => {
-  const context = React2.useContext(SheetContext);
-  if (!context) throw new Error("Sheet context error");
-  return context;
-};
-var SheetScrollerContext = React2.createContext(void 0);
-function SheetScrollerContextProvider({
-  children
-}) {
-  const sheetContext = useSheetContext();
-  const [disableDrag, setDisableDrag] = React2.useState(!!sheetContext.disableDrag);
-  function setDragEnabled() {
-    if (!sheetContext.disableDrag) setDisableDrag(false);
-  }
-  function setDragDisabled() {
-    if (!disableDrag) setDisableDrag(true);
-  }
-  return /* @__PURE__ */ React2__default.default.createElement(
-    SheetScrollerContext.Provider,
-    {
-      value: { disableDrag, setDragEnabled, setDragDisabled }
-    },
-    children
+  console.assert(
+    inDescendingOrder(snapPointValues) || sheetHeight === 0,
+    `Snap points need to be in descending order got: [${snapPointsProp.join(", ")}]`
   );
+  return snapPointValues;
 }
-var useSheetScrollerContext = () => {
-  const context = React2.useContext(SheetScrollerContext);
-  if (!context) throw new Error("Sheet scroller context error");
-  return context;
-};
-
-// src/utils.ts
 function getClosest(nums, goal) {
   let closest = nums[0];
   let minDifference = Math.abs(nums[0] - goal);
@@ -218,6 +70,21 @@ function inDescendingOrder(arr) {
   }
   return true;
 }
+function getSnapY({
+  sheetHeight,
+  snapPoints,
+  snapIndex
+}) {
+  const snapPoint = snapPoints[snapIndex];
+  if (snapPoint === void 0) {
+    console.warn(
+      `Invalid snap index ${snapIndex}. Snap points are: [${snapPoints.join(", ")}]`
+    );
+    return null;
+  }
+  const y = validateSnapTo({ snapTo: sheetHeight - snapPoint, sheetHeight });
+  return y;
+}
 function validateSnapTo({
   snapTo,
   sheetHeight
@@ -241,7 +108,7 @@ function mergeRefs(refs) {
   };
 }
 function isTouchDevice() {
-  if (typeof window === "undefined") return false;
+  if (IS_SSR) return false;
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
 }
 function testPlatform(re) {
@@ -267,14 +134,265 @@ 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;
+  return testPlatform(/^iPad/i) || isMac() && navigator.maxTouchPoints > 1;
 });
 var isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
+var SheetContext = React2.createContext(
+  void 0
+);
+function useSheetContext() {
+  const context = React2.useContext(SheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
+var SheetScrollerContext = React2.createContext(void 0);
+function SheetScrollerContextProvider({
+  children
+}) {
+  const sheetContext = useSheetContext();
+  const [disableDrag, setDisableDrag] = React2.useState(!!sheetContext.disableDrag);
+  function setDragEnabled() {
+    if (!sheetContext.disableDrag) setDisableDrag(false);
+  }
+  function setDragDisabled() {
+    if (!disableDrag) setDisableDrag(true);
+  }
+  return /* @__PURE__ */ React2__default.default.createElement(
+    SheetScrollerContext.Provider,
+    {
+      value: { disableDrag, setDragEnabled, setDragDisabled }
+    },
+    children
+  );
+}
+function useSheetScrollerContext() {
+  const context = React2.useContext(SheetScrollerContext);
+  if (!context) throw new Error("Sheet scroller context error");
+  return context;
+}
+
+// src/styles.ts
+var styles = {
+  wrapper: {
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "hidden",
+    pointerEvents: "none"
+  },
+  backdrop: {
+    zIndex: 1,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    touchAction: "none",
+    border: "none",
+    WebkitTapHighlightColor: "transparent"
+  },
+  container: {
+    zIndex: 2,
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    width: "100%",
+    backgroundColor: "#fff",
+    borderTopRightRadius: "8px",
+    borderTopLeftRadius: "8px",
+    boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)",
+    display: "flex",
+    flexDirection: "column",
+    pointerEvents: "auto"
+  },
+  headerWrapper: {
+    width: "100%"
+  },
+  header: {
+    height: "40px",
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  indicator: {
+    width: "18px",
+    height: "4px",
+    borderRadius: "99px",
+    backgroundColor: "#ddd"
+  },
+  content: {
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0px",
+    position: "relative"
+  },
+  scroller: {
+    height: "100%",
+    overflowY: "auto"
+  }
+};
+var useIsomorphicLayoutEffect = IS_SSR ? React2.useEffect : React2.useLayoutEffect;
+function useSafeAreaInsets() {
+  const [insets] = React2.useState(() => {
+    const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
+    if (IS_SSR) return fallback;
+    const root = document.querySelector(":root");
+    if (!root) return fallback;
+    root.style.setProperty("--rms-sat", "env(safe-area-inset-top)");
+    root.style.setProperty("--rms-sal", "env(safe-area-inset-left)");
+    root.style.setProperty("--rms-sar", "env(safe-area-inset-right)");
+    root.style.setProperty("--rms-sab", "env(safe-area-inset-bottom)");
+    const computedStyle = getComputedStyle(root);
+    const sat = getComputedValue(computedStyle, "--rms-sat");
+    const sal = getComputedValue(computedStyle, "--rms-sal");
+    const sar = getComputedValue(computedStyle, "--rms-sar");
+    const sab = getComputedValue(computedStyle, "--rms-sab");
+    root.style.removeProperty("--rms-sat");
+    root.style.removeProperty("--rms-sal");
+    root.style.removeProperty("--rms-sar");
+    root.style.removeProperty("--rms-sab");
+    return { top: sat, left: sal, right: sar, bottom: sab };
+  });
+  return insets;
+}
+function getComputedValue(computed, property) {
+  const strValue = computed.getPropertyValue(property).replace("px", "").trim();
+  return parseInt(strValue, 10) || 0;
+}
+
+// src/hooks/use-modal-effect.ts
+function useModalEffect({
+  y,
+  rootId,
+  sheetRef,
+  snapPointsProp,
+  startThreshold
+}) {
+  const insetTop = useSafeAreaInsets().top;
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (rootId) cleanupModalEffect(rootId);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!rootId) return;
+    const root = document.querySelector(`#${rootId}`);
+    if (!root) return;
+    let sheetHeight = 0;
+    const removeStartListener = y.on("animationStart", () => {
+      sheetHeight = getSheetHeight(sheetRef);
+      setupModalEffect(rootId);
+    });
+    const removeChangeListener = y.on("change", (yValue) => {
+      if (!root) return;
+      let progress = Math.max(0, 1 - yValue / sheetHeight);
+      const snapPoints = snapPointsProp ? getSnapPoints({ snapPointsProp, sheetHeight }) : void 0;
+      const snapThresholdPoint = snapPoints && snapPoints.length > 1 ? snapPoints[1] : void 0;
+      if (snapThresholdPoint !== void 0) {
+        const snapThresholdValue = sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
+        if (yValue <= snapThresholdValue) {
+          progress = (snapThresholdValue - yValue) / snapThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+      if (startThreshold !== void 0) {
+        const startThresholdValue = sheetHeight - Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
+        if (yValue <= startThresholdValue) {
+          progress = (startThresholdValue - yValue) / startThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+      progress = Math.max(0, Math.min(1, progress));
+      const pageWidth = window.innerWidth;
+      const ty = motion.transform(progress, [0, 1], [0, 24 + insetTop]);
+      const s = motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
+      const borderRadius = motion.transform(progress, [0, 1], [0, 10]);
+      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
+      root.style.borderTopRightRadius = `${borderRadius}px`;
+      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    });
+    function onCompleted() {
+      if (y.get() - 5 >= sheetHeight) {
+        cleanupModalEffect(rootId);
+      }
+    }
+    const removeCompleteListener = y.on("animationComplete", onCompleted);
+    const removeCancelListener = y.on("animationCancel", onCompleted);
+    return () => {
+      removeStartListener();
+      removeChangeListener();
+      removeCompleteListener();
+      removeCancelListener();
+    };
+  }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
+}
+function setupModalEffect(rootId) {
+  const root = document.querySelector(`#${rootId}`);
+  const body = document.querySelector("body");
+  if (!root) return;
+  body.style.backgroundColor = "#000";
+  root.style.overflow = "hidden";
+  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 cleanupModalEffect(rootId) {
+  const root = document.querySelector(`#${rootId}`);
+  const body = document.querySelector("body");
+  if (!root) return;
+  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");
+}
+function useDimensions() {
+  const [dimensions, setDimensions] = React2.useState(() => ({
+    height: !IS_SSR ? window.innerHeight : 0,
+    width: !IS_SSR ? window.innerWidth : 0
+  }));
+  useIsomorphicLayoutEffect(() => {
+    function handler() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth
+      });
+    }
+    handler();
+    window.addEventListener("resize", handler);
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+  return dimensions;
+}
+function useStableCallback(handler) {
+  const handlerRef = React2.useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return React2.useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn == null ? void 0 : fn(...args);
+  }, []);
+}
 
-// src/use-prevent-scroll.ts
+// src/hooks/use-prevent-scroll.ts
 var KEYBOARD_BUFFER = 24;
 function chain(...callbacks) {
   return (...args) => {
@@ -490,74 +608,6 @@ function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
 
-// src/styles.ts
-var styles = {
-  wrapper: {
-    position: "fixed",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "hidden",
-    pointerEvents: "none"
-  },
-  backdrop: {
-    zIndex: 1,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    touchAction: "none",
-    // Disable iOS body scrolling
-    border: "none",
-    WebkitTapHighlightColor: "transparent"
-  },
-  container: {
-    zIndex: 2,
-    position: "absolute",
-    left: 0,
-    bottom: 0,
-    width: "100%",
-    backgroundColor: "#fff",
-    borderTopRightRadius: "8px",
-    borderTopLeftRadius: "8px",
-    boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)",
-    display: "flex",
-    flexDirection: "column",
-    pointerEvents: "auto"
-  },
-  headerWrapper: {
-    width: "100%"
-  },
-  header: {
-    height: "40px",
-    width: "100%",
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  indicator: {
-    width: "18px",
-    height: "4px",
-    borderRadius: "99px",
-    backgroundColor: "#ddd"
-  },
-  content: {
-    flexGrow: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "0px",
-    position: "relative"
-  },
-  scroller: {
-    height: "100%",
-    overflowY: "auto"
-  }
-};
-
 // src/sheet.tsx
 var Sheet = React2.forwardRef(
   ({
@@ -572,6 +622,7 @@ var Sheet = React2.forwardRef(
     isOpen,
     snapPoints: snapPointsProp,
     rootId,
+    modalEffectRootId,
     mountPoint,
     style,
     detent = "full-height",
@@ -581,6 +632,7 @@ var Sheet = React2.forwardRef(
     tweenConfig = DEFAULT_TWEEN_CONFIG,
     dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
     dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+    modalEffectThreshold,
     ...rest
   }, ref) => {
     const sheetRef = React2.useRef(null);
@@ -615,26 +667,13 @@ var Sheet = React2.forwardRef(
         onCloseEnd
       };
     });
-    let snapPoints = snapPointsProp;
-    if (snapPoints) {
-      snapPoints = snapPoints.map((point) => {
-        if (point > 0 && point <= 1) return Math.round(point * windowHeight);
-        return point < 0 ? windowHeight + point : point;
-      });
-      console.assert(
-        inDescendingOrder(snapPoints) || windowHeight === 0,
-        `Snap points need to be in descending order got: [${snapPoints.join(
-          ", "
-        )}]`
-      );
-    }
-    const onDrag = useEffectEvent((_, { delta }) => {
+    const onDrag = useStableCallback((_, { delta }) => {
       const velocity = y.getVelocity();
       if (velocity > 0) indicatorRotation.set(10);
       if (velocity < 0) indicatorRotation.set(-10);
       y.set(Math.max(y.get() + delta.y, 0));
     });
-    const onDragStart = useEffectEvent(() => {
+    const onDragStart = useStableCallback(() => {
       const focusedElement = document.activeElement;
       if (!focusedElement || !sheetRef.current) return;
       const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
@@ -642,67 +681,91 @@ var Sheet = React2.forwardRef(
         focusedElement.blur();
       }
     });
-    const onDragEnd = useEffectEvent((_, { velocity }) => {
+    const onDragEnd = useStableCallback((_, { velocity }) => {
       if (velocity.y > dragVelocityThreshold) {
         onClose();
       } else {
-        const sheetHeight = sheetRef.current.getBoundingClientRect().height;
+        const sheetHeight = getSheetHeight(sheetRef);
         const currentY = y.get();
-        let snapTo = 0;
+        let yTo = 0;
+        const snapPoints = snapPointsProp ? getSnapPoints({ snapPointsProp, sheetHeight }) : void 0;
         if (snapPoints) {
-          const snapToValues = snapPoints.map(
+          const snapInverse = snapPoints.map(
             (p) => sheetHeight - Math.min(p, sheetHeight)
           );
-          if (detent === "content-height" && !snapToValues.includes(0)) {
-            snapToValues.unshift(0);
+          if (detent === "content-height" && !snapInverse.includes(0)) {
+            snapInverse.unshift(0);
           }
-          snapTo = getClosest(snapToValues, currentY);
+          const snapTo = getClosest(snapInverse, currentY);
+          const snapIndex = snapInverse.indexOf(snapTo);
+          yTo = validateSnapTo({
+            snapTo: getClosest(snapInverse, currentY),
+            sheetHeight
+          });
+          onSnap == null ? void 0 : onSnap(snapIndex);
         } else if (currentY / sheetHeight > dragCloseThreshold) {
-          snapTo = sheetHeight;
+          yTo = sheetHeight;
         }
-        snapTo = validateSnapTo({ snapTo, sheetHeight });
-        react.animate(y, snapTo, animationOptions);
-        if (snapPoints && onSnap) {
-          const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
-          const snapIndex = snapPoints.indexOf(
-            getClosest(snapPoints, snapValue)
-          );
-          onSnap(snapIndex);
+        react.animate(y, yTo, animationOptions);
+        if (yTo + 1 >= sheetHeight) {
+          onClose();
         }
-        const roundedSheetHeight = Math.round(sheetHeight);
-        const shouldClose = snapTo + 2 >= roundedSheetHeight;
-        if (shouldClose) onClose();
       }
       indicatorRotation.set(0);
     });
     React2.useEffect(() => {
-      if (!snapPoints || !onSnap) return;
-      const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
-      onSnap(snapIndex);
+      if (snapPointsProp && onSnap) {
+        onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
+      }
+    }, [isOpen]);
+    React2.useEffect(() => {
+      if (!isOpen) return;
+      let yTo = 0;
+      if (snapPointsProp) {
+        const snapIndex = initialSnap;
+        const sheetHeight = getSheetHeight(sheetRef);
+        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
+        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        if (ySnap !== null) {
+          yTo = ySnap;
+        }
+      }
+      react.animate(y, yTo, animationOptions);
     }, [isOpen]);
     React2.useImperativeHandle(ref, () => ({
       y,
       snapTo: (snapIndex) => {
-        const sheetEl = sheetRef.current;
-        if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl) {
-          const sheetHeight = sheetEl.getBoundingClientRect().height;
-          const snapPoint = snapPoints[snapIndex];
-          const snapTo = validateSnapTo({
-            snapTo: sheetHeight - snapPoint,
-            sheetHeight
-          });
-          react.animate(y, snapTo, animationOptions);
-          if (onSnap) onSnap(snapIndex);
-          if (snapTo >= sheetHeight) onClose();
+        if (!snapPointsProp) {
+          console.warn("Snapping is not possible without `snapPoints` prop.");
+          return;
+        }
+        const sheetHeight = getSheetHeight(sheetRef);
+        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
+        const ySnap = getSnapY({ sheetHeight, snapPoints, snapIndex });
+        if (ySnap !== null) {
+          react.animate(y, ySnap, animationOptions);
+          onSnap == null ? void 0 : onSnap(snapIndex);
+          if (ySnap + 1 >= sheetHeight) {
+            onClose();
+          }
         }
       }
     }));
+    if (rootId) {
+      console.warn(
+        "The `rootId` prop is deprecated and will be removed in the next major version. Use `modalEffectRootId` instead."
+      );
+    }
     useModalEffect({
       y,
-      rootId,
-      sheetRef
+      sheetRef,
+      snapPointsProp,
+      rootId: rootId || modalEffectRootId,
+      startThreshold: modalEffectThreshold
+    });
+    usePreventScroll({
+      isDisabled: disableScrollLocking || !isOpen
     });
-    usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });
     const dragProps = React2.useMemo(() => {
       const dragProps2 = {
         drag: "y",
@@ -720,7 +783,6 @@ var Sheet = React2.forwardRef(
       sheetRef,
       isOpen,
       initialSnap,
-      snapPoints,
       detent,
       indicatorRotation,
       callbacks,
@@ -747,38 +809,60 @@ var Sheet = React2.forwardRef(
   }
 );
 Sheet.displayName = "Sheet";
+function useEventCallbacks(isOpen, callbacks) {
+  const prevOpen = usePrevious(isOpen);
+  const didOpen = React2.useRef(false);
+  const handleAnimationComplete = React2.useCallback(() => {
+    var _a, _b, _c, _d;
+    if (!didOpen.current) {
+      (_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
+      didOpen.current = true;
+    } else {
+      (_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
+      didOpen.current = false;
+    }
+  }, [isOpen, prevOpen]);
+  React2.useEffect(() => {
+    var _a, _b, _c, _d;
+    if (!prevOpen && isOpen) {
+      (_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
+    } else if (!isOpen && prevOpen) {
+      (_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
+    }
+  }, [isOpen, prevOpen]);
+  return { handleAnimationComplete };
+}
+function usePrevious(state) {
+  const ref = React2.useRef(void 0);
+  React2.useEffect(() => {
+    ref.current = state;
+  });
+  return ref.current;
+}
+
+// src/SheetContainer.tsx
 var SheetContainer = React2.forwardRef(
-  ({ children, style = {}, className = "", ...rest }, ref) => {
+  ({ children, style, className = "", ...rest }, ref) => {
     const {
       y,
       isOpen,
       callbacks,
-      snapPoints,
-      initialSnap = 0,
       sheetRef,
       windowHeight,
       detent,
       animationOptions
     } = useSheetContext();
     const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);
-    const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
-    const maxSnapHeight = snapPoints ? snapPoints[0] : null;
-    const height = maxSnapHeight !== null ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
+    const height = detent === "full-height" ? MAX_HEIGHT : void 0;
+    const maxHeight = detent === "content-height" ? MAX_HEIGHT : void 0;
     return /* @__PURE__ */ React2__default.default.createElement(
       react.motion.div,
       {
         ...rest,
         ref: mergeRefs([sheetRef, ref]),
         className: `react-modal-sheet-container ${className}`,
-        style: {
-          ...styles.container,
-          ...style,
-          ...detent === "full-height" && { height },
-          ...detent === "content-height" && { maxHeight: height },
-          y
-        },
+        style: { ...styles.container, height, maxHeight, ...style, y },
         initial: { y: windowHeight },
-        animate: { y: initialY, transition: animationOptions },
         exit: { y: windowHeight, transition: animationOptions },
         onAnimationComplete: handleAnimationComplete
       },
@@ -787,6 +871,14 @@ var SheetContainer = React2.forwardRef(
   }
 );
 SheetContainer.displayName = "SheetContainer";
+var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
+function useDragConstraints() {
+  const constraintsRef = React2.useRef(null);
+  const onMeasureDragConstraints = React2.useCallback(() => constraints, []);
+  return { constraintsRef, onMeasureDragConstraints };
+}
+
+// src/SheetContent.tsx
 var SheetContent = React2.forwardRef(
   ({ children, style, disableDrag, className = "", ...rest }, ref) => {
     const sheetContext = useSheetContext();