primereact 10.2.0 → 10.3.0

package/confirmpopup/confirmpopup.cjs.js

@@ -233,6 +233,7 @@ var useEventListener = function useEventListener(_ref) {
     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] : {};
@@ -262,11 +263,12 @@ var useEventListener = function useEventListener(_ref) {
     }
   }, [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();
   });
@@ -355,6 +357,7 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   });
   var overlayRef = React__namespace.useRef(null);
   var acceptBtnRef = React__namespace.useRef(null);
+  var rejectBtnRef = React__namespace.useRef(null);
   var isPanelClicked = React__namespace.useRef(false);
   var overlayEventListener = React__namespace.useRef(null);
   var confirmProps = React__namespace.useRef(null);
@@ -415,16 +418,20 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     }
   };
   var show = function show() {
-    // Remember the focused element before we opened the dialog
-    // so we can return focus to it once we close the dialog.
-    focusElementOnHide.current = document.activeElement;
-    setVisibleState(true);
+    var currentProps = getCurrentProps();
     setReshowState(false);
-    isCallbackExecuting.current = false;
-    overlayEventListener.current = function (e) {
-      !isOutsideClicked(e.target) && (isPanelClicked.current = true);
-    };
-    overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
+    if (currentProps.group === props.group) {
+      setVisibleState(true);
+      isCallbackExecuting.current = false;
+      overlayEventListener.current = function (e) {
+        !isOutsideClicked(e.target) && (isPanelClicked.current = true);
+      };
+      overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
+
+      // Remember the focused element before we opened the dialog
+      // so we can return focus to it once we close the dialog.
+      focusElementOnHide.current = document.activeElement;
+    }
   };
   var hide = function hide(result) {
     setVisibleState(false);
@@ -548,6 +555,7 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       className: cx('footer')
     }, ptm('footer'));
     var rejectButtonProps = utils.mergeProps({
+      ref: rejectBtnRef,
       label: rejectLabel,
       icon: getPropValue('rejectIcon'),
       className: cx('rejectButton', {
@@ -591,38 +599,51 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     }
     return content;
   };
+  var rootProps = utils.mergeProps({
+    ref: overlayRef,
+    id: getPropValue('id'),
+    className: cx('root', {
+      context: context,
+      getPropValue: getPropValue
+    }),
+    style: getPropValue('style'),
+    onClick: onPanelClick
+  }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
+  var transitionProps = utils.mergeProps({
+    classNames: cx('transition'),
+    "in": visibleState,
+    timeout: {
+      enter: 120,
+      exit: 100
+    },
+    options: getPropValue('transitionOptions'),
+    unmountOnExit: true,
+    onEnter: onEnter,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited
+  }, ptm('transition'));
+  var createTemplateElement = function createTemplateElement() {
+    var currentProps = getCurrentProps();
+    var message = utils.ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+    var templateElementProps = {
+      message: message,
+      acceptBtnRef: acceptBtnRef,
+      rejectBtnRef: rejectBtnRef,
+      hide: hide
+    };
+    return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+      nodeRef: overlayRef
+    }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, utils.ObjectUtils.getJSXElement(inProps.content, templateElementProps)));
+  };
   var createElement = function createElement() {
     var content = createContent();
     var footer = createFooter();
-    var rootProps = utils.mergeProps({
-      ref: overlayRef,
-      id: getPropValue('id'),
-      className: cx('root', {
-        context: context,
-        getPropValue: getPropValue
-      }),
-      style: getPropValue('style'),
-      onClick: onPanelClick
-    }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
-    var transitionProps = utils.mergeProps({
-      classNames: cx('transition'),
-      "in": visibleState,
-      timeout: {
-        enter: 120,
-        exit: 100
-      },
-      options: getPropValue('transitionOptions'),
-      unmountOnExit: true,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited
-    }, ptm('transition'));
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
       nodeRef: overlayRef
     }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, content, footer));
   };
-  var element = createElement();
+  var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
   return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
     element: element,
     appendTo: getPropValue('appendTo'),

