retro-react/dist/esm/components/tabs/Tabs.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as t,useState as a,useRef as r,useId as i,cloneElement as s}from"react";import{jsxs as l,jsx as n}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as o}from"../../utils/classNames.js";import c from"../../constants/commonClassNames.js";import{TabList as b,TabContent as d,TabsWrapper as m,TabItem as u}from"./Tabs.styled.js";const p=t(((t,u)=>{var{id:p,className:h,children:A,defaultActiveTabLabel:g}=t,j=e(t,["id","className","children","defaultActiveTabLabel"]);const[x,N]=a(g),y=r([]),T=i(),k=A.filter((e=>e&&e.type===v)),L=A.filter((e=>e&&e.type===f)),$=k.map(((e,t)=>s(e,{ref:e=>{y.current[t]=e},key:`${T}-tab-${t}`,$isActive:e.props.label===x,setActiveTabLabel:N,tabIndex:e.props.label===x?0:-1,"data-tab-id":e.props.label}))),C=L.find((e=>e.props.label===x));return l(m,Object.assign({ref:u,id:p,onKeyDown:e=>{const t=y.current.findIndex((e=>e&&e.getAttribute("data-tab-id")===x));if("ArrowRight"===e.key){const e=(t+1)%y.current.length,a=y.current[e];a&&(N(a.getAttribute("data-tab-id")||void 0),a.focus())}else if("ArrowLeft"===e.key){const e=(t-1+y.current.length)%y.current.length,a=y.current[e];a&&(N(a.getAttribute("data-tab-id")||void 0),a.focus())}},className:o("tabs-root",h,c),role:"tablist","aria-orientation":"horizontal"},j,{children:[n(b,Object.assign({className:"tabs-header"},{children:$}),void 0),C&&n(d,Object.assign({className:"tab-content-area"},{children:C}),void 0)]}),void 0)})),v=t(((t,a)=>{var{sx:r,label:i,children:s,$isActive:l=!1,onClick:c,setActiveTabLabel:b}=t,d=e(t,["sx","label","children","$isActive","onClick","setActiveTabLabel"]);return n(u,Object.assign({ref:a,sx:r,$isActive:l,"aria-label":i,onClick:()=>{c&&c(),b&&b(i)},className:o("tab-root",l?"tab-active":""),role:"tab",type:"button"},d,{children:s}),void 0)})),f=t=>{var{label:a,children:r,sx:i}=t,s=e(t,["label","children","sx"]);return n(d,Object.assign({sx:i},s,{className:"tab-content",role:"tabpanel"},{children:r}),void 0)};p.displayName="Tabs";export{v as Tab,f as TabContent,p as Tabs};