index.d.ts 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import React from 'react';
  2. type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
  3. type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
  4. interface PromiseIExtendedResult extends ExternalToast {
  5. message: React.ReactNode;
  6. }
  7. type PromiseTExtendedResult<Data = any> = PromiseIExtendedResult | ((data: Data) => PromiseIExtendedResult | Promise<PromiseIExtendedResult>);
  8. type PromiseTResult<Data = any> = string | React.ReactNode | ((data: Data) => React.ReactNode | string | Promise<React.ReactNode | string>);
  9. type PromiseExternalToast = Omit<ExternalToast, 'description'>;
  10. type PromiseData<ToastData = any> = PromiseExternalToast & {
  11. loading?: string | React.ReactNode;
  12. success?: PromiseTResult<ToastData> | PromiseTExtendedResult<ToastData>;
  13. error?: PromiseTResult | PromiseTExtendedResult;
  14. description?: PromiseTResult;
  15. finally?: () => void | Promise<void>;
  16. };
  17. interface ToastClassnames {
  18. toast?: string;
  19. title?: string;
  20. description?: string;
  21. loader?: string;
  22. closeButton?: string;
  23. cancelButton?: string;
  24. actionButton?: string;
  25. success?: string;
  26. error?: string;
  27. info?: string;
  28. warning?: string;
  29. loading?: string;
  30. default?: string;
  31. content?: string;
  32. icon?: string;
  33. }
  34. interface ToastIcons {
  35. success?: React.ReactNode;
  36. info?: React.ReactNode;
  37. warning?: React.ReactNode;
  38. error?: React.ReactNode;
  39. loading?: React.ReactNode;
  40. close?: React.ReactNode;
  41. }
  42. interface Action {
  43. label: React.ReactNode;
  44. onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  45. actionButtonStyle?: React.CSSProperties;
  46. }
  47. interface ToastT {
  48. id: number | string;
  49. toasterId?: string;
  50. title?: (() => React.ReactNode) | React.ReactNode;
  51. type?: ToastTypes;
  52. icon?: React.ReactNode;
  53. jsx?: React.ReactNode;
  54. richColors?: boolean;
  55. invert?: boolean;
  56. closeButton?: boolean;
  57. dismissible?: boolean;
  58. description?: (() => React.ReactNode) | React.ReactNode;
  59. duration?: number;
  60. delete?: boolean;
  61. action?: Action | React.ReactNode;
  62. cancel?: Action | React.ReactNode;
  63. onDismiss?: (toast: ToastT) => void;
  64. onAutoClose?: (toast: ToastT) => void;
  65. promise?: PromiseT;
  66. cancelButtonStyle?: React.CSSProperties;
  67. actionButtonStyle?: React.CSSProperties;
  68. style?: React.CSSProperties;
  69. unstyled?: boolean;
  70. className?: string;
  71. classNames?: ToastClassnames;
  72. descriptionClassName?: string;
  73. position?: Position;
  74. testId?: string;
  75. }
  76. type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
  77. interface ToastOptions {
  78. className?: string;
  79. closeButton?: boolean;
  80. descriptionClassName?: string;
  81. style?: React.CSSProperties;
  82. cancelButtonStyle?: React.CSSProperties;
  83. actionButtonStyle?: React.CSSProperties;
  84. duration?: number;
  85. unstyled?: boolean;
  86. classNames?: ToastClassnames;
  87. closeButtonAriaLabel?: string;
  88. toasterId?: string;
  89. }
  90. type Offset = {
  91. top?: string | number;
  92. right?: string | number;
  93. bottom?: string | number;
  94. left?: string | number;
  95. } | string | number;
  96. interface ToasterProps {
  97. id?: string;
  98. invert?: boolean;
  99. theme?: 'light' | 'dark' | 'system';
  100. position?: Position;
  101. hotkey?: string[];
  102. richColors?: boolean;
  103. expand?: boolean;
  104. duration?: number;
  105. gap?: number;
  106. visibleToasts?: number;
  107. closeButton?: boolean;
  108. toastOptions?: ToastOptions;
  109. className?: string;
  110. style?: React.CSSProperties;
  111. offset?: Offset;
  112. mobileOffset?: Offset;
  113. dir?: 'rtl' | 'ltr' | 'auto';
  114. swipeDirections?: SwipeDirection[];
  115. icons?: ToastIcons;
  116. containerAriaLabel?: string;
  117. }
  118. type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
  119. interface ToastToDismiss {
  120. id: number | string;
  121. dismiss: boolean;
  122. }
  123. type ExternalToast = Omit<ToastT, 'id' | 'type' | 'title' | 'jsx' | 'delete' | 'promise'> & {
  124. id?: number | string;
  125. toasterId?: string;
  126. };
  127. type titleT = (() => React.ReactNode) | React.ReactNode;
  128. declare const toast: ((message: titleT, data?: ExternalToast) => string | number) & {
  129. success: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  130. info: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  131. warning: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  132. error: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  133. custom: (jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => string | number;
  134. message: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  135. promise: <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => (string & {
  136. unwrap: () => Promise<ToastData>;
  137. }) | (number & {
  138. unwrap: () => Promise<ToastData>;
  139. }) | {
  140. unwrap: () => Promise<ToastData>;
  141. };
  142. dismiss: (id?: number | string) => string | number;
  143. loading: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
  144. } & {
  145. getHistory: () => (ToastT | ToastToDismiss)[];
  146. getToasts: () => (ToastT | ToastToDismiss)[];
  147. };
  148. declare function useSonner(): {
  149. toasts: ToastT[];
  150. };
  151. declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLElement>>;
  152. export { Toaster, toast, useSonner };
  153. export type { Action, ExternalToast, ToastClassnames, ToastT, ToastToDismiss, ToasterProps };