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