react-modal-sheet 5.1.0 → 5.1.2

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/types.tsx

@@ -21,14 +21,13 @@ export type SheetDetent = 'default' | 'full' | 'content';
 
 type CommonProps = {
   className?: string;
-  style?: CSSProperties;
   unstyled?: boolean;
 };
 
-type MotionCommonProps = Omit<MotionProps, 'initial' | 'animate' | 'exit'> &
-  CommonProps;
-
-type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<
+  ComponentPropsWithoutRef<typeof motion.div>,
+  'initial' | 'animate' | 'exit'
+>;
 
 export interface SheetTweenConfig {
   ease: EasingDefinition;
@@ -59,20 +58,20 @@ export type SheetProps = {
   onOpenEnd?: () => void;
   onOpenStart?: () => void;
   onSnap?: (index: number) => void;
-} & MotionDivProps;
+} & MotionCommonProps;
 
 export type SheetContainerProps = MotionCommonProps &
   CommonProps & {
     children: ReactNode;
   };
 
-export type SheetHeaderProps = MotionDivProps &
+export type SheetHeaderProps = MotionCommonProps &
   CommonProps & {
     children?: ReactNode;
     disableDrag?: boolean;
   };
 
-export type SheetContentProps = MotionDivProps &
+export type SheetContentProps = MotionCommonProps &
   CommonProps & {
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);

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);
+  });
+}