carbon-react 158.11.0 → 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 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};
+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/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"),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;
+"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/package.json

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