react-modal-sheet 2.2.1 → 3.1.0

package/src/sheet.tsx

@@ -1,12 +1,21 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { createPortal } from 'react-dom';
 
 import {
   animate,
   AnimatePresence,
   motion,
-  PanInfo,
-  Transition,
+  type PanInfo,
+  type Transition,
   useMotionValue,
   useReducedMotion,
   useTransform,
@@ -14,9 +23,9 @@ import {
 
 import {
   useModalEffect,
-  useWindowHeight,
+  useDimensions,
   useIsomorphicLayoutEffect,
-  useEvent,
+  useEffectEvent,
 } from './hooks';
 
 import {
@@ -27,13 +36,13 @@ import {
   IS_SSR,
 } from './constants';
 
-import { SheetContextType, SheetProps } from './types';
+import { type SheetContextType, type SheetProps } from './types';
 import { SheetScrollerContextProvider, SheetContext } from './context';
 import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
 import { usePreventScroll } from './use-prevent-scroll';
 import styles from './styles';
 
-const Sheet = React.forwardRef<any, SheetProps>(
+const Sheet = forwardRef<any, SheetProps>(
   (
     {
       onOpenStart,
@@ -58,9 +67,9 @@ const Sheet = React.forwardRef<any, SheetProps>(
     },
     ref
   ) => {
-    const sheetRef = React.useRef<any>(null);
+    const sheetRef = useRef<HTMLDivElement>(null);
     const indicatorRotation = useMotionValue(0);
-    const windowHeight = useWindowHeight();
+    const { height: windowHeight } = useDimensions();
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions: Transition = {
@@ -73,17 +82,17 @@ const Sheet = React.forwardRef<any, SheetProps>(
     // and after that it is driven by the gestures and/or snapping
     const y = useMotionValue(0);
 
-    const zIndex = useTransform(y, value =>
-      value >= windowHeight ? -1 : 9999999
+    // +2 for tolerance in case the animated value is slightly off
+    const zIndex = useTransform(y, (value) =>
+      value + 2 >= windowHeight ? -1 : 9999999
     );
-
-    const visibility = useTransform(y, value =>
-      value >= windowHeight ? 'hidden' : 'visible'
+    const visibility = useTransform(y, (value) =>
+      value + 2 >= windowHeight ? 'hidden' : 'visible'
     );
 
     // Keep the callback fns up-to-date so that they can be accessed inside
     // the effect without including them to the dependencies array
-    const callbacks = React.useRef({
+    const callbacks = useRef({
       onOpenStart,
       onOpenEnd,
       onCloseStart,
@@ -101,7 +110,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     if (snapPoints) {
       // Convert negative / percentage snap points to absolute values
-      snapPoints = snapPoints.map(point => {
+      snapPoints = snapPoints.map((point) => {
         // Percentage values e.g. between 0.0 and 1.0
         if (point > 0 && point <= 1) return Math.round(point * windowHeight);
         return point < 0 ? windowHeight + point : point; // negative values
@@ -109,11 +118,13 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
       console.assert(
         inDescendingOrder(snapPoints) || windowHeight === 0,
-        `Snap points need to be in descending order got: [${snapPoints}]`
+        `Snap points need to be in descending order got: [${snapPoints.join(
+          ', '
+        )}]`
       );
     }
 
-    const onDrag = useEvent((_, { delta }: PanInfo) => {
+    const onDrag = useEffectEvent((_, { delta }: PanInfo) => {
       // Update drag indicator rotation based on drag velocity
       const velocity = y.getVelocity();
 
@@ -124,20 +135,36 @@ const Sheet = React.forwardRef<any, SheetProps>(
       y.set(Math.max(y.get() + delta.y, 0));
     });
 
-    const onDragEnd = useEvent((_, { velocity }: PanInfo) => {
+    const onDragStart = useEffectEvent(() => {
+      // Find focused input inside the sheet and blur it when dragging starts
+      // to prevent a weird ghost caret "bug" on mobile
+      const focusedElement = document.activeElement as HTMLElement | null;
+      if (!focusedElement || !sheetRef.current) return;
+
+      const isInput =
+        focusedElement.tagName === 'INPUT' ||
+        focusedElement.tagName === 'TEXTAREA';
+
+      // Only blur the focused element if it's inside the sheet
+      if (isInput && sheetRef.current.contains(focusedElement)) {
+        focusedElement.blur();
+      }
+    });
+
+    const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {
       if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
         // User flicked the sheet down
         onClose();
       } else {
-        const sheetEl = sheetRef.current as HTMLDivElement;
-        const sheetHeight = sheetEl.getBoundingClientRect().height;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const sheetHeight = sheetRef.current!.getBoundingClientRect().height;
         const currentY = y.get();
 
         let snapTo = 0;
 
         if (snapPoints) {
           const snapToValues = snapPoints.map(
-            p => sheetHeight - Math.min(p, sheetHeight)
+            (p) => sheetHeight - Math.min(p, sheetHeight)
           );
 
           // Allow snapping to the top of the sheet if detent is set to `content-height`
@@ -155,7 +182,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
         snapTo = validateSnapTo({ snapTo, sheetHeight });
 
         // Update the spring value so that the sheet is animated to the snap point
-        animate(y, snapTo, animationOptions);
+        void animate(y, snapTo, animationOptions);
 
         if (snapPoints && onSnap) {
           const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
@@ -164,7 +191,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
         }
 
         const roundedSheetHeight = Math.round(sheetHeight);
-        const shouldClose = snapTo >= roundedSheetHeight;
+        const shouldClose = snapTo + 2 >= roundedSheetHeight; // 2px tolerance
 
         if (shouldClose) onClose();
       }
@@ -174,22 +201,18 @@ const Sheet = React.forwardRef<any, SheetProps>(
     });
 
     // Trigger onSnap callback when sheet is opened or closed
-    React.useEffect(() => {
+    useEffect(() => {
       if (!snapPoints || !onSnap) return;
       const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
       onSnap(snapIndex);
     }, [isOpen]); // eslint-disable-line
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       y,
       snapTo: (snapIndex: number) => {
-        const sheetEl = sheetRef.current as HTMLDivElement | null;
+        const sheetEl = sheetRef.current;
 
-        if (
-          snapPoints &&
-          snapPoints[snapIndex] !== undefined &&
-          sheetEl !== null
-        ) {
+        if (snapPoints?.[snapIndex] !== undefined && sheetEl) {
           const sheetHeight = sheetEl.getBoundingClientRect().height;
           const snapPoint = snapPoints[snapIndex];
           const snapTo = validateSnapTo({
@@ -197,7 +220,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
             sheetHeight,
           });
 
-          animate(y, snapTo, animationOptions);
+          void animate(y, snapTo, animationOptions);
           if (onSnap) onSnap(snapIndex);
           if (snapTo >= sheetHeight) onClose();
         }
@@ -208,20 +231,21 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     // Framer Motion should handle body scroll locking but it's not working
     // properly on iOS. Scroll locking from React Aria seems to work much better.
-    usePreventScroll({ isDisabled: disableScrollLocking === true || !isOpen });
+    usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });
 
-    const dragProps = React.useMemo(() => {
+    const dragProps = useMemo(() => {
       const dragProps: SheetContextType['dragProps'] = {
         drag: 'y',
         dragElastic: 0,
         dragMomentum: false,
         dragPropagation: false,
         onDrag,
+        onDragStart,
         onDragEnd,
       };
 
       return disableDrag ? undefined : dragProps;
-    }, [disableDrag]); // eslint-disable-line
+    }, [disableDrag, windowHeight]); // eslint-disable-line
 
     const context: SheetContextType = {
       y,
@@ -250,8 +274,8 @@ const Sheet = React.forwardRef<any, SheetProps>(
             {/* NOTE: AnimatePresence requires us to set keys to children */}
             {isOpen ? (
               <SheetScrollerContextProvider>
-                {React.Children.map(children, (child: any, i) =>
-                  React.cloneElement(child, { key: `sheet-child-${i}` })
+                {Children.map(children, (child: any, i) =>
+                  cloneElement(child, { key: `sheet-child-${i}` })
                 )}
               </SheetScrollerContextProvider>
             ) : null}
@@ -262,8 +286,10 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     if (IS_SSR) return sheet;
 
-    return ReactDOM.createPortal(sheet, mountPoint ?? document.body);
+    return createPortal(sheet, mountPoint ?? document.body);
   }
 );
 
+Sheet.displayName = 'Sheet';
+
 export default Sheet;

package/src/styles.ts

@@ -1,6 +1,6 @@
-import * as CSS from 'csstype';
+import { type Properties } from 'csstype';
 
-const styles: { [key: string]: CSS.Properties } = {
+const styles: Record<string, Properties> = {
   wrapper: {
     position: 'fixed',
     top: 0,

package/src/types.tsx

@@ -1,19 +1,28 @@
 import {
-  DragHandlers,
-  MotionValue,
-  MotionProps,
-  motion,
-  EasingDefinition,
-  Transition,
+  type ComponentPropsWithoutRef,
+  type ForwardRefExoticComponent,
+  type HTMLAttributes,
+  type MutableRefObject,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
+
+import {
+  type DragHandlers,
+  type MotionValue,
+  type MotionProps,
+  type motion,
+  type EasingDefinition,
+  type Transition,
 } from 'framer-motion';
 
-export type SheetEvents = {
+export interface SheetEvents {
   onOpenStart?: () => void;
   onOpenEnd?: () => void;
   onCloseStart?: () => void;
   onCloseEnd?: () => void;
   onSnap?: (index: number) => void;
-};
+}
 
 export type SheetDetent = 'full-height' | 'content-height';
 
@@ -21,14 +30,14 @@ type CommonProps = MotionProps & {
   className?: string;
 };
 
-export type SheetTweenConfig = {
+export interface SheetTweenConfig {
   ease: EasingDefinition;
   duration: number;
-};
+}
 
 export type SheetProps = {
   isOpen: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   onClose: () => void;
   rootId?: string;
   mountPoint?: Element;
@@ -40,13 +49,13 @@ export type SheetProps = {
   disableScrollLocking?: boolean;
   prefersReducedMotion?: boolean;
 } & SheetEvents &
-  React.ComponentPropsWithoutRef<typeof motion.div>;
+  ComponentPropsWithoutRef<typeof motion.div>;
 
 export type SheetContainerProps = Omit<
   CommonProps,
   'initial' | 'animate' | 'exit' | 'onAnimationComplete'
 > & {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export type SheetDraggableProps = Omit<
@@ -59,7 +68,7 @@ export type SheetDraggableProps = Omit<
   | 'onDragStart'
   | 'onDragEnd'
 > & {
-  children?: React.ReactNode;
+  children?: ReactNode;
   disableDrag?: boolean;
 };
 
@@ -68,67 +77,68 @@ export type SheetBackdropProps = Omit<
   'initial' | 'animate' | 'exit'
 >;
 
-export type SheetScrollerProps = React.HTMLAttributes<HTMLDivElement> & {
+export type SheetScrollerProps = HTMLAttributes<HTMLDivElement> & {
   draggableAt?: 'top' | 'bottom' | 'both';
 };
 
-export type SheetDragProps = {
+export interface SheetDragProps {
   drag: 'y';
   dragElastic: number;
   dragMomentum: boolean;
   dragPropagation: boolean;
   onDrag: DragHandlers['onDrag'];
+  onDragStart: DragHandlers['onDragStart'];
   onDragEnd: DragHandlers['onDragEnd'];
-};
+}
 
-export type SheetContextType = {
+export interface SheetContextType {
   y: MotionValue<any>;
-  sheetRef: React.MutableRefObject<any>;
+  sheetRef: MutableRefObject<any>;
   isOpen: boolean;
   snapPoints: SheetProps['snapPoints'];
   detent: SheetDetent;
   initialSnap: SheetProps['initialSnap'];
   indicatorRotation: MotionValue<number>;
-  callbacks: React.MutableRefObject<SheetEvents>;
+  callbacks: MutableRefObject<SheetEvents>;
   dragProps?: SheetDragProps;
   windowHeight: number;
   animationOptions: Transition;
   reduceMotion: boolean;
   disableDrag: boolean;
-};
+}
 
-export type SheetScrollerContextType = {
+export interface SheetScrollerContextType {
   disableDrag: boolean;
   setDragDisabled: () => void;
   setDragEnabled: () => void;
-};
+}
 
-type ContainerComponent = React.ForwardRefExoticComponent<
-  SheetContainerProps & React.RefAttributes<any>
+type ContainerComponent = ForwardRefExoticComponent<
+  SheetContainerProps & RefAttributes<any>
 >;
 
-type DraggableComponent = React.ForwardRefExoticComponent<
-  SheetDraggableProps & React.RefAttributes<any>
+type DraggableComponent = ForwardRefExoticComponent<
+  SheetDraggableProps & RefAttributes<any>
 >;
 
-type BackdropComponent = React.ForwardRefExoticComponent<
-  SheetBackdropProps & React.RefAttributes<any>
+type BackdropComponent = ForwardRefExoticComponent<
+  SheetBackdropProps & RefAttributes<any>
 >;
 
-type SheetComponent = React.ForwardRefExoticComponent<
-  SheetProps & React.RefAttributes<any>
+type SheetComponent = ForwardRefExoticComponent<
+  SheetProps & RefAttributes<any>
 >;
 
-type ScrollerComponent = React.ForwardRefExoticComponent<
-  SheetScrollerProps & React.RefAttributes<any>
+type ScrollerComponent = ForwardRefExoticComponent<
+  SheetScrollerProps & RefAttributes<any>
 >;
 
-type SheetCompoundComponent = {
+interface SheetCompoundComponent {
   Container: ContainerComponent;
   Header: DraggableComponent;
   Content: DraggableComponent;
   Backdrop: BackdropComponent;
   Scroller: ScrollerComponent;
-};
+}
 
 export type SheetCompound = SheetComponent & SheetCompoundComponent;

package/src/use-prevent-scroll.ts

@@ -11,8 +11,8 @@ interface PreventScrollOptions {
   isDisabled?: boolean;
 }
 
-// @ts-ignore
-const visualViewport = typeof window !== 'undefined' && window.visualViewport;
+const visualViewport =
+  typeof window !== 'undefined' ? (window as any).visualViewport : undefined;
 
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([
@@ -37,7 +37,7 @@ let restore: any;
  * shift due to the scrollbars disappearing.
  */
 export function usePreventScroll(options: PreventScrollOptions = {}) {
-  let { isDisabled } = options;
+  const { isDisabled } = options;
 
   useLayoutEffect(() => {
     if (isDisabled) {
@@ -104,7 +104,8 @@ function preventScrollStandard() {
 function preventScrollMobileSafari() {
   let scrollable: Element | undefined;
   let lastY = 0;
-  let onTouchStart = (e: TouchEvent) => {
+
+  const onTouchStart = (e: TouchEvent) => {
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = getScrollParent(e.target as Element);
     if (
@@ -117,7 +118,7 @@ function preventScrollMobileSafari() {
     lastY = e.changedTouches[0].pageY;
   };
 
-  let onTouchMove = (e: TouchEvent) => {
+  const onTouchMove = (e: TouchEvent) => {
     // In special situations, `onTouchStart` may be called without `onTouchStart` being called.
     // (e.g. when the user places a finger on the screen before the <Sheet> is mounted and then moves the finger after it is mounted).
     // If `onTouchStart` is not called, `scrollable` is `undefined`. Therefore, such cases are ignored.
@@ -138,9 +139,9 @@ function preventScrollMobileSafari() {
     // of a nested scrollable area, otherwise mobile Safari will start scrolling
     // the window instead. Unfortunately, this disables bounce scrolling when at
     // the top but it's the best we can do.
-    let y = e.changedTouches[0].pageY;
-    let scrollTop = scrollable.scrollTop;
-    let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+    const y = e.changedTouches[0].pageY;
+    const scrollTop = scrollable.scrollTop;
+    const bottom = scrollable.scrollHeight - scrollable.clientHeight;
 
     // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files
     if (bottom === 0) {
@@ -154,8 +155,8 @@ function preventScrollMobileSafari() {
     lastY = y;
   };
 
-  let onTouchEnd = (e: TouchEvent) => {
-    let target = e.target as HTMLElement;
+  const onTouchEnd = (e: TouchEvent) => {
+    const target = e.target as HTMLElement;
 
     // Apply this change if we're not already focused on the target element
     if (willOpenKeyboard(target) && target !== document.activeElement) {
@@ -172,8 +173,8 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let onFocus = (e: FocusEvent) => {
-    let target = e.target as HTMLElement;
+  const onFocus = (e: FocusEvent) => {
+    const target = e.target as HTMLElement;
     if (willOpenKeyboard(target)) {
       // Transform also needs to be applied in the focus event in cases where focus moves
       // other than tapping on an input directly, e.g. the next/previous buttons in the
@@ -197,7 +198,9 @@ function preventScrollMobileSafari() {
             // measure the correct position to scroll to.
             visualViewport.addEventListener(
               'resize',
-              () => scrollIntoView(target),
+              () => {
+                scrollIntoView(target);
+              },
               { once: true }
             );
           }
@@ -206,7 +209,7 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let onWindowScroll = () => {
+  const onWindowScroll = () => {
     // Last resort. If the window scrolled, scroll it back to the top.
     // It should always be at the top because the body will have a negative margin (see below).
     window.scrollTo(0, 0);
@@ -215,10 +218,10 @@ function preventScrollMobileSafari() {
   // Record the original scroll position so we can restore it.
   // Then apply a negative margin to the body to offset it by the scroll position. This will
   // enable us to scroll the window to the top, which is required for the rest of this to work.
-  let scrollX = window.pageXOffset;
-  let scrollY = window.pageYOffset;
+  const scrollX = window.pageXOffset;
+  const scrollY = window.pageYOffset;
 
-  let restoreStyles = chain(
+  const restoreStyles = chain(
     setStyle(
       document.documentElement,
       'paddingRight',
@@ -231,7 +234,7 @@ function preventScrollMobileSafari() {
   // Scroll to the top. The negative margin on the body will make this appear the same.
   window.scrollTo(0, 0);
 
-  let removeEvents = chain(
+  const removeEvents = chain(
     addEvent(document, 'touchstart', onTouchStart, {
       passive: false,
       capture: true,
@@ -258,7 +261,7 @@ function preventScrollMobileSafari() {
 
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
 function setStyle(element: any, style: string, value: string) {
-  let cur = element.style[style];
+  const cur = element.style[style];
   element.style[style] = value;
 
   return () => {
@@ -280,17 +283,17 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
 }
 
 function scrollIntoView(target: Element) {
-  let root = document.scrollingElement || document.documentElement;
+  const root = document.scrollingElement || document.documentElement;
   while (target && target !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
-    let scrollable = getScrollParent(target);
+    const scrollable = getScrollParent(target);
     if (
       scrollable !== document.documentElement &&
       scrollable !== document.body &&
       scrollable !== target
     ) {
-      let scrollableTop = scrollable.getBoundingClientRect().top;
-      let targetTop = target.getBoundingClientRect().top;
+      const scrollableTop = scrollable.getBoundingClientRect().top;
+      const targetTop = target.getBoundingClientRect().top;
       if (targetTop > scrollableTop + target.clientHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }

package/src/utils.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { type ForwardedRef, type RefCallback } from 'react';
 
 export function getClosest(nums: number[], goal: number) {
   let closest = nums[0];
@@ -74,8 +74,9 @@ export function validateSnapTo({
 }) {
   if (snapTo < 0) {
     console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight +
-        Math.abs(snapTo)}.`
+      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${
+        sheetHeight + Math.abs(snapTo)
+      }.`
     );
   }
 
@@ -83,8 +84,8 @@ export function validateSnapTo({
 }
 
 export function mergeRefs<T = any>(
-  refs: React.ForwardedRef<T>[]
-): React.RefCallback<T> {
+  refs: Array<ForwardedRef<T>>
+): RefCallback<T> {
   return (value: any) => {
     refs.forEach((ref: any) => {
       if (typeof ref === 'function') {

package/dist/SheetBackdrop.d.ts

@@ -1,5 +0,0 @@
-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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & React.RefAttributes<any>>;
-export default SheetBackdrop;

package/dist/SheetContainer.d.ts

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

package/dist/SheetContent.d.ts

@@ -1,8 +0,0 @@
-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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & {
-    children?: React.ReactNode;
-    disableDrag?: boolean | undefined;
-} & React.RefAttributes<any>>;
-export default SheetContent;

package/dist/SheetHeader.d.ts

@@ -1,8 +0,0 @@
-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" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "className"> & {
-    children?: React.ReactNode;
-    disableDrag?: boolean | undefined;
-} & React.RefAttributes<any>>;
-export default SheetHeader;

package/dist/SheetScroller.d.ts

@@ -1,5 +0,0 @@
-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,12 +0,0 @@
-export declare const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
-export declare const IS_SSR: boolean;
-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;