UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

2 lines (1 loc) 2.33 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),y=require("classnames"),v=require("../index-Bsb1LHpi.js"),g=require("../utils-C9NL3q0j.js"),T=require("../tslib.es6-C4EgNkz1.js"),x=n=>{var{children:i,index:s,parentId:d,selected:o,disabled:b,focused:r,className:u,refCallback:f}=n,_=T.__rest(n,["children","index","parentId","selected","disabled","focused","className","refCallback"]);return a.createElement("div",Object.assign({},_,{ref:f,"aria-controls":`${d||"default"}-tabpanel-${s}`,"aria-selected":o,"aria-disabled":b,className:y(u,"tabs__item"),id:`${d||"default"}-tab-${s}`,role:"tab",tabIndex:r?0:-1}),a.createElement("span",null,i))},w=n=>{var{children:i,index:s,parentId:d,selected:o,className:b}=n,r=T.__rest(n,["children","index","parentId","selected","className"]);return a.createElement("div",Object.assign({},r,{"aria-labelledby":`default-tab-${s}`,className:y(b,"tabs__panel"),id:`${d||"default"}-tabpanel-${s}`,role:"tabpanel",hidden:!o}),a.createElement("div",{className:"tabs__cell"},i))},O=({id:n,className:i,selectedIndex:s=0,size:d="medium",activation:o="auto",onSelect:b=()=>{},children:r})=>{const u=[],[f,_]=a.useState(s),[I,E]=a.useState(s),m=e=>{b({selectedIndex:e}),_(e)},k=(e,t)=>{v.handleActionKeydown(e,()=>{e.preventDefault(),o==="manual"&&m(t)}),v.handleLeftRightArrowsKeydown(e,()=>{var l;e.preventDefault();const p=g.filterByType(r,x).length,h=["Left","ArrowLeft"].includes(e.key)?-1:1,N=I===void 0?f:I;let c=(N+p+h)%p;for(;!(u[c].getAttribute("aria-disabled")!=="true"||c===N);)c=(c+p+h)%p;E(c),(l=u[c])===null||l===void 0||l.focus(),o!=="manual"&&m(c)})};a.useEffect(()=>{m(s)},[s]);const S=d==="large",j=g.filterByType(r,x).map((e,t)=>a.cloneElement(e,Object.assign(Object.assign({},e.props),{refCallback:l=>{u[t]=l},index:t,parentId:n,selected:f===t,focused:I===t,onClick:()=>{e.props.disabled||(m(t),E(t))},onKeyDown:l=>{k(l,t)}}))),q=g.filterByType(r,w).map((e,t)=>{const l={index:t,parentId:n,selected:f===t,children:e.props.children};return a.cloneElement(e,l)});return a.createElement("div",{id:n,className:y(i,"tabs")},a.createElement("div",{className:y("tabs__items",{"tabs__items--large":S}),role:"tablist"},j),a.createElement("div",{className:"tabs__content"},q))};exports.EbayTab=x;exports.EbayTabPanel=w;exports.EbayTabs=O;