@progress/kendo-react-dialogs - npm Package Compare versions

Comparing version 13.3.0 to 13.4.0-develop.1

constants.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/** @hidden */
+export declare const DATA_DIALOGS_ID = "data-windowid";
+/** @hidden */
+export declare const DEFAULT_DIALOGS_ZINDEX = 10002;
+/** @hidden */
+export declare const ZINDEX_DIALOGS_STEP = 2;
+/** @hidden */
+export declare const DIALOGS_SELECTOR = ".k-window:not(.k-dialog), .k-dialog-wrapper";

Dialog.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DialogProps } from './DialogProps.js';
+import * as React from 'react';
+/**
+ * Represent the `ref` of the Dialog component.
+ */
+export 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 PropsContext of the `Dialog` component.
+ * Used for global configuration of all `Dialog` instances.
+ */
+export declare const DialogPropsContext: React.Context<(p: DialogProps) => DialogProps>;
+/**
+ * Represents the [KendoReact Dialog component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
+ *
+ * Accepts properties of type [DialogProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops).
+ * Obtaining the `ref` returns an object of type [DialogHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialoghandle).
+ *
+ * @remarks
+ * Supported children components are: {@link DialogActionsBar}.
+ */
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle | null>>;
+/**
+ * The default props of the Dialog component.
+ */
+export declare const DialogDefaultProps: {
+    autoFocus: boolean;
+    modal: boolean;
+    closeIcon: boolean;
+};

DialogActionsBar.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionsLayout } from './models/actions-layout.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact DialogActionsBar component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
+ */
+export interface DialogActionsBarProps {
+    /**
+     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons)). Defaults to `stretched`.
+     */
+    layout?: ActionsLayout;
+    /**
+     * @hidden
+     */
+    children?: any;
+}
+/**
+ * Returns the action bar of the Dialog.
+ *
+ * @returns React.ReactElement
+ */
+export declare const DialogActionsBar: React.FunctionComponent<DialogActionsBarProps>;

DialogProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DialogCloseEvent } from './events.js';
+/**
+ * Represents the props of the [KendoReact Dialog component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
+ */
+export 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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/initial-focus)).
+     *
+     * @example
+     * ```jsx
+     * <Dialog autoFocusedElement="#input-id" />
+     * ```
+     */
+    autoFocusedElement?: string;
+    /**
+     * Sets the title of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/title)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
+     *
+     * @example
+     * ```jsx
+     * <Dialog width="400px" />
+     * ```
+     */
+    width?: number | string;
+    /**
+     * Specifies the height of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
+     *
+     * @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';
+}

DialogTitleBar.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface DialogTitleBarProps {
+    /**
+     * @hidden
+     */
+    onCloseButtonClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * @hidden
+     */
+    closeIcon?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare const DialogTitleBar: React.FunctionComponent<DialogTitleBarProps>;

events.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DialogHandle } from './Dialog.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+import { Window } from './Window.js';
+/**
+ * @hidden
+ */
+export interface DialogCloseEvent extends BaseEvent<DialogHandle> {
+}
+export interface WindowActionsEvent extends BaseEvent<Window> {
+    /**
+     * The current stage state of the Window.
+     */
+    state?: 'DEFAULT' | 'FULLSCREEN' | 'MINIMIZED';
+}
+export interface WindowMoveEvent {
+    /**
+     * An event target.
+     */
+    target: Window;
+    /**
+     * 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;
+}

messages/index.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const dialogsWindowMaximizeButton = "dialogs.windowMaximizeButton";
+/**
+ * @hidden
+ */
+export declare const dialogsWindowMinimizeButton = "dialogs.windowMinimizeButton";
+/**
+ * @hidden
+ */
+export declare const dialogsWindowRestoreButton = "dialogs.windowRestoreButton";
+/**
+ * @hidden
+ */
+export declare const dialogsWindowCloseButton = "dialogs.windowCloseButton";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "dialogs.windowMaximizeButton": string;
+    "dialogs.windowMinimizeButton": string;
+    "dialogs.windowRestoreButton": string;
+    "dialogs.windowCloseButton": string;
+};

MiddleLayerOptimization.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface MiddleLayerOptimizationProps {
+    shouldUpdateOnDrag?: boolean;
+    isDragging?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export declare class MiddleLayerOptimization extends React.Component<MiddleLayerOptimizationProps, {}> {
+    shouldComponentUpdate(nextProps: MiddleLayerOptimizationProps): boolean;
+    render(): React.ReactNode;
+}
+export {};

models/actions-layout.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Lists the possible layout of the dialogs action buttons.
+ */
+export type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';

package-metadata.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package-metadata.mjs

+// Generated file. DO NOT EDIT.
+/**
+ * @hidden
+ */
+export const packageMetadata = Object.freeze({
+    name: '@progress/kendo-react-dialogs',
+    productName: 'KendoReact',
+    productCode: 'KENDOUIREACT',
+    productCodes: ['KENDOUIREACT'],
+    publishDate: 0,
+    version: '13.4.0-develop.1',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
+});

StageEnum.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export declare enum windowStage {
+    DEFAULT = "DEFAULT",
+    FULLSCREEN = "FULLSCREEN",
+    MINIMIZED = "MINIMIZED"
+}

utils.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/** @hidden */
+export declare const getMaxZIndex: (currentZIndex: number, currentDocument: Document | null, currentWindowId: string) => number;

Window.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { WindowProps } from './WindowProps.js';
+import { Draggable, ZIndexContext } from '@progress/kendo-react-common';
+import { windowStage } from './StageEnum.js';
+import * as React from 'react';
+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.Component<WindowProps, WindowState> {
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        width: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<number>;
+        left: PropTypes.Requireable<number>;
+        top: PropTypes.Requireable<number>;
+        initialWidth: PropTypes.Requireable<number>;
+        initialHeight: PropTypes.Requireable<number>;
+        initialLeft: PropTypes.Requireable<number>;
+        initialTop: PropTypes.Requireable<number>;
+        minWidth: PropTypes.Requireable<number>;
+        minHeight: PropTypes.Requireable<number>;
+        resizable: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<any>;
+        shouldUpdateOnDrag: PropTypes.Requireable<boolean>;
+        stage: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        overlayStyle: PropTypes.Requireable<object>;
+        autoFocus: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        minWidth: number;
+        minHeight: number;
+        resizable: boolean;
+        draggable: boolean;
+        modal: boolean;
+        doubleClickStageChange: boolean;
+        autoFocus: boolean;
+    };
+    /**
+     * @hidden
+     */
+    static contextType: React.Context<import('@progress/kendo-react-common').ZIndexContextType>;
+    /**
+     * @hidden
+     */
+    context: React.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.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(): React.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;
+}
+/**
+ * Represents the PropsContext of the `Window` component.
+ * Used for global configuration of all `Window` instances.
+ */
+export declare const WindowPropsContext: React.Context<(p: WindowProps) => WindowProps>;
+/**
+ * Represent the `ref` of the Window component.
+ */
+export interface WindowHandle extends Pick<WindowWithoutContext, keyof WindowWithoutContext> {
+    /**
+     * The Window element.
+     */
+    element?: HTMLDivElement | null;
+    /**
+     * **Deprecated.** Use `element` instead.
+     */
+    windowElement?: HTMLDivElement | null;
+}
+/** @hidden */
+export type Window = WindowHandle;
+/**
+ * Represents the [KendoReact Window component](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
+ *
+ * Accepts properties of type [WindowProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowprops).
+ * Obtaining the `ref` returns an object of type [WindowHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowhandle).
+ *
+ * @remarks
+ * Supported children components are: {@link WindowActionsBar}.
+ */
+export declare const Window: React.ForwardRefExoticComponent<WindowProps & React.RefAttributes<any>>;
+export {};

WindowActionsBar.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionsLayout } from './models/actions-layout.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact WindowActionsBar component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
+ */
+export interface WindowActionsBarProps {
+    /**
+     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/action-buttons)). Defaults to `end`.
+     */
+    layout?: ActionsLayout;
+    /**
+     * @hidden
+     */
+    children?: any;
+}
+/**
+ * Returns the action bar of the Window.
+ *
+ * @returns React.ReactElement
+ */
+export declare const WindowActionsBar: React.FunctionComponent<WindowActionsBarProps>;

WindowProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { WindowActionsEvent, WindowMoveEvent } from './events.js';
+import { windowStage } from './StageEnum.js';
+/**
+ * Represents the props of the [KendoReact Window component](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
+ */
+export 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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-dragging)).
+     *
+     * @default true
+     *
+     * @example
+     * ```jsx
+     * <Window draggable={true} />
+     * ```
+     */
+    draggable?: boolean;
+    /**
+     * Specifies the height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-positioning)). The Window will be in an uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Window initialLeft={100} />
+     * ```
+     */
+    initialLeft?: number;
+    /**
+     * Specifies the initial `top` value ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
+     *
+     * @default 100
+     *
+     * @example
+     * ```jsx
+     * <Window minHeight={100} />
+     * ```
+     */
+    minHeight?: number;
+    /**
+     * Specifies the minimum width of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/title)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/minimizing-fullscreen)).
+     *
+     * 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;
+}

WindowResizeHandlers.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ResizeHandlersProps {
+    onResize: (e: any, args: {
+        end: boolean;
+        direction: any;
+    }) => void;
+}
+/**
+ * @hidden
+ */
+export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
+    render(): React.JSX.Element;
+}

