react-modal-sheet 1.6.3 → 1.8.0

package/dist/react-modal-sheet.esm.js

@@ -1,7 +1,7 @@
-import { useState, useEffect, useLayoutEffect, createContext, useContext, useRef, useCallback, forwardRef, useImperativeHandle, createElement, Children, cloneElement } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, createContext, useContext, forwardRef, useImperativeHandle, useMemo, createElement, Children, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import { usePreventScroll } from '@react-aria/overlays';
-import { useMotionValue, animate, AnimatePresence, motion, useTransform } from 'framer-motion';
+import { useMotionValue, useReducedMotion, animate, AnimatePresence, motion, useTransform } from 'framer-motion';
 import mergeRefs from 'react-merge-refs';
 
 function _extends() {
@@ -37,12 +37,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');
@@ -104,40 +113,25 @@ function cleanupRootStyles(rootId) {
     root.addEventListener('transitionend', onTransitionEnd);
   }
 }
-var useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-function useWindowHeight() {
-  var _useState = 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__*/createContext(undefined);
-var useSheetContext = function useSheetContext() {
-  var context = 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 ? useEffect : useLayoutEffect;
 var useModalEffect = function useModalEffect(isOpen, rootId) {
   var prevOpen = usePrevious(isOpen); // Automatically apply the iOS modal effect to the body when sheet opens/closes
 
@@ -184,13 +178,54 @@ var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
     handleAnimationComplete: handleAnimationComplete
   };
 };
+function useWindowHeight() {
+  var _React$useState = useState(0),
+      windowHeight = _React$useState[0],
+      setWindowHeight = _React$useState[1];
 
-var usePrevious = function usePrevious(state) {
+  useIsomorphicLayoutEffect(function () {
+    var updateHeight = function updateHeight() {
+      return setWindowHeight(window.innerHeight);
+    };
+
+    window.addEventListener('resize', updateHeight);
+    updateHeight();
+    return function () {
+      return window.removeEventListener('resize', updateHeight);
+    };
+  }, []);
+  return windowHeight;
+}
+function usePrevious(state) {
   var ref = useRef();
   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 = useRef();
+  useIsomorphicLayoutEffect(function () {
+    handlerRef.current = handler;
+  });
+  return 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__*/createContext(undefined);
+var useSheetContext = function useSheetContext() {
+  var context = useContext(SheetContext);
+  if (!context) throw Error('Sheet context error');
+  return context;
 };
 
 var styles = {
@@ -253,56 +288,73 @@ var styles = {
 };
 
 var Sheet = /*#__PURE__*/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,
-      _ref$initialSnap = _ref.initialSnap,
-      initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
       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 ? {
-    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"]);
+      _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"]);
 
   var sheetRef = useRef(null);
+  var indicatorRotation = useMotionValue(0);
+  var windowHeight = useWindowHeight();
+  var shouldReduceMotion = 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
+  // 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 = 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 = useRef({
     onOpenStart: onOpenStart,
     onOpenEnd: onOpenEnd,
     onCloseStart: onCloseStart,
     onCloseEnd: onCloseEnd
-  }); // prettier-ignore
-
-  var indicatorRotation = 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 = useMotionValue(0);
+  });
+  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 = useCallback(function (_, _ref2) {
+  var onDrag = useEvent(function (_, _ref2) {
     var delta = _ref2.delta;
     // Update drag indicator rotation based on drag velocity
     var velocity = y.getVelocity();
@@ -310,26 +362,44 @@ var Sheet = /*#__PURE__*/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 = 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;
+      }
 
-      animate(y, snapTo, _extends({
-        type: 'spring'
-      }, springConfig));
+      snapTo = validateSnapTo({
+        snapTo: snapTo,
+        sheetHeight: sheetHeight
+      }); // Update the spring value so that the sheet is animated to the snap point
+
+      animate(y, snapTo, animationOptions);
 
       if (snapPoints && onSnap) {
         var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
@@ -338,22 +408,11 @@ var Sheet = /*#__PURE__*/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
-
-  useEffect(function () {
-    callbacks.current = {
-      onOpenStart: onOpenStart,
-      onOpenEnd: onOpenEnd,
-      onCloseStart: onCloseStart,
-      onCloseEnd: onCloseEnd
-    };
   }); // Trigger onSnap callback when sheet is opened or closed
 
   useEffect(function () {
@@ -369,13 +428,15 @@ var Sheet = /*#__PURE__*/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];
-          animate(y, snapTo, _extends({
-            type: 'spring'
-          }, springConfig));
+          var sheetHeight = sheetEl.getBoundingClientRect().height;
+          var snapPoint = snapPoints[snapIndex];
+          var snapTo = validateSnapTo({
+            snapTo: sheetHeight - snapPoint,
+            sheetHeight: sheetHeight
+          });
+          animate(y, snapTo, animationOptions);
           if (onSnap) onSnap(snapIndex);
-          if (snapTo >= contentHeight) onClose();
+          if (snapTo >= sheetHeight) onClose();
         }
       }
     };
@@ -386,47 +447,49 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   usePreventScroll({
     isDisabled: !isOpen
   });
-  var dragProps = disableDrag ? {} : {
-    drag: 'y',
-    dragElastic: 0,
-    dragConstraints: {
-      top: 0,
-      bottom: 0
-    },
-    dragMomentum: false,
-    onDrag: handleDrag,
-    onDragEnd: handleDragEnd
-  };
+  var dragProps = 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
+    animationOptions: animationOptions,
+    reduceMotion: reduceMotion
   };
-
-  var wrapperProps = _extends({}, rest, {
-    ref: ref,
-    style: _extends({}, styles.wrapper, style)
-  });
-
   var sheet = createElement(SheetContext.Provider, {
     value: context
-  }, createElement("div", Object.assign({}, wrapperProps), createElement(AnimatePresence, null, isOpen ? Children.map(children, function (child, i) {
+  }, createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    style: _extends({}, styles.wrapper, style)
+  }), createElement(AnimatePresence, null, isOpen ? Children.map(children, function (child, i) {
     return cloneElement(child, {
       key: "sheet-child-" + i
     });
   }) : null)));
-  if (isSSR) return sheet;
+  if (IS_SSR) return sheet;
   return createPortal(sheet, mountPoint != null ? mountPoint : document.body);
 });
 
