carbon-react 158.10.1 → 158.11.0

package/esm/components/tabs/__next__/tabs.component.js

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

package/esm/components/tabs/__next__/tabs.types.d.ts

@@ -43,6 +43,8 @@ export interface TabListProps {
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
     children?: React.ReactNode;
+    /** A callback for when the active tab is changed */
+    onTabChange?: (tabId: string) => void;
 }
 export interface TabProps {
     /** The tab panel that this tab controls */

package/lib/components/tabs/__next__/tabs.component.js

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

package/lib/components/tabs/__next__/tabs.types.d.ts

@@ -43,6 +43,8 @@ export interface TabListProps {
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
     children?: React.ReactNode;
+    /** A callback for when the active tab is changed */
+    onTabChange?: (tabId: string) => void;
 }
 export interface TabProps {
     /** The tab panel that this tab controls */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.10.1",
+  "version": "158.11.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",