carbon-react 158.10.1 → 158.12.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{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,{ariaLabel: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};

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

@@ -1 +1 @@
-import i,{css as o}from"styled-components";import t from"../../../style/utils/add-focus-styling.js";const e={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},d=i.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-4305491c-0"})(["padding:0 6px;"]),r=i.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-4305491c-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:i})=>o(["flex-direction:",";",":8px;"],"vertical"===i?"column":"row","horizontal"===i?"margin-bottom":"margin-right"))),n=i.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-4305491c-2"})(["display:flex;z-index:6;"]),a=i.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-4305491c-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=i.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-4305491c-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({size:i})=>"medium"===i?"40px":"48px"),(({size:i})=>"medium"===i?"40px":"48px")),b=i.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-4305491c-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:i})=>"medium"===i?"40px":"48px"),(({size:i})=>"medium"===i?"40px":"48px")),l=i.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-4305491c-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{align-items:center;display:flex;gap:8px;","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;border-radius:8px;}"],(({activeTab:i,size:t})=>i&&"large"===t&&o(["margin-top:-4px;"])),(({size:i})=>o(["font-size:","px;height:","px;padding:","px ","px;"],e[i].fontSize,e[i].height,e[i].paddingY,e[i].paddingX)),(({activeTab:i,error:t,info:d,orientation:r,size:n,warning:a})=>i&&"horizontal"===r&&o(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],e[n].paddingY-4,e[n].paddingX-2,e[n].paddingY,e[n].paddingX-2,(()=>t?"#db004e":a?"#d64309":d?"#0060a7ff":"black"))),(({activeTab:i,error:t,info:d,orientation:r,size:n,warning:a})=>"vertical"===r?o(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:","px;min-width:","px;",""],200,200,i&&o(["background-color:white;border:2px solid #8b8b8bff;border-right:none;padding-top:","px !important;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}.tab-title-content-wrapper{::after{content:"";position:absolute;right:0;top:20%;height:60%;width:4px;background-color:',";border-radius:2px;min-height:24px;}}"],"medium"===n?e.medium.paddingY-2:4,e[n].paddingX-2,"medium"===n?e.medium.paddingY-2:e.large.paddingY,e[n].paddingX-2,(()=>t?"#db004e":a?"#d64309":d?"#0060a7ff":"black"))):o([""])),t()),s=i.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-4305491c-7"})(["display:flex;",""],(({orientation:i})=>o(["flex-direction:",";"],"horizontal"===i?"column":"row"))),g=i.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-4305491c-8"})(["",""],(({visible:i})=>o(["display:",";"],i?"block":"none")));export{a as Spacer,p as StyledScrollButton,b as StyledScrollButtonPlaceholder,l as StyledTab,r as StyledTabList,n as StyledTabListWrapper,d as StyledTabPanel,g as StyledTabProvider,s as StyledTabs};
+import o,{css as i}from"styled-components";import t from"../../../style/utils/add-focus-styling.js";const e={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},d=o.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-40b14a58-0"})(["padding:0 6px;"]),r=o.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-40b14a58-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:o})=>i(["flex-direction:",";",":8px;"],"vertical"===o?"column":"row","horizontal"===o?"margin-bottom":"margin-right"))),a=o.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-40b14a58-2"})(["display:flex;z-index:6;"]),n=o.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-40b14a58-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=o.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-40b14a58-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({size:o})=>"medium"===o?"40px":"48px"),(({size:o})=>"medium"===o?"40px":"48px")),b=o.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-40b14a58-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:o})=>"medium"===o?"40px":"48px"),(({size:o})=>"medium"===o?"40px":"48px")),l=o.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-40b14a58-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{align-items:center;display:flex;gap:8px;","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({activeTab:o,size:t})=>o&&"large"===t&&i(["margin-top:-4px;"])),(({size:o})=>i(["font-size:","px;height:","px;padding:","px ","px;"],e[o].fontSize,e[o].height,e[o].paddingY,e[o].paddingX)),(({activeTab:o,error:t,info:d,orientation:r,size:a,warning:n})=>o&&"horizontal"===r&&i(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],e[a].paddingY-4,e[a].paddingX-2,e[a].paddingY,e[a].paddingX-2,(()=>t?"#db004e":n?"#d64309":d?"#0060a7ff":"black"))),(({activeTab:o,error:t,info:d,orientation:r,size:a,warning:n})=>"vertical"===r?i(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:","px;min-width:","px;",""],200,200,o&&i(["background-color:white;border:2px solid #8b8b8bff;border-right:none;padding-top:","px !important;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}.tab-title-content-wrapper{::after{content:"";position:absolute;right:0;top:20%;height:60%;width:4px;background-color:',";border-radius:2px;min-height:24px;}}"],"medium"===a?e.medium.paddingY-2:4,e[a].paddingX-2,"medium"===a?e.medium.paddingY-2:e.large.paddingY,e[a].paddingX-2,(()=>t?"#db004e":n?"#d64309":d?"#0060a7ff":"black"))):i([""])),t(),(({orientation:o})=>i(["border-top-left-radius:8px;border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:0px;"],"horizontal"===o?"8px":"0","horizontal"===o?"0px":"8px"))),s=o.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-40b14a58-7"})(["display:flex;",""],(({orientation:o})=>i(["flex-direction:",";"],"horizontal"===o?"column":"row"))),g=o.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-40b14a58-8"})(["",""],(({visible:o})=>i(["display:",";"],o?"block":"none")));export{n as Spacer,p as StyledScrollButton,b as StyledScrollButtonPlaceholder,l as StyledTab,r as StyledTabList,a as StyledTabListWrapper,d as StyledTabPanel,g as StyledTabProvider,s as StyledTabs};

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("./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,{ariaLabel: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;

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

@@ -1 +1 @@
-"use strict";var t=require("styled-components"),e=require("../../../style/utils/add-focus-styling.js");function o(t){return t&&t.__esModule?t:{default:t}}var i=o(t);const d={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},r=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-4305491c-0"})(["padding:0 6px;"]),a=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-4305491c-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:e})=>t.css(["flex-direction:",";",":8px;"],"vertical"===e?"column":"row","horizontal"===e?"margin-bottom":"margin-right"))),n=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-4305491c-2"})(["display:flex;z-index:6;"]),p=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-4305491c-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),s=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-4305491c-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),l=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-4305491c-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-4305491c-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{align-items:center;display:flex;gap:8px;","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;border-radius:8px;}"],(({activeTab:e,size:o})=>e&&"large"===o&&t.css(["margin-top:-4px;"])),(({size:e})=>t.css(["font-size:","px;height:","px;padding:","px ","px;"],d[e].fontSize,d[e].height,d[e].paddingY,d[e].paddingX)),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>e&&"horizontal"===r&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],d[a].paddingY-4,d[a].paddingX-2,d[a].paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>"vertical"===r?t.css(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:","px;min-width:","px;",""],200,200,e&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-right:none;padding-top:","px !important;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}.tab-title-content-wrapper{::after{content:"";position:absolute;right:0;top:20%;height:60%;width:4px;background-color:',";border-radius:2px;min-height:24px;}}"],"medium"===a?d.medium.paddingY-2:4,d[a].paddingX-2,"medium"===a?d.medium.paddingY-2:d.large.paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))):t.css([""])),e.default()),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-4305491c-7"})(["display:flex;",""],(({orientation:e})=>t.css(["flex-direction:",";"],"horizontal"===e?"column":"row"))),g=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-4305491c-8"})(["",""],(({visible:e})=>t.css(["display:",";"],e?"block":"none")));exports.Spacer=p,exports.StyledScrollButton=s,exports.StyledScrollButtonPlaceholder=l,exports.StyledTab=b,exports.StyledTabList=a,exports.StyledTabListWrapper=n,exports.StyledTabPanel=r,exports.StyledTabProvider=g,exports.StyledTabs=c;
+"use strict";var t=require("styled-components"),o=require("../../../style/utils/add-focus-styling.js");function e(t){return t&&t.__esModule?t:{default:t}}var i=e(t);const d={medium:{fontSize:14,iconMinWidth:84,height:40,paddingX:16,paddingY:8,width:56},large:{fontSize:16,iconMinWidth:104,height:48,paddingX:24,paddingY:0,width:76}},r=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-40b14a58-0"})(["padding:0 6px;"]),a=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-40b14a58-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:o})=>t.css(["flex-direction:",";",":8px;"],"vertical"===o?"column":"row","horizontal"===o?"margin-bottom":"margin-right"))),n=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-40b14a58-2"})(["display:flex;z-index:6;"]),p=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-40b14a58-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),s=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-40b14a58-4"})(["height:",";width:",";border-radius:0px;border-top-right-radius:8px;border-top-left-radius:8px;border-color:#8b8b8bff;background:white;border:none;border-bottom:2px solid #8b8b8bff;top:6px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),l=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-40b14a58-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-40b14a58-6"})(["background-color:transparent;border:none;border-bottom:2px solid #8b8b8bff;border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:8px;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{align-items:center;display:flex;gap:8px;","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({activeTab:o,size:e})=>o&&"large"===e&&t.css(["margin-top:-4px;"])),(({size:o})=>t.css(["font-size:","px;height:","px;padding:","px ","px;"],d[o].fontSize,d[o].height,d[o].paddingY,d[o].paddingX)),(({activeTab:o,error:e,info:i,orientation:r,size:a,warning:n})=>o&&"horizontal"===r&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],d[a].paddingY-4,d[a].paddingX-2,d[a].paddingY,d[a].paddingX-2,(()=>e?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))),(({activeTab:o,error:e,info:i,orientation:r,size:a,warning:n})=>"vertical"===r?t.css(["border:none;border-right:2px solid #8b8b8bff;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:8px;border-top-right-radius:0px;max-width:","px;min-width:","px;",""],200,200,o&&t.css(["background-color:white;border:2px solid #8b8b8bff;border-right:none;padding-top:","px !important;padding-right:","px;padding-bottom:","px;padding-left:",'px;:hover{background-color:white;}.tab-title-content-wrapper{::after{content:"";position:absolute;right:0;top:20%;height:60%;width:4px;background-color:',";border-radius:2px;min-height:24px;}}"],"medium"===a?d.medium.paddingY-2:4,d[a].paddingX-2,"medium"===a?d.medium.paddingY-2:d.large.paddingY,d[a].paddingX-2,(()=>e?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))):t.css([""])),o.default(),(({orientation:o})=>t.css(["border-top-left-radius:8px;border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:0px;"],"horizontal"===o?"8px":"0","horizontal"===o?"0px":"8px"))),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-40b14a58-7"})(["display:flex;",""],(({orientation:o})=>t.css(["flex-direction:",";"],"horizontal"===o?"column":"row"))),g=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-40b14a58-8"})(["",""],(({visible:o})=>t.css(["display:",";"],o?"block":"none")));exports.Spacer=p,exports.StyledScrollButton=s,exports.StyledScrollButtonPlaceholder=l,exports.StyledTab=b,exports.StyledTabList=a,exports.StyledTabListWrapper=n,exports.StyledTabPanel=r,exports.StyledTabProvider=g,exports.StyledTabs=c;

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.12.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",