react-modal-sheet 5.2.3 → 5.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.3",
+  "version": "5.3.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",
@@ -57,23 +57,23 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
-    "@biomejs/biome": "2.2.5",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.1",
-    "@vitejs/plugin-react": "5.0.4",
+    "@biomejs/biome": "2.4.5",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.4",
     "husky": "9.1.7",
-    "jsdom": "27.0.0",
-    "motion": "12.23.22",
+    "jsdom": "28.1.0",
+    "motion": "12.35.0",
     "npm-run-all": "4.1.5",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "tsup": "8.5.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsup": "8.5.1",
     "typescript": "5.9.3",
-    "vite": "7.1.9",
-    "vitest": "3.2.4"
+    "vite": "7.3.1",
+    "vitest": "4.0.18"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "prettier": {
     "printWidth": 80,

package/src/SheetHeader.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'motion/react';
 import React, { forwardRef } from 'react';
 
-import { SheetDragIndicator } from './SheetDragIndicator';
 import { useSheetContext } from './context';
 import { useDragConstraints } from './hooks/use-drag-constraints';
+import { SheetDragIndicator } from './SheetDragIndicator';
 import { styles } from './styles';
 import { type SheetHeaderProps } from './types';
 import { applyStyles, mergeRefs } from './utils';

package/src/debug.ts

@@ -4,14 +4,14 @@
  * and hide it when that element is clicked. Create the element if it doesn't exist,
  * and update its content with the payload (any JSON data).
  */
-export function debug(payload: any) {
+export function debug(payload: any, placement: 'top' | 'bottom' = 'bottom') {
   let debugElement = document.getElementById('debug-element');
 
   if (!debugElement) {
     debugElement = document.createElement('div');
     debugElement.id = 'debug-element';
     debugElement.style.position = 'fixed';
-    debugElement.style.bottom = '0';
+    debugElement.style[placement] = '0';
     debugElement.style.left = '0';
     debugElement.style.width = '100%';
     debugElement.style.maxHeight = '50%';

package/src/sheet.tsx

@@ -9,6 +9,7 @@ import {
 } from 'motion/react';
 import React, {
   forwardRef,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -276,6 +277,39 @@ export const Sheet = forwardRef<any, SheetProps>(
       snapTo,
     }));
 
+    /**
+     * If the keyboard is opened while we are in a snap point we need to ensure
+     * the sheet content is not covered by the keyboard due to being at a lower
+     * snap point. We move the sheet up enough to ensure the content is visible
+     * and move it back down when the keyboard closes.
+     */
+    useEffect(() => {
+      if (
+        isOpen &&
+        snapPoints.length > 0 &&
+        avoidKeyboard &&
+        keyboard.isKeyboardOpen
+      ) {
+        const visibleSheetHeight = yInverted.get() - keyboard.keyboardHeight;
+
+        if (visibleSheetHeight <= 0) {
+          const currentY = y.get();
+          const adjustedY = Math.max(
+            // 50 for some extra spacing between keyboard and sheet content
+            currentY - Math.abs(visibleSheetHeight) - 50,
+            0
+          );
+
+          animate(y, adjustedY, animationOptions);
+
+          // When keyboard closes animate back to the original snap point
+          return () => {
+            animate(y, currentY, animationOptions);
+          };
+        }
+      }
+    }, [isOpen, keyboard.isKeyboardOpen]);
+
     useModalEffect({
       y,
       detent,