react-modal-sheet 1.7.0 → 1.8.1

package/src/SheetContent.tsx

@@ -6,8 +6,9 @@ import { useSheetContext } from './context';
 import styles from './styles';
 
 const SheetContent = React.forwardRef<any, SheetDraggableProps>(
-  ({ children, style, ...rest }, ref) => {
+  ({ children, style, disableDrag, ...rest }, ref) => {
     const { dragProps } = useSheetContext();
+    const _dragProps = disableDrag ? undefined : dragProps;
 
     return (
       <motion.div
@@ -15,7 +16,7 @@ const SheetContent = React.forwardRef<any, SheetDraggableProps>(
         ref={ref}
         className="react-modal-sheet-content"
         style={{ ...styles.content, ...style }}
-        {...dragProps}
+        {..._dragProps}
       >
         {children}
       </motion.div>

package/src/SheetHeader.tsx

@@ -6,8 +6,9 @@ import { useSheetContext } from './context';
 import styles from './styles';
 
 const SheetHeader = React.forwardRef<any, SheetDraggableProps>(
-  ({ children, style, ...rest }, ref) => {
+  ({ children, style, disableDrag, ...rest }, ref) => {
     const { indicatorRotation, dragProps } = useSheetContext();
+    const _dragProps = disableDrag ? undefined : dragProps;
 
     const indicator1Transform = useTransform(
       indicatorRotation,
@@ -24,7 +25,7 @@ const SheetHeader = React.forwardRef<any, SheetDraggableProps>(
         {...rest}
         ref={ref}
         style={{ ...styles.headerWrapper, ...style }}
-        {...dragProps}
+        {..._dragProps}
       >
         {children || (
           <div className="react-modal-sheet-header" style={styles.header}>

package/src/sheet.tsx

@@ -5,8 +5,10 @@ import { usePreventScroll } from '@react-aria/overlays';
 import {
   animate,
   AnimatePresence,
+  AnimationOptions,
   PanInfo,
   useMotionValue,
+  useReducedMotion,
 } from 'framer-motion';
 
 import {
@@ -40,13 +42,14 @@ const Sheet = React.forwardRef<any, SheetProps>(
       children,
       isOpen,
       snapPoints,
-      detent,
-      initialSnap = 0,
       rootId,
       mountPoint,
+      style,
+      detent = 'full-height',
+      initialSnap = 0,
       springConfig = DEFAULT_SPRING_CONFIG,
       disableDrag = false,
-      style,
+      prefersReducedMotion = false,
       ...rest
     },
     ref
@@ -54,6 +57,11 @@ const Sheet = React.forwardRef<any, SheetProps>(
     const sheetRef = React.useRef<any>(null);
     const indicatorRotation = useMotionValue(0);
     const windowHeight = useWindowHeight();
+    const shouldReduceMotion = useReducedMotion();
+    const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
+    const animationOptions: AnimationOptions<number> = reduceMotion
+      ? { type: 'tween', duration: 0.01 }
+      : { type: 'spring', ...springConfig };
 
     // NOTE: the inital value for `y` doesn't matter since it is overwritten by
     // the value driven by the `AnimatePresence` component when the sheet is opened
@@ -134,7 +142,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
         snapTo = validateSnapTo({ snapTo, sheetHeight });
 
         // Update the spring value so that the sheet is animated to the snap point
-        animate(y, snapTo, { type: 'spring', ...springConfig });
+        animate(y, snapTo, animationOptions);
 
         if (snapPoints && onSnap) {
           const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
@@ -173,8 +181,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
             sheetHeight,
           });
 
-          animate(y, snapTo, { type: 'spring', ...springConfig });
-
+          animate(y, snapTo, animationOptions);
           if (onSnap) onSnap(snapIndex);
           if (snapTo >= sheetHeight) onClose();
         }
@@ -211,7 +218,8 @@ const Sheet = React.forwardRef<any, SheetProps>(
       callbacks,
       dragProps,
       windowHeight,
-      springConfig,
+      animationOptions,
+      reduceMotion,
     };
 
     const sheet = (

package/src/types.tsx

@@ -3,6 +3,7 @@ import {
   MotionValue,
   useSpring,
   MotionProps,
+  AnimationOptions,
 } from 'framer-motion';
 
 export type SheetEvents = {
@@ -26,6 +27,7 @@ export type SheetProps = {
   initialSnap?: number; // index of snap points array
   springConfig?: Parameters<typeof useSpring>[1];
   disableDrag?: boolean;
+  prefersReducedMotion?: boolean;
 } & SheetEvents &
   React.HTMLAttributes<HTMLDivElement>;
 
@@ -69,13 +71,14 @@ export type SheetContextType = {
   sheetRef: React.MutableRefObject<any>;
   isOpen: boolean;
   snapPoints: SheetProps['snapPoints'];
-  detent?: SheetDetent;
+  detent: SheetDetent;
   initialSnap: SheetProps['initialSnap'];
   indicatorRotation: MotionValue<number>;
   callbacks: React.MutableRefObject<SheetEvents>;
   dragProps?: SheetDragProps;
   windowHeight: number;
-  springConfig: Parameters<typeof useSpring>[1];
+  animationOptions: AnimationOptions<number>;
+  reduceMotion: boolean;
 };
 
 type ContainerComponent = React.ForwardRefExoticComponent<