primereact 10.2.0 → 10.3.0

package/dialog/dialog.esm.js

@@ -26,6 +26,16 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -57,16 +67,6 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
 function _toPrimitive(input, hint) {
   if (_typeof(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -165,6 +165,7 @@ var useEventListener = function useEventListener(_ref) {
     when = _ref$when === void 0 ? true : _ref$when;
   var targetRef = React.useRef(null);
   var listenerRef = React.useRef(null);
+  var prevListener = usePrevious(listener);
   var prevOptions = usePrevious(options);
   var bind = function bind() {
     var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -194,11 +195,12 @@ var useEventListener = function useEventListener(_ref) {
     }
   }, [target, when]);
   React.useEffect(function () {
-    if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
+    // to properly compare functions we can implicitly converting the function to it's body's text as a String
+    if (listenerRef.current && ('' + prevListener !== '' + listener || prevOptions !== options)) {
       unbind();
       when && bind();
     }
-  }, [listener, options]);
+  }, [listener, options, when]);
   useUnmountEffect(function () {
     unbind();
   });
@@ -253,10 +255,13 @@ var classes = {
     var props = _ref2.props;
     return classNames('p-dialog-content', props.contentClassName);
   },
-  footer: 'p-dialog-footer',
-  mask: function mask(_ref3) {
-    var props = _ref3.props,
-      maskVisibleState = _ref3.maskVisibleState;
+  footer: function footer(_ref3) {
+    var props = _ref3.props;
+    return classNames('p-dialog-footer', props.footerClassName);
+  },
+  mask: function mask(_ref4) {
+    var props = _ref4.props,
+      maskVisibleState = _ref4.maskVisibleState;
     var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
     var pos = positions.find(function (item) {
       return item === props.position || item.replace('-', '') === props.position;
@@ -268,10 +273,10 @@ var classes = {
       'p-dialog-resizable': props.resizable
     }, props.maskClassName);
   },
-  root: function root(_ref4) {
-    var props = _ref4.props,
-      maximized = _ref4.maximized,
-      context = _ref4.context;
+  root: function root(_ref5) {
+    var props = _ref5.props,
+      maximized = _ref5.maximized,
+      context = _ref5.context;
     return classNames('p-dialog p-component', props.className, {
       'p-dialog-rtl': props.rtl,
       'p-dialog-maximized': maximized,
@@ -282,10 +287,10 @@ var classes = {
   },
   transition: 'p-dialog'
 };
-var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n";
+var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n";
 var inlineStyles = {
-  mask: function mask(_ref5) {
-    var props = _ref5.props;
+  mask: function mask(_ref6) {
+    var props = _ref6.props;
     return _objectSpread$1({
       position: 'fixed',
       height: '100%',
@@ -318,6 +323,7 @@ var DialogBase = ComponentBase.extend({
     draggable: true,
     focusOnShow: true,
     footer: null,
+    footerClassName: null,
     header: null,
     headerClassName: null,
     headerStyle: null,
@@ -488,7 +494,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
-    if (!isActiveElementInDialog && props.closable && props.showHeader) {
+    if (!isActiveElementInDialog && props.closable && props.showHeader && closeRef.current) {
       closeRef.current.focus();
     }
   };
@@ -700,8 +706,8 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   var updateGlobalDialogsRegistry = function updateGlobalDialogsRegistry(isMounted) {
-    // Update current dialog info in global registry if it is mounted:
-    if (isMounted) {
+    // Update current dialog info in global registry if it is mounted :
+    if (isMounted && visibleState) {
       var newParam = {
         id: idState,
         hasBlockScroll: shouldBlockScroll
@@ -915,11 +921,41 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     return null;
   };
-  var createElement = function createElement() {
+  var createTemplateElement = function createTemplateElement(_ref) {
+    var _props$children;
+    var maskProps = _ref.maskProps,
+      rootProps = _ref.rootProps,
+      transitionProps = _ref.transitionProps;
+    var messageProps = {
+      header: props.header,
+      content: props.message,
+      message: props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 || (_props$children = _props$children[1]) === null || _props$children === void 0 || (_props$children = _props$children.props) === null || _props$children === void 0 ? void 0 : _props$children.children
+    };
+    var templateElementProps = {
+      headerRef: headerRef,
+      contentRef: contentRef,
+      footerRef: footerRef,
+      closeRef: closeRef,
+      hide: onClose,
+      message: messageProps
+    };
+    return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      nodeRef: dialogRef
+    }, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, ObjectUtils.getJSXElement(inProps.content, templateElementProps))));
+  };
+  var createElement = function createElement(_ref2) {
+    var maskProps = _ref2.maskProps,
+      rootProps = _ref2.rootProps,
+      transitionProps = _ref2.transitionProps;
     var header = createHeader();
     var content = createContent();
     var footer = createFooter();
     var resizer = createResizer();
+    return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      nodeRef: dialogRef
+    }, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, header, content, footer, resizer)));
+  };
+  var createDialog = function createDialog() {
     var headerId = idState + '_header';
     var contentId = idState + '_content';
     var transitionTimeout = {
@@ -959,17 +995,29 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onExiting: onExiting,
       onExited: onExited
     }, ptm('transition'));
-    return /*#__PURE__*/React.createElement("div", maskProps, /*#__PURE__*/React.createElement(CSSTransition, _extends({
-      nodeRef: dialogRef
-    }, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, header, content, footer, resizer)));
-  };
-  var createDialog = function createDialog() {
-    var element = createElement();
-    return /*#__PURE__*/React.createElement(Portal, {
-      element: element,
-      appendTo: props.appendTo,
-      visible: true
-    });
+    if (inProps !== null && inProps !== void 0 && inProps.content) {
+      var templateElement = createTemplateElement({
+        maskProps: maskProps,
+        rootProps: rootProps,
+        transitionProps: transitionProps
+      });
+      return /*#__PURE__*/React.createElement(Portal, {
+        element: templateElement,
+        appendTo: props.appendTo,
+        visible: true
+      });
+    } else {
+      var element = createElement({
+        maskProps: maskProps,
+        rootProps: rootProps,
+        transitionProps: transitionProps
+      });
+      return /*#__PURE__*/React.createElement(Portal, {
+        element: element,
+        appendTo: props.appendTo,
+        visible: true
+      });
+    }
   };
   return maskVisibleState && createDialog();
 });

package/dialog/dialog.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{DomHandler as t,ObjectUtils as n,classNames as r,UniqueComponentId as o,ZIndexUtils as i,mergeProps as a,IconUtils as l}from"primereact/utils";import c,{PrimeReactContext as u,localeOption as s}from"primereact/api";import{ComponentBase as p,useHandleStyle as d}from"primereact/componentbase";import{CSSTransition as m}from"primereact/csstransition";import{useEventListener as g,useMountEffect as f,useUpdateEffect as b,useUnmountEffect as y}from"primereact/hooks";import{TimesIcon as h}from"primereact/icons/times";import{WindowMaximizeIcon as v}from"primereact/icons/windowmaximize";import{WindowMinimizeIcon as x}from"primereact/icons/windowminimize";import{Portal as w}from"primereact/portal";import{Ripple as E}from"primereact/ripple";function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S.apply(this,arguments)}function z(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function O(e){if(Array.isArray(e))return z(e)}function k(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 z(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?z(e,t):void 0}}function D(){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 I(e){return I="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},I(e)}function j(e,t){if("object"!==I(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==I(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function C(e){var t=j(e,"string");return"symbol"===I(t)?t:String(t)}function R(e,t,n){return(t=C(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function N(e){if(Array.isArray(e))return e}function B(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,l=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}function T(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function M(e,t){return N(e)||B(e,t)||P(e,t)||T()}var X=function(r){var o,i,a,l=r.target,c=void 0===l?"document":l,u=r.type,s=r.listener,p=r.options,d=r.when,m=void 0===d||d,g=e.useRef(null),f=e.useRef(null),b=(o=p,i=e.useRef(void 0),e.useEffect((function(){i.current=o})),i.current),y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n.isNotEmpty(e.target)&&(h(),(e.when||m)&&(g.current=t.getTargetElement(e.target))),!f.current&&g.current&&(f.current=function(e){return s&&s(e)},g.current.addEventListener(u,f.current,p))},h=function(){f.current&&(g.current.removeEventListener(u,f.current,p),f.current=null)};return e.useEffect((function(){m?g.current=t.getTargetElement(c):(h(),g.current=null)}),[c,m]),e.useEffect((function(){!f.current||f.current===s&&b===p||(h(),m&&y())}),[s,p]),a=function(){h()},e.useEffect((function(){return a}),[]),[y,h]},A=function(t,n,r){var o=M(X({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}),2),i=o[0],a=o[1];return e.useEffect((function(){if(n&&t.current)return i(),function(){a()}})),[t,r]};function H(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?H(Object(n),!0).forEach((function(t){R(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):H(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var _=p.extend({defaultProps:{__TYPE:"Dialog",__parentMetadata:null,appendTo:null,ariaCloseIconLabel:null,baseZIndex:0,blockScroll:!1,breakpoints:null,className:null,closable:!0,closeIcon:null,closeOnEscape:!0,contentClassName:null,contentStyle:null,dismissableMask:!1,draggable:!0,focusOnShow:!0,footer:null,header:null,headerClassName:null,headerStyle:null,icons:null,id:null,keepInViewport:!0,maskClassName:null,maskStyle:null,maximizable:!1,maximizeIcon:null,maximized:!1,minX:0,minY:0,minimizeIcon:null,modal:!0,onClick:null,onDrag:null,onDragEnd:null,onDragStart:null,onHide:null,onMaskClick:null,onMaximize:null,onResize:null,onResizeEnd:null,onResizeStart:null,onShow:null,position:"center",resizable:!0,rtl:!1,showHeader:!0,style:null,transitionOptions:null,visible:!1,children:void 0},css:{classes:{closeButtonIcon:"p-dialog-header-close-icon",closeButton:"p-dialog-header-icon p-dialog-header-close p-link",maximizableIcon:"p-dialog-header-maximize-icon",maximizableButton:"p-dialog-header-icon p-dialog-header-maximize p-link",header:function(e){return r("p-dialog-header",e.props.headerClassName)},headerTitle:"p-dialog-title",headerIcons:"p-dialog-header-icons",content:function(e){return r("p-dialog-content",e.props.contentClassName)},footer:"p-dialog-footer",mask:function(e){var t=e.props,n=e.maskVisibleState,o=["center","left","right","top","top-left","top-right","bottom","bottom-left","bottom-right"].find((function(e){return e===t.position||e.replace("-","")===t.position}));return r("p-dialog-mask",o?"p-dialog-".concat(o):"",{"p-component-overlay p-component-overlay-enter":t.modal,"p-dialog-visible":n,"p-dialog-draggable":t.draggable,"p-dialog-resizable":t.resizable},t.maskClassName)},root:function(e){var t=e.props,n=e.maximized,o=e.context;return r("p-dialog p-component",t.className,{"p-dialog-rtl":t.rtl,"p-dialog-maximized":n,"p-dialog-default":!n,"p-input-filled":o&&"filled"===o.inputStyle||"filled"===c.inputStyle,"p-ripple-disabled":o&&!1===o.ripple||!1===c.ripple})},transition:"p-dialog"},styles:"\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n",inlineStyles:{mask:function(e){var t=e.props;return Y({position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===t.position||"top-left"===t.position||"bottom-left"===t.position?"flex-start":"right"===t.position||"top-right"===t.position||"bottom-right"===t.position?"flex-end":"center",alignItems:"top"===t.position||"top-left"===t.position||"top-right"===t.position?"flex-start":"bottom"===t.position||"bottom-left"===t.position||"bottom-right"===t.position?"flex-end":"center",pointerEvents:!t.modal&&"none"},t.maskStyle)}}}});function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function V(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){R(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var F=e.forwardRef((function(r,p){var z=e.useContext(u),I=_.getProps(r,z),j=I.id?I.id:o(),C=M(e.useState(j),2),R=C[0],N=M(e.useState(!1),2),B=N[0],T=N[1],X=M(e.useState(!1),2),H=X[0],Y=X[1],L=M(e.useState(I.maximized),2),F=L[0],J=L[1],U=e.useRef(null),Z=e.useRef(null),W=e.useRef(null),$=e.useRef(null),K=e.useRef(null),q=e.useRef(null),G=e.useRef(null),Q=e.useRef(!1),ee=e.useRef(!1),te=e.useRef(null),ne=e.useRef(null),re=e.useRef(null),oe=e.useRef(j),ie=e.useRef(null),ae=I.onMaximize?I.maximized:F,le=H&&(I.blockScroll||I.maximizable&&ae),ce=_.setMetaData(V(V({props:I},I.__parentMetadata),{},{state:{id:R,maximized:ae,containerVisible:B}})),ue=ce.ptm,se=ce.cx,pe=ce.sx;d(_.css.styles,ce.isUnstyled,{name:"dialog"}),A(Z,I.closable&&I.closeOnEscape,(function(e){var t=e.currentTarget;if(t&&t.primeDialogParams){var n=t.primeDialogParams,r=n.length;Pe(e),n.splice(r-1,1)}}));var de=M(g({type:"keydown",listener:function(e){return Ce(e)}}),2),me=de[0],ge=de[1],fe=M(g({type:"mousemove",target:function(){return window.document},listener:function(e){return Xe(e)}}),2),be=fe[0],ye=fe[1],he=M(g({type:"mouseup",target:function(){return window.document},listener:function(e){return Ae(e)}}),2),ve=he[0],xe=he[1],we=M(g({type:"mousemove",target:function(){return window.document},listener:function(e){return Ne(e)}}),2),Ee=we[0],Se=we[1],ze=M(g({type:"mouseup",target:function(){return window.document},listener:function(e){return Be(e)}}),2),Oe=ze[0],ke=ze[1],Pe=function(e){I.onHide(),e.preventDefault()},De=function(e){W.current=e.target,I.onPointerDown&&I.onPointerDown(e)},Ie=function(e){I.dismissableMask&&I.modal&&Z.current===e.target&&!W.current&&Pe(e),I.onMaskClick&&I.onMaskClick(e),W.current=null},je=function(e){I.onMaximize?I.onMaximize({originalEvent:e,maximized:!ae}):J((function(e){return!e})),e.preventDefault()},Ce=function(e){var n=e.currentTarget;if(n&&n.primeDialogParams){var r=n.primeDialogParams,o=r.length,i=r[o-1]?r[o-1].id:void 0;if(i===R){var a=document.getElementById(i);if("Tab"===e.key){e.preventDefault();var l=t.getFocusableElements(a);if(l&&l.length>0)if(document.activeElement){var c=l.indexOf(document.activeElement);e.shiftKey?-1===c||0===c?l[l.length-1].focus():l[c-1].focus():-1===c||c===l.length-1?l[0].focus():l[c+1].focus()}else l[0].focus()}}}},Re=function(e){t.hasClass(e.target,"p-dialog-header-icon")||t.hasClass(e.target.parentElement,"p-dialog-header-icon")||I.draggable&&(Q.current=!0,te.current=e.pageX,ne.current=e.pageY,U.current.style.margin="0",t.addClass(document.body,"p-unselectable-text"),I.onDragStart&&I.onDragStart(e))},Ne=function(e){if(Q.current){var n=t.getOuterWidth(U.current),r=t.getOuterHeight(U.current),o=e.pageX-te.current,i=e.pageY-ne.current,a=U.current.getBoundingClientRect(),l=a.left+o,c=a.top+i,u=t.getViewport(),s=getComputedStyle(U.current),p=parseFloat(s.marginLeft),d=parseFloat(s.marginTop);U.current.style.position="fixed",I.keepInViewport?(l>=I.minX&&l+n<u.width&&(te.current=e.pageX,U.current.style.left=l-p+"px"),c>=I.minY&&c+r<u.height&&(ne.current=e.pageY,U.current.style.top=c-d+"px")):(te.current=e.pageX,U.current.style.left=l-p+"px",ne.current=e.pageY,U.current.style.top=c-d+"px"),I.onDrag&&I.onDrag(e)}},Be=function(e){Q.current&&(Q.current=!1,t.removeClass(document.body,"p-unselectable-text"),I.onDragEnd&&I.onDragEnd(e))},Te=function(e){I.resizable&&(ee.current=!0,te.current=e.pageX,ne.current=e.pageY,t.addClass(document.body,"p-unselectable-text"),I.onResizeStart&&I.onResizeStart(e))},Me=function(e,n,r){!r&&(r=t.getViewport());var o=parseInt(e);return/^(\d+|(\.\d+))(\.\d+)?%$/.test(e)?o*(r[n]/100):o},Xe=function(e){if(ee.current){var n=e.pageX-te.current,r=e.pageY-ne.current,o=t.getOuterWidth(U.current),i=t.getOuterHeight(U.current),a=U.current.getBoundingClientRect(),l=t.getViewport(),c=!parseInt(U.current.style.top)||!parseInt(U.current.style.left),u=Me(U.current.style.minWidth,"width",l),s=Me(U.current.style.minHeight,"height",l),p=o+n,d=i+r;c&&(p+=n,d+=r),(!u||p>u)&&a.left+p<l.width&&(U.current.style.width=p+"px"),(!s||d>s)&&a.top+d<l.height&&(U.current.style.height=d+"px"),te.current=e.pageX,ne.current=e.pageY,I.onResize&&I.onResize(e)}},Ae=function(e){ee.current&&(ee.current=!1,t.removeClass(document.body,"p-unselectable-text"),I.onResizeEnd&&I.onResizeEnd(e))},He=function(){U.current.style.position="",U.current.style.left="",U.current.style.top="",U.current.style.margin=""},Ye=function(){U.current.setAttribute(oe.current,"")},_e=function(){var e;I.onShow&&I.onShow(),I.focusOnShow&&!((e=document.activeElement)&&U.current&&U.current.contains(e))&&I.closable&&I.showHeader&&G.current.focus(),Fe()},Le=function(){I.modal&&t.addClass(Z.current,"p-component-overlay-leave")},Ve=function(){Q.current=!1,i.clear(Z.current),T(!1),Je(),t.focus(ie.current),ie.current=null},Fe=function(){Ze(),Ue(!0)},Je=function(){We(),Ue(!1)},Ue=function(e){if(e){var n={id:R,hasBlockScroll:le};document.primeDialogParams||(document.primeDialogParams=[]);var r=document.primeDialogParams.findIndex((function(e){return e.id===R}));document.primeDialogParams=-1===r?[].concat(O(o=document.primeDialogParams)||k(o)||P(o)||D(),[n]):document.primeDialogParams.toSpliced(r,1,n)}else document.primeDialogParams=document.primeDialogParams&&document.primeDialogParams.filter((function(e){return e.id!==R}));var o;document.primeDialogParams&&document.primeDialogParams.some((function(e){return e.hasBlockScroll}))?t.blockBodyScroll():t.unblockBodyScroll()},Ze=function(){I.draggable&&(Ee(),Oe()),I.resizable&&(be(),ve()),me()},We=function(){Se(),ke(),ye(),xe(),ge()},$e=function(){re.current=t.createInlineStyle(z&&z.nonce||c.nonce);var e="";for(var n in I.breakpoints)e+="\n                @media screen and (max-width: ".concat(n,") {\n                    .p-dialog[").concat(oe.current,"] {\n                        width: ").concat(I.breakpoints[n],";\n                    }\n                }\n            ");re.current.innerHTML=e};f((function(){I.visible&&T(!0),I.breakpoints&&$e()})),b((function(){I.visible&&!B&&T(!0),I.visible!==H&&B&&Y(I.visible),I.visible&&(ie.current=document.activeElement)}),[I.visible,B]),b((function(){B&&(i.set("modal",Z.current,z&&z.autoZIndex||c.autoZIndex,I.baseZIndex||z&&z.zIndex.modal||c.zIndex.modal),Y(!0))}),[B]),b((function(){Ue(!0)}),[le]),y((function(){Je(),t.removeInlineStyle(re.current),i.clear(Z.current)})),e.useImperativeHandle(p,(function(){return{props:I,resetPosition:He,getElement:function(){return U.current},getMask:function(){return Z.current},getContent:function(){return $.current},getHeader:function(){return K.current},getFooter:function(){return q.current},getCloseButton:function(){return G.current}}}));var Ke,qe,Ge,Qe,et,tt,nt,rt,ot,it,at,lt,ct=function(){if(I.closable){var t=I.ariaCloseIconLabel||s("close"),n=a({className:se("closeButtonIcon"),"aria-hidden":!0},ue("closeButtonIcon")),r=l.getJSXIcon(I.closeIcon||e.createElement(h,n),V({},n),{props:I}),o=a({ref:G,type:"button",className:se("closeButton"),"aria-label":t,onClick:Pe},ue("closeButton"));return e.createElement("button",o,r,e.createElement(E,null))}return null},ut=function(){var t=a({className:se("maximizableIcon")},ue("maximizableIcon")),n=l.getJSXIcon(ae?I.minimizeIcon||e.createElement(x,t):I.maximizeIcon||e.createElement(v,t),t,{props:I});if(I.maximizable){var r=a({type:"button",className:se("maximizableButton"),onClick:je},ue("maximizableButton"));return e.createElement("button",r,n,e.createElement(E,null))}return null},st=function(){if(I.showHeader){var t=ct(),r=ut(),o=n.getJSXElement(I.icons,I),i=n.getJSXElement(I.header,I),l=R+"_header",c=a({ref:K,style:I.headerStyle,className:se("header"),onMouseDown:Re},ue("header")),u=a({id:l,className:se("headerTitle")},ue("headerTitle")),s=a({className:se("headerIcons")},ue("headerIcons"));return e.createElement("div",c,e.createElement("div",u,i),e.createElement("div",s,o,r,t))}return null},pt=function(){var t=n.getJSXElement(I.footer,I),r=a({ref:q,className:se("footer")},ue("footer"));return t&&e.createElement("div",r,t)};return B&&(qe=st(),Ke=a({id:R+"_content",ref:$,style:I.contentStyle,className:se("content")},ue("content")),Ge=e.createElement("div",Ke,I.children),Qe=pt(),et=I.resizable?e.createElement("span",{className:"p-resizable-handle",style:{zIndex:90},onMouseDown:Te}):null,tt=R+"_header",nt=R+"_content",rt={enter:"center"===I.position?150:300,exit:"center"===I.position?150:300},ot=a({ref:Z,style:pe("mask"),className:se("mask"),onPointerUp:Ie},ue("mask")),it=a({ref:U,id:R,className:se("root",{props:I,maximized:ae,context:z}),style:I.style,onClick:I.onClick,role:"dialog","aria-labelledby":tt,"aria-describedby":nt,"aria-modal":I.modal,onPointerDown:De},_.getOtherProps(I),ue("root")),at=a({classNames:se("transition"),timeout:rt,in:H,options:I.transitionOptions,unmountOnExit:!0,onEnter:Ye,onEntered:_e,onExiting:Le,onExited:Ve},ue("transition")),lt=e.createElement("div",ot,e.createElement(m,S({nodeRef:U},at),e.createElement("div",it,qe,Ge,Qe,et))),e.createElement(w,{element:lt,appendTo:I.appendTo,visible:!0}))}));F.displayName="Dialog";export{F as Dialog};
+import*as e from"react";import{DomHandler as t,ObjectUtils as n,classNames as r,UniqueComponentId as o,ZIndexUtils as i,mergeProps as a,IconUtils as l}from"primereact/utils";import c,{PrimeReactContext as s,localeOption as u}from"primereact/api";import{ComponentBase as p,useHandleStyle as d}from"primereact/componentbase";import{CSSTransition as m}from"primereact/csstransition";import{useEventListener as f,useMountEffect as g,useUpdateEffect as b,useUnmountEffect as v}from"primereact/hooks";import{TimesIcon as h}from"primereact/icons/times";import{WindowMaximizeIcon as y}from"primereact/icons/windowmaximize";import{WindowMinimizeIcon as x}from"primereact/icons/windowminimize";import{Portal as w}from"primereact/portal";import{Ripple as E}from"primereact/ripple";function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S.apply(this,arguments)}function k(e){return k="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},k(e)}function z(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function P(e){if(Array.isArray(e))return z(e)}function O(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function D(e,t){if(e){if("string"==typeof e)return z(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?z(e,t):void 0}}function I(){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 R(e,t){if("object"!==k(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==k(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function j(e){var t=R(e,"string");return"symbol"===k(t)?t:String(t)}function C(e,t,n){return(t=j(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function N(e){if(Array.isArray(e))return e}function T(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,l=[],c=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return l}}function B(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function M(e,t){return N(e)||T(e,t)||D(e,t)||B()}var X=function(t){var n=e.useRef(void 0);return e.useEffect((function(){n.current=t})),n.current},A=function(r,o,i){var a,l,c,s,u,p,d,m,f,g,b,v,h,y,x,w=(s=void 0===(c=(a={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),i(e))}}).target)?"document":c,u=a.type,p=a.listener,d=a.options,f=void 0===(m=a.when)||m,g=e.useRef(null),b=e.useRef(null),v=X(p),h=X(d),y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n.isNotEmpty(e.target)&&(x(),(e.when||f)&&(g.current=t.getTargetElement(e.target))),!b.current&&g.current&&(b.current=function(e){return p&&p(e)},g.current.addEventListener(u,b.current,d))},x=function(){b.current&&(g.current.removeEventListener(u,b.current,d),b.current=null)},e.useEffect((function(){f?g.current=t.getTargetElement(s):(x(),g.current=null)}),[s,f]),e.useEffect((function(){!b.current||""+v==""+p&&h===d||(x(),f&&y())}),[p,d,f]),l=function(){x()},e.useEffect((function(){return l}),[]),[y,x]),E=M(w,2),S=E[0],k=E[1];return e.useEffect((function(){if(o&&r.current)return S(),function(){k()}})),[r,i]};function H(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?H(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):H(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var _=p.extend({defaultProps:{__TYPE:"Dialog",__parentMetadata:null,appendTo:null,ariaCloseIconLabel:null,baseZIndex:0,blockScroll:!1,breakpoints:null,className:null,closable:!0,closeIcon:null,closeOnEscape:!0,contentClassName:null,contentStyle:null,dismissableMask:!1,draggable:!0,focusOnShow:!0,footer:null,footerClassName:null,header:null,headerClassName:null,headerStyle:null,icons:null,id:null,keepInViewport:!0,maskClassName:null,maskStyle:null,maximizable:!1,maximizeIcon:null,maximized:!1,minX:0,minY:0,minimizeIcon:null,modal:!0,onClick:null,onDrag:null,onDragEnd:null,onDragStart:null,onHide:null,onMaskClick:null,onMaximize:null,onResize:null,onResizeEnd:null,onResizeStart:null,onShow:null,position:"center",resizable:!0,rtl:!1,showHeader:!0,style:null,transitionOptions:null,visible:!1,children:void 0},css:{classes:{closeButtonIcon:"p-dialog-header-close-icon",closeButton:"p-dialog-header-icon p-dialog-header-close p-link",maximizableIcon:"p-dialog-header-maximize-icon",maximizableButton:"p-dialog-header-icon p-dialog-header-maximize p-link",header:function(e){return r("p-dialog-header",e.props.headerClassName)},headerTitle:"p-dialog-title",headerIcons:"p-dialog-header-icons",content:function(e){return r("p-dialog-content",e.props.contentClassName)},footer:function(e){return r("p-dialog-footer",e.props.footerClassName)},mask:function(e){var t=e.props,n=e.maskVisibleState,o=["center","left","right","top","top-left","top-right","bottom","bottom-left","bottom-right"].find((function(e){return e===t.position||e.replace("-","")===t.position}));return r("p-dialog-mask",o?"p-dialog-".concat(o):"",{"p-component-overlay p-component-overlay-enter":t.modal,"p-dialog-visible":n,"p-dialog-draggable":t.draggable,"p-dialog-resizable":t.resizable},t.maskClassName)},root:function(e){var t=e.props,n=e.maximized,o=e.context;return r("p-dialog p-component",t.className,{"p-dialog-rtl":t.rtl,"p-dialog-maximized":n,"p-dialog-default":!n,"p-input-filled":o&&"filled"===o.inputStyle||"filled"===c.inputStyle,"p-ripple-disabled":o&&!1===o.ripple||!1===c.ripple})},transition:"p-dialog"},styles:"\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n",inlineStyles:{mask:function(e){var t=e.props;return Y({position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===t.position||"top-left"===t.position||"bottom-left"===t.position?"flex-start":"right"===t.position||"top-right"===t.position||"bottom-right"===t.position?"flex-end":"center",alignItems:"top"===t.position||"top-left"===t.position||"top-right"===t.position?"flex-start":"bottom"===t.position||"bottom-left"===t.position||"bottom-right"===t.position?"flex-end":"center",pointerEvents:!t.modal&&"none"},t.maskStyle)}}}});function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function V(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var J=e.forwardRef((function(r,p){var k=e.useContext(s),z=_.getProps(r,k),R=z.id?z.id:o(),j=M(e.useState(R),2),C=j[0],N=M(e.useState(!1),2),T=N[0],B=N[1],X=M(e.useState(!1),2),H=X[0],Y=X[1],L=M(e.useState(z.maximized),2),J=L[0],F=L[1],U=e.useRef(null),Z=e.useRef(null),W=e.useRef(null),$=e.useRef(null),K=e.useRef(null),q=e.useRef(null),G=e.useRef(null),Q=e.useRef(!1),ee=e.useRef(!1),te=e.useRef(null),ne=e.useRef(null),re=e.useRef(null),oe=e.useRef(R),ie=e.useRef(null),ae=z.onMaximize?z.maximized:J,le=H&&(z.blockScroll||z.maximizable&&ae),ce=_.setMetaData(V(V({props:z},z.__parentMetadata),{},{state:{id:C,maximized:ae,containerVisible:T}})),se=ce.ptm,ue=ce.cx,pe=ce.sx;d(_.css.styles,ce.isUnstyled,{name:"dialog"}),A(Z,z.closable&&z.closeOnEscape,(function(e){var t=e.currentTarget;if(t&&t.primeDialogParams){var n=t.primeDialogParams,r=n.length;Oe(e),n.splice(r-1,1)}}));var de=M(f({type:"keydown",listener:function(e){return je(e)}}),2),me=de[0],fe=de[1],ge=M(f({type:"mousemove",target:function(){return window.document},listener:function(e){return Xe(e)}}),2),be=ge[0],ve=ge[1],he=M(f({type:"mouseup",target:function(){return window.document},listener:function(e){return Ae(e)}}),2),ye=he[0],xe=he[1],we=M(f({type:"mousemove",target:function(){return window.document},listener:function(e){return Ne(e)}}),2),Ee=we[0],Se=we[1],ke=M(f({type:"mouseup",target:function(){return window.document},listener:function(e){return Te(e)}}),2),ze=ke[0],Pe=ke[1],Oe=function(e){z.onHide(),e.preventDefault()},De=function(e){W.current=e.target,z.onPointerDown&&z.onPointerDown(e)},Ie=function(e){z.dismissableMask&&z.modal&&Z.current===e.target&&!W.current&&Oe(e),z.onMaskClick&&z.onMaskClick(e),W.current=null},Re=function(e){z.onMaximize?z.onMaximize({originalEvent:e,maximized:!ae}):F((function(e){return!e})),e.preventDefault()},je=function(e){var n=e.currentTarget;if(n&&n.primeDialogParams){var r=n.primeDialogParams,o=r.length,i=r[o-1]?r[o-1].id:void 0;if(i===C){var a=document.getElementById(i);if("Tab"===e.key){e.preventDefault();var l=t.getFocusableElements(a);if(l&&l.length>0)if(document.activeElement){var c=l.indexOf(document.activeElement);e.shiftKey?-1===c||0===c?l[l.length-1].focus():l[c-1].focus():-1===c||c===l.length-1?l[0].focus():l[c+1].focus()}else l[0].focus()}}}},Ce=function(e){t.hasClass(e.target,"p-dialog-header-icon")||t.hasClass(e.target.parentElement,"p-dialog-header-icon")||z.draggable&&(Q.current=!0,te.current=e.pageX,ne.current=e.pageY,U.current.style.margin="0",t.addClass(document.body,"p-unselectable-text"),z.onDragStart&&z.onDragStart(e))},Ne=function(e){if(Q.current){var n=t.getOuterWidth(U.current),r=t.getOuterHeight(U.current),o=e.pageX-te.current,i=e.pageY-ne.current,a=U.current.getBoundingClientRect(),l=a.left+o,c=a.top+i,s=t.getViewport(),u=getComputedStyle(U.current),p=parseFloat(u.marginLeft),d=parseFloat(u.marginTop);U.current.style.position="fixed",z.keepInViewport?(l>=z.minX&&l+n<s.width&&(te.current=e.pageX,U.current.style.left=l-p+"px"),c>=z.minY&&c+r<s.height&&(ne.current=e.pageY,U.current.style.top=c-d+"px")):(te.current=e.pageX,U.current.style.left=l-p+"px",ne.current=e.pageY,U.current.style.top=c-d+"px"),z.onDrag&&z.onDrag(e)}},Te=function(e){Q.current&&(Q.current=!1,t.removeClass(document.body,"p-unselectable-text"),z.onDragEnd&&z.onDragEnd(e))},Be=function(e){z.resizable&&(ee.current=!0,te.current=e.pageX,ne.current=e.pageY,t.addClass(document.body,"p-unselectable-text"),z.onResizeStart&&z.onResizeStart(e))},Me=function(e,n,r){!r&&(r=t.getViewport());var o=parseInt(e);return/^(\d+|(\.\d+))(\.\d+)?%$/.test(e)?o*(r[n]/100):o},Xe=function(e){if(ee.current){var n=e.pageX-te.current,r=e.pageY-ne.current,o=t.getOuterWidth(U.current),i=t.getOuterHeight(U.current),a=U.current.getBoundingClientRect(),l=t.getViewport(),c=!parseInt(U.current.style.top)||!parseInt(U.current.style.left),s=Me(U.current.style.minWidth,"width",l),u=Me(U.current.style.minHeight,"height",l),p=o+n,d=i+r;c&&(p+=n,d+=r),(!s||p>s)&&a.left+p<l.width&&(U.current.style.width=p+"px"),(!u||d>u)&&a.top+d<l.height&&(U.current.style.height=d+"px"),te.current=e.pageX,ne.current=e.pageY,z.onResize&&z.onResize(e)}},Ae=function(e){ee.current&&(ee.current=!1,t.removeClass(document.body,"p-unselectable-text"),z.onResizeEnd&&z.onResizeEnd(e))},He=function(){U.current.style.position="",U.current.style.left="",U.current.style.top="",U.current.style.margin=""},Ye=function(){U.current.setAttribute(oe.current,"")},_e=function(){var e;z.onShow&&z.onShow(),z.focusOnShow&&!((e=document.activeElement)&&U.current&&U.current.contains(e))&&z.closable&&z.showHeader&&G.current&&G.current.focus(),Je()},Le=function(){z.modal&&t.addClass(Z.current,"p-component-overlay-leave")},Ve=function(){Q.current=!1,i.clear(Z.current),B(!1),Fe(),t.focus(ie.current),ie.current=null},Je=function(){Ze(),Ue(!0)},Fe=function(){We(),Ue(!1)},Ue=function(e){if(e&&H){var n={id:C,hasBlockScroll:le};document.primeDialogParams||(document.primeDialogParams=[]);var r=document.primeDialogParams.findIndex((function(e){return e.id===C}));document.primeDialogParams=-1===r?[].concat(P(o=document.primeDialogParams)||O(o)||D(o)||I(),[n]):document.primeDialogParams.toSpliced(r,1,n)}else document.primeDialogParams=document.primeDialogParams&&document.primeDialogParams.filter((function(e){return e.id!==C}));var o;document.primeDialogParams&&document.primeDialogParams.some((function(e){return e.hasBlockScroll}))?t.blockBodyScroll():t.unblockBodyScroll()},Ze=function(){z.draggable&&(Ee(),ze()),z.resizable&&(be(),ye()),me()},We=function(){Se(),Pe(),ve(),xe(),fe()},$e=function(){re.current=t.createInlineStyle(k&&k.nonce||c.nonce);var e="";for(var n in z.breakpoints)e+="\n                @media screen and (max-width: ".concat(n,") {\n                    .p-dialog[").concat(oe.current,"] {\n                        width: ").concat(z.breakpoints[n],";\n                    }\n                }\n            ");re.current.innerHTML=e};g((function(){z.visible&&B(!0),z.breakpoints&&$e()})),b((function(){z.visible&&!T&&B(!0),z.visible!==H&&T&&Y(z.visible),z.visible&&(ie.current=document.activeElement)}),[z.visible,T]),b((function(){T&&(i.set("modal",Z.current,k&&k.autoZIndex||c.autoZIndex,z.baseZIndex||k&&k.zIndex.modal||c.zIndex.modal),Y(!0))}),[T]),b((function(){Ue(!0)}),[le]),v((function(){Fe(),t.removeInlineStyle(re.current),i.clear(Z.current)})),e.useImperativeHandle(p,(function(){return{props:z,resetPosition:He,getElement:function(){return U.current},getMask:function(){return Z.current},getContent:function(){return $.current},getHeader:function(){return K.current},getFooter:function(){return q.current},getCloseButton:function(){return G.current}}}));var Ke=function(){if(z.closable){var t=z.ariaCloseIconLabel||u("close"),n=a({className:ue("closeButtonIcon"),"aria-hidden":!0},se("closeButtonIcon")),r=l.getJSXIcon(z.closeIcon||e.createElement(h,n),V({},n),{props:z}),o=a({ref:G,type:"button",className:ue("closeButton"),"aria-label":t,onClick:Oe},se("closeButton"));return e.createElement("button",o,r,e.createElement(E,null))}return null},qe=function(){var t=a({className:ue("maximizableIcon")},se("maximizableIcon")),n=l.getJSXIcon(ae?z.minimizeIcon||e.createElement(x,t):z.maximizeIcon||e.createElement(y,t),t,{props:z});if(z.maximizable){var r=a({type:"button",className:ue("maximizableButton"),onClick:Re},se("maximizableButton"));return e.createElement("button",r,n,e.createElement(E,null))}return null},Ge=function(){if(z.showHeader){var t=Ke(),r=qe(),o=n.getJSXElement(z.icons,z),i=n.getJSXElement(z.header,z),l=C+"_header",c=a({ref:K,style:z.headerStyle,className:ue("header"),onMouseDown:Ce},se("header")),s=a({id:l,className:ue("headerTitle")},se("headerTitle")),u=a({className:ue("headerIcons")},se("headerIcons"));return e.createElement("div",c,e.createElement("div",s,i),e.createElement("div",u,o,r,t))}return null},Qe=function(){var t=n.getJSXElement(z.footer,z),r=a({ref:q,className:ue("footer")},se("footer"));return t&&e.createElement("div",r,t)},et=function(t){var o,i=t.rootProps,a={header:z.header,content:z.message,message:null==z||null===(o=z.children)||void 0===o||null===(o=o[1])||void 0===o||null===(o=o.props)||void 0===o?void 0:o.children},l={headerRef:K,contentRef:$,footerRef:q,closeRef:G,hide:Oe,message:a};return e.createElement("div",t.maskProps,e.createElement(m,S({nodeRef:U},t.transitionProps),e.createElement("div",i,n.getJSXElement(r.content,l))))},tt=function(t){var n,r=t.maskProps,o=t.rootProps,i=t.transitionProps,l=Ge(),c=(n=a({id:C+"_content",ref:$,style:z.contentStyle,className:ue("content")},se("content")),e.createElement("div",n,z.children)),s=Qe(),u=z.resizable?e.createElement("span",{className:"p-resizable-handle",style:{zIndex:90},onMouseDown:Be}):null;return e.createElement("div",r,e.createElement(m,S({nodeRef:U},i),e.createElement("div",o,l,c,s,u)))};return T&&function(){var t=C+"_header",n=C+"_content",o={enter:"center"===z.position?150:300,exit:"center"===z.position?150:300},i=a({ref:Z,style:pe("mask"),className:ue("mask"),onPointerUp:Ie},se("mask")),l=a({ref:U,id:C,className:ue("root",{props:z,maximized:ae,context:k}),style:z.style,onClick:z.onClick,role:"dialog","aria-labelledby":t,"aria-describedby":n,"aria-modal":z.modal,onPointerDown:De},_.getOtherProps(z),se("root")),c=a({classNames:ue("transition"),timeout:o,in:H,options:z.transitionOptions,unmountOnExit:!0,onEnter:Ye,onEntered:_e,onExiting:Le,onExited:Ve},se("transition"));if(null!=r&&r.content){var s=et({maskProps:i,rootProps:l,transitionProps:c});return e.createElement(w,{element:s,appendTo:z.appendTo,visible:!0})}var u=tt({maskProps:i,rootProps:l,transitionProps:c});return e.createElement(w,{element:u,appendTo:z.appendTo,visible:!0})}()}));J.displayName="Dialog";export{J as Dialog};

package/dialog/dialog.js

@@ -40,6 +40,16 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
     return _extends.apply(this, arguments);
   }
 
+  function _typeof(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+
   function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -71,16 +81,6 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
 
-  function _typeof(o) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-      return typeof o;
-    } : function (o) {
-      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-    }, _typeof(o);
-  }
-
   function _toPrimitive(input, hint) {
     if (_typeof(input) !== "object" || input === null) return input;
     var prim = input[Symbol.toPrimitive];
@@ -179,6 +179,7 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       when = _ref$when === void 0 ? true : _ref$when;
     var targetRef = React__namespace.useRef(null);
     var listenerRef = React__namespace.useRef(null);
+    var prevListener = usePrevious(listener);
     var prevOptions = usePrevious(options);
     var bind = function bind() {
       var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -208,11 +209,12 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       }
     }, [target, when]);
     React__namespace.useEffect(function () {
-      if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
+      // to properly compare functions we can implicitly converting the function to it's body's text as a String
+      if (listenerRef.current && ('' + prevListener !== '' + listener || prevOptions !== options)) {
         unbind();
         when && bind();
       }
-    }, [listener, options]);
+    }, [listener, options, when]);
     useUnmountEffect(function () {
       unbind();
     });
@@ -267,10 +269,13 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       var props = _ref2.props;
       return utils.classNames('p-dialog-content', props.contentClassName);
     },
-    footer: 'p-dialog-footer',
-    mask: function mask(_ref3) {
-      var props = _ref3.props,
-        maskVisibleState = _ref3.maskVisibleState;
+    footer: function footer(_ref3) {
+      var props = _ref3.props;
+      return utils.classNames('p-dialog-footer', props.footerClassName);
+    },
+    mask: function mask(_ref4) {
+      var props = _ref4.props,
+        maskVisibleState = _ref4.maskVisibleState;
       var positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
       var pos = positions.find(function (item) {
         return item === props.position || item.replace('-', '') === props.position;
@@ -282,10 +287,10 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
         'p-dialog-resizable': props.resizable
       }, props.maskClassName);
     },
-    root: function root(_ref4) {
-      var props = _ref4.props,
-        maximized = _ref4.maximized,
-        context = _ref4.context;
+    root: function root(_ref5) {
+      var props = _ref5.props,
+        maximized = _ref5.maximized,
+        context = _ref5.context;
       return utils.classNames('p-dialog p-component', props.className, {
         'p-dialog-rtl': props.rtl,
         'p-dialog-maximized': maximized,
@@ -296,10 +301,10 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
     },
     transition: 'p-dialog'
   };
-  var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n";
+  var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n";
   var inlineStyles = {
-    mask: function mask(_ref5) {
-      var props = _ref5.props;
+    mask: function mask(_ref6) {
+      var props = _ref6.props;
       return _objectSpread$1({
         position: 'fixed',
         height: '100%',
@@ -332,6 +337,7 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       draggable: true,
       focusOnShow: true,
       footer: null,
+      footerClassName: null,
       header: null,
       headerClassName: null,
       headerStyle: null,
@@ -502,7 +508,7 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
     var focus = function focus() {
       var activeElement = document.activeElement;
       var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
-      if (!isActiveElementInDialog && props.closable && props.showHeader) {
+      if (!isActiveElementInDialog && props.closable && props.showHeader && closeRef.current) {
         closeRef.current.focus();
       }
     };
@@ -714,8 +720,8 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       }
     };
     var updateGlobalDialogsRegistry = function updateGlobalDialogsRegistry(isMounted) {
-      // Update current dialog info in global registry if it is mounted:
-      if (isMounted) {
+      // Update current dialog info in global registry if it is mounted :
+      if (isMounted && visibleState) {
         var newParam = {
           id: idState,
           hasBlockScroll: shouldBlockScroll
@@ -929,11 +935,41 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
       }
       return null;
     };
-    var createElement = function createElement() {
+    var createTemplateElement = function createTemplateElement(_ref) {
+      var _props$children;
+      var maskProps = _ref.maskProps,
+        rootProps = _ref.rootProps,
+        transitionProps = _ref.transitionProps;
+      var messageProps = {
+        header: props.header,
+        content: props.message,
+        message: props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 || (_props$children = _props$children[1]) === null || _props$children === void 0 || (_props$children = _props$children.props) === null || _props$children === void 0 ? void 0 : _props$children.children
+      };
+      var templateElementProps = {
+        headerRef: headerRef,
+        contentRef: contentRef,
+        footerRef: footerRef,
+        closeRef: closeRef,
+        hide: onClose,
+        message: messageProps
+      };
+      return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+        nodeRef: dialogRef
+      }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, utils.ObjectUtils.getJSXElement(inProps.content, templateElementProps))));
+    };
+    var createElement = function createElement(_ref2) {
+      var maskProps = _ref2.maskProps,
+        rootProps = _ref2.rootProps,
+        transitionProps = _ref2.transitionProps;
       var header = createHeader();
       var content = createContent();
       var footer = createFooter();
       var resizer = createResizer();
+      return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+        nodeRef: dialogRef
+      }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer, resizer)));
+    };
+    var createDialog = function createDialog() {
       var headerId = idState + '_header';
       var contentId = idState + '_content';
       var transitionTimeout = {
@@ -973,17 +1009,29 @@ this.primereact.dialog = (function (exports, React, utils, PrimeReact, component
         onExiting: onExiting,
         onExited: onExited
       }, ptm('transition'));
-      return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
-        nodeRef: dialogRef
-      }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer, resizer)));
-    };
-    var createDialog = function createDialog() {
-      var element = createElement();
-      return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
-        element: element,
-        appendTo: props.appendTo,
-        visible: true
-      });
+      if (inProps !== null && inProps !== void 0 && inProps.content) {
+        var templateElement = createTemplateElement({
+          maskProps: maskProps,
+          rootProps: rootProps,
+          transitionProps: transitionProps
+        });
+        return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
+          element: templateElement,
+          appendTo: props.appendTo,
+          visible: true
+        });
+      } else {
+        var element = createElement({
+          maskProps: maskProps,
+          rootProps: rootProps,
+          transitionProps: transitionProps
+        });
+        return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
+          element: element,
+          appendTo: props.appendTo,
+          visible: true
+        });
+      }
     };
     return maskVisibleState && createDialog();
   });