primereact/sidebar/sidebar.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

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