UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

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