primereact 8.7.2 → 9.0.0-beta.1

package/overlaypanel/overlaypanel.d.ts

@@ -1,31 +1,105 @@
+/**
+ *
+ * OverlayPanel, also known as Popover, is a container component that can overlay other components on page.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/overlaypanel)
+ *
+ * @module overlaypanel
+ *
+ */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 
-type OverlayPanelEventType = React.SyntheticEvent | undefined | null;
-
-type OverlayPanelTargetType = HTMLElement | EventTarget | undefined | null;
-
-type OverlayPanelAppendToType = 'self' | HTMLElement | undefined | null;
-
+/**
+ * Custom overlay panel breakpoints
+ * @group Misc
+ */
 interface OverlayPanelBreakpoints {
+    /**
+     *  A key-value pair representing a breakpoint and its associated value.
+     */
     [key: string]: string;
 }
 
+/**
+ * Defines valid properties in OverlayPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface OverlayPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    dismissable?: boolean;
-    showCloseIcon?: boolean;
-    appendTo?: OverlayPanelAppendToType;
-    ariaCloseLabel?: string;
-    breakpoints?: OverlayPanelBreakpoints;
-    transitionOptions?: CSSTransitionProps;
+    /**
+     * Enables to hide the overlay when outside is clicked.
+     * @defaultValue true
+     */
+    dismissable?: boolean | undefined;
+    /**
+     * When enabled, displays a close icon at top right corner.
+     * @defaultValue false
+     */
+    showCloseIcon?: boolean | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null;
+    /**
+     * Aria label of the close icon.
+     * @defaultValue close
+     */
+    ariaCloseLabel?: string | undefined;
+    /**
+     * Object literal to define widths per screen size.
+     */
+    breakpoints?: OverlayPanelBreakpoints | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when overlay becomes visible.
+     */
     onShow?(): void;
+    /**
+     * Callback to invoke when overlay becomes hidden.
+     */
     onHide?(): void;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - OverlayPanel**
+ *
+ * _OverlayPanel, also known as Popover, is a container component that can overlay other components on page._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/overlaypanel/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class OverlayPanel extends React.Component<OverlayPanelProps, any> {
-    public toggle(event: OverlayPanelEventType, target?: OverlayPanelTargetType): void;
-    public show(event: OverlayPanelEventType, target: OverlayPanelTargetType): void;
+    /**
+     * Toggles the visiblity of the overlay.
+     * @param {React.SyntheticEvent | undefined | null} event - Browser event.
+     * @param {HTMLElement | EventTarget | undefined | null} target - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent | undefined | null, target?: HTMLElement | EventTarget | undefined | null): void;
+    /**
+     * Shows the overlay.
+     * @param {React.SyntheticEvent | undefined | null} event - Browser event.
+     * @param {HTMLElement | EventTarget | undefined | null} target - Browser event.
+     */
+    public show(event: React.SyntheticEvent | undefined | null, target: HTMLElement | EventTarget | undefined | null): void;
+    /**
+     * Hides the overlay.
+     */
     public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/overlaypanel/overlaypanel.esm.js

@@ -11,14 +11,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -29,42 +27,40 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 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];
   }
-
   return arr2;
 }
 
@@ -87,49 +83,41 @@ function _slicedToArray(arr, i) {
 
 var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      visibleState = _React$useState2[0],
-      setVisibleState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visibleState = _React$useState2[0],
+    setVisibleState = _React$useState2[1];
   var attributeSelector = React.useRef('');
   var overlayRef = React.useRef(null);
   var currentTargetRef = React.useRef(null);
   var isPanelClicked = React.useRef(false);
   var styleElement = React.useRef(null);
   var overlayEventListener = React.useRef(null);
-
   var _useOverlayListener = useOverlayListener({
-    target: currentTargetRef,
-    overlay: overlayRef,
-    listener: function listener(event, _ref) {
-      var type = _ref.type,
+      target: currentTargetRef,
+      overlay: overlayRef,
+      listener: function listener(event, _ref) {
+        var type = _ref.type,
           valid = _ref.valid;
-
-      if (valid) {
-        type === 'outside' ? props.dismissable && !isPanelClicked.current && hide() : hide();
-      }
-
-      isPanelClicked.current = false;
-    },
-    when: visibleState
-  }),
-      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-      bindOverlayListener = _useOverlayListener2[0],
-      unbindOverlayListener = _useOverlayListener2[1];
-
+        if (valid) {
+          type === 'outside' ? props.dismissable && !isPanelClicked.current && hide() : hide();
+        }
+        isPanelClicked.current = false;
+      },
+      when: visibleState
+    }),
+    _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+    bindOverlayListener = _useOverlayListener2[0],
+    unbindOverlayListener = _useOverlayListener2[1];
   var isOutsideClicked = function isOutsideClicked(target) {
     return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
   };
-
   var hasTargetChanged = function hasTargetChanged(event, target) {
     return currentTargetRef.current != null && currentTargetRef.current !== (target || event.currentTarget || event.target);
   };
-
   var onCloseClick = function onCloseClick(event) {
     hide();
     event.preventDefault();
   };
-
   var onPanelClick = function onPanelClick(event) {
     isPanelClicked.current = true;
     OverlayService.emit('overlay-click', {
@@ -137,15 +125,12 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       target: currentTargetRef.current
     });
   };
-
   var onContentClick = function onContentClick() {
     isPanelClicked.current = true;
   };
-
   var toggle = function toggle(event, target) {
     if (visibleState) {
       hide();
-
       if (hasTargetChanged(event, target)) {
         currentTargetRef.current = target || event.currentTarget || event.target;
         setTimeout(function () {
@@ -156,96 +141,76 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       show(event, target);
     }
   };
-
   var show = function show(event, target) {
     currentTargetRef.current = target || event.currentTarget || event.target;
-
     if (visibleState) {
       align();
     } else {
       setVisibleState(true);
-
       overlayEventListener.current = function (e) {
         !isOutsideClicked(e.target) && (isPanelClicked.current = true);
       };
-
       OverlayService.on('overlay-click', overlayEventListener.current);
     }
   };
-
   var hide = function hide() {
     setVisibleState(false);
     OverlayService.off('overlay-click', overlayEventListener.current);
     overlayEventListener.current = null;
   };
-
   var onEnter = function onEnter() {
     overlayRef.current.setAttribute(attributeSelector.current, '');
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
     align();
   };
-
   var onEntered = function onEntered() {
     bindOverlayListener();
     props.onShow && props.onShow();
   };
-
   var onExit = function onExit() {
     unbindOverlayListener();
   };
-
   var onExited = function onExited() {
     ZIndexUtils.clear(overlayRef.current);
     props.onHide && props.onHide();
   };
-
   var align = function align() {
     if (currentTargetRef.current && overlayRef.current) {
       DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
       var containerOffset = DomHandler.getOffset(overlayRef.current);
       var targetOffset = DomHandler.getOffset(currentTargetRef.current);
       var arrowLeft = 0;
-
       if (containerOffset.left < targetOffset.left) {
         arrowLeft = targetOffset.left - containerOffset.left;
       }
-
       overlayRef.current.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
-
       if (containerOffset.top < targetOffset.top) {
         DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
       }
     }
   };
-
   var createStyle = function createStyle() {
     if (!styleElement.current) {
       styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
       var innerHTML = '';
-
       for (var breakpoint in props.breakpoints) {
         innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
       }
-
       styleElement.current.innerHTML = innerHTML;
     }
   };
-
   useMountEffect(function () {
     attributeSelector.current = UniqueComponentId();
-
     if (props.breakpoints) {
       createStyle();
     }
   });
   useUnmountEffect(function () {
     styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
-
     if (overlayEventListener.current) {
       OverlayService.off('overlay-click', overlayEventListener.current);
       overlayEventListener.current = null;
     }
-
     ZIndexUtils.clear(overlayRef.current);
   });
   React.useImperativeHandle(ref, function () {
@@ -259,7 +224,6 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-
   var createCloseIcon = function createCloseIcon() {
     if (props.showCloseIcon) {
       var ariaLabel = props.ariaCloseLabel || localeOption('close');
@@ -273,13 +237,14 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createElement = function createElement() {
     var otherProps = ObjectUtils.findDiffKeys(props, OverlayPanel.defaultProps);
-    var className = classNames('p-overlaypanel p-component', props.className);
+    var className = classNames('p-overlaypanel p-component', props.className, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var closeIcon = createCloseIcon();
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: overlayRef,
@@ -308,7 +273,6 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onMouseDown: onContentClick
     }, props.children), closeIcon));
   };
-
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
     element: element,

package/overlaypanel/overlaypanel.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import r,{localeOption as n}from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useOverlayListener as o,useMountEffect as a,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{Ripple as u}from"primereact/ripple";import{UniqueComponentId as s,DomHandler as f,ZIndexUtils as p,ObjectUtils as m,classNames as y}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},d.apply(this,arguments)}function v(e){if(Array.isArray(e))return e}function b(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,a=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);l=!0);}catch(e){i=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(i)throw o}}return a}}function h(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function g(e,r){if(e){if("string"==typeof e)return h(e,r);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)?h(e,r):void 0}}function w(){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 E(e,r){return v(e)||b(e,r)||g(e,r)||w()}var k=e.forwardRef((function(v,b){var h=E(e.useState(!1),2),g=h[0],w=h[1],O=e.useRef(""),S=e.useRef(null),x=e.useRef(null),I=e.useRef(!1),T=e.useRef(null),C=e.useRef(null),N=E(o({target:x,overlay:S,listener:function(e,r){r.valid&&("outside"===r.type?v.dismissable&&!I.current&&z():z()),I.current=!1},when:g}),2),A=N[0],P=N[1],R=function(e){return S&&S.current&&!(S.current.isSameNode(e)||S.current.contains(e))},j=function(e,r){return null!=x.current&&x.current!==(r||e.currentTarget||e.target)},H=function(e){z(),e.preventDefault()},L=function(e){I.current=!0,i.emit("overlay-click",{originalEvent:e,target:x.current})},D=function(){I.current=!0},M=function(e,r){g?(z(),j(e,r)&&(x.current=r||e.currentTarget||e.target,setTimeout((function(){_(e,x.current)}),200))):_(e,r)},_=function(e,r){x.current=r||e.currentTarget||e.target,g?$():(w(!0),C.current=function(e){!R(e.target)&&(I.current=!0)},i.on("overlay-click",C.current))},z=function(){w(!1),i.off("overlay-click",C.current),C.current=null},K=function(){S.current.setAttribute(O.current,""),p.set("overlay",S.current,r.autoZIndex,r.zIndex.overlay),$()},U=function(){A(),v.onShow&&v.onShow()},Y=function(){P()},Z=function(){p.clear(S.current),v.onHide&&v.onHide()},$=function(){if(x.current&&S.current){f.absolutePosition(S.current,x.current);var e=f.getOffset(S.current),r=f.getOffset(x.current),n=0;e.left<r.left&&(n=r.left-e.left),S.current.style.setProperty("--overlayArrowLeft","".concat(n,"px")),e.top<r.top&&f.addClass(S.current,"p-overlaypanel-flipped")}},q=function(){if(!T.current){T.current=f.createInlineStyle(r.nonce);var e="";for(var n in v.breakpoints)e+="\n                    @media screen and (max-width: ".concat(n,") {\n                        .p-overlaypanel[").concat(O.current,"] {\n                            width: ").concat(v.breakpoints[n]," !important;\n                        }\n                    }\n                ");T.current.innerHTML=e}};a((function(){O.current=s(),v.breakpoints&&q()})),l((function(){T.current=f.removeInlineStyle(T.current),C.current&&(i.off("overlay-click",C.current),C.current=null),p.clear(S.current)})),e.useImperativeHandle(b,(function(){return{props:v,toggle:M,show:_,hide:z,getElement:function(){return S.current}}}));var B,F,G,J=function(){if(v.showCloseIcon){var r=v.ariaCloseLabel||n("close");return e.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:H,"aria-label":r},e.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(u,null))}return null},Q=(B=m.findDiffKeys(v,k.defaultProps),F=y("p-overlaypanel p-component",v.className),G=J(),e.createElement(t,{nodeRef:S,classNames:"p-overlaypanel",in:g,timeout:{enter:120,exit:100},options:v.transitionOptions,unmountOnExit:!0,onEnter:K,onEntered:U,onExit:Y,onExited:Z},e.createElement("div",d({ref:S,id:v.id,className:F,style:v.style},B,{onClick:L}),e.createElement("div",{className:"p-overlaypanel-content",onClick:D,onMouseDown:D},v.children),G)));return e.createElement(c,{element:Q,appendTo:v.appendTo})}));k.displayName="OverlayPanel",k.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:null,transitionOptions:null,onShow:null,onHide:null};export{k as OverlayPanel};
+import*as e from"react";import r,{localeOption as t}from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useOverlayListener as o,useMountEffect as l,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{Ripple as u}from"primereact/ripple";import{UniqueComponentId as s,DomHandler as f,ZIndexUtils as p,ObjectUtils as m,classNames as d}from"primereact/utils";function y(){return y=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function v(e){if(Array.isArray(e))return e}function b(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,l,a,i=[],c=!0,u=!1;try{if(l=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;c=!1}else for(;!(c=(n=l.call(t)).done)&&(i.push(n.value),i.length!==r);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(u)throw o}}return i}}function h(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function g(e,r){if(e){if("string"==typeof e)return h(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?h(e,r):void 0}}function w(){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 E(e,r){return v(e)||b(e,r)||g(e,r)||w()}var O=e.forwardRef((function(v,b){var h=E(e.useState(!1),2),g=h[0],w=h[1],k=e.useRef(""),S=e.useRef(null),x=e.useRef(null),I=e.useRef(!1),T=e.useRef(null),C=e.useRef(null),N=E(o({target:x,overlay:S,listener:function(e,r){r.valid&&("outside"===r.type?v.dismissable&&!I.current&&z():z()),I.current=!1},when:g}),2),j=N[0],A=N[1],P=function(e){return S&&S.current&&!(S.current.isSameNode(e)||S.current.contains(e))},R=function(e,r){return null!=x.current&&x.current!==(r||e.currentTarget||e.target)},H=function(e){z(),e.preventDefault()},L=function(e){I.current=!0,i.emit("overlay-click",{originalEvent:e,target:x.current})},D=function(){I.current=!0},M=function(e,r){g?(z(),R(e,r)&&(x.current=r||e.currentTarget||e.target,setTimeout((function(){_(e,x.current)}),200))):_(e,r)},_=function(e,r){x.current=r||e.currentTarget||e.target,g?$():(w(!0),C.current=function(e){!P(e.target)&&(I.current=!0)},i.on("overlay-click",C.current))},z=function(){w(!1),i.off("overlay-click",C.current),C.current=null},K=function(){S.current.setAttribute(k.current,""),p.set("overlay",S.current,r.autoZIndex,r.zIndex.overlay),$()},U=function(){j(),v.onShow&&v.onShow()},Y=function(){A()},Z=function(){p.clear(S.current),v.onHide&&v.onHide()},$=function(){if(x.current&&S.current){f.absolutePosition(S.current,x.current);var e=f.getOffset(S.current),r=f.getOffset(x.current),t=0;e.left<r.left&&(t=r.left-e.left),S.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<r.top&&f.addClass(S.current,"p-overlaypanel-flipped")}},q=function(){if(!T.current){T.current=f.createInlineStyle(r.nonce);var e="";for(var t in v.breakpoints)e+="\n                    @media screen and (max-width: ".concat(t,") {\n                        .p-overlaypanel[").concat(k.current,"] {\n                            width: ").concat(v.breakpoints[t]," !important;\n                        }\n                    }\n                ");T.current.innerHTML=e}};l((function(){k.current=s(),v.breakpoints&&q()})),a((function(){T.current=f.removeInlineStyle(T.current),C.current&&(i.off("overlay-click",C.current),C.current=null),p.clear(S.current)})),e.useImperativeHandle(b,(function(){return{props:v,toggle:M,show:_,hide:z,getElement:function(){return S.current}}}));var B,F,G,J=function(){if(v.showCloseIcon){var r=v.ariaCloseLabel||t("close");return e.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:H,"aria-label":r},e.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(u,null))}return null},Q=(B=m.findDiffKeys(v,O.defaultProps),F=d("p-overlaypanel p-component",v.className,{"p-input-filled":"filled"===r.inputStyle,"p-ripple-disabled":!1===r.ripple}),G=J(),e.createElement(n,{nodeRef:S,classNames:"p-overlaypanel",in:g,timeout:{enter:120,exit:100},options:v.transitionOptions,unmountOnExit:!0,onEnter:K,onEntered:U,onExit:Y,onExited:Z},e.createElement("div",y({ref:S,id:v.id,className:F,style:v.style},B,{onClick:L}),e.createElement("div",{className:"p-overlaypanel-content",onClick:D,onMouseDown:D},v.children),G)));return e.createElement(c,{element:Q,appendTo:v.appendTo})}));O.displayName="OverlayPanel",O.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:null,transitionOptions:null,onShow:null,onHide:null};export{O as OverlayPanel};