react-modal-sheet 1.11.1 → 2.1.0

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

@@ -8,44 +8,41 @@ 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;
 }
 
 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 DEFAULT_TWEEN_CONFIG = {
+  ease: 'easeOut',
+  duration: 0.2
+};
+var REDUCED_MOTION_TWEEN_CONFIG = {
+  ease: 'linear',
+  duration: 0.01
 };
 var DRAG_CLOSE_THRESHOLD = 0.6;
 var DRAG_VELOCITY_THRESHOLD = 500;
@@ -53,23 +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;
 }
-var highlightId = 'react-modal-sheet-highlight';
 function applyRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.querySelector("#" + rootId);
-
   if (root) {
     var p = 24;
     var h = window.innerHeight;
@@ -77,52 +69,28 @@ function applyRootStyles(rootId) {
     body.style.backgroundColor = '#000';
     root.style.overflow = 'hidden';
     root.style.willChange = 'transform';
-    root.style.transition = 'transform 200ms linear';
+    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'; // Add highlighed overlay to emphasize the modality effect
-
-    var highlight = document.createElement('div');
-    highlight.setAttribute('aria-hidden', 'true');
-    highlight.id = highlightId;
-    highlight.style.position = 'absolute';
-    highlight.style.top = '0px';
-    highlight.style.left = '0px';
-    highlight.style.bottom = '0px';
-    highlight.style.right = '0px';
-    highlight.style.opacity = '0';
-    highlight.style.transition = 'opacity 200ms linear';
-    highlight.style.backgroundColor = 'rgba(150, 150, 150, 0.1)';
-    root.appendChild(highlight);
-    requestAnimationFrame(function () {
-      return highlight.style.opacity = '1';
-    });
+    root.style.borderTopLeftRadius = '10px';
   }
 }
 function cleanupRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.getElementById(rootId);
-  var highlight = document.getElementById(highlightId);
-
   function onTransitionEnd() {
-    var _highlight$parentNode;
-
     root.style.removeProperty('overflow');
     root.style.removeProperty('will-change');
     root.style.removeProperty('transition');
     body.style.removeProperty('background-color');
     root.removeEventListener('transitionend', onTransitionEnd);
-    (_highlight$parentNode = highlight.parentNode) == null ? void 0 : _highlight$parentNode.removeChild(highlight);
   }
-
-  if (root && highlight) {
+  if (root) {
     // Start animating back
     root.style.removeProperty('border-top-right-radius');
     root.style.removeProperty('border-top-left-radius');
     root.style.removeProperty('transform');
-    highlight.style.opacity = '0'; // Remove temp properties after animation is finished
-
+    // Remove temp properties after animation is finished
     root.addEventListener('transitionend', onTransitionEnd);
   }
 }
@@ -130,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) {
@@ -154,11 +119,15 @@ function mergeRefs(refs) {
     });
   };
 }
+function isTouchDevice() {
+  if (typeof window === 'undefined') return false;
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 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
-
+function useModalEffect(isOpen, rootId) {
+  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);
@@ -167,51 +136,47 @@ var useModalEffect = 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
-};
-var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
+}
+
+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 () {
@@ -226,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 () {
@@ -236,11 +201,9 @@ 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);
   }, []);
 }
@@ -251,13 +214,39 @@ var useSheetContext = function useSheetContext() {
   if (!context) throw Error('Sheet context error');
   return context;
 };