WindowTitlebar.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { windowStage } from './StageEnum.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface WindowTitleBarProps {
+    /**
+     * @hidden
+     */
+    onCloseButtonClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    onDoubleClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    onMinimizeButtonClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    onFullScreenButtonClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    onRestoreButtonClick?: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    stage?: windowStage | string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * @hidden
+     */
+    closeButton?: React.ComponentType<any>;
+    /**
+     * @hidden
+     */
+    minimizeButton?: React.ComponentType<any>;
+    /**
+     * @hidden
+     */
+    maximizeButton?: React.ComponentType<any>;
+    /**
+     * @hidden
+     */
+    restoreButton?: React.ComponentType<any>;
+    /**
+     * @hidden
+     */
+    forwardedRef?: any;
+}
+/**
+ * @hidden
+ */
+export declare const WindowTitleBar: React.ForwardRefExoticComponent<WindowTitleBarProps & React.RefAttributes<unknown>>;

codemods/utils.js

@@ -1,9 +0,2 @@
-/**
- * @license
- *-------------------------------------------------------------------------------------------
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
- * Licensed under commercial license. See LICENSE.md in the package root for more information
- *-------------------------------------------------------------------------------------------
- */
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=(e,r,i,o)=>{const s=r.find(e.ImportDeclaration,{source:{value:o}});if(s.size()>0){const t=s.get(0).node.specifiers;t.some(n=>n.type==="ImportSpecifier"&&n.imported.name===i)||t.push(e.importSpecifier(e.identifier(i)))}else{const t=e.importDeclaration([e.importSpecifier(e.identifier(i))],e.literal(o));r.get().node.program.body.unshift(t)}};exports.ensureImportExists=p;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2RpYWxvZ3MvY29kZW1vZHMvdXRpbHMudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSlNDb2Rlc2hpZnQgfSBmcm9tICdqc2NvZGVzaGlmdCc7XG5cbmV4cG9ydCBjb25zdCBlbnN1cmVJbXBvcnRFeGlzdHMgPSAoajogSlNDb2Rlc2hpZnQsIHJvb3Q6IGFueSwgaW1wb3J0TmFtZTogc3RyaW5nLCBzb3VyY2U6IHN0cmluZykgPT4ge1xuICAgIGNvbnN0IGltcG9ydERlY2xhcmF0aW9uID0gcm9vdC5maW5kKGouSW1wb3J0RGVjbGFyYXRpb24sIHtcbiAgICAgICAgc291cmNlOiB7IHZhbHVlOiBzb3VyY2UgfVxuICAgIH0pO1xuXG4gICAgaWYgKGltcG9ydERlY2xhcmF0aW9uLnNpemUoKSA+IDApIHtcbiAgICAgICAgY29uc3Qgc3BlY2lmaWVycyA9IGltcG9ydERlY2xhcmF0aW9uLmdldCgwKS5ub2RlLnNwZWNpZmllcnM7XG4gICAgICAgIGNvbnN0IGFscmVhZHlJbXBvcnRlZCA9IHNwZWNpZmllcnMuc29tZShcbiAgICAgICAgICAgIChzcGVjaWZpZXI6IGFueSkgPT4gc3BlY2lmaWVyLnR5cGUgPT09ICdJbXBvcnRTcGVjaWZpZXInICYmIHNwZWNpZmllci5pbXBvcnRlZC5uYW1lID09PSBpbXBvcnROYW1lXG4gICAgICAgICk7XG5cbiAgICAgICAgaWYgKCFhbHJlYWR5SW1wb3J0ZWQpIHtcbiAgICAgICAgICAgIHNwZWNpZmllcnMucHVzaChqLmltcG9ydFNwZWNpZmllcihqLmlkZW50aWZpZXIoaW1wb3J0TmFtZSkpKTtcbiAgICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IG5ld0ltcG9ydCA9IGouaW1wb3J0RGVjbGFyYXRpb24oW2ouaW1wb3J0U3BlY2lmaWVyKGouaWRlbnRpZmllcihpbXBvcnROYW1lKSldLCBqLmxpdGVyYWwoc291cmNlKSk7XG4gICAgICAgIHJvb3QuZ2V0KCkubm9kZS5wcm9ncmFtLmJvZHkudW5zaGlmdChuZXdJbXBvcnQpO1xuICAgIH1cbn07XG4iXSwibmFtZXMiOlsiZW5zdXJlSW1wb3J0RXhpc3RzIiwiaiIsInJvb3QiLCJpbXBvcnROYW1lIiwic291cmNlIiwiaW1wb3J0RGVjbGFyYXRpb24iLCJzcGVjaWZpZXJzIiwic3BlY2lmaWVyIiwibmV3SW1wb3J0Il0sIm1hcHBpbmdzIjoiZ0ZBRU8sTUFBTUEsRUFBcUIsQ0FBQ0MsRUFBZ0JDLEVBQVdDLEVBQW9CQyxJQUFtQixDQUNqRyxNQUFNQyxFQUFvQkgsRUFBSyxLQUFLRCxFQUFFLGtCQUFtQixDQUNyRCxPQUFRLENBQUUsTUFBT0csQ0FBTyxDQUFBLENBQzNCLEVBRUcsR0FBQUMsRUFBa0IsS0FBSyxFQUFJLEVBQUcsQ0FDOUIsTUFBTUMsRUFBYUQsRUFBa0IsSUFBSSxDQUFDLEVBQUUsS0FBSyxXQUN6QkMsRUFBVyxLQUM5QkMsR0FBbUJBLEVBQVUsT0FBUyxtQkFBcUJBLEVBQVUsU0FBUyxPQUFTSixDQUFBLEdBSXhGRyxFQUFXLEtBQUtMLEVBQUUsZ0JBQWdCQSxFQUFFLFdBQVdFLENBQVUsQ0FBQyxDQUFDLENBQy9ELEtBQ0csQ0FDSCxNQUFNSyxFQUFZUCxFQUFFLGtCQUFrQixDQUFDQSxFQUFFLGdCQUFnQkEsRUFBRSxXQUFXRSxDQUFVLENBQUMsQ0FBQyxFQUFHRixFQUFFLFFBQVFHLENBQU0sQ0FBQyxFQUN0R0YsRUFBSyxNQUFNLEtBQUssUUFBUSxLQUFLLFFBQVFNLENBQVMsQ0FDbEQsQ0FDSiJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2RpYWxvZ3MvY29kZW1vZHMvdXRpbHMudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSlNDb2Rlc2hpZnQgfSBmcm9tICdqc2NvZGVzaGlmdCc7XG5cbmV4cG9ydCBjb25zdCBlbnN1cmVJbXBvcnRFeGlzdHMgPSAoajogSlNDb2Rlc2hpZnQsIHJvb3Q6IGFueSwgaW1wb3J0TmFtZTogc3RyaW5nLCBzb3VyY2U6IHN0cmluZykgPT4ge1xuICAgIGNvbnN0IGltcG9ydERlY2xhcmF0aW9uID0gcm9vdC5maW5kKGouSW1wb3J0RGVjbGFyYXRpb24sIHtcbiAgICAgICAgc291cmNlOiB7IHZhbHVlOiBzb3VyY2UgfVxuICAgIH0pO1xuXG4gICAgaWYgKGltcG9ydERlY2xhcmF0aW9uLnNpemUoKSA+IDApIHtcbiAgICAgICAgY29uc3Qgc3BlY2lmaWVycyA9IGltcG9ydERlY2xhcmF0aW9uLmdldCgwKS5ub2RlLnNwZWNpZmllcnM7XG4gICAgICAgIGNvbnN0IGFscmVhZHlJbXBvcnRlZCA9IHNwZWNpZmllcnMuc29tZShcbiAgICAgICAgICAgIChzcGVjaWZpZXI6IGFueSkgPT4gc3BlY2lmaWVyLnR5cGUgPT09ICdJbXBvcnRTcGVjaWZpZXInICYmIHNwZWNpZmllci5pbXBvcnRlZC5uYW1lID09PSBpbXBvcnROYW1lXG4gICAgICAgICk7XG5cbiAgICAgICAgaWYgKCFhbHJlYWR5SW1wb3J0ZWQpIHtcbiAgICAgICAgICAgIHNwZWNpZmllcnMucHVzaChqLmltcG9ydFNwZWNpZmllcihqLmlkZW50aWZpZXIoaW1wb3J0TmFtZSkpKTtcbiAgICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IG5ld0ltcG9ydCA9IGouaW1wb3J0RGVjbGFyYXRpb24oW2ouaW1wb3J0U3BlY2lmaWVyKGouaWRlbnRpZmllcihpbXBvcnROYW1lKSldLCBqLmxpdGVyYWwoc291cmNlKSk7XG4gICAgICAgIHJvb3QuZ2V0KCkubm9kZS5wcm9ncmFtLmJvZHkudW5zaGlmdChuZXdJbXBvcnQpO1xuICAgIH1cbn07XG4iXSwibmFtZXMiOlsiZW5zdXJlSW1wb3J0RXhpc3RzIiwiaiIsInJvb3QiLCJpbXBvcnROYW1lIiwic291cmNlIiwiaW1wb3J0RGVjbGFyYXRpb24iLCJzcGVjaWZpZXJzIiwic3BlY2lmaWVyIiwibmV3SW1wb3J0Il0sIm1hcHBpbmdzIjoiZ0ZBRU8sTUFBTUEsRUFBcUIsQ0FBQ0MsRUFBZ0JDLEVBQVdDLEVBQW9CQyxJQUFtQixDQUNqRyxNQUFNQyxFQUFvQkgsRUFBSyxLQUFLRCxFQUFFLGtCQUFtQixDQUNyRCxPQUFRLENBQUUsTUFBT0csQ0FBQSxDQUFPLENBQzNCLEVBRUQsR0FBSUMsRUFBa0IsS0FBQSxFQUFTLEVBQUcsQ0FDOUIsTUFBTUMsRUFBYUQsRUFBa0IsSUFBSSxDQUFDLEVBQUUsS0FBSyxXQUN6QkMsRUFBVyxLQUM5QkMsR0FBbUJBLEVBQVUsT0FBUyxtQkFBcUJBLEVBQVUsU0FBUyxPQUFTSixDQUFBLEdBSXhGRyxFQUFXLEtBQUtMLEVBQUUsZ0JBQWdCQSxFQUFFLFdBQVdFLENBQVUsQ0FBQyxDQUFDLENBRW5FLEtBQU8sQ0FDSCxNQUFNSyxFQUFZUCxFQUFFLGtCQUFrQixDQUFDQSxFQUFFLGdCQUFnQkEsRUFBRSxXQUFXRSxDQUFVLENBQUMsQ0FBQyxFQUFHRixFQUFFLFFBQVFHLENBQU0sQ0FBQyxFQUN0R0YsRUFBSyxNQUFNLEtBQUssUUFBUSxLQUFLLFFBQVFNLENBQVMsQ0FDbEQsQ0FDSiJ9

