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

package/dist/npm/Dialog.js

@@ -25,69 +25,90 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var react_dom_1 = require("react-dom");
+var ReactDOM = require("react-dom");
 var PropTypes = require("prop-types");
 var DialogTitleBar_1 = require("./DialogTitleBar");
 var DialogActionsBar_1 = require("./DialogActionsBar");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("./package-metadata");
-// tslint:enable:max-line-length
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
 var Dialog = /** @class */ (function (_super) {
     __extends(Dialog, _super);
     function Dialog(props) {
         var _this = _super.call(this, props) || this;
+        _this._id = kendo_react_common_1.guid();
+        _this.titleId = _this.generateTitleId();
         /**
          * @hidden
          */
-        _this.DialogRef = React.createRef();
-        _this.titleId = _this.generateTitleId();
-        _this.handleCloseDialog = function (event) {
+        _this.onCloseDialog = function (event) {
             event.preventDefault();
             kendo_react_common_1.dispatchEvent(_this.props.onClose, event, _this, undefined);
         };
-        _this.handleKeyDown = function (event) {
+        /**
+         * @hidden
+         */
+        _this.onKeyDown = function (event) {
             if (event.keyCode === kendo_react_common_1.Keys.esc && _this.props.onClose) {
                 event.preventDefault();
-                _this.handleCloseDialog(event);
+                _this.onCloseDialog(event);
             }
-            var kDialog = _this.DialogRef.current;
+            var kDialog = _this.element;
             if (kDialog && (event.keyCode === kendo_react_common_1.Keys.tab)) {
                 var focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
                 var focusableContent = kDialog.querySelectorAll(focusableElements);
                 var firstFocusableElement = focusableContent[0];
                 var lastFocusableElement = focusableContent[focusableContent.length - 1];
+                var currentDocument = _this.getDocument();
                 if (event.shiftKey) {
-                    if (document.activeElement === firstFocusableElement) {
+                    if (currentDocument && currentDocument.activeElement === firstFocusableElement) {
                         lastFocusableElement.focus();
                         event.preventDefault();
                     }
                 }
                 else {
-                    if (document.activeElement === lastFocusableElement) {
+                    if (currentDocument && currentDocument.activeElement === lastFocusableElement) {
                         firstFocusableElement.focus();
                         event.preventDefault();
                     }
                 }
             }
         };
+        _this.getCurrentZIndex = function () {
+            if (!_this.state) {
+                return _this.context ? _this.context : constants_1.DEFAULT_DIALOGS_ZINDEX;
+            }
+            return _this.state.zIndex > (_this.context ? _this.context + constants_1.ZINDEX_DIALOGS_STEP : 0) ? _this.state.zIndex : _this.context + constants_1.ZINDEX_DIALOGS_STEP;
+        };
+        _this.getDocument = function () {
+            return _this.props.appendTo ? _this.props.appendTo.ownerDocument : document;
+        };
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        _this.state = {
+            zIndex: utils_1.getMaxZIndex(_this.getCurrentZIndex(), _this.getDocument(), _this._id)
+        };
         return _this;
     }
     /**
      * @hidden
      */
     Dialog.prototype.componentDidMount = function () {
-        if (this.DialogRef.current && this.props.autoFocus) {
-            this.DialogRef.current.focus();
+        if (this.element) {
+            if (this.props.autoFocus) {
+                this.element.focus();
+            }
         }
     };
     /**
      * @hidden
      */
     Dialog.prototype.render = function () {
+        var _this = this;
+        var _a;
         var id = this.props.id !== undefined ? this.props.id : this.titleId;
-        var _a = this.props, title = _a.title, width = _a.width, height = _a.height, children = _a.children, minWidth = _a.minWidth, dir = _a.dir, style = _a.style, contentStyle = _a.contentStyle;
+        var _b = this.props, title = _b.title, width = _b.width, height = _b.height, children = _b.children, minWidth = _b.minWidth, dir = _b.dir, style = _b.style, contentStyle = _b.contentStyle;
         var elementsArray = React.Children.toArray(children);
         var content = this.getContent(elementsArray);
         var actions = this.getActionBar(elementsArray);
@@ -95,14 +116,19 @@ var Dialog = /** @class */ (function (_super) {
             'aria-labelledby': id
         } : null;
         var closeIcon = this.props.closeIcon !== undefined ? this.props.closeIcon : true;
-        var output = (React.createElement("div", { className: 'k-dialog-wrapper' + (this.props.className ? ' ' + this.props.className : ''), onKeyDown: this.handleKeyDown, tabIndex: 0, dir: dir, style: style, ref: this.DialogRef },
-            React.createElement("div", { className: "k-overlay" }),
-            React.createElement("div", __assign({}, aria, { className: "k-widget k-window k-dialog", role: "dialog", style: { width: width, height: height, minWidth: minWidth } }),
-                this.props.title &&
-                    React.createElement(DialogTitleBar_1.DialogTitleBar, { closeIcon: closeIcon, onCloseButtonClick: this.handleCloseDialog, id: id }, title),
-                React.createElement("div", { className: "k-window-content k-dialog-content", style: contentStyle }, content),
-                actions)));
-        return this.props.appendTo ? react_dom_1.createPortal(output, this.props.appendTo) : output;
+        var currentZIndex = this.getCurrentZIndex();
+        var dialogElement = (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
+            React.createElement("div", __assign({}, (_a = {}, _a[constants_1.DATA_DIALOGS_ID] = this._id, _a), { className: 'k-dialog-wrapper' + (this.props.className ? ' ' + this.props.className : ''), onKeyDown: this.onKeyDown, tabIndex: 0, dir: dir, style: __assign({ zIndex: currentZIndex }, style), ref: (function (el) { return _this.element = el; }) }),
+                React.createElement("div", { className: "k-overlay" }),
+                React.createElement("div", __assign({}, aria, { className: "k-widget k-window k-dialog", role: "dialog", style: { width: width, height: height, minWidth: minWidth } }),
+                    this.props.title &&
+                        React.createElement(DialogTitleBar_1.DialogTitleBar, { closeIcon: closeIcon, onCloseButtonClick: this.onCloseDialog, id: id }, title),
+                    React.createElement("div", { className: "k-window-content k-dialog-content", style: contentStyle }, content),
+                    actions))));
+        if (kendo_react_common_1.canUseDOM) {
+            return ReactDOM.createPortal(dialogElement, this.props.appendTo || document.body);
+        }
+        return null;
     };
     Dialog.prototype.getActionBar = function (children) {
         return children.filter(function (child) { return child && child.type === DialogActionsBar_1.DialogActionsBar; });
@@ -113,7 +139,7 @@ var Dialog = /** @class */ (function (_super) {
         });
     };
     Dialog.prototype.generateTitleId = function () {
-        return 'dialog-title' + kendo_react_common_1.guid();
+        return 'dialog-title' + this._id;
     };
     /**
      * @hidden
@@ -135,6 +161,10 @@ var Dialog = /** @class */ (function (_super) {
     Dialog.defaultProps = {
         autoFocus: false
     };
+    /**
+     * @hidden
+     */
+    Dialog.contextType = kendo_react_common_1.ZIndexContext;
     return Dialog;
 }(React.Component));
 exports.Dialog = Dialog;

package/dist/npm/DialogProps.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+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;
+}

package/dist/npm/DialogProps.js

@@ -0,0 +1,4 @@
+"use strict";
+/* eslint-disable max-len */
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length

package/dist/npm/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 {};