react-modal-sheet 5.2.2 → 5.3.0

package/src/SheetBackdrop.tsx

@@ -14,7 +14,6 @@ export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
     const clickable = isClickable(rest);
     const Comp = clickable ? motion.button : motion.div;
     const pointerEvents = clickable ? 'auto' : 'none';
-
     const isUnstyled = unstyled ?? sheetContext.unstyled;
 
     const backdropStyle: MotionStyle = {
@@ -25,14 +24,14 @@ export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
 
     return (
       <Comp
-        {...(rest as any)}
-        ref={ref}
-        className={`react-modal-sheet-backdrop ${className}`}
-        style={backdropStyle}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 1 }}
+        {...(rest as any)}
+        ref={ref}
+        className={`react-modal-sheet-backdrop ${className}`}
+        style={backdropStyle}
       />
     );
   }

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,

package/src/types.tsx

@@ -23,10 +23,9 @@ type CommonProps = {
   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'>;
 
 export interface SheetTweenConfig {
   ease: EasingDefinition;
@@ -79,7 +78,7 @@ export type SheetContentProps = MotionCommonProps &
     scrollStyle?: MotionProps['style'];
   };
 
-export type SheetBackdropProps = MotionCommonProps & CommonProps;
+export type SheetBackdropProps = MotionDivProps & CommonProps;
 
 export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps;