react-modal-sheet 4.4.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +332 -188
  2. package/dist/index.d.mts +51 -39
  3. package/dist/index.d.ts +51 -39
  4. package/dist/index.js +854 -585
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +847 -579
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +5 -3
  9. package/src/SheetBackdrop.tsx +19 -6
  10. package/src/SheetContainer.tsx +34 -25
  11. package/src/SheetContent.tsx +77 -14
  12. package/src/SheetDragIndicator.tsx +52 -0
  13. package/src/SheetHeader.tsx +30 -30
  14. package/src/constants.ts +5 -3
  15. package/src/context.tsx +2 -42
  16. package/src/hooks/use-dimensions.ts +4 -4
  17. package/src/hooks/use-drag-constraints.ts +3 -3
  18. package/src/hooks/use-modal-effect.ts +19 -23
  19. package/src/hooks/use-resize-observer.ts +31 -0
  20. package/src/hooks/use-scroll-position.ts +72 -0
  21. package/src/hooks/use-sheet-state.ts +63 -0
  22. package/src/hooks/use-virtual-keyboard.ts +153 -0
  23. package/src/index.tsx +14 -10
  24. package/src/sheet.tsx +247 -209
  25. package/src/snap.ts +226 -0
  26. package/src/styles.ts +94 -53
  27. package/src/types.tsx +83 -79
  28. package/src/utils.ts +8 -149
  29. package/src/SheetScroller.tsx +0 -96
  30. package/src/hooks/use-event-callbacks.ts +0 -44
package/dist/index.d.mts CHANGED
@@ -1,74 +1,86 @@
1
1
  import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
2
- import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
2
+ import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, CSSProperties, FunctionComponent, HTMLAttributes, RefObject } from 'react';
3
3
 
4
- interface SheetEvents {
5
- onOpenStart?: () => void;
6
- onOpenEnd?: () => void;
7
- onCloseStart?: () => void;
8
- onCloseEnd?: () => void;
9
- onSnap?: (index: number) => void;
10
- }
11
- type SheetDetent = 'full-height' | 'content-height';
12
- type CommonProps = MotionProps & {
4
+ type SheetDetent = 'default' | 'full' | 'content';
5
+ type CommonProps = {
13
6
  className?: string;
7
+ style?: CSSProperties;
8
+ unstyled?: boolean;
14
9
  };
10
+ type MotionCommonProps = Omit<MotionProps, 'initial' | 'animate' | 'exit'> & CommonProps;
15
11
  type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
16
12
  interface SheetTweenConfig {
17
13
  ease: EasingDefinition;
18
14
  duration: number;
19
15
  }
20
16
  type SheetProps = {
21
- isOpen: boolean;
17
+ unstyled?: boolean;
18
+ avoidKeyboard?: boolean;
22
19
  children: ReactNode;
23
- onClose: () => void;
24
- /** @deprecated Use `modalEffectRootId` instead! */
25
- rootId?: string;
26
- modalEffectRootId?: string;
27
- mountPoint?: Element;
28
- snapPoints?: number[];
29
20
  detent?: SheetDetent;
30
- initialSnap?: number;
31
- tweenConfig?: SheetTweenConfig;
21
+ disableDismiss?: boolean;
32
22
  disableDrag?: boolean;
33
23
  disableScrollLocking?: boolean;
34
- prefersReducedMotion?: boolean;
35
- dragVelocityThreshold?: number;
36
24
  dragCloseThreshold?: number;
25
+ dragVelocityThreshold?: number;
26
+ initialSnap?: number;
27
+ isOpen: boolean;
28
+ modalEffectRootId?: string;
37
29
  modalEffectThreshold?: number;
38
- } & SheetEvents & MotionDivProps;
39
- type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
30
+ mountPoint?: Element;
31
+ prefersReducedMotion?: boolean;
32
+ snapPoints?: number[];
33
+ tweenConfig?: SheetTweenConfig;
34
+ onClose: () => void;
35
+ onCloseEnd?: () => void;
36
+ onCloseStart?: () => void;
37
+ onOpenEnd?: () => void;
38
+ onOpenStart?: () => void;
39
+ onSnap?: (index: number) => void;
40
+ } & MotionDivProps;
41
+ type SheetContainerProps = MotionCommonProps & CommonProps & {
40
42
  children: ReactNode;
41
43
  };
