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

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

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