primereact 7.0.0-rc.1 → 7.1.0

package/sidebar/sidebar.cjs.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var csstransition = require('primereact/csstransition');
+var ripple = require('primereact/ripple');
+var portal = require('primereact/portal');
+var PrimeReact = require('primereact/api');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -125,105 +130,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: props.visible,
+      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__default['default'].createRef();
+    _this.sidebarRef = /*#__PURE__*/React__default["default"].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() {
-      core.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();
+        utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
       }
     }
   }, {
     key: "onExited",
     value: function onExited() {
-      core.ZIndexUtils.clear(this.sidebarRef.current);
+      utils.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(core.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';
-        }
-
-        core.DomHandler.addMultipleClasses(this.mask, maskClassName);
-
-        if (this.props.dismissable) {
-          this.bindMaskClickListener();
-        }
-
-        document.body.appendChild(this.mask);
+    key: "enableDocumentSettings",
+    value: function enableDocumentSettings() {
+      this.bindGlobalListeners();
 
-        if (this.props.blockScroll) {
-          core.DomHandler.addClass(document.body, 'p-overflow-hidden');
-        }
+      if (this.props.blockScroll) {
+        utils.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) {
-        core.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-        this.mask.addEventListener('animationend', function () {
-          _this2.destroyModal();
-        });
+      if (this.props.blockScroll) {
+        utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
-    key: "destroyModal",
-    value: function destroyModal() {
-      if (this.mask) {
-        this.unbindMaskClickListener();
-        document.body.removeChild(this.mask);
-        core.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() {
@@ -231,8 +240,8 @@ var Sidebar = /*#__PURE__*/function (_Component) {
 
       this.documentEscapeListener = function (event) {
         if (event.which === 27) {
-          if (core.ZIndexUtils.get(_this3.sidebarRef.current) === core.ZIndexUtils.getCurrent('modal')) {
-            _this3.onCloseClick(event);
+          if (utils.ZIndexUtils.get(_this3.mask) === utils.ZIndexUtils.getCurrent('modal', PrimeReact__default["default"].autoZIndex)) {
+            _this3.onClose(event);
           }
         }
       };
@@ -248,61 +257,60 @@ 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({
+          visible: true
+        }, function () {
+          utils.ZIndexUtils.set('modal', _this4.mask, PrimeReact__default["default"].autoZIndex, _this4.props.baseZIndex || PrimeReact__default["default"].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 () {
+          utils.ZIndexUtils.set('modal', _this5.mask, PrimeReact__default["default"].autoZIndex, _this5.props.baseZIndex || PrimeReact__default["default"].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();
-      core.ZIndexUtils.clear(this.sidebarRef.current);
+      this.disableDocumentSettings();
+      utils.ZIndexUtils.clear(this.mask);
     }
   }, {
     key: "renderCloseIcon",
     value: function renderCloseIcon() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (this.props.showCloseIcon) {
-        return /*#__PURE__*/React__default['default'].createElement("button", {
+        return /*#__PURE__*/React__default["default"].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__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-sidebar-close-icon pi pi-times"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
 
       return null;
@@ -311,7 +319,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
     key: "renderIcons",
     value: function renderIcons() {
       if (this.props.icons) {
-        return core.ObjectUtils.getJSXElement(this.props.icons, this.props);
+        return utils.ObjectUtils.getJSXElement(this.props.icons, this.props);
       }
 
       return null;
@@ -319,47 +327,63 @@ var Sidebar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderElement",
     value: function renderElement() {
-      var className = core.classNames('p-sidebar p-component', this.props.className, 'p-sidebar-' + this.props.position, {
-        'p-sidebar-active': this.props.visible,
+      var _this7 = this;
+
+      var className = utils.classNames('p-sidebar p-component', this.props.className);
+      var maskClassName = utils.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__default['default'].createElement(core.CSSTransition, {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: function ref(el) {
+          return _this7.mask = el;
+        },
+        style: this.props.maskStyle,
+        className: maskClassName,
+        onClick: this.onMaskClick
+      }, /*#__PURE__*/React__default["default"].createElement(csstransition.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__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: this.sidebarRef,
         id: this.props.id,
         className: className,
         style: this.props.style,
         role: "complementary"
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-sidebar-header"
-      }, icons, closeIcon), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, icons, closeIcon), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-sidebar-content"
-      }, this.props.children)));
+      }, this.props.children))));
     }
   }, {
     key: "render",
     value: function render() {
-      var element = this.renderElement();
-      return /*#__PURE__*/React__default['default'].createElement(core.Portal, {
-        element: element,
-        appendTo: this.props.appendTo
-      });
+      if (this.state.maskVisible) {
+        var element = this.renderElement();
+        return /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
+          element: element,
+          appendTo: this.props.appendTo,
+          visible: true
+        });
+      }
+
+      return null;
     }
   }]);
 
@@ -370,6 +394,8 @@ _defineProperty(Sidebar, "defaultProps", {
   id: null,
   style: null,
   className: null,
+  maskStyle: null,
+  maskClassName: null,
   visible: false,
   position: 'left',
   fullScreen: false,

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(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&&l(e,t)}function c(e){return(c="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 u(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return r(e)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function p(){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 f,h,m,b=function(n){a(y,e.Component);var l,c,f,h,m,b=(l=y,c=p(),function(){var e,t=d(l);if(c){var n=d(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return u(this,e)});function y(e){var t;return s(this,y),(t=b.call(this,e)).onCloseClick=t.onCloseClick.bind(r(t)),t.onEnter=t.onEnter.bind(r(t)),t.onEntered=t.onEntered.bind(r(t)),t.onExit=t.onExit.bind(r(t)),t.onExited=t.onExited.bind(r(t)),t.sidebarRef=i.default.createRef(),t}return f=y,(h=[{key:"onCloseClick",value:function(e){this.props.onHide(),e.preventDefault()}},{key:"onEnter",value:function(){t.ZIndexUtils.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(){t.ZIndexUtils.clear(this.sidebarRef.current)}},{key:"enableModality",value:function(){if(!this.mask){this.mask=document.createElement("div"),this.mask.style.zIndex=String(t.ZIndexUtils.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"),t.DomHandler.addMultipleClasses(this.mask,e),this.props.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),this.props.blockScroll&&t.DomHandler.addClass(document.body,"p-overflow-hidden")}}},{key:"disableModality",value:function(){var e=this;this.mask&&(t.DomHandler.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),t.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)}},{key:"bindDocumentEscapeListener",value:function(){var e=this;this.documentEscapeListener=function(n){27===n.which&&t.ZIndexUtils.get(e.sidebarRef.current)===t.ZIndexUtils.getCurrent("modal")&&e.onCloseClick(n)},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(),t.ZIndexUtils.clear(this.sidebarRef.current)}},{key:"renderCloseIcon",value:function(){var e=this;return this.props.showCloseIcon?i.default.createElement("button",{type:"button",ref:function(t){return e.closeIcon=t},className:"p-sidebar-close p-sidebar-icon p-link",onClick:this.onCloseClick,"aria-label":this.props.ariaCloseLabel},i.default.createElement("span",{className:"p-sidebar-close-icon pi pi-times"}),i.default.createElement(t.Ripple,null)):null}},{key:"renderIcons",value:function(){return this.props.icons?t.ObjectUtils.getJSXElement(this.props.icons,this.props):null}},{key:"renderElement",value:function(){var e=t.classNames("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(),s=this.renderIcons();return i.default.createElement(t.CSSTransition,{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},i.default.createElement("div",{ref:this.sidebarRef,id:this.props.id,className:e,style:this.props.style,role:"complementary"},i.default.createElement("div",{className:"p-sidebar-header"},s,n),i.default.createElement("div",{className:"p-sidebar-content"},this.props.children)))}},{key:"render",value:function(){var e=this.renderElement();return i.default.createElement(t.Portal,{element:e,appendTo:this.props.appendTo})}}])&&o(f.prototype,h),m&&o(f,m),y}();m={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},(h="defaultProps")in(f=b)?Object.defineProperty(f,h,{value:m,enumerable:!0,configurable:!0,writable:!0}):f[h]=m,exports.Sidebar=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils"),n=require("primereact/csstransition"),s=require("primereact/ripple"),i=require("primereact/portal"),o=require("primereact/api");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),a=r(o);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 s=t[n];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}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},d(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}}),t&&d(e,t)}function m(e){return m="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},m(e)}function b(e,t){if(t&&("object"===m(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 h(e){return h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},h(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 y,k,E,S=function(o){f(S,e.Component);var r,d,m,y,k,E=(r=S,d=v(),function(){var e,t=h(r);if(d){var n=h(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return b(this,e)});function S(e){var t;return c(this,S),(t=E.call(this,e)).state={maskVisible:e.visible,visible:!1},t.onMaskClick=t.onMaskClick.bind(p(t)),t.onClose=t.onClose.bind(p(t)),t.onEntered=t.onEntered.bind(p(t)),t.onExiting=t.onExiting.bind(p(t)),t.onExited=t.onExited.bind(p(t)),t.sidebarRef=l.default.createRef(),t}return m=S,(y=[{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&&t.DomHandler.addClass(this.mask,"p-component-overlay-leave")}},{key:"onExited",value:function(){t.ZIndexUtils.clear(this.mask),this.setState({maskVisible:!1}),this.disableDocumentSettings()}},{key:"enableDocumentSettings",value:function(){this.bindGlobalListeners(),this.props.blockScroll&&t.DomHandler.addClass(document.body,"p-overflow-hidden")}},{key:"disableDocumentSettings",value:function(){this.unbindGlobalListeners(),this.props.blockScroll&&t.DomHandler.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(n){27===n.which&&t.ZIndexUtils.get(e.mask)===t.ZIndexUtils.getCurrent("modal",a.default.autoZIndex)&&e.onClose(n)},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({visible:!0},(function(){t.ZIndexUtils.set("modal",e.mask,a.default.autoZIndex,e.props.baseZIndex||a.default.zIndex.modal)}))}},{key:"componentDidUpdate",value:function(e,n){var s=this;this.props.visible&&!this.state.maskVisible&&this.setState({maskVisible:!0},(function(){t.ZIndexUtils.set("modal",s.mask,a.default.autoZIndex,s.props.baseZIndex||a.default.zIndex.modal)})),this.props.visible!==this.state.visible&&this.state.maskVisible&&this.setState({visible:this.props.visible})}},{key:"componentWillUnmount",value:function(){this.disableDocumentSettings(),t.ZIndexUtils.clear(this.mask)}},{key:"renderCloseIcon",value:function(){var e=this;return this.props.showCloseIcon?l.default.createElement("button",{type:"button",ref:function(t){return e.closeIcon=t},className:"p-sidebar-close p-sidebar-icon p-link",onClick:this.onClose,"aria-label":this.props.ariaCloseLabel},l.default.createElement("span",{className:"p-sidebar-close-icon pi pi-times"}),l.default.createElement(s.Ripple,null)):null}},{key:"renderIcons",value:function(){return this.props.icons?t.ObjectUtils.getJSXElement(this.props.icons,this.props):null}},{key:"renderElement",value:function(){var e=this,s=t.classNames("p-sidebar p-component",this.props.className),i=t.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()),o=this.renderCloseIcon(),r=this.renderIcons();return l.default.createElement("div",{ref:function(t){return e.mask=t},style:this.props.maskStyle,className:i,onClick:this.onMaskClick},l.default.createElement(n.CSSTransition,{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},l.default.createElement("div",{ref:this.sidebarRef,id:this.props.id,className:s,style:this.props.style,role:"complementary"},l.default.createElement("div",{className:"p-sidebar-header"},r,o),l.default.createElement("div",{className:"p-sidebar-content"},this.props.children))))}},{key:"render",value:function(){if(this.state.maskVisible){var e=this.renderElement();return l.default.createElement(i.Portal,{element:e,appendTo:this.props.appendTo,visible:!0})}return null}}])&&u(m.prototype,y),k&&u(m,k),S}();E={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},(k="defaultProps")in(y=S)?Object.defineProperty(y,k,{value:E,enumerable:!0,configurable:!0,writable:!0}):y[k]=E,exports.Sidebar=S;

package/sidebar/sidebar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSTransitionProps } from '../csstransition';
 
 type SidebarPositionType = 'top' | 'bottom' | 'left' | 'right';
 
@@ -10,6 +11,8 @@ export interface SidebarProps {
     id?: string;
     style?: object;
     className?: string;
+    maskStyle?: object;
+    maskClassName?: string;
     visible?: boolean;
     position?: SidebarPositionType;
     fullScreen?: boolean;
@@ -22,7 +25,7 @@ export interface SidebarProps {
     icons?: SidebarTemplateType;
     modal?: boolean;
     appendTo?: SidebarAppendToType;
-    transitionOptions?: object;
+    transitionOptions?: CSSTransitionProps;
     onShow?(): void;
     onHide(): void;
 }