@progress/kendo-react-dialogs 4.13.0-dev.202111300702 → 4.13.0

package/dist/es/DialogProps.js

@@ -0,0 +1,2 @@
+/* eslint-disable max-len */
+// tslint:enable:max-line-length

package/dist/es/Window.d.ts

@@ -11,13 +11,13 @@ interface WindowState {
     width: number;
     height: number;
     focused: boolean;
+    zIndex: number;
 }
 export declare class Window extends React.Component<WindowProps, WindowState> {
     /**
      * @hidden
      */
     static propTypes: {
-        id: PropTypes.Requireable<string>;
         width: PropTypes.Requireable<string | number>;
         height: PropTypes.Requireable<string | number>;
         left: PropTypes.Requireable<string | number>;
@@ -35,6 +35,7 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
         stage: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        overlayStyle: PropTypes.Requireable<object>;
     };
     /**
      * @hidden
@@ -47,10 +48,18 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
         modal: boolean;
         doubleClickStageChange: boolean;
     };
+    /**
+     * @hidden
+     */
+    static contextType: React.Context<number>;
+    /**
+     * **Deprecated.** Use `element` instead.
+     */
+    windowElement?: HTMLDivElement | null;
     /**
      * The Window element.
      */
-    windowElement?: any;
+    element?: HTMLDivElement | null;
     /**
      * @hidden
      */
@@ -58,6 +67,8 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
     draggable: Draggable | null;
     private windowCoordinatesState?;
     private offSetCoordinates?;
+    private _id;
+    private _blurTimeout?;
     constructor(props: WindowProps);
     /**
      * @hidden
@@ -71,6 +82,10 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
      * @hidden
      */
     componentDidUpdate(): void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: any) => void;
     /**
      * @hidden
      */
@@ -86,13 +101,20 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
     /**
      * @hidden
      */
-    render(): JSX.Element;
+    onFocus: () => void;
+    /**
+     * @hidden
+     */
+    onBlur: () => void;
+    /**
+     * @hidden
+     */
+    render(): React.ReactPortal;
     private readonly top;
     private readonly left;
     private readonly width;
     private readonly height;
     private readonly windowStage;
-    private handleKeyDown;
     private getInitialTop;
     private getInitialLeft;
     private getInitialWidth;
@@ -107,6 +129,8 @@ export declare class Window extends React.Component<WindowProps, WindowState> {
     private handleBrowserWindowResize;
     private getActionBar;
     private getContent;
-    private setZindex;
+    private getCurrentZIndex;
+    private getDocument;
+    private getWindow;
 }
 export {};

package/dist/es/Window.js

@@ -26,7 +26,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as PropTypes from 'prop-types';
 import { WindowTitleBar } from './WindowTitlebar';
-import { dispatchEvent, Keys, classNames } from '@progress/kendo-react-common';
+import { dispatchEvent, Keys, classNames, guid, ZIndexContext, canUseDOM } from '@progress/kendo-react-common';
 import { Draggable } from '@progress/kendo-react-common';
 import { ResizeHandlers } from './WindowResizeHandlers';
 import { MiddleLayerOptimization } from './MiddleLayerOptimization';
@@ -34,6 +34,8 @@ import { windowStage } from './StageEnum';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 import { WindowActionsBar } from './WindowActionsBar';
+import { DATA_DIALOGS_ID, DEFAULT_DIALOGS_ZINDEX, ZINDEX_DIALOGS_STEP } from './constants';
+import { getMaxZIndex } from './utils';
 var DEFAULT_WIDTH = 300;
 var DEFAULT_HEIGHT = 300;
 var DEFAULT_MIN_WIDTH = 120;