package/confirmpopup/confirmpopup.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/button"),n=require("primereact/componentbase"),o=require("primereact/csstransition"),c=require("primereact/hooks"),i=require("primereact/overlayservice"),u=require("primereact/portal"),a=require("primereact/utils");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=p(e),f=l(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},m.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,c,i,u=[],a=!0,l=!1;try{if(c=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=c.call(r)).done)&&(u.push(n.value),u.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(l)throw o}}return u}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}function g(){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 O(e,t){return d(e)||v(e,t)||y(e,t)||g()}function j(e){return j="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},j(e)}function P(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==j(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function h(e){var t=P(e,"string");return"symbol"===j(t)?t:String(t)}var E=n.ComponentBase.extend({defaultProps:{__TYPE:"ConfirmPopup",tagKey:void 0,target:null,visible:!1,message:null,rejectLabel:null,acceptLabel:null,icon:null,rejectIcon:null,acceptIcon:null,rejectClassName:null,acceptClassName:null,className:null,style:null,appendTo:null,dismissable:!0,footer:null,onShow:null,onHide:null,accept:null,reject:null,transitionOptions:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var t=e.context;return a.classNames("p-confirm-popup p-component",(0,e.getPropValue)("className"),{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===f.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===f.default.ripple})},acceptButton:function(e){return a.classNames("p-confirm-popup-accept p-button-sm",(0,e.getPropValue)("acceptClassName"))},rejectButton:function(e){var t=e.getPropValue;return a.classNames("p-confirm-popup-reject p-button-sm",{"p-button-text":!t("rejectClassName")},t("rejectClassName"))},content:"p-confirm-popup-content",icon:"p-confirm-popup-icon",message:"p-confirm-popup-message",footer:"p-confirm-popup-footer",transition:"p-connected-overlay"},styles:'\n@layer primereact {\n    .p-confirm-popup-flipped {\n        margin-top: 0;\n        margin-bottom: 10px;\n    }\n    \n    .p-confirm-popup:after, .p-confirm-popup:before {\n        bottom: 100%;\n        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n        content: " ";\n        height: 0;\n        width: 0;\n        position: absolute;\n        pointer-events: none;\n    }\n    \n    .p-confirm-popup:after {\n        border-width: 8px;\n        margin-left: -8px;\n    }\n    \n    .p-confirm-popup:before {\n        border-width: 10px;\n        margin-left: -10px;\n    }\n    \n    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n        bottom: auto;\n        top: 100%;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:after {\n        border-bottom-color: transparent;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:before {\n        border-bottom-color: transparent\n    }\n    \n    .p-confirm-popup .p-confirm-popup-content {\n        display: flex;\n        align-items: center;\n    }\n}\n'}}),S=function(e){var t,r,n,o=e.target,c=void 0===o?"document":o,i=e.type,u=e.listener,l=e.options,p=e.when,f=void 0===p||p,m=s.useRef(null),d=s.useRef(null),v=(t=l,r=s.useRef(void 0),s.useEffect((function(){r.current=t})),r.current),b=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a.ObjectUtils.isNotEmpty(e.target)&&(y(),(e.when||f)&&(m.current=a.DomHandler.getTargetElement(e.target))),!d.current&&m.current&&(d.current=function(e){return u&&u(e)},m.current.addEventListener(i,d.current,l))},y=function(){d.current&&(m.current.removeEventListener(i,d.current,l),d.current=null)};return s.useEffect((function(){f?m.current=a.DomHandler.getTargetElement(c):(y(),m.current=null)}),[c,f]),s.useEffect((function(){!d.current||d.current===u&&v===l||(y(),f&&b())}),[u,l]),n=function(){y()},s.useEffect((function(){return n}),[]),[b,y]},x=function(e,t,r){var n=O(S({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}),2),o=n[0],c=n[1];return s.useEffect((function(){if(t&&e.current)return o(),function(){c()}})),[e,r]};function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function N(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){var n,o,c;n=e,c=r[t],(o=h(o=t))in n?Object.defineProperty(n,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):n[o]=c})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var C=s.memo(s.forwardRef((function(e,l){var p=s.useContext(t.PrimeReactContext),d=E.getProps(e,p),v=O(s.useState(d.visible),2),b=v[0],y=v[1],g=O(s.useState(!1),2),j=g[0],P=g[1],h={props:d,state:{visible:b,reshow:j}},S=E.setMetaData(h),w=S.ptm,C=S.cx,I=S.isUnstyled;n.useHandleStyle(E.css.styles,I,{name:"confirmpopup"});var D=s.useRef(null),k=s.useRef(null),R=s.useRef(!1),H=s.useRef(null),U=s.useRef(null),L=s.useRef(null),T=s.useRef(!1),_=function(){return U.current||d},q=function(e){return(U.current||d)[e]},A=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return a.ObjectUtils.getPropValue(q(e),r)},B=q("acceptLabel")||t.localeOption("accept"),V=q("rejectLabel")||t.localeOption("reject");x(D,d.dismissable&&d.closeOnEscape,(function(e){$("hide")}));var M=O(c.useOverlayListener({target:q("target"),overlay:D,listener:function(e,t){t.valid&&("outside"===t.type?d.dismissable&&!R.current&&$("hide"):$("hide")),R.current=!1},when:b}),2),Z=M[0],z=M[1],J=function(e){R.current=!0,i.OverlayService.emit("overlay-click",{originalEvent:e,target:q("target")})},K=function(){T.current||(T.current=!0,A("accept"),$("accept"))},X=function(){T.current||(T.current=!0,A("reject"),$("reject"))},Y=function(){L.current=document.activeElement,y(!0),P(!1),T.current=!1,H.current=function(e){!te(e.target)&&(R.current=!0)},i.OverlayService.on("overlay-click",H.current)},$=function(e){y(!1),i.OverlayService.off("overlay-click",H.current),H.current=null,e&&A("onHide",e),a.DomHandler.focus(L.current),L.current=null},F=function(){a.ZIndexUtils.set("overlay",D.current,p&&p.autoZIndex||f.default.autoZIndex,p&&p.zIndex.overlay||f.default.zIndex.overlay),a.DomHandler.addStyles(D.current,{position:"absolute",top:"50%",left:"50%",marginTop:"10px"}),ee()},G=function(){Z(),k.current&&k.current.focus(),A("onShow")},Q=function(){z()},W=function(){a.ZIndexUtils.clear(D.current),R.current=!1},ee=function(){if(q("target")){a.DomHandler.absolutePosition(D.current,q("target"));var e=a.DomHandler.getOffset(D.current),t=a.DomHandler.getOffset(q("target")),r=0;e.left<t.left&&(r=t.left-e.left),D.current.style.setProperty("--overlayArrowLeft","".concat(r,"px")),e.top<t.top&&!I()&&a.DomHandler.addClass(D.current,"p-confirm-popup-flipped")}},te=function(e){return D&&D.current&&!(D.current.isSameNode(e)||D.current.contains(e))},re=function(e){if(e.tagKey===d.tagKey){var t=b!==e.visible;q("target")!==e.target&&!d.target?($(),U.current=e,P(!0)):t&&(U.current=e,e.visible?Y():$())}};s.useEffect((function(){d.visible?Y():$()}),[d.visible]),s.useEffect((function(){return d.target||d.message||i.OverlayService.on("confirm-popup",re),function(){i.OverlayService.off("confirm-popup",re)}}),[d.target]),c.useUpdateEffect((function(){j&&Y()}),[j]),c.useUnmountEffect((function(){H.current&&(i.OverlayService.off("overlay-click",H.current),H.current=null),i.OverlayService.off("confirm-popup",re),a.ZIndexUtils.clear(D.current)})),s.useImperativeHandle(l,(function(){return{props:d,confirm:re}}));var ne,oe,ce,ie,ue,ae,le,pe,se,fe,me=function(){var e=a.classNames("p-confirm-popup-accept p-button-sm",q("acceptClassName")),t=a.classNames("p-confirm-popup-reject p-button-sm",{"p-button-text":!q("rejectClassName")},q("rejectClassName")),n=a.mergeProps({className:C("footer")},w("footer")),o=a.mergeProps({label:V,icon:q("rejectIcon"),className:C("rejectButton",{getPropValue:q}),onClick:X,pt:w("rejectButton"),unstyled:d.unstyled,__parentMetadata:{parent:h}}),c=a.mergeProps({ref:k,label:B,icon:q("acceptIcon"),className:C("acceptButton",{getPropValue:q}),onClick:K,pt:w("acceptButton"),unstyled:d.unstyled,__parentMetadata:{parent:h}}),i=s.createElement("div",n,s.createElement(r.Button,o),s.createElement(r.Button,c));if(q("footer")){var u={accept:K,reject:X,className:"p-confirm-popup-footer",acceptClassName:e,rejectClassName:t,acceptLabel:B,rejectLabel:V,element:i,props:_()};return a.ObjectUtils.getJSXElement(q("footer"),u)}return i},de=(ne=_(),oe=a.ObjectUtils.getJSXElement(q("message"),ne),ce=a.mergeProps({className:C("icon")},w("icon")),ie=a.IconUtils.getJSXIcon(q("icon"),N({},ce),{props:ne}),ue=a.mergeProps({className:C("message")},w("message")),ae=a.mergeProps({className:C("content")},w("content")),le=s.createElement("div",ae,ie,s.createElement("span",ue,oe)),pe=me(),se=a.mergeProps({ref:D,id:q("id"),className:C("root",{context:p,getPropValue:q}),style:q("style"),onClick:J},E.getOtherProps(d),w("root")),fe=a.mergeProps({classNames:C("transition"),in:b,timeout:{enter:120,exit:100},options:q("transitionOptions"),unmountOnExit:!0,onEnter:F,onEntered:G,onExit:Q,onExited:W},w("transition")),s.createElement(o.CSSTransition,m({nodeRef:D},fe),s.createElement("div",se,le,pe)));return s.createElement(u.Portal,{element:de,appendTo:q("appendTo"),visible:q("visible")})})));C.displayName="ConfirmPopup",exports.ConfirmPopup=C,exports.confirmPopup=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(e=N(N({},e),{visible:void 0===e.visible||e.visible})).visible&&i.OverlayService.emit("confirm-popup",e);return{show:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i.OverlayService.emit("confirm-popup",N(N(N({},e),t),{visible:!0}))},hide:function(){i.OverlayService.emit("confirm-popup",{visible:!1})}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/button"),n=require("primereact/componentbase"),o=require("primereact/csstransition"),c=require("primereact/hooks"),i=require("primereact/overlayservice"),u=require("primereact/portal"),a=require("primereact/utils");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=p(e),f=l(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},m.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,c,i,u=[],a=!0,l=!1;try{if(c=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=c.call(r)).done)&&(u.push(n.value),u.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{if(!a&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(l)throw o}}return u}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}function g(){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 O(e,t){return d(e)||v(e,t)||y(e,t)||g()}function j(e){return j="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},j(e)}function E(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==j(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function P(e){var t=E(e,"string");return"symbol"===j(t)?t:String(t)}var S=n.ComponentBase.extend({defaultProps:{__TYPE:"ConfirmPopup",tagKey:void 0,target:null,visible:!1,message:null,rejectLabel:null,acceptLabel:null,icon:null,rejectIcon:null,acceptIcon:null,rejectClassName:null,acceptClassName:null,className:null,style:null,appendTo:null,dismissable:!0,footer:null,onShow:null,onHide:null,accept:null,reject:null,transitionOptions:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var t=e.context;return a.classNames("p-confirm-popup p-component",(0,e.getPropValue)("className"),{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===f.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===f.default.ripple})},acceptButton:function(e){return a.classNames("p-confirm-popup-accept p-button-sm",(0,e.getPropValue)("acceptClassName"))},rejectButton:function(e){var t=e.getPropValue;return a.classNames("p-confirm-popup-reject p-button-sm",{"p-button-text":!t("rejectClassName")},t("rejectClassName"))},content:"p-confirm-popup-content",icon:"p-confirm-popup-icon",message:"p-confirm-popup-message",footer:"p-confirm-popup-footer",transition:"p-connected-overlay"},styles:'\n@layer primereact {\n    .p-confirm-popup-flipped {\n        margin-top: 0;\n        margin-bottom: 10px;\n    }\n    \n    .p-confirm-popup:after, .p-confirm-popup:before {\n        bottom: 100%;\n        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n        content: " ";\n        height: 0;\n        width: 0;\n        position: absolute;\n        pointer-events: none;\n    }\n    \n    .p-confirm-popup:after {\n        border-width: 8px;\n        margin-left: -8px;\n    }\n    \n    .p-confirm-popup:before {\n        border-width: 10px;\n        margin-left: -10px;\n    }\n    \n    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n        bottom: auto;\n        top: 100%;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:after {\n        border-bottom-color: transparent;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:before {\n        border-bottom-color: transparent\n    }\n    \n    .p-confirm-popup .p-confirm-popup-content {\n        display: flex;\n        align-items: center;\n    }\n}\n'}}),h=function(e){var t=s.useRef(void 0);return s.useEffect((function(){t.current=e})),t.current},x=function(e,t,r){var n,o,c,i,u,l,p,f,m,d,v,b,y,g,j,E=(i=void 0===(c=(n={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}).target)?"document":c,u=n.type,l=n.listener,p=n.options,m=void 0===(f=n.when)||f,d=s.useRef(null),v=s.useRef(null),b=h(l),y=h(p),g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a.ObjectUtils.isNotEmpty(e.target)&&(j(),(e.when||m)&&(d.current=a.DomHandler.getTargetElement(e.target))),!v.current&&d.current&&(v.current=function(e){return l&&l(e)},d.current.addEventListener(u,v.current,p))},j=function(){v.current&&(d.current.removeEventListener(u,v.current,p),v.current=null)},s.useEffect((function(){m?d.current=a.DomHandler.getTargetElement(i):(j(),d.current=null)}),[i,m]),s.useEffect((function(){!v.current||""+b==""+l&&y===p||(j(),m&&g())}),[l,p,m]),o=function(){j()},s.useEffect((function(){return o}),[]),[g,j]),P=O(E,2),S=P[0],x=P[1];return s.useEffect((function(){if(t&&e.current)return S(),function(){x()}})),[e,r]};function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function N(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){var n,o,c;n=e,c=r[t],(o=P(o=t))in n?Object.defineProperty(n,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):n[o]=c})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var C=s.memo(s.forwardRef((function(e,l){var p=s.useContext(t.PrimeReactContext),d=S.getProps(e,p),v=O(s.useState(d.visible),2),b=v[0],y=v[1],g=O(s.useState(!1),2),j=g[0],E=g[1],P={props:d,state:{visible:b,reshow:j}},h=S.setMetaData(P),w=h.ptm,C=h.cx,I=h.isUnstyled;n.useHandleStyle(S.css.styles,I,{name:"confirmpopup"});var R=s.useRef(null),D=s.useRef(null),U=s.useRef(null),k=s.useRef(!1),H=s.useRef(null),B=s.useRef(null),L=s.useRef(null),T=s.useRef(!1),_=function(){return B.current||d},q=function(e){return(B.current||d)[e]},A=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return a.ObjectUtils.getPropValue(q(e),r)},V=q("acceptLabel")||t.localeOption("accept"),M=q("rejectLabel")||t.localeOption("reject");x(R,d.dismissable&&d.closeOnEscape,(function(e){$("hide")}));var J=O(c.useOverlayListener({target:q("target"),overlay:R,listener:function(e,t){t.valid&&("outside"===t.type?d.dismissable&&!k.current&&$("hide"):$("hide")),k.current=!1},when:b}),2),X=J[0],Z=J[1],z=function(){T.current||(T.current=!0,A("accept"),$("accept"))},K=function(){T.current||(T.current=!0,A("reject"),$("reject"))},Y=function(){var e=_();E(!1),e.group===d.group&&(y(!0),T.current=!1,H.current=function(e){!G(e.target)&&(k.current=!0)},i.OverlayService.on("overlay-click",H.current),L.current=document.activeElement)},$=function(e){y(!1),i.OverlayService.off("overlay-click",H.current),H.current=null,e&&A("onHide",e),a.DomHandler.focus(L.current),L.current=null},F=function(){if(q("target")){a.DomHandler.absolutePosition(R.current,q("target"));var e=a.DomHandler.getOffset(R.current),t=a.DomHandler.getOffset(q("target")),r=0;e.left<t.left&&(r=t.left-e.left),R.current.style.setProperty("--overlayArrowLeft","".concat(r,"px")),e.top<t.top&&!I()&&a.DomHandler.addClass(R.current,"p-confirm-popup-flipped")}},G=function(e){return R&&R.current&&!(R.current.isSameNode(e)||R.current.contains(e))},Q=function(e){if(e.tagKey===d.tagKey){var t=b!==e.visible;q("target")!==e.target&&!d.target?($(),B.current=e,E(!0)):t&&(B.current=e,e.visible?Y():$())}};s.useEffect((function(){d.visible?Y():$()}),[d.visible]),s.useEffect((function(){return d.target||d.message||i.OverlayService.on("confirm-popup",Q),function(){i.OverlayService.off("confirm-popup",Q)}}),[d.target]),c.useUpdateEffect((function(){j&&Y()}),[j]),c.useUnmountEffect((function(){H.current&&(i.OverlayService.off("overlay-click",H.current),H.current=null),i.OverlayService.off("confirm-popup",Q),a.ZIndexUtils.clear(R.current)})),s.useImperativeHandle(l,(function(){return{props:d,confirm:Q}}));var W,ee,te=function(){var e=a.classNames("p-confirm-popup-accept p-button-sm",q("acceptClassName")),t=a.classNames("p-confirm-popup-reject p-button-sm",{"p-button-text":!q("rejectClassName")},q("rejectClassName")),n=a.mergeProps({className:C("footer")},w("footer")),o=a.mergeProps({ref:U,label:M,icon:q("rejectIcon"),className:C("rejectButton",{getPropValue:q}),onClick:K,pt:w("rejectButton"),unstyled:d.unstyled,__parentMetadata:{parent:P}}),c=a.mergeProps({ref:D,label:V,icon:q("acceptIcon"),className:C("acceptButton",{getPropValue:q}),onClick:z,pt:w("acceptButton"),unstyled:d.unstyled,__parentMetadata:{parent:P}}),i=s.createElement("div",n,s.createElement(r.Button,o),s.createElement(r.Button,c));if(q("footer")){var u={accept:z,reject:K,className:"p-confirm-popup-footer",acceptClassName:e,rejectClassName:t,acceptLabel:V,rejectLabel:M,element:i,props:_()};return a.ObjectUtils.getJSXElement(q("footer"),u)}return i},re=a.mergeProps({ref:R,id:q("id"),className:C("root",{context:p,getPropValue:q}),style:q("style"),onClick:function(e){k.current=!0,i.OverlayService.emit("overlay-click",{originalEvent:e,target:q("target")})}},S.getOtherProps(d),w("root")),ne=a.mergeProps({classNames:C("transition"),in:b,timeout:{enter:120,exit:100},options:q("transitionOptions"),unmountOnExit:!0,onEnter:function(){a.ZIndexUtils.set("overlay",R.current,p&&p.autoZIndex||f.default.autoZIndex,p&&p.zIndex.overlay||f.default.zIndex.overlay),a.DomHandler.addStyles(R.current,{position:"absolute",top:"50%",left:"50%",marginTop:"10px"}),F()},onEntered:function(){X(),D.current&&D.current.focus(),A("onShow")},onExit:function(){Z()},onExited:function(){a.ZIndexUtils.clear(R.current),k.current=!1}},w("transition")),oe=null!=e&&e.content?(W=_(),ee={message:a.ObjectUtils.getJSXElement(q("message"),W),acceptBtnRef:D,rejectBtnRef:U,hide:$},s.createElement(o.CSSTransition,m({nodeRef:R},ne),s.createElement("div",re,a.ObjectUtils.getJSXElement(e.content,ee)))):function(){var e,t,r,n,c,i,u=(e=_(),t=a.ObjectUtils.getJSXElement(q("message"),e),r=a.mergeProps({className:C("icon")},w("icon")),n=a.IconUtils.getJSXIcon(q("icon"),N({},r),{props:e}),c=a.mergeProps({className:C("message")},w("message")),i=a.mergeProps({className:C("content")},w("content")),s.createElement("div",i,n,s.createElement("span",c,t))),l=te();return s.createElement(o.CSSTransition,m({nodeRef:R},ne),s.createElement("div",re,u,l))}();return s.createElement(u.Portal,{element:oe,appendTo:q("appendTo"),visible:q("visible")})})));C.displayName="ConfirmPopup",exports.ConfirmPopup=C,exports.confirmPopup=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(e=N(N({},e),{visible:void 0===e.visible||e.visible})).visible&&i.OverlayService.emit("confirm-popup",e);return{show:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i.OverlayService.emit("confirm-popup",N(N(N({},e),t),{visible:!0}))},hide:function(){i.OverlayService.emit("confirm-popup",{visible:!1})}}};