codemods/v11/dialog-handle.js

@@ -1,9 +0,2 @@
-/**
- * @license
- *-------------------------------------------------------------------------------------------
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
- * Licensed under commercial license. See LICENSE.md in the package root for more information
- *-------------------------------------------------------------------------------------------
- */
 "use strict";const a=require("../utils.js");function p(o,c){const n=c.jscodeshift,t=n(o.source);if(!(o.path.endsWith(".ts")||o.path.endsWith(".tsx")))return t.toSource();let r=!1;const i=e=>{e&&e.type==="Identifier"&&e.name==="Dialog"&&(e.name="DialogHandle",r=!0)};return t.find(n.TSTypeReference).forEach(e=>{const{typeName:s}=e.node;i(s)}),t.find(n.TSAsExpression).forEach(e=>{const{typeAnnotation:s}=e.node;s&&s.type==="TSTypeReference"&&i(s.typeName)}),r&&a.ensureImportExists(n,t,"DialogHandle","@progress/kendo-react-dialogs"),t.toSource()}module.exports=p;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWhhbmRsZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvZGlhbG9ncy9jb2RlbW9kcy92MTEvZGlhbG9nLWhhbmRsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBUEksIEZpbGVJbmZvLCBKU0NvZGVzaGlmdCB9IGZyb20gJ2pzY29kZXNoaWZ0JztcbmltcG9ydCB7IGVuc3VyZUltcG9ydEV4aXN0cyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gKGZpbGVJbmZvOiBGaWxlSW5mbywgYXBpOiBBUEkpIHtcbiAgICBjb25zdCBqOiBKU0NvZGVzaGlmdCA9IGFwaS5qc2NvZGVzaGlmdDtcbiAgICBjb25zdCByb290ID0gaihmaWxlSW5mby5zb3VyY2UpO1xuXG4gICAgY29uc3QgaXNUeXBlU2NyaXB0ID0gZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzJykgfHwgZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzeCcpO1xuICAgIGlmICghaXNUeXBlU2NyaXB0KSB7XG4gICAgICAgIHJldHVybiByb290LnRvU291cmNlKCk7XG4gICAgfVxuXG4gICAgbGV0IGhhc0NoYW5nZXMgPSBmYWxzZTtcblxuICAgIGNvbnN0IHJlcGxhY2VUeXBlTmFtZSA9ICh0eXBlTmFtZTogYW55KSA9PiB7XG4gICAgICAgIGlmICh0eXBlTmFtZSAmJiB0eXBlTmFtZS50eXBlID09PSAnSWRlbnRpZmllcicgJiYgdHlwZU5hbWUubmFtZSA9PT0gJ0RpYWxvZycpIHtcbiAgICAgICAgICAgIHR5cGVOYW1lLm5hbWUgPSAnRGlhbG9nSGFuZGxlJztcbiAgICAgICAgICAgIGhhc0NoYW5nZXMgPSB0cnVlO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJvb3QuZmluZChqLlRTVHlwZVJlZmVyZW5jZSkuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVOYW1lIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIHJlcGxhY2VUeXBlTmFtZSh0eXBlTmFtZSk7XG4gICAgfSk7XG5cbiAgICByb290LmZpbmQoai5UU0FzRXhwcmVzc2lvbikuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVBbm5vdGF0aW9uIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIGlmICh0eXBlQW5ub3RhdGlvbiAmJiB0eXBlQW5ub3RhdGlvbi50eXBlID09PSAnVFNUeXBlUmVmZXJlbmNlJykge1xuICAgICAgICAgICAgcmVwbGFjZVR5cGVOYW1lKHR5cGVBbm5vdGF0aW9uLnR5cGVOYW1lKTtcbiAgICAgICAgfVxuICAgIH0pO1xuXG4gICAgaWYgKGhhc0NoYW5nZXMpIHtcbiAgICAgICAgZW5zdXJlSW1wb3J0RXhpc3RzKGosIHJvb3QsICdEaWFsb2dIYW5kbGUnLCAnQHByb2dyZXNzL2tlbmRvLXJlYWN0LWRpYWxvZ3MnKTtcbiAgICB9XG5cbiAgICByZXR1cm4gcm9vdC50b1NvdXJjZSgpO1xufVxuIl0sIm5hbWVzIjpbImRpYWxvZ0hhbmRsZSIsImZpbGVJbmZvIiwiYXBpIiwiaiIsInJvb3QiLCJoYXNDaGFuZ2VzIiwicmVwbGFjZVR5cGVOYW1lIiwidHlwZU5hbWUiLCJwYXRoIiwidHlwZUFubm90YXRpb24iLCJlbnN1cmVJbXBvcnRFeGlzdHMiXSwibWFwcGluZ3MiOiI0Q0FHQSxTQUFBQSxFQUF5QkMsRUFBb0JDLEVBQVUsQ0FDbkQsTUFBTUMsRUFBaUJELEVBQUksWUFDckJFLEVBQU9ELEVBQUVGLEVBQVMsTUFBTSxFQUc5QixHQUFJLEVBRGlCQSxFQUFTLEtBQUssU0FBUyxLQUFLLEdBQUtBLEVBQVMsS0FBSyxTQUFTLE1BQU0sR0FFL0UsT0FBT0csRUFBSyxXQUdoQixJQUFJQyxFQUFhLEdBRVgsTUFBQUMsRUFBbUJDLEdBQWtCLENBQ25DQSxHQUFZQSxFQUFTLE9BQVMsY0FBZ0JBLEVBQVMsT0FBUyxXQUNoRUEsRUFBUyxLQUFPLGVBQ0hGLEVBQUEsR0FDakIsRUFHSixPQUFBRCxFQUFLLEtBQUtELEVBQUUsZUFBZSxFQUFFLFFBQVNLLEdBQVMsQ0FDckMsS0FBQSxDQUFFLFNBQUFELENBQVMsRUFBSUMsRUFBSyxLQUMxQkYsRUFBZ0JDLENBQVEsQ0FBQSxDQUMzQixFQUVESCxFQUFLLEtBQUtELEVBQUUsY0FBYyxFQUFFLFFBQVNLLEdBQVMsQ0FDcEMsS0FBQSxDQUFFLGVBQUFDLENBQWUsRUFBSUQsRUFBSyxLQUM1QkMsR0FBa0JBLEVBQWUsT0FBUyxtQkFDMUNILEVBQWdCRyxFQUFlLFFBQVEsQ0FDM0MsQ0FDSCxFQUVHSixHQUNtQkssRUFBQUEsbUJBQUFQLEVBQUdDLEVBQU0sZUFBZ0IsK0JBQStCLEVBR3hFQSxFQUFLLFVBQ2hCIn0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWhhbmRsZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvZGlhbG9ncy9jb2RlbW9kcy92MTEvZGlhbG9nLWhhbmRsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBUEksIEZpbGVJbmZvLCBKU0NvZGVzaGlmdCB9IGZyb20gJ2pzY29kZXNoaWZ0JztcbmltcG9ydCB7IGVuc3VyZUltcG9ydEV4aXN0cyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gKGZpbGVJbmZvOiBGaWxlSW5mbywgYXBpOiBBUEkpIHtcbiAgICBjb25zdCBqOiBKU0NvZGVzaGlmdCA9IGFwaS5qc2NvZGVzaGlmdDtcbiAgICBjb25zdCByb290ID0gaihmaWxlSW5mby5zb3VyY2UpO1xuXG4gICAgY29uc3QgaXNUeXBlU2NyaXB0ID0gZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzJykgfHwgZmlsZUluZm8ucGF0aC5lbmRzV2l0aCgnLnRzeCcpO1xuICAgIGlmICghaXNUeXBlU2NyaXB0KSB7XG4gICAgICAgIHJldHVybiByb290LnRvU291cmNlKCk7XG4gICAgfVxuXG4gICAgbGV0IGhhc0NoYW5nZXMgPSBmYWxzZTtcblxuICAgIGNvbnN0IHJlcGxhY2VUeXBlTmFtZSA9ICh0eXBlTmFtZTogYW55KSA9PiB7XG4gICAgICAgIGlmICh0eXBlTmFtZSAmJiB0eXBlTmFtZS50eXBlID09PSAnSWRlbnRpZmllcicgJiYgdHlwZU5hbWUubmFtZSA9PT0gJ0RpYWxvZycpIHtcbiAgICAgICAgICAgIHR5cGVOYW1lLm5hbWUgPSAnRGlhbG9nSGFuZGxlJztcbiAgICAgICAgICAgIGhhc0NoYW5nZXMgPSB0cnVlO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIHJvb3QuZmluZChqLlRTVHlwZVJlZmVyZW5jZSkuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVOYW1lIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIHJlcGxhY2VUeXBlTmFtZSh0eXBlTmFtZSk7XG4gICAgfSk7XG5cbiAgICByb290LmZpbmQoai5UU0FzRXhwcmVzc2lvbikuZm9yRWFjaCgocGF0aCkgPT4ge1xuICAgICAgICBjb25zdCB7IHR5cGVBbm5vdGF0aW9uIH0gPSBwYXRoLm5vZGU7XG4gICAgICAgIGlmICh0eXBlQW5ub3RhdGlvbiAmJiB0eXBlQW5ub3RhdGlvbi50eXBlID09PSAnVFNUeXBlUmVmZXJlbmNlJykge1xuICAgICAgICAgICAgcmVwbGFjZVR5cGVOYW1lKHR5cGVBbm5vdGF0aW9uLnR5cGVOYW1lKTtcbiAgICAgICAgfVxuICAgIH0pO1xuXG4gICAgaWYgKGhhc0NoYW5nZXMpIHtcbiAgICAgICAgZW5zdXJlSW1wb3J0RXhpc3RzKGosIHJvb3QsICdEaWFsb2dIYW5kbGUnLCAnQHByb2dyZXNzL2tlbmRvLXJlYWN0LWRpYWxvZ3MnKTtcbiAgICB9XG5cbiAgICByZXR1cm4gcm9vdC50b1NvdXJjZSgpO1xufVxuIl0sIm5hbWVzIjpbImRpYWxvZ0hhbmRsZSIsImZpbGVJbmZvIiwiYXBpIiwiaiIsInJvb3QiLCJoYXNDaGFuZ2VzIiwicmVwbGFjZVR5cGVOYW1lIiwidHlwZU5hbWUiLCJwYXRoIiwidHlwZUFubm90YXRpb24iLCJlbnN1cmVJbXBvcnRFeGlzdHMiXSwibWFwcGluZ3MiOiI0Q0FHQSxTQUFBQSxFQUF5QkMsRUFBb0JDLEVBQVUsQ0FDbkQsTUFBTUMsRUFBaUJELEVBQUksWUFDckJFLEVBQU9ELEVBQUVGLEVBQVMsTUFBTSxFQUc5QixHQUFJLEVBRGlCQSxFQUFTLEtBQUssU0FBUyxLQUFLLEdBQUtBLEVBQVMsS0FBSyxTQUFTLE1BQU0sR0FFL0UsT0FBT0csRUFBSyxTQUFBLEVBR2hCLElBQUlDLEVBQWEsR0FFakIsTUFBTUMsRUFBbUJDLEdBQWtCLENBQ25DQSxHQUFZQSxFQUFTLE9BQVMsY0FBZ0JBLEVBQVMsT0FBUyxXQUNoRUEsRUFBUyxLQUFPLGVBQ2hCRixFQUFhLEdBRXJCLEVBRUEsT0FBQUQsRUFBSyxLQUFLRCxFQUFFLGVBQWUsRUFBRSxRQUFTSyxHQUFTLENBQzNDLEtBQU0sQ0FBRSxTQUFBRCxHQUFhQyxFQUFLLEtBQzFCRixFQUFnQkMsQ0FBUSxDQUM1QixDQUFDLEVBRURILEVBQUssS0FBS0QsRUFBRSxjQUFjLEVBQUUsUUFBU0ssR0FBUyxDQUMxQyxLQUFNLENBQUUsZUFBQUMsR0FBbUJELEVBQUssS0FDNUJDLEdBQWtCQSxFQUFlLE9BQVMsbUJBQzFDSCxFQUFnQkcsRUFBZSxRQUFRLENBRS9DLENBQUMsRUFFR0osR0FDQUssRUFBQUEsbUJBQW1CUCxFQUFHQyxFQUFNLGVBQWdCLCtCQUErQixFQUd4RUEsRUFBSyxTQUFBLENBQ2hCIn0=

