@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 } 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';

/**
 * 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 %}).
 *
 * @remarks
 * Supported children components are: {@link DialogActionsBar}.
 */
export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<DialogHandle | null>>;

/**
 * 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<DialogHandle> {
}

/**
 * Represent the `ref` of the Dialog component.
 */
export declare interface DialogHandle {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLDivElement | null;
    /**
     * The props of the Dialog component.
     */
    props: DialogProps;
}

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

/** @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 %}).
 *
 * @remarks
 * Supported children components are: {@link WindowActionsBar}.
 */
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> {
    /**
     * The current stage state of the Window.
     */
    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. If set to `null`, the Window will be rendered without React Portal.
     *
     * @default parent element
     *
     * @example
     * ```jsx
     * <Window appendTo={document.body} />
     * ```
     */
    appendTo?: HTMLElement | null;
    /**
     * Focus the Window container automatically when mounted.
     *
     * @default true
     *
     * @example
     * ```jsx
     * <Window autoFocus={false} />
     * ```
     */
    autoFocus?: boolean;
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Specifies if the Window will render the close button.
     *
     * @example
     * ```jsx
     * <Window closeButton={CustomCloseButton} />
     * ```
     */
    closeButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window stage will change on title double click.
     *
     * @default true
     *
     * @example
     * ```jsx
     * <Window doubleClickStageChange={false} />
     * ```
     */
    doubleClickStageChange?: boolean;
    /**
     * Specifies if the Window will be draggable ([see example]({% slug positioningdragging_window %}#toc-dragging)).
     *
     * @default true
     *
     * @example
     * ```jsx
     * <Window draggable={true} />
     * ```
     */
    draggable?: boolean;
    /**
     * Specifies the height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). When set to `null`, the window is automatically sized to fit its content.
     *
     * @example
     * ```jsx
     * <Window height={500} />
     * ```
     */
    height?: number | null;
    /**
     * Specifies the initial `left` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The Window will be in an uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Window initialLeft={100} />
     * ```
     */
    initialLeft?: number;
    /**
     * Specifies the initial `top` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The component will be in an uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Window initialTop={50} />
     * ```
     */
    initialTop?: number;
    /**
     * Specifies the initial width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Window initialWidth={300} />
     * ```
     */
    initialWidth?: number;
    /**
     * Specifies the initial height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     *
     * @example
     * ```jsx
     * <Window initialHeight={200} />
     * ```
     */
    initialHeight?: number | null;
    /**
     * Specifies the left coordinates of the Window.
     *
     * @example
     * ```jsx
     * <Window left={150} />
     * ```
     */
    left?: number;
    /**
     * Specifies if the Window will render the maximize button.
     *
     * @example
     * ```jsx
     * <Window maximizeButton={CustomMaximizeButton} />
     * ```
     */
    maximizeButton?: React.ComponentType<any>;
    /**
     * Specifies the minimum height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     *
     * @default 100
     *
     * @example
     * ```jsx
     * <Window minHeight={100} />
     * ```
     */
    minHeight?: number;
    /**
     * Specifies the minimum width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     *
     * @default 120
     *
     * @example
     * ```jsx
     * <Window minWidth={100} />
     * ```
     */
    minWidth?: number;
    /**
     * Specifies if the Window will render the minimize button.
     *
     * @example
     * ```jsx
     * <Window minimizeButton={CustomMinimizeButton} />
     * ```
     */
    minimizeButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window will be modal by rendering an overlay under the component.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Window modal={true} />
     * ```
     */
    modal?: boolean;
    /**
     * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     *
     * @default true
     *
     * @example
     * ```jsx
     * <Window resizable={true} />
     * ```
     */
    resizable?: boolean;
    /**
     * Specifies if the Window will render the restore button.
     *
     * @example
     * ```jsx
     * <Window restoreButton={CustomRestoreButton} />
     * ```
     */
    restoreButton?: React.ComponentType<any>;
    /**
     * Specifies if the Window content will update during resizing.
     *
     * @example
     * ```jsx
     * <Window shouldUpdateOnDrag={true} />
     * ```
     */
    shouldUpdateOnDrag?: boolean;
    /**
     * Specifies the title of the Window ([see example]({% slug title_window %})).
     *
     * @example
     * ```jsx
     * <Window title="My Window" />
     * ```
     */
    title?: React.ReactNode | string;
    /**
     * Specifies the top coordinates of the Window.
     *
     * @example
     * ```jsx
     * <Window top={100} />
     * ```
     */
    top?: number;
    /**
     * Specifies the width of the Window.
     *
     * @example
     * ```jsx
     * <Window width={400} />
     * ```
     */
    width?: number;
    /**
     * Controls the state of the Window ([see example]({% slug windowstage_window %})).
     *
     * The supported values are:
     * * `DEFAULT`
     * * `MINIMIZED`
     * * `FULLSCREEN`
     *
     * @example
     * ```jsx
     * <Window stage="DEFAULT" />
     * ```
     */
    stage?: windowStage | string;
    /**
     * Set styles to the Window element.
     *
     * @example
     * ```jsx
     * <Window style={{ backgroundColor: 'red' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Set styles to the Window overlay element rendered when the `modal` prop is enabled.
     *
     * @example
     * ```jsx
     * <Window overlayStyle={{ opacity: 0.5 }} />
     * ```
     */
    overlayStyle?: React.CSSProperties;
    /**
     * Sets a class of the Window DOM element.
     *
     * @example
     * ```jsx
     * <Window className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Configures the `themeColor` of the Window.
     *
     * The available options are:
     * - primary
     * - dark
     * - light
     *
     * @example
     * ```jsx
     * <Window themeColor="dark" />
     * ```
     */
    themeColor?: 'primary' | 'dark' | 'light';
    /**
     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
     *
     * @example
     * ```jsx
     * <Window onClose={(event) => console.log('Window closed', event)} />
     * ```
     */
    onClose?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window is dragged.
     *
     * @example
     * ```jsx
     * <Window onMove={(event) => console.log('Window moved', event)} />
     * ```
     */
    onMove?: (event: WindowMoveEvent) => void;
    /**
     * Fires when the `DEFAULT`, `FULLSCREEN`, or `MINIMIZED` state of the Window is changed.
     *
     * @example
     * ```jsx
     * <Window onStageChange={(event) => console.log('Stage changed', event)} />
     * ```
     */
    onStageChange?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window resizes.
     *
     * @example
     * ```jsx
     * <Window onResize={(event) => console.log('Window resized', event)} />
     * ```
     */
    onResize?: (event: WindowMoveEvent) => void;
    /**
     * Sets the `id` attribute value of the wrapper element of the Window.
     *
     * @example
     * ```jsx
     * <Window id="my-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 | null;
    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;
    /**
     * The draggable handle for the Window component.
     */
    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.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 { }