@progress/kendo-react-dialogs/index.d.ts

React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import { default as default_2 } from 'prop-types';
import { Draggable } from '@progress/kendo-react-common';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import * as React_2 from 'react';
import { ZIndexContext } from '@progress/kendo-react-common';
import { ZIndexContextType } from '@progress/kendo-react-common';

/**
 * Lists the possible layout of the dialogs action buttons.
 */
export declare type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';

/** @hidden */
export declare type Dialog = DialogHandle;

/**
 * Represents the [KendoReact Dialog component]({% slug overview_dialog %}).
 *
 * Accepts properties of type [DialogProps]({% slug api_dialogs_dialogprops %}).
 * Obtaining the `ref` returns an object of type [DialogHandle]({% slug api_dialogs_dialoghandle %}).
 */
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<any>>;

/**
 * Returns the action bar of the Dialog.
 *
 * @returns React.ReactElement
 */
export declare const DialogActionsBar: React_2.FunctionComponent<DialogActionsBarProps>;

/**
 * Represents the props of the [KendoReact DialogActionsBar component]({% slug overview_dialog %}).
 */
declare interface DialogActionsBarProps {
    /**
     * Specifies the possible layouts of the action buttons ([see example]({% slug actionbuttons_dialog %})). Defaults to `stretched`.
     */
    layout?: ActionsLayout;
    /**
     * @hidden
     */
    children?: any;
}

/**
 * @hidden
 */
export declare interface DialogCloseEvent extends BaseEvent<Dialog> {
}

/**
 * Represent the `ref` of the Dialog component.
 */
export declare interface DialogHandle extends Pick<DialogWithoutContext, keyof DialogWithoutContext> {
}

/**
 * Represents the props of the [KendoReact Dialog component]({% slug overview_dialog %}).
 */
export declare interface DialogProps {
    /**
     * Focus the Dialog container automatically when mounted. By default the autoFocus is false.
     */
    autoFocus?: boolean;
    /**
     * Specifies the query selector used to set the initial focus ([see examples]({% slug initial_focus_dialogs %})).
     */
    autoFocusedElement?: string;
    /**
     * Sets the title of the Dialog ([see example]({% slug title_dialog %})). If `title` is not specified, the Dialog does not render a **Close** button.
     */
    title?: string | React.ReactElement<any>;
    /**
     * Sets a class of the Dialog DOM element.
     */
    className?: string;
    /**
     * Specifies whether a close button should be rendered at the top corner of the dialog.
     */
    closeIcon?: boolean;
    /**
     * Specifies if the Dialog will be modal by rendering an overlay under the component. Defaults to `true`.
     */
    modal?: boolean;
    /**
     * Set styles to the Dialog overlay element rendered when the `modal` prop is enabled.
     */
    overlayStyle?: React.CSSProperties;
    /**
     * Specifies the width of the Dialog ([see example]({% slug dimensions_dialog %})).
     */
    width?: number | string;
    /**
     * Specifies the height of the Dialog ([see example]({% slug dimensions_dialog %})).
     */
    height?: number | string;
    /**
     * Specifies the minimum width of the Dialog.
     */
    minWidth?: number | string;
    /**
     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
     */
    onClose?: (event: DialogCloseEvent) => void;
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Sets the `aria-labelledby` value.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * The styles that are applied to the Dialog.
     */
    style?: React.CSSProperties;
    /**
     * The styles that are applied to the content of the Dialog.
     */
    contentStyle?: React.CSSProperties;
    /**
     * Defines the container to which the Dialog will be appended. Defaults to body.
     * * If set to `null` the Dialog will be rendered without React Portal.
     */
    appendTo?: any;
    /**
     * Configures the `themeColor` of the Dialog.
     *
     * The available options are:
     * - primary
     * - dark
     * - light
     *
     */
    themeColor?: 'primary' | 'dark' | 'light';
}

/**
 * Represents the PropsContext of the `Dialog` component.
 * Used for global configuration of all `Dialog` instances.
 */
export declare const DialogPropsContext: React_2.Context<(p: DialogProps) => DialogProps>;

declare interface DialogState {
    zIndex: number;
}

/** @hidden */
declare class DialogWithoutContext extends React_2.Component<DialogProps, DialogState> {
    static displayName: string;
    /**
     * @hidden
     */
    static propTypes: {
        title: default_2.Requireable<any>;
        id: default_2.Requireable<string>;
        dir: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
        closeIcon: default_2.Requireable<boolean>;
        width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        minWidth: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        autoFocus: default_2.Requireable<boolean>;
    };
    /**
     * @hidden
     */
    static defaultProps: {
        autoFocus: boolean;
    };
    /**
     * @hidden
     */
    static contextType: React_2.Context<ZIndexContextType>;
    /**
     * @hidden
     */
    context: React_2.ContextType<typeof ZIndexContext>;
    /**
     * @hidden
     */
    element?: HTMLDivElement | null;
    private get _id();
    private titleId;
    private contentId;
    private activeElement;
    constructor(props: DialogProps);
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    onCloseDialog: (event: React_2.SyntheticEvent<any>) => void;
    /**
     * @hidden
     */
    onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
    /**
     * @hidden
     */
    render(): JSX_2.Element | null;
    private getActionBar;
    private getContent;
    private generateTitleId;
    private generateContentId;
    private getCurrentZIndex;
    private getDocument;
}