package/confirmpopup/confirmpopup.d.ts

@@ -137,6 +137,29 @@ interface ConfirmPopupOptions {
     [key: string]: any;
 }
 
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link ConfirmPopupProps.content}
+ */
+interface ContentProps {
+    /**
+     * Reference for the accept button. Used to focus the element and execute the action.
+     */
+    acceptBtnRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * Reference for the reject button. Used to focus the element and execute the action.
+     */
+    rejectBtnRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * Message value of confirm popup.
+     */
+    message: React.ReactNode | string;
+    /**
+     * Hide action of confirm popup.
+     */
+    hide(): void;
+}
+
 /**
  * Defines valid properties in ConfirmPopup component.
  * @group Properties
@@ -256,6 +279,12 @@ export interface ConfirmPopupProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Specifies a custom content for the dialog. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of dialog.
+     * @return {React.ReactNode}
+     */
+    content: React.ReactNode | ((props: ContentProps) => React.ReactNode);
 }
 
 /**

package/confirmpopup/confirmpopup.esm.js

@@ -206,6 +206,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] : {};
@@ -235,11 +236,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();
   });
@@ -328,6 +330,7 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   });
   var overlayRef = React.useRef(null);
   var acceptBtnRef = React.useRef(null);
+  var rejectBtnRef = React.useRef(null);
   var isPanelClicked = React.useRef(false);
   var overlayEventListener = React.useRef(null);
   var confirmProps = React.useRef(null);
@@ -388,16 +391,20 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }
   };
   var show = function show() {
-    // Remember the focused element before we opened the dialog
-    // so we can return focus to it once we close the dialog.
-    focusElementOnHide.current = document.activeElement;
-    setVisibleState(true);
+    var currentProps = getCurrentProps();
     setReshowState(false);
-    isCallbackExecuting.current = false;
-    overlayEventListener.current = function (e) {
-      !isOutsideClicked(e.target) && (isPanelClicked.current = true);
-    };
-    OverlayService.on('overlay-click', overlayEventListener.current);
+    if (currentProps.group === props.group) {
+      setVisibleState(true);
+      isCallbackExecuting.current = false;
+      overlayEventListener.current = function (e) {
+        !isOutsideClicked(e.target) && (isPanelClicked.current = true);
+      };
+      OverlayService.on('overlay-click', overlayEventListener.current);
+
+      // Remember the focused element before we opened the dialog
+      // so we can return focus to it once we close the dialog.
+      focusElementOnHide.current = document.activeElement;
+    }
   };
   var hide = function hide(result) {
     setVisibleState(false);
@@ -521,6 +528,7 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       className: cx('footer')
     }, ptm('footer'));
     var rejectButtonProps = mergeProps({
+      ref: rejectBtnRef,
       label: rejectLabel,
       icon: getPropValue('rejectIcon'),
       className: cx('rejectButton', {
@@ -564,38 +572,51 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }
     return content;
   };
+  var rootProps = mergeProps({
+    ref: overlayRef,
+    id: getPropValue('id'),
+    className: cx('root', {
+      context: context,
+      getPropValue: getPropValue
+    }),
+    style: getPropValue('style'),
+    onClick: onPanelClick
+  }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
+  var transitionProps = mergeProps({
+    classNames: cx('transition'),
+    "in": visibleState,
+    timeout: {
+      enter: 120,
+      exit: 100
+    },
+    options: getPropValue('transitionOptions'),
+    unmountOnExit: true,
+    onEnter: onEnter,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited
+  }, ptm('transition'));
+  var createTemplateElement = function createTemplateElement() {
+    var currentProps = getCurrentProps();
+    var message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+    var templateElementProps = {
+      message: message,
+      acceptBtnRef: acceptBtnRef,
+      rejectBtnRef: rejectBtnRef,
+      hide: hide
+    };
+    return /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      nodeRef: overlayRef
+    }, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, ObjectUtils.getJSXElement(inProps.content, templateElementProps)));
+  };
   var createElement = function createElement() {
     var content = createContent();
     var footer = createFooter();
-    var rootProps = mergeProps({
-      ref: overlayRef,
-      id: getPropValue('id'),
-      className: cx('root', {
-        context: context,
-        getPropValue: getPropValue
-      }),
-      style: getPropValue('style'),
-      onClick: onPanelClick
-    }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
-    var transitionProps = mergeProps({
-      classNames: cx('transition'),
-      "in": visibleState,
-      timeout: {
-        enter: 120,
-        exit: 100
-      },
-      options: getPropValue('transitionOptions'),
-      unmountOnExit: true,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited
-    }, ptm('transition'));
     return /*#__PURE__*/React.createElement(CSSTransition, _extends({
       nodeRef: overlayRef
     }, transitionProps), /*#__PURE__*/React.createElement("div", rootProps, content, footer));
   };
