react-modal-sheet 1.6.3 → 1.7.0

package/README.md

@@ -40,11 +40,11 @@ npm install framer-motion
 ## Usage
 
 ```jsx
-import React from 'react';
 import Sheet from 'react-modal-sheet';
+import { useState } from 'react';
 
 function Example() {
-  const [isOpen, setOpen] = React.useState(false);
+  const [isOpen, setOpen] = useState(false);
 
   return (
     <>
@@ -77,6 +77,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 | `isOpen`       | yes      |                  | Boolean that indicates whether the sheet is open or not.                                                                                                                                                                          |
 | `onClose`      | yes      |                  | Callback fn that is called when the sheet is closed by the user.                                                                                                                                                                  |
 | `disableDrag`  | no       | false            | Disable drag for the whole sheet.                                                                                                                                                                                                 |
+| `detent`       | no       | `'full-height'`  | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`.       |
 | `onOpenStart`  | no       |                  | Callback fn that is called when the sheet opening animation starts.                                                                                                                                                               |
 | `onOpenEnd`    | no       |                  | Callback fn that is called when the sheet opening animation is completed.                                                                                                                                                         |
 | `onCloseStart` | no       |                  | Callback fn that is called when the sheet closing animation starts.                                                                                                                                                               |
@@ -107,12 +108,12 @@ Spring animation happens when the sheet is opened/closed or when it snaps to a s
 Imperative method that can be accessed via a ref for snapping to a snap point in given index.
 
 ```tsx
-import React from 'react';
 import Sheet, { SheetRef } from 'react-modal-sheet';
+import { useState, useRef } from 'react';
 
 function Example() {
-  const [isOpen, setOpen] = React.useState(false);
-  const ref = React.useRef<SheetRef>();
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef<SheetRef>();
   const snapTo = (i: number) => ref.current?.snapTo(i);
 
   return (
@@ -153,12 +154,12 @@ Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
 
 ```tsx
-import React from 'react';
 import Sheet, { SheetRef } from 'react-modal-sheet';
