p3x-redis-ui-material/dist-react/assets/Tabs-DzDOhecV.js

💿 P3X Redis UI triple frontend — Angular + React/MUI + Vue/Vuetify with 54 languages, 7 themes, Socket.IO, desktop notifications, and full feature parity

import{i as e}from"./chunk-62oNxeRG.js";import{B as t,C as n,D as r,P as i,Q as a,V as o,a as s,b as c,h as l,j as u,n as d,p as f,r as p,w as m,x as h,y as g,z as _}from"./Box-zFhO8JOc.js";import{o as v}from"./i18n.store-BgO27SyP.js";import{a as y,d as b,i as x,l as S,n as C,o as ee,r as w,s as T,u as E}from"./useRovingTabIndex-C0P0cigC.js";var D=e(v(),1);function O(e){return t(`MuiTab`,e)}var k=_(`MuiTab`,[`root`,`labelIcon`,`textColorInherit`,`textColorPrimary`,`textColorSecondary`,`selected`,`disabled`,`fullWidth`,`wrapped`,`icon`]),A=a(),j=e=>{let{classes:t,textColor:r,fullWidth:i,wrapped:a,icon:o,label:s,selected:c,disabled:l}=e;return u({root:[`root`,o&&s&&`labelIcon`,`textColor${n(r)}`,i&&`fullWidth`,a&&`wrapped`,c&&`selected`,l&&`disabled`],icon:[`icon`]},O,t)},te=m(p,{name:`MuiTab`,slot:`Root`,overridesResolver:(e,t)=>{let{ownerState:r}=e;return[t.root,r.label&&r.icon&&t.labelIcon,t[`textColor${n(r.textColor)}`],r.fullWidth&&t.fullWidth,r.wrapped&&t.wrapped,{[`& .${k.icon}`]:t.icon}]}})(h(({theme:e})=>({...e.typography.button,maxWidth:360,minWidth:90,position:`relative`,minHeight:48,flexShrink:0,padding:`12px 16px`,overflow:`hidden`,whiteSpace:`normal`,textAlign:`center`,lineHeight:1.25,variants:[{props:({ownerState:e})=>e.label&&(e.iconPosition===`top`||e.iconPosition===`bottom`),style:{flexDirection:`column`}},{props:({ownerState:e})=>e.label&&e.iconPosition!==`top`&&e.iconPosition!==`bottom`,style:{flexDirection:`row`}},{props:({ownerState:e})=>e.icon&&e.label,style:{minHeight:72,paddingTop:9,paddingBottom:9}},{props:({ownerState:e,iconPosition:t})=>e.icon&&e.label&&t===`top`,style:{[`& > .${k.icon}`]:{marginBottom:6}}},{props:({ownerState:e,iconPosition:t})=>e.icon&&e.label&&t===`bottom`,style:{[`& > .${k.icon}`]:{marginTop:6}}},{props:({ownerState:e,iconPosition:t})=>e.icon&&e.label&&t===`start`,style:{[`& > .${k.icon}`]:{marginRight:e.spacing(1)}}},{props:({ownerState:e,iconPosition:t})=>e.icon&&e.label&&t===`end`,style:{[`& > .${k.icon}`]:{marginLeft:e.spacing(1)}}},{props:{textColor:`inherit`},style:{color:`inherit`,opacity:.6,[`&.${k.selected}`]:{opacity:1},[`&.${k.disabled}`]:{opacity:(e.vars||e).palette.action.disabledOpacity}}},{props:{textColor:`primary`},style:{color:(e.vars||e).palette.text.secondary,[`&.${k.selected}`]:{color:(e.vars||e).palette.primary.main},[`&.${k.disabled}`]:{color:(e.vars||e).palette.text.disabled}}},{props:{textColor:`secondary`},style:{color:(e.vars||e).palette.text.secondary,[`&.${k.selected}`]:{color:(e.vars||e).palette.secondary.main},[`&.${k.disabled}`]:{color:(e.vars||e).palette.text.disabled}}},{props:({ownerState:e})=>e.fullWidth,style:{flexShrink:1,flexGrow:1,flexBasis:0,maxWidth:`none`}},{props:({ownerState:e})=>e.wrapped,style:{fontSize:e.typography.pxToRem(12)}}]}))),M=D.forwardRef(function(e,t){let n=c({props:e,name:`MuiTab`}),{className:r,disabled:i=!1,disableFocusRipple:a=!1,fullWidth:s,icon:l,iconPosition:u=`top`,indicator:d,label:f,onChange:p,onClick:m,onFocus:h,selected:g,selectionFollowsFocus:_,textColor:v=`inherit`,value:b,wrapped:x=!1,...S}=n,ee=y(),w=C({id:b,ref:t,disabled:i,selected:g}),T=ee.getItemMap().size===0&&g?0:w.tabIndex,E={...n,disabled:i,disableFocusRipple:a,selected:g,icon:!!l,iconPosition:u,label:!!f,fullWidth:s,textColor:v,wrapped:x},O=j(E),k=l&&f&&D.isValidElement(l)?D.cloneElement(l,{className:o(O.icon,l.props.className)}):l;return(0,A.jsxs)(te,{internalNativeButton:!0,focusRipple:!a,className:o(O.root,r),ref:w.ref,role:`tab`,"aria-selected":g,disabled:i,onClick:e=>{!g&&p&&p(e,b),m&&m(e)},onFocus:e=>{_&&!g&&p&&p(e,b),h&&h(e)},tabIndex:T,ownerState:E,...S,children:[u===`top`||u===`start`?(0,A.jsxs)(D.Fragment,{children:[k,f]}):(0,A.jsxs)(D.Fragment,{children:[f,k]}),d]})}),N=g((0,A.jsx)(`path`,{d:`M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z`}),`KeyboardArrowLeft`),P=g((0,A.jsx)(`path`,{d:`M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z`}),`KeyboardArrowRight`);function F(e){return(1+Math.sin(Math.PI*e-Math.PI/2))/2}function ne(e,t,n,r={},i=()=>{}){let{ease:a=F,duration:o=300}=r,s=null,c=t[e],l=!1,u=()=>{l=!0},d=r=>{if(l){i(Error(`Animation cancelled`));return}s===null&&(s=r);let u=Math.min(1,(r-s)/o);if(t[e]=a(u)*(n-c)+c,u>=1){requestAnimationFrame(()=>{i(null)});return}requestAnimationFrame(d)};return c===n?(i(Error(`Element already at target position`)),u):(requestAnimationFrame(d),u)}var I={width:99,height:99,position:`absolute`,top:-9999,overflow:`scroll`};function L(e){let{onChange:t,...n}=e,r=D.useRef(),i=D.useRef(null),a=()=>{r.current=i.current.offsetHeight-i.current.clientHeight};return ee(()=>{let e=b(()=>{let e=r.current;a(),e!==r.current&&t(r.current)}),n=T(i.current);return n.addEventListener(`resize`,e),()=>{e.clear(),n.removeEventListener(`resize`,e)}},[t]),D.useEffect(()=>{a(),t(r.current)},[t]),(0,A.jsx)(`div`,{style:I,...n,ref:i})}function re(e){return t(`MuiTabScrollButton`,e)}var R=_(`MuiTabScrollButton`,[`root`,`vertical`,`horizontal`,`disabled`]),z=e=>{let{classes:t,orientation:n,disabled:r}=e;return u({root:[`root`,n,r&&`disabled`]},re,t)},B=m(p,{name:`MuiTabScrollButton`,slot:`Root`,overridesResolver:(e,t)=>{let{ownerState:n}=e;return[t.root,n.orientation&&t[n.orientation]]}})({width:40,flexShrink:0,opacity:.8,[`&.${R.disabled}`]:{opacity:0},variants:[{props:{orientation:`vertical`},style:{width:`100%`,height:40,"& svg":{transform:`var(--TabScrollButton-svgRotate)`}}}]}),ie=D.forwardRef(function(e,t){let n=c({props:e,name:`MuiTabScrollButton`}),{className:r,slots:a={},slotProps:s={},direction:l,orientation:u,disabled:f,...p}=n,{nativeButton:m,...h}=p,g=i(),_={isRtl:g,...n},v=z(_),y=a.StartScrollButtonIcon??N,b=a.EndScrollButtonIcon??P,x=d({elementType:y,externalSlotProps:s.startScrollButtonIcon,additionalProps:{fontSize:`small`},ownerState:_}),S=d({elementType:b,externalSlotProps:s.endScrollButtonIcon,additionalProps:{fontSize:`small`},ownerState:_});return(0,A.jsx)(B,{component:`div`,className:o(v.root,r),ref:t,role:null,ownerState:_,tabIndex:null,...h,style:{...h.style,...u===`vertical`&&{"--TabScrollButton-svgRotate":`rotate(${g?-90:90}deg)`}},children:l===`left`?(0,A.jsx)(y,{...x}):(0,A.jsx)(b,{...S})})});function V(e){return t(`MuiTabs`,e)}var H=_(`MuiTabs`,[`root`,`vertical`,`list`,`centered`,`scroller`,`fixed`,`scrollableX`,`scrollableY`,`hideScrollbar`,`scrollButtons`,`scrollButtonsHideMobile`,`indicator`]),ae=e=>{let{vertical:t,fixed:n,hideScrollbar:r,scrollableX:i,scrollableY:a,centered:o,scrollButtonsHideMobile:s,classes:c}=e;return u({root:[`root`,t&&`vertical`],scroller:[`scroller`,n&&`fixed`,r&&`hideScrollbar`,i&&`scrollableX`,a&&`scrollableY`],list:[`list`,t&&`vertical`,o&&`centered`],indicator:[`indicator`],scrollButtons:[`scrollButtons`,s&&`scrollButtonsHideMobile`],scrollableX:[i&&`scrollableX`],hideScrollbar:[r&&`hideScrollbar`]},V,c)},oe=m(`div`,{name:`MuiTabs`,slot:`Root`,overridesResolver:(e,t)=>{let{ownerState:n}=e;return[{[`& .${H.scrollButtons}`]:t.scrollButtons},{[`& .${H.scrollButtons}`]:n.scrollButtonsHideMobile&&t.scrollButtonsHideMobile},t.root,n.vertical&&t.vertical]}})(h(({theme:e})=>({overflow:`hidden`,minHeight:48,WebkitOverflowScrolling:`touch`,display:`flex`,variants:[{props:({ownerState:e})=>e.vertical,style:{flexDirection:`column`}},{props:({ownerState:e})=>e.scrollButtonsHideMobile,style:{[`& .${H.scrollButtons}`]:{[e.breakpoints.down(`sm`)]:{display:`none`}}}}]}))),se=m(`div`,{name:`MuiTabs`,slot:`Scroller`,overridesResolver:(e,t)=>{let{ownerState:n}=e;return[t.scroller,n.fixed&&t.fixed,n.hideScrollbar&&t.hideScrollbar,n.scrollableX&&t.scrollableX,n.scrollableY&&t.scrollableY]}})({position:`relative`,display:`inline-block`,flex:`1 1 auto`,whiteSpace:`nowrap`,variants:[{props:({ownerState:e})=>e.fixed,style:{overflowX:`hidden`,width:`100%`}},{props:({ownerState:e})=>e.hideScrollbar,style:{scrollbarWidth:`none`,"&::-webkit-scrollbar":{display:`none`}}},{props:({ownerState:e})=>e.scrollableX,style:{overflowX:`auto`,overflowY:`hidden`}},{props:({ownerState:e})=>e.scrollableY,style:{overflowY:`auto`,overflowX:`hidden`}}]}),ce=m(`div`,{name:`MuiTabs`,slot:`List`,overridesResolver:(e,t)=>{let{ownerState:n}=e;return[t.list,n.centered&&t.centered]}})({display:`flex`,variants:[{props:({ownerState:e})=>e.vertical,style:{flexDirection:`column`}},{props:({ownerState:e})=>e.centered,style:{justifyContent:`center`}}]}),le=m(`span`,{name:`MuiTabs`,slot:`Indicator`})(h(({theme:e})=>({position:`absolute`,height:2,bottom:0,width:`100%`,transition:e.transitions.create(),variants:[{props:{indicatorColor:`primary`},style:{backgroundColor:(e.vars||e).palette.primary.main}},{props:{indicatorColor:`secondary`},style:{backgroundColor:(e.vars||e).palette.secondary.main}},{props:({ownerState:e})=>e.vertical,style:{height:`100%`,width:2,right:0}}]}))),ue=m(L)({overflowX:`auto`,overflowY:`hidden`,scrollbarWidth:`none`,"&::-webkit-scrollbar":{display:`none`}}),de={},U=D.forwardRef(function(e,t){let n=c({props:e,name:`MuiTabs`}),a=r(),u=i(),{"aria-label":p,"aria-labelledby":m,action:h,centered:g=!1,children:_,className:v,component:y=`div`,allowScrollButtonsMobile:C=!1,indicatorColor:ee=`primary`,onChange:O,orientation:k=`horizontal`,scrollButtons:j=`auto`,selectionFollowsFocus:te,slots:M={},slotProps:N={},textColor:P=`primary`,value:F,variant:I=`standard`,visibleScrollbar:L=!1,...re}=n,R=I===`scrollable`,z=k===`vertical`,B=z?`scrollTop`:`scrollLeft`,V=z?`top`:`left`,H=z?`bottom`:`right`,U=z?`clientHeight`:`clientWidth`,W=z?`height`:`width`,G={...n,component:y,allowScrollButtonsMobile:C,indicatorColor:ee,orientation:k,vertical:z,scrollButtons:j,textColor:P,variant:I,visibleScrollbar:L,fixed:!R,hideScrollbar:R&&!L,scrollableX:R&&!z,scrollableY:R&&z,centered:g&&!R,scrollButtonsHideMobile:!C},K=ae(G),fe=d({elementType:M.startScrollButtonIcon,externalSlotProps:N.startScrollButtonIcon,ownerState:G}),pe=d({elementType:M.endScrollButtonIcon,externalSlotProps:N.endScrollButtonIcon,ownerState:G}),[me,he]=D.useState(!1),[q,ge]=D.useState(de),[_e,ve]=D.useState(!1),[ye,be]=D.useState(!1),[xe,Se]=D.useState(!1),Ce=F===!1?null:F,[we,Te]=D.useState(!1),[Ee,De]=D.useState({overflow:`hidden`,scrollbarWidth:0}),Oe=new Map,J=D.useRef(null),Y=D.useRef(null),X={slots:M,slotProps:N},ke=()=>{let e=J.current,t;if(e){let n=e.getBoundingClientRect();t={clientWidth:e.clientWidth,scrollLeft:e.scrollLeft,scrollTop:e.scrollTop,scrollWidth:e.scrollWidth,top:n.top,bottom:n.bottom,left:n.left,right:n.right}}let n;if(e&&F!==!1){let e=Y.current.children;if(e.length>0){let t=e[Oe.get(F)];n=t?t.getBoundingClientRect():null}}return{tabsMeta:t,tabMeta:n}},Z=l(()=>{let{tabsMeta:e,tabMeta:t}=ke(),n=0,r;z?(r=`top`,t&&e&&(n=t.top-e.top+e.scrollTop)):(r=u?`right`:`left`,t&&e&&(n=(u?-1:1)*(t[r]-e[r]+e.scrollLeft)));let i={[r]:n,[W]:t?t[W]:0};if(typeof q[r]!=`number`||typeof q[W]!=`number`)ge(i);else{let e=Math.abs(q[r]-i[r]),t=Math.abs(q[W]-i[W]);(e>=1||t>=1)&&ge(i)}}),Q=(e,{animation:t=!0}={})=>{t?ne(B,J.current,e,{duration:a.transitions.duration.standard}):J.current[B]=e},Ae=e=>{let t=J.current[B];z?t+=e:t+=e*(u?-1:1),Q(t)},je=()=>{let e=J.current[U],t=0,n=Array.from(Y.current.children);for(let r=0;r<n.length;r+=1){let i=n[r];if(t+i[U]>e){r===0&&(t=e);break}t+=i[U]}return t},Me=()=>{Ae(-1*je())},Ne=()=>{Ae(je())},[Pe,{onChange:Fe,...Ie}]=s(`scrollbar`,{className:o(K.scrollableX,K.hideScrollbar),elementType:ue,shouldForwardComponentProp:!0,externalForwardedProps:X,ownerState:G}),Le=D.useCallback(e=>{Fe?.(e),De({overflow:null,scrollbarWidth:e})},[Fe]),[Re,ze]=s(`scrollButtons`,{className:K.scrollButtons,elementType:ie,externalForwardedProps:X,ownerState:G,additionalProps:{orientation:k,slots:{StartScrollButtonIcon:M.startScrollButtonIcon,EndScrollButtonIcon:M.endScrollButtonIcon},slotProps:{startScrollButtonIcon:fe,endScrollButtonIcon:pe}}}),Be=()=>{let e={};e.scrollbarSizeListener=R?(0,A.jsx)(Pe,{...Ie,onChange:Le}):null;let t=R&&(j===`auto`&&(_e||ye)||j===!0);return e.scrollButtonStart=t?(0,A.jsx)(Re,{direction:u?`right`:`left`,onClick:Me,disabled:!_e,...ze}):null,e.scrollButtonEnd=t?(0,A.jsx)(Re,{direction:u?`left`:`right`,onClick:Ne,disabled:!ye,...ze}):null,e},Ve=l(e=>{let{tabsMeta:t,tabMeta:n}=ke();!n||!t||(n[V]<t[V]?Q(t[B]+(n[V]-t[V]),{animation:e}):n[H]>t[H]&&Q(t[B]+(n[H]-t[H]),{animation:e}))}),$=l(()=>{R&&j!==!1&&Se(!xe)});D.useEffect(()=>{let e=b(()=>{J.current&&Z()}),t,n=n=>{n.forEach(e=>{e.removedNodes.forEach(e=>{t?.unobserve(e)}),e.addedNodes.forEach(e=>{t?.observe(e)})}),e(),$()},r=T(J.current);r.addEventListener(`resize`,e);let i;return typeof ResizeObserver<`u`&&(t=new ResizeObserver(e),Array.from(Y.current.children).forEach(e=>{t.observe(e)})),typeof MutationObserver<`u`&&(i=new MutationObserver(n),i.observe(Y.current,{childList:!0})),()=>{e.clear(),r.removeEventListener(`resize`,e),i?.disconnect(),t?.disconnect()}},[Z,$]),D.useEffect(()=>{let e=Array.from(Y.current.children),t=e.length;if(typeof IntersectionObserver<`u`&&t>0&&R&&j!==!1){let n=e[0],r=e[t-1],i={root:J.current,threshold:.99},a=new IntersectionObserver(e=>{ve(!e[0].isIntersecting)},i);a.observe(n);let o=new IntersectionObserver(e=>{be(!e[0].isIntersecting)},i);return o.observe(r),()=>{a.disconnect(),o.disconnect()}}},[R,j,xe,_?.length]),D.useEffect(()=>{he(!0)},[]),D.useEffect(()=>{Z()}),D.useEffect(()=>{Ve(de!==q)},[Ve,q]),D.useImperativeHandle(h,()=>({updateIndicator:Z,updateScrollButtons:$}),[Z,$]);let[He,Ue]=s(`indicator`,{className:K.indicator,elementType:le,externalForwardedProps:X,ownerState:G,additionalProps:{style:q}}),We=(0,A.jsx)(He,{...Ue}),Ge=w({activeItemId:we?void 0:Ce,orientation:k,isRtl:u}),Ke=Ge.getContainerProps(),qe=D.Children.toArray(_).filter(D.isValidElement).map((e,t)=>{let n=e.props.value===void 0?t:e.props.value;return Oe.set(n,t),{child:e,index:t,childValue:n}}).map(({child:e,childValue:t})=>{let n=t===F;return D.cloneElement(e,{fullWidth:I===`fullWidth`,indicator:n&&!me&&We,selected:n,selectionFollowsFocus:te,onChange:O,textColor:P,value:t})}),Je=Be(),[Ye,Xe]=s(`root`,{ref:t,className:o(K.root,v),elementType:oe,externalForwardedProps:{...X,...re,component:y},ownerState:G}),[Ze,Qe]=s(`scroller`,{ref:J,className:K.scroller,elementType:se,externalForwardedProps:X,ownerState:G,additionalProps:{style:{overflow:Ee.overflow,[z?`margin${u?`Left`:`Right`}`:`marginBottom`]:L?void 0:-Ee.scrollbarWidth}}}),$e=f(Ke.ref,Y),et=e=>{let t=Y.current;E(S(t))?.getAttribute(`role`)===`tab`&&Ke.onKeyDown(e)},[tt,nt]=s(`list`,{ref:$e,className:K.list,elementType:ce,externalForwardedProps:X,ownerState:G,getSlotProps:e=>({...e,onBlur:t=>{t.currentTarget.contains(t.relatedTarget)||Te(!1),e.onBlur?.(t)},onKeyDown:t=>{et(t),e.onKeyDown?.(t)},onFocus:t=>{Te(!0),Ke.onFocus(t),e.onFocus?.(t)}})});return(0,A.jsxs)(Ye,{...Xe,children:[Je.scrollButtonStart,Je.scrollbarSizeListener,(0,A.jsxs)(Ze,{...Qe,children:[(0,A.jsx)(tt,{"aria-label":p,"aria-labelledby":m,"aria-orientation":k===`vertical`?`vertical`:null,role:`tablist`,...nt,children:(0,A.jsx)(x.Provider,{value:Ge,children:qe})}),me&&We]}),Je.scrollButtonEnd]})});export{M as n,U as t};