@syncfusion/react-popups/src/dialog/dialog.d.ts

A package of React popup components such as Tooltip that is used to display information or messages in separate pop-ups.

import * as React from 'react';
import { HTMLAttributes } from 'react';
import { DragEvent } from '@syncfusion/react-base';
import { ResizeDirections } from '../common/resize';
/**
 * Specifies the animation effects available for the Dialog component.
 * These effects control how the dialog appears and disappears on the screen.
 */
export type DialogEffect = 'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom' | 'None';
/**
 * Specifies the positioning options available for the Dialog component.
 *
 * Available positions:
 * - LeftTop: Dialog positioned at the left-top corner
 * - CenterTop: Dialog positioned at the center-top
 * - RightTop: Dialog positioned at the right-top corner
 * - LeftCenter: Dialog positioned at the left-center
 * - Center: Dialog positioned at the screen center
 * - RightCenter: Dialog positioned at the right-center
 * - LeftBottom: Dialog positioned at the left-bottom corner
 * - CenterBottom: Dialog positioned at the center-bottom
 * - RightBottom: Dialog positioned at the right-bottom corner
 *
 */
export type DialogPosition = 'LeftTop' | 'CenterTop' | 'RightTop' | 'LeftCenter' | 'Center' | 'RightCenter' | 'LeftBottom' | 'CenterBottom' | 'RightBottom';
/**
 * Specifies the configuration for the dialog's animation behavior, controlling how it appears and disappears.
 */
export interface DialogAnimationProps {
    /**
     * Specifies the type of animation effect to apply to the dialog.
     *
     * @default 'Fade'
     */
    effect: DialogEffect;
    /**
     * Specifies the animation duration in milliseconds. Higher values result in slower animations.
     *
     * @default 400
     */
    duration: number;
    /**
     * Specifies the delay before starting the animation, in milliseconds.
     *
     * @default 0
     */
    delay: number;
}
/**
 * Specifies the event arguments for resize events.
 */
export interface ResizeEvent {
    /**
     * Specifies the original browser event that triggered the resize action.
     */
    event: Event;
    /**
     * Specifies the current width of the element being resized.
     * This value is updated during the resize operation.
     */
    width: number;
    /**
     * Specifies the current height of the element being resized.
     * This value is updated during the resize operation.
     */
    height: number;
    /**
     * Specifies the direction in which the resize is occurring (e.g., 'North', 'SouthEast').
     * Indicates which handle is being used for the current resize operation.
     */
    direction: ResizeDirections;
    /**
     * Specifies whether the resize operation should be canceled.
     * Set to true in event handlers to prevent the resize start operation from proceeding.
     */
    cancel?: boolean;
}
/**
 * Specifies the properties of the Dialog component.
 */
