All Downloads are FREE. Search and download functionalities are using the official Maven repository.

theme.keycloak.v2.admin.resources.assets.MenuList-b32c7668.js Maven / Gradle / Ivy

There is a newer version: 25.0.1
Show newest version
import{r as e,b_ as xe,bB as ie,_ as k,k as m,b$ as Le,cq as Ce,bA as we,bw as De,c9 as Ne,m as Se,bY as Re}from"./index-f33eb656.js";import{ak as Oe}from"./Td-137060bd.js";import{S as ke}from"./star-icon-d7615f00.js";import{C as Ae}from"./Checkbox-8826c1eb.js";const n={breadcrumb:"pf-c-breadcrumb",divider:"pf-c-divider",menu:"pf-c-menu",menuBreadcrumb:"pf-c-menu__breadcrumb",menuContent:"pf-c-menu__content",menuFooter:"pf-c-menu__footer",menuGroup:"pf-c-menu__group",menuGroupTitle:"pf-c-menu__group-title",menuHeader:"pf-c-menu__header",menuItem:"pf-c-menu__item",menuItemAction:"pf-c-menu__item-action",menuItemActionIcon:"pf-c-menu__item-action-icon",menuItemCheck:"pf-c-menu__item-check",menuItemDescription:"pf-c-menu__item-description",menuItemExternalIcon:"pf-c-menu__item-external-icon",menuItemIcon:"pf-c-menu__item-icon",menuItemMain:"pf-c-menu__item-main",menuItemSelectIcon:"pf-c-menu__item-select-icon",menuItemText:"pf-c-menu__item-text",menuItemToggleIcon:"pf-c-menu__item-toggle-icon",menuList:"pf-c-menu__list",menuListItem:"pf-c-menu__list-item",menuSearch:"pf-c-menu__search",modifiers:{hidden:"pf-m-hidden",hiddenOnSm:"pf-m-hidden-on-sm",visibleOnSm:"pf-m-visible-on-sm",hiddenOnMd:"pf-m-hidden-on-md",visibleOnMd:"pf-m-visible-on-md",hiddenOnLg:"pf-m-hidden-on-lg",visibleOnLg:"pf-m-visible-on-lg",hiddenOnXl:"pf-m-hidden-on-xl",visibleOnXl:"pf-m-visible-on-xl",hiddenOn_2xl:"pf-m-hidden-on-2xl",visibleOn_2xl:"pf-m-visible-on-2xl",flyout:"pf-m-flyout",top:"pf-m-top",left:"pf-m-left",drilldown:"pf-m-drilldown",drilledIn:"pf-m-drilled-in",currentPath:"pf-m-current-path",static:"pf-m-static",plain:"pf-m-plain",scrollable:"pf-m-scrollable",nav:"pf-m-nav",focus:"pf-m-focus",disabled:"pf-m-disabled",load:"pf-m-load",loading:"pf-m-loading",danger:"pf-m-danger",selected:"pf-m-selected",favorite:"pf-m-favorite",favorited:"pf-m-favorited"},themeDark:"pf-theme-dark"},L=e.createContext({menuId:null,parentMenu:null,onActionClick:()=>null,onSelect:()=>null,activeItemId:null,selected:null,drilledInMenus:[],drilldownItemPath:[],onDrillIn:null,onDrillOut:null,onGetMenuHeight:()=>null,flyoutRef:null,setFlyoutRef:()=>null,disableHover:!1,role:"menu"}),ge=e.createContext({itemId:null,isDisabled:!1});class V extends e.Component{constructor(a){super(a),this.menuRef=e.createRef(),this.activeMenu=null,this.state={ouiaStateId:xe(le.displayName),searchInputValue:"",transitionMoveTarget:null,flyoutRef:null,disableHover:!1,currentDrilldownMenuId:this.props.id},this.handleDrilldownTransition=s=>{const t=this.menuRef.current;if(!(!t||t!==s.target.closest(".pf-c-menu")&&!Array.from(t.getElementsByClassName("pf-c-menu")).includes(s.target.closest(".pf-c-menu"))))if(this.state.transitionMoveTarget)this.state.transitionMoveTarget.focus(),this.setState({transitionMoveTarget:null});else{const o=t.querySelector("#"+this.props.activeMenu)||t||null,l=Array.from(o.getElementsByTagName("UL")[0].children);if(!this.state.currentDrilldownMenuId||o.id!==this.state.currentDrilldownMenuId)this.setState({currentDrilldownMenuId:o.id});else return;const f=l.filter(p=>!(p.classList.contains("pf-m-disabled")||p.classList.contains("pf-c-divider")))[0].firstChild;f.focus(),f.tabIndex=0}},this.handleExtraKeys=s=>{const t=this.props.containsDrilldown,o=document.activeElement;if(s.target.closest(".pf-c-menu")!==this.activeMenu&&!s.target.classList.contains("pf-c-breadcrumb__link")&&(this.activeMenu=s.target.closest(".pf-c-menu"),this.setState({disableHover:!0})),s.target.tagName==="INPUT")return;const l=this.activeMenu,f=s.key,p=o.classList.contains("pf-c-breadcrumb__link")||o.classList.contains("pf-c-dropdown__toggle");if(f===" "||f==="Enter"){if(s.preventDefault(),t&&!p){if(o.closest("li").classList.contains("pf-m-current-path")&&l.parentElement.tagName==="LI")o.tabIndex=-1,l.parentElement.firstChild.tabIndex=0,this.setState({transitionMoveTarget:l.parentElement.firstChild});else if(o.nextElementSibling&&o.nextElementSibling.classList.contains("pf-c-menu")){const d=Array.from(o.nextElementSibling.getElementsByTagName("UL")[0].children).filter(c=>!(c.classList.contains("pf-m-disabled")||c.classList.contains("pf-c-divider")));o.tabIndex=-1,d[0].firstChild.tabIndex=0,this.setState({transitionMoveTarget:d[0].firstChild})}}document.activeElement.click()}},this.createNavigableElements=()=>this.props.containsDrilldown?this.activeMenu?Array.from(this.activeMenu.getElementsByTagName("UL")[0].children).filter(t=>!(t.classList.contains("pf-m-disabled")||t.classList.contains("pf-c-divider"))):[]:this.menuRef.current?Array.from(this.menuRef.current.getElementsByTagName("LI")).filter(t=>!(t.classList.contains("pf-m-disabled")||t.classList.contains("pf-c-divider"))):[],a.innerRef&&(this.menuRef=a.innerRef)}allowTabFirstItem(){const a=this.menuRef.current;if(a){const s=a.querySelector("ul button:not(:disabled), ul a:not(:disabled)");s&&(s.tabIndex=0)}}componentDidMount(){this.context&&this.setState({disableHover:this.context.disableHover}),ie&&window.addEventListener("transitionend",this.props.isRootMenu?this.handleDrilldownTransition:null),this.allowTabFirstItem()}componentWillUnmount(){ie&&window.removeEventListener("transitionend",this.handleDrilldownTransition)}componentDidUpdate(a){a.children!==this.props.children&&this.allowTabFirstItem()}render(){const a=this.props,{"aria-label":s,id:t,children:o,className:l,onSelect:f,selected:p=null,onActionClick:M,ouiaId:d,ouiaSafe:c,containsFlyout:h,isNavFlyout:I,containsDrilldown:y,isMenuDrilledIn:b,isPlain:_,isScrollable:N,drilldownItemPath:S,drilledInMenus:R,onDrillIn:q,onDrillOut:A,onGetMenuHeight:G,parentMenu:F=null,activeItemId:x=null,innerRef:T,isRootMenu:K,activeMenu:se,role:$}=a,X=k(a,["aria-label","id","children","className","onSelect","selected","onActionClick","ouiaId","ouiaSafe","containsFlyout","isNavFlyout","containsDrilldown","isMenuDrilledIn","isPlain","isScrollable","drilldownItemPath","drilledInMenus","onDrillIn","onDrillOut","onGetMenuHeight","parentMenu","activeItemId","innerRef","isRootMenu","activeMenu","role"]),H=b||R&&R.includes(t)||!1;return e.createElement(L.Provider,{value:{menuId:t,parentMenu:F||t,onSelect:f,onActionClick:M,activeItemId:x,selected:p,drilledInMenus:R,drilldownItemPath:S,onDrillIn:q,onDrillOut:A,onGetMenuHeight:G,flyoutRef:this.state.flyoutRef,setFlyoutRef:g=>this.setState({flyoutRef:g}),disableHover:this.state.disableHover,role:$}},K&&e.createElement(Oe,{containerRef:this.menuRef||null,additionalKeyHandler:this.handleExtraKeys,createNavigableElements:this.createNavigableElements,isActiveElement:g=>document.activeElement.closest("li")===g||document.activeElement.parentElement===g||document.activeElement.closest(".pf-c-menu__search")===g||document.activeElement.closest("ol")&&document.activeElement.closest("ol").firstChild===g,getFocusableElement:g=>g.tagName==="DIV"&&g.querySelector("input")||g.firstChild.tagName==="LABEL"&&g.querySelector("input")||g.firstChild,noHorizontalArrowHandling:document.activeElement&&(document.activeElement.classList.contains("pf-c-breadcrumb__link")||document.activeElement.classList.contains("pf-c-dropdown__toggle")),noEnterHandling:!0,noSpaceHandling:!0}),e.createElement("div",Object.assign({id:t,className:m(n.menu,_&&n.modifiers.plain,N&&n.modifiers.scrollable,h&&n.modifiers.flyout,I&&n.modifiers.nav,y&&n.modifiers.drilldown,H&&n.modifiers.drilledIn,l),"aria-label":s,ref:this.menuRef},Le(le.displayName,d!==void 0?d:this.state.ouiaStateId,c),X),o))}}V.displayName="Menu";V.contextType=L;V.defaultProps={ouiaSafe:!0,isRootMenu:!0,isPlain:!1,isScrollable:!1,role:"menu"};const le=e.forwardRef((u,a)=>e.createElement(V,Object.assign({},u,{innerRef:a})));le.displayName="Menu";const Fe=e.forwardRef((u,a)=>{const{getHeight:s,children:t,menuHeight:o,maxMenuHeight:l}=u,f=k(u,["getHeight","children","menuHeight","maxMenuHeight"]),p=e.createRef(),M=(d,c,h)=>{if(d){let I=d.clientHeight,y=null,b=d.closest(`.${n.menuList}`);for(;b!==null&&b.nodeType===1;)b.classList.contains(n.menuList)&&(y=b),b=b.parentElement;if(y){const _=getComputedStyle(y),N=parseFloat(_.getPropertyValue("padding-top").replace(/px/g,""))+parseFloat(_.getPropertyValue("padding-bottom").replace(/px/g,""))+parseFloat(getComputedStyle(y.parentElement).getPropertyValue("border-bottom-width").replace(/px/g,""));I=I+N}h&&h(c,I),s&&s(I.toString())}return a||p};return e.createElement(L.Consumer,null,({menuId:d,onGetMenuHeight:c})=>e.createElement("div",Object.assign({},f,{className:m(n.menuContent,u.className),ref:h=>M(h,d,c),style:Object.assign(Object.assign({},o&&{"--pf-c-menu__content--Height":o}),l&&{"--pf-c-menu__content--MaxHeight":l})}),t))});Fe.displayName="MenuContent";const Te={name:"--pf-c-menu--m-flyout__menu--top-offset",value:"0px",var:"var(--pf-c-menu--m-flyout__menu--top-offset)"},He=Te,Pe={name:"--pf-c-menu--m-flyout__menu--m-left--right-offset",value:"0px",var:"var(--pf-c-menu--m-flyout__menu--m-left--right-offset)"},Be=Pe,je={name:"--pf-c-menu--m-flyout__menu--left-offset",value:"0px",var:"var(--pf-c-menu--m-flyout__menu--left-offset)"},Ue=je,Ve=u=>{var{className:a="",icon:s,onClick:t,"aria-label":o,isFavorited:l=null,isDisabled:f,actionId:p,innerRef:M}=u,d=k(u,["className","icon","onClick","aria-label","isFavorited","isDisabled","actionId","innerRef"]);return e.createElement(L.Consumer,null,({onActionClick:c})=>e.createElement(ge.Consumer,null,({itemId:h,isDisabled:I})=>{const y=b=>{t&&t(b),c&&c(b,h,p)};return e.createElement("button",Object.assign({className:m(n.menuItemAction,l!==null&&n.modifiers.favorite,l&&n.modifiers.favorited,a),"aria-label":o,onClick:y},(f===!0||I===!0)&&{disabled:!0},{ref:M,tabIndex:-1},d),e.createElement("span",{className:m(n.menuItemActionIcon)},s==="favorites"||l!==null?e.createElement(ke,{"aria-hidden":!0}):s))}))},be=e.forwardRef((u,a)=>e.createElement(Ve,Object.assign({},u,{innerRef:a})));be.displayName="MenuItemAction";const he=e.createContext({direction:"right"}),qe=u=>{var{children:a,className:s,itemId:t=null,to:o,hasCheck:l=!1,isActive:f=null,isFavorited:p=null,isLoadButton:M=!1,isLoading:d=!1,flyoutMenu:c,direction:h,description:I=null,onClick:y=()=>{},component:b="button",isDisabled:_=!1,isExternalLink:N=!1,isSelected:S=null,isFocused:R,isDanger:q=!1,icon:A,actions:G,onShowFlyout:F,drilldownMenu:x,isOnPath:T,innerRef:K}=u,se=k(u,["children","className","itemId","to","hasCheck","isActive","isFavorited","isLoadButton","isLoading","flyoutMenu","direction","description","onClick","component","isDisabled","isExternalLink","isSelected","isFocused","isDanger","icon","actions","onShowFlyout","drilldownMenu","isOnPath","innerRef"]);const{menuId:$,parentMenu:X,onSelect:H,onActionClick:g,activeItemId:ae,selected:P,drilldownItemPath:oe,onDrillIn:re,onDrillOut:ce,flyoutRef:Ie,setFlyoutRef:W,disableHover:ue,role:ye}=e.useContext(L);let B=o?"a":b;l&&!o&&(B="label");const[j,_e]=e.useState(null),z=e.useContext(he),[me,Y]=e.useState(z.direction),C=e.useRef(),E=C===Ie,J=c!==void 0,Q=i=>{!E&&i?W(C):E&&!i&&W(null),F&&i&&F()};Ce(()=>{if(J&&C.current&&ie){const i=C.current.lastElementChild;if(i&&i.classList.contains(n.menu)){const r=C.current.getClientRects()[0],v=i.getClientRects()[0];if(r&&v){const O=r.x-v.width,ee=window.innerWidth-r.x-r.width-v.width;let D=me;ee<0&&D!=="left"?(Y("left"),D="left"):O<0&&D!=="right"&&(Y("right"),D="right");let te=0;O<0&&ee<0&&(te=D==="right"?-ee:-O),D==="left"?(i.classList.add(n.modifiers.left),i.style.setProperty(Be.name,`-${te}px`)):i.style.setProperty(Ue.name,`-${te}px`);const ne=window.innerHeight-r.y-v.height;window.innerHeight-v.height<0&&ne<0||ne<0&&i.style.setProperty(He.name,`${ne}px`)}}}},[E,c]),e.useEffect(()=>{Y(z.direction)},[z]),e.useEffect(()=>{if(j)if(E){const i=j.nextElementSibling;Array.from(i.getElementsByTagName("UL")[0].children).filter(v=>!(v.classList.contains("pf-m-disabled")||v.classList.contains("pf-c-divider")))[0].firstChild.focus()}else j.focus()},[E,j]);const de=i=>{const r=i.key,v=i.target,O=i.type;(r===" "||r==="Enter"||r==="ArrowRight"||O==="click")&&(i.stopPropagation(),i.preventDefault(),E||(Q(!0),_e(v))),(r==="Escape"||r==="ArrowLeft")&&E&&(i.stopPropagation(),Q(!1))},fe=(i,r)=>{r&&r(i,t),y&&y(i)},ve=T&&T||oe&&oe.includes(t)||!1;let U;h&&(h==="down"?U=i=>re&&re(i,$,typeof x=="function"?x().props.id:x.props.id,t):U=i=>ce&&ce(i,X,t));let w={};B==="a"?w={href:o,"aria-disabled":_?!0:null,disabled:null}:B==="button"&&(w={type:"button"}),T?w["aria-expanded"]=!0:J&&(w["aria-haspopup"]="menu",w["aria-expanded"]=E);const Ee=()=>f!==null?f?"page":null:t!==null&&ae!==null?t===ae:null,Z=()=>S!==null?S:P!==null&&t!==null?Array.isArray(P)&&P.includes(t)||t===P:!1,Me=()=>{ue||(J?Q(!0):W(null))},pe=ye==="listbox";return e.createElement("li",Object.assign({className:m(n.menuListItem,_&&n.modifiers.disabled,ve&&n.modifiers.currentPath,M&&n.modifiers.load,d&&n.modifiers.loading,R&&n.modifiers.focus,q&&n.modifiers.danger,s),onMouseOver:Me},c&&{onKeyDown:de},{ref:C,role:l?"menuitem":"none"},se),e.createElement(we,null,i=>e.createElement(B,Object.assign({tabIndex:-1,className:m(n.menuItem,Z()&&!l&&n.modifiers.selected,s),"aria-current":Ee()},!l&&{disabled:_},!l&&!c&&{role:pe?"option":"menuitem"},!l&&!c&&pe&&{"aria-selected":Z()},{ref:K},!l&&{onClick:r=>{fe(r,H),U&&U(r),c&&de(r)}},l&&{htmlFor:i},w),e.createElement("span",{className:m(n.menuItemMain)},h==="up"&&e.createElement("span",{className:m(n.menuItemToggleIcon)},e.createElement(De,{"aria-hidden":!0})),A&&e.createElement("span",{className:m(n.menuItemIcon)},A),l&&e.createElement("span",{className:m("pf-c-menu__item-check")},e.createElement(Ae,{id:i,component:"span",isChecked:S||!1,onChange:r=>fe(r,H),isDisabled:_})),e.createElement("span",{className:m(n.menuItemText)},a),N&&e.createElement("span",{className:m(n.menuItemExternalIcon)},e.createElement(Ne,{"aria-hidden":!0})),(c||h==="down")&&e.createElement("span",{className:m(n.menuItemToggleIcon)},e.createElement(Se,{"aria-hidden":!0})),Z()&&e.createElement("span",{className:m(n.menuItemSelectIcon)},e.createElement(Re,{"aria-hidden":!0}))),I&&h!=="up"&&e.createElement("span",{className:m(n.menuItemDescription)},e.createElement("span",null,I)))),E&&e.createElement(L.Provider,{value:{disableHover:ue}},e.createElement(he.Provider,{value:{direction:me}},c)),typeof x=="function"?x():x,e.createElement(ge.Provider,{value:{itemId:t,isDisabled:_}},G,p!==null&&e.createElement(be,{icon:"favorites",isFavorited:p,"aria-label":p?"starred":"not starred",onClick:i=>g(i,t),tabIndex:-1,actionId:"fav"})))},Ge=e.forwardRef((u,a)=>e.createElement(qe,Object.assign({},u,{innerRef:a})));Ge.displayName="MenuItem";const Ke=u=>{var{children:a=null,className:s,isAriaMultiselectable:t=!1}=u,o=k(u,["children","className","isAriaMultiselectable"]);const{role:l}=e.useContext(L);return e.createElement("ul",Object.assign({role:l},l==="listbox"&&{"aria-multiselectable":t},{className:m(n.menuList,s)},o),a)};Ke.displayName="MenuList";export{le as M,Fe as a,Ke as b,Ge as c,n as m};
//# sourceMappingURL=MenuList-b32c7668.js.map




© 2015 - 2024 Weber Informatics LLC | Privacy Policy