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