Dialog.mjs

@@ -14,5 +14,5 @@ /**
 import { createPropsContext as V, useZIndexContext as W, getActiveElement as X, usePropsContext as q, FOCUSABLE_ELEMENTS as J, focusFirstFocusableChild as Q, canUseDOM as Z, dispatchEvent as Y, Keys as ee, keepFocusInContainer as te, ZIndexContext as oe, classNames as ne } from "@progress/kendo-react-common";
-import { DATA_DIALOGS_ID as re, ZINDEX_DIALOGS_STEP as le, DEFAULT_DIALOGS_ZINDEX as se } from "./constants.mjs";
+import { DEFAULT_DIALOGS_ZINDEX as re, DATA_DIALOGS_ID as le, ZINDEX_DIALOGS_STEP as se } from "./constants.mjs";
 const ce = V(), $ = t.forwardRef((j, z) => {
-  const I = W(), u = I ? I + le : se, E = t.useRef(null), n = t.useRef(null), l = t.useRef(X(document)), b = q(ce, j), r = t.useMemo(
+  const I = W(), u = I ? I + se : re, E = t.useRef(null), n = t.useRef(null), l = t.useRef(X(document)), b = q(ce, j), r = t.useMemo(
     () => ({
@@ -89,3 +89,3 @@ ...d,
       ref: n,
-      [re]: R,
+      [le]: R,
       className: "k-dialog-wrapper" + (f ? " " + f : ""),
@@ -92,0 +92,0 @@ onKeyDown: M,

dist/cdn/js/kendo-react-dialogs.js

@@ -15,2 +15,2 @@ /**
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,o,s,n,a,r){"use strict";function l(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var h=l(e),d=l(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:o})=>h.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},h.createElement("span",{className:"k-window-title k-dialog-title"},t),o&&h.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},h.createElement(s.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),c=t=>{const e={layout:"stretched",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return h.createElement("div",{className:s},o)};c.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const u="data-windowid",g=10002,w=a.createPropsContext(),m=h.forwardRef(((t,e)=>{const i=a.useZIndexContext(),o=i?i+2:g,s=h.useRef(null),n=h.useRef(null),r=h.useRef(a.getActiveElement(document)),l=a.usePropsContext(w,t),m=h.useMemo((()=>({...f,...l})),[l]),{title:E,width:C,height:v,children:S,minWidth:y,dir:b,style:k,themeColor:I,contentStyle:D,autoFocusedElement:T,appendTo:B,className:L,overlayStyle:x,modal:M=f.modal,closeIcon:N=f.closeIcon,autoFocus:R=f.autoFocus}=m,F=h.useCallback((()=>({props:m,element:n.current})),[m]);h.useImperativeHandle(s,F),h.useImperativeHandle(e,(()=>s.current));const z=h.useMemo((()=>h.Children.toArray(S).filter((t=>!h.isValidElement(t)||t.type!==c))),[S]),W=h.useMemo((()=>h.Children.toArray(S).filter((t=>h.isValidElement(t)&&t.type===c))),[S]),{_id:A,contentId:U,id:O}=h.useMemo((()=>{const t=m.id,e=`${null!=t?t:"accessibility"}-id`;return{_id:e,contentId:`dialog-content-${e}`,id:t||`dialog-title-${e}`}}),[m.id]),K=h.useCallback((()=>{if(n.current)if(R&&!T)n.current.focus();else if(!R&&T&&n.current){const t=n.current.querySelector(T);null==t||t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map((t=>t+":not(.k-dialog-titlebar *)"));a.focusFirstFocusableChild(n.current,t)}}),[R,T]);h.useEffect((()=>(K(),()=>{setTimeout((()=>{var t;!n.current&&r.current&&a.canUseDOM&&(document.contains(r.current)?r.current.focus():r.current.id&&(null==(t=document.getElementById(r.current.id))||t.focus()))}))})),[K]);const H=h.useCallback((t=>{t.preventDefault(),a.dispatchEvent(m.onClose,t,F(),void 0)}),[m.onClose]),Z=h.useCallback((t=>{t.keyCode===a.Keys.esc&&m.onClose&&(t.preventDefault(),H(t)),a.keepFocusInContainer(t,n.current)}),[m.onClose,H]),P=h.useMemo((()=>h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement("div",{ref:n,[u]:A,className:"k-dialog-wrapper"+(L?" "+L:""),onKeyDown:Z,tabIndex:0,dir:b,style:{zIndex:o,...k}},M&&h.createElement("div",{className:"k-overlay",style:x}),h.createElement("div",{className:a.classNames("k-window k-dialog",{[`k-window-${I}`]:I}),role:"dialog","aria-labelledby":O,"aria-modal":!0,"aria-describedby":U,style:{width:C,height:v,minWidth:y}},E&&h.createElement(p,{closeIcon:N,onCloseButtonClick:H,id:O},E),h.createElement("div",{className:"k-window-content k-dialog-content",style:D,id:U},z),W)))),[o,A,L,Z,k,b,x,I,O,U,C,v,y,N,H,D,E,z,W,M]);return a.canUseDOM?null!==B?d.createPortal(P,B||document.body):P:null})),f={autoFocus:!1,modal:!0,closeIcon:!0},E={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};m.displayName="KendoReactDialog",m.propTypes=E;var C=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(C||{});const v="dialogs.windowMaximizeButton",S="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[v]:"maximize",[S]:"minimize",[y]:"restore",[b]:"close"},I=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:o,onFullScreenButtonClick:a,onRestoreButtonClick:l,onDoubleClick:d,stage:p,forwardedRef:c,id:u}=t,g=r.useLocalization(),w=t.minimizeButton?h.createElement(t.minimizeButton,{onClick:o,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:o,"aria-label":g.toLanguageString(S,k[S])}),m=t.maximizeButton?h.createElement(t.maximizeButton,{onClick:a,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(v,k[v])}),f=t.restoreButton?h.createElement(t.restoreButton,{onClick:l,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:l,"aria-label":g.toLanguageString(y,k[y])}),E=t.closeButton?h.createElement(t.closeButton,{onClick:i,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":g.toLanguageString(b,k[b])});return h.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},h.createElement("span",{className:"k-window-title",id:u},e||""),h.createElement("div",{className:"k-window-titlebar-actions"},p===C.DEFAULT&&w,p===C.DEFAULT&&m,p!==C.DEFAULT&&f,E))},D=h.forwardRef(((t,e)=>h.createElement(I,{...t,forwardedRef:e}))),T=["n","e","s","w","se","sw","ne","nw"];class B extends h.Component{render(){return h.createElement("div",{className:"k-resize-handles-wrapper"}," ",T.map(((t,e)=>h.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},h.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}})))))}}class L extends h.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const x=t=>{const e={layout:"end",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return h.createElement("div",{className:s},o)};x.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const M=(t,e,i)=>{let o=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let s=!1;return t.forEach((t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(u)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=o&&(o=t,s=!0)}})),s?o+2:o}return o},N=class extends h.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{var e,i,o;if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const s=this.props.minWidth||120,n=this.props.minHeight||100,r=t.metaKey||t.ctrlKey,l=null!=(o=null!=(i=this.height)?i:null==(e=this.windowElement)?void 0:e.clientHeight)?o:0;if(r&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),n<=l-5&&this.setState({height:l-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:l+5});break;case a.Keys.left:s<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===C.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN}));break;case a.Keys.down:this.windowStage===C.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState((t=>({top:t.top-5})));break;case a.Keys.down:this.setState((t=>({top:t.top+5})));break;case a.Keys.left:this.setState((t=>({left:t.left-5})));break;case a.Keys.right:this.setState((t=>({left:t.left+5})));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==C.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==C.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout((()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0})))},this.getInitialTop=()=>{var t,e;if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let i=300;if(void 0!==this.props.height?i=this.props.height:void 0!==this.props.initialHeight&&(i=this.props.initialHeight),this.props.appendTo&&i)return this.props.appendTo.offsetHeight/2-i/2;const o=this.getWindow();return o?o.innerHeight/2-(null!=(e=null!=i?i:null==(t=this.windowElement)?void 0:t.clientHeight)?e:0)/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:C.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,o=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:o,stage:C.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===C.FULLSCREEN?this.setState({stage:C.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===C.MINIMIZED&&this.setState({stage:C.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===C.FULLSCREEN||this.windowStage===C.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{var i,o,s;const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,a=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,r=this.width,l=null!=(s=null!=(o=this.height)?o:null==(i=this.windowElement)?void 0:i.clientHeight)?s:0,h=this.props.minWidth||120,d=this.props.minHeight||100,p=this.top-a,c=this.left-n,u=n-this.left,g=a-this.top,w=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&d-(l+p)<0&&(this.top>0&&(w.height=l+p),w.top=a),e.direction.indexOf("s")>=0&&d-g<0&&(w.height=g),e.direction.indexOf("w")>=0&&h-(r+c)<0&&(this.left>0&&(w.width=r+c),w.left=n),e.direction.indexOf("e")>=0&&h-u<0&&(w.width=u),this.setState(w),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,o)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:o,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===C.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:g,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||C.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:g},a.canUseDOM&&(this.activeElement=document.activeElement)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||C.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout((()=>{var t;!this.element&&this.activeElement&&a.canUseDOM&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))}))}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top}),this.props.initialLeft&&t.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&t.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=h.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),o=this.getCurrentZIndex(),s=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement(h.Fragment,null,this.props.modal&&h.createElement("div",{className:"k-overlay",style:{zIndex:o,...this.props.overlayStyle}}),h.createElement("div",{id:this.props.id,[u]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:s,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:o,...this.props.style}},h.createElement(L,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},h.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>{this.draggable=t}},h.createElement(D,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==C.MINIMIZED?h.createElement(h.Fragment,null,h.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===C.DEFAULT&&this.props.resizable?h.createElement(B,{onResize:this.handleResize}):null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===C.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter((t=>t&&t.type===x))}getContent(t){return t.filter((t=>t&&t.type!==x))}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:o.number,height:o.number,left:o.number,top:o.number,initialWidth:o.number,initialHeight:o.number,initialLeft:o.number,initialTop:o.number,minWidth:o.number,minHeight:o.number,resizable:o.bool,draggable:o.bool,title:o.any,shouldUpdateOnDrag:o.bool,stage:o.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:o.string,id:o.string,style:o.object,overlayStyle:o.object,autoFocus:o.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let R=N;const F=a.createPropsContext(),z=a.withIdHOC(a.withPropsContext(F,R));z.displayName="KendoReactWindow",t.Dialog=m,t.DialogActionsBar=c,t.DialogPropsContext=w,t.Window=z,t.WindowActionsBar=x,t.WindowPropsContext=F,t.WindowWithoutContext=R}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-buttons","@progress/kendo-svg-icons","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactDialogs={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactButtons,t.KendoSvgIcons,t.KendoReactCommon,t.KendoReactIntl)}(this,function(t,e,i,o,s,n,a,r){"use strict";function l(t){var e=Object.create(null);return t&&Object.keys(t).forEach(function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:function(){return t[i]}})}}),e.default=t,Object.freeze(e)}var h=l(e),d=l(i);const p=({children:t,onCloseButtonClick:e,id:i,closeIcon:o})=>h.createElement("div",{className:"k-window-titlebar k-dialog-titlebar",id:i},h.createElement("span",{className:"k-window-title k-dialog-title"},t),o&&h.createElement("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions"},h.createElement(s.Button,{role:"button","aria-label":"Close",onClick:e,icon:"x",svgIcon:n.xIcon,fillMode:"flat",className:"k-window-titlebar-action k-dialog-titlebar-action"}))),c=t=>{const e={layout:"stretched",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-actions-horizontal","k-window-actions k-dialog-actions",{[`k-actions-${i}`]:i});return h.createElement("div",{className:s},o)};c.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const u="data-windowid",g=10002,w=a.createPropsContext(),m=h.forwardRef((t,e)=>{const i=a.useZIndexContext(),o=i?i+2:g,s=h.useRef(null),n=h.useRef(null),r=h.useRef(a.getActiveElement(document)),l=a.usePropsContext(w,t),m=h.useMemo(()=>({...f,...l}),[l]),{title:E,width:C,height:v,children:S,minWidth:y,dir:b,style:k,themeColor:I,contentStyle:D,autoFocusedElement:T,appendTo:B,className:L,overlayStyle:x,modal:M=f.modal,closeIcon:N=f.closeIcon,autoFocus:R=f.autoFocus}=m,F=h.useCallback(()=>({props:m,element:n.current}),[m]);h.useImperativeHandle(s,F),h.useImperativeHandle(e,()=>s.current);const z=h.useMemo(()=>h.Children.toArray(S).filter(t=>!h.isValidElement(t)||t.type!==c),[S]),W=h.useMemo(()=>h.Children.toArray(S).filter(t=>h.isValidElement(t)&&t.type===c),[S]),{_id:A,contentId:U,id:O}=h.useMemo(()=>{const t=m.id,e=`${null!=t?t:"accessibility"}-id`;return{_id:e,contentId:`dialog-content-${e}`,id:t||`dialog-title-${e}`}},[m.id]),K=h.useCallback(()=>{if(n.current)if(R&&!T)n.current.focus();else if(!R&&T&&n.current){const t=n.current.querySelector(T);null==t||t.focus()}else{const t=[...a.FOCUSABLE_ELEMENTS].map(t=>t+":not(.k-dialog-titlebar *)");a.focusFirstFocusableChild(n.current,t)}},[R,T]);h.useEffect(()=>(K(),()=>{setTimeout(()=>{var t;!n.current&&r.current&&a.canUseDOM&&(document.contains(r.current)?r.current.focus():r.current.id&&(null==(t=document.getElementById(r.current.id))||t.focus()))})}),[K]);const H=h.useCallback(t=>{t.preventDefault(),a.dispatchEvent(m.onClose,t,F(),void 0)},[m.onClose]),Z=h.useCallback(t=>{t.keyCode===a.Keys.esc&&m.onClose&&(t.preventDefault(),H(t)),a.keepFocusInContainer(t,n.current)},[m.onClose,H]),P=h.useMemo(()=>h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement("div",{ref:n,[u]:A,className:"k-dialog-wrapper"+(L?" "+L:""),onKeyDown:Z,tabIndex:0,dir:b,style:{zIndex:o,...k}},M&&h.createElement("div",{className:"k-overlay",style:x}),h.createElement("div",{className:a.classNames("k-window k-dialog",{[`k-window-${I}`]:I}),role:"dialog","aria-labelledby":O,"aria-modal":!0,"aria-describedby":U,style:{width:C,height:v,minWidth:y}},E&&h.createElement(p,{closeIcon:N,onCloseButtonClick:H,id:O},E),h.createElement("div",{className:"k-window-content k-dialog-content",style:D,id:U},z),W))),[o,A,L,Z,k,b,x,I,O,U,C,v,y,N,H,D,E,z,W,M]);return a.canUseDOM?null!==B?d.createPortal(P,B||document.body):P:null}),f={autoFocus:!1,modal:!0,closeIcon:!0},E={autoFocus:o.bool,autoFocusedElement:o.string,title:o.any,className:o.string,closeIcon:o.bool,modal:o.bool,overlayStyle:o.object,width:o.oneOfType([o.number,o.string]),height:o.oneOfType([o.number,o.string]),minWidth:o.oneOfType([o.number,o.string]),onClose:o.func,children:o.node,id:o.string,dir:o.string,style:o.object,contentStyle:o.object,appendTo:o.any,themeColor:o.oneOf(["primary","dark","light"])};m.displayName="KendoReactDialog",m.propTypes=E;var C=(t=>(t.DEFAULT="DEFAULT",t.FULLSCREEN="FULLSCREEN",t.MINIMIZED="MINIMIZED",t))(C||{});const v="dialogs.windowMaximizeButton",S="dialogs.windowMinimizeButton",y="dialogs.windowRestoreButton",b="dialogs.windowCloseButton",k={[v]:"maximize",[S]:"minimize",[y]:"restore",[b]:"close"},I=t=>{const{children:e,onCloseButtonClick:i,onMinimizeButtonClick:o,onFullScreenButtonClick:a,onRestoreButtonClick:l,onDoubleClick:d,stage:p,forwardedRef:c,id:u}=t,g=r.useLocalization(),w=t.minimizeButton?h.createElement(t.minimizeButton,{onClick:o,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-minimize",svgIcon:n.windowMinimizeIcon,className:"k-window-titlebar-action",onClick:o,"aria-label":g.toLanguageString(S,k[S])}),m=t.maximizeButton?h.createElement(t.maximizeButton,{onClick:a,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-maximize",svgIcon:n.windowIcon,className:"k-window-titlebar-action",onClick:a,"aria-label":g.toLanguageString(v,k[v])}),f=t.restoreButton?h.createElement(t.restoreButton,{onClick:l,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"window-restore",svgIcon:n.windowRestoreIcon,className:"k-window-titlebar-action",onClick:l,"aria-label":g.toLanguageString(y,k[y])}),E=t.closeButton?h.createElement(t.closeButton,{onClick:i,stage:p}):h.createElement(s.Button,{fillMode:"flat",icon:"x",svgIcon:n.xIcon,className:"k-window-titlebar-action",onClick:i,"aria-label":g.toLanguageString(b,k[b])});return h.createElement("div",{className:"k-window-titlebar",style:{touchAction:"none"},ref:c,onDoubleClick:d},h.createElement("span",{className:"k-window-title",id:u},e||""),h.createElement("div",{className:"k-window-titlebar-actions"},p===C.DEFAULT&&w,p===C.DEFAULT&&m,p!==C.DEFAULT&&f,E))},D=h.forwardRef((t,e)=>h.createElement(I,{...t,forwardedRef:e})),T=["n","e","s","w","se","sw","ne","nw"];class B extends h.Component{render(){return h.createElement("div",{className:"k-resize-handles-wrapper"}," ",T.map((t,e)=>h.createElement(a.Draggable,{key:e,onDrag:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!1,direction:t})},onRelease:e=>{const{event:i}=e;i.originalEvent.preventDefault(),this.props.onResize(i,{end:!0,direction:t})}},h.createElement("div",{className:"k-resize-handle k-resize-"+t,style:{display:"block",touchAction:"none",userSelect:"none"}}))))}}class L extends h.Component{shouldComponentUpdate(t){return t.shouldUpdateOnDrag||!t.isDragging}render(){return this.props.children}}const x=t=>{const e={layout:"end",...t},{layout:i,children:o}=e,s=a.classNames("k-actions","k-window-actions","k-actions-horizontal","k-hstack",{"k-justify-content-start":"start"===i,"k-justify-content-center":"center"===i,"k-justify-content-end":"end"===i,"k-justify-content-stretch":"stretched"===i});return h.createElement("div",{className:s},o)};x.propTypes={children:o.any,layout:o.oneOf(["start","center","end","stretched"])};const M=(t,e,i)=>{let o=t;if(e&&e.defaultView){const t=e.querySelectorAll(".k-window:not(.k-dialog), .k-dialog-wrapper");let s=!1;return t.forEach(t=>{const n=e.defaultView.getComputedStyle(t,null);if(t.getAttribute(u)!==i&&null!==n.zIndex){const t=parseInt(n.zIndex,10);t>=o&&(o=t,s=!0)}}),s?o+2:o}return o},N=class extends h.Component{constructor(t){super(t),this.context=0,this.draggable=null,this.offSetCoordinates={x:0,y:0},this.titleId=this.generateTitleId(),this.mounted=!1,this.activeElement=null,this.onKeyDown=t=>{var e,i,o;if(this.props.modal&&a.keepFocusInContainer(t,this.element),t.target!==t.currentTarget)return;const s=this.props.minWidth||120,n=this.props.minHeight||100,r=t.metaKey||t.ctrlKey,l=null!=(o=null!=(i=this.height)?i:null==(e=this.windowElement)?void 0:e.clientHeight)?o:0;if(r&&this.props.resizable){switch(t.keyCode){case a.Keys.up:t.preventDefault(),n<=l-5&&this.setState({height:l-5});break;case a.Keys.down:t.preventDefault(),this.setState({height:l+5});break;case a.Keys.left:s<=this.width-5&&this.setState({width:this.width-5});break;case a.Keys.right:this.setState({width:this.width+5});break;default:return}this.dispatchMoveEvent(this.props.onResize,t,!1,void 0)}else if(t.altKey)switch(t.keyCode){case a.Keys.up:this.windowStage===C.MINIMIZED?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleFullscreen(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN}));break;case a.Keys.down:this.windowStage===C.FULLSCREEN?(this.handleRestore(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})):this.windowStage===C.DEFAULT&&(this.handleMinimize(t),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED}))}else{if(!t.ctrlKey)switch(t.keyCode){case a.Keys.esc:return void(this.props.onClose&&this.handleCloseWindow(t));case a.Keys.up:this.setState(t=>({top:t.top-5}));break;case a.Keys.down:this.setState(t=>({top:t.top+5}));break;case a.Keys.left:this.setState(t=>({left:t.left-5}));break;case a.Keys.right:this.setState(t=>({left:t.left+5}));break;default:return}this.dispatchMoveEvent(this.props.onMove,t,!1,void 0)}},this.onPress=t=>{const e=t.event;this.windowCoordinatesState.differenceLeft=e.pageX-this.left,this.windowCoordinatesState.differenceTop=e.pageY-this.top},this.onDrag=t=>{const e=t.event;e.originalEvent.preventDefault(),this.windowStage!==C.FULLSCREEN&&this.props.draggable&&(this.setState({top:Math.max(e.pageY-this.windowCoordinatesState.differenceTop,0),left:e.pageX-this.windowCoordinatesState.differenceLeft,isDragging:!0}),this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!1))},this.onRelease=t=>{const e=t.event;this.windowStage!==C.FULLSCREEN&&this.props.draggable&&this.props.onMove&&this.dispatchMoveEvent(this.props.onMove,e,!0,!0),this.setState({isDragging:!1})},this.onFocus=()=>{this._blurTimeout?(clearTimeout(this._blurTimeout),this._blurTimeout=void 0):this.setState({focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)})},this.onBlur=()=>{clearTimeout(this._blurTimeout);const t=this.getWindow();t&&(this._blurTimeout=t.setTimeout(()=>{this.mounted&&this.setState({focused:!1}),this._blurTimeout=void 0}))},this.getInitialTop=()=>{var t,e;if(void 0!==this.props.top)return this.props.top;if(void 0!==this.props.initialTop)return this.props.initialTop;let i=300;if(void 0!==this.props.height?i=this.props.height:void 0!==this.props.initialHeight&&(i=this.props.initialHeight),this.props.appendTo&&i)return this.props.appendTo.offsetHeight/2-i/2;const o=this.getWindow();return o?o.innerHeight/2-(null!=(e=null!=i?i:null==(t=this.windowElement)?void 0:t.clientHeight)?e:0)/2:0},this.getInitialLeft=()=>{if(void 0!==this.props.left)return this.props.left;if(void 0!==this.props.initialLeft)return this.props.initialLeft;let t=300;if(void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),this.props.appendTo)return this.props.appendTo.offsetWidth/2-t/2;const e=this.getWindow();return e?e.innerWidth/2-t/2:0},this.getInitialWidth=()=>{let t=300;return void 0!==this.props.width?t=this.props.width:void 0!==this.props.initialWidth&&(t=this.props.initialWidth),t},this.getInitialHeight=()=>{let t=300;return void 0!==this.props.height?t=this.props.height:void 0!==this.props.initialHeight&&(t=this.props.initialHeight),t},this.handleMinimize=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height,this.setState({stage:C.MINIMIZED,height:0}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.MINIMIZED})},this.handleFullscreen=t=>{t.preventDefault(),this.windowCoordinatesState.leftBeforeAction=this.left,this.windowCoordinatesState.topBeforeAction=this.top,this.windowCoordinatesState.widthBeforeAction=this.width,this.windowCoordinatesState.heightBeforeAction=this.height;const e=this.getWindow(),i=e?e.innerWidth:0,o=e?e.innerHeight:0;this.setState({left:0,top:0,width:this.props.appendTo?this.props.appendTo.offsetWidth:i,height:this.props.appendTo?this.props.appendTo.offsetHeight:o,stage:C.FULLSCREEN}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.FULLSCREEN})},this.handleRestore=t=>{t.preventDefault(),this.windowStage===C.FULLSCREEN?this.setState({stage:C.DEFAULT,left:this.windowCoordinatesState.leftBeforeAction,top:this.windowCoordinatesState.topBeforeAction,width:this.windowCoordinatesState.widthBeforeAction,height:this.windowCoordinatesState.heightBeforeAction}):this.windowStage===C.MINIMIZED&&this.setState({stage:C.DEFAULT,height:this.windowCoordinatesState.heightBeforeAction}),a.dispatchEvent(this.props.onStageChange,t,this,{state:C.DEFAULT})},this.handleCloseWindow=t=>{t.preventDefault(),a.dispatchEvent(this.props.onClose,t,this,{state:void 0})},this.handleDoubleClick=t=>{this.windowStage===C.FULLSCREEN||this.windowStage===C.MINIMIZED?this.handleRestore(t):this.handleFullscreen(t)},this.handleResize=(t,e)=>{var i,o,s;const n=this.props.appendTo?t.pageX-this.offSetCoordinates.x:t.pageX,a=this.props.appendTo?t.pageY-this.offSetCoordinates.y:t.pageY,r=this.width,l=null!=(s=null!=(o=this.height)?o:null==(i=this.windowElement)?void 0:i.clientHeight)?s:0,h=this.props.minWidth||120,d=this.props.minHeight||100,p=this.top-a,c=this.left-n,u=n-this.left,g=a-this.top,w=Object.assign({},this.state,{isDragging:!e.end});e.direction.indexOf("n")>=0&&d-(l+p)<0&&(this.top>0&&(w.height=l+p),w.top=a),e.direction.indexOf("s")>=0&&d-g<0&&(w.height=g),e.direction.indexOf("w")>=0&&h-(r+c)<0&&(this.left>0&&(w.width=r+c),w.left=n),e.direction.indexOf("e")>=0&&h-u<0&&(w.width=u),this.setState(w),this.dispatchMoveEvent(this.props.onResize,t,!0,e.end)},this.dispatchMoveEvent=(t,e,i,o)=>{t&&t.call(void 0,{nativeEvent:e.nativeEvent?e.nativeEvent:e.originalEvent,drag:i,end:o,target:this,left:this.state.left,top:this.state.top,width:this.state.width,hight:this.state.height,height:this.state.height})},this.handleBrowserWindowResize=()=>{if(this.windowStage===C.FULLSCREEN){const t=this.getWindow(),e=t?t.innerWidth:0,i=t?t.innerHeight:0;this.setState({width:this.props.appendTo?this.props.appendTo.offsetWidth:e,height:this.props.appendTo?this.props.appendTo.offsetHeight:i})}},this.getCurrentZIndex=()=>this.state&&void 0!==this.context?this.state.zIndex>(this.context?this.context+2:0)?this.state.zIndex:this.context+2:this.context?this.context:g,this.getDocument=()=>{const t=a.canUseDOM?document:null;return this.props.appendTo?this.props.appendTo.ownerDocument:t},this.getWindow=()=>{const t=this.getDocument();return t&&t.defaultView},this.state={stage:this.props.stage||C.DEFAULT,isDragging:!1,top:0,left:0,width:300,height:300,focused:!0,zIndex:g},a.canUseDOM&&(this.activeElement=document.activeElement)}get _id(){return this.props.id+"-accessibility-id"}componentDidMount(){this.element&&this.props.autoFocus&&this.element.focus({preventScroll:!0});const t=this.getWindow();t&&t.addEventListener("resize",this.handleBrowserWindowResize),this.setState({stage:this.props.stage||C.DEFAULT,isDragging:!1,top:this.getInitialTop(),left:this.getInitialLeft(),width:this.getInitialWidth(),height:this.getInitialHeight(),focused:!0,zIndex:M(this.getCurrentZIndex(),this.getDocument(),this._id)}),this.windowCoordinatesState={leftBeforeAction:this.getInitialLeft(),topBeforeAction:this.getInitialTop(),widthBeforeAction:this.getInitialWidth(),heightBeforeAction:this.getInitialHeight()};const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}componentWillUnmount(){const t=this.getWindow();t&&t.removeEventListener("resize",this.handleBrowserWindowResize),this.mounted=!1,setTimeout(()=>{var t;!this.element&&this.activeElement&&a.canUseDOM&&(document.contains(this.activeElement)?this.activeElement.focus({preventScroll:!0}):this.activeElement.id&&(null==(t=document.getElementById(this.activeElement.id))||t.focus({preventScroll:!0})))})}componentDidUpdate(t){this.props.left&&t.left!==this.props.left&&this.setState({left:this.props.left}),this.props.top&&t.top!==this.props.top&&this.setState({top:this.props.top}),this.props.initialLeft&&t.initialLeft!==this.props.initialLeft&&this.setState({left:this.props.initialLeft}),this.props.initialTop&&t.initialTop!==this.props.initialTop&&this.setState({top:this.props.initialTop});const e=this.getDocument();if(this.props.appendTo&&e){const t=this.props.appendTo.getBoundingClientRect(),i=e.body.getBoundingClientRect();this.offSetCoordinates.x=t.left-i.left,this.offSetCoordinates.y=t.top-i.top}this.mounted=!0}render(){const t=h.Children.toArray(this.props.children),e=this.getContent(t),i=this.getActionBar(t),o=this.getCurrentZIndex(),s=a.classNames("k-window",this.props.className,{[`k-window-${this.props.themeColor}`]:this.props.themeColor,"k-window-minimized":"MINIMIZED"===this.state.stage,"k-focus":this.state.focused}),n=h.createElement(a.ZIndexContext.Provider,{value:o},h.createElement(h.Fragment,null,this.props.modal&&h.createElement("div",{className:"k-overlay",style:{zIndex:o,...this.props.overlayStyle}}),h.createElement("div",{id:this.props.id,[u]:this._id,tabIndex:0,role:"dialog","aria-labelledby":this.titleId,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,ref:t=>{this.windowElement=t,this.element=t},className:s,style:{top:this.top,left:this.left,width:this.width,height:this.height||"",zIndex:o,...this.props.style}},h.createElement(L,{shouldUpdateOnDrag:this.props.shouldUpdateOnDrag||!1,isDragging:this.state.isDragging},h.createElement(a.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,autoScroll:!1,ref:t=>{this.draggable=t}},h.createElement(D,{stage:this.windowStage,onDoubleClick:this.props.doubleClickStageChange?this.handleDoubleClick:void 0,onMinimizeButtonClick:this.handleMinimize,onFullScreenButtonClick:this.handleFullscreen,onRestoreButtonClick:this.handleRestore,onCloseButtonClick:this.handleCloseWindow,closeButton:this.props.closeButton,minimizeButton:this.props.minimizeButton,maximizeButton:this.props.maximizeButton,restoreButton:this.props.restoreButton,id:this.titleId},this.props.title)),this.windowStage!==C.MINIMIZED?h.createElement(h.Fragment,null,h.createElement("div",{className:"k-window-content"},e),i):null,this.windowStage===C.DEFAULT&&this.props.resizable?h.createElement(B,{onResize:this.handleResize}):null))));return a.canUseDOM?null!==this.props.appendTo?d.createPortal(n,this.props.appendTo||document.body):n:null}get top(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.top||this.state.top,0):0}get left(){return this.windowStage!==C.FULLSCREEN?Math.max(this.props.left||this.state.left,0):0}get width(){let t=this.props.width||this.state.width;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetWidth,t;const e=this.getWindow();t=e?e.innerWidth:0}return t}get height(){let t=this.props.height||this.state.height;if(this.windowStage===C.FULLSCREEN){if(this.props.appendTo)return t=this.props.appendTo.offsetHeight,t;const e=this.getWindow();t=e?e.innerHeight:0}else this.windowStage===C.MINIMIZED&&(t=0);return t}get windowStage(){return this.props.stage||this.state.stage}getActionBar(t){return t.filter(t=>t&&t.type===x)}getContent(t){return t.filter(t=>t&&t.type!==x)}generateTitleId(){return"window-title-"+this._id}};N.displayName="Window",N.propTypes={width:o.number,height:o.number,left:o.number,top:o.number,initialWidth:o.number,initialHeight:o.number,initialLeft:o.number,initialTop:o.number,minWidth:o.number,minHeight:o.number,resizable:o.bool,draggable:o.bool,title:o.any,shouldUpdateOnDrag:o.bool,stage:o.oneOf(["DEFAULT","MINIMIZED","FULLSCREEN"]),className:o.string,id:o.string,style:o.object,overlayStyle:o.object,autoFocus:o.bool},N.defaultProps={minWidth:120,minHeight:100,resizable:!0,draggable:!0,modal:!1,doubleClickStageChange:!0,autoFocus:!0},N.contextType=a.ZIndexContext;let R=N;const F=a.createPropsContext(),z=a.withIdHOC(a.withPropsContext(F,R));z.displayName="KendoReactWindow",t.Dialog=m,t.DialogActionsBar=c,t.DialogPropsContext=w,t.Window=z,t.WindowActionsBar=x,t.WindowPropsContext=F,t.WindowWithoutContext=R});

index.d.mts

@@ -8,826 +8,10 @@ /**
  */
