carbon-react/esm/components/tabs/__next__/tabs.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as i,useEffect as o,useRef as l,useImperativeHandle as a,useCallback as s}from"react";import{TabsProvider as c,useTabs as d}from"./tabs.context.js";import{StyledTabs as b,StyledTab as u,StyledTabListWrapper as f,StyledTabList as h,Spacer as g,StyledTabPanel as p,StyledScrollButton as m,StyledScrollButtonPlaceholder as v}from"./tabs.style.js";import y from"../../../__internal__/utils/logger/index.js";import I from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import w from"../../icon/icon.component.js";import{TabProvider as x}from"./tab.context.js";import k from"../../../hooks/__internal__/usePrevious/index.js";const T=({children:t,id:r,tabId:n})=>{const{activeTab:i}=d();return e(x,{tabId:n,visible:n===i,children:e(p,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})};let _=!1;const z=({controls:r,error:n=!1,id:l,label:a,leftSlot:s,rightSlot:c,warning:b=!1,info:f=!1})=>{const[h,g]=i(n),[p,m]=i(b),[v,I]=i(f),{activeTab:k,focusIndex:T,orientation:z,setActiveTab:j,setCurrentTabId:S,setFocusIndex:A,size:L,errors:O,warnings:C,infos:R}=d(),N=k===l;o((()=>{N&&S(l)}),[l,N,S]),!s&&!c||"string"==typeof a||_||(y.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),_=!0),o((()=>{if(T===l){const e=document.getElementById(l);null==e||e.focus()}}),[T,l,S]),o((()=>{let e=O[l],t=C[l],r=R[l];if(n&&!e&&(e={static:n}),b&&!t&&(t={static:b}),f&&!r&&(r={static:f}),!e)return void g(!1);const i=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),o=n||i.length>0;if(g(o),!t)return void m(!1);const a=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=b||a.length>0;if(m(s),!r)return void I(!1);const c=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),d=f||c.length>0;I(d)}),[n,l,O,C,b,R,f]);const B=()=>{if(h||p||v){if(h)return e(w,{"data-role":"icon-error",type:"error",color:"#db004e"});if(p)return e(w,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(v)return e(w,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e(x,{tabId:l,visible:!0,children:e(u,{activeTab:k===l,"aria-controls":r,"aria-selected":N?"true":"false",error:h,info:v,id:l,onClick:()=>{j(l),A(l)},orientation:z,role:"tab",size:L,type:"button",tabIndex:k===l?0:-1,warning:p,children:t("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[s,a,c,B()]}:{className:"tab-title-content-wrapper",children:[a,B()]})})})},j=n((({ariaLabel:n,children:c,onTabChange:b},u)=>{const p=l(null),{activeTab:y,focusIndex:x,orientation:T,selectedTabId:_,setFocusIndex:z,setActiveTab:j,size:S}=d();a(u,(()=>({focusTab:e=>{var t;const r=null===(t=p.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),z(e),j(e)}})));const A=s((()=>{var e;const t=(null===(e=p.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);o((()=>{if(_)j(_);else if(!y){const e=A()[0];j(e)}}),[y,A,_,j]);const L=k(y);o((()=>{L&&L!==y&&(null==b||b(y))}),[y,b,L]);const[O,C]=i(!1),[R,N]=i(!1),[B,E]=i(!1),W=s((()=>{if(p.current){const e=p.current.scrollWidth-p.current.clientWidth-20;C(e>0),N(p.current.scrollLeft>=20),E(p.current.scrollLeft<=e)}}),[]);I(p,(()=>{W()})),o((()=>{p.current&&W()}),[W]);const q=e=>{p.current&&("left"===e?p.current.scrollLeft-=200:p.current.scrollLeft+=200,W())};return e(r,{children:t(f,{children:["vertical"!==T&&O?R?e(m,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>q("left"),size:S,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(w,{type:"chevron_left"})}):e(v,{size:S}):null,t(h,{"aria-label":n,id:"tablist",onKeyDown:e=>{const t=A(),r=t.indexOf(x||y),n=t.length-1;if(-1===r)return;let i=r;switch(e.key){case"Home":i=0;break;case"End":i=n;break;case"ArrowRight":i=(r+1)%t.length;break;case"ArrowLeft":i=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===T&&(i=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===T&&(i=(r+1)%t.length);break;case"Enter":case" ":return void j(y);default:return}z(t[i])},orientation:T,ref:p,role:"tablist",size:S,tabIndex:-1,children:[c,e(g,{})]}),"vertical"!==T&&O?B?e(m,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>q("right"),size:S,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(w,{type:"chevron_right"})}):e(v,{size:S}):null]})})})),S=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:o="medium"})=>e(c,{labelledBy:r,orientation:n,selectedTabId:i,size:o,children:e(b,{id:"tabs-container",orientation:n,children:t})});export{z as Tab,j as TabList,T as TabPanel,S as Tabs,S as default};