+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];
+  function setDragEnabled() {
+    if (!sheetContext.disableDrag) setDisableDrag(false);
+  }
+  function setDragDisabled() {
+    if (!disableDrag) setDisableDrag(true);
+  }
+  return React.createElement(SheetScrollerContext.Provider, {
+    value: {
+      disableDrag: disableDrag,
+      setDragEnabled: setDragEnabled,
+      setDragDisabled: setDragDisabled
+    }
+  }, children);
+}
+var useSheetScrollerContext = function useSheetScrollerContext() {
+  var context = React.useContext(SheetScrollerContext);
+  if (!context) throw Error('Sheet scroller context error');
+  return context;
+};
 
 // 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;
 /**
@@ -265,21 +254,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();
@@ -287,21 +272,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.
@@ -327,57 +311,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 () {
@@ -385,10 +359,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
@@ -396,9 +368,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
@@ -419,20 +391,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,
@@ -450,45 +420,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;
 }
@@ -510,7 +472,7 @@ var styles = {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: 'rgba(51, 51, 51, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
     touchAction: 'none',
     border: 'none'
   },
@@ -546,60 +508,65 @@ var styles = {
     backgroundColor: '#ddd'
   },
   content: {
-    flex: 1,
-    overflow: 'auto',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '0px',
     position: 'relative'
+  },
+  scroller: {
+    height: '100%',
+    overflowY: 'auto'
   }
 };
 
+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$springConfig = _ref.springConfig,
-      springConfig = _ref$springConfig === void 0 ? DEFAULT_SPRING_CONFIG : _ref$springConfig,
-      _ref$disableDrag = _ref.disableDrag,
-      disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
-      _ref$prefersReducedMo = _ref.prefersReducedMotion,
-      prefersReducedMotion = _ref$prefersReducedMo === void 0 ? false : _ref$prefersReducedMo,
-      rest = _objectWithoutPropertiesLoose(_ref, ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "isOpen", "snapPoints", "rootId", "mountPoint", "style", "detent", "initialSnap", "springConfig", "disableDrag", "prefersReducedMotion"]);
-
+    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 = reduceMotion ? {
-    type: 'tween',
-    duration: 0.01
-  } : _extends({
-    type: 'spring'
-  }, springConfig); // NOTE: the inital value for `y` doesn't matter since it is overwritten by
+  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
   // 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,
@@ -614,7 +581,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) {
@@ -622,21 +588,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();
@@ -645,58 +610,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];
@@ -711,11 +667,11 @@ 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 = {
@@ -732,7 +688,6 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
     return disableDrag ? undefined : dragProps;
   }, [disableDrag]); // eslint-disable-line
-
   var context = {
     y: y,
     sheetRef: sheetRef,
@@ -745,7 +700,8 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     dragProps: dragProps,
     windowHeight: windowHeight,
     animationOptions: animationOptions,
-    reduceMotion: reduceMotion
+    reduceMotion: reduceMotion,
+    disableDrag: disableDrag
   };
   var sheet = React.createElement(SheetContext.Provider, {
     value: context
@@ -755,39 +711,37 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       zIndex: zIndex,
       visibility: visibility
     }, style)
-  }), React.createElement(framerMotion.AnimatePresence, null, isOpen ? React.Children.map(children, function (child, i) {
+  }), React.createElement(framerMotion.AnimatePresence, null, isOpen ? React.createElement(SheetScrollerContextProvider, null, React.Children.map(children, function (child, i) {
     return React.cloneElement(child, {
       key: "sheet-child-" + i
     });
-  }) : null)));
+  })) : null)));
   if (IS_SSR) return sheet;
   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;
@@ -816,38 +770,34 @@ 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"]);
-
-  var _useSheetContext = useSheetContext(),
-      dragProps = _useSheetContext.dragProps;
-
-  var _dragProps = disableDrag ? undefined : dragProps;
-
+    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 dragProps = disableDrag || sheetScrollerContext.disableDrag ? undefined : sheetContext.dragProps;
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
     ref: ref,
     className: "react-modal-sheet-content " + className,
     style: _extends({}, styles.content, style)
-  }, _dragProps), children);
+  }, dragProps), 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 _dragProps = disableDrag ? undefined : dragProps;
-
   var indicator1Transform = framerMotion.useTransform(indicatorRotation, function (r) {
     return "translateX(2px) rotate(" + r + "deg)";
   });
@@ -873,17 +823,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, {
@@ -904,11 +853,55 @@ 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, _excluded$5);
+  var sheetScrollerContext = useSheetScrollerContext();
+  function determineDragState(element) {
+    var scrollTop = element.scrollTop,
+      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
+  } : undefined;
+  return React.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: "react-modal-sheet-scroller " + className,
+    style: _extends({}, styles.scroller, style)
+  }, scrollProps), children);
+});
+
+// HACK: this is needed to get the typing to work properly...
 var _SheetCompound = Sheet;
 _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;
 _SheetCompound.Content = SheetContent;
 _SheetCompound.Backdrop = SheetBackdrop;
+_SheetCompound.Scroller = SheetScroller;
 
 exports.default = _SheetCompound;
 //# sourceMappingURL=react-modal-sheet.cjs.development.js.map