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

theme.keycloak.v2.admin.resources.assets.Tabs-5aebe4ec.js Maven / Gradle / Ivy

There is a newer version: 25.0.1
Show newest version
import{_ as w,r as e,b$ as z,k as b,B as W,x as Ee,aj as Oe,bv as h,m as G,be as Se,cg as j,b_ as Te,bB as ae,bc as ye,by as se,bA as Be,bx as oe,bw as Ce}from"./index-f33eb656.js";import{a as Ie}from"./plus-icon-6a98b80b.js";import{c as Le,M as we,a as Ae,b as _e}from"./MenuList-b32c7668.js";const a={button:"pf-c-button",modifiers:{fill:"pf-m-fill",scrollable:"pf-m-scrollable",secondary:"pf-m-secondary",noBorderBottom:"pf-m-no-border-bottom",borderBottom:"pf-m-border-bottom",box:"pf-m-box",vertical:"pf-m-vertical",current:"pf-m-current",colorSchemeLight_300:"pf-m-color-scheme--light-300",expandable:"pf-m-expandable",nonExpandable:"pf-m-non-expandable",expandableOnSm:"pf-m-expandable-on-sm",nonExpandableOnSm:"pf-m-non-expandable-on-sm",expandableOnMd:"pf-m-expandable-on-md",nonExpandableOnMd:"pf-m-non-expandable-on-md",expandableOnLg:"pf-m-expandable-on-lg",nonExpandableOnLg:"pf-m-non-expandable-on-lg",expandableOnXl:"pf-m-expandable-on-xl",nonExpandableOnXl:"pf-m-non-expandable-on-xl",expandableOn_2xl:"pf-m-expandable-on-2xl",nonExpandableOn_2xl:"pf-m-non-expandable-on-2xl",expanded:"pf-m-expanded",pageInsets:"pf-m-page-insets",overflow:"pf-m-overflow",action:"pf-m-action",active:"pf-m-active",disabled:"pf-m-disabled",ariaDisabled:"pf-m-aria-disabled",insetNone:"pf-m-inset-none",insetSm:"pf-m-inset-sm",insetMd:"pf-m-inset-md",insetLg:"pf-m-inset-lg",insetXl:"pf-m-inset-xl",inset_2xl:"pf-m-inset-2xl",insetNoneOnSm:"pf-m-inset-none-on-sm",insetSmOnSm:"pf-m-inset-sm-on-sm",insetMdOnSm:"pf-m-inset-md-on-sm",insetLgOnSm:"pf-m-inset-lg-on-sm",insetXlOnSm:"pf-m-inset-xl-on-sm",inset_2xlOnSm:"pf-m-inset-2xl-on-sm",insetNoneOnMd:"pf-m-inset-none-on-md",insetSmOnMd:"pf-m-inset-sm-on-md",insetMdOnMd:"pf-m-inset-md-on-md",insetLgOnMd:"pf-m-inset-lg-on-md",insetXlOnMd:"pf-m-inset-xl-on-md",inset_2xlOnMd:"pf-m-inset-2xl-on-md",insetNoneOnLg:"pf-m-inset-none-on-lg",insetSmOnLg:"pf-m-inset-sm-on-lg",insetMdOnLg:"pf-m-inset-md-on-lg",insetLgOnLg:"pf-m-inset-lg-on-lg",insetXlOnLg:"pf-m-inset-xl-on-lg",inset_2xlOnLg:"pf-m-inset-2xl-on-lg",insetNoneOnXl:"pf-m-inset-none-on-xl",insetSmOnXl:"pf-m-inset-sm-on-xl",insetMdOnXl:"pf-m-inset-md-on-xl",insetLgOnXl:"pf-m-inset-lg-on-xl",insetXlOnXl:"pf-m-inset-xl-on-xl",inset_2xlOnXl:"pf-m-inset-2xl-on-xl",insetNoneOn_2xl:"pf-m-inset-none-on-2xl",insetSmOn_2xl:"pf-m-inset-sm-on-2xl",insetMdOn_2xl:"pf-m-inset-md-on-2xl",insetLgOn_2xl:"pf-m-inset-lg-on-2xl",insetXlOn_2xl:"pf-m-inset-xl-on-2xl",inset_2xlOn_2xl:"pf-m-inset-2xl-on-2xl"},tabs:"pf-c-tabs",tabsAdd:"pf-c-tabs__add",tabsItem:"pf-c-tabs__item",tabsItemAction:"pf-c-tabs__item-action",tabsItemActionIcon:"pf-c-tabs__item-action-icon",tabsItemIcon:"pf-c-tabs__item-icon",tabsItemText:"pf-c-tabs__item-text",tabsLink:"pf-c-tabs__link",tabsLinkToggleIcon:"pf-c-tabs__link-toggle-icon",tabsList:"pf-c-tabs__list",tabsScrollButton:"pf-c-tabs__scroll-button",tabsToggle:"pf-c-tabs__toggle",tabsToggleButton:"pf-c-tabs__toggle-button",tabsToggleIcon:"pf-c-tabs__toggle-icon",tabsToggleText:"pf-c-tabs__toggle-text",themeDark:"pf-theme-dark"},J=c=>{var{children:s,tabContentRef:t,ouiaId:n,parentInnerRef:o,ouiaSafe:r}=c,l=w(c,["children","tabContentRef","ouiaId","parentInnerRef","ouiaSafe"]);const f=l.href?"a":"button";return e.createElement(f,Object.assign({},!l.href&&{type:"button"},{ref:o},z(J.displayName,n,r),l),s)};J.displayName="TabButton";const P=e.createContext({variant:"default",mountOnEnter:!1,unmountOnExit:!1,localActiveKey:"",uniqueId:"",handleTabClick:()=>null,handleTabClose:void 0}),Ne=P.Provider,Ke=P.Consumer,Re=c=>{var{children:s,className:t,onClick:n,isDisabled:o,"aria-label":r="Tab action",innerRef:l,ouiaId:f,ouiaSafe:p}=c,i=w(c,["children","className","onClick","isDisabled","aria-label","innerRef","ouiaId","ouiaSafe"]);return e.createElement("span",{className:b(a.tabsItemAction,t)},e.createElement(W,Object.assign({ref:l,type:"button",variant:"plain","aria-label":r,onClick:n,isDisabled:o},z(Q.displayName,f,p),i),e.createElement("span",{className:b(a.tabsItemActionIcon)},s)))},Q=e.forwardRef((c,s)=>e.createElement(Re,Object.assign({},c,{innerRef:s})));Q.displayName="TabAction";const ke=c=>{var{title:s,eventKey:t,tabContentRef:n,id:o,tabContentId:r,className:l="",ouiaId:f,isDisabled:p,isAriaDisabled:i,inoperableEvents:g=["onClick","onKeyPress"],href:v,innerRef:x,tooltip:S,closeButtonAriaLabel:A,isCloseDisabled:k=!1,actions:B}=c,I=w(c,["title","eventKey","tabContentRef","id","tabContentId","className","ouiaId","isDisabled","isAriaDisabled","inoperableEvents","href","innerRef","tooltip","closeButtonAriaLabel","isCloseDisabled","actions"]);const _=g.reduce((O,D)=>Object.assign(Object.assign({},O),{[D]:H=>{H.preventDefault()}}),{}),{mountOnEnter:T,localActiveKey:C,unmountOnExit:M,uniqueId:N,handleTabClick:K,handleTabClose:y}=e.useContext(P);let L=r?`${r}`:`pf-tab-section-${t}-${o||N}`;(T||M)&&t!==C&&(L=void 0);const d=!v,u=()=>{if(p)return d?null:-1;if(i)return null},E=e.createElement(J,Object.assign({parentInnerRef:x,className:b(a.tabsLink,p&&v&&a.modifiers.disabled,i&&a.modifiers.ariaDisabled),disabled:d?p:null,"aria-disabled":p||i,tabIndex:u(),onClick:O=>K(O,t,n)},i?_:null,{id:`pf-tab-${t}-${o||N}`,"aria-controls":L,tabContentRef:n,ouiaId:f,href:v,role:"tab","aria-selected":t===C},I),s);return e.createElement("li",{className:b(a.tabsItem,t===C&&a.modifiers.current,(y||B)&&a.modifiers.action,(p||i)&&a.modifiers.disabled,l),role:"presentation"},S?e.createElement(Ee,Object.assign({},S.props),E):E,B&&B,y!==void 0&&e.createElement(Q,{"aria-label":A||"Close tab",onClick:O=>y(O,t,n),isDisabled:k},e.createElement(Oe,null)))},Me=e.forwardRef((c,s)=>e.createElement(ke,Object.assign({innerRef:s},c)));Me.displayName="Tab";const De={modifiers:{light_300:"pf-m-light-300",padding:"pf-m-padding"},tabContent:"pf-c-tab-content",tabContentBody:"pf-c-tab-content__body"},ie={default:"",light300:De.modifiers.light_300},je=c=>{var{id:s,activeKey:t,"aria-label":n,child:o,children:r,className:l,eventKey:f,innerRef:p,ouiaId:i,ouiaSafe:g}=c,v=w(c,["id","activeKey","aria-label","child","children","className","eventKey","innerRef","ouiaId","ouiaSafe"]);if(r||o){let x;return n?x=null:x=r?`${s}`:`pf-tab-${o.props.eventKey}-${s}`,e.createElement(Ke,null,({variant:S})=>e.createElement("section",Object.assign({ref:p,hidden:r?null:o.props.eventKey!==t,className:r?b("pf-c-tab-content",l,ie[S]):b("pf-c-tab-content",o.props.className,ie[S]),id:r?s:`pf-tab-section-${o.props.eventKey}-${s}`,"aria-label":n,"aria-labelledby":x,role:"tabpanel",tabIndex:0},z("TabContent",i,g),v),r||o.props.children))}return null},$e=e.forwardRef((c,s)=>e.createElement(je,Object.assign({},c,{innerRef:s}))),re=c=>{var{children:s,className:t=""}=c,n=w(c,["children","className"]);return e.createElement("span",Object.assign({className:b(a.tabsItemText,t)},n),s)};re.displayName="TabTitleText";const ce=c=>{var{className:s,overflowingTabs:t=[],showTabCount:n,defaultTitleText:o="More",toggleAriaLabel:r,removeFindDomNode:l=!1,zIndex:f=9999}=c,p=w(c,["className","overflowingTabs","showTabCount","defaultTitleText","toggleAriaLabel","removeFindDomNode","zIndex"]);const i=h.useRef(),g=h.useRef(),v=h.useRef(),[x,S]=h.useState(!1),{localActiveKey:A,handleTabClick:k}=h.useContext(P),B=()=>{S(!1),g.current.focus()},I=d=>{var u;const E=(u=i?.current)===null||u===void 0?void 0:u.contains(d.target);x&&E&&d.key==="Escape"&&B()},_=d=>{var u,E;const O=!(!((u=i?.current)===null||u===void 0)&&u.contains(d.target)),D=!(!((E=g?.current)===null||E===void 0)&&E.contains(d.target));x&&O&&D&&B()};h.useEffect(()=>(window.addEventListener("click",_),window.addEventListener("keydown",I),()=>{window.removeEventListener("click",_),window.removeEventListener("keydown",I)}),[x,i,g]);const T=t.find(d=>d.eventKey===A),C=T?.title?T.title:o,M=()=>{S(d=>!d),setTimeout(()=>{if(i?.current){const d=i.current.querySelector("li > button,input:not(:disabled)");d&&d.focus()}},0)},N=h.createElement("li",Object.assign({className:b(a.tabsItem,"pf-m-overflow",T&&a.modifiers.current,s),role:"presentation",ref:v},p),h.createElement("button",{type:"button",className:b(a.tabsLink,x&&a.modifiers.expanded),onClick:()=>M(),"aria-label":r,"aria-haspopup":"menu","aria-expanded":x,role:"tab",ref:g},h.createElement(re,null,C,n&&C===o&&` (${t.length})`),h.createElement("span",{className:a.tabsLinkToggleIcon},h.createElement(G,null)))),K=t.map(d=>h.createElement(Le,{key:d.eventKey,itemId:d.eventKey,isSelected:A===d.eventKey},d.title)),y=(d,u)=>{B();const E=t.find(O=>O.eventKey===u).tabContentRef;k(d,u,E)},L=h.createElement(we,{ref:i,onSelect:(d,u)=>y(d,u)},h.createElement(Ae,null,h.createElement(_e,null,K)));return h.createElement(Se,{trigger:N,popper:L,isVisible:x,popperMatchesTriggerWidth:!1,appendTo:v.current,removeFindDomNode:l,zIndex:f})};ce.displayName="OverflowTab";var V;(function(c){c.div="div",c.nav="nav"})(V||(V={}));const Xe={default:"",light300:a.modifiers.colorSchemeLight_300};class $ extends e.Component{constructor(s){super(s),this.tabList=e.createRef(),this.leftScrollButtonRef=e.createRef(),this.scrollTimeout=null,this.countOverflowingElements=t=>Array.from(t.children).filter(o=>!j(t,o,!1)).length,this.handleScrollButtons=()=>{const{isOverflowHorizontal:t}=this.props;clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout(()=>{const n=this.tabList.current;let o=!0,r=!0,l=!1,f=0;if(n&&!this.props.isVertical&&!t){const p=!j(n,n.firstChild,!1),i=!j(n,n.lastChild,!1);l=p||i,o=!p,r=!i}t&&(f=this.countOverflowingElements(n)),this.setState({enableScrollButtons:l,disableLeftScrollButton:o,disableRightScrollButton:r,overflowingTabCount:f})},100)},this.scrollLeft=()=>{if(this.tabList.current){const t=this.tabList.current,n=Array.from(t.children);let o,r,l;for(l=0;l{if(this.tabList.current){const t=this.tabList.current,n=Array.from(t.children);let o,r;for(let l=n.length-1;l>=0&&!o;l--)j(t,n[l],!1)&&(o=n[l],r=n[l+1]);r&&(t.scrollLeft+=r.scrollWidth)}},this.hideScrollButtons=()=>{const{enableScrollButtons:t,renderScrollButtons:n,showScrollButtons:o}=this.state;!t&&!o&&n&&this.setState({renderScrollButtons:!1})},this.state={enableScrollButtons:!1,showScrollButtons:!1,renderScrollButtons:!1,disableLeftScrollButton:!0,disableRightScrollButton:!0,shownKeys:this.props.defaultActiveKey!==void 0?[this.props.defaultActiveKey]:[this.props.activeKey],uncontrolledActiveKey:this.props.defaultActiveKey,uncontrolledIsExpandedLocal:this.props.defaultIsExpanded,ouiaStateId:Te($.displayName),overflowingTabCount:0},this.props.isVertical&&this.props.expandable!==void 0&&!this.props.toggleAriaLabel&&!this.props.toggleText&&console.error("Tabs:","toggleAriaLabel or the toggleText prop is required to make the toggle button accessible")}handleTabClick(s,t,n){const{shownKeys:o}=this.state,{onSelect:r,defaultActiveKey:l}=this.props;l!==void 0?this.setState({uncontrolledActiveKey:t}):r(s,t),n&&(e.Children.toArray(this.props.children).map(f=>f).filter(f=>f.props&&f.props.tabContentRef&&f.props.tabContentRef.current).forEach(f=>f.props.tabContentRef.current.hidden=!0),n.current&&(n.current.hidden=!1)),this.props.mountOnEnter&&this.setState({shownKeys:o.concat(t)})}componentDidMount(){this.props.isVertical||(ae&&window.addEventListener("resize",this.handleScrollButtons,!1),this.handleScrollButtons())}componentWillUnmount(){var s;this.props.isVertical||ae&&window.removeEventListener("resize",this.handleScrollButtons,!1),clearTimeout(this.scrollTimeout),(s=this.leftScrollButtonRef.current)===null||s===void 0||s.removeEventListener("transitionend",this.hideScrollButtons)}componentDidUpdate(s,t){const{activeKey:n,mountOnEnter:o,isOverflowHorizontal:r,children:l}=this.props,{shownKeys:f,overflowingTabCount:p,enableScrollButtons:i}=this.state;s.activeKey!==n&&o&&f.indexOf(n)<0&&this.setState({shownKeys:f.concat(n)}),s.children&&l&&e.Children.toArray(s.children).length!==e.Children.toArray(l).length&&this.handleScrollButtons();const g=this.countOverflowingElements(this.tabList.current);r&&g&&this.setState({overflowingTabCount:g+p}),!t.enableScrollButtons&&i?(this.setState({renderScrollButtons:!0}),setTimeout(()=>{var v;(v=this.leftScrollButtonRef.current)===null||v===void 0||v.addEventListener("transitionend",this.hideScrollButtons),this.setState({showScrollButtons:!0})},100)):t.enableScrollButtons&&!i&&this.setState({showScrollButtons:!1})}render(){const s=this.props,{className:t,children:n,activeKey:o,defaultActiveKey:r,id:l,isFilled:f,isSecondary:p,isVertical:i,isBox:g,hasBorderBottom:v,hasSecondaryBorderBottom:x,leftScrollAriaLabel:S,rightScrollAriaLabel:A,"aria-label":k,component:B,ouiaId:I,ouiaSafe:_,mountOnEnter:T,unmountOnExit:C,usePageInsets:M,inset:N,variant:K,expandable:y,isExpanded:L,defaultIsExpanded:d,toggleText:u,toggleAriaLabel:E,addButtonAriaLabel:O,onToggle:D,onClose:H,onAdd:Y,isOverflowHorizontal:X}=s,de=w(s,["className","children","activeKey","defaultActiveKey","id","isFilled","isSecondary","isVertical","isBox","hasBorderBottom","hasSecondaryBorderBottom","leftScrollAriaLabel","rightScrollAriaLabel","aria-label","component","ouiaId","ouiaSafe","mountOnEnter","unmountOnExit","usePageInsets","inset","variant","expandable","isExpanded","defaultIsExpanded","toggleText","toggleAriaLabel","addButtonAriaLabel","onToggle","onClose","onAdd","isOverflowHorizontal"]),{showScrollButtons:fe,renderScrollButtons:Z,disableLeftScrollButton:ee,disableRightScrollButton:te,shownKeys:me,uncontrolledActiveKey:pe,uncontrolledIsExpandedLocal:be,overflowingTabCount:q}=this.state,R=e.Children.toArray(n).filter(Boolean).filter(m=>!m.props.isHidden),ue=R.slice(0,R.length-q),he=R.slice(R.length-q).map(m=>m.props),ne=l||ye(),ge=B===V.nav?"nav":"div",F=r!==void 0?pe:o,U=d!==void 0?be:L,ve=m=>{L===void 0?this.setState({uncontrolledIsExpandedLocal:m}):D(m)},le=X&&q>0,xe=typeof X=="object"?Object.assign({},X):{};return e.createElement(Ne,{value:{variant:K,mountOnEnter:T,unmountOnExit:C,localActiveKey:F,uniqueId:ne,handleTabClick:(...m)=>this.handleTabClick(...m),handleTabClose:H}},e.createElement(ge,Object.assign({"aria-label":k,className:b(a.tabs,f&&a.modifiers.fill,p&&a.modifiers.secondary,i&&a.modifiers.vertical,i&&y&&se(y,a),i&&y&&U&&a.modifiers.expanded,g&&a.modifiers.box,fe&&a.modifiers.scrollable,M&&a.modifiers.pageInsets,!v&&a.modifiers.noBorderBottom,x&&a.modifiers.borderBottom,se(N,a),Xe[K],le&&a.modifiers.overflow,t)},z($.displayName,I!==void 0?I:this.state.ouiaStateId,_),{id:l&&l},de),y&&i&&e.createElement(Be,null,m=>e.createElement("div",{className:b(a.tabsToggle)},e.createElement("div",{className:b(a.tabsToggleButton)},e.createElement(W,{onClick:()=>ve(!U),variant:"plain","aria-label":E,"aria-expanded":U,id:`${m}-button`,"aria-labelledby":`${m}-text ${m}-button`},e.createElement("span",{className:b(a.tabsToggleIcon)},e.createElement(G,{"arian-hidden":"true"})),u&&e.createElement("span",{className:b("pf-c-tabs__toggle-text"),id:`${m}-text`},u))))),Z&&e.createElement("button",{type:"button",className:b(a.tabsScrollButton,p&&oe.modifiers.secondary),"aria-label":S,onClick:this.scrollLeft,disabled:ee,"aria-hidden":ee,ref:this.leftScrollButtonRef},e.createElement(Ce,null)),e.createElement("ul",{className:b(a.tabsList),ref:this.tabList,onScroll:this.handleScrollButtons,role:"tablist"},X?ue:R,le&&e.createElement(ce,Object.assign({overflowingTabs:he},xe))),Z&&e.createElement("button",{type:"button",className:b(a.tabsScrollButton,p&&oe.modifiers.secondary),"aria-label":A,onClick:this.scrollRight,disabled:te,"aria-hidden":te},e.createElement(G,null)),Y!==void 0&&e.createElement("span",{className:b(a.tabsAdd)},e.createElement(W,{variant:"plain","aria-label":O||"Add tab",onClick:Y},e.createElement(Ie,null)))),R.filter(m=>m.props.children&&!(C&&m.props.eventKey!==F)&&!(T&&me.indexOf(m.props.eventKey)===-1)).map(m=>e.createElement($e,{key:m.props.eventKey,activeKey:F,child:m,id:m.props.id||ne,ouiaId:m.props.ouiaId})))}}$.displayName="Tabs";$.defaultProps={activeKey:0,onSelect:()=>{},isFilled:!1,isSecondary:!1,isVertical:!1,isBox:!1,hasBorderBottom:!0,leftScrollAriaLabel:"Scroll left",rightScrollAriaLabel:"Scroll right",component:V.div,mountOnEnter:!1,unmountOnExit:!1,ouiaSafe:!0,variant:"default",onToggle:c=>{}};export{$ as T,Me as a,re as b,$e as c,V as d};
//# sourceMappingURL=Tabs-5aebe4ec.js.map




© 2015 - 2024 Weber Informatics LLC | Privacy Policy