carbon-react 158.3.0 → 158.4.0

package/esm/components/flat-table/sort/sort.component.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as r,jsx as o}from"react/jsx-runtime";import{useRef as t}from"react";import n from"../../../__internal__/utils/helpers/events/events.js";import{Typography as l}from"../../typography/typography.component.js";import{StyledSort as a,StyledSortIcon as s,StyledSpaceHolder as i}from"./sort.style.js";import c from"../../../__internal__/utils/helpers/guid/index.js";import m from"../../../hooks/__internal__/useLocale/useLocale.js";import{useStrictFlatTableContext as p}from"../__internal__/strict-flat-table.context.js";const d=({children:d,onClick:_,sortType:u,accessibleName:y,"data-element":f,"data-role":h})=>{const b=t(c()),j=m(),{colorTheme:g}=p();return e(r,{children:[o(l,{screenReaderOnly:!0,id:b.current,children:y||j.sort.accessibleName(d,u)}),e(a,{role:"button",onKeyDown:e=>n.isEnterOrSpaceKey(e)?(e.preventDefault(),null==_?void 0:_()):null,tabIndex:0,onClick:_,sortType:u,"aria-labelledby":b.current,"data-component":"sort","data-element":f,"data-role":h,children:[d,u&&o(s,{type:"ascending"===u?"sort_up":"sort_down",iconColor:"dark"===g?"--colorsActionMinorYang100":"--colorActionMinor500"})]}),!u&&o(i,{"data-role":"sort-placeholder"})]})};export{d as Sort,d as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useRef as o}from"react";import{useStrictFlatTableContext as n}from"../__internal__/strict-flat-table.context.js";import{Typography as a}from"../../typography/typography.component.js";import l from"../../../__internal__/utils/helpers/events/events.js";import s from"../../../__internal__/utils/helpers/guid/index.js";import i from"../../../hooks/__internal__/useLocale/useLocale.js";import c from"../../icon/icon.component.js";import m from"./sort.style.js";const p=({children:p,onClick:d,sortType:_,accessibleName:u,"data-element":h,"data-role":f})=>{const y=o(s()),j=i(),{colorTheme:b}=n();return e(r,{children:[t(a,{screenReaderOnly:!0,id:y.current,children:u||j.sort.accessibleName(p,_)}),e(m,{"aria-labelledby":y.current,colorTheme:b,"data-component":"sort","data-element":h,"data-role":f,onClick:d,onKeyDown:e=>l.isEnterOrSpaceKey(e)?(e.preventDefault(),null==d?void 0:d()):null,children:[t("span",{children:p}),_?t(c,{"data-element":"sort-icon",type:"ascending"===_?"sort_up":"sort_down"}):t("span",{"data-role":"sort-placeholder"})]})]})};export{p as Sort,p as default};

package/esm/components/flat-table/sort/sort.style.d.ts

@@ -1,11 +1,5 @@
-import { StyledIconProps } from "../../icon/icon.style";
-import { SortProps } from "./sort.component";
-declare const StyledSort: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<SortProps, "sortType">, "theme">;
-declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface StylesSortIconProps extends StyledIconProps {
-    iconColor?: string;
-}
-declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
-export { StyledSort, StyledSpaceHolder, StyledSortIcon };
+declare const StyledSortButton: import("styled-components").StyledComponent<"button", any, {
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+}, never>;
+export default StyledSortButton;

package/esm/components/flat-table/sort/sort.style.js

