@patreon/studio/module/components/Toast/types.d.ts

Patreon Studio Design System

import type { Action } from '../../types/actions';
export declare type ToastAction = Pick<Action, 'data-tag' | 'disabled' | 'href' | 'id' | 'label'> & {
    onClick?: () => void;
};
export declare type ToastState = 'entering' | 'visible' | 'leaving';
declare type Duration = number | 'infinite';
export interface ToastOptions {
    /**
     * Toast action, rendered as a `TextLink`.
     *
     * @deprecated Actions should be implemented by adding buttons/links/etc. to the toast contents in JSX form.
     */
    action?: ToastAction;
    /**
     * Specifies the data-tag attribute of the created toast.
     */
    'data-tag'?: string;
    /**
     * Duration of toast in milliseconds. Defaults to `5000` with no action,
     * `10000` with an action.
     */
    duration?: Duration;
    /**
     * Whether or not to show the close button in the toast. Defaults to `false`
     * for loading toasts, `true` for success, error, and custom toasts.
     */
    showCloseButton?: boolean;
    /**
     * Unique toast key. A toast call with the same key as a visible toast will
     * update the existing toast.
     */
    key?: string;
}
interface ToastResult {
    /**
     * Closes the toast, if it has not already been closed.
     */
    close: () => void;
}
export interface ToasterAPI {
    /**
     * Close all visible toasts.
     */
    closeAll: () => void;
    /**
     * Display a toast indicating that a user action failed.
     *
     * If `contents` is a string, then the text is wrapped in a `BodyText`
     * component with an 8px margin around it. Otherwise, contents is used as
     * the toast body without modification.
     */
    error: (contents: React.ReactNode | string, options?: Omit<ToastOptions, 'showCloseButton'>) => ToastResult;
    /**
     * Display a toast indicating that a user action is pending completion.
     *
     * If `contents` is a string, then the text is wrapped in a `BodyText`
     * component with an 8px margin around it. Otherwise, contents is used as
     * the toast body without modification.
     */
    loading: (contents: React.ReactNode | string, options?: Omit<ToastOptions, 'duration' | 'showCloseButton'>) => ToastResult;
    /**
     * Display a toast indicating that a user action was completed successfully.
     *
     * If `contents` is a string, then the text is wrapped in a `BodyText`
     * component with an 8px margin around it. Otherwise, contents is used as
     * the toast body without modification.
     */
    success: (contents: React.ReactNode | string, options?: Omit<ToastOptions, 'showCloseButton'>) => ToastResult;
    /**
     * Displays a toast without any additional UI. Use this for crafting toasts
     * that can't be implemented using `loading()`, `success()`, or `error()`
     */
    custom: (contents: React.ReactNode, options?: Omit<ToastOptions, 'action'>) => ToastResult;
}
export declare type ContentBuilder = (setState: (state: ToastState) => void) => React.ReactNode;
export interface ToastProps extends Pick<ToastOptions, 'action' | 'data-tag'> {
    duration: Duration;
    contentBuilder: ContentBuilder;
    isClosing?: boolean;
    testMode?: boolean;
    onClose: () => void;
}
export {};