-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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- *
- * Accepts properties of type [DialogProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops).
- * Obtaining the `ref` returns an object of type [DialogHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface DialogActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/initial-focus)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog autoFocusedElement="#input-id" />
-     * ```
-     */
-    autoFocusedElement?: string;
-    /**
-     * Sets the title of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/title)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog width="400px" />
-     * ```
-     */
-    width?: number | string;
-    /**
-     * Specifies the height of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @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](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
- *
- * Accepts properties of type [WindowProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowprops).
- * Obtaining the `ref` returns an object of type [WindowHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface WindowActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/action-buttons)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-dragging)).
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window draggable={true} />
-     * ```
-     */
-    draggable?: boolean;
-    /**
-     * Specifies the height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-positioning)). The Window will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialLeft={100} />
-     * ```
-     */
-    initialLeft?: number;
-    /**
-     * Specifies the initial `top` value ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
-     *
-     * @default 100
-     *
-     * @example
-     * ```jsx
-     * <Window minHeight={100} />
-     * ```
-     */
-    minHeight?: number;
-    /**
-     * Specifies the minimum width of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/title)).
-     *
-     * @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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/minimizing-fullscreen)).
-     *
-     * 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 { }
+import { Dialog, DialogHandle, DialogPropsContext } from './Dialog.js';
+import { DialogActionsBar } from './DialogActionsBar.js';
+import { Window, WindowHandle, WindowPropsContext, WindowWithoutContext } from './Window.js';
+import { WindowProps } from './WindowProps.js';
+import { WindowActionsBar } from './WindowActionsBar.js';
+import { DialogCloseEvent, WindowActionsEvent, WindowMoveEvent } from './events.js';
+import { ActionsLayout } from './models/actions-layout.js';
+import { DialogProps } from './DialogProps.js';
+export { Dialog, DialogProps, DialogActionsBar, DialogCloseEvent, DialogHandle, DialogPropsContext, Window, WindowProps, WindowActionsBar, WindowActionsEvent, WindowMoveEvent, WindowHandle, WindowPropsContext, WindowWithoutContext, ActionsLayout };

index.d.ts

@@ -8,826 +8,10 @@ /**
  */
