react-modal-sheet 1.10.2 → 1.11.1

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.2",
+  "version": "1.11.1",
   "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({
@@ -123,9 +132,9 @@ const Sheet = React.forwardRef<any, SheetProps>(
         let snapTo = 0;
 
         if (snapPoints) {
-          const snapToValues = snapPoints
-            .map(p => sheetHeight - p)
-            .filter(p => p >= 0); // negative values can occur with `content-height` detent
+          const snapToValues = snapPoints.map(
+            p => sheetHeight - Math.min(p, sheetHeight)
+          );
 
           // Allow snapping to the top of the sheet if detent is set to `content-height`
           if (detent === 'content-height' && !snapToValues.includes(0)) {
@@ -228,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
@@ -237,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;
 };
 

package/src/utils.ts

@@ -1,9 +1,18 @@
 import * as React from 'react';
 
 export function getClosest(nums: number[], goal: number) {
-  return nums.reduce((prev, curr) => {
-    return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
-  });
+  let closest = nums[0];
+  let minDifference = Math.abs(nums[0] - goal);
+
+  for (let i = 1; i < nums.length; i++) {
+    const difference = Math.abs(nums[i] - goal);
+    if (difference < minDifference) {
+      closest = nums[i];
+      minDifference = difference;
+    }
+  }
+
+  return closest;
 }
 
 const highlightId = 'react-modal-sheet-highlight';