react-modal-sheet 5.6.0 → 5.7.0

package/dist/index.mjs

@@ -402,12 +402,7 @@ function useModalEffect({
       }
     }
     progress = Math.max(0, Math.min(1, progress));
-    const pageWidth = window.innerWidth;
-    updateModalEffect(rootId, {
-      scale: transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]),
-      translateY: transform(progress, [0, 1], [0, 24 + insetTop]),
-      borderRadius: transform(progress, [0, 1], [0, 10])
-    });
+    updateModalEffect(rootId, { progress, insetTop });
   });
   const handleYComplete = useStableCallback(() => {
     if (!rootId) return;
@@ -435,8 +430,14 @@ function useModalEffect({
   }, [rootId]);
 }
 function setupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.transformOrigin = "center top";
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
   body.style.backgroundColor = "#000000";
   root.style.overflow = "hidden";
@@ -446,16 +447,42 @@ function setupModalEffect(rootId) {
   root.style.transformOrigin = "center top";
 }
 function updateModalEffect(rootId, opts) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
-  const { scale, translateY, borderRadius } = opts;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  const { progress, insetTop } = opts;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    const sheetWidth = sheet.offsetWidth;
+    const sheetTop = sheet.offsetTop;
+    const scaleEnd2 = (sheetWidth - 16) / sheetWidth;
+    const scale2 = transform(progress, [0, 1], [1, scaleEnd2]);
+    const translateYEnd = clamp(scaleEnd2 * (24 + insetTop) - sheetTop, -10, 0);
+    const translateY2 = transform(progress, [0, 1], [0, translateYEnd]);
+    sheet.style.scale = `${scale2}`;
+    sheet.style.translate = `0 ${translateY2}px`;
+    return;
+  }
+  const root = target.element;
+  const pageWidth = window.innerWidth;
+  const scaleEnd = (pageWidth - 16) / pageWidth;
+  const scale = transform(progress, [0, 1], [1, scaleEnd]);
+  const translateY = transform(progress, [0, 1], [0, 24 + insetTop]);
+  const borderRadius = transform(progress, [0, 1], [0, 10]);
   root.style.transform = `scale(${scale}) translate3d(0, ${translateY}px, 0)`;
   root.style.borderTopRightRadius = `${borderRadius}px`;
   root.style.borderTopLeftRadius = `${borderRadius}px`;
 }
 function cleanupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.removeProperty("transform-origin");
+    sheet.style.removeProperty("scale");
+    sheet.style.removeProperty("translate");
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
   body.style.removeProperty("background-color");
   root.style.removeProperty("overflow");
@@ -467,6 +494,19 @@ function cleanupModalEffect(rootId) {
   root.style.removeProperty("border-top-right-radius");
   root.style.removeProperty("border-top-left-radius");
 }
+function getModalEffectTarget(rootId) {
+  const root = document.getElementById(rootId);
+  if (!root) return null;
+  const sheetRoot = root.closest(".react-modal-sheet-root");
+  if (sheetRoot) {
+    const container = sheetRoot.querySelector(
+      ".react-modal-sheet-container"
+    );
+    if (!container) return null;
+    return { type: "sheet", element: container };
+  }
+  return { type: "root", element: root };
+}
 
 // src/hooks/use-prevent-scroll.ts
 var KEYBOARD_BUFFER = 24;
@@ -1044,7 +1084,7 @@ var Sheet = forwardRef(
     onDragEnd: onDragEndProp,
     ...rest
   }, ref) => {
-    const [sheetBoundsRef, sheetBounds] = useMeasure();
+    const [sheetBoundsRef, sheetBounds] = useMeasure({ offsetSize: true });
     const sheetRef = useRef(null);
     const sheetHeight = Math.round(sheetBounds.height);
     const [currentSnap, setCurrentSnap] = useState(initialSnap);