primereact 8.7.2 → 9.0.0-beta.1

package/sidebar/sidebar.esm.js

@@ -10,14 +10,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);
@@ -28,42 +26,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;
 }
 
@@ -86,54 +82,47 @@ function _slicedToArray(arr, i) {
 
 var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      maskVisibleState = _React$useState2[0],
-      setMaskVisibleState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    maskVisibleState = _React$useState2[0],
+    setMaskVisibleState = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      visibleState = _React$useState4[0],
-      setVisibleState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    visibleState = _React$useState4[0],
+    setVisibleState = _React$useState4[1];
   var sidebarRef = React.useRef(null);
   var maskRef = React.useRef(null);
   var closeIconRef = React.useRef(null);
-
   var _useEventListener = useEventListener({
-    type: 'keydown',
-    listener: function listener(event) {
-      if (event.which === 27) {
-        if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) {
-          onClose(event);
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.which === 27) {
+          if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) {
+            onClose(event);
+          }
         }
       }
-    }
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentEscapeListener = _useEventListener2[0],
-      unbindDocumentEscapeListener = _useEventListener2[1];
-
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentEscapeListener = _useEventListener2[0],
+    unbindDocumentEscapeListener = _useEventListener2[1];
   var _useEventListener3 = useEventListener({
-    type: 'click',
-    listener: function listener(event) {
-      if (event.which === 2) {
-        // left click
-        return;
-      }
-
-      if (isOutsideClicked(event)) {
-        onClose(event);
+      type: 'click',
+      listener: function listener(event) {
+        if (event.which === 2) {
+          // left click
+          return;
+        }
+        if (isOutsideClicked(event)) {
+          onClose(event);
+        }
       }
-    }
-  }),
-      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
-      bindDocumentClickListener = _useEventListener4[0],
-      unbindDocumentClickListener = _useEventListener4[1];
-
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+    bindDocumentClickListener = _useEventListener4[0],
+    unbindDocumentClickListener = _useEventListener4[1];
   var isOutsideClicked = function isOutsideClicked(event) {
     return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
   };
-
   var getPositionClass = function getPositionClass() {
     var positions = ['left', 'right', 'top', 'bottom'];
     var pos = positions.find(function (item) {
@@ -141,68 +130,55 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     return pos ? "p-sidebar-".concat(pos) : '';
   };
-
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
-
     if (!isActiveElementInDialog && props.showCloseIcon) {
       closeIconRef.current.focus();
     }
   };
-
   var onMaskClick = function onMaskClick(event) {
     if (props.dismissable && props.modal && maskRef.current === event.target) {
       onClose(event);
     }
   };
-
   var onClose = function onClose(event) {
     props.onHide();
     event.preventDefault();
   };
-
   var onEntered = function onEntered() {
     props.onShow && props.onShow();
     focus();
     enableDocumentSettings();
   };
-
   var onExiting = function onExiting() {
     if (props.modal) {
       DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
     }
   };
-
   var onExited = function onExited() {
     ZIndexUtils.clear(maskRef.current);
     setMaskVisibleState(false);
     disableDocumentSettings();
   };
-
   var enableDocumentSettings = function enableDocumentSettings() {
     if (props.closeOnEscape) {
       bindDocumentEscapeListener();
     }
-
     if (props.dismissable && !props.modal) {
       bindDocumentClickListener();
     }
-
     if (props.blockScroll) {
       DomHandler.addClass(document.body, 'p-overflow-hidden');
     }
   };
-
   var disableDocumentSettings = function disableDocumentSettings() {
     unbindDocumentEscapeListener();
     unbindDocumentClickListener();
-
     if (props.blockScroll) {
       DomHandler.removeClass(document.body, 'p-overflow-hidden');
     }
   };
-
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -226,7 +202,6 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (props.visible && !maskVisibleState) {
       setMaskVisibleState(true);
     }
-
     if (props.visible !== visibleState && maskVisibleState) {
       setVisibleState(props.visible);
     }
@@ -237,11 +212,19 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setVisibleState(true);
     }
   }, [maskVisibleState]);
+  useUpdateEffect(function () {
+    // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+    if (visibleState) {
+      unbindDocumentClickListener();
+      if (props.dismissable && !props.modal) {
+        bindDocumentClickListener();
+      }
+    }
+  }, [props.dismissable, props.modal, visibleState]);
   useUnmountEffect(function () {
     disableDocumentSettings();
     maskRef.current && ZIndexUtils.clear(maskRef.current);
   });
-
   var createCloseIcon = function createCloseIcon() {
     if (props.showCloseIcon) {
       var ariaLabel = props.ariaCloseLabel || localeOption('close');
@@ -256,17 +239,17 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createIcons = function createIcons() {
     return props.icons ? ObjectUtils.getJSXElement(props.icons, props) : null;
   };
-
   var createElement = function createElement() {
     var otherProps = ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-    var className = classNames('p-sidebar p-component', props.className);
+    var className = classNames('p-sidebar p-component', props.className, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var maskClassName = classNames('p-sidebar-mask', {
       'p-component-overlay p-component-overlay-enter': props.modal,
       'p-sidebar-mask-scrollblocker': props.blockScroll,
@@ -307,7 +290,6 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "p-sidebar-content"
     }, props.children))));
   };
-
   var createSidebar = function createSidebar() {
     var element = createElement();
     return /*#__PURE__*/React.createElement(Portal, {
@@ -316,7 +298,6 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible: true
     });
   };
