react-modal-sheet 5.1.0 → 5.1.2

package/README.md

@@ -778,3 +778,41 @@ If you're experiencing issues after upgrading, check the "What's new in v5" sect
 1. **Snap points not working**: Ensure your snap points are in ascending order (`[0, 0.5, 1]` instead of `[1, 0.5, 0]`)
 2. **Scrolling issues**: Remove `Sheet.Scroller` components as scrolling is now handled by `Sheet.Content`
 3. **Detent errors**: Update detent prop values (`"full-height"` → `"default"`, `"content-height"` → `"content"`)
+
+## 🤝 Contributing
+
+If you find a bug or have a feature request please open an issue. If you want to contribute code please open a pull request.
+
+You can build and run the library and the example app locally like this:
+
+1. First install [yalc](https://github.com/wclr/yalc) globally for managing local package dependencies.
+
+```sh
+npm i yalc -g
+```
+
+2. Install deps + configure yalc.
+
+```sh
+npm install
+npm run build
+npm run link
+```
+
+3. Start a watcher for building the library.
+
+```sh
+npm run dev
+```
+
+4. Run dev server for the example app (do this in another terminal).
+
+```sh
+cd example
+npm run dev
+```
+
+5. Open http://localhost:5173/ to see the examples. Now if you make edits to the library code the example app will automatically refresh.
+
+> [!TIP]
+> If you want to test the example app on your phone you can run the example app with `npm run dev:host` and then open your computer's local IP address in your phone's browser. Make sure your phone is on the same network as your computer.

package/dist/index.d.mts

@@ -1,14 +1,12 @@
-import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, CSSProperties, FunctionComponent, HTMLAttributes, RefObject } from 'react';
+import { EasingDefinition, motion, MotionValue } from 'motion/react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, FunctionComponent, HTMLAttributes, RefObject } from 'react';
 
 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'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -37,15 +35,15 @@ type SheetProps = {
     onOpenEnd?: () => void;
     onOpenStart?: () => void;
     onSnap?: (index: number) => void;
-} & MotionDivProps;
+} & MotionCommonProps;
 type SheetContainerProps = MotionCommonProps & CommonProps & {
     children: ReactNode;
 };
-type SheetHeaderProps = MotionDivProps & CommonProps & {
+type SheetHeaderProps = MotionCommonProps & CommonProps & {
     children?: ReactNode;
     disableDrag?: boolean;
 };
-type SheetContentProps = MotionDivProps & CommonProps & {
+type SheetContentProps = MotionCommonProps & CommonProps & {
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
     scrollRef?: RefObject<HTMLDivElement | null>;
@@ -83,4 +81,4 @@ interface SheetRef {
 }
 declare const Sheet: SheetCompound;
 
-export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDetent, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo, type SheetTweenConfig };

package/dist/index.d.ts

@@ -1,14 +1,12 @@
-import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, CSSProperties, FunctionComponent, HTMLAttributes, RefObject } from 'react';
+import { EasingDefinition, motion, MotionValue } from 'motion/react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, FunctionComponent, HTMLAttributes, RefObject } from 'react';
 
 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'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -37,15 +35,15 @@ type SheetProps = {
     onOpenEnd?: () => void;
     onOpenStart?: () => void;
     onSnap?: (index: number) => void;
-} & MotionDivProps;
+} & MotionCommonProps;
 type SheetContainerProps = MotionCommonProps & CommonProps & {
     children: ReactNode;
 };
-type SheetHeaderProps = MotionDivProps & CommonProps & {
+type SheetHeaderProps = MotionCommonProps & CommonProps & {
     children?: ReactNode;
     disableDrag?: boolean;
 };
-type SheetContentProps = MotionDivProps & CommonProps & {
+type SheetContentProps = MotionCommonProps & CommonProps & {
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
     scrollRef?: RefObject<HTMLDivElement | null>;
@@ -83,4 +81,4 @@ interface SheetRef {
 }
 declare const Sheet: SheetCompound;
 
-export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDetent, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo, type SheetTweenConfig };

package/dist/index.js

@@ -188,6 +188,21 @@ var isIPad = cached(function() {
 var isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
+function waitForElement(className, interval = 50, maxAttempts = 20) {
+  return new Promise((resolve) => {
+    let attempts = 0;
+    const timer = setInterval(() => {
+      const element = document.getElementsByClassName(
+        className
+      )[0];
+      attempts++;
+      if (element || attempts >= maxAttempts) {
+        clearInterval(timer);
+        resolve(element);
+      }
+    }, interval);
+  });
+}
 
 // src/SheetBackdrop.tsx
 var isClickable = (props) => !!props.onClick || !!props.onTap;
@@ -968,8 +983,20 @@ function computeSnapPoints({
   snapPointsProp,
   sheetHeight
 }) {
+  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.`
     );
     return [];
@@ -1263,6 +1290,7 @@ var Sheet = React4.forwardRef(
       isOpen,
       onOpen: async () => {
         onOpenStart == null ? void 0 : onOpenStart();
+        await waitForElement("react-modal-sheet-container");
         const initialSnapPoint = initialSnap !== void 0 ? getSnapPoint(initialSnap) : null;
         const yTo = (initialSnapPoint == null ? void 0 : initialSnapPoint.snapValueY) ?? 0;
         await react.animate(y, yTo, animationOptions);