42
- type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConstraints' | 'dragMomentum' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
44
+ type SheetHeaderProps = MotionDivProps & CommonProps & {
43
45
  children?: ReactNode;
44
46
  disableDrag?: boolean;
45
47
  };
46
- type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
47
- type SheetScrollerProps = MotionDivProps & {
48
- draggableAt?: 'top' | 'bottom' | 'both';
49
- disableScroll?: boolean;
50
- autoPadding?: boolean;
48
+ type SheetContentProps = MotionDivProps & CommonProps & {
49
+ disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
50
+ disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
51
+ scrollRef?: RefObject<HTMLDivElement | null>;
51
52
  };
53
+ type SheetBackdropProps = MotionCommonProps & CommonProps;
54
+ type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
55
+ type SheetStateInfo = {
56
+ scrollPosition?: 'top' | 'bottom' | 'middle';
57
+ currentSnap?: number;
58
+ };
59
+ type SheetSnapPoint = {
60
+ snapIndex: number;
61
+ snapValue: number;
62
+ snapValueY: number;
63
+ };
64
+ type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
52
65
  type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
53
- type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
66
+ type HeaderComponent = ForwardRefExoticComponent<SheetHeaderProps & RefAttributes<any>>;
54
67
  type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
55
- type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
56
- type ScrollerComponent = ForwardRefExoticComponent<SheetScrollerProps & RefAttributes<any>>;
68
+ type ContentComponent = ForwardRefExoticComponent<SheetContentProps & RefAttributes<any>>;
57
69
  interface SheetCompoundComponent {
58
70
  Container: ContainerComponent;
59
- Header: DraggableComponent;
60
- Content: DraggableComponent;
71
+ Header: HeaderComponent;
72
+ DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
73
+ Content: ContentComponent;
61
74
  Backdrop: BackdropComponent;
62
- Scroller: ScrollerComponent;
63
75
  }
64
76
  type SheetCompound = SheetComponent & SheetCompoundComponent;
65
77
 
66
78
  interface SheetRef {
67
79
  y: MotionValue<number>;
68
- snapTo: (index: number) => void;
80
+ yInverted: MotionValue<number>;
81
+ height: number;
82
+ snapTo: (index: number) => Promise<void>;
69
83
  }
70
84
  declare const Sheet: SheetCompound;
71
- type SheetHeaderProps = SheetDraggableProps;
72
- type SheetContentProps = SheetDraggableProps;
73
85
 
74
- export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetScrollerProps };
86
+ export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };
package/dist/index.d.ts CHANGED
@@ -1,74 +1,86 @@
1
1
  import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
2
- import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
2
+ import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, CSSProperties, FunctionComponent, HTMLAttributes, RefObject } from 'react';
3
3
 