/** @hidden */
declare type Window_2 = WindowHandle;

/**
 * Represents the [KendoReact Window component]({% slug overview_window %}).
 *
 * Accepts properties of type [WindowProps]({% slug api_dialogs_windowprops %}).
 * Obtaining the `ref` returns an object of type [WindowHandle]({% slug api_dialogs_windowhandle %}).
 */
declare const Window_2: React_2.ForwardRefExoticComponent<WindowProps & React_2.RefAttributes<any>>;
export { Window_2 as Window }

/**
 * Returns the action bar of the Window.
 *
 * @returns React.ReactElement
 */
export declare const WindowActionsBar: React_2.FunctionComponent<WindowActionsBarProps>;

/**
 * Represents the props of the [KendoReact WindowActionsBar component]({% slug overview_dialog %}).
 */
declare interface WindowActionsBarProps {
    /**
     * Specifies the possible layouts of the action buttons ([see example]({% slug actionbuttons_window %})). Defaults to `end`.
     */
    layout?: ActionsLayout;
    /**
     * @hidden
     */
    children?: any;
}

export declare interface WindowActionsEvent extends BaseEvent<Window_2> {
    state?: 'DEFAULT' | 'FULLSCREEN' | 'MINIMIZED';
}

/**
 * Represent the `ref` of the Window component.
 */
export declare interface WindowHandle extends Pick<WindowWithoutContext, keyof WindowWithoutContext> {
    /**
     * The Window element.
     */
    element?: HTMLDivElement | null;
    /**
     * **Deprecated.** Use `element` instead.
     */
    windowElement?: HTMLDivElement | null;
}

export declare interface WindowMoveEvent {
    /**
     * An event target.
     */
    target: Window_2;
    /**
     * A native DOM event.
     */
    nativeEvent: any;
    /**
     * Indicates that dragging is completed and that the user dropped the resize handler.
     */
    end: boolean;
    /**
     * Indicates that the move operation was initialized through dragging. If the Window is moved through the keyboard, the value will be `false`.
     */
    drag: boolean;
    /**
     * The new top value of the Window.
     */
    top: number;
    /**
     * The new left value of the Window.
     */
    left: number;
    /**
     * The new width value of the Window.
     */
    width: number;
    /**
     * The new height value of the Window.
     */
    height: number;
}

/**
 * Represents the props of the [KendoReact Window component]({% slug overview_window %}).
 */
export declare interface WindowProps {
    /**
     * Defines the container to which the Window will be appended. Defaults to its parent element.
     * * If set to `null` the Window will be rendered without React Portal.
     */
    appendTo?: HTMLElement | null;
    /**
     * Focus the Window container automatically when mounted. By default the autoFocus is true.
     */
    autoFocus?: boolean;
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Specifies if the Window will render the close button.
     */
    closeButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window stage will change on title double click. The this is on by default.
     */
    doubleClickStageChange?: boolean;
    /**
     * Specifies if the Window will be draggable ([see example]({% slug positioningdragging_window %}#toc-dragging)).
     */
    draggable?: boolean;
    /**
     * Specifies the height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)).
     */
    height?: number;
    /**
     * Specifies the initial `left` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The Window will be in an uncontrolled mode.
     */
    initialLeft?: number;
    /**
     * Specifies the initial `top` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The component will be in an uncontrolled mode.
     */
    initialTop?: number;
    /**
     * Specifies the initial width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     */
    initialWidth?: number;
    /**
     * Specifies the initial height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     */
    initialHeight?: number;
    /**
     * Specifies the left coordinates of the Window.
     */
    left?: number;
    /**
     * Specifies if the Window will render the maximize button.
     */
    maximizeButton?: React.ComponentType<any>;
    /**
     * Specifies the minimum height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    minHeight?: number;
    /**
     * Specifies the minimum width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    minWidth?: number;
    /**
     * Specifies if the Window will render the minimize button.
     */
    minimizeButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window will be modal by rendering an overlay under the component.
     */
    modal?: boolean;
    /**
     * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    resizable?: boolean;
    /**
     * Specifies if the Window will render the restore button.
     */
    restoreButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window content will update during resizing.
     */
    shouldUpdateOnDrag?: boolean;
    /**
     * Specifies the title of the Window ([see example]({% slug title_window %})).
     */
    title?: React.ReactNode | string;
    /**
     * Specifies the top coordinates of the Window.
     */
    top?: number;
    /**
     * Specifies the width of the Window.
     */
    width?: number;
    /**
     * Controls the state of the Window ([see example]({% slug windowstage_window %})).
     *
     * The supported values are:
     * * `DEFAULT`
     * * `MINIMIZED`
     * * `FULLSCREEN`
     */
    stage?: windowStage | string;
    /**
     * Set styles to the Window element.
     */
    style?: React.CSSProperties;
    /**
     * Set styles to the Window overlay element rendered when the `modal` prop is enabled.
     */
    overlayStyle?: React.CSSProperties;
    /**
     * Sets a class of the Window DOM element.
     */
    className?: string;
    /**
     * Configures the `themeColor` of the Window.
     *
     * The available options are:
     * - primary
     * - dark
     * - light
     *
     */
    themeColor?: 'primary' | 'dark' | 'light';
    /**
     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
     */
    onClose?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window is dragged.
     */
    onMove?: (event: WindowMoveEvent) => void;
    /**
     * Fires when the `DEFAULT`, `FULLSCREEN`, or `MINIMIZED` state of the Window is changed.
     */
    onStageChange?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window resizes.
     */
    onResize?: (event: WindowMoveEvent) => void;
    /**
     * Sets the `id` attribute value of the wrapper element of the Window.
     */
    id?: string;
}

/**
 * Represents the PropsContext of the `Window` component.
 * Used for global configuration of all `Window` instances.
 */
export declare const WindowPropsContext: React_2.Context<(p: WindowProps) => WindowProps>;

declare enum windowStage {
    DEFAULT = "DEFAULT",
    FULLSCREEN = "FULLSCREEN",
    MINIMIZED = "MINIMIZED"
}

declare interface WindowState {
    stage: windowStage | string;
    isDragging: boolean;
    top: number;
    left: number;
    width: number;
    height: number;
    focused: boolean;
    zIndex: number;
}

/** @hidden */
export declare class WindowWithoutContext extends React_2.Component<WindowProps, WindowState> {
    static displayName: string;
    /**
     * @hidden
     */
    static propTypes: {
        width: default_2.Requireable<number>;
        height: default_2.Requireable<number>;
        left: default_2.Requireable<number>;
        top: default_2.Requireable<number>;
        initialWidth: default_2.Requireable<number>;
        initialHeight: default_2.Requireable<number>;
        initialLeft: default_2.Requireable<number>;
        initialTop: default_2.Requireable<number>;
        minWidth: default_2.Requireable<number>;
        minHeight: default_2.Requireable<number>;
        resizable: default_2.Requireable<boolean>;
        draggable: default_2.Requireable<boolean>;
        title: default_2.Requireable<any>;
        shouldUpdateOnDrag: default_2.Requireable<boolean>;
        stage: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
        overlayStyle: default_2.Requireable<object>;
        autoFocus: default_2.Requireable<boolean>;
    };
    /**
     * @hidden
     */
    static defaultProps: {
        minWidth: number;
        minHeight: number;
        resizable: boolean;
        draggable: boolean;
        modal: boolean;
        doubleClickStageChange: boolean;
        autoFocus: boolean;
    };
    /**
     * @hidden
     */
    static contextType: React_2.Context<ZIndexContextType>;
    /**
     * @hidden
     */
    context: React_2.ContextType<typeof ZIndexContext>;
    /**
     * **Deprecated.** Use `element` instead.
     */
    windowElement?: HTMLDivElement | null;
    /**
     * The Window element.
     */
    element?: HTMLDivElement | null;
    /**
     * @hidden
     */
    windowTitle?: any;
    draggable: Draggable | null;
    private windowCoordinatesState?;
    private offSetCoordinates?;
    private get _id();
    private titleId;
    private _blurTimeout?;
    private mounted;
    private activeElement;
    constructor(props: WindowProps);
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: WindowProps): void;
    /**
     * @hidden
     */
    onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
    /**
     * @hidden
     */
    onPress: (data: any) => void;
    /**
     * @hidden
     */
    onDrag: (data: any) => void;
    /**
     * @hidden
     */
    onRelease: (data: any) => void;
    /**
     * @hidden
     */
    onFocus: () => void;
    /**
     * @hidden
     */
    onBlur: () => void;
    /**
     * @hidden
     */
    render(): JSX_2.Element | null;
    private get top();
    private get left();
    private get width();
    private get height();
    private get windowStage();
    private getInitialTop;
    private getInitialLeft;
    private getInitialWidth;
    private getInitialHeight;
    private handleMinimize;
    private handleFullscreen;
    private handleRestore;
    private handleCloseWindow;
    private handleDoubleClick;
    private handleResize;
    private dispatchMoveEvent;
    private handleBrowserWindowResize;
    private getActionBar;
    private getContent;
    private getCurrentZIndex;
    private getDocument;
    private getWindow;
    private generateTitleId;
}

export { }