react-modal-sheet 1.8.1 → 1.10.0

package/dist/SheetBackdrop.d.ts

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

package/dist/SheetContainer.d.ts

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

package/dist/SheetContent.d.ts

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

package/dist/SheetHeader.d.ts

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

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

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
 var ReactDOM = require('react-dom');
-var overlays = require('@react-aria/overlays');
 var framerMotion = require('framer-motion');
-var mergeRefs = _interopDefault(require('react-merge-refs'));
+var utils = require('@react-aria/utils');
+var reactMergeRefs = require('react-merge-refs');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -234,6 +232,247 @@ var useSheetContext = function useSheetContext() {
   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
+
+var preventScrollCount = 0;
+var restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * 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;
+  utils.useLayoutEffect(function () {
+    if (isDisabled) {
+      return;
+    }
+
+    preventScrollCount++;
+
+    if (preventScrollCount === 1) {
+      if (utils.isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        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
+// 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,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    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
+    // 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
+
+    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
+
+    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
+      // 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 () {
+        target.style.transform = '';
+      });
+    }
+  };
+
+  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
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // 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,
+        // 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
+            // to wait for the transform to be removed.
+            requestAnimationFrame(function () {
+              scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            visualViewport.addEventListener('resize', function () {
+              return scrollIntoView(target);
+            }, {
+              once: true
+            });
+          }
+        }
+      });
+    }
+  };
+
+  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.
+  // 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.
+
+  window.scrollTo(0, 0);
+  var removeEvents = utils.chain(addEvent(document, 'touchstart', onTouchStart, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'touchmove', onTouchMove, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'touchend', onTouchEnd, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
+  return function () {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+} // 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.
+
+
+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;
+}
+
 var styles = {
   wrapper: {
     position: 'fixed',
@@ -253,7 +492,8 @@ var styles = {
     width: '100%',
     height: '100%',
     backgroundColor: 'rgba(51, 51, 51, 0.5)',
-    touchAction: 'none'
+    touchAction: 'none',
+    border: 'none'
   },
   container: {
     zIndex: 2,
@@ -450,7 +690,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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.
 
-  overlays.usePreventScroll({
+  usePreventScroll({
     isDisabled: !isOpen
   });
   var dragProps = React.useMemo(function () {
@@ -462,6 +702,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         bottom: 0
       },
       dragMomentum: false,
+      dragPropagation: false,
       onDrag: onDrag,
       onDragEnd: onDragEnd
     };
@@ -500,7 +741,9 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style"]);
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "className"]);
 
   var _useSheetContext = useSheetContext(),
       y = _useSheetContext.y,
@@ -522,8 +765,8 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var maxSnapHeight = snapPoints ? snapPoints[0] : null;
   var height = maxSnapHeight !== null ? "min(" + maxSnapHeight + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
-    ref: mergeRefs([sheetRef, ref]),
-    className: "react-modal-sheet-container",
+    ref: reactMergeRefs.mergeRefs([sheetRef, ref]),
+    className: "react-modal-sheet-container " + className,
     style: _extends({}, styles.container, style, detent === 'full-height' && {
       height: height
     }, detent === 'content-height' && {
@@ -550,7 +793,9 @@ var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       style = _ref.style,
       disableDrag = _ref.disableDrag,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "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;
@@ -559,7 +804,7 @@ var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
     ref: ref,
-    className: "react-modal-sheet-content",
+    className: "react-modal-sheet-content " + className,
     style: _extends({}, styles.content, style)
   }, _dragProps), children);
 });
@@ -608,13 +853,15 @@ var isClickable = function isClickable(props) {
 var SheetBackdrop = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["style"]);
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["style", "className"]);
 
   var Comp = isClickable(rest) ? framerMotion.motion.button : framerMotion.motion.div;
   var pointerEvents = isClickable(rest) ? 'auto' : 'none';
   return React.createElement(Comp, Object.assign({}, rest, {
     ref: ref,
-    className: "react-modal-sheet-backdrop",
+    className: "react-modal-sheet-backdrop " + className,
     style: _extends({}, styles.backdrop, style, {
       pointerEvents: pointerEvents
     }),