+import { useState, useRef } from 'react';
 
 function Example() {
-  const [isOpen, setOpen] = React.useState(false);
-  const ref = React.useRef<SheetRef>();
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef<SheetRef>();
 
   return (
     <>
@@ -189,6 +190,36 @@ function Example() {
 }
 ```
 
+### Detents
+
+By default the sheet will take the full height of the page minus top padding and safe area inset. If you want the sheet height to be based on it's content you can pass `detent="content-height"` prop to the `Sheet` component:
+
+```tsx
+function Example() {
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <Sheet
+      isOpen={isOpen}
+      onClose={() => setOpen(false)}
+      detent="content-height"
+    >
+      <Sheet.Container>
+        <Sheet.Content>
+          <div style={{ height: 200 }}>Some content</div>
+        </Sheet.Content>
+      </Sheet.Container>
+    </Sheet>
+  );
+}
+```
+
+If the sheet height changes dynamically the sheet will grow until it hits the maximum full height after which it becomes scrollable.
+
+It is possible to use snap points with `detent="content-height"` **but** the snap points are restricted by the content height. For example if one of the snap points is 800px and the sheet height is only 700px then snapping to the 800px snap point would only snap to 700px since otherwise the sheet would become detached from the bottom.
+
+> ℹ️ If you are wondering where the term `detent` comes from it's from Apple's [Human Interface Guidelines](<[detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados)>).
+
 ## Compound Components
 
 ### `Sheet.Container`
@@ -300,9 +331,9 @@ You can add your own styles or override the default sheet styles via the exposed
 #### CSS-in-JS
 
 ```jsx
-import React from 'react';
-import styled from 'styled-components';
 import Sheet from 'react-modal-sheeet';
+import styled from 'styled-components';
+import { useState } from 'react';
 
 const CustomSheet = styled(Sheet)`
   .react-modal-sheet-backdrop {
@@ -323,7 +354,7 @@ const CustomSheet = styled(Sheet)`
 `;
 
 function Example() {
-  const [isOpen, setOpen] = React.useState(false);
+  const [isOpen, setOpen] = useState(false);
 
   return (
     <>
@@ -351,8 +382,8 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
 > ℹ️ The example was built by following the React Aria's [useDialog](https://react-spectrum.adobe.com/react-aria/useDialog.html) documentation.
 
 ```jsx
-import React from 'react';
 import Sheet from 'react-modal-sheet';
+import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import {
@@ -366,7 +397,7 @@ import {
 
 const A11yExample = () => {
   const sheetState = useOverlayTriggerState({});
-  const openButtonRef = React.useRef(null);
+  const openButtonRef = useRef(null);
   const openButton = useButton({ onPress: sheetState.open }, openButtonRef);
 
   return (
@@ -387,14 +418,14 @@ const A11yExample = () => {
 };
 
 const SheetComp = ({ sheetState }) => {
-  const containerRef = React.useRef(null);
+  const containerRef = useRef(null);
   const dialog = useDialog({}, containerRef);
   const overlay = useOverlay(
     { onClose: sheetState.close, isOpen: true, isDismissable: true },
     containerRef
   );
 
-  const closeButtonRef = React.useRef(null);
+  const closeButtonRef = useRef(null);
   const closeButton = useButton(
     { onPress: sheetState.close, 'aria-label': 'Close sheet' },
     closeButtonRef

package/dist/SheetBackdrop.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const SheetBackdrop: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "onViewportBoxUpdate" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onLayoutAnimationComplete" | "onUnmount" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "drag" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDragStart" | "onDragEnd" | "onDrag" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "custom" | "inherit"> & React.RefAttributes<any>>;
+declare const SheetBackdrop: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onUnmount" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileInView" | "onViewportEnter" | "onViewportLeave" | "viewport" | "drag" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDragStart" | "onDragEnd" | "onDrag" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "layoutDependency" | "layoutScroll" | "custom" | "inherit"> & React.RefAttributes<any>>;
 export default SheetBackdrop;

package/dist/SheetContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const SheetContent: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "initial" | "style" | "transformTemplate" | "transformValues" | "animate" | "exit" | "variants" | "transition" | "onViewportBoxUpdate" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onLayoutAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragTransition" | "dragControls" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "custom" | "inherit"> & {
+declare const SheetContent: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "initial" | "animate" | "exit" | "variants" | "transition" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onUnmount" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileInView" | "onViewportEnter" | "onViewportLeave" | "viewport" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "layoutDependency" | "layoutScroll" | "custom" | "inherit"> & {
     children?: React.ReactNode;
     disableDrag?: boolean | undefined;
 } & React.RefAttributes<any>>;

package/dist/SheetHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const SheetHeader: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "initial" | "style" | "transformTemplate" | "transformValues" | "animate" | "exit" | "variants" | "transition" | "onViewportBoxUpdate" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onLayoutAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragTransition" | "dragControls" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "custom" | "inherit"> & {
+declare const SheetHeader: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "initial" | "animate" | "exit" | "variants" | "transition" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onUnmount" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileInView" | "onViewportEnter" | "onViewportLeave" | "viewport" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "layoutDependency" | "layoutScroll" | "custom" | "inherit"> & {
     children?: React.ReactNode;
     disableDrag?: boolean | undefined;
 } & React.RefAttributes<any>>;

package/dist/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
+export declare const IS_SSR: boolean;
+export declare const DEFAULT_SPRING_CONFIG: {
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+export declare const DRAG_CLOSE_THRESHOLD = 0.6;
+export declare const DRAG_VELOCITY_THRESHOLD = 500;

package/dist/hooks.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { SheetEvents } from './types';
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export declare const useModalEffect: (isOpen: boolean, rootId?: string | undefined) => void;
 export declare const useEventCallbacks: (isOpen: boolean, callbacks: React.MutableRefObject<SheetEvents>) => {
     handleAnimationComplete: () => void;
 };
+export declare function useWindowHeight(): number;
+export declare function usePrevious<T>(state: T): T | undefined;
+export declare function useEvent<T extends (...args: any[]) => any>(handler: T): T;

package/dist/react-modal-sheet.cjs.development.js

@@ -43,12 +43,21 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var isSSR = typeof window === 'undefined';
-var getClosest = function getClosest(nums, goal) {
+var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
+var IS_SSR = typeof window === 'undefined';
+var DEFAULT_SPRING_CONFIG = {
+  stiffness: 300,
+  damping: 30,
+  mass: 0.2
+};
+var DRAG_CLOSE_THRESHOLD = 0.6;
+var DRAG_VELOCITY_THRESHOLD = 500;
+
+function getClosest(nums, goal) {
   return nums.reduce(function (prev, curr) {
     return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
   });
-};
+}
 var highlightId = 'react-modal-sheet-highlight';
 function applyRootStyles(rootId) {
   var body = document.querySelector('body');
@@ -110,40 +119,25 @@ function cleanupRootStyles(rootId) {
     root.addEventListener('transitionend', onTransitionEnd);
   }
 }
-var useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
-function useWindowHeight() {
-  var _useState = React.useState(0),
-      windowHeight = _useState[0],
-      setWindowHeight = _useState[1];
-
-  useIsomorphicLayoutEffect(function () {
-    var updateHeight = function updateHeight() {
-      return setWindowHeight(window.innerHeight);
-    };
-
-    window.addEventListener('resize', updateHeight);
-    updateHeight();
-    return function () {
-      return window.removeEventListener('resize', updateHeight);
-    };
-  }, []);
-  return windowHeight;
-}
-var inDescendingOrder = function inDescendingOrder(arr) {
+function inDescendingOrder(arr) {
   for (var i = 0; i < arr.length; i++) {
     if (arr[i + 1] > arr[i]) return false;
   }
 
   return true;
-};
+}
+function validateSnapTo(_ref) {
+  var snapTo = _ref.snapTo,
+      sheetHeight = _ref.sheetHeight;
 
-var SheetContext = /*#__PURE__*/React.createContext(undefined);
-var useSheetContext = function useSheetContext() {
-  var context = React.useContext(SheetContext);
-  if (!context) throw Error('Sheet context error');
-  return context;
-};
+  if (snapTo < 0) {
+    console.warn("Snap point is out of bounds. Sheet height is " + sheetHeight + " but snap point is " + (sheetHeight + Math.abs(snapTo)) + ".");
+  }
+
+  return Math.max(Math.round(snapTo), 0);
+}
 
+var useIsomorphicLayoutEffect = IS_SSR ? React.useEffect : React.useLayoutEffect;
 var useModalEffect = function useModalEffect(isOpen, rootId) {
   var prevOpen = usePrevious(isOpen); // Automatically apply the iOS modal effect to the body when sheet opens/closes
 
@@ -190,13 +184,54 @@ var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
     handleAnimationComplete: handleAnimationComplete
   };
 };
+function useWindowHeight() {
+  var _React$useState = React.useState(0),
+      windowHeight = _React$useState[0],
+      setWindowHeight = _React$useState[1];
+
+  useIsomorphicLayoutEffect(function () {
+    var updateHeight = function updateHeight() {
+      return setWindowHeight(window.innerHeight);
+    };
 
-var usePrevious = function usePrevious(state) {
+    window.addEventListener('resize', updateHeight);
+    updateHeight();
+    return function () {
+      return window.removeEventListener('resize', updateHeight);
+    };
+  }, []);
+  return windowHeight;
+}
+function usePrevious(state) {
   var ref = React.useRef();
   React.useEffect(function () {
     ref.current = state;
   });
   return ref.current;
+} // Userland version of the `useEvent` React hook:
+// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+
+function useEvent(handler) {
+  var handlerRef = React.useRef();
+  useIsomorphicLayoutEffect(function () {
+    handlerRef.current = handler;
+  });
+  return React.useCallback(function () {
+    var fn = handlerRef.current;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return fn == null ? void 0 : fn.apply(void 0, args);
+  }, []);
+}
+
+var SheetContext = /*#__PURE__*/React.createContext(undefined);
+var useSheetContext = function useSheetContext() {
+  var context = React.useContext(SheetContext);
+  if (!context) throw Error('Sheet context error');
+  return context;
 };
 
 var styles = {
@@ -259,56 +294,62 @@ var styles = {
 };
 
 var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      isOpen = _ref.isOpen,
-      onClose = _ref.onClose,
-      onOpenStart = _ref.onOpenStart,
+  var onOpenStart = _ref.onOpenStart,
       onOpenEnd = _ref.onOpenEnd,
+      onClose = _ref.onClose,
       onCloseStart = _ref.onCloseStart,
       onCloseEnd = _ref.onCloseEnd,
       onSnap = _ref.onSnap,
+      children = _ref.children,
+      isOpen = _ref.isOpen,
       snapPoints = _ref.snapPoints,
+      detent = _ref.detent,
       _ref$initialSnap = _ref.initialSnap,
       initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
       rootId = _ref.rootId,
       mountPoint = _ref.mountPoint,
       _ref$springConfig = _ref.springConfig,
-      springConfig = _ref$springConfig === void 0 ? {
-    stiffness: 300,
-    damping: 30,
-    mass: 0.2
-  } : _ref$springConfig,
+      springConfig = _ref$springConfig === void 0 ? DEFAULT_SPRING_CONFIG : _ref$springConfig,
       _ref$disableDrag = _ref.disableDrag,
       disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
       style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "onClose", "onOpenStart", "onOpenEnd", "onCloseStart", "onCloseEnd", "onSnap", "snapPoints", "initialSnap", "rootId", "mountPoint", "springConfig", "disableDrag", "style"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "isOpen", "snapPoints", "detent", "initialSnap", "rootId", "mountPoint", "springConfig", "disableDrag", "style"]);
 
   var sheetRef = React.useRef(null);
-  var callbacks = React.useRef({
-    onOpenStart: onOpenStart,
-    onOpenEnd: onOpenEnd,
-    onCloseStart: onCloseStart,
-    onCloseEnd: onCloseEnd
-  }); // prettier-ignore
-
   var indicatorRotation = framerMotion.useMotionValue(0);
   var windowHeight = useWindowHeight(); // 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
   // and after that it is driven by the gestures and/or snapping
 
-  var y = framerMotion.useMotionValue(0);
+  var y = framerMotion.useMotionValue(0); // Keep the callback fns up-to-date so that they can be accessed inside
+  // the effect without including them to the dependencies array
+
+  var callbacks = React.useRef({
+    onOpenStart: onOpenStart,
+    onOpenEnd: onOpenEnd,
+    onCloseStart: onCloseStart,
+    onCloseEnd: onCloseEnd
+  });
+  useIsomorphicLayoutEffect(function () {
+    callbacks.current = {
+      onOpenStart: onOpenStart,
+      onOpenEnd: onOpenEnd,
+      onCloseStart: onCloseStart,
+      onCloseEnd: onCloseEnd
+    };
+  });
 
   if (snapPoints) {
     // Convert negative / percentage snap points to absolute values
     snapPoints = snapPoints.map(function (point) {
-      if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
-
+      // Percentage values e.g. between 0.0 and 1.0
+      if (point > 0 && point <= 1) return Math.round(point * windowHeight);
       return point < 0 ? windowHeight + point : point; // negative values
     });
     console.assert(inDescendingOrder(snapPoints) || windowHeight === 0, "Snap points need to be in descending order got: [" + snapPoints + "]");
   }
 
-  var handleDrag = React.useCallback(function (_, _ref2) {
+  var onDrag = useEvent(function (_, _ref2) {
     var delta = _ref2.delta;
     // Update drag indicator rotation based on drag velocity
     var velocity = y.getVelocity();
@@ -316,22 +357,42 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (velocity < 0) indicatorRotation.set(-10); // Make sure user cannot drag beyond the top of the sheet
 
     y.set(Math.max(y.get() + delta.y, 0));
-  }, []); // eslint-disable-line
-
-  var handleDragEnd = React.useCallback(function (_, _ref3) {
+  });
+  var onDragEnd = useEvent(function (_, _ref3) {
     var velocity = _ref3.velocity;
 
-    if (velocity.y > 500) {
+    if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
       // User flicked the sheet down
       onClose();
     } else {
       var sheetEl = sheetRef.current;
-      var contentHeight = sheetEl.getBoundingClientRect().height;
-      var snapTo = Math.round(snapPoints ? getClosest(snapPoints.map(function (p) {
-        return contentHeight - p;
-      }), y.get()) // prettier-ignore
-      : y.get() / contentHeight > 0.6 // Close if dragged over 60%
-      ? contentHeight : 0); // Update the spring value so that the sheet is animated to the snap point
+      var sheetHeight = sheetEl.getBoundingClientRect().height;
+      var currentY = y.get();
+      var snapTo = 0;
+
+      if (snapPoints) {
+        var snapToValues = snapPoints.map(function (p) {
+          return sheetHeight - p;
+        }).filter(function (p) {
+          return p >= 0;
+        }); // negative values can occur with `content-height` detent
+        // Allow snapping to the top of the sheet if detent is set to `content-height`
+
+        if (detent === 'content-height' && !snapToValues.includes(0)) {
+          snapToValues.unshift(0);
+        } // Get the closest snap point
+
+
+        snapTo = getClosest(snapToValues, currentY);
+      } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {
+        // Close if dragged over enough far
+        snapTo = sheetHeight;
+      }
+
+      snapTo = validateSnapTo({
+        snapTo: snapTo,
+        sheetHeight: sheetHeight
+      }); // Update the spring value so that the sheet is animated to the snap point
 
       framerMotion.animate(y, snapTo, _extends({
         type: 'spring'
@@ -344,22 +405,11 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onSnap(snapIndex);
       }
 
-      if (snapTo >= contentHeight) onClose();
+      if (snapTo >= sheetHeight) onClose();
     } // Reset indicator rotation after dragging
 
 
     indicatorRotation.set(0);
-  }, [onClose, onSnap] // eslint-disable-line
-  ); // Keep the callback fns up-to-date so that they can be accessed inside
-  // the effect without including them to the dependencies array
-
-  React.useEffect(function () {
-    callbacks.current = {
-      onOpenStart: onOpenStart,
-      onOpenEnd: onOpenEnd,
-      onCloseStart: onCloseStart,
-      onCloseEnd: onCloseEnd
-    };
   }); // Trigger onSnap callback when sheet is opened or closed
 
   React.useEffect(function () {
@@ -375,13 +425,17 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         var sheetEl = sheetRef.current;
 
         if (snapPoints && snapPoints[snapIndex] !== undefined && sheetEl !== null) {
-          var contentHeight = sheetEl.getBoundingClientRect().height;
-          var snapTo = contentHeight - snapPoints[snapIndex];
+          var sheetHeight = sheetEl.getBoundingClientRect().height;
+          var snapPoint = snapPoints[snapIndex];
+          var snapTo = validateSnapTo({
+            snapTo: sheetHeight - snapPoint,
+            sheetHeight: sheetHeight
+          });
           framerMotion.animate(y, snapTo, _extends({
             type: 'spring'
           }, springConfig));
           if (onSnap) onSnap(snapIndex);
-          if (snapTo >= contentHeight) onClose();
+          if (snapTo >= sheetHeight) onClose();
         }
       }
     };
@@ -392,47 +446,48 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   overlays.usePreventScroll({
     isDisabled: !isOpen
   });
-  var dragProps = disableDrag ? {} : {
-    drag: 'y',
-    dragElastic: 0,
-    dragConstraints: {
-      top: 0,
-      bottom: 0
-    },
-    dragMomentum: false,
-    onDrag: handleDrag,
-    onDragEnd: handleDragEnd
-  };
+  var dragProps = React.useMemo(function () {
+    var dragProps = {
+      drag: 'y',
+      dragElastic: 0,
+      dragConstraints: {
+        top: 0,
+        bottom: 0
+      },
+      dragMomentum: false,
+      onDrag: onDrag,
+      onDragEnd: onDragEnd
+    };
+    return disableDrag ? undefined : dragProps;
+  }, [disableDrag]); // eslint-disable-line
+
   var context = {
     y: y,
     sheetRef: sheetRef,
     isOpen: isOpen,
     initialSnap: initialSnap,
     snapPoints: snapPoints,
+    detent: detent,
     indicatorRotation: indicatorRotation,
     callbacks: callbacks,
     dragProps: dragProps,
     windowHeight: windowHeight,
     springConfig: springConfig
   };
-
-  var wrapperProps = _extends({}, rest, {
-    ref: ref,
-    style: _extends({}, styles.wrapper, style)
-  });
-
   var sheet = React.createElement(SheetContext.Provider, {
     value: context
-  }, React.createElement("div", Object.assign({}, wrapperProps), React.createElement(framerMotion.AnimatePresence, null, isOpen ? React.Children.map(children, function (child, i) {
+  }, React.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    style: _extends({}, styles.wrapper, style)
+  }), React.createElement(framerMotion.AnimatePresence, null, isOpen ? React.Children.map(children, function (child, i) {
     return React.cloneElement(child, {
       key: "sheet-child-" + i
     });
   }) : null)));
-  if (isSSR) return sheet;
+  if (IS_SSR) return sheet;
   return ReactDOM.createPortal(sheet, mountPoint != null ? mountPoint : document.body);
 });
 
-var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
 var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$style = _ref.style,
@@ -448,20 +503,24 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       initialSnap = _useSheetContext$init === void 0 ? 0 : _useSheetContext$init,
       sheetRef = _useSheetContext.sheetRef,
       windowHeight = _useSheetContext.windowHeight,
-      springConfig = _useSheetContext.springConfig;
+      springConfig = _useSheetContext.springConfig,
+      _useSheetContext$dete = _useSheetContext.detent,
+      detent = _useSheetContext$dete === void 0 ? 'full-height' : _useSheetContext$dete;
 
   var _useEventCallbacks = useEventCallbacks(isOpen, callbacks),
       handleAnimationComplete = _useEventCallbacks.handleAnimationComplete;
 
   var initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
-  var h = snapPoints ? snapPoints[0] : null;
-  var sheetHeight = h ? "min(" + h + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
+  var maxSnapHeight = snapPoints ? snapPoints[0] : null;
+  var height = maxSnapHeight !== null ? "min(" + maxSnapHeight + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
     ref: mergeRefs([sheetRef, ref]),
     className: "react-modal-sheet-container",
-    style: _extends({}, styles.container, {
-      height: sheetHeight
-    }, style, {
+    style: _extends({}, styles.container, style, detent === 'full-height' && {
+      height: height
+    }, detent === 'content-height' && {
+      maxHeight: height
+    }, {
       y: y
     }),
     initial: {
@@ -482,11 +541,8 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$disableDrag = _ref.disableDrag,
-      disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "disableDrag", "style"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style"]);
 
   var _useSheetContext = useSheetContext(),
       dragProps = _useSheetContext.dragProps;
@@ -495,16 +551,13 @@ var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: "react-modal-sheet-content",
     style: _extends({}, styles.content, style)
-  }, disableDrag ? {} : dragProps), children);
+  }, dragProps), children);
 });
 
 var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$disableDrag = _ref.disableDrag,
-      disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "disableDrag", "style"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style"]);
 
   var _useSheetContext = useSheetContext(),
       indicatorRotation = _useSheetContext.indicatorRotation,
@@ -519,7 +572,7 @@ var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
     ref: ref,
     style: _extends({}, styles.headerWrapper, style)
-  }, disableDrag ? {} : dragProps), children || React.createElement("div", {
+  }, dragProps), children || React.createElement("div", {
     className: "react-modal-sheet-header",
     style: styles.header
   }, React.createElement(framerMotion.motion.span, {