react-modal-sheet 1.11.1 → 2.0.0

package/README.md

@@ -56,7 +56,6 @@ function Example() {
           <Sheet.Header />
           <Sheet.Content>{/* Your sheet content goes here */}</Sheet.Content>
         </Sheet.Container>
-
         <Sheet.Backdrop />
       </Sheet>
     </>
@@ -66,42 +65,30 @@ function Example() {
 
 The `Sheet` component follows the [Compound Component pattern](https://kentcdodds.com/blog/compound-components-with-react-hooks) in order to provide a flexible yet powerful API for creating highly customizable bottom sheet components.
 
-Since the final bottom sheet is composed from smaller building blocks (`Container`, `Content`, `Header`, and `Backdrop`) you are in total control over the rendering output. So for example, if you don't want to have any backdrop in your sheet then you can just skip rendering it instead of passing some prop like `renderBackdrop={false}` to the main sheet component. Cool huh? 😎
+Since the final bottom sheet is composed from smaller building blocks (`Container`, `Content`, `Scroller`, `Header`, and `Backdrop`) you are in total control over the rendering output. So for example, if you don't want to have any backdrop in your sheet then you can just skip rendering it instead of passing some prop like `renderBackdrop={false}` to the main sheet component. Cool huh? 😎
 
 Also, by constructing the sheet from smaller pieces makes it easier to apply any necessary accessibility related properties to the right components without requiring the main sheet component to be aware of them. You can read more about accessibility in the [Accessibility](#Accessibility) section.
 
 ## Props
 
-| Name                   | Required | Default          | Description                                                                                                                                                                                                                       |
-| ---------------------- | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`             | yes      |                  | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet.                                                                                                                                                       |
-| `isOpen`               | yes      |                  | Boolean that indicates whether the sheet is open or not.                                                                                                                                                                          |
-| `onClose`              | yes      |                  | Callback fn that is called when the sheet is closed by the user.                                                                                                                                                                  |
-| `disableDrag`          | no       | false            | Disable drag for the whole sheet.                                                                                                                                                                                                 |
-| `detent`               | no       | `'full-height'`  | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`.       |
-| `onOpenStart`          | no       |                  | Callback fn that is called when the sheet opening animation starts.                                                                                                                                                               |
-| `onOpenEnd`            | no       |                  | Callback fn that is called when the sheet opening animation is completed.                                                                                                                                                         |
-| `onCloseStart`         | no       |                  | Callback fn that is called when the sheet closing animation starts.                                                                                                                                                               |
-| `onCloseEnd`           | no       |                  | Callback fn that is called when the sheet closing animation is completed.                                                                                                                                                         |
-| `onSnap`               | no       |                  | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop.                                                                                                |
-| `snapPoints`           | no       |                  | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. |
-| `initialSnap`          | no       | 0                | Initial snap point when sheet is opened (index from `snapPoints`).                                                                                                                                                                |
-| `rootId`               | no       |                  | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect.                                                                                                                                        |
-| `springConfig`         | no       | `DEFAULT_SPRING` | Overrides the config for the [spring animation](https://www.framer.com/api/motion/types/#spring).                                                                                                                                 |
-| `mountPoint`           | no       | `document.body`  | HTML element that should be used as the mount point for the sheet.                                                                                                                                                                |
-| `prefersReducedMotion` | no       | false            | Skip sheet animations (sheet instantly snaps to desired location).                                                                                                                                                                |
-
-**`DEFAULT_SPRING`**
-
-Spring animation happens when the sheet is opened/closed or when it snaps to a snap point.
-
-```js
-{
-  stiffness: 300,
-  damping: 30,
-  mass: 0.2,
-}
-```
+| Name                   | Required | Default                              | Description                                                                                                                                                                                                                       |
+| ---------------------- | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`             | yes      |                                      | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet.                                                                                                                                                       |
+| `isOpen`               | yes      |                                      | Boolean that indicates whether the sheet is open or not.                                                                                                                                                                          |
+| `onClose`              | yes      |                                      | Callback fn that is called when the sheet is closed by the user.                                                                                                                                                                  |
+| `disableDrag`          | no       | false                                | Disable drag for the whole sheet.                                                                                                                                                                                                 |
+| `detent`               | no       | `'full-height'`                      | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`.       |
+| `onOpenStart`          | no       |                                      | Callback fn that is called when the sheet opening animation starts.                                                                                                                                                               |
+| `onOpenEnd`            | no       |                                      | Callback fn that is called when the sheet opening animation is completed.                                                                                                                                                         |
+| `onCloseStart`         | no       |                                      | Callback fn that is called when the sheet closing animation starts.                                                                                                                                                               |
+| `onCloseEnd`           | no       |                                      | Callback fn that is called when the sheet closing animation is completed.                                                                                                                                                         |
+| `onSnap`               | no       |                                      | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop.                                                                                                |
+| `snapPoints`           | no       |                                      | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. |
+| `initialSnap`          | no       | 0                                    | Initial snap point when sheet is opened (index from `snapPoints`).                                                                                                                                                                |
+| `rootId`               | no       |                                      | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect.                                                                                                                                        |
+| `tweenConfig`          | no       | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point.                                                                   |
+| `mountPoint`           | no       | `document.body`                      | HTML element that should be used as the mount point for the sheet.                                                                                                                                                                |
+| `prefersReducedMotion` | no       | false                                | Skip sheet animations (sheet instantly snaps to desired location).                                                                                                                                                                |
 
 ## Methods and properties
 
@@ -183,7 +170,9 @@ function Example() {
            * way to the bottom in every snap point.
            */}
           <Sheet.Content style={{ paddingBottom: ref.current?.y }}>
-            {/* Some content here that makes the sheet content scrollable */}
+            <Sheet.Scroller draggableAt="both">
+              {/* Some content here that makes the sheet content scrollable */}
+            </Sheet.Scroller>
           </Sheet.Content>
         </Sheet.Container>
       </Sheet>
@@ -208,7 +197,9 @@ function Example() {
     >
       <Sheet.Container>
         <Sheet.Content>
-          <div style={{ height: 200 }}>Some content</div>
+          <Sheet.Scroller>
+            <div style={{ height: 200 }}>Some content</div>
+          </Sheet.Scroller>
         </Sheet.Content>
       </Sheet.Container>
     </Sheet>
@@ -236,9 +227,21 @@ Sheet container is positioned above the sheet backdrop and by default adds a sma
 
 > 🖥 Rendered element: `motion.div`.
 
+### `Sheet.Header`
+
+Sheet header acts as a drag target and has a dragging direction indicator. Rendering any children inside `Sheet.Header` replaces the default header.
+
+> 🖥 Rendered element: `motion.div`.
+
+#### Header props
+
+| Name          | Required | Default | Description                        |
+| ------------- | -------- | ------- | ---------------------------------- |
+| `disableDrag` | no       | false   | Disable drag for the sheet header. |
+
 ### `Sheet.Content`
 
-Sheet content acts as a drag target and makes sure that content which doesn't fit inside the sheet becomes scrollable.
+Sheet content acts as a drag target and can be used in conjunction with `Sheet.Scroller` to make sure that content which doesn't fit inside the sheet becomes scrollable.
 
 > 🖥 Rendered element: `motion.div`.
 
@@ -248,26 +251,56 @@ Sheet content acts as a drag target and makes sure that content which doesn't fi
 | ------------- | -------- | ------- | ----------------------------------- |
 | `disableDrag` | no       | false   | Disable drag for the sheet content. |
 
-### `Sheet.Header`
+### `Sheet.Scroller`
 
-Sheet header acts as a drag target and has a dragging direction indicator. Rendering any children inside `Sheet.Header` replaces the default header.
+Sheet scroller can be used to make the whole sheet content or parts of it scrollable in a way that drag gestures are properly disabled and enabled based on the scroll state. See the [Scrolling on touch devices](#scrolling-on-touch-devices) section for more details.
 
 > 🖥 Rendered element: `motion.div`.
 
-#### Header props
+#### Scroller props
 
-| Name          | Required | Default | Description                        |
-| ------------- | -------- | ------- | ---------------------------------- |
-| `disableDrag` | no       | false   | Disable drag for the sheet header. |
+| Name          | Required | Default | Description                                                                                                                            |
+| ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `draggableAt` | no       | `"top"` | Should the drag be enabled when the element is scrolled either to the top, bottom, or both. Available values: `top`, `bottom`, `both`. |
 
 ### `Sheet.Backdrop`
 
-Sheet backdrop is a translucent overlay that helps to separate the sheet from it's background. By default the backdrop doesn't have any interaction attached to it but if you, for example, want to close the sheet when the backdrop is clicked you can provide click/tap handlers to it which will change the rendered element from `div` to `button`.
+Sheet backdrop is a translucent overlay that helps to separate the sheet from it's background. By default the backdrop doesn't have any interaction attached to it but if you, for example, want to close the sheet when the backdrop is clicked you can provide tap handler to it which will change the rendered element from `div` to `button`.
+
+⚠️ **Note:** as the element is a motion component you need to use [`onTap`](https://www.framer.com/motion/gestures/#tap) instead of `onClick` if you want to add a click handler to it.
 
 > 🖥 Rendered element: `motion.div` or `motion.button`.
 
 ## Advanced usage
 
+### Scrolling on touch devices
+
+Scrolling and dragging are **the same** gesture on touch devices which can create problems when you want to have scrollable content inside the sheet. React Modal Sheet provides a `Sheet.Scroller` component that is able to automatically disable and enable dragging inside the `Sheet.Content` component based on the scroll state. There are three modes for the `Sheet.Scroller` reflected in the `draggableAt` prop:
+
+1. Enable dragging when the scroller is not yet scrolled - it is at the `top` position.
+2. Enable dragging when the scroller is scrolled all the way to the bottom - it is at the `bottom` position.
+3. Enable dragging in `both` positions.
+
+The scroller component is in-between these states when the user has scrolled only some amount. Dragging is always **disabled** in this in-between state in order to avoid it getting mixed with dragging gestures. The `Sheet.Scroller` component applies the special handling only for touch devices.
+
+The default value for the `draggableAt` prop is `top` which should be a good default for most use cases. You shouldn't need `bottom` or `both` unless you have scrollable content inside a sheet that also has snap points.
+
+```jsx
+function ScrollableExample() {
+  return (
+    <Sheet>
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>
+          <Sheet.Scroller>{/*...*/}</Sheet.Scroller>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
 ### iOS Modal View effect
 
 In addition to the `Sheet.Backdrop` it's possible to apply a scaling effect to the main app element to highlight the modality of the bottom sheet. This effect mimics the [iOS Modal View](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/) presentation style to bring more focus to the sheet and add some delight to the user experience.
@@ -302,10 +335,8 @@ function Example() {
         <Sheet.Header>
           <YourCustomSheetHeader />
         </Sheet.Header>
-
         <Sheet.Content>{/*...*/}</Sheet.Content>
       </Sheet.Container>
-
       <Sheet.Backdrop />
     </Sheet>
   );
@@ -369,12 +400,11 @@ function Example() {
       <button onClick={() => setOpen(true)}>Open sheet</button>
 
       <CustomSheet isOpen={isOpen} onClose={() => setOpen(false)}>
-        <CustomSheet.Container>
-          <CustomSheet.Header />
-          <CustomSheet.Content>{/*...*/}</CustomSheet.Content>
-        </CustomSheet.Container>
-
-        <CustomSheet.Backdrop />
+        <Sheet.Container>
+          <Sheet.Header />
+          <Sheet.Content>{/*...*/}</Sheet.Content>
+        </Sheet.Container>
+        <Sheet.Backdrop />
       </CustomSheet>
     </>
   );

package/dist/SheetBackdrop.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 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>>;
+}, "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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & React.RefAttributes<any>>;
 export default SheetBackdrop;

package/dist/SheetContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 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"> & {
+}, "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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & {
     children: React.ReactNode;
 } & React.RefAttributes<any>>;
 export default SheetContainer;

package/dist/SheetContent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 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"> & {
+}, "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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & {
     children?: React.ReactNode;
     disableDrag?: boolean | undefined;
 } & React.RefAttributes<any>>;

package/dist/SheetHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 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"> & {
+}, "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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & {
     children?: React.ReactNode;
     disableDrag?: boolean | undefined;
 } & React.RefAttributes<any>>;

package/dist/SheetScroller.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const SheetScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    draggableAt?: "top" | "bottom" | "both" | undefined;
+} & React.RefAttributes<any>>;
+export default SheetScroller;

package/dist/constants.d.ts

@@ -1,9 +1,12 @@
 export declare const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
 export declare const IS_SSR: boolean;
-export declare const DEFAULT_SPRING_CONFIG: {
-    stiffness: number;
-    damping: number;
-    mass: number;
+export declare const DEFAULT_TWEEN_CONFIG: {
+    ease: string;
+    duration: number;
+};
+export declare const REDUCED_MOTION_TWEEN_CONFIG: {
+    ease: string;
+    duration: number;
 };
 export declare const DRAG_CLOSE_THRESHOLD = 0.6;
 export declare const DRAG_VELOCITY_THRESHOLD = 500;

package/dist/context.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
-import { SheetContextType } from './types';
+import { SheetScrollerContextType, SheetContextType } from './types';
 export declare const SheetContext: React.Context<SheetContextType | undefined>;
 export declare const useSheetContext: () => SheetContextType;
+export declare const SheetScrollerContext: React.Context<SheetScrollerContextType | undefined>;
+export declare function SheetScrollerContextProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare const useSheetScrollerContext: () => SheetScrollerContextType;

package/dist/hooks.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { SheetEvents } from './types';
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
-export declare const useModalEffect: (isOpen: boolean, rootId?: string | undefined) => void;
-export declare const useEventCallbacks: (isOpen: boolean, callbacks: React.MutableRefObject<SheetEvents>) => {
+export declare function useModalEffect(isOpen: boolean, rootId?: string): void;
+export declare function useEventCallbacks(isOpen: boolean, callbacks: React.MutableRefObject<SheetEvents>): {
     handleAnimationComplete: () => void;
 };
 export declare function useWindowHeight(): number;

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

@@ -42,10 +42,13 @@ 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;
@@ -65,7 +68,6 @@ function getClosest(nums, goal) {
 
   return closest;
 }
-var highlightId = 'react-modal-sheet-highlight';
 function applyRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.querySelector("#" + rootId);
@@ -77,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);
   }
@@ -154,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 () {
@@ -173,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
@@ -201,7 +186,7 @@ var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
   return {
     handleAnimationComplete: handleAnimationComplete
   };
-};
+}
 function useWindowHeight() {
   var _React$useState = React.useState(0),
       windowHeight = _React$useState[0],
@@ -251,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
 
@@ -510,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'
   },
@@ -546,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'
   }
 };
 
@@ -569,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;
@@ -745,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
@@ -755,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);
 });
@@ -824,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) {
@@ -904,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