-var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
 var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$style = _ref.style,
@@ -442,33 +505,36 @@ var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
       initialSnap = _useSheetContext$init === void 0 ? 0 : _useSheetContext$init,
       sheetRef = _useSheetContext.sheetRef,
       windowHeight = _useSheetContext.windowHeight,
-      springConfig = _useSheetContext.springConfig;
+      detent = _useSheetContext.detent,
+      animationOptions = _useSheetContext.animationOptions,
+      reduceMotion = _useSheetContext.reduceMotion;
 
   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 createElement(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: {
+    initial: reduceMotion ? false : {
       y: windowHeight
     },
     animate: {
       y: initialY,
-      transition: _extends({
-        type: 'spring'
-      }, springConfig)
+      transition: animationOptions
     },
     exit: {
-      y: windowHeight
+      y: windowHeight,
+      transition: animationOptions
     },
     onAnimationComplete: handleAnimationComplete
   }), children);
@@ -476,11 +542,8 @@ var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
 var SheetContent = /*#__PURE__*/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;
@@ -489,16 +552,13 @@ var SheetContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     className: "react-modal-sheet-content",
     style: _extends({}, styles.content, style)
-  }, disableDrag ? {} : dragProps), children);
+  }, dragProps), children);
 });
 
 var SheetHeader = /*#__PURE__*/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,
@@ -513,7 +573,7 @@ var SheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return createElement(motion.div, Object.assign({}, rest, {
     ref: ref,
     style: _extends({}, styles.headerWrapper, style)
-  }, disableDrag ? {} : dragProps), children || createElement("div", {
+  }, dragProps), children || createElement("div", {
     className: "react-modal-sheet-header",
     style: styles.header
   }, createElement(motion.span, {