4
- interface SheetEvents {
5
- onOpenStart?: () => void;
6
- onOpenEnd?: () => void;
7
- onCloseStart?: () => void;
8
- onCloseEnd?: () => void;
9
- onSnap?: (index: number) => void;
10
- }
11
- type SheetDetent = 'full-height' | 'content-height';
12
- type CommonProps = MotionProps & {
4
+ type SheetDetent = 'default' | 'full' | 'content';
5
+ type CommonProps = {
13
6
  className?: string;
7
+ style?: CSSProperties;
8
+ unstyled?: boolean;
14
9
  };
10
+ type MotionCommonProps = Omit<MotionProps, 'initial' | 'animate' | 'exit'> & CommonProps;
15
11
  type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
16
12
  interface SheetTweenConfig {
17
13
  ease: EasingDefinition;
18
14
  duration: number;
19
15
  }
20
16
  type SheetProps = {
21
- isOpen: boolean;
17
+ unstyled?: boolean;
18
+ avoidKeyboard?: boolean;
22
19
  children: ReactNode;
23
- onClose: () => void;
24
- /** @deprecated Use `modalEffectRootId` instead! */
25
- rootId?: string;
26
- modalEffectRootId?: string;
27
- mountPoint?: Element;
28
- snapPoints?: number[];
29
20
  detent?: SheetDetent;
30
- initialSnap?: number;
31
- tweenConfig?: SheetTweenConfig;
21
+ disableDismiss?: boolean;
32
22
  disableDrag?: boolean;
33
23
  disableScrollLocking?: boolean;
34
- prefersReducedMotion?: boolean;
35
- dragVelocityThreshold?: number;
36
24
  dragCloseThreshold?: number;
25
+ dragVelocityThreshold?: number;
26
+ initialSnap?: number;
27
+ isOpen: boolean;
28
+ modalEffectRootId?: string;
37
29
  modalEffectThreshold?: number;
38
- } & SheetEvents & MotionDivProps;
39
- type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
30
+ mountPoint?: Element;
31
+ prefersReducedMotion?: boolean;
32
+ snapPoints?: number[];
33
+ tweenConfig?: SheetTweenConfig;
34
+ onClose: () => void;
35
+ onCloseEnd?: () => void;
36
+ onCloseStart?: () => void;
37
+ onOpenEnd?: () => void;
38
+ onOpenStart?: () => void;
39
+ onSnap?: (index: number) => void;
40
+ } & MotionDivProps;
41
+ type SheetContainerProps = MotionCommonProps & CommonProps & {
40
42
  children: ReactNode;
41
43
  };
42
- type SheetDraggableProps = Omit<CommonProps, 'drag' | 'dragElastic' | 'dragConstraints' | 'dragMomentum' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
44
+ type SheetHeaderProps = MotionDivProps & CommonProps & {
43
45
  children?: ReactNode;
44
46
  disableDrag?: boolean;
45
47
  };
46
- type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
47
- type SheetScrollerProps = MotionDivProps & {
48
- draggableAt?: 'top' | 'bottom' | 'both';
49
- disableScroll?: boolean;
50
- autoPadding?: boolean;
48
+ type SheetContentProps = MotionDivProps & CommonProps & {
49
+ disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
50
+ disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
51
+ scrollRef?: RefObject<HTMLDivElement | null>;
51
52
  };
53
+ type SheetBackdropProps = MotionCommonProps & CommonProps;
54
+ type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
55
+ type SheetStateInfo = {
56
+ scrollPosition?: 'top' | 'bottom' | 'middle';
57
+ currentSnap?: number;
58
+ };
59
+ type SheetSnapPoint = {
60
+ snapIndex: number;
61
+ snapValue: number;
62
+ snapValueY: number;
63
+ };
64
+ type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
52
65
  type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
53
- type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
66
+ type HeaderComponent = ForwardRefExoticComponent<SheetHeaderProps & RefAttributes<any>>;
54
67
  type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
55
- type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
56
- type ScrollerComponent = ForwardRefExoticComponent<SheetScrollerProps & RefAttributes<any>>;
68
+ type ContentComponent = ForwardRefExoticComponent<SheetContentProps & RefAttributes<any>>;
57
69
  interface SheetCompoundComponent {
58
70
  Container: ContainerComponent;
59
- Header: DraggableComponent;
60
- Content: DraggableComponent;
71
+ Header: HeaderComponent;
72
+ DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
73
+ Content: ContentComponent;
61
74
  Backdrop: BackdropComponent;
62
- Scroller: ScrollerComponent;
63
75
  }
64
76
  type SheetCompound = SheetComponent & SheetCompoundComponent;
65
77
 
66
78
  interface SheetRef {
67
79
  y: MotionValue<number>;
68
- snapTo: (index: number) => void;
80
+ yInverted: MotionValue<number>;
81
+ height: number;
82
+ snapTo: (index: number) => Promise<void>;
69
83
  }
70
84
  declare const Sheet: SheetCompound;
71
- type SheetHeaderProps = SheetDraggableProps;
72
- type SheetContentProps = SheetDraggableProps;
73
85
 
74
- export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetScrollerProps };
86
+ export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };