primereact 7.0.0-rc.2 → 7.2.0

package/sidebar/sidebar.esm.js

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
-import { ZIndexUtils, DomHandler, Ripple, ObjectUtils, classNames, CSSTransition, Portal } from 'primereact/core';
+import { DomHandler, ZIndexUtils, ObjectUtils, classNames } from 'primereact/utils';
+import { CSSTransition } from 'primereact/csstransition';
+import { Ripple } from 'primereact/ripple';
+import { Portal } from 'primereact/portal';
+import PrimeReact from 'primereact/api';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -20,6 +24,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -52,23 +59,20 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _possibleConstructorReturn(self, call) {
@@ -117,105 +121,109 @@ var Sidebar = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, Sidebar);
 
     _this = _super.call(this, props);
-    _this.onCloseClick = _this.onCloseClick.bind(_assertThisInitialized(_this));
-    _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
+    _this.state = {
+      maskVisible: false,
+      visible: false
+    };
+    _this.onMaskClick = _this.onMaskClick.bind(_assertThisInitialized(_this));
+    _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
     _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
-    _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
+    _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
     _this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
     _this.sidebarRef = /*#__PURE__*/React.createRef();
     return _this;
   }
 
   _createClass(Sidebar, [{
-    key: "onCloseClick",
-    value: function onCloseClick(event) {
-      this.props.onHide();
-      event.preventDefault();
+    key: "getPositionClass",
+    value: function getPositionClass() {
+      var _this2 = this;
+
+      var positions = ['left', 'right', 'top', 'bottom'];
+      var pos = positions.find(function (item) {
+        return item === _this2.props.position;
+      });
+      return pos ? "p-sidebar-".concat(pos) : '';
     }
   }, {
-    key: "onEnter",
-    value: function onEnter() {
-      ZIndexUtils.set('modal', this.sidebarRef.current, this.props.baseZIndex);
+    key: "focus",
+    value: function focus() {
+      var activeElement = document.activeElement;
+      var isActiveElementInDialog = activeElement && this.sidebarRef && this.sidebarRef.current.contains(activeElement);
 
-      if (this.props.modal) {
-        this.enableModality();
+      if (!isActiveElementInDialog && this.props.showCloseIcon) {
+        this.closeIcon.focus();
+      }
+    }
+  }, {
+    key: "onMaskClick",
+    value: function onMaskClick(event) {
+      if (this.props.dismissable && this.props.modal && this.mask === event.target) {
+        this.onClose(event);
       }
     }
+  }, {
+    key: "onClose",
+    value: function onClose(event) {
+      this.props.onHide();
+      event.preventDefault();
+    }
   }, {
     key: "onEntered",
     value: function onEntered() {
-      if (this.props.closeOnEscape) {
-        this.bindDocumentEscapeListener();
+      if (this.props.onShow) {
+        this.props.onShow();
       }
 
-      if (this.closeIcon) {
-        this.closeIcon.focus();
-      }
-
-      this.props.onShow && this.props.onShow();
+      this.focus();
+      this.enableDocumentSettings();
     }
   }, {
-    key: "onExit",
-    value: function onExit() {
-      this.unbindMaskClickListener();
-      this.unbindDocumentEscapeListener();
-
+    key: "onExiting",
+    value: function onExiting() {
       if (this.props.modal) {
-        this.disableModality();
+        DomHandler.addClass(this.mask, 'p-component-overlay-leave');
       }
     }
   }, {
     key: "onExited",
     value: function onExited() {
-      ZIndexUtils.clear(this.sidebarRef.current);
+      ZIndexUtils.clear(this.mask);
+      this.setState({
+        maskVisible: false
+      });
+      this.disableDocumentSettings();
     }
   }, {
-    key: "enableModality",
-    value: function enableModality() {
-      if (!this.mask) {
-        this.mask = document.createElement('div');
-        this.mask.style.zIndex = String(ZIndexUtils.get(this.sidebarRef.current) - 1);
-        var maskClassName = 'p-component-overlay p-component-overlay p-component-overlay-enter';
-
-        if (this.props.blockScroll) {
-          maskClassName += ' p-sidebar-mask-scrollblocker';
-        }
+    key: "enableDocumentSettings",
+    value: function enableDocumentSettings() {
+      this.bindGlobalListeners();
 
-        DomHandler.addMultipleClasses(this.mask, maskClassName);
-
-        if (this.props.dismissable) {
-          this.bindMaskClickListener();
-        }
-
-        document.body.appendChild(this.mask);
-
-        if (this.props.blockScroll) {
-          DomHandler.addClass(document.body, 'p-overflow-hidden');
-        }
+      if (this.props.blockScroll) {
+        DomHandler.addClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
-    key: "disableModality",
-    value: function disableModality() {
-      var _this2 = this;
+    key: "disableDocumentSettings",
+    value: function disableDocumentSettings() {
+      this.unbindGlobalListeners();
 
-      if (this.mask) {
-        DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-        this.mask.addEventListener('animationend', function () {
-          _this2.destroyModal();
-        });
+      if (this.props.blockScroll) {
+        DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
-    key: "destroyModal",
-    value: function destroyModal() {
-      if (this.mask) {
-        this.unbindMaskClickListener();
-        document.body.removeChild(this.mask);
-        DomHandler.removeClass(document.body, 'p-overflow-hidden');
-        this.mask = null;
+    key: "bindGlobalListeners",
+    value: function bindGlobalListeners() {
+      if (this.props.closeOnEscape) {
+        this.bindDocumentEscapeListener();
       }
     }
+  }, {
+    key: "unbindGlobalListeners",
+    value: function unbindGlobalListeners() {
+      this.unbindDocumentEscapeListener();
+    }
   }, {
     key: "bindDocumentEscapeListener",
     value: function bindDocumentEscapeListener() {
@@ -223,8 +231,8 @@ var Sidebar = /*#__PURE__*/function (_Component) {
 
       this.documentEscapeListener = function (event) {
         if (event.which === 27) {
-          if (ZIndexUtils.get(_this3.sidebarRef.current) === ZIndexUtils.getCurrent('modal')) {
-            _this3.onCloseClick(event);
+          if (ZIndexUtils.get(_this3.mask) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) {
+            _this3.onClose(event);
           }
         }
       };
@@ -240,57 +248,57 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "bindMaskClickListener",
-    value: function bindMaskClickListener() {
+    key: "componentDidMount",
+    value: function componentDidMount() {
       var _this4 = this;
 
-      if (!this.maskClickListener) {
-        this.maskClickListener = function (event) {
-          _this4.onCloseClick(event);
-        };
-
-        this.mask.addEventListener('click', this.maskClickListener);
-      }
-    }
-  }, {
-    key: "unbindMaskClickListener",
-    value: function unbindMaskClickListener() {
-      if (this.maskClickListener) {
-        this.mask.removeEventListener('click', this.maskClickListener);
-        this.maskClickListener = null;
+      if (this.props.visible) {
+        this.setState({
+          maskVisible: true,
+          visible: true
+        }, function () {
+          ZIndexUtils.set('modal', _this4.mask, PrimeReact.autoZIndex, _this4.props.baseZIndex || PrimeReact.zIndex['modal']);
+        });
       }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.mask && prevProps.dismissable !== this.props.dismissable) {
-        if (this.props.dismissable) {
-          this.bindMaskClickListener();
-        } else {
-          this.unbindMaskClickListener();
-        }
+      var _this5 = this;
+
+      if (this.props.visible && !this.state.maskVisible) {
+        this.setState({
+          maskVisible: true
+        }, function () {
+          ZIndexUtils.set('modal', _this5.mask, PrimeReact.autoZIndex, _this5.props.baseZIndex || PrimeReact.zIndex['modal']);
+        });
+      }
+
+      if (this.props.visible !== this.state.visible && this.state.maskVisible) {
+        this.setState({
+          visible: this.props.visible
+        });
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.unbindMaskClickListener();
-      this.disableModality();
-      ZIndexUtils.clear(this.sidebarRef.current);
+      this.disableDocumentSettings();
+      ZIndexUtils.clear(this.mask);
     }
   }, {
     key: "renderCloseIcon",
     value: function renderCloseIcon() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (this.props.showCloseIcon) {
         return /*#__PURE__*/React.createElement("button", {
           type: "button",
           ref: function ref(el) {
-            return _this5.closeIcon = el;
+            return _this6.closeIcon = el;
           },
           className: "p-sidebar-close p-sidebar-icon p-link",
-          onClick: this.onCloseClick,
+          onClick: this.onClose,
           "aria-label": this.props.ariaCloseLabel
         }, /*#__PURE__*/React.createElement("span", {
           className: "p-sidebar-close-icon pi pi-times"
@@ -311,26 +319,37 @@ var Sidebar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderElement",
     value: function renderElement() {
-      var className = classNames('p-sidebar p-component', this.props.className, 'p-sidebar-' + this.props.position, {
-        'p-sidebar-active': this.props.visible,
+      var _this7 = this;
+
+      var className = classNames('p-sidebar p-component', this.props.className);
+      var maskClassName = classNames('p-sidebar-mask', {
+        'p-component-overlay p-component-overlay-enter': this.props.modal,
+        'p-sidebar-mask-scrollblocker': this.props.blockScroll,
+        'p-sidebar-visible': this.state.maskVisible,
         'p-sidebar-full': this.props.fullScreen
-      });
+      }, this.props.maskClassName, this.getPositionClass());
       var closeIcon = this.renderCloseIcon();
       var icons = this.renderIcons();
       var transitionTimeout = {
-        enter: this.props.fullScreen ? 400 : 300,
-        exit: this.props.fullScreen ? 400 : 300
+        enter: this.props.fullScreen ? 150 : 300,
+        exit: this.props.fullScreen ? 150 : 300
       };
-      return /*#__PURE__*/React.createElement(CSSTransition, {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(el) {
+          return _this7.mask = el;
+        },
+        style: this.props.maskStyle,
+        className: maskClassName,
+        onClick: this.onMaskClick
+      }, /*#__PURE__*/React.createElement(CSSTransition, {
         nodeRef: this.sidebarRef,
         classNames: "p-sidebar",
-        in: this.props.visible,
+        "in": this.state.visible,
         timeout: transitionTimeout,
         options: this.props.transitionOptions,
         unmountOnExit: true,
-        onEnter: this.onEnter,
         onEntered: this.onEntered,
-        onExit: this.onExit,
+        onExiting: this.onExiting,
         onExited: this.onExited
       }, /*#__PURE__*/React.createElement("div", {
         ref: this.sidebarRef,
@@ -342,16 +361,21 @@ var Sidebar = /*#__PURE__*/function (_Component) {
         className: "p-sidebar-header"
       }, icons, closeIcon), /*#__PURE__*/React.createElement("div", {
         className: "p-sidebar-content"
-      }, this.props.children)));
+      }, this.props.children))));
     }
   }, {
     key: "render",
     value: function render() {
-      var element = this.renderElement();
-      return /*#__PURE__*/React.createElement(Portal, {
-        element: element,
-        appendTo: this.props.appendTo
-      });
+      if (this.state.maskVisible) {
+        var element = this.renderElement();
+        return /*#__PURE__*/React.createElement(Portal, {
+          element: element,
+          appendTo: this.props.appendTo,
+          visible: true
+        });
+      }
+
+      return null;
     }
   }]);
 
@@ -362,6 +386,8 @@ _defineProperty(Sidebar, "defaultProps", {
   id: null,
   style: null,
   className: null,
+  maskStyle: null,
+  maskClassName: null,
   visible: false,
   position: 'left',
   fullScreen: false,

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import e,{Component as t}from"react";import{ZIndexUtils as n,DomHandler as i,Ripple as s,ObjectUtils as o,classNames as r,CSSTransition as l,Portal as a}from"primereact/core";function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return(d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&d(e,t)}function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){if(t&&("object"===f(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return p(e)}function b(e){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function k(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var y,v,E,C=function(d){h(w,t);var f,y,v,E,C,L=(f=w,y=k(),function(){var e,t=b(f);if(y){var n=b(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return m(this,e)});function w(t){var n;return c(this,w),(n=L.call(this,t)).onCloseClick=n.onCloseClick.bind(p(n)),n.onEnter=n.onEnter.bind(p(n)),n.onEntered=n.onEntered.bind(p(n)),n.onExit=n.onExit.bind(p(n)),n.onExited=n.onExited.bind(p(n)),n.sidebarRef=e.createRef(),n}return v=w,(E=[{key:"onCloseClick",value:function(e){this.props.onHide(),e.preventDefault()}},{key:"onEnter",value:function(){n.set("modal",this.sidebarRef.current,this.props.baseZIndex),this.props.modal&&this.enableModality()}},{key:"onEntered",value:function(){this.props.closeOnEscape&&this.bindDocumentEscapeListener(),this.closeIcon&&this.closeIcon.focus(),this.props.onShow&&this.props.onShow()}},{key:"onExit",value:function(){this.unbindMaskClickListener(),this.unbindDocumentEscapeListener(),this.props.modal&&this.disableModality()}},{key:"onExited",value:function(){n.clear(this.sidebarRef.current)}},{key:"enableModality",value:function(){if(!this.mask){this.mask=document.createElement("div"),this.mask.style.zIndex=String(n.get(this.sidebarRef.current)-1);var e="p-component-overlay p-component-overlay p-component-overlay-enter";this.props.blockScroll&&(e+=" p-sidebar-mask-scrollblocker"),i.addMultipleClasses(this.mask,e),this.props.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),this.props.blockScroll&&i.addClass(document.body,"p-overflow-hidden")}}},{key:"disableModality",value:function(){var e=this;this.mask&&(i.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(function(){e.destroyModal()})))}},{key:"destroyModal",value:function(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),i.removeClass(document.body,"p-overflow-hidden"),this.mask=null)}},{key:"bindDocumentEscapeListener",value:function(){var e=this;this.documentEscapeListener=function(t){27===t.which&&n.get(e.sidebarRef.current)===n.getCurrent("modal")&&e.onCloseClick(t)},document.addEventListener("keydown",this.documentEscapeListener)}},{key:"unbindDocumentEscapeListener",value:function(){this.documentEscapeListener&&(document.removeEventListener("keydown",this.documentEscapeListener),this.documentEscapeListener=null)}},{key:"bindMaskClickListener",value:function(){var e=this;this.maskClickListener||(this.maskClickListener=function(t){e.onCloseClick(t)},this.mask.addEventListener("click",this.maskClickListener))}},{key:"unbindMaskClickListener",value:function(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)}},{key:"componentDidUpdate",value:function(e,t){this.mask&&e.dismissable!==this.props.dismissable&&(this.props.dismissable?this.bindMaskClickListener():this.unbindMaskClickListener())}},{key:"componentWillUnmount",value:function(){this.unbindMaskClickListener(),this.disableModality(),n.clear(this.sidebarRef.current)}},{key:"renderCloseIcon",value:function(){var t=this;return this.props.showCloseIcon?e.createElement("button",{type:"button",ref:function(e){return t.closeIcon=e},className:"p-sidebar-close p-sidebar-icon p-link",onClick:this.onCloseClick,"aria-label":this.props.ariaCloseLabel},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times"}),e.createElement(s,null)):null}},{key:"renderIcons",value:function(){return this.props.icons?o.getJSXElement(this.props.icons,this.props):null}},{key:"renderElement",value:function(){var t=r("p-sidebar p-component",this.props.className,"p-sidebar-"+this.props.position,{"p-sidebar-active":this.props.visible,"p-sidebar-full":this.props.fullScreen}),n=this.renderCloseIcon(),i=this.renderIcons();return e.createElement(l,{nodeRef:this.sidebarRef,classNames:"p-sidebar",in:this.props.visible,timeout:{enter:this.props.fullScreen?400:300,exit:this.props.fullScreen?400:300},options:this.props.transitionOptions,unmountOnExit:!0,onEnter:this.onEnter,onEntered:this.onEntered,onExit:this.onExit,onExited:this.onExited},e.createElement("div",{ref:this.sidebarRef,id:this.props.id,className:t,style:this.props.style,role:"complementary"},e.createElement("div",{className:"p-sidebar-header"},i,n),e.createElement("div",{className:"p-sidebar-content"},this.props.children)))}},{key:"render",value:function(){var t=this.renderElement();return e.createElement(a,{element:t,appendTo:this.props.appendTo})}}])&&u(v.prototype,E),C&&u(v,C),w}();E={id:null,style:null,className:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:"close",closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},(v="defaultProps")in(y=C)?Object.defineProperty(y,v,{value:E,enumerable:!0,configurable:!0,writable:!0}):y[v]=E;export{C as Sidebar};
+import e,{Component as t}from"react";import{DomHandler as n,ZIndexUtils as o,ObjectUtils as i,classNames as s}from"primereact/utils";import{CSSTransition as r}from"primereact/csstransition";import{Ripple as l}from"primereact/ripple";import{Portal as a}from"primereact/portal";import c from"primereact/api";function p(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},m(e,t)}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&m(e,t)}function b(e){return b="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},b(e)}function h(e,t){if(t&&("object"===b(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return d(e)}function y(e){return y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},y(e)}function v(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var k,E,S,C=function(m){f(g,t);var b,k,E,S,C,w=(b=g,k=v(),function(){var e,t=y(b);if(k){var n=y(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return h(this,e)});function g(t){var n;return p(this,g),(n=w.call(this,t)).state={maskVisible:!1,visible:!1},n.onMaskClick=n.onMaskClick.bind(d(n)),n.onClose=n.onClose.bind(d(n)),n.onEntered=n.onEntered.bind(d(n)),n.onExiting=n.onExiting.bind(d(n)),n.onExited=n.onExited.bind(d(n)),n.sidebarRef=e.createRef(),n}return E=g,(S=[{key:"getPositionClass",value:function(){var e=this,t=["left","right","top","bottom"].find((function(t){return t===e.props.position}));return t?"p-sidebar-".concat(t):""}},{key:"focus",value:function(){var e=document.activeElement;!(e&&this.sidebarRef&&this.sidebarRef.current.contains(e))&&this.props.showCloseIcon&&this.closeIcon.focus()}},{key:"onMaskClick",value:function(e){this.props.dismissable&&this.props.modal&&this.mask===e.target&&this.onClose(e)}},{key:"onClose",value:function(e){this.props.onHide(),e.preventDefault()}},{key:"onEntered",value:function(){this.props.onShow&&this.props.onShow(),this.focus(),this.enableDocumentSettings()}},{key:"onExiting",value:function(){this.props.modal&&n.addClass(this.mask,"p-component-overlay-leave")}},{key:"onExited",value:function(){o.clear(this.mask),this.setState({maskVisible:!1}),this.disableDocumentSettings()}},{key:"enableDocumentSettings",value:function(){this.bindGlobalListeners(),this.props.blockScroll&&n.addClass(document.body,"p-overflow-hidden")}},{key:"disableDocumentSettings",value:function(){this.unbindGlobalListeners(),this.props.blockScroll&&n.removeClass(document.body,"p-overflow-hidden")}},{key:"bindGlobalListeners",value:function(){this.props.closeOnEscape&&this.bindDocumentEscapeListener()}},{key:"unbindGlobalListeners",value:function(){this.unbindDocumentEscapeListener()}},{key:"bindDocumentEscapeListener",value:function(){var e=this;this.documentEscapeListener=function(t){27===t.which&&o.get(e.mask)===o.getCurrent("modal",c.autoZIndex)&&e.onClose(t)},document.addEventListener("keydown",this.documentEscapeListener)}},{key:"unbindDocumentEscapeListener",value:function(){this.documentEscapeListener&&(document.removeEventListener("keydown",this.documentEscapeListener),this.documentEscapeListener=null)}},{key:"componentDidMount",value:function(){var e=this;this.props.visible&&this.setState({maskVisible:!0,visible:!0},(function(){o.set("modal",e.mask,c.autoZIndex,e.props.baseZIndex||c.zIndex.modal)}))}},{key:"componentDidUpdate",value:function(e,t){var n=this;this.props.visible&&!this.state.maskVisible&&this.setState({maskVisible:!0},(function(){o.set("modal",n.mask,c.autoZIndex,n.props.baseZIndex||c.zIndex.modal)})),this.props.visible!==this.state.visible&&this.state.maskVisible&&this.setState({visible:this.props.visible})}},{key:"componentWillUnmount",value:function(){this.disableDocumentSettings(),o.clear(this.mask)}},{key:"renderCloseIcon",value:function(){var t=this;return this.props.showCloseIcon?e.createElement("button",{type:"button",ref:function(e){return t.closeIcon=e},className:"p-sidebar-close p-sidebar-icon p-link",onClick:this.onClose,"aria-label":this.props.ariaCloseLabel},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times"}),e.createElement(l,null)):null}},{key:"renderIcons",value:function(){return this.props.icons?i.getJSXElement(this.props.icons,this.props):null}},{key:"renderElement",value:function(){var t=this,n=s("p-sidebar p-component",this.props.className),o=s("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":this.props.modal,"p-sidebar-mask-scrollblocker":this.props.blockScroll,"p-sidebar-visible":this.state.maskVisible,"p-sidebar-full":this.props.fullScreen},this.props.maskClassName,this.getPositionClass()),i=this.renderCloseIcon(),l=this.renderIcons();return e.createElement("div",{ref:function(e){return t.mask=e},style:this.props.maskStyle,className:o,onClick:this.onMaskClick},e.createElement(r,{nodeRef:this.sidebarRef,classNames:"p-sidebar",in:this.state.visible,timeout:{enter:this.props.fullScreen?150:300,exit:this.props.fullScreen?150:300},options:this.props.transitionOptions,unmountOnExit:!0,onEntered:this.onEntered,onExiting:this.onExiting,onExited:this.onExited},e.createElement("div",{ref:this.sidebarRef,id:this.props.id,className:n,style:this.props.style,role:"complementary"},e.createElement("div",{className:"p-sidebar-header"},l,i),e.createElement("div",{className:"p-sidebar-content"},this.props.children))))}},{key:"render",value:function(){if(this.state.maskVisible){var t=this.renderElement();return e.createElement(a,{element:t,appendTo:this.props.appendTo,visible:!0})}return null}}])&&u(E.prototype,S),C&&u(E,C),Object.defineProperty(E,"prototype",{writable:!1}),g}();S={id:null,style:null,className:null,maskStyle:null,maskClassName:null,visible:!1,position:"left",fullScreen:!1,blockScroll:!1,baseZIndex:0,dismissable:!0,showCloseIcon:!0,ariaCloseLabel:"close",closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},(E="defaultProps")in(k=C)?Object.defineProperty(k,E,{value:S,enumerable:!0,configurable:!0,writable:!0}):k[E]=S;export{C as Sidebar};