react-modal-sheet 5.2.2 → 5.3.0

package/README.md

@@ -425,10 +425,11 @@ function KeyboardExample() {
 
 The keyboard avoidance feature:
 
-- Uses the `env(keyboard-inset-height)` from [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API) and fallbacks to [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) and custom `keyboard-inset-height` CSS environment variable
-- Works automatically on mobile devices with virtual keyboard support
-- Applies dynamic padding to keep content visible when the keyboard opens
-- Disables drag gestures while the keyboard is open to prevent glitches
+- Uses the `env(keyboard-inset-height)` from [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API) and fallbacks to [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) and custom `keyboard-inset-height` CSS environment variable.
+- Works automatically on mobile devices with virtual keyboard support.
+- Applies dynamic padding to keep content visible when the keyboard opens.
+- Disables drag gestures while the keyboard is open to prevent glitches.
+- When using snap points if the sheet is at a snap point that would be covered by the keyboard, **the sheet will be automatically moved up to ensure the content is visible and then moved back down when the keyboard closes.**
 
 If you need to disable keyboard avoidance, set `avoidKeyboard={false}`.
 

package/dist/index.d.mts

@@ -6,7 +6,8 @@ type CommonProps = {
     className?: string;
     unstyled?: boolean;
 };
-type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -50,7 +51,7 @@ type SheetContentProps = MotionCommonProps & CommonProps & {
     scrollClassName?: string;
     scrollStyle?: MotionProps['style'];
 };
-type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetBackdropProps = MotionDivProps & CommonProps;
 type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
 type SheetStateInfo = {
     scrollPosition?: 'top' | 'bottom' | 'middle';

package/dist/index.d.ts

@@ -6,7 +6,8 @@ type CommonProps = {
     className?: string;
     unstyled?: boolean;
 };
-type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
@@ -50,7 +51,7 @@ type SheetContentProps = MotionCommonProps & CommonProps & {
     scrollClassName?: string;
     scrollStyle?: MotionProps['style'];
 };
-type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetBackdropProps = MotionDivProps & CommonProps;
 type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
 type SheetStateInfo = {
     scrollPosition?: 'top' | 'bottom' | 'middle';

package/dist/index.js

@@ -221,14 +221,14 @@ var SheetBackdrop = React4.forwardRef(
     return /* @__PURE__ */ React4__default.default.createElement(
       Comp,
       {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: backdropStyle,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        transition: { duration: 1 }
+        transition: { duration: 1 },
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle
       }
     );
   }
@@ -1307,6 +1307,23 @@ var Sheet = React4.forwardRef(
       height: sheetHeight,
       snapTo
     }));
+    React4.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
+          );
+          react.animate(y, adjustedY, animationOptions);
+          return () => {
+            react.animate(y, currentY, animationOptions);
+          };
+        }
+      }
+    }, [isOpen, keyboard.isKeyboardOpen]);
     useModalEffect({
       y,
       detent,