-
   return maskVisibleState && createSidebar();
 });
 Sidebar.displayName = 'Sidebar';

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import n,{localeOption as t}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useEventListener as o,useMountEffect as l,useUpdateEffect as a,useUnmountEffect as i}from"primereact/hooks";import{Portal as s}from"primereact/portal";import{Ripple as c}from"primereact/ripple";import{ZIndexUtils as u,DomHandler as m,ObjectUtils as p,classNames as d}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},f.apply(this,arguments)}function b(e){if(Array.isArray(e))return e}function y(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,l=[],a=!0,i=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(l.push(r.value),!n||l.length!==n);a=!0);}catch(e){i=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(i)throw o}}return l}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function h(e,n){if(e){if("string"==typeof e)return v(e,n);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)?v(e,n):void 0}}function S(){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,n){return b(e)||y(e,n)||h(e,n)||S()}var g=e.forwardRef((function(b,y){var v=E(e.useState(!1),2),h=v[0],S=v[1],w=E(e.useState(!1),2),k=w[0],C=w[1],I=e.useRef(null),N=e.useRef(null),x=e.useRef(null),O=E(o({type:"keydown",listener:function(e){27===e.which&&u.get(N.current)===u.getCurrent("modal",n.autoZIndex)&&H(e)}}),2),j=O[0],A=O[1],R=E(o({type:"click",listener:function(e){2!==e.which&&Z(e)&&H(e)}}),2),T=R[0],P=R[1],Z=function(e){return I&&I.current&&!I.current.contains(e.target)},D=function(e){b.dismissable&&b.modal&&N.current===e.target&&H(e)},H=function(e){b.onHide(),e.preventDefault()},M=function(){var e;b.onShow&&b.onShow(),!((e=document.activeElement)&&I&&I.current.contains(e))&&b.showCloseIcon&&x.current.focus(),z()},L=function(){b.modal&&m.addClass(N.current,"p-component-overlay-leave")},_=function(){u.clear(N.current),S(!1),J()},z=function(){b.closeOnEscape&&j(),b.dismissable&&!b.modal&&T(),b.blockScroll&&m.addClass(document.body,"p-overflow-hidden")},J=function(){A(),P(),b.blockScroll&&m.removeClass(document.body,"p-overflow-hidden")};e.useImperativeHandle(y,(function(){return{props:b,getElement:function(){return I.current},gteMask:function(){return N.current},getCloseIcon:function(){return x.current}}})),l((function(){b.visible&&S(!0)})),a((function(){b.visible&&!h&&S(!0),b.visible!==k&&h&&C(b.visible)})),a((function(){h&&(u.set("modal",N.current,n.autoZIndex,b.baseZIndex||n.zIndex.modal),C(!0))}),[h]),i((function(){J(),N.current&&u.clear(N.current)}));var K,U,X,Y,$,q,B,F=function(){if(b.showCloseIcon){var n=b.ariaCloseLabel||t("close");return e.createElement("button",{type:"button",ref:x,className:"p-sidebar-close p-sidebar-icon p-link",onClick:H,"aria-label":n},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(c,null))}return null};return h&&(U=p.findDiffKeys(b,g.defaultProps),X=d("p-sidebar p-component",b.className),Y=d("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":b.modal,"p-sidebar-mask-scrollblocker":b.blockScroll,"p-sidebar-visible":h,"p-sidebar-full":b.fullScreen},(K=["left","right","top","bottom"].find((function(e){return e===b.position})))?"p-sidebar-".concat(K):"",b.maskClassName),$=F(),q=b.icons?p.getJSXElement(b.icons,b):null,B=e.createElement("div",{ref:N,style:b.maskStyle,className:Y,onMouseDown:D},e.createElement(r,{nodeRef:I,classNames:"p-sidebar",in:k,timeout:{enter:b.fullScreen?150:300,exit:b.fullScreen?150:300},options:b.transitionOptions,unmountOnExit:!0,onEntered:M,onExiting:L,onExited:_},e.createElement("div",f({ref:I,id:b.id,className:X,style:b.style},U,{role:"complementary"}),e.createElement("div",{className:"p-sidebar-header"},q,$),e.createElement("div",{className:"p-sidebar-content"},b.children)))),e.createElement(s,{element:B,appendTo:b.appendTo,visible:!0}))}));g.displayName="Sidebar",g.defaultProps={__TYPE:"Sidebar",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:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null};export{g as Sidebar};
+import*as e from"react";import n,{localeOption as t}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useEventListener as l,useMountEffect as o,useUpdateEffect as i,useUnmountEffect as a}from"primereact/hooks";import{Portal as s}from"primereact/portal";import{Ripple as c}from"primereact/ripple";import{ZIndexUtils as u,DomHandler as m,ObjectUtils as p,classNames as d}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},f.apply(this,arguments)}function b(e){if(Array.isArray(e))return e}function y(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,l,o,i,a=[],s=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;s=!1}else for(;!(s=(r=o.call(t)).done)&&(a.push(r.value),a.length!==n);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw l}}return a}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function h(e,n){if(e){if("string"==typeof e)return v(e,n);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)?v(e,n):void 0}}function S(){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,n){return b(e)||y(e,n)||h(e,n)||S()}var g=e.forwardRef((function(b,y){var v=E(e.useState(!1),2),h=v[0],S=v[1],w=E(e.useState(!1),2),k=w[0],C=w[1],I=e.useRef(null),O=e.useRef(null),N=e.useRef(null),x=E(l({type:"keydown",listener:function(e){27===e.which&&u.get(O.current)===u.getCurrent("modal",n.autoZIndex)&&H(e)}}),2),j=x[0],A=x[1],R=E(l({type:"click",listener:function(e){2!==e.which&&Z(e)&&H(e)}}),2),T=R[0],P=R[1],Z=function(e){return I&&I.current&&!I.current.contains(e.target)},D=function(e){b.dismissable&&b.modal&&O.current===e.target&&H(e)},H=function(e){b.onHide(),e.preventDefault()},M=function(){var e;b.onShow&&b.onShow(),!((e=document.activeElement)&&I&&I.current.contains(e))&&b.showCloseIcon&&N.current.focus(),z()},L=function(){b.modal&&m.addClass(O.current,"p-component-overlay-leave")},_=function(){u.clear(O.current),S(!1),J()},z=function(){b.closeOnEscape&&j(),b.dismissable&&!b.modal&&T(),b.blockScroll&&m.addClass(document.body,"p-overflow-hidden")},J=function(){A(),P(),b.blockScroll&&m.removeClass(document.body,"p-overflow-hidden")};e.useImperativeHandle(y,(function(){return{props:b,getElement:function(){return I.current},gteMask:function(){return O.current},getCloseIcon:function(){return N.current}}})),o((function(){b.visible&&S(!0)})),i((function(){b.visible&&!h&&S(!0),b.visible!==k&&h&&C(b.visible)})),i((function(){h&&(u.set("modal",O.current,n.autoZIndex,b.baseZIndex||n.zIndex.modal),C(!0))}),[h]),i((function(){k&&(P(),b.dismissable&&!b.modal&&T())}),[b.dismissable,b.modal,k]),a((function(){J(),O.current&&u.clear(O.current)}));var K,U,X,Y,$,q,B,F=function(){if(b.showCloseIcon){var n=b.ariaCloseLabel||t("close");return e.createElement("button",{type:"button",ref:N,className:"p-sidebar-close p-sidebar-icon p-link",onClick:H,"aria-label":n},e.createElement("span",{className:"p-sidebar-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(c,null))}return null};return h&&(U=p.findDiffKeys(b,g.defaultProps),X=d("p-sidebar p-component",b.className,{"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple}),Y=d("p-sidebar-mask",{"p-component-overlay p-component-overlay-enter":b.modal,"p-sidebar-mask-scrollblocker":b.blockScroll,"p-sidebar-visible":h,"p-sidebar-full":b.fullScreen},(K=["left","right","top","bottom"].find((function(e){return e===b.position})))?"p-sidebar-".concat(K):"",b.maskClassName),$=F(),q=b.icons?p.getJSXElement(b.icons,b):null,B=e.createElement("div",{ref:O,style:b.maskStyle,className:Y,onMouseDown:D},e.createElement(r,{nodeRef:I,classNames:"p-sidebar",in:k,timeout:{enter:b.fullScreen?150:300,exit:b.fullScreen?150:300},options:b.transitionOptions,unmountOnExit:!0,onEntered:M,onExiting:L,onExited:_},e.createElement("div",f({ref:I,id:b.id,className:X,style:b.style},U,{role:"complementary"}),e.createElement("div",{className:"p-sidebar-header"},q,$),e.createElement("div",{className:"p-sidebar-content"},b.children)))),e.createElement(s,{element:B,appendTo:b.appendTo,visible:!0}))}));g.displayName="Sidebar",g.defaultProps={__TYPE:"Sidebar",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:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null};export{g as Sidebar};

package/sidebar/sidebar.js

@@ -29,14 +29,12 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
     _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);
@@ -47,42 +45,40 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
   }
 
   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;
   }
 
