primereact/slidemenu/slidemenu.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,{PrimeReactContext as t}from"primereact/api";import{ComponentBase as r,useHandleStyle as i}from"primereact/componentbase";import{CSSTransition as o}from"primereact/csstransition";import{useMergeProps as a,useDisplayOrder as u,useGlobalOnEscapeKey as l,ESC_KEY_HANDLING_PRIORITIES as s,useOverlayListener as c,useMountEffect as m,useUpdateEffect as p,useUnmountEffect as d}from"primereact/hooks";import{ChevronLeftIcon as f}from"primereact/icons/chevronleft";import{OverlayService as b}from"primereact/overlayservice";import{Portal as v}from"primereact/portal";import{classNames as y,IconUtils as g,ObjectUtils as h,DomHandler as w,UniqueComponentId as O,ZIndexUtils as S}from"primereact/utils";import{AngleRightIcon as x}from"primereact/icons/angleright";function E(){return E=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},E.apply(null,arguments)}function P(e){return P="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},P(e)}function N(e,n){if("object"!=P(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=P(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function j(e){var n=N(e,"string");return"symbol"==P(n)?n:n+""}function I(e,n,t){return(n=j(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function k(e){if(Array.isArray(e))return e}function D(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,o,a,u=[],l=!0,s=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=o.call(t)).done)&&(u.push(r.value),u.length!==n);l=!0);}catch(e){s=!0,i=e}finally{try{if(!l&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(s)throw i}}return u}}function A(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function C(e,n){if(e){if("string"==typeof e)return A(e,n);var t={}.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)?A(e,n):void 0}}function T(){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 k(e)||D(e,n)||C(e,n)||T()}var M=r.extend({defaultProps:{__TYPE:"SlideMenu",appendTo:null,autoZIndex:!0,backIcon:null,backLabel:"Back",baseZIndex:0,className:null,easing:"ease-out",effectDuration:250,id:null,menuWidth:190,model:null,onHide:null,onShow:null,onNavigate:null,popup:!1,style:null,submenuIcon:null,transitionOptions:null,viewportHeight:175,children:void 0,closeOnEscape:!0},css:{classes:{previousIcon:"p-slidemenu-backward-icon",previous:function(e){var n=e.levelState;return y("p-slidemenu-backward",{"p-hidden-space":0===n,"p-slidemenu-separator":n>0})},root:function(e){return y("p-slidemenu p-component",{"p-slidemenu-overlay":e.props.popup})},wrapper:"p-slidemenu-wrapper",content:"p-slidemenu-content",separator:"p-slidemenu-separator",icon:"p-menuitem-icon",submenuIcon:"p-submenu-icon",label:"p-menuitem-text",action:"p-menuitem-link",menu:function(e){var n=e.subProps;return y({"p-slidemenu-rootlist":n.root,"p-submenu-list":!n.root,"p-active-submenu":n.parentActive})},menuitem:function(e){var n=e.item;return y("p-menuitem",{"p-menuitem-active":e.active,"p-disabled":n.disabled},n.className)},transition:"p-connected-overlay"},styles:"\n@layer primereact {\n    .p-slidemenu {\n        width: 12.5em;\n    }\n    \n    .p-slidemenu.p-slidemenu-overlay {\n        position: absolute;\n    }\n    \n    .p-slidemenu .p-menu-separator {\n        border-width: 1px 0 0 0;\n    }\n    \n    .p-slidemenu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n    \n    .p-slidemenu .p-slidemenu-rootlist {\n        position: absolute;\n        top: 0;\n    }\n    \n    .p-slidemenu .p-submenu-list {\n        display: none;\n        position: absolute;\n        top: 0;\n        width: 12.5em;\n    }\n    \n    .p-slidemenu .p-menuitem-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-slidemenu .p-menuitem-icon {\n        vertical-align: middle;\n    }\n    \n    .p-slidemenu .p-menuitem-text {\n        vertical-align: middle;\n    }\n    \n    .p-slidemenu .p-menuitem {\n        position: relative;\n    }\n    \n    .p-slidemenu .p-menuitem-link .p-submenu-icon {\n        margin-left: auto;\n    }\n    \n    .p-slidemenu .p-slidemenu-wrapper {\n        position: relative;\n    }\n    \n    .p-slidemenu .p-slidemenu-content {\n        overflow-x: hidden;\n        overflow-y: auto;\n        position: relative;\n        height: 100%;\n    }\n    \n    .p-slidemenu-backward {\n        bottom: 0;\n        width: 100%;\n        padding: 0.25em;\n        cursor: pointer;\n    }\n    \n    .p-slidemenu-backward .p-slidemenu-backward-icon {\n        vertical-align: middle;\n    }\n    \n    .p-slidemenu-backward span {\n        vertical-align: middle;\n    }\n    \n    .p-slidemenu .p-menuitem-active {\n        position: static;\n    }\n    \n    .p-slidemenu .p-menuitem-active > .p-submenu-list {\n        display: block;\n    }\n}\n",inlineStyles:{menu:function(e){var n=e.subProps;return{width:n.menuWidth+"px",left:n.root?-1*n.level*n.menuWidth+"px":n.menuWidth+"px",transitionProperty:n.root?"left":"none",transitionDuration:n.effectDuration+"ms",transitionTimingFunction:n.easing}}}}});function _(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 F(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?_(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):_(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var H=e.memo((function(n){var t=W(e.useState(null),2),r=t[0],i=t[1],o=W(e.useState({}),2),u=o[0],l=o[1],s=a(),c=n.ptm,m=n.cx,p=n.sx,d=function(e,t){return c(t,{hostName:n.hostName,context:{active:r===e}})},f=function(e,t,r){if(t.disabled)e.preventDefault();else{if(t.command&&t.command({originalEvent:e,item:t}),t.items){var o=w(t,r);l(F(F({},u),{},I({},o,!0))),i(t),n.onForward()}t.url||(e.preventDefault(),e.stopPropagation())}},b=function(t){var r=n.id+"_sep_"+t,i=s({id:r,key:r,className:m("separator"),role:"separator"},c("separator",{hostName:n.hostName}));return e.createElement("li",i)},v=function(t,i){var o=u[w(t,i)];return t.items&&o?e.createElement(H,{id:n.id+"_"+i,menuProps:n.menuProps,model:t.items,index:n.index+1,menuWidth:n.menuWidth,effectDuration:n.effectDuration,onForward:n.onForward,parentActive:t===r,submenuIcon:n.submenuIcon,ptm:c,cx:m,sx:p}):null},w=function(e,t){return e.id||n.id+"_"+t},O=function(t,i){if(!1===t.visible)return null;var o=w(t,i),a=r===t,u=y("p-menuitem-icon",t.icon),l=s({className:m("icon")},d(t,"icon")),c=g.getJSXIcon(t.icon,F({},l),{props:n.menuProps}),p=s({className:m("submenuIcon")},d(t,"submenuIcon")),b=s({className:m("label")},d(t,"label")),O=t.items&&g.getJSXIcon(n.submenuIcon||e.createElement(x,p),F({},p),{props:n}),S=t.label&&e.createElement("span",b,t.label),E=v(t,i),P=s({href:t.url||"#",className:m("action"),target:t.target,onClick:function(e){return f(e,t,i)},"aria-disabled":t.disabled},d(t,"action")),N=e.createElement("a",P,c,S,O);t.template&&(N=h.getJSXElement(t.template,t,{onClick:function(e){return f(e,t,i)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:u,submenuIconClassName:"p-submenu-icon",element:N,props:n,active:a}));var j=s({id:o,key:o,className:m("menuitem",{active:a,item:t}),style:t.style},d(t,"menuitem"));return e.createElement("li",j,N,E)},S=n.model?n.model.map((function(e,n){return!1===e.visible?null:e.separator?b(n):O(e,n)})):null,E=s({className:m("menu",{subProps:n}),style:p("menu",{subProps:n})},c("menu",{hostName:n.hostName}));return e.createElement("ul",E,S)}));function R(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 Z(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?R(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}H.displayName="SlideMenuSub";var L=e.memo(e.forwardRef((function(r,h){var x=a(),P=e.useContext(t),N=M.getProps(r,P),j=W(e.useState(N.id),2),I=j[0],k=j[1],D=W(e.useState(0),2),A=D[0],C=D[1],T=W(e.useState(!1),2),_=T[0],F=T[1],R=M.setMetaData({props:N,state:{id:I,visible:_,level:A}}),L=R.ptm,J=R.cx,X=R.sx;i(M.css.styles,R.isUnstyled,{name:"slidemenu"});var U=e.useRef(null),z=e.useRef(null),B=e.useRef(null),Y=e.useRef(null),$=_&&N.popup&&N.closeOnEscape,q=u("slide-menu",$);l({callback:function(e){re(e)},when:$&&q,priority:[s.SLIDE_MENU,q]});var G=W(c({target:z,overlay:U,listener:function(e,n){n.valid&&("outside"===n.type||P.hideOverlaysOnDocumentScrolling?re(e):w.isDocument(e.target)||w.absolutePosition(U.current,z.current))},when:_}),2),K=G[0],Q=G[1],V=function(){C((function(e){return e+1}))},ee=function(){C((function(e){return e-1}))},ne=function(e){N.popup&&(_?re(e):te(e))},te=function(e){z.current=e.currentTarget,F(!0),N.onShow&&N.onShow(e)},re=function(e){z.current=e.currentTarget,F(!1),N.onHide&&N.onHide(e)},ie=function(){N.autoZIndex&&S.set("menu",U.current,P&&P.autoZIndex||n.autoZIndex,N.baseZIndex||P&&P.zIndex.menu||n.zIndex.menu),w.addStyles(U.current,{position:"absolute",top:"0",left:"0"}),w.absolutePosition(U.current,z.current)},oe=function(){K()},ae=function(){z.current=null,Q()},ue=function(){S.clear(U.current),C(0)};m((function(){I||k(O())})),p((function(){C(0)}),[N.model]),p((function(){N.onNavigate&&N.onNavigate({level:A})}),[A]),d((function(){S.clear(U.current)})),e.useImperativeHandle(h,(function(){return{props:N,toggle:ne,show:te,hide:re,navigateForward:V,navigateBack:ee,setLevelState:C,getElement:function(){return U.current}}}));var le=function(){var n=x({className:J("previousIcon")},L("previousIcon")),t=g.getJSXIcon(N.backIcon||e.createElement(f,n),Z({},n),{props:N}),r=x(L("previousLabel")),i=x({ref:B,className:J("previous",{levelState:A}),onClick:function(e){return ee()}},L("previous"));return e.createElement("div",i,t,e.createElement("span",r,N.backLabel))},se=function(){var n={height:N.viewportHeight+"px"},t=le(),r=x({ref:U,id:N.id,className:y(N.className,J("root")),style:N.style,onClick:function(e){return n=e,void(N.popup&&b.emit("overlay-click",{originalEvent:n,target:z.current}));var n}},M.getOtherProps(N),L("root")),i=x({className:J("wrapper"),style:n},L("wrapper")),a=x({ref:Y,className:J("content")},L("content")),u=x({classNames:J("transition"),in:!N.popup||_,timeout:{enter:120,exit:100},options:N.transitionOptions,unmountOnExit:!0,onEnter:ie,onEntered:oe,onExit:ae,onExited:ue},L("transition"));return e.createElement(o,E({nodeRef:U},u),e.createElement("div",r,e.createElement("div",i,e.createElement("div",a,e.createElement(H,{id:I,hostName:"SlideMenu",menuProps:N,model:N.model,root:!0,index:0,menuWidth:N.menuWidth,effectDuration:N.effectDuration,level:A,parentActive:0===A,onForward:V,submenuIcon:N.submenuIcon,ptm:L,cx:J,sx:X}))),t))}();return N.popup?e.createElement(v,{element:se,appendTo:N.appendTo}):se})));L.displayName="SlideMenu";export{L as SlideMenu};