primereact 10.2.1 → 10.3.1

package/scrollpanel/scrollpanel.js

@@ -37,13 +37,69 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     return _extends.apply(this, arguments);
   }
 
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+
+  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;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _nonIterableRest() {
+    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 _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
   var ScrollPanelBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'ScrollPanel',
       id: null,
       style: null,
       className: null,
-      children: undefined
+      children: undefined,
+      step: 5
     },
     css: {
       classes: {
@@ -56,13 +112,21 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
         barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
         bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
       },
-      styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
+      styles: "\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "
     }
   });
 
   var ScrollPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = ScrollPanelBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(props.id),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      idState = _React$useState2[0],
+      setIdState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState('vertical'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      orientationState = _React$useState4[0],
+      setOrientationState = _React$useState4[1];
     var _ScrollPanelBase$setM = ScrollPanelBase.setMetaData({
         props: props
       }),
@@ -76,6 +140,14 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     var contentRef = React__namespace.useRef(null);
     var xBarRef = React__namespace.useRef(null);
     var yBarRef = React__namespace.useRef(null);
+    var _React$useState5 = React__namespace.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      lastScrollLeft = _React$useState6[0],
+      setLastScrollLeft = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      lastScrollTop = _React$useState8[0],
+      setLastScrollTop = _React$useState8[1];
     var isXBarClicked = React__namespace.useRef(false);
     var isYBarClicked = React__namespace.useRef(false);
     var lastPageX = React__namespace.useRef(null);
@@ -84,6 +156,8 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     var scrollYRatio = React__namespace.useRef(null);
     var frame = React__namespace.useRef(null);
     var initialized = React__namespace.useRef(false);
+    var timer = React__namespace.useRef(null);
+    var contentId = idState + '_content';
     var calculateContainerHeight = function calculateContainerHeight() {
       var containerStyles = getComputedStyle(containerRef.current);
       var xBarStyles = getComputedStyle(xBarRef.current);
@@ -123,6 +197,28 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
         }
       });
     };
+    var onFocus = function onFocus(event) {
+      if (xBarRef.current.isSameNode(event.target)) {
+        setOrientationState('horizontal');
+      } else if (yBarRef.current.isSameNode(event.target)) {
+        setOrientationState('vertical');
+      }
+    };
+    var onBlur = function onBlur() {
+      if (orientationState === 'horizontal') {
+        setOrientationState('vertical');
+      }
+    };
+    var onScroll = function onScroll(event) {
+      if (lastScrollLeft !== event.target.scrollLeft) {
+        setLastScrollLeft(event.target.scrollLeft);
+        setOrientationState('horizontal');
+      } else if (lastScrollTop !== event.target.scrollTop) {
+        setLastScrollTop(event.target.scrollTop);
+        setOrientationState('vertical');
+      }
+      moveBar();
+    };
     var onYBarMouseDown = function onYBarMouseDown(event) {
       isYBarClicked.current = true;
       lastPageY.current = event.pageY;
@@ -174,10 +270,76 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
       isXBarClicked.current = false;
       isYBarClicked.current = false;
     };
+    var onKeyDown = function onKeyDown(event) {
+      if (orientationState === 'vertical') {
+        switch (event.code) {
+          case 'ArrowDown':
+            {
+              setTimer('scrollTop', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowUp':
+            {
+              setTimer('scrollTop', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+          case 'ArrowRight':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      } else if (orientationState === 'horizontal') {
+        switch (event.code) {
+          case 'ArrowRight':
+            {
+              setTimer('scrollLeft', props.step);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowLeft':
+            {
+              setTimer('scrollLeft', props.step * -1);
+              event.preventDefault();
+              break;
+            }
+          case 'ArrowDown':
+          case 'ArrowUp':
+            {
+              event.preventDefault();
+              break;
+            }
+        }
+      }
+    };
+    var onKeyUp = function onKeyUp() {
+      clearTimer();
+    };
+    var repeat = function repeat(bar, step) {
+      contentRef.current[bar] += step;
+      moveBar();
+    };
+    var setTimer = function setTimer(bar, step) {
+      clearTimer();
+      timer.current = setTimeout(function () {
+        repeat(bar, step);
+      }, 40);
+    };
+    var clearTimer = function clearTimer() {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
     var refresh = function refresh() {
       moveBar();
     };
     hooks.useMountEffect(function () {
+      if (!props.id) {
+        setIdState(utils.UniqueComponentId());
+      }
       moveBar();
       window.addEventListener('resize', moveBar);
       calculateContainerHeight();
@@ -220,17 +382,35 @@ this.primereact.scrollpanel = (function (exports, React, api, hooks, utils, comp
     }, ptm('wrapper'));
     var contentProps = utils.mergeProps({
       className: cx('content'),
-      onScroll: moveBar,
+      onScroll: onScroll,
       onMouseEnter: moveBar
     }, ptm('content'));
     var barXProps = utils.mergeProps({
       ref: xBarRef,
+      role: 'scrollbar',
       className: cx('barx'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollTop,
+      'aria-controls': contentId,
+      'aria-orientation': 'horizontal',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
       onMouseDown: onXBarMouseDown
     }, ptm('barx'));
     var barYProps = utils.mergeProps({
       ref: yBarRef,
+      role: 'scrollbar',
       className: cx('bary'),
+      tabIndex: 0,
+      'aria-valuenow': lastScrollLeft,
+      'aria-controls': contentId,
+      'aria-orientation': 'vertical',
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
       onMouseDown: onYBarMouseDown
     }, ptm('bary'));
     return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("div", _extends({

package/scrollpanel/scrollpanel.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.scrollpanel=function(e,r,n,t,l,o){"use strict";function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var c=a(r);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},s.apply(this,arguments)}var u=o.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){return l.classNames("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n            \n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n            \n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n            \n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n            \n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n            \n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n            \n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n            \n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),i=c.forwardRef((function(e,r){var a=c.useContext(n.PrimeReactContext),i=u.getProps(e,a),p=u.setMetaData({props:i}),d=p.ptm,m=p.cx;o.useHandleStyle(u.css.styles,p.isUnstyled,{name:"scrollpanel"});var f=c.useRef(null),h=c.useRef(null),g=c.useRef(null),b=c.useRef(null),v=c.useRef(!1),y=c.useRef(!1),x=c.useRef(null),w=c.useRef(null),H=c.useRef(null),E=c.useRef(null),D=c.useRef(null),C=c.useRef(!1),P=function(){var e=h.current.scrollWidth,r=-1*(f.current.clientHeight-g.current.clientHeight);H.current=h.current.clientWidth/e;var n=h.current.scrollHeight,t=-1*(f.current.clientWidth-b.current.clientWidth);E.current=h.current.clientHeight/n,D.current=window.requestAnimationFrame((function(){H.current>=1?l.DomHandler.addClass(g.current,"p-scrollpanel-hidden"):(l.DomHandler.removeClass(g.current,"p-scrollpanel-hidden"),g.current.style.cssText="width:"+Math.max(100*H.current,10)+"%; left:"+h.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),E.current>=1?l.DomHandler.addClass(b.current,"p-scrollpanel-hidden"):(l.DomHandler.removeClass(b.current,"p-scrollpanel-hidden"),b.current.style.cssText="height:"+Math.max(100*E.current,10)+"%; top: calc("+h.current.scrollTop/n*100+"% - "+g.current.clientHeight+"px);right:"+t+"px;")}))},R=function(e){v.current?O(e):(y.current||O(e),L(e))},O=function(e){var r=e.pageX-x.current;x.current=e.pageX,D.current=window.requestAnimationFrame((function(){h.current.scrollLeft+=r/H.current}))},L=function(e){var r=e.pageY-w.current;w.current=e.pageY,D.current=window.requestAnimationFrame((function(){h.current.scrollTop+=r/E.current}))},j=function e(r){l.DomHandler.removeClass(b.current,"p-scrollpanel-grabbed"),l.DomHandler.removeClass(g.current,"p-scrollpanel-grabbed"),l.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",e),v.current=!1,y.current=!1},M=function(){P()};t.useMountEffect((function(){var e,r,n;P(),window.addEventListener("resize",P),e=getComputedStyle(f.current),r=getComputedStyle(g.current),n=l.DomHandler.getHeight(f.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(f.current.style.height=h.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:h.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),C.current=!0})),t.useUnmountEffect((function(){C.current&&window.removeEventListener("resize",P),D.current&&window.cancelAnimationFrame(D.current)})),c.useImperativeHandle(r,(function(){return{props:i,refresh:M,getElement:function(){return f.current},getContent:function(){return h.current},getXBar:function(){return g.current},getYBar:function(){return b.current}}}));var N=l.mergeProps({id:i.id,ref:f,style:i.style,className:m("root")},u.getOtherProps(i),d("root")),F=l.mergeProps({className:m("wrapper")},d("wrapper")),S=l.mergeProps({className:m("content"),onScroll:P,onMouseEnter:P},d("content")),T=l.mergeProps({ref:g,className:m("barx"),onMouseDown:function(e){v.current=!0,x.current=e.pageX,l.DomHandler.addClass(g.current,"p-scrollpanel-grabbed"),l.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",j),e.preventDefault()}},d("barx")),z=l.mergeProps({ref:b,className:m("bary"),onMouseDown:function(e){y.current=!0,w.current=e.pageY,l.DomHandler.addClass(b.current,"p-scrollpanel-grabbed"),l.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",R),document.addEventListener("mouseup",j),e.preventDefault()}},d("bary"));return c.createElement("div",N,c.createElement("div",F,c.createElement("div",s({ref:h},S),i.children)),c.createElement("div",T),c.createElement("div",z))}));return i.displayName="ScrollPanel",e.ScrollPanel=i,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.componentbase);
+this.primereact=this.primereact||{},this.primereact.scrollpanel=function(e,r,n,t,o,l){"use strict";function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var c=a(r);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},s.apply(this,arguments)}function u(e){if(Array.isArray(e))return e}function i(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,l,a,c=[],s=!0,u=!1;try{if(l=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;s=!1}else for(;!(s=(t=l.call(n)).done)&&(c.push(t.value),c.length!==r);s=!0);}catch(e){u=!0,o=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return c}}function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function d(e,r){if(e){if("string"==typeof e)return p(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,r):void 0}}function f(){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 m(e,r){return u(e)||i(e,r)||d(e,r)||f()}var h=l.ComponentBase.extend({defaultProps:{__TYPE:"ScrollPanel",id:null,style:null,className:null,children:void 0,step:5},css:{classes:{root:function(e){return o.classNames("p-scrollpanel p-component",e.props.className)},wrapper:"p-scrollpanel-wrapper",content:"p-scrollpanel-content",barx:"p-scrollpanel-bar p-scrollpanel-bar-x",bary:"p-scrollpanel-bar p-scrollpanel-bar-y"},styles:"\n        @layer primereact {\n            .p-scrollpanel-wrapper {\n                overflow: hidden;\n                width: 100%;\n                height: 100%;\n                position: relative;\n                z-index: 1;\n                float: left;\n            }\n\n            .p-scrollpanel-content {\n                height: calc(100% + 18px);\n                width: calc(100% + 18px);\n                padding: 0 18px 18px 0;\n                position: relative;\n                overflow: auto;\n                box-sizing: border-box;\n            }\n\n            .p-scrollpanel-bar {\n                position: relative;\n                background: #c1c1c1;\n                border-radius: 3px;\n                z-index: 2;\n                cursor: pointer;\n                opacity: 0;\n                transition: opacity 0.25s linear;\n            }\n\n            .p-scrollpanel-bar-y {\n                width: 9px;\n                top: 0;\n            }\n\n            .p-scrollpanel-bar-x {\n                height: 9px;\n                bottom: 0;\n            }\n\n            .p-scrollpanel-hidden {\n                visibility: hidden;\n            }\n\n            .p-scrollpanel:hover .p-scrollpanel-bar,\n            .p-scrollpanel:active .p-scrollpanel-bar {\n                opacity: 1;\n            }\n\n            .p-scrollpanel-grabbed {\n                user-select: none;\n            }\n        }\n        "}}),b=c.forwardRef((function(e,r){var a=c.useContext(n.PrimeReactContext),u=h.getProps(e,a),i=m(c.useState(u.id),2),p=i[0],d=i[1],f=m(c.useState("vertical"),2),b=f[0],v=f[1],g=h.setMetaData({props:u}),y=g.ptm,w=g.cx;l.useHandleStyle(h.css.styles,g.isUnstyled,{name:"scrollpanel"});var x=c.useRef(null),D=c.useRef(null),H=c.useRef(null),E=c.useRef(null),C=m(c.useState(0),2),A=C[0],R=C[1],S=m(c.useState(0),2),P=S[0],L=S[1],O=c.useRef(!1),j=c.useRef(!1),T=c.useRef(null),z=c.useRef(null),N=c.useRef(null),F=c.useRef(null),I=c.useRef(null),M=c.useRef(!1),U=c.useRef(null),k=p+"_content",B=function(){var e=D.current.scrollWidth,r=-1*(x.current.clientHeight-H.current.clientHeight);N.current=D.current.clientWidth/e;var n=D.current.scrollHeight,t=-1*(x.current.clientWidth-E.current.clientWidth);F.current=D.current.clientHeight/n,I.current=window.requestAnimationFrame((function(){N.current>=1?o.DomHandler.addClass(H.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(H.current,"p-scrollpanel-hidden"),H.current.style.cssText="width:"+Math.max(100*N.current,10)+"%; left:"+D.current.scrollLeft/e*100+"%;bottom:"+r+"px;"),F.current>=1?o.DomHandler.addClass(E.current,"p-scrollpanel-hidden"):(o.DomHandler.removeClass(E.current,"p-scrollpanel-hidden"),E.current.style.cssText="height:"+Math.max(100*F.current,10)+"%; top: calc("+D.current.scrollTop/n*100+"% - "+H.current.clientHeight+"px);right:"+t+"px;")}))},_=function(e){H.current.isSameNode(e.target)?v("horizontal"):E.current.isSameNode(e.target)&&v("vertical")},W=function(){"horizontal"===b&&v("vertical")},Y=function(e){O.current?q(e):(j.current||q(e),K(e))},q=function(e){var r=e.pageX-T.current;T.current=e.pageX,I.current=window.requestAnimationFrame((function(){D.current.scrollLeft+=r/N.current}))},K=function(e){var r=e.pageY-z.current;z.current=e.pageY,I.current=window.requestAnimationFrame((function(){D.current.scrollTop+=r/F.current}))},X=function e(r){o.DomHandler.removeClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(H.current,"p-scrollpanel-grabbed"),o.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),document.removeEventListener("mousemove",Y),document.removeEventListener("mouseup",e),O.current=!1,j.current=!1},$=function(e){if("vertical"===b)switch(e.code){case"ArrowDown":Q("scrollTop",u.step),e.preventDefault();break;case"ArrowUp":Q("scrollTop",-1*u.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===b)switch(e.code){case"ArrowRight":Q("scrollLeft",u.step),e.preventDefault();break;case"ArrowLeft":Q("scrollLeft",-1*u.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},G=function(){V()},J=function(e,r){D.current[e]+=r,B()},Q=function(e,r){V(),U.current=setTimeout((function(){J(e,r)}),40)},V=function(){U.current&&clearTimeout(U.current)},Z=function(){B()};t.useMountEffect((function(){var e,r,n;u.id||d(o.UniqueComponentId()),B(),window.addEventListener("resize",B),e=getComputedStyle(x.current),r=getComputedStyle(H.current),n=o.DomHandler.getHeight(x.current)-parseInt(r.height,10),"none"!==e["max-height"]&&0===n&&(x.current.style.height=D.current.offsetHeight+parseInt(r.height,10)>parseInt(e["max-height"],10)?e["max-height"]:D.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px"),M.current=!0})),t.useUnmountEffect((function(){M.current&&window.removeEventListener("resize",B),I.current&&window.cancelAnimationFrame(I.current)})),c.useImperativeHandle(r,(function(){return{props:u,refresh:Z,getElement:function(){return x.current},getContent:function(){return D.current},getXBar:function(){return H.current},getYBar:function(){return E.current}}}));var ee=o.mergeProps({id:u.id,ref:x,style:u.style,className:w("root")},h.getOtherProps(u),y("root")),re=o.mergeProps({className:w("wrapper")},y("wrapper")),ne=o.mergeProps({className:w("content"),onScroll:function(e){A!==e.target.scrollLeft?(R(e.target.scrollLeft),v("horizontal")):P!==e.target.scrollTop&&(L(e.target.scrollTop),v("vertical")),B()},onMouseEnter:B},y("content")),te=o.mergeProps({ref:H,role:"scrollbar",className:w("barx"),tabIndex:0,"aria-valuenow":P,"aria-controls":k,"aria-orientation":"horizontal",onFocus:_,onBlur:W,onKeyDown:$,onKeyUp:G,onMouseDown:function(e){O.current=!0,T.current=e.pageX,o.DomHandler.addClass(H.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",X),e.preventDefault()}},y("barx")),oe=o.mergeProps({ref:E,role:"scrollbar",className:w("bary"),tabIndex:0,"aria-valuenow":A,"aria-controls":k,"aria-orientation":"vertical",onFocus:_,onBlur:W,onKeyDown:$,onKeyUp:G,onMouseDown:function(e){j.current=!0,z.current=e.pageY,o.DomHandler.addClass(E.current,"p-scrollpanel-grabbed"),o.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),document.addEventListener("mousemove",Y),document.addEventListener("mouseup",X),e.preventDefault()}},y("bary"));return c.createElement("div",ee,c.createElement("div",re,c.createElement("div",s({ref:D},ne),u.children)),c.createElement("div",te),c.createElement("div",oe))}));return b.displayName="ScrollPanel",e.ScrollPanel=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.hooks,primereact.utils,primereact.componentbase);

package/sidebar/sidebar.cjs.js

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utils = require('primereact/utils');
 var PrimeReact = require('primereact/api');
 var componentbase = require('primereact/componentbase');
 var csstransition = require('primereact/csstransition');
@@ -12,6 +11,7 @@ var hooks = require('primereact/hooks');
 var times = require('primereact/icons/times');
 var portal = require('primereact/portal');
 var ripple = require('primereact/ripple');
+var utils = require('primereact/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -147,104 +147,6 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var usePrevious = function usePrevious(newValue) {
-  var ref = React__namespace.useRef(undefined);
-  React__namespace.useEffect(function () {
-    ref.current = newValue;
-  });
-  return ref.current;
-};
-
-/* eslint-disable */
-var useUnmountEffect = function useUnmountEffect(fn) {
-  return React__namespace.useEffect(function () {
-    return fn;
-  }, []);
-};
-/* eslint-enable */
-
-/* eslint-disable */
-var useEventListener = function useEventListener(_ref) {
-  var _ref$target = _ref.target,
-    target = _ref$target === void 0 ? 'document' : _ref$target,
-    type = _ref.type,
-    listener = _ref.listener,
-    options = _ref.options,
-    _ref$when = _ref.when,
-    when = _ref$when === void 0 ? true : _ref$when;
-  var targetRef = React__namespace.useRef(null);
-  var listenerRef = React__namespace.useRef(null);
-  var prevOptions = usePrevious(options);
-  var bind = function bind() {
-    var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (utils.ObjectUtils.isNotEmpty(bindOptions.target)) {
-      unbind();
-      (bindOptions.when || when) && (targetRef.current = utils.DomHandler.getTargetElement(bindOptions.target));
-    }
-    if (!listenerRef.current && targetRef.current) {
-      listenerRef.current = function (event) {
-        return listener && listener(event);
-      };
-      targetRef.current.addEventListener(type, listenerRef.current, options);
-    }
-  };
-  var unbind = function unbind() {
-    if (listenerRef.current) {
-      targetRef.current.removeEventListener(type, listenerRef.current, options);
-      listenerRef.current = null;
-    }
-  };
-  React__namespace.useEffect(function () {
-    if (when) {
-      targetRef.current = utils.DomHandler.getTargetElement(target);
-    } else {
-      unbind();
-      targetRef.current = null;
-    }
-  }, [target, when]);
-  React__namespace.useEffect(function () {
-    if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
-      unbind();
-      when && bind();
-    }
-  }, [listener, options]);
-  useUnmountEffect(function () {
-    unbind();
-  });
-  return [bind, unbind];
-};
-/* eslint-enable */
-
-var useOnEscapeKey = function useOnEscapeKey(ref, condition, callback) {
-  var handleEsc = function handleEsc(event) {
-    if (event.key === 'Esc' || event.key === 'Escape') {
-      event.stopImmediatePropagation();
-      callback(event);
-    }
-    return;
-  };
-  var _useEventListener = useEventListener({
-      type: 'keydown',
-      listener: handleEsc
-    }),
-    _useEventListener2 = _slicedToArray(_useEventListener, 2),
-    bindKeyDownListener = _useEventListener2[0],
-    unbindKeyDownListener = _useEventListener2[1];
-  React__namespace.useEffect(function () {
-    if (!condition) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    bindKeyDownListener();
-    return function () {
-      unbindKeyDownListener();
-    };
-  });
-  return [ref, callback];
-};
-
 var classes = {
   closeButton: 'p-sidebar-close p-sidebar-icon p-link',
   closeIcon: 'p-sidebar-close-icon',
@@ -358,10 +260,13 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var sidebarRef = React__namespace.useRef(null);
   var maskRef = React__namespace.useRef(null);
   var closeIconRef = React__namespace.useRef(null);
-  useOnEscapeKey(maskRef, props.closeOnEscape, function (event) {
-    if (utils.ZIndexUtils.get(maskRef.current) === utils.ZIndexUtils.getCurrent('modal', context && context.autoZIndex || PrimeReact__default["default"].autoZIndex)) {
+  var sidebarDisplayOrder = hooks.useDisplayOrder('sidebar', visibleState);
+  hooks.useGlobalOnEscapeKey({
+    callback: function callback(event) {
       onClose(event);
-    }
+    },
+    when: visibleState && props.closeOnEscape,
+    priority: [hooks.ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
   });
   var _useEventListener = hooks.useEventListener({
       type: 'click',
@@ -384,7 +289,7 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
-    if (!isActiveElementInDialog && props.showCloseIcon) {
+    if (!isActiveElementInDialog && props.showCloseIcon && closeIconRef.current) {
       closeIconRef.current.focus();
     }
   };
@@ -473,6 +378,7 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     maskRef.current && utils.ZIndexUtils.clear(maskRef.current);
   });
   var createCloseIcon = function createCloseIcon() {
+    var ariaLabel = props.ariaCloseLabel || PrimeReact.localeOption('close');
     var closeButtonProps = utils.mergeProps({
       type: 'button',
       ref: closeIconRef,
@@ -489,7 +395,6 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, closeIconProps), {
       props: props
     });
-    var ariaLabel = props.ariaCloseLabel || PrimeReact.localeOption('close');
     if (props.showCloseIcon) {
       return /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
@@ -501,51 +406,62 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var createIcons = function createIcons() {
     return props.icons ? utils.ObjectUtils.getJSXElement(props.icons, props) : null;
   };
+  var maskProps = utils.mergeProps({
+    ref: maskRef,
+    style: sx('mask'),
+    className: cx('mask', {
+      maskVisibleState: maskVisibleState
+    }),
+    onMouseDown: function onMouseDown(e) {
+      return onMaskClick(e);
+    }
+  }, ptm('mask'));
+  var rootProps = utils.mergeProps({
+    id: props.id,
+    className: cx('root', {
+      context: context
+    }),
+    style: props.style,
+    role: 'complementary'
+  }, SidebarBase.getOtherProps(props), ptm('root'));
+  var headerProps = utils.mergeProps({
+    className: cx('header')
+  }, ptm('header'));
+  var contentProps = utils.mergeProps({
+    className: cx('content')
+  }, ptm('content'));
+  var iconsProps = utils.mergeProps({
+    className: cx('icons')
+  }, ptm('icons'));
+  var transitionTimeout = {
+    enter: props.fullScreen ? 150 : 300,
+    exit: props.fullScreen ? 150 : 300
+  };
+  var transitionProps = utils.mergeProps({
+    classNames: cx('transition'),
+    "in": visibleState,
+    timeout: transitionTimeout,
+    options: props.transitionOptions,
+    unmountOnExit: true,
+    onEntered: onEntered,
+    onExiting: onExiting,
+    onExited: onExited
+  }, ptm('transition'));
+  var createTemplateElement = function createTemplateElement() {
+    var templateElementProps = {
+      closeIconRef: closeIconRef,
+      hide: onClose
+    };
+    return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+      nodeRef: sidebarRef
+    }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
+      ref: sidebarRef
+    }, rootProps), utils.ObjectUtils.getJSXElement(inProps.content, templateElementProps))));
+  };
   var createElement = function createElement() {
     var closeIcon = createCloseIcon();
     var icons = createIcons();
     var header = createHeader();
-    var transitionTimeout = {
-      enter: props.fullScreen ? 150 : 300,
-      exit: props.fullScreen ? 150 : 300
-    };
-    var maskProps = utils.mergeProps({
-      ref: maskRef,
-      style: sx('mask'),
-      className: cx('mask', {
-        maskVisibleState: maskVisibleState
-      }),
-      onMouseDown: function onMouseDown(e) {
-        return onMaskClick(e);
-      }
-    }, ptm('mask'));
-    var rootProps = utils.mergeProps({
-      id: props.id,
-      className: cx('root', {
-        context: context
-      }),
-      style: props.style,
-      role: 'complementary'
-    }, SidebarBase.getOtherProps(props), ptm('root'));
-    var headerProps = utils.mergeProps({
-      className: cx('header')
-    }, ptm('header'));
-    var contentProps = utils.mergeProps({
-      className: cx('content')
-    }, ptm('content'));
-    var iconsProps = utils.mergeProps({
-      className: cx('icons')
-    }, ptm('icons'));
-    var transitionProps = utils.mergeProps({
-      classNames: cx('transition'),
-      "in": visibleState,
-      timeout: transitionTimeout,
-      options: props.transitionOptions,
-      unmountOnExit: true,
-      onEntered: onEntered,
-      onExiting: onExiting,
-      onExited: onExited
-    }, ptm('transition'));
     return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
       nodeRef: sidebarRef
     }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -553,7 +469,7 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     }, rootProps), /*#__PURE__*/React__namespace.createElement("div", headerProps, header, /*#__PURE__*/React__namespace.createElement("div", iconsProps, icons, closeIcon)), /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children))));
   };
   var createSidebar = function createSidebar() {
-    var element = createElement();
+    var element = inProps !== null && inProps !== void 0 && inProps.content ? createTemplateElement() : createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
       element: element,
       appendTo: props.appendTo,

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/utils"),t=require("primereact/api"),r=require("primereact/componentbase"),i=require("primereact/csstransition"),a=require("primereact/hooks"),o=require("primereact/icons/times"),s=require("primereact/portal"),l=require("primereact/ripple");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=p(e),u=c(t);function b(){return b=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},b.apply(this,arguments)}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},f(e)}function m(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function v(e){var n=m(e,"string");return"symbol"===f(n)?n:String(n)}function y(e){if(Array.isArray(e))return e}function h(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,s=[],l=!0,c=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=a.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){c=!0,i=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw i}}return s}}function g(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 x(e,n){if(e){if("string"==typeof e)return g(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)?g(e,n):void 0}}function w(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function S(e,n){return y(e)||h(e,n)||x(e,n)||w()}var E=function(e){var t,r,i,a=e.target,o=void 0===a?"document":a,s=e.type,l=e.listener,c=e.options,p=e.when,u=void 0===p||p,b=d.useRef(null),f=d.useRef(null),m=(t=c,r=d.useRef(void 0),d.useEffect((function(){r.current=t})),r.current),v=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n.ObjectUtils.isNotEmpty(e.target)&&(y(),(e.when||u)&&(b.current=n.DomHandler.getTargetElement(e.target))),!f.current&&b.current&&(f.current=function(e){return l&&l(e)},b.current.addEventListener(s,f.current,c))},y=function(){f.current&&(b.current.removeEventListener(s,f.current,c),f.current=null)};return d.useEffect((function(){u?b.current=n.DomHandler.getTargetElement(o):(y(),b.current=null)}),[o,u]),d.useEffect((function(){!f.current||f.current===l&&m===c||(y(),u&&v())}),[l,c]),i=function(){y()},d.useEffect((function(){return i}),[]),[v,y]},O=function(e,n,t){var r=S(E({type:"keydown",listener:function(e){"Esc"!==e.key&&"Escape"!==e.key||(e.stopImmediatePropagation(),t(e))}}),2),i=r[0],a=r[1];return d.useEffect((function(){if(n&&e.current)return i(),function(){a()}})),[e,t]},j=r.ComponentBase.extend({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,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var t=e.props,r=e.maskVisibleState,i=["left","right","top","bottom"].find((function(e){return e===t.position}));return n.classNames("p-sidebar-mask",i&&!t.fullScreen?"p-sidebar-".concat(i):"",{"p-component-overlay p-component-overlay-enter":t.modal,"p-sidebar-mask-scrollblocker":t.blockScroll,"p-sidebar-visible":r,"p-sidebar-full":t.fullScreen},t.maskClassName)},header:function(e){return n.classNames("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var t=e.context;return n.classNames("p-sidebar p-component",e.props.className,{"p-input-filled":t&&"filled"===t.inputStyle||"filled"===u.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===u.default.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n    .p-sidebar-mask {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n    }\n    \n    .p-sidebar-custom-header {\n        justify-content: space-between;\n    }\n    \n    .p-sidebar-icons {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw;\n        height: 100vh;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Animation */\n    /* Top, Bottom, Left and Right */\n    .p-sidebar-top .p-sidebar-enter,\n    .p-sidebar-top .p-sidebar-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-sidebar-bottom .p-sidebar-enter,\n    .p-sidebar-bottom .p-sidebar-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-sidebar-left .p-sidebar-enter,\n    .p-sidebar-left .p-sidebar-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-sidebar-right .p-sidebar-enter,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-active,\n    .p-sidebar-bottom .p-sidebar-enter-active,\n    .p-sidebar-left .p-sidebar-enter-active,\n    .p-sidebar-right .p-sidebar-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s;\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-done,\n    .p-sidebar-bottom .p-sidebar-enter-done,\n    .p-sidebar-left .p-sidebar-enter-done,\n    .p-sidebar-right .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-top .p-sidebar-exit-active,\n    .p-sidebar-bottom .p-sidebar-exit-active,\n    .p-sidebar-left .p-sidebar-exit-active,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transition: all 0.3s;\n    }\n    \n    /* Full */\n    .p-sidebar-full .p-sidebar-enter {\n        opacity: 0;\n        transform: scale(0.5);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-full .p-sidebar-exit-active {\n        opacity: 0;\n        transform: scale(0.5);\n        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-view,\n    .p-sidebar-right .p-sidebar-view,\n    .p-sidebar-top .p-sidebar-view,\n    .p-sidebar-bottom .p-sidebar-view {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }        \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}});function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){var r,i,a;r=e,a=t[n],(i=v(i=n))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var P=d.forwardRef((function(e,c){var p=d.useContext(t.PrimeReactContext),f=j.getProps(e,p),m=S(d.useState(!1),2),v=m[0],y=m[1],h=S(d.useState(!1),2),g=h[0],x=h[1],w=j.setMetaData({props:f,state:{containerVisible:v}}),E=w.ptm,k=w.cx,P=w.sx;r.useHandleStyle(j.css.styles,w.isUnstyled,{name:"sidebar"});var N=d.useRef(null),C=d.useRef(null),U=d.useRef(null);O(C,f.closeOnEscape,(function(e){n.ZIndexUtils.get(C.current)===n.ZIndexUtils.getCurrent("modal",p&&p.autoZIndex||u.default.autoZIndex)&&q(e)}));var D=S(a.useEventListener({type:"click",listener:function(e){0===e.button&&Z(e)&&q(e)}}),2),R=D[0],T=D[1],Z=function(e){return N&&N.current&&!N.current.contains(e.target)},q=function(e){f.onHide(),e.preventDefault()},H=function(){var e;f.onShow&&f.onShow(),!((e=document.activeElement)&&N&&N.current.contains(e))&&f.showCloseIcon&&U.current.focus(),M()},A=function(){f.modal&&n.DomHandler.addClass(C.current,"p-component-overlay-leave")},B=function(){n.ZIndexUtils.clear(C.current),y(!1),z()},M=function(){f.dismissable&&!f.modal&&R(),f.blockScroll&&n.DomHandler.blockBodyScroll()},z=function(){T(),f.blockScroll&&n.DomHandler.unblockBodyScroll()};d.useImperativeHandle(c,(function(){return{props:f,getElement:function(){return N.current},gteMask:function(){return C.current},getCloseIcon:function(){return U.current}}})),a.useMountEffect((function(){f.visible&&y(!0)})),a.useUpdateEffect((function(){f.visible&&!v&&y(!0),f.visible!==g&&v&&x(f.visible)})),a.useUpdateEffect((function(){v&&(n.ZIndexUtils.set("modal",C.current,p&&p.autoZIndex||u.default.autoZIndex,f.baseZIndex||p&&p.zIndex.modal||u.default.zIndex.modal),x(!0))}),[v]),a.useUpdateEffect((function(){g&&(T(),f.dismissable&&!f.modal&&R())}),[f.dismissable,f.modal,g]),a.useUnmountEffect((function(){z(),C.current&&n.ZIndexUtils.clear(C.current)}));var L,_,J,V,X,F,Y,$,G,K,Q,W=function(){var e=n.mergeProps({type:"button",ref:U,className:k("closeButton"),onClick:function(e){return q(e)},"aria-label":a},E("closeButton")),r=n.mergeProps({className:k("closeIcon")},E("closeIcon")),i=n.IconUtils.getJSXIcon(f.closeIcon||d.createElement(o.TimesIcon,r),I({},r),{props:f}),a=f.ariaCloseLabel||t.localeOption("close");return f.showCloseIcon?d.createElement("button",e,i,d.createElement(l.Ripple,null)):null};return v&&(L=W(),_=f.icons?n.ObjectUtils.getJSXElement(f.icons,f):null,J=f.header?n.ObjectUtils.getJSXElement(f.header,f):null,V={enter:f.fullScreen?150:300,exit:f.fullScreen?150:300},X=n.mergeProps({ref:C,style:P("mask"),className:k("mask",{maskVisibleState:v}),onMouseDown:function(e){return n=e,void(f.dismissable&&f.modal&&C.current===n.target&&q(n));var n}},E("mask")),F=n.mergeProps({id:f.id,className:k("root",{context:p}),style:f.style,role:"complementary"},j.getOtherProps(f),E("root")),Y=n.mergeProps({className:k("header")},E("header")),$=n.mergeProps({className:k("content")},E("content")),G=n.mergeProps({className:k("icons")},E("icons")),K=n.mergeProps({classNames:k("transition"),in:g,timeout:V,options:f.transitionOptions,unmountOnExit:!0,onEntered:H,onExiting:A,onExited:B},E("transition")),Q=d.createElement("div",X,d.createElement(i.CSSTransition,b({nodeRef:N},K),d.createElement("div",b({ref:N},F),d.createElement("div",Y,J,d.createElement("div",G,_,L)),d.createElement("div",$,f.children)))),d.createElement(s.Portal,{element:Q,appendTo:f.appendTo,visible:!0}))}));P.displayName="Sidebar",exports.Sidebar=P;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),r=require("primereact/csstransition"),i=require("primereact/hooks"),a=require("primereact/icons/times"),o=require("primereact/portal"),s=require("primereact/ripple"),l=require("primereact/utils");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=c(e),b=p(n);function u(){return u=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},u.apply(this,arguments)}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},f(e)}function m(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function h(e){var n=m(e,"string");return"symbol"===f(n)?n:String(n)}function y(e){if(Array.isArray(e))return e}function v(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,s=[],l=!0,p=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=a.call(t)).done)&&(s.push(r.value),s.length!==n);l=!0);}catch(e){p=!0,i=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(p)throw i}}return s}}function g(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 x(e,n){if(e){if("string"==typeof e)return g(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)?g(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 w(e,n){return y(e)||v(e,n)||x(e,n)||S()}var O=t.ComponentBase.extend({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,closeIcon:null,ariaCloseLabel:null,closeOnEscape:!0,icons:null,modal:!0,appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},css:{classes:{closeButton:"p-sidebar-close p-sidebar-icon p-link",closeIcon:"p-sidebar-close-icon",mask:function(e){var n=e.props,t=e.maskVisibleState,r=["left","right","top","bottom"].find((function(e){return e===n.position}));return l.classNames("p-sidebar-mask",r&&!n.fullScreen?"p-sidebar-".concat(r):"",{"p-component-overlay p-component-overlay-enter":n.modal,"p-sidebar-mask-scrollblocker":n.blockScroll,"p-sidebar-visible":t,"p-sidebar-full":n.fullScreen},n.maskClassName)},header:function(e){return l.classNames("p-sidebar-header",{"p-sidebar-custom-header":e.props.header})},content:"p-sidebar-content",icons:"p-sidebar-icons",root:function(e){var n=e.context;return l.classNames("p-sidebar p-component",e.props.className,{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===b.default.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===b.default.ripple})},transition:"p-sidebar"},styles:"\n@layer primereact {\n    .p-sidebar-mask {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-sidebar-visible {\n        display: flex;\n    }\n    \n    .p-sidebar-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-sidebar {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        transform: translate3d(0px, 0px, 0px);\n        position: relative;\n    }\n    \n    .p-sidebar-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-sidebar-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n    }\n    \n    .p-sidebar-custom-header {\n        justify-content: space-between;\n    }\n    \n    .p-sidebar-icons {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-sidebar-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-sidebar-full .p-sidebar {\n        transition: none;\n        transform: none;\n        width: 100vw;\n        height: 100vh;\n        max-height: 100%;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Animation */\n    /* Top, Bottom, Left and Right */\n    .p-sidebar-top .p-sidebar-enter,\n    .p-sidebar-top .p-sidebar-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-sidebar-bottom .p-sidebar-enter,\n    .p-sidebar-bottom .p-sidebar-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-sidebar-left .p-sidebar-enter,\n    .p-sidebar-left .p-sidebar-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-sidebar-right .p-sidebar-enter,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-active,\n    .p-sidebar-bottom .p-sidebar-enter-active,\n    .p-sidebar-left .p-sidebar-enter-active,\n    .p-sidebar-right .p-sidebar-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s;\n    }\n    \n    .p-sidebar-top .p-sidebar-enter-done,\n    .p-sidebar-bottom .p-sidebar-enter-done,\n    .p-sidebar-left .p-sidebar-enter-done,\n    .p-sidebar-right .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-top .p-sidebar-exit-active,\n    .p-sidebar-bottom .p-sidebar-exit-active,\n    .p-sidebar-left .p-sidebar-exit-active,\n    .p-sidebar-right .p-sidebar-exit-active {\n        transition: all 0.3s;\n    }\n    \n    /* Full */\n    .p-sidebar-full .p-sidebar-enter {\n        opacity: 0;\n        transform: scale(0.5);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-sidebar-full .p-sidebar-enter-done {\n        transform: none;\n    }\n    \n    .p-sidebar-full .p-sidebar-exit-active {\n        opacity: 0;\n        transform: scale(0.5);\n        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Size */\n    .p-sidebar-left .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-right .p-sidebar {\n        width: 20rem;\n        height: 100%;\n    }\n    \n    .p-sidebar-top .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-bottom .p-sidebar {\n        height: 10rem;\n        width: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-sm,\n    .p-sidebar-right .p-sidebar-sm {\n        width: 20rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-md {\n        width: 40rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-lg {\n        width: 60rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-sm,\n    .p-sidebar-bottom .p-sidebar-sm {\n        height: 10rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-md,\n    .p-sidebar-bottom .p-sidebar-md {\n        height: 20rem;\n    }\n    \n    .p-sidebar-top .p-sidebar-lg,\n    .p-sidebar-bottom .p-sidebar-lg {\n        height: 30rem;\n    }\n    \n    .p-sidebar-left .p-sidebar-view,\n    .p-sidebar-right .p-sidebar-view,\n    .p-sidebar-top .p-sidebar-view,\n    .p-sidebar-bottom .p-sidebar-view {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .p-sidebar-left .p-sidebar-content,\n    .p-sidebar-right .p-sidebar-content,\n    .p-sidebar-top .p-sidebar-content,\n    .p-sidebar-bottom .p-sidebar-content {\n        width: 100%;\n        height: 100%;\n    }\n    \n    @media screen and (max-width: 64em) {\n        .p-sidebar-left .p-sidebar-lg,\n        .p-sidebar-left .p-sidebar-md,\n        .p-sidebar-right .p-sidebar-lg,\n        .p-sidebar-right .p-sidebar-md {\n            width: 20rem;\n        }\n    }        \n}\n",inlineStyles:{mask:function(e){var n=e.props;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===n.position?"flex-start":"right"===n.position?"flex-end":"center",alignItems:"top"===n.position?"flex-start":"bottom"===n.position?"flex-end":"center"}}}}});function E(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?E(Object(t),!0).forEach((function(n){var r,i,a;r=e,a=t[n],(i=h(i=n))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var k=d.forwardRef((function(e,p){var c=d.useContext(n.PrimeReactContext),f=O.getProps(e,c),m=w(d.useState(!1),2),h=m[0],y=m[1],v=w(d.useState(!1),2),g=v[0],x=v[1],S=O.setMetaData({props:f,state:{containerVisible:h}}),E=S.ptm,k=S.cx,I=S.sx;t.useHandleStyle(O.css.styles,S.isUnstyled,{name:"sidebar"});var P=d.useRef(null),N=d.useRef(null),C=d.useRef(null),D=i.useDisplayOrder("sidebar",g);i.useGlobalOnEscapeKey({callback:function(e){A(e)},when:g&&f.closeOnEscape,priority:[i.ESC_KEY_HANDLING_PRIORITIES.SIDEBAR,D]});var R=w(i.useEventListener({type:"click",listener:function(e){0===e.button&&q(e)&&A(e)}}),2),U=R[0],T=R[1],q=function(e){return P&&P.current&&!P.current.contains(e.target)},A=function(e){f.onHide(),e.preventDefault()},_=function(){f.dismissable&&!f.modal&&U(),f.blockScroll&&l.DomHandler.blockBodyScroll()},B=function(){T(),f.blockScroll&&l.DomHandler.unblockBodyScroll()};d.useImperativeHandle(p,(function(){return{props:f,getElement:function(){return P.current},gteMask:function(){return N.current},getCloseIcon:function(){return C.current}}})),i.useMountEffect((function(){f.visible&&y(!0)})),i.useUpdateEffect((function(){f.visible&&!h&&y(!0),f.visible!==g&&h&&x(f.visible)})),i.useUpdateEffect((function(){h&&(l.ZIndexUtils.set("modal",N.current,c&&c.autoZIndex||b.default.autoZIndex,f.baseZIndex||c&&c.zIndex.modal||b.default.zIndex.modal),x(!0))}),[h]),i.useUpdateEffect((function(){g&&(T(),f.dismissable&&!f.modal&&U())}),[f.dismissable,f.modal,g]),i.useUnmountEffect((function(){B(),N.current&&l.ZIndexUtils.clear(N.current)}));var H,M,Z,z,L,J=function(){var e=f.ariaCloseLabel||n.localeOption("close"),t=l.mergeProps({type:"button",ref:C,className:k("closeButton"),onClick:function(e){return A(e)},"aria-label":e},E("closeButton")),r=l.mergeProps({className:k("closeIcon")},E("closeIcon")),i=l.IconUtils.getJSXIcon(f.closeIcon||d.createElement(a.TimesIcon,r),j({},r),{props:f});return f.showCloseIcon?d.createElement("button",t,i,d.createElement(s.Ripple,null)):null},X=l.mergeProps({ref:N,style:I("mask"),className:k("mask",{maskVisibleState:h}),onMouseDown:function(e){return n=e,void(f.dismissable&&f.modal&&N.current===n.target&&A(n));var n}},E("mask")),V=l.mergeProps({id:f.id,className:k("root",{context:c}),style:f.style,role:"complementary"},O.getOtherProps(f),E("root")),G=l.mergeProps({className:k("header")},E("header")),K=l.mergeProps({className:k("content")},E("content")),Y=l.mergeProps({className:k("icons")},E("icons")),F={enter:f.fullScreen?150:300,exit:f.fullScreen?150:300},$=l.mergeProps({classNames:k("transition"),in:g,timeout:F,options:f.transitionOptions,unmountOnExit:!0,onEntered:function(){var e;f.onShow&&f.onShow(),!((e=document.activeElement)&&P&&P.current.contains(e))&&f.showCloseIcon&&C.current&&C.current.focus(),_()},onExiting:function(){f.modal&&l.DomHandler.addClass(N.current,"p-component-overlay-leave")},onExited:function(){l.ZIndexUtils.clear(N.current),y(!1),B()}},E("transition"));return h&&(L=null!=e&&e.content?(z={closeIconRef:C,hide:A},d.createElement("div",X,d.createElement(r.CSSTransition,u({nodeRef:P},$),d.createElement("div",u({ref:P},V),l.ObjectUtils.getJSXElement(e.content,z))))):(H=J(),M=f.icons?l.ObjectUtils.getJSXElement(f.icons,f):null,Z=f.header?l.ObjectUtils.getJSXElement(f.header,f):null,d.createElement("div",X,d.createElement(r.CSSTransition,u({nodeRef:P},$),d.createElement("div",u({ref:P},V),d.createElement("div",G,Z,d.createElement("div",Y,M,H)),d.createElement("div",K,f.children))))),d.createElement(o.Portal,{element:L,appendTo:f.appendTo,visible:!0}))}));k.displayName="Sidebar",exports.Sidebar=k;