react-modal-sheet 2.2.1 → 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() {
@@ -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 };