@@ -105,54 +101,47 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
 
   var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        maskVisibleState = _React$useState2[0],
-        setMaskVisibleState = _React$useState2[1];
-
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      maskVisibleState = _React$useState2[0],
+      setMaskVisibleState = _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        visibleState = _React$useState4[0],
-        setVisibleState = _React$useState4[1];
-
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      visibleState = _React$useState4[0],
+      setVisibleState = _React$useState4[1];
     var sidebarRef = React__namespace.useRef(null);
     var maskRef = React__namespace.useRef(null);
     var closeIconRef = React__namespace.useRef(null);
-
     var _useEventListener = hooks.useEventListener({
-      type: 'keydown',
-      listener: function listener(event) {
-        if (event.which === 27) {
-          if (utils.ZIndexUtils.get(maskRef.current) === utils.ZIndexUtils.getCurrent('modal', PrimeReact__default["default"].autoZIndex)) {
-            onClose(event);
+        type: 'keydown',
+        listener: function listener(event) {
+          if (event.which === 27) {
+            if (utils.ZIndexUtils.get(maskRef.current) === utils.ZIndexUtils.getCurrent('modal', PrimeReact__default["default"].autoZIndex)) {
+              onClose(event);
+            }
           }
         }
-      }
-    }),
-        _useEventListener2 = _slicedToArray(_useEventListener, 2),
-        bindDocumentEscapeListener = _useEventListener2[0],
-        unbindDocumentEscapeListener = _useEventListener2[1];
-
+      }),
+      _useEventListener2 = _slicedToArray(_useEventListener, 2),
+      bindDocumentEscapeListener = _useEventListener2[0],
+      unbindDocumentEscapeListener = _useEventListener2[1];
     var _useEventListener3 = hooks.useEventListener({
-      type: 'click',
-      listener: function listener(event) {
-        if (event.which === 2) {
-          // left click
-          return;
-        }
-
-        if (isOutsideClicked(event)) {
-          onClose(event);
+        type: 'click',
+        listener: function listener(event) {
+          if (event.which === 2) {
+            // left click
+            return;
+          }
+          if (isOutsideClicked(event)) {
+            onClose(event);
+          }
         }
-      }
-    }),
-        _useEventListener4 = _slicedToArray(_useEventListener3, 2),
-        bindDocumentClickListener = _useEventListener4[0],
-        unbindDocumentClickListener = _useEventListener4[1];
-
+      }),
+      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+      bindDocumentClickListener = _useEventListener4[0],
+      unbindDocumentClickListener = _useEventListener4[1];
     var isOutsideClicked = function isOutsideClicked(event) {
       return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
     };
-
     var getPositionClass = function getPositionClass() {
       var positions = ['left', 'right', 'top', 'bottom'];
       var pos = positions.find(function (item) {
@@ -160,68 +149,55 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
       });
       return pos ? "p-sidebar-".concat(pos) : '';
     };
-
     var focus = function focus() {
       var activeElement = document.activeElement;
       var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
-
       if (!isActiveElementInDialog && props.showCloseIcon) {
         closeIconRef.current.focus();
       }
     };
-
     var onMaskClick = function onMaskClick(event) {
       if (props.dismissable && props.modal && maskRef.current === event.target) {
         onClose(event);
       }
     };
-
     var onClose = function onClose(event) {
       props.onHide();
       event.preventDefault();
     };
-
     var onEntered = function onEntered() {
       props.onShow && props.onShow();
       focus();
       enableDocumentSettings();
     };
-
     var onExiting = function onExiting() {
       if (props.modal) {
         utils.DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
       }
     };
-
     var onExited = function onExited() {
       utils.ZIndexUtils.clear(maskRef.current);
       setMaskVisibleState(false);
       disableDocumentSettings();
     };
-
     var enableDocumentSettings = function enableDocumentSettings() {
       if (props.closeOnEscape) {
         bindDocumentEscapeListener();
       }
-
       if (props.dismissable && !props.modal) {
         bindDocumentClickListener();
       }
-
       if (props.blockScroll) {
         utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
       }
     };
-
     var disableDocumentSettings = function disableDocumentSettings() {
       unbindDocumentEscapeListener();
       unbindDocumentClickListener();
-
       if (props.blockScroll) {
         utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     };
-
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -245,7 +221,6 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
       if (props.visible && !maskVisibleState) {
         setMaskVisibleState(true);
       }
-
       if (props.visible !== visibleState && maskVisibleState) {
         setVisibleState(props.visible);
       }
@@ -256,11 +231,19 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
         setVisibleState(true);
       }
     }, [maskVisibleState]);
+    hooks.useUpdateEffect(function () {
+      // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+      if (visibleState) {
+        unbindDocumentClickListener();
+        if (props.dismissable && !props.modal) {
+          bindDocumentClickListener();
+        }
+      }
+    }, [props.dismissable, props.modal, visibleState]);
     hooks.useUnmountEffect(function () {
       disableDocumentSettings();
       maskRef.current && utils.ZIndexUtils.clear(maskRef.current);
     });
-
     var createCloseIcon = function createCloseIcon() {
       if (props.showCloseIcon) {
         var ariaLabel = props.ariaCloseLabel || PrimeReact.localeOption('close');
@@ -275,17 +258,17 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
           "aria-hidden": "true"
         }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
-
       return null;
     };
-
     var createIcons = function createIcons() {
       return props.icons ? utils.ObjectUtils.getJSXElement(props.icons, props) : null;
     };
-
     var createElement = function createElement() {
       var otherProps = utils.ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-      var className = utils.classNames('p-sidebar p-component', props.className);
+      var className = utils.classNames('p-sidebar p-component', props.className, {
+        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+      });
       var maskClassName = utils.classNames('p-sidebar-mask', {
         'p-component-overlay p-component-overlay-enter': props.modal,
         'p-sidebar-mask-scrollblocker': props.blockScroll,
@@ -326,7 +309,6 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
         className: "p-sidebar-content"
       }, props.children))));
     };
-
     var createSidebar = function createSidebar() {
       var element = createElement();
       return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -335,7 +317,6 @@ this.primereact.sidebar = (function (exports, React, PrimeReact, csstransition,
         visible: true
       });
     };
-
     return maskVisibleState && createSidebar();
   });
   Sidebar.displayName = 'Sidebar';

package/sidebar/sidebar.min.css