@@ -1 +1 @@
-import o from"styled-components";import t from"../../icon/icon.component.js";import e from"../../../style/utils/add-focus-styling.js";import i from"../../../style/themes/apply-base-theme.js";const r=o.div.attrs(i).withConfig({displayName:"sort.style__StyledSort",componentId:"sc-806736b5-0"})(["display:inline-flex;align-items:center;padding-left:2px;padding-right:2px;border-bottom:1px solid transparent;position:relative;:hover{border-bottom:1px solid;cursor:pointer;}:focus{"," border-radius:var(--borderRadius025);}"],e()),s=o.div.withConfig({displayName:"sort.style__StyledSpaceHolder",componentId:"sc-806736b5-1"})(["display:inline-block;width:22px;"]),n=o(t).withConfig({displayName:"sort.style__StyledSortIcon",componentId:"sc-806736b5-2"})(["padding-left:var(--spacing075);color:",";"],(({iconColor:o})=>`var(${o})`));export{r as StyledSort,n as StyledSortIcon,s as StyledSpaceHolder};
+import o,{css as t}from"styled-components";import r from"../../../style/utils/add-focus-styling.js";const e={compact:{fontSize:"13px"},small:{fontSize:"14px"},medium:{fontSize:"14px"},large:{fontSize:"16px"},extraLarge:{fontSize:"16px"}},i=o.button.withConfig({displayName:"sort.style__StyledSortButton",componentId:"sc-93b844db-0"})(["",""],(({colorTheme:o="light",size:i="medium"})=>t(["align-items:center;background:transparent;border:none;border-radius:0;color:",";display:inline-flex;font-size:",';font-weight:500;gap:var(--spacing075);position:relative;text-align:left;word-break:keep-all;span[data-role="sort-placeholder"]{min-width:24px;:hover{border-bottom:none;}}&:hover{span:first-of-type{border-bottom:1px solid ',";}}:focus{",' border-radius:var(--borderRadius025);}span[data-component="icon"]{color:',";margin-bottom:1px;}"],"dark"===o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",e[i].fontSize,"dark"===o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",r(),"dark"===o?"var(--colorsActionMinorYang100)":"var(--colorActionMinor500)")));export{i as default};

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
+import { TabsHandle, TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
 export declare const TabPanel: ({ children, id, tabId }: TabPanelProps) => React.JSX.Element;
 export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
-export declare const TabList: ({ ariaLabel, children }: TabListProps) => React.JSX.Element;
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<TabsHandle>>;
 export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
 export default Tabs;

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

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

@@ -4,6 +4,13 @@ export type ValidationRecord = Record<string, TabValidationRecord>;
 export interface TabContextProps {
     tabId?: string;
 }
+export type TabsHandle = {
+    /**
+     * Programmatically focus on a specific tab.
+     * @param id - The ID of the tab to focus. Must match the `id` prop of the target `Tab` component.
+     */
+    focusTab: (id: string) => void;
+};
 export interface TabsContextProps {
     activeTab: string;
     currentTabId?: string;

package/lib/components/flat-table/sort/sort.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../__internal__/utils/helpers/events/events.js"),o=require("../../typography/typography.component.js"),l=require("./sort.style.js"),n=require("../../../__internal__/utils/helpers/guid/index.js"),s=require("../../../hooks/__internal__/useLocale/useLocale.js"),a=require("../__internal__/strict-flat-table.context.js");const i=({children:i,onClick:c,sortType:d,accessibleName:u,"data-element":p,"data-role":_})=>{const y=r.useRef(n.default()),j=s.default(),{colorTheme:x}=a.useStrictFlatTableContext();return e.jsxs(e.Fragment,{children:[e.jsx(o.Typography,{screenReaderOnly:!0,id:y.current,children:u||j.sort.accessibleName(i,d)}),e.jsxs(l.StyledSort,{role:"button",onKeyDown:e=>t.default.isEnterOrSpaceKey(e)?(e.preventDefault(),null==c?void 0:c()):null,tabIndex:0,onClick:c,sortType:d,"aria-labelledby":y.current,"data-component":"sort","data-element":p,"data-role":_,children:[i,d&&e.jsx(l.StyledSortIcon,{type:"ascending"===d?"sort_up":"sort_down",iconColor:"dark"===x?"--colorsActionMinorYang100":"--colorActionMinor500"})]}),!d&&e.jsx(l.StyledSpaceHolder,{"data-role":"sort-placeholder"})]})};exports.Sort=i,exports.default=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../__internal__/strict-flat-table.context.js"),s=require("../../typography/typography.component.js"),n=require("../../../__internal__/utils/helpers/events/events.js"),a=require("../../../__internal__/utils/helpers/guid/index.js"),l=require("../../../hooks/__internal__/useLocale/useLocale.js"),o=require("../../icon/icon.component.js"),i=require("./sort.style.js");const c=({children:c,onClick:u,sortType:d,accessibleName:p,"data-element":_,"data-role":j})=>{const h=r.useRef(a.default()),y=l.default(),{colorTheme:x}=t.useStrictFlatTableContext();return e.jsxs(e.Fragment,{children:[e.jsx(s.Typography,{screenReaderOnly:!0,id:h.current,children:p||y.sort.accessibleName(c,d)}),e.jsxs(i.default,{"aria-labelledby":h.current,colorTheme:x,"data-component":"sort","data-element":_,"data-role":j,onClick:u,onKeyDown:e=>n.default.isEnterOrSpaceKey(e)?(e.preventDefault(),null==u?void 0:u()):null,children:[e.jsx("span",{children:c}),d?e.jsx(o.default,{"data-element":"sort-icon",type:"ascending"===d?"sort_up":"sort_down"}):e.jsx("span",{"data-role":"sort-placeholder"})]})]})};exports.Sort=c,exports.default=c;

package/lib/components/flat-table/sort/sort.style.d.ts

@@ -1,11 +1,5 @@
-import { StyledIconProps } from "../../icon/icon.style";
-import { SortProps } from "./sort.component";
-declare const StyledSort: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<SortProps, "sortType">, "theme">;
-declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface StylesSortIconProps extends StyledIconProps {
-    iconColor?: string;
-}
-declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
-export { StyledSort, StyledSpaceHolder, StyledSortIcon };
+declare const StyledSortButton: import("styled-components").StyledComponent<"button", any, {
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+}, never>;
+export default StyledSortButton;

package/lib/components/flat-table/sort/sort.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../../icon/icon.component.js"),o=require("../../../style/utils/add-focus-styling.js"),r=require("../../../style/themes/apply-base-theme.js");function d(e){return e&&e.__esModule?e:{default:e}}var i=d(e);const s=i.default.div.attrs(r.default).withConfig({displayName:"sort.style__StyledSort",componentId:"sc-806736b5-0"})(["display:inline-flex;align-items:center;padding-left:2px;padding-right:2px;border-bottom:1px solid transparent;position:relative;:hover{border-bottom:1px solid;cursor:pointer;}:focus{"," border-radius:var(--borderRadius025);}"],o.default()),l=i.default.div.withConfig({displayName:"sort.style__StyledSpaceHolder",componentId:"sc-806736b5-1"})(["display:inline-block;width:22px;"]),n=i.default(t.default).withConfig({displayName:"sort.style__StyledSortIcon",componentId:"sc-806736b5-2"})(["padding-left:var(--spacing075);color:",";"],(({iconColor:e})=>`var(${e})`));exports.StyledSort=s,exports.StyledSortIcon=n,exports.StyledSpaceHolder=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),e=require("../../../style/utils/add-focus-styling.js");function t(o){return o&&o.__esModule?o:{default:o}}const r={compact:{fontSize:"13px"},small:{fontSize:"14px"},medium:{fontSize:"14px"},large:{fontSize:"16px"},extraLarge:{fontSize:"16px"}},i=t(o).default.button.withConfig({displayName:"sort.style__StyledSortButton",componentId:"sc-93b844db-0"})(["",""],(({colorTheme:t="light",size:i="medium"})=>o.css(["align-items:center;background:transparent;border:none;border-radius:0;color:",";display:inline-flex;font-size:",';font-weight:500;gap:var(--spacing075);position:relative;text-align:left;word-break:keep-all;span[data-role="sort-placeholder"]{min-width:24px;:hover{border-bottom:none;}}&:hover{span:first-of-type{border-bottom:1px solid ',";}}:focus{",' border-radius:var(--borderRadius025);}span[data-component="icon"]{color:',";margin-bottom:1px;}"],"dark"===t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",r[i].fontSize,"dark"===t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",e.default(),"dark"===t?"var(--colorsActionMinorYang100)":"var(--colorActionMinor500)")));exports.default=i;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
+import { TabsHandle, TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
 export declare const TabPanel: ({ children, id, tabId }: TabPanelProps) => React.JSX.Element;
 export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
-export declare const TabList: ({ ariaLabel, children }: TabListProps) => React.JSX.Element;
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<TabsHandle>>;
 export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
 export default Tabs;

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");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(t);let u=!1;const 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,j]=t.useState(h),[v,S]=t.useState(p),{activeTab:T,focusIndex:I,orientation:k,setActiveTab:m,setCurrentTabId:w,setFocusIndex:_,size:z,errors:L,warnings:q,infos:A}=a.useTabs(),P=T===c;t.useEffect((()=>{P&&w(c)}),[c,P,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=L[c],t=q[c],r=A[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 j(!1);const n=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=h||n.length>0;if(j(s),!r)return void S(!1);const o=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),d=p||o.length>0;S(d)}),[i,c,L,q,h,A,p]);const E=()=>{if(x||y||v){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(v)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":P?"true":"false",error:x,info:v,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=({ariaLabel:n,children:o})=>{const c=d.default.useRef(null),{activeTab:u,focusIndex:b,orientation:f,selectedTabId:h,setFocusIndex:p,setActiveTab:x,size:g}=a.useTabs(),y=t.useCallback((()=>{var e;const t=(null===(e=c.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=y()[0];x(e)}}),[u,y,h,x]);const[j,v]=t.useState(!1),[S,T]=t.useState(!1),[I,k]=t.useState(!1),m=t.useCallback((()=>{if(c.current){const e=c.current.scrollWidth-c.current.clientWidth-20;v(e>0),T(c.current.scrollLeft>=20),k(c.current.scrollLeft<=e)}}),[]);i.default(c,(()=>{m()})),t.useEffect((()=>{c.current&&m()}),[m]);const w=e=>{c.current&&("left"===e?c.current.scrollLeft-=200:c.current.scrollLeft+=200,m())};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&&j?S?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>w("left"),size:g,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(s.default,{type:"chevron_left"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:g}):null,e.jsxs(l.StyledTabList,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=y(),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:c,role:"tablist",size:g,tabIndex:-1,children:[o,e.jsx(l.Spacer,{})]}),"vertical"!==f&&j?I?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>w("right"),size:g,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(s.default,{type:"chevron_right"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:g}):null]})]})},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("../../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;

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

@@ -4,6 +4,13 @@ export type ValidationRecord = Record<string, TabValidationRecord>;
 export interface TabContextProps {
     tabId?: string;
 }
+export type TabsHandle = {
+    /**
+     * Programmatically focus on a specific tab.
+     * @param id - The ID of the tab to focus. Must match the `id` prop of the target `Tab` component.
+     */
+    focusTab: (id: string) => void;
+};
 export interface TabsContextProps {
     activeTab: string;
     currentTabId?: string;

package/package.json

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