@progress/kendo-react-dialogs 13.3.0 → 13.4.0-develop.1

package/Dialog.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @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;
+};

package/Dialog.mjs

@@ -11,9 +11,9 @@ import o from "prop-types";
 import { DialogTitleBar as U } from "./DialogTitleBar.mjs";
 import { DialogActionsBar as B } from "./DialogActionsBar.mjs";
 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(
     () => ({
       ...d,
       ...b
@@ -85,7 +85,7 @@ const ce = V(), $ = t.forwardRef((j, z) => {
     "div",
     {
       ref: n,
-      [re]: R,
+      [le]: R,
       className: "k-dialog-wrapper" + (f ? " " + f : ""),
       onKeyDown: M,
       tabIndex: 0,

package/DialogActionsBar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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>;

package/DialogProps.d.ts

@@ -0,0 +1,184 @@
+/**
+ * @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';
+}

package/DialogTitleBar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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>;

package/MiddleLayerOptimization.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 {};

package/StageEnum.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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"
+}

package/Window.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @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 {};

package/Window.mjs

@@ -9,7 +9,7 @@ import * as r from "react";
 import * as H from "react-dom";
 import n from "prop-types";
 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";
 import { MiddleLayerOptimization as P } from "./MiddleLayerOptimization.mjs";
 import { windowStage as i } from "./StageEnum.mjs";
@@ -20,7 +20,7 @@ const E = 300, C = 300, D = 120, T = 100, l = 5, u = class u extends r.Component
   constructor(s) {
     super(s), 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 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;
       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;
       if (h && this.props.resizable) {
@@ -256,7 +256,7 @@ const E = 300, C = 300, D = 120, T = 100, l = 5, u = class u extends r.Component
    * @hidden
    */
   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,
       "k-window-minimized": this.state.stage === "MINIMIZED",
       "k-focus": this.state.focused
@@ -300,7 +300,7 @@ const E = 300, C = 300, D = 120, T = 100, l = 5, u = class u extends r.Component
           isDragging: this.state.isDragging
         },
         /* @__PURE__ */ r.createElement(
-          k,
+          O,
           {
             onPress: this.onPress,
             onDrag: this.onDrag,
@@ -405,8 +405,8 @@ u.displayName = "Window", u.propTypes = {
   autoFocus: !0
 }, u.contextType = A;
 let I = u;
-const G = _(), Y = Z(
-  O(
+const G = z(), Y = U(
+  k(
     G,
     I
   )

package/WindowActionsBar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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>;