react-modal-sheet/dist/index.d.ts

Flexible bottom sheet component for your React apps

import { EasingDefinition, motion, MotionValue } from 'motion/react';
import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, FunctionComponent, HTMLAttributes, RefObject } from 'react';

type SheetDetent = 'default' | 'full' | 'content';
type CommonProps = {
    className?: string;
    unstyled?: boolean;
};
type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
interface SheetTweenConfig {
    ease: EasingDefinition;
    duration: number;
}
type SheetProps = {
    unstyled?: boolean;
    avoidKeyboard?: boolean;
    children: ReactNode;
    detent?: SheetDetent;
    disableDismiss?: boolean;
    disableDrag?: boolean;
    disableScrollLocking?: boolean;
    dragCloseThreshold?: number;
    dragVelocityThreshold?: number;
    initialSnap?: number;
    isOpen: boolean;
    modalEffectRootId?: string;
    modalEffectThreshold?: number;
    mountPoint?: Element;
    prefersReducedMotion?: boolean;
    snapPoints?: number[];
    tweenConfig?: SheetTweenConfig;
    onClose: () => void;
    onCloseEnd?: () => void;
    onCloseStart?: () => void;
    onOpenEnd?: () => void;
    onOpenStart?: () => void;
    onSnap?: (index: number) => void;
} & MotionCommonProps;
type SheetContainerProps = MotionCommonProps & CommonProps & {
    children: ReactNode;
};
type SheetHeaderProps = MotionCommonProps & CommonProps & {
    children?: ReactNode;
    disableDrag?: boolean;
};
type SheetContentProps = MotionCommonProps & CommonProps & {
    disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
    disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
    scrollRef?: RefObject<HTMLDivElement | null>;
};
type SheetBackdropProps = MotionCommonProps & CommonProps;
type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
type SheetStateInfo = {
    scrollPosition?: 'top' | 'bottom' | 'middle';
    currentSnap?: number;
};
type SheetSnapPoint = {
    snapIndex: number;
    snapValue: number;
    snapValueY: number;
};
type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
type HeaderComponent = ForwardRefExoticComponent<SheetHeaderProps & RefAttributes<any>>;
type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
type ContentComponent = ForwardRefExoticComponent<SheetContentProps & RefAttributes<any>>;
interface SheetCompoundComponent {
    Container: ContainerComponent;
    Header: HeaderComponent;
    DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
    Content: ContentComponent;
    Backdrop: BackdropComponent;
}
type SheetCompound = SheetComponent & SheetCompoundComponent;

interface SheetRef {
    y: MotionValue<number>;
    yInverted: MotionValue<number>;
    height: number;
    snapTo: (index: number) => Promise<void>;
}
declare const Sheet: SheetCompound;

export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDetent, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo, type SheetTweenConfig };