/** * @author @Patreon/fe-core **/ import type React from 'react'; import type { Action } from '~/types/actions'; export 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, origin: CloseOrigin) => void; /** * Callback when dialog back button is clicked, * back button is only visible when this prop is defined **/ onBackRequest?: (ev: React.MouseEvent) => 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; /** 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'; }