@@ -1 +1 @@
-.p-sidebar-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;pointer-events:none;background-color:transparent;transition-property:background-color}.p-sidebar-visible{display:flex}.p-sidebar-mask.p-component-overlay{pointer-events:auto}.p-sidebar{display:flex;flex-direction:column;pointer-events:auto;transform:translate3d(0,0,0);position:relative}.p-sidebar-content{overflow-y:auto;flex-grow:1}.p-sidebar-header{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.p-sidebar-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-sidebar-full .p-sidebar{transition:none;transform:none;width:100vw !important;height:100vh !important;max-height:100%;top:0 !important;left:0 !important}.p-sidebar-top .p-sidebar-enter,.p-sidebar-top .p-sidebar-exit-active{transform:translate3d(0,-100%,0)}.p-sidebar-bottom .p-sidebar-enter,.p-sidebar-bottom .p-sidebar-exit-active{transform:translate3d(0,100%,0)}.p-sidebar-left .p-sidebar-enter,.p-sidebar-left .p-sidebar-exit-active{transform:translate3d(-100%,0,0)}.p-sidebar-right .p-sidebar-enter,.p-sidebar-right .p-sidebar-exit-active{transform:translate3d(100%,0,0)}.p-sidebar-top .p-sidebar-enter-active,.p-sidebar-bottom .p-sidebar-enter-active,.p-sidebar-left .p-sidebar-enter-active,.p-sidebar-right .p-sidebar-enter-active{transform:translate3d(0,0,0);transition:all .3s}.p-sidebar-top .p-sidebar-enter-done,.p-sidebar-bottom .p-sidebar-enter-done,.p-sidebar-left .p-sidebar-enter-done,.p-sidebar-right .p-sidebar-enter-done{transform:none}.p-sidebar-top .p-sidebar-exit-active,.p-sidebar-bottom .p-sidebar-exit-active,.p-sidebar-left .p-sidebar-exit-active,.p-sidebar-right .p-sidebar-exit-active{transition:all .3s}.p-sidebar-full .p-sidebar-enter{opacity:0;transform:scale(0.5)}.p-sidebar-full .p-sidebar-enter-active{opacity:1;transform:scale(1);transition:all .15s cubic-bezier(0,0,0.2,1)}.p-sidebar-full .p-sidebar-enter-done{transform:none}.p-sidebar-full .p-sidebar-exit-active{opacity:0;transform:scale(0.5);transition:all .15s cubic-bezier(0.4,0.0,0.2,1)}.p-sidebar-left{justify-content:flex-start}.p-sidebar-right{justify-content:flex-end}.p-sidebar-top{align-items:flex-start}.p-sidebar-bottom{align-items:flex-end}.p-sidebar-left .p-sidebar{width:20rem;height:100%}.p-sidebar-right .p-sidebar{width:20rem;height:100%}.p-sidebar-top .p-sidebar{height:10rem;width:100%}.p-sidebar-bottom .p-sidebar{height:10rem;width:100%}.p-sidebar-left .p-sidebar-sm,.p-sidebar-right .p-sidebar-sm{width:20rem}.p-sidebar-left .p-sidebar-md,.p-sidebar-right .p-sidebar-md{width:40rem}.p-sidebar-left .p-sidebar-lg,.p-sidebar-right .p-sidebar-lg{width:60rem}.p-sidebar-top .p-sidebar-sm,.p-sidebar-bottom .p-sidebar-sm{height:10rem}.p-sidebar-top .p-sidebar-md,.p-sidebar-bottom .p-sidebar-md{height:20rem}.p-sidebar-top .p-sidebar-lg,.p-sidebar-bottom .p-sidebar-lg{height:30rem}.p-sidebar-left .p-sidebar-view,.p-sidebar-right .p-sidebar-view,.p-sidebar-top .p-sidebar-view,.p-sidebar-bottom .p-sidebar-view{width:100%;height:100%}.p-sidebar-left .p-sidebar-content,.p-sidebar-right .p-sidebar-content,.p-sidebar-top .p-sidebar-content,.p-sidebar-bottom .p-sidebar-content{width:100%;height:100%}@media screen and (max-width:64em){.p-sidebar-left .p-sidebar-lg,.p-sidebar-left .p-sidebar-md,.p-sidebar-right .p-sidebar-lg,.p-sidebar-right .p-sidebar-md{width:20rem}}
+.p-sidebar-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;pointer-events:none;background-color:transparent;transition-property:background-color}.p-sidebar-visible{display:flex}.p-sidebar-mask.p-component-overlay{pointer-events:auto}.p-sidebar{display:flex;flex-direction:column;pointer-events:auto;transform:translate3d(0,0,0);position:relative}.p-sidebar:not([class*="p-sidebar-"]){display:none}.p-sidebar-content{overflow-y:auto;flex-grow:1}.p-sidebar-header{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.p-sidebar-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-sidebar-full .p-sidebar{transition:none;transform:none;width:100vw !important;height:100vh !important;max-height:100%;top:0 !important;left:0 !important}.p-sidebar-top .p-sidebar-enter,.p-sidebar-top .p-sidebar-exit-active{transform:translate3d(0,-100%,0)}.p-sidebar-bottom .p-sidebar-enter,.p-sidebar-bottom .p-sidebar-exit-active{transform:translate3d(0,100%,0)}.p-sidebar-left .p-sidebar-enter,.p-sidebar-left .p-sidebar-exit-active{transform:translate3d(-100%,0,0)}.p-sidebar-right .p-sidebar-enter,.p-sidebar-right .p-sidebar-exit-active{transform:translate3d(100%,0,0)}.p-sidebar-top .p-sidebar-enter-active,.p-sidebar-bottom .p-sidebar-enter-active,.p-sidebar-left .p-sidebar-enter-active,.p-sidebar-right .p-sidebar-enter-active{transform:translate3d(0,0,0);transition:all .3s}.p-sidebar-top .p-sidebar-enter-done,.p-sidebar-bottom .p-sidebar-enter-done,.p-sidebar-left .p-sidebar-enter-done,.p-sidebar-right .p-sidebar-enter-done{transform:none}.p-sidebar-top .p-sidebar-exit-active,.p-sidebar-bottom .p-sidebar-exit-active,.p-sidebar-left .p-sidebar-exit-active,.p-sidebar-right .p-sidebar-exit-active{transition:all .3s}.p-sidebar-full .p-sidebar-enter{opacity:0;transform:scale(0.5)}.p-sidebar-full .p-sidebar-enter-active{opacity:1;transform:scale(1);transition:all .15s cubic-bezier(0,0,0.2,1)}.p-sidebar-full .p-sidebar-enter-done{transform:none}.p-sidebar-full .p-sidebar-exit-active{opacity:0;transform:scale(0.5);transition:all .15s cubic-bezier(0.4,0.0,0.2,1)}.p-sidebar-left{justify-content:flex-start}.p-sidebar-right{justify-content:flex-end}.p-sidebar-top{align-items:flex-start}.p-sidebar-bottom{align-items:flex-end}.p-sidebar-left .p-sidebar{width:20rem;height:100%}.p-sidebar-right .p-sidebar{width:20rem;height:100%}.p-sidebar-top .p-sidebar{height:10rem;width:100%}.p-sidebar-bottom .p-sidebar{height:10rem;width:100%}.p-sidebar-left .p-sidebar-sm,.p-sidebar-right .p-sidebar-sm{width:20rem}.p-sidebar-left .p-sidebar-md,.p-sidebar-right .p-sidebar-md{width:40rem}.p-sidebar-left .p-sidebar-lg,.p-sidebar-right .p-sidebar-lg{width:60rem}.p-sidebar-top .p-sidebar-sm,.p-sidebar-bottom .p-sidebar-sm{height:10rem}.p-sidebar-top .p-sidebar-md,.p-sidebar-bottom .p-sidebar-md{height:20rem}.p-sidebar-top .p-sidebar-lg,.p-sidebar-bottom .p-sidebar-lg{height:30rem}.p-sidebar-left .p-sidebar-view,.p-sidebar-right .p-sidebar-view,.p-sidebar-top .p-sidebar-view,.p-sidebar-bottom .p-sidebar-view{width:100%;height:100%}.p-sidebar-left .p-sidebar-content,.p-sidebar-right .p-sidebar-content,.p-sidebar-top .p-sidebar-content,.p-sidebar-bottom .p-sidebar-content{width:100%;height:100%}@media screen and (max-width:64em){.p-sidebar-left .p-sidebar-lg,.p-sidebar-left .p-sidebar-md,.p-sidebar-right .p-sidebar-lg,.p-sidebar-right .p-sidebar-md{width:20rem}}