react-modal-sheet 2.2.0 → 3.0.0

package/README.md

@@ -41,7 +41,7 @@ npm install framer-motion
 ## Usage
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useState } from 'react';
 
 function Example() {
@@ -77,7 +77,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 | `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.                                                                                                                                                                                                               |
-| `disableScrollLocking` | no       | false                                | Disable's scroll locking for the documents `body` element while sheet is opened. Can be useful if you face issues with input elements and the iOS software keyboard. See [this Issue](https://github.com/Temzasse/react-modal-sheet/issues/135) |
+| `disableScrollLocking` | no       | false                                | Disable scroll locking for the `body` element while sheet is open. Can be useful if you face issues with input elements and the iOS virtual keyboard. See related [issue](https://github.com/Temzasse/react-modal-sheet/issues/135). |
 | `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.                                                                                                                                                                       |
@@ -98,7 +98,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 Imperative method that can be accessed via a ref for snapping to a snap point in given index.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -144,7 +144,7 @@ Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -371,7 +371,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-sheet';
+import { Sheet } from 'react-modal-sheet';
 import styled from 'styled-components';
 import { useState } from 'react';
 
@@ -421,7 +421,7 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
 > ℹ️ The example was built by following the React Aria's [useDialog](https://react-spectrum.adobe.com/react-aria/useDialog.html) documentation.
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+import { motion, EasingDefinition, MotionProps, MotionValue } from 'framer-motion';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+
+interface SheetEvents {
+    onOpenStart?: () => void;
+    onOpenEnd?: () => void;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+    onSnap?: (index: number) => void;
+}
+type SheetDetent = 'full-height' | 'content-height';
+type CommonProps = MotionProps & {
+    className?: string;
+};
+interface SheetTweenConfig {
+    ease: EasingDefinition;
+    duration: number;
+}
+type SheetProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    onClose: () => void;
+    rootId?: string;
+    mountPoint?: Element;
+    snapPoints?: number[];
+    detent?: SheetDetent;
+    initialSnap?: number;
+    tweenConfig?: SheetTweenConfig;
+    disableDrag?: boolean;
+    disableScrollLocking?: boolean;
+    prefersReducedMotion?: boolean;
+} & SheetEvents & ComponentPropsWithoutRef<typeof motion.div>;
+type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
+    children: ReactNode;
+};
+type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConstraints' | 'dragMomentum' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
+    children?: ReactNode;
+    disableDrag?: boolean;
+};
+type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
+type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    draggableAt?: 'top' | 'bottom' | 'both';
+};
+type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
+type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
+type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
+type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
+type ScrollerComponent = ForwardRefExoticComponent<SheetScrollerProps & RefAttributes<any>>;
+interface SheetCompoundComponent {
+    Container: ContainerComponent;
+    Header: DraggableComponent;
+    Content: DraggableComponent;
+    Backdrop: BackdropComponent;
+    Scroller: ScrollerComponent;
+}
+type SheetCompound = SheetComponent & SheetCompoundComponent;
+
+interface SheetRef {
+    y: MotionValue<number>;
+    snapTo: (index: number) => void;
+}
+declare const Sheet: SheetCompound;
+
+export { Sheet, type SheetRef };

package/dist/index.d.ts

@@ -1,8 +1,64 @@
-import { MotionValue } from 'framer-motion';
-import { SheetCompound } from './types';
-export declare type SheetRef = {
-    y: MotionValue<number>;
-    snapTo: (index: number) => void;
-};
-declare const _default: SheetCompound;
-export default _default;
+import { motion, EasingDefinition, MotionProps, MotionValue } from 'framer-motion';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+
+interface SheetEvents {
+    onOpenStart?: () => void;
+    onOpenEnd?: () => void;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+    onSnap?: (index: number) => void;
+}
+type SheetDetent = 'full-height' | 'content-height';
+type CommonProps = MotionProps & {
+    className?: string;
+};
+interface SheetTweenConfig {
+    ease: EasingDefinition;
+    duration: number;
+}
+type SheetProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    onClose: () => void;
+    rootId?: string;
+    mountPoint?: Element;
+    snapPoints?: number[];
+    detent?: SheetDetent;
+    initialSnap?: number;
+    tweenConfig?: SheetTweenConfig;
+    disableDrag?: boolean;
+    disableScrollLocking?: boolean;
+    prefersReducedMotion?: boolean;
+} & SheetEvents & ComponentPropsWithoutRef<typeof motion.div>;
+type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
+    children: ReactNode;
+};
+type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConstraints' | 'dragMomentum' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
+    children?: ReactNode;
+    disableDrag?: boolean;
+};
+type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
+type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    draggableAt?: 'top' | 'bottom' | 'both';
+};
+type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
+type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
+type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
+type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
+type ScrollerComponent = ForwardRefExoticComponent<SheetScrollerProps & RefAttributes<any>>;
+interface SheetCompoundComponent {
+    Container: ContainerComponent;
+    Header: DraggableComponent;
+    Content: DraggableComponent;
+    Backdrop: BackdropComponent;
+    Scroller: ScrollerComponent;
+}
+type SheetCompound = SheetComponent & SheetCompoundComponent;
+
+interface SheetRef {
+    y: MotionValue<number>;
+    snapTo: (index: number) => void;
+}
+declare const Sheet: SheetCompound;
+
+export { Sheet, type SheetRef };