export interface DialogProps {
    /**
     * Specifies whether the dialog is displayed (true) or hidden (false).
     * This is a controlled property that must be managed by the parent component.
     *
     * @default false
     */
    open: boolean;
    /**
     * Specifies the content to display in the dialog header section.
     * This can be text or any valid React node.
     *
     * @default -
     */
    header?: React.ReactNode;
    /**
     * Specifies the content to display in the dialog footer section.
     * This is typically used for action buttons like "OK", "Cancel", etc.
     *
     * @default -
     */
    footer?: React.ReactNode;
    /**
     * Specifies if the dialog should behave as a modal.
     * When true, an overlay prevents interaction with the underlying content, traps focus within the dialog, and blocks scrolling of the background content.
     * When false, the dialog appears without an overlay and allows interaction with the page behind it.
     *
     * @default true
     */
    modal?: boolean;
    /**
     * Specifies the close icon to display in the dialog header.
     * When set to true, displays the default close icon. When set to a ReactNode, displays the custom icon/element provided.
     * When set to false, no close icon is displayed.
     *
     * @default true
     */
    closeIcon?: React.ReactNode;
    /**
     * Specifies the element that should receive focus when the dialog opens.
     * This overrides the default focus behavior, which focuses on the first focusable element.
     *
     * @default -
     */
    initialFocusRef?: React.RefObject<HTMLElement>;
    /**
     * Specifies whether the dialog can be dragged by its header to reposition it.
     *
     * @default false
     */
    draggable?: boolean;
    /**
     * Specifies whether the dialog can be resized by dragging its edges or corners.
     *
     * @default false
     */
    resizable?: boolean;
    /**
     * Specifies which edges or corners of the dialog can be dragged to resize it.
     * Only applies when the resizable is true.
     *
     * @default ['SouthEast']
     */
    resizeHandles?: ResizeDirections[];
    /**
     * Specifies the positioning of the dialog on the screen.
     * Uses predefined positions or custom coordinates via style properties.
     *
     * @default 'Center'
     */
    position?: DialogPosition;
    /**
     * Specifies the animation effect, duration, and delay for the dialog's entry and exit.
     *
     * @default { effect: 'Fade', duration: 400, delay: 0 }
     */
    animation?: DialogAnimationProps;
    /**
     * Specifies the element where the dialog should be rendered.
     * By default, dialogs are rendered at the document body, but this prop allows to render the dialog within any element.
     *
     * @default document.body
     */
    target?: HTMLElement;
    /**
     * Specifies whether the dialog should expand to fill the entire viewport.
     * The dialog maintains its header, content, and footer structure but takes up the full width and height of the screen.
     *
     * @default false
     */
    fullScreen?: boolean;
    /**
     * Specifies the callback function invoked when the dialog needs to close.
     * This occurs when the user clicks the overlay, presses the ESC key,
     * or clicks the close icon (if provided).
     *
     * @event onClose
     */
    onClose?: (event?: React.SyntheticEvent | React.KeyboardEvent) => void;
    /**
     * Specifies the callback function that triggers when the dialog starts being dragged.
     *
     * @event onDragStart
     */
    onDragStart?: (event: DragEvent) => void;
    /**
     * Specifies the callback function that triggers while the dialog is being dragged.
     *
     * @event onDrag
     */
    onDrag?: (event: MouseEvent | TouchEvent) => void;
    /**
     * Specifies the callback function that triggers when the dialog stops being dragged.
     *
     * @event onDragStop
     */
    onDragStop?: (event: MouseEvent | TouchEvent) => void;
    /**
     * Specifies the callback function that triggers when the dialog starts being resized.
     *
     * @event onResizeStart
     */
    onResizeStart?: (event: ResizeEvent) => void;
    /**
     * Specifies the callback function that triggers while the dialog is being resized.
     *
     * @event onResize
     */
    onResize?: (event: ResizeEvent) => void;
    /**
     * Specifies the callback function that triggers when the dialog stops being resized.
     *
     * @event onResizeStop
     */
    onResizeStop?: (event: ResizeEvent) => void;
}
/**
 * Specifies the interface representing the Dialog component.
 */
export interface IDialog extends DialogProps {
    /**
     * Specifies the DOM element of the Dialog component.
     *
     * @private
     */
    element?: HTMLElement | null;
}
type DialogComponentProps = DialogProps & Omit<HTMLAttributes<HTMLDivElement>, keyof DialogProps>;
/**
 * Specifies a Dialog component that provides a modal or non-modal overlay to display content above the main interface.
 *
 * The Dialog component can be used to create alerts, confirmation dialogs, forms, or any content that requires
 * user attention or interaction. It supports multiple customization options including positioning, animation effects,
 * header/footer structure, and accessibility features.
 *
 * Use header and footer props to create a structured dialog layout:
 *
 * ```typescript
 * import { Dialog } from "@syncfusion/react-popups";
 *
 * const [isOpen, setIsOpen] = useState(false);
 *
 * <Dialog open={isOpen} onClose={() => setIsOpen(false)} modal={true} header="Dialog Title" footer={<><button onClick={() => setIsOpen(false)}>Close</button></>} >
 *      <p>This is the dialog content.</p>
 * </Dialog>
 * ```
 */
export declare const Dialog: React.ForwardRefExoticComponent<DialogComponentProps & React.RefAttributes<IDialog>>;
declare const _default: React.NamedExoticComponent<DialogProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof DialogProps> & React.RefAttributes<IDialog>>;
export default _default;