@@ -44,48 +46,11 @@ var Window = /** @class */ (function (_super) {
     function Window(props) {
         var _this = _super.call(this, props) || this;
         _this.offSetCoordinates = { x: 0, y: 0 };
+        _this._id = guid();
         /**
          * @hidden
          */
-        _this.onPress = function (data) {
-            var e = data.event;
-            _this.windowCoordinatesState.differenceLeft = e.pageX - _this.left;
-            _this.windowCoordinatesState.differenceTop = e.pageY - _this.top;
-        };
-        /**
-         * @hidden
-         */
-        _this.onDrag = function (data) {
-            var e = data.event;
-            e.originalEvent.preventDefault();
-            if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
-                _this.setState({
-                    top: Math.max(e.pageY - _this.windowCoordinatesState.differenceTop, 0),
-                    left: e.pageX - _this.windowCoordinatesState.differenceLeft,
-                    isDragging: true
-                });
-                if (_this.props.onMove) {
-                    // eslint-disable-next-line max-len
-                    _this.dispatchMoveEvent(_this.props.onMove, e, true, false);
-                }
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.onRelease = function (data) {
-            var e = data.event;
-            if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
-                if (_this.props.onMove) {
-                    _this.dispatchMoveEvent(_this.props.onMove, e, true, true);
-                }
-            }
-            _this.setState({
-                isDragging: false
-            });
-        };
-        // Keyboard navigation
-        _this.handleKeyDown = function (event) {
+        _this.onKeyDown = function (event) {
             if (event.target !== event.currentTarget) {
                 return;
             }
@@ -166,6 +131,74 @@ var Window = /** @class */ (function (_super) {
             }
             _this.dispatchMoveEvent(_this.props.onMove, event, false, undefined);
         };
+        /**
+         * @hidden
+         */
+        _this.onPress = function (data) {
+            var e = data.event;
+            _this.windowCoordinatesState.differenceLeft = e.pageX - _this.left;
+            _this.windowCoordinatesState.differenceTop = e.pageY - _this.top;
+        };
+        /**
+         * @hidden
+         */
+        _this.onDrag = function (data) {
+            var e = data.event;
+            e.originalEvent.preventDefault();
+            if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
+                _this.setState({
+                    top: Math.max(e.pageY - _this.windowCoordinatesState.differenceTop, 0),
+                    left: e.pageX - _this.windowCoordinatesState.differenceLeft,
+                    isDragging: true
+                });
+                if (_this.props.onMove) {
+                    // eslint-disable-next-line max-len
+                    _this.dispatchMoveEvent(_this.props.onMove, e, true, false);
+                }
+            }
+        };
+        /**
+         * @hidden
+         */
+        _this.onRelease = function (data) {
+            var e = data.event;
+            if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
+                if (_this.props.onMove) {
+                    _this.dispatchMoveEvent(_this.props.onMove, e, true, true);
+                }
+            }
+            _this.setState({
+                isDragging: false
+            });
+        };
+        /**
+         * @hidden
+         */
+        _this.onFocus = function () {
+            if (_this._blurTimeout) {
+                clearTimeout(_this._blurTimeout);
+                _this._blurTimeout = undefined;
+            }
+            else {
+                _this.setState({
+                    focused: true,
+                    zIndex: getMaxZIndex(_this.getCurrentZIndex(), _this.getDocument(), _this._id)
+                });
+            }
+        };
+        /**
+         * @hidden
+         */
+        _this.onBlur = function () {
+            clearTimeout(_this._blurTimeout);
+            var currentWindow = _this.getWindow();
+            if (currentWindow) {
+                _this._blurTimeout = currentWindow.setTimeout(function () {
+                    _this.setState({ focused: false });
+                    _this._blurTimeout = undefined;
+                });
+            }
+        };
         // Get initial coordinates of the Window
         _this.getInitialTop = function () {
             if (_this.props.top !== undefined) {
@@ -184,7 +217,8 @@ var Window = /** @class */ (function (_super) {
             if (_this.props.appendTo) {
                 return (_this.props.appendTo.offsetHeight / 2) - (height / 2);
             }
-            return (window.innerHeight / 2) - (height / 2);
+            var currentWindow = _this.getWindow();
+            return currentWindow ? (currentWindow.innerHeight / 2) - (height / 2) : 0;
         };
         _this.getInitialLeft = function () {
             if (_this.props.left !== undefined) {
@@ -203,7 +237,8 @@ var Window = /** @class */ (function (_super) {
             if (_this.props.appendTo) {
                 return (_this.props.appendTo.offsetWidth / 2) - (width / 2);
             }
-            return (window.innerWidth / 2) - (width / 2);
+            var currentWindow = _this.getWindow();
+            return currentWindow ? (currentWindow.innerWidth / 2) - (width / 2) : 0;
         };
         _this.getInitialWidth = function () {
             var width = DEFAULT_WIDTH;
@@ -244,11 +279,14 @@ var Window = /** @class */ (function (_super) {
             _this.windowCoordinatesState.topBeforeAction = _this.top;
             _this.windowCoordinatesState.widthBeforeAction = _this.width;
             _this.windowCoordinatesState.heightBeforeAction = _this.height;
+            var currentWindow = _this.getWindow();
+            var innerWidth = currentWindow ? currentWindow.innerWidth : 0;
+            var innerHeight = currentWindow ? currentWindow.innerHeight : 0;
             _this.setState({
                 left: 0,
                 top: 0,
-                width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : window.innerWidth,
-                height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : window.innerHeight,
+                width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : innerWidth,
+                height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : innerHeight,
                 stage: windowStage.FULLSCREEN
             });
             dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.FULLSCREEN });
@@ -337,27 +375,27 @@ var Window = /** @class */ (function (_super) {
         };
         _this.handleBrowserWindowResize = function () {
             if (_this.windowStage === windowStage.FULLSCREEN) {
+                var currentWindow = _this.getWindow();
+                var innerWidth_1 = currentWindow ? currentWindow.innerWidth : 0;
+                var innerHeight_1 = currentWindow ? currentWindow.innerHeight : 0;
                 _this.setState({
-                    width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : window.innerWidth,
-                    height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : window.innerHeight
+                    width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : innerWidth_1,
+                    height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : innerHeight_1
                 });
             }
         };
-        _this.setZindex = function () {
-            if (_this.state.focused) {
-                var allWindows = document && document.querySelectorAll('.k-window');
-                var maxZindex_1 = 10002;
-                allWindows.forEach(function (KRwindow) {
-                    var computedStyle = window.getComputedStyle(KRwindow, null);
-                    var zIndexValue = parseInt(computedStyle.zIndex !== null ? computedStyle.zIndex : '10002', 10);
-                    zIndexValue > maxZindex_1 ? maxZindex_1 = zIndexValue : null;
-                });
-                if (_this.windowElement && maxZindex_1.toString() === _this.windowElement.style.zIndex) {
-                    return _this.windowElement.style.zIndex;
-                }
-                return (maxZindex_1 + 1).toString();
+        _this.getCurrentZIndex = function () {
+            if (!_this.state) {
+                return _this.context ? _this.context : DEFAULT_DIALOGS_ZINDEX;
             }
-            return _this.windowElement.style.zIndex;
+            return _this.state.zIndex > (_this.context ? _this.context + ZINDEX_DIALOGS_STEP : 0) ? _this.state.zIndex : _this.context + ZINDEX_DIALOGS_STEP;
+        };
+        _this.getDocument = function () {
+            return _this.props.appendTo ? _this.props.appendTo.ownerDocument : document;
+        };
+        _this.getWindow = function () {
+            var currentDocument = _this.getDocument();
+            return currentDocument && currentDocument.defaultView;
         };
         validatePackage(packageMetadata);
         _this.state = {
@@ -367,7 +405,8 @@ var Window = /** @class */ (function (_super) {
             left: _this.getInitialLeft(),
             width: _this.getInitialWidth(),
             height: _this.getInitialHeight(),
-            focused: true
+            focused: true,
+            zIndex: getMaxZIndex(_this.getCurrentZIndex(), _this.getDocument(), _this._id)
         };
         _this.windowCoordinatesState = {
             leftBeforeAction: _this.getInitialLeft(),
@@ -381,12 +420,14 @@ var Window = /** @class */ (function (_super) {
      * @hidden
      */
     Window.prototype.componentDidMount = function () {
-        if (window) {
-            window.addEventListener('resize', this.handleBrowserWindowResize);
+        var currentWindow = this.getWindow();
+        if (currentWindow) {
+            currentWindow.addEventListener('resize', this.handleBrowserWindowResize);
         }
-        if (this.props.appendTo) {
+        var currentDocument = this.getDocument();
+        if (this.props.appendTo && currentDocument) {
             var containerCoordinates = this.props.appendTo.getBoundingClientRect();
-            var bodyRect = document.body.getBoundingClientRect();
+            var bodyRect = currentDocument.body.getBoundingClientRect();
             this.offSetCoordinates.x = containerCoordinates.left - bodyRect.left;
             this.offSetCoordinates.y = containerCoordinates.top - bodyRect.top;
         }
@@ -395,17 +436,19 @@ var Window = /** @class */ (function (_super) {
      * @hidden
      */
     Window.prototype.componentWillUnmount = function () {
-        if (window) {
-            window.removeEventListener('resize', this.handleBrowserWindowResize);
+        var currentWindow = this.getWindow();
+        if (currentWindow) {
+            currentWindow.removeEventListener('resize', this.handleBrowserWindowResize);
         }
     };
     /**
      * @hidden
      */
     Window.prototype.componentDidUpdate = function () {
-        if (this.props.appendTo) {
+        var currentDocument = this.getDocument();
+        if (this.props.appendTo && currentDocument) {
             var containerCoordinates = this.props.appendTo.getBoundingClientRect();
-            var bodyRect = document.body.getBoundingClientRect();
+            var bodyRect = currentDocument.body.getBoundingClientRect();
             this.offSetCoordinates.x = containerCoordinates.left - bodyRect.left;
             this.offSetCoordinates.y = containerCoordinates.top - bodyRect.top;
         }
@@ -415,29 +458,35 @@ var Window = /** @class */ (function (_super) {
      */
     Window.prototype.render = function () {
         var _this = this;
+        var _a;
         var elementsArray = React.Children.toArray(this.props.children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
+        var currentZIndex = this.getCurrentZIndex();
         var classNamesWindow = classNames('k-widget', 'k-window', this.props.className, { 'k-window-minimized': this.state.stage === 'MINIMIZED' }, { 'k-window-focused': this.state.focused });
-        var windowElement = (React.createElement(React.Fragment, null,
-            this.props.modal && React.createElement("div", { className: "k-overlay" }),
-            React.createElement("div", { tabIndex: 0, onFocus: function () { return _this.setState({ focused: true }); }, onBlur: function () { return _this.setState({ focused: false }); }, onKeyDown: this.handleKeyDown, ref: (function (el) { return _this.windowElement = el; }), className: classNamesWindow, style: __assign({ top: this.top, left: this.left, width: this.width, height: this.height || '', zIndex: this.setZindex() }, this.props.style) },
-                React.createElement(MiddleLayerOptimization, { shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || false, isDragging: this.state.isDragging },
-                    React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { return _this.draggable = component; } },
-                        React.createElement(WindowTitleBar, { stage: this.windowStage, onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : undefined, 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 }, this.props.title)),
-                    this.windowStage !== windowStage.MINIMIZED
-                        ? (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "k-window-content" }, content),
-                            actions))
-                        : null,
-                    this.windowStage === windowStage.DEFAULT &&
-                        this.props.resizable
-                        ? React.createElement(ResizeHandlers, { onResize: this.handleResize })
-                        : null))));
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(windowElement, this.props.appendTo);
+        var windowElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
+            React.createElement(React.Fragment, null,
+                this.props.modal && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, this.props.overlayStyle) })),
+                React.createElement("div", __assign({}, (_a = {}, _a[DATA_DIALOGS_ID] = this._id, _a), { tabIndex: 0, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
+                        _this.windowElement = el;
+                        _this.element = el;
+                    }, className: classNamesWindow, style: __assign({ top: this.top, left: this.left, width: this.width, height: this.height || '', zIndex: currentZIndex }, this.props.style) }),
+                    React.createElement(MiddleLayerOptimization, { shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || false, isDragging: this.state.isDragging },
+                        React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { return _this.draggable = component; } },
+                            React.createElement(WindowTitleBar, { stage: this.windowStage, onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : undefined, 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 }, this.props.title)),
+                        this.windowStage !== windowStage.MINIMIZED
+                            ? (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: "k-window-content" }, content),
+                                actions))
+                            : null,
+                        this.windowStage === windowStage.DEFAULT &&
+                            this.props.resizable
+                            ? React.createElement(ResizeHandlers, { onResize: this.handleResize })
+                            : null)))));
+        if (canUseDOM) {
+            return ReactDOM.createPortal(windowElement, this.props.appendTo || document.body);
         }
-        return windowElement;
+        return null;
     };
     Object.defineProperty(Window.prototype, "top", {
         // Getters
@@ -468,7 +517,8 @@ var Window = /** @class */ (function (_super) {
                     width = this.props.appendTo.offsetWidth;
                     return width;
                 }
-                width = window.innerWidth;
+                var currentWindow = this.getWindow();
+                width = currentWindow ? currentWindow.innerWidth : 0;
             }
             return width;
         },
@@ -483,7 +533,8 @@ var Window = /** @class */ (function (_super) {
                     height = this.props.appendTo.offsetHeight;
                     return height;
                 }
-                height = window.innerHeight;
+                var currentWindow = this.getWindow();
+                height = currentWindow ? currentWindow.innerHeight : 0;
             }
             else if (this.windowStage === windowStage.MINIMIZED) {
                 height = 0;
@@ -512,7 +563,6 @@ var Window = /** @class */ (function (_super) {
      * @hidden
      */
     Window.propTypes = {
-        id: PropTypes.string,
         width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -529,7 +579,8 @@ var Window = /** @class */ (function (_super) {
         shouldUpdateOnDrag: PropTypes.bool,
         stage: PropTypes.oneOf(['DEFAULT', 'MINIMIZED', 'FULLSCREEN']),
         className: PropTypes.string,
-        style: PropTypes.object
+        style: PropTypes.object,
+        overlayStyle: PropTypes.object
     };
     /**
      * @hidden
@@ -542,6 +593,10 @@ var Window = /** @class */ (function (_super) {
         modal: false,
         doubleClickStageChange: true
     };
+    /**
+     * @hidden
+     */
+    Window.contextType = ZIndexContext;
     return Window;
 }(React.Component));
 export { Window };

package/dist/es/WindowProps.d.ts

@@ -106,6 +106,10 @@ export interface WindowProps {
      * Set styles to the Window element.
      */
     style?: React.CSSProperties;
+    /**
+     * Set styles to the Window overlay element rendered when the `modal` prop is enabled.
+     */
+    overlayStyle?: React.CSSProperties;
     /**
      * Sets a class of the Window DOM element.
      */

package/dist/es/constants.d.ts

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

package/dist/es/constants.js

@@ -0,0 +1,8 @@
+/** @hidden */
+export var DATA_DIALOGS_ID = 'data-windowid';
+/** @hidden */
+export var DEFAULT_DIALOGS_ZINDEX = 10002;
+/** @hidden */
+export var ZINDEX_DIALOGS_STEP = 2;
+/** @hidden */
+export var DIALOGS_SELECTOR = '.k-window:not(.k-dialog), .k-dialog-wrapper';

package/dist/es/main.d.ts

@@ -1,8 +1,9 @@
-import { Dialog, DialogProps } from './Dialog';
+import { Dialog } from './Dialog';
 import { DialogActionsBar } from './DialogActionsBar';
 import { Window } from './Window';
 import { WindowProps } from './WindowProps';
 import { WindowActionsBar } from './WindowActionsBar';
 import { DialogCloseEvent, WindowActionsEvent, WindowMoveEvent } from './events';
 import { ActionsLayout } from './models/actions-layout';
+import { DialogProps } from './DialogProps';
 export { Dialog, DialogProps, DialogActionsBar, DialogCloseEvent, Window, WindowProps, WindowActionsBar, WindowActionsEvent, WindowMoveEvent, ActionsLayout };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dialogs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1638254659,
+    publishDate: 1638880453,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/utils.d.ts

@@ -0,0 +1,2 @@
+/** @hidden */
+export declare const getMaxZIndex: (currentZIndex: number, currentDocument: Document, currentWindowId: string) => number;

package/dist/es/utils.js

@@ -0,0 +1,22 @@
+import { DATA_DIALOGS_ID, DIALOGS_SELECTOR, ZINDEX_DIALOGS_STEP } from './constants';
+/** @hidden */
+export var getMaxZIndex = function (currentZIndex, currentDocument, currentWindowId) {
+    var maxZindex = currentZIndex;
+    if (currentDocument && currentDocument.defaultView) {
+        var allWindows = currentDocument.querySelectorAll(DIALOGS_SELECTOR);
+        var zIndexChanged_1 = false;
+        allWindows.forEach(function (KRwindow) {
+            var computedStyle = currentDocument.defaultView.getComputedStyle(KRwindow, null);
+            var dataId = KRwindow.getAttribute(DATA_DIALOGS_ID);
+            if (dataId !== currentWindowId && computedStyle.zIndex !== null) {
+                var zIndexValue = parseInt(computedStyle.zIndex, 10);
+                if (zIndexValue >= maxZindex) {
+                    maxZindex = zIndexValue;
+                    zIndexChanged_1 = true;
+                }
+            }
+        });
+        return zIndexChanged_1 ? (maxZindex + ZINDEX_DIALOGS_STEP) : maxZindex;
+    }
+    return maxZindex;
+};

package/dist/npm/Dialog.d.ts

@@ -1,68 +1,10 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { DialogCloseEvent } from './events';
-/**
- * Represents the props of the [KendoReact Dialog component]({% slug overview_dialog %}).
- */
-export interface DialogProps {
-    /**
-     * Focus the Dialog container automatically when mounted. By default the autoFocus is false.
-     */
-    autoFocus?: boolean;
-    /**
-     * Sets the title of the Dialog ([see example]({% slug title_dialog %})). If `title` is not specified, the Dialog does not render a **Close** button.
-     */
-    title?: string | React.ReactElement<any>;
-    /**
-     * Sets a class of the Dialog DOM element.
-     */
-    className?: string;
-    /**
-     * Specifies whether a close button should be rendered at the top corner of the dialog.
-     */
-    closeIcon?: boolean;
-    /**
-     * Specifies the width of the Dialog ([see example]({% slug dimensions_dialog %})).
-     */
-    width?: number | string;
-    /**
-     * Specifies the height of the Dialog ([see example]({% slug dimensions_dialog %})).
-     */
-    height?: number | string;
-    /**
-     * Specifies the minimum width of the Dialog.
-     */
-    minWidth?: number | string;
-    /**
-     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
-     */
-    onClose?: (event: DialogCloseEvent) => void;
-    /**
-     * @hidden
-     */
-    children?: React.ReactNode;
-    /**
-     * Sets the `aria-labelledby` value.
-     */
-    id?: string;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * The styles that are applied to the Dialog.
-     */
-    style?: React.CSSProperties;
-    /**
-     * The styles that are applied to the content of the Dialog.
-     */
-    contentStyle?: React.CSSProperties;
-    /**
-     * Defines the container to which the Window will be appended. Defaults to its parent element.
-     */
-    appendTo?: any;
+import { DialogProps } from './DialogProps';
+interface DialogState {
+    zIndex: number;
 }
-export declare class Dialog extends React.Component<DialogProps> {
+export declare class Dialog extends React.Component<DialogProps, DialogState> {
     /**
      * @hidden
      */
@@ -86,7 +28,12 @@ export declare class Dialog extends React.Component<DialogProps> {
     /**
      * @hidden
      */
-    DialogRef: React.RefObject<HTMLDivElement>;
+    static contextType: React.Context<number>;
+    /**
+     * @hidden
+     */
+    element?: HTMLDivElement | null;
+    private _id;
     private titleId;
     constructor(props: DialogProps);
     /**
@@ -96,10 +43,19 @@ export declare class Dialog extends React.Component<DialogProps> {
     /**
      * @hidden
      */
-    render(): JSX.Element;
-    private handleCloseDialog;
-    private handleKeyDown;
+    onCloseDialog: (event: React.SyntheticEvent<any, Event>) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: any) => void;
+    /**
+     * @hidden
+     */
+    render(): React.ReactPortal;
     private getActionBar;
     private getContent;
     private generateTitleId;
+    private getCurrentZIndex;
+    private getDocument;
 }
+export {};