primereact 7.0.0-rc.1 → 7.1.0

package/deferredcontent/deferredcontent.esm.min.js

@@ -1 +1 @@
-import t,{Component as e}from"react";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}function u(t){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function l(t,e){if(e&&("object"===u(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return c(t)}function a(t){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}var f,d,p,y=function(r){i(h,e);var u,c,f,d,p,y=(u=h,c=s(),function(){var t,e=a(u);if(c){var n=a(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return l(this,t)});function h(t){var e;return n(this,h),(e=y.call(this,t)).state={loaded:!1},e}return f=h,(d=[{key:"componentDidMount",value:function(){this.state.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())}},{key:"bindScrollListener",value:function(){var t=this;this.documentScrollListener=function(){t.shouldLoad()&&(t.load(),t.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)}},{key:"unbindScrollListener",value:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)}},{key:"shouldLoad",value:function(){if(this.state.loaded)return!1;var t=this.container.getBoundingClientRect();return document.documentElement.clientHeight>=t.top}},{key:"load",value:function(t){this.setState({loaded:!0}),this.props.onLoad&&this.props.onLoad(t)}},{key:"componentWillUnmount",value:function(){this.unbindScrollListener()}},{key:"render",value:function(){var e=this;return t.createElement("div",{ref:function(t){return e.container=t}},this.state.loaded?this.props.children:null)}}])&&o(f.prototype,d),p&&o(f,p),h}();p={onload:null},(d="defaultProps")in(f=y)?Object.defineProperty(f,d,{value:p,enumerable:!0,configurable:!0,writable:!0}):f[d]=p;export{y as DeferredContent};
+import t,{Component as e}from"react";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e){return r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}function u(t){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u(t)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function l(t,e){if(e&&("object"===u(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return c(t)}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}var f,d,p,y=function(r){i(h,e);var u,c,f,d,p,y=(u=h,c=s(),function(){var t,e=a(u);if(c){var n=a(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return l(this,t)});function h(t){var e;return n(this,h),(e=y.call(this,t)).state={loaded:!1},e}return f=h,(d=[{key:"componentDidMount",value:function(){this.state.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())}},{key:"bindScrollListener",value:function(){var t=this;this.documentScrollListener=function(){t.shouldLoad()&&(t.load(),t.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)}},{key:"unbindScrollListener",value:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)}},{key:"shouldLoad",value:function(){if(this.state.loaded)return!1;var t=this.container.getBoundingClientRect();return document.documentElement.clientHeight>=t.top}},{key:"load",value:function(t){this.setState({loaded:!0}),this.props.onLoad&&this.props.onLoad(t)}},{key:"componentWillUnmount",value:function(){this.unbindScrollListener()}},{key:"render",value:function(){var e=this;return t.createElement("div",{ref:function(t){return e.container=t}},this.state.loaded?this.props.children:null)}}])&&o(f.prototype,d),p&&o(f,p),h}();p={onload:null},(d="defaultProps")in(f=y)?Object.defineProperty(f,d,{value:p,enumerable:!0,configurable:!0,writable:!0}):f[d]=p;export{y as DeferredContent};

package/deferredcontent/deferredcontent.js

@@ -191,7 +191,7 @@ this.primereact.deferredcontent = (function (exports, React) {
       value: function render() {
         var _this3 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
             return _this3.container = el;
           }
@@ -212,4 +212,4 @@ this.primereact.deferredcontent = (function (exports, React) {
 
   return exports;
 
-}({}, React));
+})({}, React);

package/deferredcontent/deferredcontent.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.deferredcontent=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(t);function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e,t){if(t&&("object"===l(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function d(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var p,y,h,b=function(e){c(y,e);var t,n,u,l,a,p=(t=y,n=d(),function(){var e,o=s(t);if(n){var r=s(this).constructor;e=Reflect.construct(o,arguments,r)}else e=o.apply(this,arguments);return f(this,e)});function y(e){var t;return r(this,y),(t=p.call(this,e)).state={loaded:!1},t}return u=y,(l=[{key:"componentDidMount",value:function(){this.state.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())}},{key:"bindScrollListener",value:function(){var e=this;this.documentScrollListener=function(){e.shouldLoad()&&(e.load(),e.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)}},{key:"unbindScrollListener",value:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)}},{key:"shouldLoad",value:function(){if(this.state.loaded)return!1;var e=this.container.getBoundingClientRect();return document.documentElement.clientHeight>=e.top}},{key:"load",value:function(e){this.setState({loaded:!0}),this.props.onLoad&&this.props.onLoad(e)}},{key:"componentWillUnmount",value:function(){this.unbindScrollListener()}},{key:"render",value:function(){var e=this;return o.default.createElement("div",{ref:function(t){return e.container=t}},this.state.loaded?this.props.children:null)}}])&&i(u.prototype,l),a&&i(u,a),y}(t.Component);return h={onload:null},(y="defaultProps")in(p=b)?Object.defineProperty(p,y,{value:h,enumerable:!0,configurable:!0,writable:!0}):p[y]=h,e.DeferredContent=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React);
+this.primereact=this.primereact||{},this.primereact.deferredcontent=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(t);function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function u(e,t){return u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},u(e,t)}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e,t){if(t&&("object"===l(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}function s(e){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},s(e)}function d(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var p,y,h,b=function(e){c(y,e);var t,n,u,l,a,p=(t=y,n=d(),function(){var e,o=s(t);if(n){var r=s(this).constructor;e=Reflect.construct(o,arguments,r)}else e=o.apply(this,arguments);return f(this,e)});function y(e){var t;return r(this,y),(t=p.call(this,e)).state={loaded:!1},t}return u=y,(l=[{key:"componentDidMount",value:function(){this.state.loaded||(this.shouldLoad()?this.load():this.bindScrollListener())}},{key:"bindScrollListener",value:function(){var e=this;this.documentScrollListener=function(){e.shouldLoad()&&(e.load(),e.unbindScrollListener())},window.addEventListener("scroll",this.documentScrollListener)}},{key:"unbindScrollListener",value:function(){this.documentScrollListener&&(window.removeEventListener("scroll",this.documentScrollListener),this.documentScrollListener=null)}},{key:"shouldLoad",value:function(){if(this.state.loaded)return!1;var e=this.container.getBoundingClientRect();return document.documentElement.clientHeight>=e.top}},{key:"load",value:function(e){this.setState({loaded:!0}),this.props.onLoad&&this.props.onLoad(e)}},{key:"componentWillUnmount",value:function(){this.unbindScrollListener()}},{key:"render",value:function(){var e=this;return o.default.createElement("div",{ref:function(t){return e.container=t}},this.state.loaded?this.props.children:null)}}])&&i(u.prototype,l),a&&i(u,a),y}(t.Component);return h={onload:null},(y="defaultProps")in(p=b)?Object.defineProperty(p,y,{value:h,enumerable:!0,configurable:!0,writable:!0}):p[y]=h,e.DeferredContent=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React);

package/dialog/dialog.cjs.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var csstransition = require('primereact/csstransition');
+var ripple = require('primereact/ripple');
+var portal = require('primereact/portal');
+var PrimeReact = require('primereact/api');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -179,8 +184,8 @@ var Dialog = /*#__PURE__*/function (_Component) {
     _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
     _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
     _this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
-    _this.attributeSelector = core.UniqueComponentId();
-    _this.dialogRef = /*#__PURE__*/React__default['default'].createRef();
+    _this.attributeSelector = utils.UniqueComponentId();
+    _this.dialogRef = /*#__PURE__*/React__default["default"].createRef();
     return _this;
   }
 
@@ -230,7 +235,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
   }, {
     key: "onDragStart",
     value: function onDragStart(event) {
-      if (core.DomHandler.hasClass(event.target, 'p-dialog-header-icon') || core.DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
+      if (utils.DomHandler.hasClass(event.target, 'p-dialog-header-icon') || utils.DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
         return;
       }
 
@@ -239,7 +244,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.lastPageX = event.pageX;
         this.lastPageY = event.pageY;
         this.dialogEl.style.margin = '0';
-        core.DomHandler.addClass(document.body, 'p-unselectable-text');
+        utils.DomHandler.addClass(document.body, 'p-unselectable-text');
 
         if (this.props.onDragStart) {
           this.props.onDragStart(event);
@@ -250,14 +255,14 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "onDrag",
     value: function onDrag(event) {
       if (this.dragging) {
-        var width = core.DomHandler.getOuterWidth(this.dialogEl);
-        var height = core.DomHandler.getOuterHeight(this.dialogEl);
+        var width = utils.DomHandler.getOuterWidth(this.dialogEl);
+        var height = utils.DomHandler.getOuterHeight(this.dialogEl);
         var deltaX = event.pageX - this.lastPageX;
         var deltaY = event.pageY - this.lastPageY;
         var offset = this.dialogEl.getBoundingClientRect();
         var leftPos = offset.left + deltaX;
         var topPos = offset.top + deltaY;
-        var viewport = core.DomHandler.getViewport();
+        var viewport = utils.DomHandler.getViewport();
         this.dialogEl.style.position = 'fixed';
 
         if (this.props.keepInViewport) {
@@ -287,7 +292,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function onDragEnd(event) {
       if (this.dragging) {
         this.dragging = false;
-        core.DomHandler.removeClass(document.body, 'p-unselectable-text');
+        utils.DomHandler.removeClass(document.body, 'p-unselectable-text');
 
         if (this.props.onDragEnd) {
           this.props.onDragEnd(event);
@@ -301,7 +306,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.resizing = true;
         this.lastPageX = event.pageX;
         this.lastPageY = event.pageY;
-        core.DomHandler.addClass(document.body, 'p-unselectable-text');
+        utils.DomHandler.addClass(document.body, 'p-unselectable-text');
 
         if (this.props.onResizeStart) {
           this.props.onResizeStart(event);
@@ -311,7 +316,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
   }, {
     key: "convertToPx",
     value: function convertToPx(value, property, viewport) {
-      !viewport && (viewport = core.DomHandler.getViewport());
+      !viewport && (viewport = utils.DomHandler.getViewport());
       var val = parseInt(value);
 
       if (/^(\d+|(\.\d+))(\.\d+)?%$/.test(value)) {
@@ -326,10 +331,10 @@ var Dialog = /*#__PURE__*/function (_Component) {
       if (this.resizing) {
         var deltaX = event.pageX - this.lastPageX;
         var deltaY = event.pageY - this.lastPageY;
-        var width = core.DomHandler.getOuterWidth(this.dialogEl);
-        var height = core.DomHandler.getOuterHeight(this.dialogEl);
+        var width = utils.DomHandler.getOuterWidth(this.dialogEl);
+        var height = utils.DomHandler.getOuterHeight(this.dialogEl);
         var offset = this.dialogEl.getBoundingClientRect();
-        var viewport = core.DomHandler.getViewport();
+        var viewport = utils.DomHandler.getViewport();
         var newWidth = width + deltaX;
         var newHeight = height + deltaY;
         var minWidth = this.convertToPx(this.dialogEl.style.minWidth, 'width', viewport);
@@ -362,7 +367,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function onResizeEnd(event) {
       if (this.resizing) {
         this.resizing = false;
-        core.DomHandler.removeClass(document.body, 'p-unselectable-text');
+        utils.DomHandler.removeClass(document.body, 'p-unselectable-text');
 
         if (this.props.onResizeEnd) {
           this.props.onResizeEnd(event);
@@ -420,14 +425,14 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "onExiting",
     value: function onExiting() {
       if (this.props.modal) {
-        core.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+        utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
       }
     }
   }, {
     key: "onExited",
     value: function onExited() {
       this.dragging = false;
-      core.ZIndexUtils.clear(this.mask);
+      utils.ZIndexUtils.clear(this.mask);
       this.setState({
         maskVisible: false
       });
@@ -439,7 +444,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
       this.bindGlobalListeners();
 
       if (this.props.blockScroll || this.props.maximizable && this.maximized) {
-        core.DomHandler.addClass(document.body, 'p-overflow-hidden');
+        utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
@@ -453,10 +458,10 @@ var Dialog = /*#__PURE__*/function (_Component) {
         });
 
         if (!hasBlockScroll) {
-          core.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+          utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
       } else if (this.props.blockScroll || this.props.maximizable && this.maximized) {
-        core.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
@@ -470,7 +475,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.bindDocumentResizeListeners();
       }
 
-      if (this.props.closeOnEscape && this.props.closable) {
+      if (this.props.closable) {
         this.bindDocumentKeyDownListener();
       }
     }
@@ -530,7 +535,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
           var paramLength = params.length;
           var dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined;
 
-          if (dialogId === _this3.state.id) {
+          if (dialogId === _this3.state.id && _this3.props.closeOnEscape) {
             var dialog = document.getElementById(dialogId);
 
             if (event.which === 27) {
@@ -540,7 +545,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
               params.splice(paramLength - 1, 1);
             } else if (event.which === 9) {
               event.preventDefault();
-              var focusableElements = core.DomHandler.getFocusableElements(dialog);
+              var focusableElements = utils.DomHandler.getFocusableElements(dialog);
 
               if (focusableElements && focusableElements.length > 0) {
                 if (!document.activeElement) {
@@ -584,8 +589,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "createStyle",
     value: function createStyle() {
       if (!this.styleElement) {
-        this.styleElement = document.createElement('style');
-        document.head.appendChild(this.styleElement);
+        this.styleElement = utils.DomHandler.createInlineStyle();
         var innerHTML = '';
 
         for (var breakpoint in this.props.breakpoints) {
@@ -602,7 +606,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
 
       if (!this.state.id) {
         this.setState({
-          id: core.UniqueComponentId()
+          id: utils.UniqueComponentId()
         });
       }
 
@@ -610,7 +614,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           visible: true
         }, function () {
-          core.ZIndexUtils.set('modal', _this5.mask, _this5.props.baseZIndex);
+          utils.ZIndexUtils.set('modal', _this5.mask, PrimeReact__default["default"].autoZIndex, _this5.props.baseZIndex || PrimeReact__default["default"].zIndex['modal']);
         });
       }
 
@@ -627,7 +631,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           maskVisible: true
         }, function () {
-          core.ZIndexUtils.set('modal', _this6.mask, _this6.props.baseZIndex);
+          utils.ZIndexUtils.set('modal', _this6.mask, PrimeReact__default["default"].autoZIndex, _this6.props.baseZIndex || PrimeReact__default["default"].zIndex['modal']);
         });
       }
 
@@ -646,20 +650,15 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function changeScrollOnMaximizable() {
       if (!this.props.blockScroll) {
         var funcName = this.maximized ? 'addClass' : 'removeClass';
-        core.DomHandler[funcName](document.body, 'p-overflow-hidden');
+        utils.DomHandler[funcName](document.body, 'p-overflow-hidden');
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.disableDocumentSettings();
-
-      if (this.styleElement) {
-        document.head.removeChild(this.styleElement);
-        this.styleElement = null;
-      }
-
-      core.ZIndexUtils.clear(this.mask);
+      this.styleElement = utils.DomHandler.removeInlineStyle(this.styleElement);
+      utils.ZIndexUtils.clear(this.mask);
     }
   }, {
     key: "renderCloseIcon",
@@ -667,7 +666,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
       var _this7 = this;
 
       if (this.props.closable) {
-        return /*#__PURE__*/React__default['default'].createElement("button", {
+        return /*#__PURE__*/React__default["default"].createElement("button", {
           ref: function ref(el) {
             return _this7.closeElement = el;
           },
@@ -675,9 +674,9 @@ var Dialog = /*#__PURE__*/function (_Component) {
           className: "p-dialog-header-icon p-dialog-header-close p-link",
           "aria-label": this.props.ariaCloseIconLabel,
           onClick: this.onClose
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-dialog-header-close-icon pi pi-times"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
 
       return null;
@@ -685,19 +684,19 @@ var Dialog = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMaximizeIcon",
     value: function renderMaximizeIcon() {
-      var iconClassName = core.classNames('p-dialog-header-maximize-icon pi', {
+      var iconClassName = utils.classNames('p-dialog-header-maximize-icon pi', {
         'pi-window-maximize': !this.maximized,
         'pi-window-minimize': this.maximized
       });
 
       if (this.props.maximizable) {
-        return /*#__PURE__*/React__default['default'].createElement("button", {
+        return /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           className: "p-dialog-header-icon p-dialog-header-maximize p-link",
           onClick: this.toggleMaximize
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: iconClassName
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
 
       return null;
@@ -710,18 +709,18 @@ var Dialog = /*#__PURE__*/function (_Component) {
       if (this.props.showHeader) {
         var closeIcon = this.renderCloseIcon();
         var maximizeIcon = this.renderMaximizeIcon();
-        var icons = core.ObjectUtils.getJSXElement(this.props.icons, this.props);
-        var header = core.ObjectUtils.getJSXElement(this.props.header, this.props);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        var icons = utils.ObjectUtils.getJSXElement(this.props.icons, this.props);
+        var header = utils.ObjectUtils.getJSXElement(this.props.header, this.props);
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
             return _this8.headerEl = el;
           },
           className: "p-dialog-header",
           onMouseDown: this.onDragStart
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           id: this.state.id + '_header',
           className: "p-dialog-title"
-        }, header), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, header), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-dialog-header-icons"
         }, icons, maximizeIcon, closeIcon));
       }
@@ -733,8 +732,8 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function renderContent() {
       var _this9 = this;
 
-      var contentClassName = core.classNames('p-dialog-content', this.props.contentClassName);
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      var contentClassName = utils.classNames('p-dialog-content', this.props.contentClassName);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         id: this.state.id + '_content',
         ref: function ref(el) {
           return _this9.contentEl = el;
@@ -748,8 +747,8 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function renderFooter() {
       var _this10 = this;
 
-      var footer = core.ObjectUtils.getJSXElement(this.props.footer, this.props);
-      return footer && /*#__PURE__*/React__default['default'].createElement("div", {
+      var footer = utils.ObjectUtils.getJSXElement(this.props.footer, this.props);
+      return footer && /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(el) {
           return _this10.footerElement = el;
         },
@@ -760,7 +759,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "renderResizer",
     value: function renderResizer() {
       if (this.props.resizable) {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-resizable-handle",
           style: {
             zIndex: 90
@@ -776,11 +775,11 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function renderElement() {
       var _this11 = this;
 
-      var className = core.classNames('p-dialog p-component', this.props.className, {
+      var className = utils.classNames('p-dialog p-component', this.props.className, {
         'p-dialog-rtl': this.props.rtl,
         'p-dialog-maximized': this.maximized
       });
-      var maskClassName = core.classNames('p-dialog-mask', {
+      var maskClassName = utils.classNames('p-dialog-mask', {
         'p-component-overlay p-component-overlay-enter': this.props.modal,
         'p-dialog-visible': this.state.maskVisible,
         'p-dialog-draggable': this.props.draggable,
@@ -794,13 +793,14 @@ var Dialog = /*#__PURE__*/function (_Component) {
         enter: this.props.position === 'center' ? 150 : 300,
         exit: this.props.position === 'center' ? 150 : 300
       };
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(el) {
           return _this11.mask = el;
         },
+        style: this.props.maskStyle,
         className: maskClassName,
         onClick: this.onMaskClick
-      }, /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+      }, /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
         nodeRef: this.dialogRef,
         classNames: "p-dialog",
         timeout: transitionTimeout,
@@ -811,7 +811,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         onEntered: this.onEntered,
         onExiting: this.onExiting,
         onExited: this.onExited
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: this.dialogRef,
         id: this.state.id,
         className: className,
@@ -828,7 +828,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     value: function render() {
       if (this.state.maskVisible) {
         var element = this.renderElement();
-        return /*#__PURE__*/React__default['default'].createElement(core.Portal, {
+        return /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
           element: element,
           appendTo: this.props.appendTo,
           visible: true
@@ -861,6 +861,7 @@ _defineProperty(Dialog, "defaultProps", {
   closable: true,
   style: null,
   className: null,
+  maskStyle: null,
   maskClassName: null,
   showHeader: true,
   appendTo: null,

package/dialog/dialog.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i<t;i++)n[i]=e[i];return n}function s(e){if(Array.isArray(e))return o(e)}function a(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function r(e,t){if(e){if("string"==typeof e)return o(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?o(e,t):void 0}}function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function c(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}function h(e){return(h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function g(e,t){if(t&&("object"===h(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return c(e)}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var y,v,E,k=function(i){m(k,e.Component);var o,p,h,y,v,E=(o=k,p=b(),function(){var e,t=f(o);if(p){var i=f(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return g(this,e)});function k(e){var i;return d(this,k),(i=E.call(this,e)).state={id:e.id,maskVisible:e.visible,visible:!1},i.props.onMaximize||(i.state.maximized=e.maximized),i.onClose=i.onClose.bind(c(i)),i.toggleMaximize=i.toggleMaximize.bind(c(i)),i.onDragStart=i.onDragStart.bind(c(i)),i.onResizeStart=i.onResizeStart.bind(c(i)),i.onMaskClick=i.onMaskClick.bind(c(i)),i.onEnter=i.onEnter.bind(c(i)),i.onEntered=i.onEntered.bind(c(i)),i.onExiting=i.onExiting.bind(c(i)),i.onExited=i.onExited.bind(c(i)),i.attributeSelector=t.UniqueComponentId(),i.dialogRef=n.default.createRef(),i}return h=k,(y=[{key:"onClose",value:function(e){this.props.onHide(),e.preventDefault()}},{key:"focus",value:function(){var e=document.activeElement;!(e&&this.dialogRef&&this.dialogRef.current.contains(e))&&this.props.closable&&this.props.showHeader&&this.closeElement.focus()}},{key:"onMaskClick",value:function(e){this.props.dismissableMask&&this.props.modal&&this.mask===e.target&&this.onClose(e),this.props.onMaskClick&&this.props.onMaskClick(e)}},{key:"toggleMaximize",value:function(e){var t=!this.maximized;this.props.onMaximize?this.props.onMaximize({originalEvent:e,maximized:t}):this.setState({maximized:t},this.changeScrollOnMaximizable),e.preventDefault()}},{key:"onDragStart",value:function(e){t.DomHandler.hasClass(e.target,"p-dialog-header-icon")||t.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.props.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.dialogEl.style.margin="0",t.DomHandler.addClass(document.body,"p-unselectable-text"),this.props.onDragStart&&this.props.onDragStart(e))}},{key:"onDrag",value:function(e){if(this.dragging){var i=t.DomHandler.getOuterWidth(this.dialogEl),n=t.DomHandler.getOuterHeight(this.dialogEl),o=e.pageX-this.lastPageX,s=e.pageY-this.lastPageY,a=this.dialogEl.getBoundingClientRect(),r=a.left+o,l=a.top+s,d=t.DomHandler.getViewport();this.dialogEl.style.position="fixed",this.props.keepInViewport?(r>=this.props.minX&&r+i<d.width&&(this.lastPageX=e.pageX,this.dialogEl.style.left=r+"px"),l>=this.props.minY&&l+n<d.height&&(this.lastPageY=e.pageY,this.dialogEl.style.top=l+"px")):(this.lastPageX=e.pageX,this.dialogEl.style.left=r+"px",this.lastPageY=e.pageY,this.dialogEl.style.top=l+"px"),this.props.onDrag&&this.props.onDrag(e)}}},{key:"onDragEnd",value:function(e){this.dragging&&(this.dragging=!1,t.DomHandler.removeClass(document.body,"p-unselectable-text"),this.props.onDragEnd&&this.props.onDragEnd(e))}},{key:"onResizeStart",value:function(e){this.props.resizable&&(this.resizing=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,t.DomHandler.addClass(document.body,"p-unselectable-text"),this.props.onResizeStart&&this.props.onResizeStart(e))}},{key:"convertToPx",value:function(e,i,n){!n&&(n=t.DomHandler.getViewport());var o=parseInt(e);return/^(\d+|(\.\d+))(\.\d+)?%$/.test(e)?o*(n[i]/100):o}},{key:"onResize",value:function(e){if(this.resizing){var i=e.pageX-this.lastPageX,n=e.pageY-this.lastPageY,o=t.DomHandler.getOuterWidth(this.dialogEl),s=t.DomHandler.getOuterHeight(this.dialogEl),a=this.dialogEl.getBoundingClientRect(),r=t.DomHandler.getViewport(),l=o+i,d=s+n,u=this.convertToPx(this.dialogEl.style.minWidth,"width",r),c=this.convertToPx(this.dialogEl.style.minHeight,"height",r);(!parseInt(this.dialogEl.style.top)||!parseInt(this.dialogEl.style.left))&&(l+=i,d+=n),(!u||l>u)&&a.left+l<r.width&&(this.dialogEl.style.width=l+"px"),(!c||d>c)&&a.top+d<r.height&&(this.dialogEl.style.height=d+"px"),this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.props.onResize&&this.props.onResize(e)}}},{key:"onResizeEnd",value:function(e){this.resizing&&(this.resizing=!1,t.DomHandler.removeClass(document.body,"p-unselectable-text"),this.props.onResizeEnd&&this.props.onResizeEnd(e))}},{key:"resetPosition",value:function(){this.dialogEl.style.position="",this.dialogEl.style.left="",this.dialogEl.style.top="",this.dialogEl.style.margin=""}},{key:"getPositionClass",value:function(){var e=this,t=["center","left","right","top","top-left","top-right","bottom","bottom-left","bottom-right"].find((function(t){return t===e.props.position||t.replace("-","")===e.props.position}));return t?"p-dialog-".concat(t):""}},{key:"maximized",get:function(){return this.props.onMaximize?this.props.maximized:this.state.maximized}},{key:"dialogEl",get:function(){return this.dialogRef.current}},{key:"onEnter",value:function(){this.dialogEl.setAttribute(this.attributeSelector,"")}},{key:"onEntered",value:function(){this.props.onShow&&this.props.onShow(),this.props.focusOnShow&&this.focus(),this.enableDocumentSettings()}},{key:"onExiting",value:function(){this.props.modal&&t.DomHandler.addClass(this.mask,"p-component-overlay-leave")}},{key:"onExited",value:function(){this.dragging=!1,t.ZIndexUtils.clear(this.mask),this.setState({maskVisible:!1}),this.disableDocumentSettings()}},{key:"enableDocumentSettings",value:function(){this.bindGlobalListeners(),(this.props.blockScroll||this.props.maximizable&&this.maximized)&&t.DomHandler.addClass(document.body,"p-overflow-hidden")}},{key:"disableDocumentSettings",value:function(){this.unbindGlobalListeners(),this.props.modal?document.primeDialogParams&&document.primeDialogParams.some((function(e){return e.hasBlockScroll}))||t.DomHandler.removeClass(document.body,"p-overflow-hidden"):(this.props.blockScroll||this.props.maximizable&&this.maximized)&&t.DomHandler.removeClass(document.body,"p-overflow-hidden")}},{key:"bindGlobalListeners",value:function(){this.props.draggable&&this.bindDocumentDragListener(),this.props.resizable&&this.bindDocumentResizeListeners(),this.props.closeOnEscape&&this.props.closable&&this.bindDocumentKeyDownListener()}},{key:"unbindGlobalListeners",value:function(){this.unbindDocumentDragListener(),this.unbindDocumentResizeListeners(),this.unbindDocumentKeyDownListener()}},{key:"bindDocumentDragListener",value:function(){this.documentDragListener=this.onDrag.bind(this),this.documentDragEndListener=this.onDragEnd.bind(this),window.document.addEventListener("mousemove",this.documentDragListener),window.document.addEventListener("mouseup",this.documentDragEndListener)}},{key:"unbindDocumentDragListener",value:function(){this.documentDragListener&&this.documentDragEndListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragListener=null,this.documentDragEndListener=null)}},{key:"bindDocumentResizeListeners",value:function(){this.documentResizeListener=this.onResize.bind(this),this.documentResizeEndListener=this.onResizeEnd.bind(this),window.document.addEventListener("mousemove",this.documentResizeListener),window.document.addEventListener("mouseup",this.documentResizeEndListener)}},{key:"unbindDocumentResizeListeners",value:function(){this.documentResizeListener&&this.documentResizeEndListener&&(window.document.removeEventListener("mousemove",this.documentResizeListener),window.document.removeEventListener("mouseup",this.documentResizeEndListener),this.documentResizeListener=null,this.documentResizeEndListener=null)}},{key:"bindDocumentKeyDownListener",value:function(){var e=this;this.documentKeyDownListener=function(i){var n=i.currentTarget;if(n&&n.primeDialogParams){var o=n.primeDialogParams,s=o.length,a=o[s-1]?o[s-1].id:void 0;if(a===e.state.id){var r=document.getElementById(a);if(27===i.which)e.onClose(i),i.stopImmediatePropagation(),o.splice(s-1,1);else if(9===i.which){i.preventDefault();var l=t.DomHandler.getFocusableElements(r);if(l&&l.length>0)if(document.activeElement){var d=l.indexOf(document.activeElement);i.shiftKey?-1===d||0===d?l[l.length-1].focus():l[d-1].focus():-1===d||d===l.length-1?l[0].focus():l[d+1].focus()}else l[0].focus()}}}};var i,n={id:this.state.id,hasBlockScroll:this.props.blockScroll};document.primeDialogParams=document.primeDialogParams?[].concat(s(i=document.primeDialogParams)||a(i)||r(i)||l(),[n]):[n],document.addEventListener("keydown",this.documentKeyDownListener)}},{key:"unbindDocumentKeyDownListener",value:function(){var e=this;this.documentKeyDownListener&&(document.removeEventListener("keydown",this.documentKeyDownListener),document.primeDialogParams=document.primeDialogParams&&document.primeDialogParams.filter((function(t){return t.id!==e.state.id})),this.documentKeyDownListener=null)}},{key:"createStyle",value:function(){if(!this.styleElement){this.styleElement=document.createElement("style"),document.head.appendChild(this.styleElement);var e="";for(var t in this.props.breakpoints)e+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-dialog[").concat(this.attributeSelector,"] {\n                            width: ").concat(this.props.breakpoints[t]," !important;\n                        }\n                    }\n                ");this.styleElement.innerHTML=e}}},{key:"componentDidMount",value:function(){var e=this;this.state.id||this.setState({id:t.UniqueComponentId()}),this.props.visible&&this.setState({visible:!0},(function(){t.ZIndexUtils.set("modal",e.mask,e.props.baseZIndex)})),this.props.breakpoints&&this.createStyle()}},{key:"componentDidUpdate",value:function(e){var i=this;this.props.visible&&!this.state.maskVisible&&this.setState({maskVisible:!0},(function(){t.ZIndexUtils.set("modal",i.mask,i.props.baseZIndex)})),this.props.visible!==this.state.visible&&this.state.maskVisible&&this.setState({visible:this.props.visible}),e.maximized!==this.props.maximized&&this.props.onMaximize&&this.changeScrollOnMaximizable()}},{key:"changeScrollOnMaximizable",value:function(){this.props.blockScroll||t.DomHandler[this.maximized?"addClass":"removeClass"](document.body,"p-overflow-hidden")}},{key:"componentWillUnmount",value:function(){this.disableDocumentSettings(),this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null),t.ZIndexUtils.clear(this.mask)}},{key:"renderCloseIcon",value:function(){var e=this;return this.props.closable?n.default.createElement("button",{ref:function(t){return e.closeElement=t},type:"button",className:"p-dialog-header-icon p-dialog-header-close p-link","aria-label":this.props.ariaCloseIconLabel,onClick:this.onClose},n.default.createElement("span",{className:"p-dialog-header-close-icon pi pi-times"}),n.default.createElement(t.Ripple,null)):null}},{key:"renderMaximizeIcon",value:function(){var e=t.classNames("p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized});return this.props.maximizable?n.default.createElement("button",{type:"button",className:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:this.toggleMaximize},n.default.createElement("span",{className:e}),n.default.createElement(t.Ripple,null)):null}},{key:"renderHeader",value:function(){var e=this;if(this.props.showHeader){var i=this.renderCloseIcon(),o=this.renderMaximizeIcon(),s=t.ObjectUtils.getJSXElement(this.props.icons,this.props),a=t.ObjectUtils.getJSXElement(this.props.header,this.props);return n.default.createElement("div",{ref:function(t){return e.headerEl=t},className:"p-dialog-header",onMouseDown:this.onDragStart},n.default.createElement("div",{id:this.state.id+"_header",className:"p-dialog-title"},a),n.default.createElement("div",{className:"p-dialog-header-icons"},s,o,i))}return null}},{key:"renderContent",value:function(){var e=this,i=t.classNames("p-dialog-content",this.props.contentClassName);return n.default.createElement("div",{id:this.state.id+"_content",ref:function(t){return e.contentEl=t},className:i,style:this.props.contentStyle},this.props.children)}},{key:"renderFooter",value:function(){var e=this,i=t.ObjectUtils.getJSXElement(this.props.footer,this.props);return i&&n.default.createElement("div",{ref:function(t){return e.footerElement=t},className:"p-dialog-footer"},i)}},{key:"renderResizer",value:function(){return this.props.resizable?n.default.createElement("div",{className:"p-resizable-handle",style:{zIndex:90},onMouseDown:this.onResizeStart}):null}},{key:"renderElement",value:function(){var e=this,i=t.classNames("p-dialog p-component",this.props.className,{"p-dialog-rtl":this.props.rtl,"p-dialog-maximized":this.maximized}),o=t.classNames("p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.props.modal,"p-dialog-visible":this.state.maskVisible,"p-dialog-draggable":this.props.draggable,"p-dialog-resizable":this.props.resizable},this.props.maskClassName,this.getPositionClass()),s=this.renderHeader(),a=this.renderContent(),r=this.renderFooter(),l=this.renderResizer();return n.default.createElement("div",{ref:function(t){return e.mask=t},className:o,onClick:this.onMaskClick},n.default.createElement(t.CSSTransition,{nodeRef:this.dialogRef,classNames:"p-dialog",timeout:{enter:"center"===this.props.position?150:300,exit:"center"===this.props.position?150:300},in:this.state.visible,options:this.props.transitionOptions,unmountOnExit:!0,onEnter:this.onEnter,onEntered:this.onEntered,onExiting:this.onExiting,onExited:this.onExited},n.default.createElement("div",{ref:this.dialogRef,id:this.state.id,className:i,style:this.props.style,onClick:this.props.onClick,role:"dialog","aria-labelledby":this.state.id+"_header","aria-describedby":this.state.id+"_content","aria-modal":this.props.modal},s,a,r,l)))}},{key:"render",value:function(){if(this.state.maskVisible){var e=this.renderElement();return n.default.createElement(t.Portal,{element:e,appendTo:this.props.appendTo,visible:!0})}return null}}])&&u(h.prototype,y),v&&u(h,v),k}();E={id:null,header:null,footer:null,visible:!1,position:"center",draggable:!0,resizable:!0,modal:!0,onHide:null,onShow:null,contentStyle:null,contentClassName:null,closeOnEscape:!0,dismissableMask:!1,rtl:!1,closable:!0,style:null,className:null,maskClassName:null,showHeader:!0,appendTo:null,baseZIndex:0,maximizable:!1,blockScroll:!1,icons:null,ariaCloseIconLabel:"Close",focusOnShow:!0,minX:0,minY:0,keepInViewport:!0,maximized:!1,breakpoints:null,transitionOptions:null,onMaximize:null,onDragStart:null,onDrag:null,onDragEnd:null,onResizeStart:null,onResize:null,onResizeEnd:null,onClick:null,onMaskClick:null},(v="defaultProps")in(y=k)?Object.defineProperty(y,v,{value:E,enumerable:!0,configurable:!0,writable:!0}):y[v]=E,exports.Dialog=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils"),i=require("primereact/csstransition"),n=require("primereact/ripple"),o=require("primereact/portal"),s=require("primereact/api");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),l=r(s);function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i<t;i++)n[i]=e[i];return n}function u(e){if(Array.isArray(e))return d(e)}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function p(e,t){if(e){if("string"==typeof e)return d(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?d(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function g(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e,t){return b=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},b(e,t)}function y(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&b(e,t)}function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}function E(e,t){if(t&&("object"===v(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return f(e)}function k(e){return k=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},k(e)}function D(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var z,x,w,S=function(s){y(w,e.Component);var r,d,b,v,z,x=(r=w,d=D(),function(){var e,t=k(r);if(d){var i=k(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return E(this,e)});function w(e){var i;return h(this,w),(i=x.call(this,e)).state={id:e.id,maskVisible:e.visible,visible:!1},i.props.onMaximize||(i.state.maximized=e.maximized),i.onClose=i.onClose.bind(f(i)),i.toggleMaximize=i.toggleMaximize.bind(f(i)),i.onDragStart=i.onDragStart.bind(f(i)),i.onResizeStart=i.onResizeStart.bind(f(i)),i.onMaskClick=i.onMaskClick.bind(f(i)),i.onEnter=i.onEnter.bind(f(i)),i.onEntered=i.onEntered.bind(f(i)),i.onExiting=i.onExiting.bind(f(i)),i.onExited=i.onExited.bind(f(i)),i.attributeSelector=t.UniqueComponentId(),i.dialogRef=a.default.createRef(),i}return b=w,(v=[{key:"onClose",value:function(e){this.props.onHide(),e.preventDefault()}},{key:"focus",value:function(){var e=document.activeElement;!(e&&this.dialogRef&&this.dialogRef.current.contains(e))&&this.props.closable&&this.props.showHeader&&this.closeElement.focus()}},{key:"onMaskClick",value:function(e){this.props.dismissableMask&&this.props.modal&&this.mask===e.target&&this.onClose(e),this.props.onMaskClick&&this.props.onMaskClick(e)}},{key:"toggleMaximize",value:function(e){var t=!this.maximized;this.props.onMaximize?this.props.onMaximize({originalEvent:e,maximized:t}):this.setState({maximized:t},this.changeScrollOnMaximizable),e.preventDefault()}},{key:"onDragStart",value:function(e){t.DomHandler.hasClass(e.target,"p-dialog-header-icon")||t.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.props.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.dialogEl.style.margin="0",t.DomHandler.addClass(document.body,"p-unselectable-text"),this.props.onDragStart&&this.props.onDragStart(e))}},{key:"onDrag",value:function(e){if(this.dragging){var i=t.DomHandler.getOuterWidth(this.dialogEl),n=t.DomHandler.getOuterHeight(this.dialogEl),o=e.pageX-this.lastPageX,s=e.pageY-this.lastPageY,r=this.dialogEl.getBoundingClientRect(),a=r.left+o,l=r.top+s,d=t.DomHandler.getViewport();this.dialogEl.style.position="fixed",this.props.keepInViewport?(a>=this.props.minX&&a+i<d.width&&(this.lastPageX=e.pageX,this.dialogEl.style.left=a+"px"),l>=this.props.minY&&l+n<d.height&&(this.lastPageY=e.pageY,this.dialogEl.style.top=l+"px")):(this.lastPageX=e.pageX,this.dialogEl.style.left=a+"px",this.lastPageY=e.pageY,this.dialogEl.style.top=l+"px"),this.props.onDrag&&this.props.onDrag(e)}}},{key:"onDragEnd",value:function(e){this.dragging&&(this.dragging=!1,t.DomHandler.removeClass(document.body,"p-unselectable-text"),this.props.onDragEnd&&this.props.onDragEnd(e))}},{key:"onResizeStart",value:function(e){this.props.resizable&&(this.resizing=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,t.DomHandler.addClass(document.body,"p-unselectable-text"),this.props.onResizeStart&&this.props.onResizeStart(e))}},{key:"convertToPx",value:function(e,i,n){!n&&(n=t.DomHandler.getViewport());var o=parseInt(e);return/^(\d+|(\.\d+))(\.\d+)?%$/.test(e)?o*(n[i]/100):o}},{key:"onResize",value:function(e){if(this.resizing){var i=e.pageX-this.lastPageX,n=e.pageY-this.lastPageY,o=t.DomHandler.getOuterWidth(this.dialogEl),s=t.DomHandler.getOuterHeight(this.dialogEl),r=this.dialogEl.getBoundingClientRect(),a=t.DomHandler.getViewport(),l=o+i,d=s+n,u=this.convertToPx(this.dialogEl.style.minWidth,"width",a),c=this.convertToPx(this.dialogEl.style.minHeight,"height",a);(!parseInt(this.dialogEl.style.top)||!parseInt(this.dialogEl.style.left))&&(l+=i,d+=n),(!u||l>u)&&r.left+l<a.width&&(this.dialogEl.style.width=l+"px"),(!c||d>c)&&r.top+d<a.height&&(this.dialogEl.style.height=d+"px"),this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.props.onResize&&this.props.onResize(e)}}},{key:"onResizeEnd",value:function(e){this.resizing&&(this.resizing=!1,t.DomHandler.removeClass(document.body,"p-unselectable-text"),this.props.onResizeEnd&&this.props.onResizeEnd(e))}},{key:"resetPosition",value:function(){this.dialogEl.style.position="",this.dialogEl.style.left="",this.dialogEl.style.top="",this.dialogEl.style.margin=""}},{key:"getPositionClass",value:function(){var e=this,t=["center","left","right","top","top-left","top-right","bottom","bottom-left","bottom-right"].find((function(t){return t===e.props.position||t.replace("-","")===e.props.position}));return t?"p-dialog-".concat(t):""}},{key:"maximized",get:function(){return this.props.onMaximize?this.props.maximized:this.state.maximized}},{key:"dialogEl",get:function(){return this.dialogRef.current}},{key:"onEnter",value:function(){this.dialogEl.setAttribute(this.attributeSelector,"")}},{key:"onEntered",value:function(){this.props.onShow&&this.props.onShow(),this.props.focusOnShow&&this.focus(),this.enableDocumentSettings()}},{key:"onExiting",value:function(){this.props.modal&&t.DomHandler.addClass(this.mask,"p-component-overlay-leave")}},{key:"onExited",value:function(){this.dragging=!1,t.ZIndexUtils.clear(this.mask),this.setState({maskVisible:!1}),this.disableDocumentSettings()}},{key:"enableDocumentSettings",value:function(){this.bindGlobalListeners(),(this.props.blockScroll||this.props.maximizable&&this.maximized)&&t.DomHandler.addClass(document.body,"p-overflow-hidden")}},{key:"disableDocumentSettings",value:function(){this.unbindGlobalListeners(),this.props.modal?document.primeDialogParams&&document.primeDialogParams.some((function(e){return e.hasBlockScroll}))||t.DomHandler.removeClass(document.body,"p-overflow-hidden"):(this.props.blockScroll||this.props.maximizable&&this.maximized)&&t.DomHandler.removeClass(document.body,"p-overflow-hidden")}},{key:"bindGlobalListeners",value:function(){this.props.draggable&&this.bindDocumentDragListener(),this.props.resizable&&this.bindDocumentResizeListeners(),this.props.closable&&this.bindDocumentKeyDownListener()}},{key:"unbindGlobalListeners",value:function(){this.unbindDocumentDragListener(),this.unbindDocumentResizeListeners(),this.unbindDocumentKeyDownListener()}},{key:"bindDocumentDragListener",value:function(){this.documentDragListener=this.onDrag.bind(this),this.documentDragEndListener=this.onDragEnd.bind(this),window.document.addEventListener("mousemove",this.documentDragListener),window.document.addEventListener("mouseup",this.documentDragEndListener)}},{key:"unbindDocumentDragListener",value:function(){this.documentDragListener&&this.documentDragEndListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragListener=null,this.documentDragEndListener=null)}},{key:"bindDocumentResizeListeners",value:function(){this.documentResizeListener=this.onResize.bind(this),this.documentResizeEndListener=this.onResizeEnd.bind(this),window.document.addEventListener("mousemove",this.documentResizeListener),window.document.addEventListener("mouseup",this.documentResizeEndListener)}},{key:"unbindDocumentResizeListeners",value:function(){this.documentResizeListener&&this.documentResizeEndListener&&(window.document.removeEventListener("mousemove",this.documentResizeListener),window.document.removeEventListener("mouseup",this.documentResizeEndListener),this.documentResizeListener=null,this.documentResizeEndListener=null)}},{key:"bindDocumentKeyDownListener",value:function(){var e=this;this.documentKeyDownListener=function(i){var n=i.currentTarget;if(n&&n.primeDialogParams){var o=n.primeDialogParams,s=o.length,r=o[s-1]?o[s-1].id:void 0;if(r===e.state.id&&e.props.closeOnEscape){var a=document.getElementById(r);if(27===i.which)e.onClose(i),i.stopImmediatePropagation(),o.splice(s-1,1);else if(9===i.which){i.preventDefault();var l=t.DomHandler.getFocusableElements(a);if(l&&l.length>0)if(document.activeElement){var d=l.indexOf(document.activeElement);i.shiftKey?-1===d||0===d?l[l.length-1].focus():l[d-1].focus():-1===d||d===l.length-1?l[0].focus():l[d+1].focus()}else l[0].focus()}}}};var i,n={id:this.state.id,hasBlockScroll:this.props.blockScroll};document.primeDialogParams=document.primeDialogParams?[].concat(u(i=document.primeDialogParams)||c(i)||p(i)||m(),[n]):[n],document.addEventListener("keydown",this.documentKeyDownListener)}},{key:"unbindDocumentKeyDownListener",value:function(){var e=this;this.documentKeyDownListener&&(document.removeEventListener("keydown",this.documentKeyDownListener),document.primeDialogParams=document.primeDialogParams&&document.primeDialogParams.filter((function(t){return t.id!==e.state.id})),this.documentKeyDownListener=null)}},{key:"createStyle",value:function(){if(!this.styleElement){this.styleElement=t.DomHandler.createInlineStyle();var e="";for(var i in this.props.breakpoints)e+="\n                    @media screen and (max-width: ".concat(i,") {\n                        .p-dialog[").concat(this.attributeSelector,"] {\n                            width: ").concat(this.props.breakpoints[i]," !important;\n                        }\n                    }\n                ");this.styleElement.innerHTML=e}}},{key:"componentDidMount",value:function(){var e=this;this.state.id||this.setState({id:t.UniqueComponentId()}),this.props.visible&&this.setState({visible:!0},(function(){t.ZIndexUtils.set("modal",e.mask,l.default.autoZIndex,e.props.baseZIndex||l.default.zIndex.modal)})),this.props.breakpoints&&this.createStyle()}},{key:"componentDidUpdate",value:function(e){var i=this;this.props.visible&&!this.state.maskVisible&&this.setState({maskVisible:!0},(function(){t.ZIndexUtils.set("modal",i.mask,l.default.autoZIndex,i.props.baseZIndex||l.default.zIndex.modal)})),this.props.visible!==this.state.visible&&this.state.maskVisible&&this.setState({visible:this.props.visible}),e.maximized!==this.props.maximized&&this.props.onMaximize&&this.changeScrollOnMaximizable()}},{key:"changeScrollOnMaximizable",value:function(){this.props.blockScroll||t.DomHandler[this.maximized?"addClass":"removeClass"](document.body,"p-overflow-hidden")}},{key:"componentWillUnmount",value:function(){this.disableDocumentSettings(),this.styleElement=t.DomHandler.removeInlineStyle(this.styleElement),t.ZIndexUtils.clear(this.mask)}},{key:"renderCloseIcon",value:function(){var e=this;return this.props.closable?a.default.createElement("button",{ref:function(t){return e.closeElement=t},type:"button",className:"p-dialog-header-icon p-dialog-header-close p-link","aria-label":this.props.ariaCloseIconLabel,onClick:this.onClose},a.default.createElement("span",{className:"p-dialog-header-close-icon pi pi-times"}),a.default.createElement(n.Ripple,null)):null}},{key:"renderMaximizeIcon",value:function(){var e=t.classNames("p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized});return this.props.maximizable?a.default.createElement("button",{type:"button",className:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:this.toggleMaximize},a.default.createElement("span",{className:e}),a.default.createElement(n.Ripple,null)):null}},{key:"renderHeader",value:function(){var e=this;if(this.props.showHeader){var i=this.renderCloseIcon(),n=this.renderMaximizeIcon(),o=t.ObjectUtils.getJSXElement(this.props.icons,this.props),s=t.ObjectUtils.getJSXElement(this.props.header,this.props);return a.default.createElement("div",{ref:function(t){return e.headerEl=t},className:"p-dialog-header",onMouseDown:this.onDragStart},a.default.createElement("div",{id:this.state.id+"_header",className:"p-dialog-title"},s),a.default.createElement("div",{className:"p-dialog-header-icons"},o,n,i))}return null}},{key:"renderContent",value:function(){var e=this,i=t.classNames("p-dialog-content",this.props.contentClassName);return a.default.createElement("div",{id:this.state.id+"_content",ref:function(t){return e.contentEl=t},className:i,style:this.props.contentStyle},this.props.children)}},{key:"renderFooter",value:function(){var e=this,i=t.ObjectUtils.getJSXElement(this.props.footer,this.props);return i&&a.default.createElement("div",{ref:function(t){return e.footerElement=t},className:"p-dialog-footer"},i)}},{key:"renderResizer",value:function(){return this.props.resizable?a.default.createElement("div",{className:"p-resizable-handle",style:{zIndex:90},onMouseDown:this.onResizeStart}):null}},{key:"renderElement",value:function(){var e=this,n=t.classNames("p-dialog p-component",this.props.className,{"p-dialog-rtl":this.props.rtl,"p-dialog-maximized":this.maximized}),o=t.classNames("p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.props.modal,"p-dialog-visible":this.state.maskVisible,"p-dialog-draggable":this.props.draggable,"p-dialog-resizable":this.props.resizable},this.props.maskClassName,this.getPositionClass()),s=this.renderHeader(),r=this.renderContent(),l=this.renderFooter(),d=this.renderResizer();return a.default.createElement("div",{ref:function(t){return e.mask=t},style:this.props.maskStyle,className:o,onClick:this.onMaskClick},a.default.createElement(i.CSSTransition,{nodeRef:this.dialogRef,classNames:"p-dialog",timeout:{enter:"center"===this.props.position?150:300,exit:"center"===this.props.position?150:300},in:this.state.visible,options:this.props.transitionOptions,unmountOnExit:!0,onEnter:this.onEnter,onEntered:this.onEntered,onExiting:this.onExiting,onExited:this.onExited},a.default.createElement("div",{ref:this.dialogRef,id:this.state.id,className:n,style:this.props.style,onClick:this.props.onClick,role:"dialog","aria-labelledby":this.state.id+"_header","aria-describedby":this.state.id+"_content","aria-modal":this.props.modal},s,r,l,d)))}},{key:"render",value:function(){if(this.state.maskVisible){var e=this.renderElement();return a.default.createElement(o.Portal,{element:e,appendTo:this.props.appendTo,visible:!0})}return null}}])&&g(b.prototype,v),z&&g(b,z),w}();w={id:null,header:null,footer:null,visible:!1,position:"center",draggable:!0,resizable:!0,modal:!0,onHide:null,onShow:null,contentStyle:null,contentClassName:null,closeOnEscape:!0,dismissableMask:!1,rtl:!1,closable:!0,style:null,className:null,maskStyle:null,maskClassName:null,showHeader:!0,appendTo:null,baseZIndex:0,maximizable:!1,blockScroll:!1,icons:null,ariaCloseIconLabel:"Close",focusOnShow:!0,minX:0,minY:0,keepInViewport:!0,maximized:!1,breakpoints:null,transitionOptions:null,onMaximize:null,onDragStart:null,onDrag:null,onDragEnd:null,onResizeStart:null,onResize:null,onResizeEnd:null,onClick:null,onMaskClick:null},(x="defaultProps")in(z=S)?Object.defineProperty(z,x,{value:w,enumerable:!0,configurable:!0,writable:!0}):z[x]=w,exports.Dialog=S;

package/dialog/dialog.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSTransitionProps } from '../csstransition';
 
 type DialogPositionType = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
@@ -32,6 +33,7 @@ export interface DialogProps {
     closable?: boolean;
     style?: object;
     className?: string;
+    maskStyle?: object;
     maskClassName?: string;
     showHeader?: boolean;
     appendTo?: DialogAppendToType;
@@ -46,7 +48,7 @@ export interface DialogProps {
     keepInViewport?: boolean;
     maximized?: boolean;
     breakpoints?: DialogBreakpoints;
-    transitionOptions?: object;
+    transitionOptions?: CSSTransitionProps;
     onMaximize?(e: DialogMaximizeParams): void;
     onDragStart?(e: React.DragEvent<HTMLElement>): void;
     onDrag?(e: React.DragEvent<HTMLElement>): void;

package/dialog/dialog.esm.js

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
-import { UniqueComponentId, DomHandler, ZIndexUtils, Ripple, classNames, ObjectUtils, CSSTransition, Portal } from 'primereact/core';
+import { UniqueComponentId, DomHandler, ZIndexUtils, classNames, ObjectUtils } from 'primereact/utils';
+import { CSSTransition } from 'primereact/csstransition';
+import { Ripple } from 'primereact/ripple';
+import { Portal } from 'primereact/portal';
+import PrimeReact from 'primereact/api';
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -462,7 +466,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.bindDocumentResizeListeners();
       }
 
-      if (this.props.closeOnEscape && this.props.closable) {
+      if (this.props.closable) {
         this.bindDocumentKeyDownListener();
       }
     }
@@ -522,7 +526,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
           var paramLength = params.length;
           var dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined;
 
-          if (dialogId === _this3.state.id) {
+          if (dialogId === _this3.state.id && _this3.props.closeOnEscape) {
             var dialog = document.getElementById(dialogId);
 
             if (event.which === 27) {
@@ -576,8 +580,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "createStyle",
     value: function createStyle() {
       if (!this.styleElement) {
-        this.styleElement = document.createElement('style');
-        document.head.appendChild(this.styleElement);
+        this.styleElement = DomHandler.createInlineStyle();
         var innerHTML = '';
 
         for (var breakpoint in this.props.breakpoints) {
@@ -602,7 +605,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           visible: true
         }, function () {
-          ZIndexUtils.set('modal', _this5.mask, _this5.props.baseZIndex);
+          ZIndexUtils.set('modal', _this5.mask, PrimeReact.autoZIndex, _this5.props.baseZIndex || PrimeReact.zIndex['modal']);
         });
       }
 
@@ -619,7 +622,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           maskVisible: true
         }, function () {
-          ZIndexUtils.set('modal', _this6.mask, _this6.props.baseZIndex);
+          ZIndexUtils.set('modal', _this6.mask, PrimeReact.autoZIndex, _this6.props.baseZIndex || PrimeReact.zIndex['modal']);
         });
       }
 
@@ -645,12 +648,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.disableDocumentSettings();
-
-      if (this.styleElement) {
-        document.head.removeChild(this.styleElement);
-        this.styleElement = null;
-      }
-
+      this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
       ZIndexUtils.clear(this.mask);
     }
   }, {
@@ -790,6 +788,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         ref: function ref(el) {
           return _this11.mask = el;
         },
+        style: this.props.maskStyle,
         className: maskClassName,
         onClick: this.onMaskClick
       }, /*#__PURE__*/React.createElement(CSSTransition, {
@@ -853,6 +852,7 @@ _defineProperty(Dialog, "defaultProps", {
   closable: true,
   style: null,
   className: null,
+  maskStyle: null,
   maskClassName: null,
   showHeader: true,
   appendTo: null,