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

A React component library for building retro-style websites

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