-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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- *
- * Accepts properties of type [DialogProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops).
- * Obtaining the `ref` returns an object of type [DialogHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface DialogActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/initial-focus)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog autoFocusedElement="#input-id" />
-     * ```
-     */
-    autoFocusedElement?: string;
-    /**
-     * Sets the title of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/title)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog width="400px" />
-     * ```
-     */
-    width?: number | string;
-    /**
-     * Specifies the height of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @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](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
- *
- * Accepts properties of type [WindowProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowprops).
- * Obtaining the `ref` returns an object of type [WindowHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/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](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface WindowActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/action-buttons)). 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](https://www.telerik.com/kendo-react-ui/components/dialogs/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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-dragging)).
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window draggable={true} />
-     * ```
-     */
-    draggable?: boolean;
-    /**
-     * Specifies the height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-positioning)). The Window will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialLeft={100} />
-     * ```
-     */
-    initialLeft?: number;
-    /**
-     * Specifies the initial `top` value ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
-     *
-     * @default 100
-     *
-     * @example
-     * ```jsx
-     * <Window minHeight={100} />
-     * ```
-     */
-    minHeight?: number;
-    /**
-     * Specifies the minimum width of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/title)).
-     *
-     * @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](https://www.telerik.com/kendo-react-ui/components/dialogs/window/minimizing-fullscreen)).
-     *
-     * 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 { }
+import { Dialog, DialogHandle, DialogPropsContext } from './Dialog.js';
+import { DialogActionsBar } from './DialogActionsBar.js';
+import { Window, WindowHandle, WindowPropsContext, WindowWithoutContext } from './Window.js';
+import { WindowProps } from './WindowProps.js';
+import { WindowActionsBar } from './WindowActionsBar.js';
+import { DialogCloseEvent, WindowActionsEvent, WindowMoveEvent } from './events.js';
+import { ActionsLayout } from './models/actions-layout.js';
+import { DialogProps } from './DialogProps.js';
+export { Dialog, DialogProps, DialogActionsBar, DialogCloseEvent, DialogHandle, DialogPropsContext, Window, WindowProps, WindowActionsBar, WindowActionsEvent, WindowMoveEvent, WindowHandle, WindowPropsContext, WindowWithoutContext, ActionsLayout };

package.json

 {
   "name": "@progress/kendo-react-dialogs",
-  "version": "13.3.0",
+  "version": "13.4.0-develop.1",
   "description": "React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package",
@@ -29,5 +29,5 @@ "author": "Progress",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-buttons": "13.3.0",
-    "@progress/kendo-react-common": "13.3.0",
-    "@progress/kendo-react-intl": "13.3.0",
+    "@progress/kendo-react-buttons": "13.4.0-develop.1",
+    "@progress/kendo-react-common": "13.4.0-develop.1",
+    "@progress/kendo-react-intl": "13.4.0-develop.1",
     "@progress/kendo-svg-icons": "^4.0.0",
@@ -72,2 +72,8 @@ "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
       }
+    },
+    "package": {
+      "productName": "KendoReact",
+      "productCode": "KENDOUIREACT",
+      "publishDate": 1770218761,
+      "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
@@ -74,0 +80,0 @@ },

Window.mjs

@@ -12,3 +12,3 @@ /**
 import { WindowTitleBar as N } from "./WindowTitlebar.mjs";
-import { keepFocusInContainer as U, Keys as a, dispatchEvent as g, canUseDOM as S, ZIndexContext as A, classNames as z, Draggable as k, createPropsContext as _, withIdHOC as Z, withPropsContext as O } from "@progress/kendo-react-common";
+import { withIdHOC as U, createPropsContext as z, withPropsContext as k, keepFocusInContainer as _, Keys as a, dispatchEvent as g, canUseDOM as S, ZIndexContext as A, classNames as Z, Draggable as O } from "@progress/kendo-react-common";
 import { ResizeHandlers as K } from "./WindowResizeHandlers.mjs";
@@ -24,3 +24,3 @@ import { MiddleLayerOptimization as P } from "./MiddleLayerOptimization.mjs";
       var p, w, m;
-      if (this.props.modal && U(t, this.element), t.target !== t.currentTarget)
+      if (this.props.modal && _(t, this.element), t.target !== t.currentTarget)
         return;
@@ -261,3 +261,3 @@ const e = this.props.minWidth || D, o = this.props.minHeight || T, h = t.metaKey || t.ctrlKey, c = (m = (w = this.height) != null ? w : (p = this.windowElement) == null ? void 0 : p.clientHeight) != null ? m : 0;
   render() {
-    const s = r.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), h = z("k-window", this.props.className, {
+    const s = r.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), h = Z("k-window", this.props.className, {
       [`k-window-${this.props.themeColor}`]: this.props.themeColor,
@@ -306,3 +306,3 @@ "k-window-minimized": this.state.stage === "MINIMIZED",
         /* @__PURE__ */ r.createElement(
-          k,
+          O,
           {
@@ -412,4 +412,4 @@ onPress: this.onPress,
 let I = u;
-const G = _(), Y = Z(
-  O(
+const G = z(), Y = U(
+  k(
     G,
@@ -416,0 +416,0 @@ I

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Number of package files

53

51.43%

Lines of code

2367

14.85%

Worsened metrics

Total package byte prevSize

169673

-6.44%

Number of low quality alerts

12

9.09%

Number of low supply chain risk alerts

1

Infinity%

No dependency changes