react-modal-sheet 1.10.1 → 1.11.0

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DragHandlers, MotionValue, MotionProps, AnimationOptions, Spring } from 'framer-motion';
+import { DragHandlers, MotionValue, MotionProps, Transition, Spring, motion } from 'framer-motion';
 export declare type SheetEvents = {
     onOpenStart?: () => void;
     onOpenEnd?: () => void;
@@ -23,7 +23,7 @@ export declare type SheetProps = {
     springConfig?: Omit<Spring, 'type'>;
     disableDrag?: boolean;
     prefersReducedMotion?: boolean;
-} & SheetEvents & React.HTMLAttributes<HTMLDivElement>;
+} & SheetEvents & React.ComponentPropsWithoutRef<typeof motion.div>;
 export declare type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
     children: React.ReactNode;
 };
@@ -52,7 +52,7 @@ export declare type SheetContextType = {
     callbacks: React.MutableRefObject<SheetEvents>;
     dragProps?: SheetDragProps;
     windowHeight: number;
-    animationOptions: AnimationOptions<number>;
+    animationOptions: Transition;
     reduceMotion: boolean;
 };
 declare type ContainerComponent = React.ForwardRefExoticComponent<SheetContainerProps & React.RefAttributes<any>>;

package/package.json

@@ -1,10 +1,11 @@
 {
-  "version": "1.10.1",
+  "version": "1.11.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",
   "author": "Teemu Taskula",
   "repository": "https://github.com/Temzasse/react-modal-sheet",
+  "homepage": "https://temzasse.github.io/react-modal-sheet",
   "keywords": [
     "react",
     "modal",
@@ -32,7 +33,7 @@
     "release": "np"
   },
   "peerDependencies": {
-    "framer-motion": ">=2",
+    "framer-motion": ">=6",
     "react": ">=16"
   },
   "husky": {
@@ -50,19 +51,27 @@
     "yarn": true
   },
   "devDependencies": {
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
     "@types/styled-components": "5.1.26",
     "csstype": "3.1.1",
-    "framer-motion": "8.4.3",
+    "framer-motion": "10.12.16",
+    "history": "5.0.0",
     "husky": "4.2.5",
+    "parcel": "2.8.3",
     "react": "18.2.0",
+    "react-aria": "3.25.0",
     "react-dom": "18.2.0",
+    "react-icons": "4.2.0",
+    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
+    "react-stately": "3.23.0",
+    "react-use": "17.1.1",
     "styled-components": "5.3.6",
     "tsdx": "0.14.1",
-    "typescript": "4.9.4"
+    "typescript": "5.1.3"
   },
   "dependencies": {
-    "@react-aria/utils": "3.14.2"
+    "@react-aria/utils": "3.17.0"
   }
 }

package/src/sheet.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
 import {
   animate,
   AnimatePresence,
-  AnimationOptions,
+  motion,
   PanInfo,
+  Transition,
   useMotionValue,
   useReducedMotion,
+  useTransform,
 } from 'framer-motion';
 
 import {
@@ -59,7 +60,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
     const windowHeight = useWindowHeight();
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
-    const animationOptions: AnimationOptions<number> = reduceMotion
+    const animationOptions: Transition = reduceMotion
       ? { type: 'tween', duration: 0.01 }
       : { type: 'spring', ...springConfig };
 
@@ -68,6 +69,14 @@ const Sheet = React.forwardRef<any, SheetProps>(
     // and after that it is driven by the gestures and/or snapping
     const y = useMotionValue(0);
 
+    const zIndex = useTransform(y, value =>
+      value >= windowHeight ? -1 : 9999999
+    );
+
+    const visibility = useTransform(y, value =>
+      value >= windowHeight ? 'hidden' : 'visible'
+    );
+
     // Keep the callback fns up-to-date so that they can be accessed inside
     // the effect without including them to the dependencies array
     const callbacks = React.useRef({
@@ -150,7 +159,10 @@ const Sheet = React.forwardRef<any, SheetProps>(
           onSnap(snapIndex);
         }
 
-        if (snapTo >= sheetHeight) onClose();
+        const roundedSheetHeight = Math.round(sheetHeight);
+        const shouldClose = snapTo >= roundedSheetHeight;
+
+        if (shouldClose) onClose();
       }
 
       // Reset indicator rotation after dragging
@@ -225,7 +237,11 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     const sheet = (
       <SheetContext.Provider value={context}>
-        <div {...rest} ref={ref} style={{ ...styles.wrapper, ...style }}>
+        <motion.div
+          {...rest}
+          ref={ref}
+          style={{ ...styles.wrapper, zIndex, visibility, ...style }}
+        >
           <AnimatePresence>
             {/* NOTE: AnimatePresence requires us to set keys to children */}
             {isOpen
@@ -234,7 +250,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
                 )
               : null}
           </AnimatePresence>
-        </div>
+        </motion.div>
       </SheetContext.Provider>
     );
 

package/src/styles.ts

@@ -7,7 +7,6 @@ const styles: { [key: string]: CSS.Properties } = {
     bottom: 0,
     left: 0,
     right: 0,
-    zIndex: 9999999,
     overflow: 'hidden',
     pointerEvents: 'none',
   },

package/src/types.tsx

@@ -2,8 +2,9 @@ import {
   DragHandlers,
   MotionValue,
   MotionProps,
-  AnimationOptions,
+  Transition,
   Spring,
+  motion,
 } from 'framer-motion';
 
 export type SheetEvents = {
@@ -33,7 +34,7 @@ export type SheetProps = {
   disableDrag?: boolean;
   prefersReducedMotion?: boolean;
 } & SheetEvents &
-  React.HTMLAttributes<HTMLDivElement>;
+  React.ComponentPropsWithoutRef<typeof motion.div>;
 
 export type SheetContainerProps = Omit<
   CommonProps,
@@ -82,7 +83,7 @@ export type SheetContextType = {
   callbacks: React.MutableRefObject<SheetEvents>;
   dragProps?: SheetDragProps;
   windowHeight: number;
-  animationOptions: AnimationOptions<number>;
+  animationOptions: Transition;
   reduceMotion: boolean;
 };