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