index.d.mts 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import * as DialogPrimitive from '@radix-ui/react-dialog';
  2. import React from 'react';
  3. interface WithFadeFromProps {
  4. /**
  5. * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
  6. * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
  7. * You can also use px values, which doesn't take screen height into account.
  8. */
  9. snapPoints: (number | string)[];
  10. /**
  11. * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
  12. */
  13. fadeFromIndex: number;
  14. }
  15. interface WithoutFadeFromProps {
  16. /**
  17. * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
  18. * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
  19. * You can also use px values, which doesn't take screen height into account.
  20. */
  21. snapPoints?: (number | string)[];
  22. fadeFromIndex?: never;
  23. }
  24. type DialogProps = {
  25. activeSnapPoint?: number | string | null;
  26. setActiveSnapPoint?: (snapPoint: number | string | null) => void;
  27. children?: React.ReactNode;
  28. open?: boolean;
  29. /**
  30. * Number between 0 and 1 that determines when the drawer should be closed.
  31. * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
  32. * @default 0.25
  33. */
  34. closeThreshold?: number;
  35. /**
  36. * When `true` the `body` doesn't get any styles assigned from Vaul
  37. */
  38. noBodyStyles?: boolean;
  39. onOpenChange?: (open: boolean) => void;
  40. shouldScaleBackground?: boolean;
  41. /**
  42. * When `false` we don't change body's background color when the drawer is open.
  43. * @default true
  44. */
  45. setBackgroundColorOnScale?: boolean;
  46. /**
  47. * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
  48. * @default 500ms
  49. */
  50. scrollLockTimeout?: number;
  51. /**
  52. * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
  53. */
  54. fixed?: boolean;
  55. /**
  56. * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
  57. * @default false
  58. */
  59. handleOnly?: boolean;
  60. /**
  61. * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
  62. * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
  63. * @default true
  64. */
  65. dismissible?: boolean;
  66. onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
  67. onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
  68. /**
  69. * When `false` it allows to interact with elements outside of the drawer without closing it.
  70. * @default true
  71. */
  72. modal?: boolean;
  73. nested?: boolean;
  74. onClose?: () => void;
  75. /**
  76. * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
  77. * @default 'bottom'
  78. */
  79. direction?: 'top' | 'bottom' | 'left' | 'right';
  80. /**
  81. * Opened by default, skips initial enter animation. Still reacts to `open` state changes
  82. * @default false
  83. */
  84. defaultOpen?: boolean;
  85. /**
  86. * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
  87. * @default false
  88. */
  89. disablePreventScroll?: boolean;
  90. /**
  91. * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
  92. * Setting it to `false` will fall back to the default browser behavior.
  93. * @default true when {@link snapPoints} is defined
  94. */
  95. repositionInputs?: boolean;
  96. /**
  97. * Disabled velocity based swiping for snap points.
  98. * This means that a snap point won't be skipped even if the velocity is high enough.
  99. * Useful if each snap point in a drawer is equally important.
  100. * @default false
  101. */
  102. snapToSequentialPoint?: boolean;
  103. container?: HTMLElement | null;
  104. /**
  105. * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
  106. * Useful to revert any state changes for example.
  107. */
  108. onAnimationEnd?: (open: boolean) => void;
  109. preventScrollRestoration?: boolean;
  110. autoFocus?: boolean;
  111. } & (WithFadeFromProps | WithoutFadeFromProps);
  112. declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): React.JSX.Element;
  113. declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
  114. type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
  115. declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
  116. type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
  117. preventCycle?: boolean;
  118. };
  119. declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  120. preventCycle?: boolean | undefined;
  121. } & React.RefAttributes<HTMLDivElement>>;
  122. declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): React.JSX.Element;
  123. type PortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
  124. declare function Portal(props: PortalProps): React.JSX.Element;
  125. declare const Drawer: {
  126. Root: typeof Root;
  127. NestedRoot: typeof NestedRoot;
  128. Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
  129. Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
  130. Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
  131. Portal: typeof Portal;
  132. Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
  133. preventCycle?: boolean | undefined;
  134. } & React.RefAttributes<HTMLDivElement>>;
  135. Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
  136. Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
  137. Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
  138. };
  139. export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };