@transkripid/flowbite-react/lib/components/Tabs/Tabs.js

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),b=require("tailwind-merge"),q=require("../../helpers/merge-deep.js"),C=require("../../theme-store/index.js"),N=require("./TabItem.js"),T=a.forwardRef(({children:h,className:p,onActiveTabChange:y,style:m="default",theme:I={},...v},M)=>{const s=q.mergeDeep(C.getTheme().tabs,I),c=a.useId(),l=a.useMemo(()=>a.Children.map(a.Children.toArray(h),({props:e})=>e),[h]),g=a.useRef([]),[n,j]=a.useState(Math.max(0,l.findIndex(e=>e.active))),[r,o]=a.useState(-1),d=e=>{j(e),y&&y(e)},w=({target:e})=>{d(e),o(e)},$=({event:e,target:t})=>{e.key==="ArrowLeft"&&o(Math.max(0,r-1)),e.key==="ArrowRight"&&o(Math.min(l.length-1,r+1)),e.key==="Enter"&&(d(t),o(t))},u=s.tablist.tabitem.styles[m],k=s.tabitemcontainer.styles[m];return a.useEffect(()=>{var e;(e=g.current[r])==null||e.focus()},[r]),a.useImperativeHandle(M,()=>({setActiveTab:d})),i.jsxs("div",{className:b.twMerge(s.base,p),children:[i.jsx("div",{"aria-label":"Tabs",role:"tablist",className:b.twMerge(s.tablist.base,s.tablist.styles[m],p),...v,children:l.map((e,t)=>i.jsxs("button",{type:"button","aria-controls":`${c}-tabpanel-${t}`,"aria-selected":t===n,className:b.twMerge(s.tablist.tabitem.base,u.base,t===n&&u.active.on,t!==n&&!e.disabled&&u.active.off),disabled:e.disabled,id:`${c}-tab-${t}`,onClick:()=>w({target:t}),onKeyDown:f=>$({event:f,target:t}),ref:f=>g.current[t]=f,role:"tab",tabIndex:t===r?0:-1,style:{zIndex:t===r?2:1},children:[e.icon&&i.jsx(e.icon,{className:s.tablist.tabitem.icon}),e.title]},t))}),i.jsx("div",{className:b.twMerge(s.tabitemcontainer.base,k),children:l.map((e,t)=>i.jsx("div",{"aria-labelledby":`${c}-tab-${t}`,className:s.tabpanel,hidden:t!==n,id:`${c}-tabpanel-${t}`,role:"tabpanel",tabIndex:0,children:e.children},t))})]})});T.displayName="Tabs";const S=Object.assign(T,{Item:N.TabItem});exports.Tabs=S;
//# sourceMappingURL=Tabs.js.map