react-modal-sheet 5.1.1 → 5.1.2

package/src/sheet.tsx

@@ -1,8 +1,8 @@
 import {
-  type DragHandler,
-  type Transition,
   animate,
+  type DragHandler,
   motion,
+  type Transition,
   useMotionValue,
   useReducedMotion,
   useTransform,
@@ -37,7 +37,7 @@ import {
 } from './snap';
 import { styles } from './styles';
 import { type SheetContextType, type SheetProps } from './types';
-import { applyStyles } from './utils';
+import { applyStyles, waitForElement } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -298,6 +298,13 @@ export const Sheet = forwardRef<any, SheetProps>(
       onOpen: async () => {
         onOpenStart?.();
 
+        /**
+         * This is not very React-y but we need to wait for the sheet
+         * but we need to wait for the sheet to be rendered and visible
+         * before we can measure it and animate it to the initial snap point.
+         */
+        await waitForElement('react-modal-sheet-container');
+
         const initialSnapPoint =
           initialSnap !== undefined ? getSnapPoint(initialSnap) : null;
 

package/src/snap.ts

@@ -43,8 +43,24 @@ export function computeSnapPoints({
   snapPointsProp: number[];
   sheetHeight: number;
 }): SheetSnapPoint[] {
+  if (snapPointsProp[0] !== 0) {
+    console.error(
+      'First snap point should be 0 to ensure the sheet can be fully closed. ' +
+        `Got: [${snapPointsProp.join(', ')}]`
+    );
+    snapPointsProp.unshift(0);
+  }
+
+  if (snapPointsProp[snapPointsProp.length - 1] !== 1) {
+    console.error(
+      'Last snap point should be 1 to ensure the sheet can be fully opened. ' +
+        `Got: [${snapPointsProp.join(', ')}]`
+    );
+    snapPointsProp.push(1);
+  }
+
   if (sheetHeight <= 0) {
-    console.warn(
+    console.error(
       `Sheet height is ${sheetHeight}, cannot compute snap points. ` +
         'Make sure the sheet is mounted and has a valid height.'
     );

package/src/utils.ts

@@ -67,3 +67,24 @@ const isIPad = cached(function () {
 export const isIOS = cached(function () {
   return isIPhone() || isIPad();
 });
+
+/** Wait for an element to be rendered and visible */
+export function waitForElement(
+  className: string,
+  interval = 50,
+  maxAttempts = 20
+) {
+  return new Promise<HTMLElement | null>((resolve) => {
+    let attempts = 0;
+    const timer = setInterval(() => {
+      const element = document.getElementsByClassName(
+        className
+      )[0] as HTMLElement;
+      attempts++;
+      if (element || attempts >= maxAttempts) {
+        clearInterval(timer);
+        resolve(element);
+      }
+    }, interval);
+  });
+}