react-modal-sheet 1.11.0 → 2.0.0

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

@@ -42,20 +42,32 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 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;
 
 function getClosest(nums, goal) {
-  return nums.reduce(function (prev, curr) {
-    return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
-  });
+  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);
@@ -67,51 +79,30 @@ 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
+    root.style.removeProperty('transform'); // Remove temp properties after animation is finished
 
     root.addEventListener('transitionend', onTransitionEnd);
   }
@@ -144,9 +135,13 @@ 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) {
+function useModalEffect(isOpen, rootId) {
   var prevOpen = usePrevious(isOpen); // Automatically apply the iOS modal effect to the body when sheet opens/closes
 
   React.useEffect(function () {
@@ -163,8 +158,8 @@ var useModalEffect = function useModalEffect(isOpen, rootId) {
       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
   // so we need to read and write to a ref to determine if we are
@@ -191,7 +186,7 @@ var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
   return {
     handleAnimationComplete: handleAnimationComplete
   };
-};
+}
 function useWindowHeight() {
   var _React$useState = React.useState(0),
       windowHeight = _React$useState[0],
@@ -241,6 +236,36 @@ 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
 
@@ -500,7 +525,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'
   },
@@ -536,9 +561,15 @@ var styles = {
     backgroundColor: '#ddd'
   },
   content: {
-    flex: 1,
-    overflow: 'auto',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '0px',
     position: 'relative'
+  },
+  scroller: {
+    height: '100%',
+    overflowY: 'auto'
   }
 };
 
@@ -559,28 +590,27 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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"]);
+      _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"]);
 
   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;
@@ -638,11 +668,8 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       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`
+          return sheetHeight - Math.min(p, sheetHeight);
+        }); // Allow snapping to the top of the sheet if detent is set to `content-height`
 
         if (detent === 'content-height' && !snapToValues.includes(0)) {
           snapToValues.unshift(0);
@@ -738,7 +765,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
@@ -748,11 +776,11 @@ 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);
 });
@@ -817,16 +845,14 @@ var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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;
-
+  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 SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -897,11 +923,59 @@ var SheetBackdrop = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
+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"]);
+
+  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);
+});
+
 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