react-modal-sheet 2.0.0 → 2.2.0

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

@@ -8,35 +8,29 @@ var framerMotion = require('framer-motion');
 var utils = require('@react-aria/utils');
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -56,22 +50,18 @@ var DRAG_VELOCITY_THRESHOLD = 500;
 function getClosest(nums, goal) {
   var closest = nums[0];
   var minDifference = Math.abs(nums[0] - goal);
-
   for (var i = 1; i < nums.length; i++) {
     var difference = Math.abs(nums[i] - goal);
-
     if (difference < minDifference) {
       closest = nums[i];
       minDifference = difference;
     }
   }
-
   return closest;
 }
 function applyRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.querySelector("#" + rootId);
-
   if (root) {
     var p = 24;
     var h = window.innerHeight;
@@ -81,7 +71,6 @@ function applyRootStyles(rootId) {
     root.style.willChange = 'transform';
     root.style.transition = 'transform 200ms ease-in-out, border-radius 200ms linear';
     root.style.transform = "translateY(calc(env(safe-area-inset-top) + " + p / 2 + "px)) scale(" + s + ")"; // prettier-ignore
-
     root.style.borderTopRightRadius = '10px';
     root.style.borderTopLeftRadius = '10px';
   }
@@ -89,7 +78,6 @@ function applyRootStyles(rootId) {
 function cleanupRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.getElementById(rootId);
-
   function onTransitionEnd() {
     root.style.removeProperty('overflow');
     root.style.removeProperty('will-change');
@@ -97,13 +85,12 @@ function cleanupRootStyles(rootId) {
     body.style.removeProperty('background-color');
     root.removeEventListener('transitionend', onTransitionEnd);
   }
-
   if (root) {
     // Start animating back
     root.style.removeProperty('border-top-right-radius');
     root.style.removeProperty('border-top-left-radius');
-    root.style.removeProperty('transform'); // Remove temp properties after animation is finished
-
+    root.style.removeProperty('transform');
+    // Remove temp properties after animation is finished
     root.addEventListener('transitionend', onTransitionEnd);
   }
 }
@@ -111,17 +98,14 @@ 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;
-
+    sheetHeight = _ref.sheetHeight;
   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);
 }
 function mergeRefs(refs) {
@@ -142,8 +126,8 @@ function isTouchDevice() {
 
 var useIsomorphicLayoutEffect = IS_SSR ? React.useEffect : React.useLayoutEffect;
 function useModalEffect(isOpen, rootId) {
-  var prevOpen = usePrevious(isOpen); // Automatically apply the iOS modal effect to the body when sheet opens/closes
-
+  var prevOpen = usePrevious(isOpen);
+  // Automatically apply the iOS modal effect to the body when sheet opens/closes
   React.useEffect(function () {
     if (rootId && !prevOpen && isOpen) {
       applyRootStyles(rootId);
@@ -152,51 +136,47 @@ function useModalEffect(isOpen, rootId) {
     }
   }, [isOpen, prevOpen]); // eslint-disable-line
   // Make sure to cleanup modal styles on unmount
-
   React.useEffect(function () {
     return function () {
       if (rootId && isOpen) cleanupRootStyles(rootId);
     };
   }, [isOpen]); // eslint-disable-line
 }
+
 function useEventCallbacks(isOpen, callbacks) {
   var prevOpen = usePrevious(isOpen);
-  var didOpen = React.useRef(false); // Because of AnimatePrecence we don't have access to latest isOpen value
+  var didOpen = React.useRef(false);
+  // Because of AnimatePrecence we don't have access to latest isOpen value
   // so we need to read and write to a ref to determine if we are
   // opening or closing the sheet
-
   var handleAnimationComplete = React.useCallback(function () {
     if (!didOpen.current) {
-      callbacks.current.onOpenEnd == null ? void 0 : callbacks.current.onOpenEnd();
+      callbacks.current.onOpenEnd == null || callbacks.current.onOpenEnd();
       didOpen.current = true;
     } else {
-      callbacks.current.onCloseEnd == null ? void 0 : callbacks.current.onCloseEnd();
+      callbacks.current.onCloseEnd == null || callbacks.current.onCloseEnd();
       didOpen.current = false;
     }
   }, [isOpen, prevOpen]); // eslint-disable-line
-
   React.useEffect(function () {
     if (!prevOpen && isOpen) {
-      callbacks.current.onOpenStart == null ? void 0 : callbacks.current.onOpenStart();
+      callbacks.current.onOpenStart == null || callbacks.current.onOpenStart();
     } else if (!isOpen && prevOpen) {
-      callbacks.current.onCloseStart == null ? void 0 : callbacks.current.onCloseStart();
+      callbacks.current.onCloseStart == null || callbacks.current.onCloseStart();
     }
   }, [isOpen, prevOpen]); // eslint-disable-line
-
   return {
     handleAnimationComplete: handleAnimationComplete
   };
 }
 function useWindowHeight() {
   var _React$useState = React.useState(0),
-      windowHeight = _React$useState[0],
-      setWindowHeight = _React$useState[1];
-
+    windowHeight = _React$useState[0],
+    setWindowHeight = _React$useState[1];
   useIsomorphicLayoutEffect(function () {
     var updateHeight = function updateHeight() {
       return setWindowHeight(window.innerHeight);
     };
-
     window.addEventListener('resize', updateHeight);
     updateHeight();
     return function () {
@@ -211,9 +191,9 @@ function usePrevious(state) {
     ref.current = state;
   });
   return ref.current;
-} // Userland version of the `useEvent` React hook:
+}
+// 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 () {
@@ -221,14 +201,31 @@ function useEvent(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);
   }, []);
 }
+// This is a hacky way to fix a bug in framer-motion where the drag
+// constraints are not updated when window is resized.
+// https://github.com/framer/motion/issues/1659
+var constraints = {
+  bottom: 0,
+  top: 0,
+  left: 0,
+  right: 0
+};
+function useDragConstraints() {
+  var constraintsRef = React.useRef(null);
+  var onMeasureDragConstraints = React.useCallback(function () {
+    return constraints;
+  }, []);
+  return {
+    constraintsRef: constraintsRef,
+    onMeasureDragConstraints: onMeasureDragConstraints
+  };
+}
 
 var SheetContext = /*#__PURE__*/React.createContext(undefined);
 var useSheetContext = function useSheetContext() {
@@ -240,19 +237,15 @@ var SheetScrollerContext = /*#__PURE__*/React.createContext(undefined);
 function SheetScrollerContextProvider(_ref) {
   var children = _ref.children;
   var sheetContext = useSheetContext();
-
   var _React$useState = React.useState(!!sheetContext.disableDrag),
-      disableDrag = _React$useState[0],
-      setDisableDrag = _React$useState[1];
-
+    disableDrag = _React$useState[0],
+    setDisableDrag = _React$useState[1];
   function setDragEnabled() {
     if (!sheetContext.disableDrag) setDisableDrag(false);
   }
-
   function setDragDisabled() {
     if (!disableDrag) setDisableDrag(true);
   }
-
   return React.createElement(SheetScrollerContext.Provider, {
     value: {
       disableDrag: disableDrag,
@@ -268,11 +261,11 @@ var useSheetScrollerContext = function useSheetScrollerContext() {
 };
 
 // Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts
-
-var visualViewport = typeof window !== 'undefined' && window.visualViewport; // HTML input types that do not cause the software keyboard to appear.
-
-var nonTextInputTypes = /*#__PURE__*/new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']); // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
-
+// @ts-ignore
+var visualViewport = typeof window !== 'undefined' && window.visualViewport;
+// HTML input types that do not cause the software keyboard to appear.
+var nonTextInputTypes = /*#__PURE__*/new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 var preventScrollCount = 0;
 var restore;
 /**
@@ -280,21 +273,17 @@ var restore;
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-
 function usePreventScroll(options) {
   if (options === void 0) {
     options = {};
   }
-
   var _options = options,
-      isDisabled = _options.isDisabled;
+    isDisabled = _options.isDisabled;
   utils.useLayoutEffect(function () {
     if (isDisabled) {
       return;
     }
-
     preventScrollCount++;
-
     if (preventScrollCount === 1) {
       if (utils.isIOS()) {
         restore = preventScrollMobileSafari();
@@ -302,21 +291,20 @@ function usePreventScroll(options) {
         restore = preventScrollStandard();
       }
     }
-
     return function () {
       preventScrollCount--;
-
       if (preventScrollCount === 0) {
         restore();
       }
     };
   }, [isDisabled]);
-} // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+}
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
 // add some padding to prevent the page from shifting when the scrollbar is hidden.
-
 function preventScrollStandard() {
   return utils.chain(setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), setStyle(document.documentElement, 'overflow', 'hidden'));
-} // Mobile Safari is a whole different beast. Even with overflow: hidden,
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
 // it still scrolls the page in many situations:
 //
 // 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
@@ -342,57 +330,47 @@ function preventScrollStandard() {
 //    above work or Safari will still try to scroll the page when focusing an input.
 // 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
 //    to navigate to an input with the next/previous buttons that's outside a modal.
-
-
 function preventScrollMobileSafari() {
   var scrollable;
   var lastY = 0;
-
   var onTouchStart = function onTouchStart(e) {
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = utils.getScrollParent(e.target);
-
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
-
     lastY = e.changedTouches[0].pageY;
   };
-
   var onTouchMove = function onTouchMove(e) {
     // Prevent scrolling the window.
     if (scrollable === document.documentElement || scrollable === document.body) {
       e.preventDefault();
       return;
-    } // Prevent scrolling up when at the top and scrolling down when at the bottom
+    }
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
     // of a nested scrollable area, otherwise mobile Safari will start scrolling
     // the window instead. Unfortunately, this disables bounce scrolling when at
     // the top but it's the best we can do.
-
-
     var y = e.changedTouches[0].pageY;
     var scrollTop = scrollable.scrollTop;
-    var bottom = scrollable.scrollHeight - scrollable.clientHeight; // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files
-
+    var bottom = scrollable.scrollHeight - scrollable.clientHeight;
+    // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files
     if (bottom === 0) {
       return;
     }
-
     if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
       e.preventDefault();
     }
-
     lastY = y;
   };
-
   var onTouchEnd = function onTouchEnd(e) {
-    var target = e.target; // Apply this change if we're not already focused on the target element
-
+    var target = e.target;
+    // Apply this change if we're not already focused on the target element
     if (willOpenKeyboard(target) && target !== document.activeElement) {
-      e.preventDefault(); // Apply a transform to trick Safari into thinking the input is at the top of the page
+      e.preventDefault();
+      // Apply a transform to trick Safari into thinking the input is at the top of the page
       // so it doesn't try to scroll it into view. When tapping on an input, this needs to
       // be done before the "focus" event, so we have to focus the element ourselves.
-
       target.style.transform = 'translateY(-2000px)';
       target.focus();
       requestAnimationFrame(function () {
@@ -400,10 +378,8 @@ function preventScrollMobileSafari() {
       });
     }
   };
-
   var onFocus = function onFocus(e) {
     var target = e.target;
-
     if (willOpenKeyboard(target)) {
       // Transform also needs to be applied in the focus event in cases where focus moves
       // other than tapping on an input directly, e.g. the next/previous buttons in the
@@ -411,9 +387,9 @@ function preventScrollMobileSafari() {
       // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
       target.style.transform = 'translateY(-2000px)';
       requestAnimationFrame(function () {
-        target.style.transform = ''; // This will have prevented the browser from scrolling the focused element into view,
+        target.style.transform = '';
+        // This will have prevented the browser from scrolling the focused element into view,
         // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
-
         if (visualViewport) {
           if (visualViewport.height < window.innerHeight) {
             // If the keyboard is already visible, do this after one additional frame
@@ -434,20 +410,18 @@ function preventScrollMobileSafari() {
       });
     }
   };
-
   var onWindowScroll = function onWindowScroll() {
     // Last resort. If the window scrolled, scroll it back to the top.
     // It should always be at the top because the body will have a negative margin (see below).
     window.scrollTo(0, 0);
-  }; // Record the original scroll position so we can restore it.
+  };
+  // Record the original scroll position so we can restore it.
   // Then apply a negative margin to the body to offset it by the scroll position. This will
   // enable us to scroll the window to the top, which is required for the rest of this to work.
-
-
   var scrollX = window.pageXOffset;
   var scrollY = window.pageYOffset;
-  var restoreStyles = utils.chain(setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), setStyle(document.documentElement, 'overflow', 'hidden'), setStyle(document.body, 'marginTop', "-" + scrollY + "px")); // Scroll to the top. The negative margin on the body will make this appear the same.
-
+  var restoreStyles = utils.chain(setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), setStyle(document.documentElement, 'overflow', 'hidden'), setStyle(document.body, 'marginTop', "-" + scrollY + "px"));
+  // Scroll to the top. The negative margin on the body will make this appear the same.
   window.scrollTo(0, 0);
   var removeEvents = utils.chain(addEvent(document, 'touchstart', onTouchStart, {
     passive: false,
@@ -465,45 +439,37 @@ function preventScrollMobileSafari() {
     removeEvents();
     window.scrollTo(scrollX, scrollY);
   };
-} // Sets a CSS property on an element, and returns a function to revert it to the previous value.
-
-
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
 function setStyle(element, style, value) {
   var cur = element.style[style];
   element.style[style] = value;
   return function () {
     element.style[style] = cur;
   };
-} // Adds an event listener to an element, and returns a function to remove it.
-
-
+}
+// Adds an event listener to an element, and returns a function to remove it.
 function addEvent(target, event, handler, options) {
   target.addEventListener(event, handler, options);
   return function () {
     target.removeEventListener(event, handler, options);
   };
 }
-
 function scrollIntoView(target) {
   var root = document.scrollingElement || document.documentElement;
-
   while (target && target !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
     var scrollable = utils.getScrollParent(target);
-
     if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
       var scrollableTop = scrollable.getBoundingClientRect().top;
       var targetTop = target.getBoundingClientRect().top;
-
       if (targetTop > scrollableTop + target.clientHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }
     }
-
     target = scrollable.parentElement;
   }
 }
-
 function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
@@ -573,53 +539,53 @@ var styles = {
   }
 };
 
+var _excluded = ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "disableScrollLocking", "isOpen", "snapPoints", "rootId", "mountPoint", "style", "detent", "initialSnap", "disableDrag", "prefersReducedMotion", "tweenConfig"];
 var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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,
-      rootId = _ref.rootId,
-      mountPoint = _ref.mountPoint,
-      style = _ref.style,
-      _ref$detent = _ref.detent,
-      detent = _ref$detent === void 0 ? 'full-height' : _ref$detent,
-      _ref$initialSnap = _ref.initialSnap,
-      initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
-      _ref$disableDrag = _ref.disableDrag,
-      disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
-      _ref$prefersReducedMo = _ref.prefersReducedMotion,
-      prefersReducedMotion = _ref$prefersReducedMo === void 0 ? false : _ref$prefersReducedMo,
-      _ref$tweenConfig = _ref.tweenConfig,
-      tweenConfig = _ref$tweenConfig === void 0 ? DEFAULT_TWEEN_CONFIG : _ref$tweenConfig,
-      rest = _objectWithoutPropertiesLoose(_ref, ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "isOpen", "snapPoints", "rootId", "mountPoint", "style", "detent", "initialSnap", "disableDrag", "prefersReducedMotion", "tweenConfig"]);
-
+    onOpenEnd = _ref.onOpenEnd,
+    onClose = _ref.onClose,
+    onCloseStart = _ref.onCloseStart,
+    onCloseEnd = _ref.onCloseEnd,
+    onSnap = _ref.onSnap,
+    children = _ref.children,
+    _ref$disableScrollLoc = _ref.disableScrollLocking,
+    disableScrollLocking = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
+    isOpen = _ref.isOpen,
+    snapPoints = _ref.snapPoints,
+    rootId = _ref.rootId,
+    mountPoint = _ref.mountPoint,
+    style = _ref.style,
+    _ref$detent = _ref.detent,
+    detent = _ref$detent === void 0 ? 'full-height' : _ref$detent,
+    _ref$initialSnap = _ref.initialSnap,
+    initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
+    _ref$disableDrag = _ref.disableDrag,
+    disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
+    _ref$prefersReducedMo = _ref.prefersReducedMotion,
+    prefersReducedMotion = _ref$prefersReducedMo === void 0 ? false : _ref$prefersReducedMo,
+    _ref$tweenConfig = _ref.tweenConfig,
+    tweenConfig = _ref$tweenConfig === void 0 ? DEFAULT_TWEEN_CONFIG : _ref$tweenConfig,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var sheetRef = React.useRef(null);
   var indicatorRotation = framerMotion.useMotionValue(0);
   var windowHeight = useWindowHeight();
   var shouldReduceMotion = framerMotion.useReducedMotion();
   var reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
-
   var animationOptions = _extends({
     type: 'tween'
-  }, reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig); // NOTE: the inital value for `y` doesn't matter since it is overwritten by
+  }, reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig);
+  // 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 zIndex = framerMotion.useTransform(y, function (value) {
     return value >= windowHeight ? -1 : 9999999;
   });
   var visibility = framerMotion.useTransform(y, function (value) {
     return value >= windowHeight ? 'hidden' : 'visible';
-  }); // Keep the callback fns up-to-date so that they can be accessed inside
+  });
+  // 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,
@@ -634,7 +600,6 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onCloseEnd: onCloseEnd
     };
   });
-
   if (snapPoints) {
     // Convert negative / percentage snap points to absolute values
     snapPoints = snapPoints.map(function (point) {
@@ -642,21 +607,20 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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 onDrag = useEvent(function (_, _ref2) {
     var delta = _ref2.delta;
     // Update drag indicator rotation based on drag velocity
     var velocity = y.getVelocity();
     if (velocity > 0) indicatorRotation.set(10);
-    if (velocity < 0) indicatorRotation.set(-10); // Make sure user cannot drag beyond the top of the sheet
-
+    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));
   });
   var onDragEnd = useEvent(function (_, _ref3) {
     var velocity = _ref3.velocity;
-
     if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
       // User flicked the sheet down
       onClose();
@@ -665,58 +629,49 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var sheetHeight = sheetEl.getBoundingClientRect().height;
       var currentY = y.get();
       var snapTo = 0;
-
       if (snapPoints) {
         var snapToValues = snapPoints.map(function (p) {
           return sheetHeight - Math.min(p, sheetHeight);
-        }); // Allow snapping to the top of the sheet if detent is set to `content-height`
-
+        });
+        // 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
-
-
+        }
+        // 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
-
+      });
+      // Update the spring value so that the sheet is animated to the snap point
       framerMotion.animate(y, snapTo, animationOptions);
-
       if (snapPoints && onSnap) {
         var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
         var snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
-
         onSnap(snapIndex);
       }
-
       var roundedSheetHeight = Math.round(sheetHeight);
       var shouldClose = snapTo >= roundedSheetHeight;
       if (shouldClose) onClose();
-    } // Reset indicator rotation after dragging
-
-
+    }
+    // Reset indicator rotation after dragging
     indicatorRotation.set(0);
-  }); // Trigger onSnap callback when sheet is opened or closed
-
+  });
+  // Trigger onSnap callback when sheet is opened or closed
   React.useEffect(function () {
     if (!snapPoints || !onSnap) return;
     var snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
     onSnap(snapIndex);
   }, [isOpen]); // eslint-disable-line
-
   React.useImperativeHandle(ref, function () {
     return {
       y: y,
       snapTo: function snapTo(snapIndex) {
         var sheetEl = sheetRef.current;
-
         if (snapPoints && snapPoints[snapIndex] !== undefined && sheetEl !== null) {
           var sheetHeight = sheetEl.getBoundingClientRect().height;
           var snapPoint = snapPoints[snapIndex];
@@ -731,20 +686,16 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   });
-  useModalEffect(isOpen, rootId); // Framer Motion should handle body scroll locking but it's not working
+  useModalEffect(isOpen, rootId);
+  // Framer Motion should handle body scroll locking but it's not working
   // properly on iOS. Scroll locking from React Aria seems to work much better.
-
   usePreventScroll({
-    isDisabled: !isOpen
+    isDisabled: disableScrollLocking === true || !isOpen
   });
   var dragProps = React.useMemo(function () {
     var dragProps = {
       drag: 'y',
       dragElastic: 0,
-      dragConstraints: {
-        top: 0,
-        bottom: 0
-      },
       dragMomentum: false,
       dragPropagation: false,
       onDrag: onDrag,
@@ -752,7 +703,6 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
     return disableDrag ? undefined : dragProps;
   }, [disableDrag]); // eslint-disable-line
-
   var context = {
     y: y,
     sheetRef: sheetRef,
@@ -785,30 +735,28 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return ReactDOM.createPortal(sheet, mountPoint != null ? mountPoint : document.body);
 });
 
+var _excluded$1 = ["children", "style", "className"];
 var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "className"]);
-
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useSheetContext = useSheetContext(),
-      y = _useSheetContext.y,
-      isOpen = _useSheetContext.isOpen,
-      callbacks = _useSheetContext.callbacks,
-      snapPoints = _useSheetContext.snapPoints,
-      _useSheetContext$init = _useSheetContext.initialSnap,
-      initialSnap = _useSheetContext$init === void 0 ? 0 : _useSheetContext$init,
-      sheetRef = _useSheetContext.sheetRef,
-      windowHeight = _useSheetContext.windowHeight,
-      detent = _useSheetContext.detent,
-      animationOptions = _useSheetContext.animationOptions,
-      reduceMotion = _useSheetContext.reduceMotion;
-
+    y = _useSheetContext.y,
+    isOpen = _useSheetContext.isOpen,
+    callbacks = _useSheetContext.callbacks,
+    snapPoints = _useSheetContext.snapPoints,
+    _useSheetContext$init = _useSheetContext.initialSnap,
+    initialSnap = _useSheetContext$init === void 0 ? 0 : _useSheetContext$init,
+    sheetRef = _useSheetContext.sheetRef,
+    windowHeight = _useSheetContext.windowHeight,
+    detent = _useSheetContext.detent,
+    animationOptions = _useSheetContext.animationOptions,
+    reduceMotion = _useSheetContext.reduceMotion;
   var _useEventCallbacks = useEventCallbacks(isOpen, callbacks),
-      handleAnimationComplete = _useEventCallbacks.handleAnimationComplete;
-
+    handleAnimationComplete = _useEventCallbacks.handleAnimationComplete;
   var initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
   var maxSnapHeight = snapPoints ? snapPoints[0] : null;
   var height = maxSnapHeight !== null ? "min(" + maxSnapHeight + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
@@ -837,36 +785,43 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), children);
 });
 
+var _excluded$2 = ["children", "style", "disableDrag", "className"];
 var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      style = _ref.style,
-      disableDrag = _ref.disableDrag,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "disableDrag", "className"]);
-
+    style = _ref.style,
+    disableDrag = _ref.disableDrag,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var sheetContext = useSheetContext();
   var sheetScrollerContext = useSheetScrollerContext();
+  var _useDragConstraints = useDragConstraints(),
+    constraintsRef = _useDragConstraints.constraintsRef,
+    onMeasureDragConstraints = _useDragConstraints.onMeasureDragConstraints;
   var dragProps = disableDrag || sheetScrollerContext.disableDrag ? undefined : sheetContext.dragProps;
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
-    ref: ref,
+    ref: mergeRefs([ref, constraintsRef]),
     className: "react-modal-sheet-content " + className,
     style: _extends({}, styles.content, style)
-  }, dragProps), children);
+  }, dragProps, {
+    dragConstraints: constraintsRef,
+    onMeasureDragConstraints: onMeasureDragConstraints
+  }), children);
 });
 
+var _excluded$3 = ["children", "style", "disableDrag"];
 var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      style = _ref.style,
-      disableDrag = _ref.disableDrag,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "disableDrag"]);
-
+    style = _ref.style,
+    disableDrag = _ref.disableDrag,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var _useSheetContext = useSheetContext(),
-      indicatorRotation = _useSheetContext.indicatorRotation,
-      dragProps = _useSheetContext.dragProps;
-
+    indicatorRotation = _useSheetContext.indicatorRotation,
+    dragProps = _useSheetContext.dragProps;
+  var _useDragConstraints = useDragConstraints(),
+    constraintsRef = _useDragConstraints.constraintsRef,
+    onMeasureDragConstraints = _useDragConstraints.onMeasureDragConstraints;
   var _dragProps = disableDrag ? undefined : dragProps;
-
   var indicator1Transform = framerMotion.useTransform(indicatorRotation, function (r) {
     return "translateX(2px) rotate(" + r + "deg)";
   });
@@ -874,9 +829,12 @@ var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return "translateX(-2px) rotate(" + -1 * r + "deg)";
   });
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
-    ref: ref,
+    ref: mergeRefs([ref, constraintsRef]),
     style: _extends({}, styles.headerWrapper, style)
-  }, _dragProps), children || React.createElement("div", {
+  }, _dragProps, {
+    dragConstraints: constraintsRef,
+    onMeasureDragConstraints: onMeasureDragConstraints
+  }), children || React.createElement("div", {
     className: "react-modal-sheet-header",
     style: styles.header
   }, React.createElement(framerMotion.motion.span, {
@@ -892,17 +850,16 @@ var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 
+var _excluded$4 = ["style", "className"];
 var isClickable = function isClickable(props) {
   return !!props.onClick || !!props.onTap;
 };
-
 var SheetBackdrop = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["style", "className"]);
-
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var Comp = isClickable(rest) ? framerMotion.motion.button : framerMotion.motion.div;
   var pointerEvents = isClickable(rest) ? 'auto' : 'none';
   return React.createElement(Comp, Object.assign({}, rest, {
@@ -923,42 +880,37 @@ var SheetBackdrop = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
+var _excluded$5 = ["draggableAt", "children", "style", "className"];
 var SheetScroller = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$draggableAt = _ref.draggableAt,
-      draggableAt = _ref$draggableAt === void 0 ? 'top' : _ref$draggableAt,
-      children = _ref.children,
-      style = _ref.style,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["draggableAt", "children", "style", "className"]);
-
+    draggableAt = _ref$draggableAt === void 0 ? 'top' : _ref$draggableAt,
+    children = _ref.children,
+    style = _ref.style,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var sheetScrollerContext = useSheetScrollerContext();
-
   function determineDragState(element) {
     var scrollTop = element.scrollTop,
-        scrollHeight = element.scrollHeight,
-        clientHeight = element.clientHeight;
+      scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
     var isScrollable = scrollHeight > clientHeight;
     if (!isScrollable) return;
     var isAtTop = scrollTop <= 0;
     var isAtBottom = scrollHeight - scrollTop === clientHeight;
     var shouldEnable = draggableAt === 'top' && isAtTop || draggableAt === 'bottom' && isAtBottom || draggableAt === 'both' && (isAtTop || isAtBottom);
-
     if (shouldEnable) {
       sheetScrollerContext.setDragEnabled();
     } else {
       sheetScrollerContext.setDragDisabled();
     }
   }
-
   function onScroll(e) {
     determineDragState(e.currentTarget);
   }
-
   function onTouchStart(e) {
     determineDragState(e.currentTarget);
   }
-
   var scrollProps = isTouchDevice() ? {
     onScroll: onScroll,
     onTouchStart: onTouchStart
@@ -970,6 +922,7 @@ var SheetScroller = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, scrollProps), children);
 });
 
+// HACK: this is needed to get the typing to work properly...
 var _SheetCompound = Sheet;
 _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;