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

Patreon Studio Design System

/**
 * @author @Patreon/fe-core
 **/
import type React from 'react';
import type { Action } from '../../types/actions';
import type { ComponentTextProps } from '../../types/text';
import type { HeadingTextProps } from '../HeadingText/types';
export declare type CloseOrigin = 'closeButton' | 'backdrop' | 'escapeKey' | 'swipe';
export interface DialogProps {
    /** Content of Dialog */
    children?: React.ReactNode;
    /** HTML ID for Dialog to be used in aria attributes */
    id: string;
    /** Flag to display Dialog */
    isOpen: boolean;
    /** Callback when dialog cover or close button is clicked */
    onCloseRequest?: (ev: React.MouseEvent<HTMLElement>, origin: CloseOrigin) => void;
    /**
     * Callback when dialog back button is clicked,
     * back button is only visible when this prop is defined
     **/
    onBackRequest?: (ev: React.MouseEvent<HTMLElement>) => void;
    /** Callback when dialog open animation is complete */
    onOpenAnimationComplete?: () => void;
    /** Callback when dialog close animation is complete */
    onCloseAnimationComplete?: () => void;
    /** Size of Dialog */
    size?: 'sm' | 'lg' | 'xl';
    /** Controls padding added to the dialog content */
    padding?: 'default' | 'none';
    /** Controls which section of the dialog is scrollable */
    scrollable?: 'all' | 'inner';
    /** Media displayed in header of Dialog */
    media?: React.ReactNode;
    /** Title of the Dialog */
    title?: React.ReactNode;
    /** Title alignment of the Dialog */
    titleAlign?: 'left' | 'center';
    /** Aria Label for Dialog */
    ariaLabel?: string;
    /** Flag to display close button */
    showCloseButton?: boolean;
    /** Primary action included in footer */
    primaryAction?: Action;
    /** Secondary action included in footer */
    secondaryAction?: Action;
    /** Tertiary action included in footer */
    tertiaryAction?: Action;
    /** Layout of the actions include in footer */
    actionLayout?: 'horizontal' | 'vertical' | 'vertical-full';
    /** Additional content included in the footer */
    metaData?: React.ReactNode;
    /**
     *  Unique identifier of the component used for logging.
     */
    loggerId?: string;
    /**
     * Optional additional fields to log in `Studio Action`
     */
    loggerProps?: Record<string, string | number | boolean>;
    /** tag used for testing purposes */
    'data-tag'?: string;
    /**
     * Defines the flow position of the dialog
     * @deprecated this property exists to support legacy behavior
     * within shims and should not be used directly.
     * */
    flow?: 'inline' | 'fullscreen';
}
export interface DialogShimProps extends Omit<DialogProps, 'secondaryAction' | 'tertiaryAction' | 'flow'> {
    /** Secondary actions included in Dialog footer */
    secondaryActions?: Action[];
    /** Legacy Width */
    width?: 'Sm' | 'Md' | 'Lg' | 'Xl';
    /** Legacy fixed flag */
    fixed?: boolean;
    /**
     * Legacy flag to expand the height and width to 100% on mobile
     * @deprecated this flag does nothing
     * */
    fullScreenOnMobile?: boolean;
    /**
     * Whether the modal should animate on open/close
     * @deprecated this flag does nothing
     */
    motion?: boolean;
}
export interface DialogTitleShimProps extends Omit<HeadingTextProps, 'as'> {
    id?: string;
    as?: ComponentTextProps['as'];
}