react-modal-sheet 1.11.0 → 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>
   );
@@ -339,7 +370,7 @@ You can add your own styles or override the default sheet styles via the exposed
 #### CSS-in-JS
 
 ```jsx
-import Sheet from 'react-modal-sheeet';
+import Sheet from 'react-modal-sheet';
 import styled from 'styled-components';
 import { useState } from 'react';
 
@@ -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;