-  var element = createElement();
+  var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
   return /*#__PURE__*/React.createElement(Portal, {
     element: element,
     appendTo: getPropValue('appendTo'),

package/confirmpopup/confirmpopup.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import t,{PrimeReactContext as n,localeOption as r}from"primereact/api";import{Button as o}from"primereact/button";import{ComponentBase as c,useHandleStyle as i}from"primereact/componentbase";import{CSSTransition as u}from"primereact/csstransition";import{useOverlayListener as p,useUpdateEffect as a,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as s}from"primereact/overlayservice";import{Portal as f}from"primereact/portal";import{classNames as m,DomHandler as b,ObjectUtils as d,ZIndexUtils as v,mergeProps as y,IconUtils as g}from"primereact/utils";function j(){return j=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},j.apply(this,arguments)}function h(e){if(Array.isArray(e))return e}function E(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,c,i,u=[],p=!0,a=!1;try{if(c=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;p=!1}else for(;!(p=(r=c.call(n)).done)&&(u.push(r.value),u.length!==t);p=!0);}catch(e){a=!0,o=e}finally{try{if(!p&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(a)throw o}}return u}}function O(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 w(e,t){if(e){if("string"==typeof e)return O(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)?O(e,t):void 0}}function P(){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 S(e,t){return h(e)||E(e,t)||w(e,t)||P()}function x(e){return x="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},x(e)}function N(e,t){if("object"!==x(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==x(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function C(e){var t=N(e,"string");return"symbol"===x(t)?t:String(t)}var I=c.extend({defaultProps:{__TYPE:"ConfirmPopup",tagKey:void 0,target:null,visible:!1,message:null,rejectLabel:null,acceptLabel:null,icon:null,rejectIcon:null,acceptIcon:null,rejectClassName:null,acceptClassName:null,className:null,style:null,appendTo:null,dismissable:!0,footer:null,onShow:null,onHide:null,accept:null,reject:null,transitionOptions:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var n=e.context;return m("p-confirm-popup p-component",(0,e.getPropValue)("className"),{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===t.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===t.ripple})},acceptButton:function(e){return m("p-confirm-popup-accept p-button-sm",(0,e.getPropValue)("acceptClassName"))},rejectButton:function(e){var t=e.getPropValue;return m("p-confirm-popup-reject p-button-sm",{"p-button-text":!t("rejectClassName")},t("rejectClassName"))},content:"p-confirm-popup-content",icon:"p-confirm-popup-icon",message:"p-confirm-popup-message",footer:"p-confirm-popup-footer",transition:"p-connected-overlay"},styles:'\n@layer primereact {\n    .p-confirm-popup-flipped {\n        margin-top: 0;\n        margin-bottom: 10px;\n    }\n    \n    .p-confirm-popup:after, .p-confirm-popup:before {\n        bottom: 100%;\n        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n        content: " ";\n        height: 0;\n        width: 0;\n        position: absolute;\n        pointer-events: none;\n    }\n    \n    .p-confirm-popup:after {\n        border-width: 8px;\n        margin-left: -8px;\n    }\n    \n    .p-confirm-popup:before {\n        border-width: 10px;\n        margin-left: -10px;\n    }\n    \n    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n        bottom: auto;\n        top: 100%;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:after {\n        border-bottom-color: transparent;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:before {\n        border-bottom-color: transparent\n    }\n    \n    .p-confirm-popup .p-confirm-popup-content {\n        display: flex;\n        align-items: center;\n    }\n}\n'}}),k=function(t){var n,r,o,c=t.target,i=void 0===c?"document":c,u=t.type,p=t.listener,a=t.options,l=t.when,s=void 0===l||l,f=e.useRef(null),m=e.useRef(null),v=(n=a,r=e.useRef(void 0),e.useEffect((function(){r.current=n})),r.current),y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};d.isNotEmpty(e.target)&&(g(),(e.when||s)&&(f.current=b.getTargetElement(e.target))),!m.current&&f.current&&(m.current=function(e){return p&&p(e)},f.current.addEventListener(u,m.current,a))},g=function(){m.current&&(f.current.removeEventListener(u,m.current,a),m.current=null)};return e.useEffect((function(){s?f.current=b.getTargetElement(i):(g(),f.current=null)}),[i,s]),e.useEffect((function(){!m.current||m.current===p&&v===a||(g(),s&&y())}),[p,a]),o=function(){g()},e.useEffect((function(){return o}),[]),[y,g]},R=function(t,n,r){var o=S(k({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}),2),c=o[0],i=o[1];return e.useEffect((function(){if(n&&t.current)return c(),function(){i()}})),[t,r]};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 A(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){var r,o,c;r=e,c=n[t],(o=C(o=t))in r?Object.defineProperty(r,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):r[o]=c})):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 T=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(e=A(A({},e),{visible:void 0===e.visible||e.visible})).visible&&s.emit("confirm-popup",e);return{show:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s.emit("confirm-popup",A(A(A({},e),t),{visible:!0}))},hide:function(){s.emit("confirm-popup",{visible:!1})}}},V=e.memo(e.forwardRef((function(c,h){var E=e.useContext(n),O=I.getProps(c,E),w=S(e.useState(O.visible),2),P=w[0],x=w[1],N=S(e.useState(!1),2),C=N[0],k=N[1],L={props:O,state:{visible:P,reshow:C}},T=I.setMetaData(L),V=T.ptm,B=T.cx,_=T.isUnstyled;i(I.css.styles,_,{name:"confirmpopup"});var D=e.useRef(null),M=e.useRef(null),H=e.useRef(!1),J=e.useRef(null),K=e.useRef(null),U=e.useRef(null),X=e.useRef(!1),z=function(){return K.current||O},Z=function(e){return(K.current||O)[e]},Y=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return d.getPropValue(Z(e),n)},$=Z("acceptLabel")||r("accept"),q=Z("rejectLabel")||r("reject");R(D,O.dismissable&&O.closeOnEscape,(function(e){re("hide")}));var F=S(p({target:Z("target"),overlay:D,listener:function(e,t){t.valid&&("outside"===t.type?O.dismissable&&!H.current&&re("hide"):re("hide")),H.current=!1},when:P}),2),G=F[0],Q=F[1],W=function(e){H.current=!0,s.emit("overlay-click",{originalEvent:e,target:Z("target")})},ee=function(){X.current||(X.current=!0,Y("accept"),re("accept"))},te=function(){X.current||(X.current=!0,Y("reject"),re("reject"))},ne=function(){U.current=document.activeElement,x(!0),k(!1),X.current=!1,J.current=function(e){!ae(e.target)&&(H.current=!0)},s.on("overlay-click",J.current)},re=function(e){x(!1),s.off("overlay-click",J.current),J.current=null,e&&Y("onHide",e),b.focus(U.current),U.current=null},oe=function(){v.set("overlay",D.current,E&&E.autoZIndex||t.autoZIndex,E&&E.zIndex.overlay||t.zIndex.overlay),b.addStyles(D.current,{position:"absolute",top:"50%",left:"50%",marginTop:"10px"}),pe()},ce=function(){G(),M.current&&M.current.focus(),Y("onShow")},ie=function(){Q()},ue=function(){v.clear(D.current),H.current=!1},pe=function(){if(Z("target")){b.absolutePosition(D.current,Z("target"));var e=b.getOffset(D.current),t=b.getOffset(Z("target")),n=0;e.left<t.left&&(n=t.left-e.left),D.current.style.setProperty("--overlayArrowLeft","".concat(n,"px")),e.top<t.top&&!_()&&b.addClass(D.current,"p-confirm-popup-flipped")}},ae=function(e){return D&&D.current&&!(D.current.isSameNode(e)||D.current.contains(e))},le=function(e){if(e.tagKey===O.tagKey){var t=P!==e.visible;Z("target")!==e.target&&!O.target?(re(),K.current=e,k(!0)):t&&(K.current=e,e.visible?ne():re())}};e.useEffect((function(){O.visible?ne():re()}),[O.visible]),e.useEffect((function(){return O.target||O.message||s.on("confirm-popup",le),function(){s.off("confirm-popup",le)}}),[O.target]),a((function(){C&&ne()}),[C]),l((function(){J.current&&(s.off("overlay-click",J.current),J.current=null),s.off("confirm-popup",le),v.clear(D.current)})),e.useImperativeHandle(h,(function(){return{props:O,confirm:le}}));var se,fe,me,be,de,ve,ye,ge,je,he,Ee=function(){var t=m("p-confirm-popup-accept p-button-sm",Z("acceptClassName")),n=m("p-confirm-popup-reject p-button-sm",{"p-button-text":!Z("rejectClassName")},Z("rejectClassName")),r=y({className:B("footer")},V("footer")),c=y({label:q,icon:Z("rejectIcon"),className:B("rejectButton",{getPropValue:Z}),onClick:te,pt:V("rejectButton"),unstyled:O.unstyled,__parentMetadata:{parent:L}}),i=y({ref:M,label:$,icon:Z("acceptIcon"),className:B("acceptButton",{getPropValue:Z}),onClick:ee,pt:V("acceptButton"),unstyled:O.unstyled,__parentMetadata:{parent:L}}),u=e.createElement("div",r,e.createElement(o,c),e.createElement(o,i));if(Z("footer")){var p={accept:ee,reject:te,className:"p-confirm-popup-footer",acceptClassName:t,rejectClassName:n,acceptLabel:$,rejectLabel:q,element:u,props:z()};return d.getJSXElement(Z("footer"),p)}return u},Oe=(se=z(),fe=d.getJSXElement(Z("message"),se),me=y({className:B("icon")},V("icon")),be=g.getJSXIcon(Z("icon"),A({},me),{props:se}),de=y({className:B("message")},V("message")),ve=y({className:B("content")},V("content")),ye=e.createElement("div",ve,be,e.createElement("span",de,fe)),ge=Ee(),je=y({ref:D,id:Z("id"),className:B("root",{context:E,getPropValue:Z}),style:Z("style"),onClick:W},I.getOtherProps(O),V("root")),he=y({classNames:B("transition"),in:P,timeout:{enter:120,exit:100},options:Z("transitionOptions"),unmountOnExit:!0,onEnter:oe,onEntered:ce,onExit:ie,onExited:ue},V("transition")),e.createElement(u,j({nodeRef:D},he),e.createElement("div",je,ye,ge)));return e.createElement(f,{element:Oe,appendTo:Z("appendTo"),visible:Z("visible")})})));V.displayName="ConfirmPopup";export{V as ConfirmPopup,T as confirmPopup};
+import*as e from"react";import t,{PrimeReactContext as n,localeOption as r}from"primereact/api";import{Button as o}from"primereact/button";import{ComponentBase as c,useHandleStyle as i}from"primereact/componentbase";import{CSSTransition as u}from"primereact/csstransition";import{useOverlayListener as a,useUpdateEffect as p,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as s}from"primereact/overlayservice";import{Portal as f}from"primereact/portal";import{classNames as m,DomHandler as d,ObjectUtils as b,ZIndexUtils as v,mergeProps as y,IconUtils as g}from"primereact/utils";function j(){return j=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},j.apply(this,arguments)}function E(e){if(Array.isArray(e))return e}function h(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,c,i,u=[],a=!0,p=!1;try{if(c=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=c.call(n)).done)&&(u.push(r.value),u.length!==t);a=!0);}catch(e){p=!0,o=e}finally{try{if(!a&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(p)throw o}}return u}}function O(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 w(e,t){if(e){if("string"==typeof e)return O(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)?O(e,t):void 0}}function P(){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 S(e,t){return E(e)||h(e,t)||w(e,t)||P()}function x(e){return x="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},x(e)}function N(e,t){if("object"!==x(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==x(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function C(e){var t=N(e,"string");return"symbol"===x(t)?t:String(t)}var R=c.extend({defaultProps:{__TYPE:"ConfirmPopup",tagKey:void 0,target:null,visible:!1,message:null,rejectLabel:null,acceptLabel:null,icon:null,rejectIcon:null,acceptIcon:null,rejectClassName:null,acceptClassName:null,className:null,style:null,appendTo:null,dismissable:!0,footer:null,onShow:null,onHide:null,accept:null,reject:null,transitionOptions:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var n=e.context;return m("p-confirm-popup p-component",(0,e.getPropValue)("className"),{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===t.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===t.ripple})},acceptButton:function(e){return m("p-confirm-popup-accept p-button-sm",(0,e.getPropValue)("acceptClassName"))},rejectButton:function(e){var t=e.getPropValue;return m("p-confirm-popup-reject p-button-sm",{"p-button-text":!t("rejectClassName")},t("rejectClassName"))},content:"p-confirm-popup-content",icon:"p-confirm-popup-icon",message:"p-confirm-popup-message",footer:"p-confirm-popup-footer",transition:"p-connected-overlay"},styles:'\n@layer primereact {\n    .p-confirm-popup-flipped {\n        margin-top: 0;\n        margin-bottom: 10px;\n    }\n    \n    .p-confirm-popup:after, .p-confirm-popup:before {\n        bottom: 100%;\n        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n        content: " ";\n        height: 0;\n        width: 0;\n        position: absolute;\n        pointer-events: none;\n    }\n    \n    .p-confirm-popup:after {\n        border-width: 8px;\n        margin-left: -8px;\n    }\n    \n    .p-confirm-popup:before {\n        border-width: 10px;\n        margin-left: -10px;\n    }\n    \n    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n        bottom: auto;\n        top: 100%;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:after {\n        border-bottom-color: transparent;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:before {\n        border-bottom-color: transparent\n    }\n    \n    .p-confirm-popup .p-confirm-popup-content {\n        display: flex;\n        align-items: center;\n    }\n}\n'}}),I=function(t){var n=e.useRef(void 0);return e.useEffect((function(){n.current=t})),n.current},k=function(t,n,r){var o,c,i,u,a,p,l,s,f,m,v,y,g,j,E,h=(u=void 0===(i=(o={type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),r(e))}}).target)?"document":i,a=o.type,p=o.listener,l=o.options,f=void 0===(s=o.when)||s,m=e.useRef(null),v=e.useRef(null),y=I(p),g=I(l),j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};b.isNotEmpty(e.target)&&(E(),(e.when||f)&&(m.current=d.getTargetElement(e.target))),!v.current&&m.current&&(v.current=function(e){return p&&p(e)},m.current.addEventListener(a,v.current,l))},E=function(){v.current&&(m.current.removeEventListener(a,v.current,l),v.current=null)},e.useEffect((function(){f?m.current=d.getTargetElement(u):(E(),m.current=null)}),[u,f]),e.useEffect((function(){!v.current||""+y==""+p&&g===l||(E(),f&&j())}),[p,l,f]),c=function(){E()},e.useEffect((function(){return c}),[]),[j,E]),O=S(h,2),w=O[0],P=O[1];return e.useEffect((function(){if(n&&t.current)return w(),function(){P()}})),[t,r]};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 A(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){var r,o,c;r=e,c=n[t],(o=C(o=t))in r?Object.defineProperty(r,o,{value:c,enumerable:!0,configurable:!0,writable:!0}):r[o]=c})):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 T=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(e=A(A({},e),{visible:void 0===e.visible||e.visible})).visible&&s.emit("confirm-popup",e);return{show:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s.emit("confirm-popup",A(A(A({},e),t),{visible:!0}))},hide:function(){s.emit("confirm-popup",{visible:!1})}}},B=e.memo(e.forwardRef((function(c,E){var h=e.useContext(n),O=R.getProps(c,h),w=S(e.useState(O.visible),2),P=w[0],x=w[1],N=S(e.useState(!1),2),C=N[0],I=N[1],L={props:O,state:{visible:P,reshow:C}},T=R.setMetaData(L),B=T.ptm,V=T.cx,_=T.isUnstyled;i(R.css.styles,_,{name:"confirmpopup"});var D=e.useRef(null),J=e.useRef(null),X=e.useRef(null),M=e.useRef(!1),H=e.useRef(null),K=e.useRef(null),U=e.useRef(null),z=e.useRef(!1),Z=function(){return K.current||O},Y=function(e){return(K.current||O)[e]},$=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return b.getPropValue(Y(e),n)},q=Y("acceptLabel")||r("accept"),F=Y("rejectLabel")||r("reject");k(D,O.dismissable&&O.closeOnEscape,(function(e){re("hide")}));var G=S(a({target:Y("target"),overlay:D,listener:function(e,t){t.valid&&("outside"===t.type?O.dismissable&&!M.current&&re("hide"):re("hide")),M.current=!1},when:P}),2),Q=G[0],W=G[1],ee=function(){z.current||(z.current=!0,$("accept"),re("accept"))},te=function(){z.current||(z.current=!0,$("reject"),re("reject"))},ne=function(){var e=Z();I(!1),e.group===O.group&&(x(!0),z.current=!1,H.current=function(e){!ce(e.target)&&(M.current=!0)},s.on("overlay-click",H.current),U.current=document.activeElement)},re=function(e){x(!1),s.off("overlay-click",H.current),H.current=null,e&&$("onHide",e),d.focus(U.current),U.current=null},oe=function(){if(Y("target")){d.absolutePosition(D.current,Y("target"));var e=d.getOffset(D.current),t=d.getOffset(Y("target")),n=0;e.left<t.left&&(n=t.left-e.left),D.current.style.setProperty("--overlayArrowLeft","".concat(n,"px")),e.top<t.top&&!_()&&d.addClass(D.current,"p-confirm-popup-flipped")}},ce=function(e){return D&&D.current&&!(D.current.isSameNode(e)||D.current.contains(e))},ie=function(e){if(e.tagKey===O.tagKey){var t=P!==e.visible;Y("target")!==e.target&&!O.target?(re(),K.current=e,I(!0)):t&&(K.current=e,e.visible?ne():re())}};e.useEffect((function(){O.visible?ne():re()}),[O.visible]),e.useEffect((function(){return O.target||O.message||s.on("confirm-popup",ie),function(){s.off("confirm-popup",ie)}}),[O.target]),p((function(){C&&ne()}),[C]),l((function(){H.current&&(s.off("overlay-click",H.current),H.current=null),s.off("confirm-popup",ie),v.clear(D.current)})),e.useImperativeHandle(E,(function(){return{props:O,confirm:ie}}));var ue,ae,pe=function(){var t=m("p-confirm-popup-accept p-button-sm",Y("acceptClassName")),n=m("p-confirm-popup-reject p-button-sm",{"p-button-text":!Y("rejectClassName")},Y("rejectClassName")),r=y({className:V("footer")},B("footer")),c=y({ref:X,label:F,icon:Y("rejectIcon"),className:V("rejectButton",{getPropValue:Y}),onClick:te,pt:B("rejectButton"),unstyled:O.unstyled,__parentMetadata:{parent:L}}),i=y({ref:J,label:q,icon:Y("acceptIcon"),className:V("acceptButton",{getPropValue:Y}),onClick:ee,pt:B("acceptButton"),unstyled:O.unstyled,__parentMetadata:{parent:L}}),u=e.createElement("div",r,e.createElement(o,c),e.createElement(o,i));if(Y("footer")){var a={accept:ee,reject:te,className:"p-confirm-popup-footer",acceptClassName:t,rejectClassName:n,acceptLabel:q,rejectLabel:F,element:u,props:Z()};return b.getJSXElement(Y("footer"),a)}return u},le=y({ref:D,id:Y("id"),className:V("root",{context:h,getPropValue:Y}),style:Y("style"),onClick:function(e){M.current=!0,s.emit("overlay-click",{originalEvent:e,target:Y("target")})}},R.getOtherProps(O),B("root")),se=y({classNames:V("transition"),in:P,timeout:{enter:120,exit:100},options:Y("transitionOptions"),unmountOnExit:!0,onEnter:function(){v.set("overlay",D.current,h&&h.autoZIndex||t.autoZIndex,h&&h.zIndex.overlay||t.zIndex.overlay),d.addStyles(D.current,{position:"absolute",top:"50%",left:"50%",marginTop:"10px"}),oe()},onEntered:function(){Q(),J.current&&J.current.focus(),$("onShow")},onExit:function(){W()},onExited:function(){v.clear(D.current),M.current=!1}},B("transition")),fe=null!=c&&c.content?(ue=Z(),ae={message:b.getJSXElement(Y("message"),ue),acceptBtnRef:J,rejectBtnRef:X,hide:re},e.createElement(u,j({nodeRef:D},se),e.createElement("div",le,b.getJSXElement(c.content,ae)))):function(){var t,n,r,o,c,i,a=(t=Z(),n=b.getJSXElement(Y("message"),t),r=y({className:V("icon")},B("icon")),o=g.getJSXIcon(Y("icon"),A({},r),{props:t}),c=y({className:V("message")},B("message")),i=y({className:V("content")},B("content")),e.createElement("div",i,o,e.createElement("span",c,n))),p=pe();return e.createElement(u,j({nodeRef:D},se),e.createElement("div",le,a,p))}();return e.createElement(f,{element:fe,appendTo:Y("appendTo"),visible:Y("visible")})})));B.displayName="ConfirmPopup";export{B as ConfirmPopup,T as confirmPopup};

package/confirmpopup/confirmpopup.js

@@ -222,6 +222,7 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
       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] : {};
@@ -251,11 +252,12 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
       }
     }, [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();
     });
@@ -344,6 +346,7 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
     });
     var overlayRef = React__namespace.useRef(null);
     var acceptBtnRef = React__namespace.useRef(null);
+    var rejectBtnRef = React__namespace.useRef(null);
     var isPanelClicked = React__namespace.useRef(false);
     var overlayEventListener = React__namespace.useRef(null);
     var confirmProps = React__namespace.useRef(null);
@@ -404,16 +407,20 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
       }
     };
     var show = function show() {
-      // Remember the focused element before we opened the dialog
-      // so we can return focus to it once we close the dialog.
-      focusElementOnHide.current = document.activeElement;
-      setVisibleState(true);
+      var currentProps = getCurrentProps();
       setReshowState(false);
-      isCallbackExecuting.current = false;
-      overlayEventListener.current = function (e) {
-        !isOutsideClicked(e.target) && (isPanelClicked.current = true);
-      };
-      overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
+      if (currentProps.group === props.group) {
+        setVisibleState(true);
+        isCallbackExecuting.current = false;
+        overlayEventListener.current = function (e) {
+          !isOutsideClicked(e.target) && (isPanelClicked.current = true);
+        };
+        overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
+
+        // Remember the focused element before we opened the dialog
+        // so we can return focus to it once we close the dialog.
+        focusElementOnHide.current = document.activeElement;
+      }
     };
     var hide = function hide(result) {
       setVisibleState(false);
@@ -537,6 +544,7 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
         className: cx('footer')
       }, ptm('footer'));
       var rejectButtonProps = utils.mergeProps({
+        ref: rejectBtnRef,
         label: rejectLabel,
         icon: getPropValue('rejectIcon'),
         className: cx('rejectButton', {
@@ -580,38 +588,51 @@ this.primereact.confirmpopup = (function (exports, React, PrimeReact, button, co
       }
       return content;
     };
+    var rootProps = utils.mergeProps({
+      ref: overlayRef,
+      id: getPropValue('id'),
+      className: cx('root', {
+        context: context,
+        getPropValue: getPropValue
+      }),
+      style: getPropValue('style'),
+      onClick: onPanelClick
+    }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
+    var transitionProps = utils.mergeProps({
+      classNames: cx('transition'),
+      "in": visibleState,
+      timeout: {
+        enter: 120,
+        exit: 100
+      },
+      options: getPropValue('transitionOptions'),
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited
+    }, ptm('transition'));
+    var createTemplateElement = function createTemplateElement() {
+      var currentProps = getCurrentProps();
+      var message = utils.ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+      var templateElementProps = {
+        message: message,
+        acceptBtnRef: acceptBtnRef,
+        rejectBtnRef: rejectBtnRef,
+        hide: hide
+      };
+      return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+        nodeRef: overlayRef
+      }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, utils.ObjectUtils.getJSXElement(inProps.content, templateElementProps)));
+    };
     var createElement = function createElement() {
       var content = createContent();
       var footer = createFooter();
-      var rootProps = utils.mergeProps({
-        ref: overlayRef,
-        id: getPropValue('id'),
-        className: cx('root', {
-          context: context,
-          getPropValue: getPropValue
-        }),
-        style: getPropValue('style'),
-        onClick: onPanelClick
-      }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
-      var transitionProps = utils.mergeProps({
-        classNames: cx('transition'),
-        "in": visibleState,
-        timeout: {
-          enter: 120,
-          exit: 100
-        },
-        options: getPropValue('transitionOptions'),
-        unmountOnExit: true,
-        onEnter: onEnter,
-        onEntered: onEntered,
-        onExit: onExit,
-        onExited: onExited
-      }, ptm('transition'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
         nodeRef: overlayRef
       }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", rootProps, content, footer));
     };
-    var element = createElement();
+    var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
       element: element,
       appendTo: getPropValue('appendTo'),