carbon-react 158.29.0 → 158.31.0

package/esm/__internal__/form-field/form-field.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as i,useLayoutEffect as l,useEffect as o}from"react";import a from"invariant";import s,{FieldLineStyle as d}from"./form-field.style.js";import p from"../label/label.component.js";import{FieldHelp as c}from"../field-help/field-help.component.js";import b from"../utils/helpers/tags/tags.js";import f from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";import{TabContext as u}from"../../components/tabs/tab/__internal__/tab.context.js";import{TabsContext as y}from"../../components/tabs/__next__/tabs.context.js";import{TabContext as O}from"../../components/tabs/__next__/tab.context.js";function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const I=I=>{var{maxWidth:j,children:h,"data-component":v,disabled:w,loading:_,fieldHelp:P,fieldHelpInline:x,error:H,warning:k,info:S,tooltipId:W,fieldHelpId:A,label:E,labelId:R,labelAlign:q,labelHelp:B,labelHelpIcon:D,labelInline:F,labelSpacing:V=2,labelWidth:L,labelAs:C,id:N,reverse:T,useValidationIcon:U,adaptiveLabelBreakpoint:$,isRequired:z,validationIconId:G,validationRedesignOptIn:J}=I,K=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(I,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!H,warning:!!k,info:!!S};if(w&&!_)return Object.keys(e).find((t=>e[t]))}),[H,k,S,w,_]);a(void 0===M,`Prop \`${M}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const Q=f($);let X=F;$&&(X=Q);const{setErrors:Y,setWarnings:Z,setInfos:ee}=r(y),{tabId:te}=r(O),{setError:ne,setWarning:re,setInfo:ie}=r(u),le=m(K),oe=i(!1);l((()=>(oe.current=!0,()=>{oe.current=!1})),[]),o((()=>(Y&&Y(N,te||"",H||!1),Z&&Z(N,te||"",k||!1),ee&&ee(N,te||"",S||!1),()=>{oe.current||(Y&&Y(N,te||"",!1),Z&&Z(N,te||"",!1),ee&&ee(N,te||"",!1))})),[N,Y,Z,H,k,S,te,ee]),o((()=>(ne&&ne(N,H),re&&re(N,k),ie&&ie(N,S),()=>{oe.current||(ne&&H&&ne(N,!1),re&&k&&re(N,!1),ie&&S&&ie(N,!1))})),[N,ne,re,ie,H,k,S]);const ae=P?t(c,{labelInline:X,labelWidth:L,id:A,children:P}):null;return e(s,(se=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){g(e,t,n[t])}))}return e}({},b(v,K),le),de=null!=(de={children:[e(d,{"data-role":"field-line",inline:X,maxWidth:j,children:[T&&h,E&&t(p,{labelId:R,align:q,disabled:w,error:!J&&H,warning:!J&&k,info:!J&&S,help:B,tooltipId:W,htmlFor:N,helpIcon:D,inline:X,width:L,useValidationIcon:U,pr:T?void 0:V,pl:T?V:void 0,isRequired:z,validationIconId:G,as:C,children:E}),x&&ae,!T&&h]}),!x&&ae]})?de:{},Object.getOwnPropertyDescriptors?Object.defineProperties(se,Object.getOwnPropertyDescriptors(de)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(de)).forEach((function(e){Object.defineProperty(se,e,Object.getOwnPropertyDescriptor(de,e))})),se));var se,de};I.displayName="FormField";export{I as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as i,useLayoutEffect as l,useEffect as o}from"react";import a from"invariant";import s,{FieldLineStyle as d}from"./form-field.style.js";import p from"../label/label.component.js";import{FieldHelp as c}from"../field-help/field-help.component.js";import b from"../utils/helpers/tags/tags.js";import f from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import{TabsContext as m}from"../../components/tabs/__next__/tabs.context.js";import{TabContext as y}from"../../components/tabs/__next__/tab.context.js";function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const g=g=>{var{maxWidth:I,children:j,"data-component":h,disabled:v,loading:w,fieldHelp:P,fieldHelpInline:_,error:x,warning:H,info:k,tooltipId:S,fieldHelpId:W,label:A,labelId:R,labelAlign:q,labelHelp:B,labelHelpIcon:D,labelInline:E,labelSpacing:F=2,labelWidth:V,labelAs:L,id:N,reverse:U,useValidationIcon:$,adaptiveLabelBreakpoint:z,isRequired:C,validationIconId:G,validationRedesignOptIn:J}=g,K=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(g,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!x,warning:!!H,info:!!k};if(v&&!w)return Object.keys(e).find((t=>e[t]))}),[x,H,k,v,w]);a(void 0===M,`Prop \`${M}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const Q=f(z);let T=E;z&&(T=Q);const{setErrors:X,setWarnings:Y,setInfos:Z}=r(m),{tabId:ee}=r(y),te=u(K),ne=i(!1);l((()=>(ne.current=!0,()=>{ne.current=!1})),[]),o((()=>(X&&X(N,ee||"",x||!1),Y&&Y(N,ee||"",H||!1),Z&&Z(N,ee||"",k||!1),()=>{ne.current||(X&&X(N,ee||"",!1),Y&&Y(N,ee||"",!1),Z&&Z(N,ee||"",!1))})),[N,X,Y,x,H,k,ee,Z]);const re=P?t(c,{labelInline:T,labelWidth:V,id:W,children:P}):null;return e(s,(ie=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){O(e,t,n[t])}))}return e}({},b(h,K),te),le=null!=(le={children:[e(d,{"data-role":"field-line",inline:T,maxWidth:I,children:[U&&j,A&&t(p,{labelId:R,align:q,disabled:v,error:!J&&x,warning:!J&&H,info:!J&&k,help:B,tooltipId:S,htmlFor:N,helpIcon:D,inline:T,width:V,useValidationIcon:$,pr:U?void 0:F,pl:U?F:void 0,isRequired:C,validationIconId:G,as:L,children:A}),_&&re,!U&&j]}),!_&&re]})?le:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ie,Object.getOwnPropertyDescriptors(le)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(le)).forEach((function(e){Object.defineProperty(ie,e,Object.getOwnPropertyDescriptor(le,e))})),ie));var ie,le};g.displayName="FormField";export{g as default};

package/esm/components/box/box.component.d.ts

@@ -52,6 +52,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     opacity?: string | number;
     /** Set the container to be hidden from screen readers */
     "aria-hidden"?: "true" | "false";
+    /** Make the container an aria-live region */
+    "aria-live"?: "off" | "assertive" | "polite";
     /** @private @internal @ignore */
     "data-component"?: string;
     /** @private @internal @ignore */

package/esm/components/box/box.component.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import e from"react";import t from"../../style/utils/filter-styled-system-padding-props.js";import o from"../../style/utils/filter-styled-system-margin-props.js";import n from"../../style/utils/filter-styled-system-layout-props.js";import i from"../../style/utils/filter-styled-system-flexbox-props.js";import a from"../../style/utils/filter-styled-system-grid-props.js";import s from"./box.style.js";import l from"../../__internal__/utils/helpers/tags/tags.js";function p(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}const c=e.forwardRef(((e,c)=>{var{"data-component":d,tabIndex:f,as:b,id:y,role:u,overflowWrap:m,scrollVariant:g,boxSizing:O,gap:h,columnGap:j,rowGap:w,className:x,children:P,bg:v,backgroundColor:S,boxShadow:k,borderRadius:G,color:$,opacity:D,height:I,width:N,hidden:R,"aria-hidden":_}=e,z=function(r,e){if(null==r)return{};var t,o,n=function(r,e){if(null==r)return{};var t,o,n={},i=Object.keys(r);for(o=0;o<i.length;o++)t=i[o],e.indexOf(t)>=0||(n[t]=r[t]);return n}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(o=0;o<i.length;o++)t=i[o],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(n[t]=r[t])}return n}(e,["data-component","tabIndex","as","id","role","overflowWrap","scrollVariant","boxSizing","gap","columnGap","rowGap","className","children","bg","backgroundColor","boxShadow","borderRadius","color","opacity","height","width","hidden","aria-hidden"]);let C="";"number"==typeof N?C=N<=1?`${(100*N).toFixed(0)}%`:`${N}px`:"string"==typeof N&&(C=N);let E="";"number"==typeof I?E=I<=1?`${(100*I).toFixed(0)}%`:`${I}px`:"string"==typeof I&&(E=I);const V={color:$,opacity:D,width:C,height:E};return r(s,(W=function(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),o.forEach((function(e){p(r,e,t[e])}))}return r}({as:b,id:y,role:u,overflowWrap:m,scrollVariant:g,boxSizing:O,gap:h,columnGap:j,rowGap:w,className:x,ref:c,bg:v,backgroundColor:S,boxShadow:k,$borderRadius:G,"aria-hidden":_,hidden:R},l(d,z),o(z),t(z),i(z),a(z),n(z)),F=null!=(F={cssProps:V,tabIndex:f,children:P})?F:{},Object.getOwnPropertyDescriptors?Object.defineProperties(W,Object.getOwnPropertyDescriptors(F)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(F)).forEach((function(r){Object.defineProperty(W,r,Object.getOwnPropertyDescriptor(F,r))})),W));var W,F}));c.displayName="Box";export{c as Box,c as default};
+import{jsx as r}from"react/jsx-runtime";import e from"react";import t from"../../style/utils/filter-styled-system-padding-props.js";import o from"../../style/utils/filter-styled-system-margin-props.js";import i from"../../style/utils/filter-styled-system-layout-props.js";import n from"../../style/utils/filter-styled-system-flexbox-props.js";import a from"../../style/utils/filter-styled-system-grid-props.js";import l from"./box.style.js";import s from"../../__internal__/utils/helpers/tags/tags.js";function p(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}const c=e.forwardRef(((e,c)=>{var{"data-component":d,tabIndex:f,as:b,id:y,role:u,overflowWrap:m,scrollVariant:g,boxSizing:O,gap:h,columnGap:j,rowGap:w,className:x,children:v,bg:P,backgroundColor:S,boxShadow:k,borderRadius:G,color:$,opacity:D,height:I,width:N,hidden:R,"aria-hidden":_,"aria-live":z}=e,C=function(r,e){if(null==r)return{};var t,o,i=function(r,e){if(null==r)return{};var t,o,i={},n=Object.keys(r);for(o=0;o<n.length;o++)t=n[o],e.indexOf(t)>=0||(i[t]=r[t]);return i}(r,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);for(o=0;o<n.length;o++)t=n[o],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(i[t]=r[t])}return i}(e,["data-component","tabIndex","as","id","role","overflowWrap","scrollVariant","boxSizing","gap","columnGap","rowGap","className","children","bg","backgroundColor","boxShadow","borderRadius","color","opacity","height","width","hidden","aria-hidden","aria-live"]);let E="";"number"==typeof N?E=N<=1?`${(100*N).toFixed(0)}%`:`${N}px`:"string"==typeof N&&(E=N);let V="";"number"==typeof I?V=I<=1?`${(100*I).toFixed(0)}%`:`${I}px`:"string"==typeof I&&(V=I);const W={color:$,opacity:D,width:E,height:V};return r(l,(F=function(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),o.forEach((function(e){p(r,e,t[e])}))}return r}({as:b,id:y,role:u,overflowWrap:m,scrollVariant:g,boxSizing:O,gap:h,columnGap:j,rowGap:w,className:x,ref:c,bg:P,backgroundColor:S,boxShadow:k,$borderRadius:G,"aria-hidden":_,hidden:R,"aria-live":z},s(d,C),o(C),t(C),n(C),a(C),i(C)),B=null!=(B={cssProps:W,tabIndex:f,children:v})?B:{},Object.getOwnPropertyDescriptors?Object.defineProperties(F,Object.getOwnPropertyDescriptors(B)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(B)).forEach((function(r){Object.defineProperty(F,r,Object.getOwnPropertyDescriptor(B,r))})),F));var F,B}));c.displayName="Box";export{c as Box,c as default};

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as t}from"react";import r from"./flat-table-header.style.js";import{useStrictFlatTableContext as n}from"../__internal__/strict-flat-table.context.js";import o from"../../../__internal__/utils/helpers/guid/index.js";import l from"../__internal__/use-table-cell.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const p=a=>{var{align:p="left",children:f,colspan:s,rowspan:u,width:b,py:d,px:m,id:y,"data-element":O,"data-role":j}=a,h=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(a,["align","children","colspan","rowspan","width","py","px","id","data-element","data-role"]);const g=t(null),P=t(y||o()),{colorTheme:w}=n(),{leftPosition:v,rightPosition:_,makeCellSticky:S}=l(P.current);return e(r,c(i(c(i({ref:g,leftPosition:v,rightPosition:_,makeCellSticky:S,className:S?"isSticky":void 0,align:p,colorTheme:w},void 0!==s&&{colSpan:Number(s)},void 0!==u&&{rowSpan:Number(u)}),{colWidth:b,py:d,px:m}),h),{"data-component":"flat-table-header","data-element":O||"flat-table-header","data-role":j,id:P.current,children:e("div",{"data-role":"flat-table-header-content",children:f})}))};p.displayName="FlatTableHeader";export{p as FlatTableHeader,p as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as t}from"react";import r from"./flat-table-header.style.js";import{useStrictFlatTableContext as n}from"../__internal__/strict-flat-table.context.js";import o from"../../../__internal__/utils/helpers/guid/index.js";import l from"../__internal__/use-table-cell.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const p=a=>{var{align:p="left",children:s,colspan:u,rowspan:f,width:d,py:b,px:m,id:y,"data-element":O,"data-role":j}=a,h=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(a,["align","children","colspan","rowspan","width","py","px","id","data-element","data-role"]);const g=t(null),P=t(y||o()),{colorTheme:v}=n(),{leftPosition:w,rightPosition:S,makeCellSticky:_}=l(P.current);return e(r,c(i(c(i({ref:g,leftPosition:w,rightPosition:S,makeCellSticky:_,className:_?"isSticky":void 0,align:p,colorTheme:v},void 0!==u&&{colSpan:Number(u)},void 0!==f&&{rowSpan:Number(f)}),{colWidth:d,py:b,px:m}),h),{"data-component":"flat-table-header","data-element":O||"flat-table-header","data-role":j,id:P.current,"aria-sort":(()=>{var e;const t=null===(e=g.current)||void 0===e?void 0:e.querySelector("[data-component='sort']");if(t)return t.getAttribute("data-sort-type")})(),children:e("div",{"data-role":"flat-table-header-content",children:s})}))};p.displayName="FlatTableHeader";export{p as FlatTableHeader,p as default};

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

@@ -7,8 +7,13 @@ export interface SortProps extends TagProps {
     onClick?: () => void;
     /** Sets the text content of the component */
     children?: string;
-    /** Sets the accessible name of the component */
+    /**
+     * Sets the accessible name of the component
+     * @deprecated this prop has been deprecated in favour of using `aria-live` regions
+     * */
     accessibleName?: string;
+    /** Sets the aria-roledescription of the component */
+    "aria-roledescription"?: string;
 }
-export declare const Sort: ({ children, onClick, sortType, accessibleName, "data-element": dataElement, "data-role": dataRole, }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, "data-element": dataElement, "data-role": dataRole, "aria-roledescription": ariaRoleDescription, }: SortProps) => React.JSX.Element;
 export default Sort;

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

@@ -1 +1 @@
-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};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as r}from"react";import{useStrictFlatTableContext as t}from"../__internal__/strict-flat-table.context.js";import n from"../../../__internal__/utils/helpers/events/events.js";import a from"../../../__internal__/utils/helpers/guid/index.js";import i from"../../../hooks/__internal__/useLocale/useLocale.js";import s from"../../icon/icon.component.js";import l from"./sort.style.js";import c from"../../../__internal__/utils/logger/index.js";let d=!1;const p=({children:p,onClick:m,sortType:_,accessibleName:u,"data-element":f,"data-role":h,"aria-roledescription":v})=>{var g,j;u&&!d&&(c.deprecate("The `accessibleName` prop has been deprecated in favour of using `aria-live` regions. Please use an `aria-live` region to announce changes in sort order to assistive technologies."),d=!0);const y=r(a()),b=i(),{colorTheme:x}=t();return e(l,{"aria-describedby":y.current,colorTheme:x,"data-component":"sort","data-element":f,"data-role":h,onClick:m,onKeyDown:e=>n.isEnterOrSpaceKey(e)?(e.preventDefault(),null==m?void 0:m()):null,"data-sort-type":_||"none","aria-roledescription":v||(null===(j=b.sort)||void 0===j||null===(g=j.ariaRoleDescription)||void 0===g?void 0:g.call(j)),children:[o("span",{children:p}),_?o(s,{"aria-hidden":!0,"data-element":"sort-icon",type:"ascending"===_?"sort_up":"sort_down"}):o("span",{"data-role":"sort-placeholder"})]})};export{p as Sort,p as default};

package/esm/components/heading/heading.style.d.ts

@@ -13,7 +13,7 @@ type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/loader/__next__/loader.style.d.ts

@@ -35,7 +35,7 @@ type LabelProps = {
 };
 export declare const StyledStarLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledLoaderLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, LabelProps, never>;
 type RingLoaderWrapperProps = {

package/esm/components/loader-spinner/loader-spinner.style.d.ts

@@ -1,7 +1,7 @@
 import { LoaderSpinnerProps } from "./loader-spinner.component";
 export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
 interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {

package/esm/components/loader-star/loader-star.style.d.ts

@@ -1,7 +1,7 @@
 import { LoaderStarProps } from "./loader-star.component";
 export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-live": ariaLive, role, "aria-hidden": ariaHidden, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, {}, never>;
 export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TabsHandle, TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
 export declare const TabPanel: ({ children, id, tabId, ...rest }: TabPanelProps) => React.JSX.Element;
-export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, ...rest }: TabProps) => React.JSX.Element;
+export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, hasCustomLayout, headerWidth, href, ...rest }: TabProps) => React.JSX.Element;
 export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<TabsHandle>>;
 export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, ...rest }: 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{forwardRef as n,useState as o,useEffect as i,useRef as l,useImperativeHandle as a,useCallback as c}from"react";import{TabsProvider as s,useTabs as b}from"./tabs.context.js";import{StyledTabs as u,StyledTab as d,StyledTabListWrapper as f,StyledTabList as p,StyledTabPanel as h,StyledScrollButton as g,StyledScrollButtonPlaceholder as y,Spacer as m}from"./tabs.style.js";import v from"../../../__internal__/utils/logger/index.js";import O from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";import w from"../../icon/icon.component.js";import{TabProvider as _}from"./tab.context.js";import x from"../../../hooks/__internal__/usePrevious/index.js";import I from"../../../__internal__/utils/helpers/tags/tags.js";import k from"../../../__internal__/utils/helpers/extract-text/index.js";function S(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function T(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){S(e,t,r[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function z(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const L=t=>{var{children:r,id:n,tabId:o}=t,i=z(t,["children","id","tabId"]);const{activeTab:l}=b();return e(_,{tabId:o,visible:o===l,children:e(h,P(T({id:n,role:"tabpanel","aria-labelledby":o},I("tab-panel",i)),{children:r}))})};let A=!1;const C=r=>{var{controls:n,error:l=!1,id:a,label:c,leftSlot:s,rightSlot:u,warning:f=!1,info:p=!1}=r,h=z(r,["controls","error","id","label","leftSlot","rightSlot","warning","info"]);const g=j(),[y,m]=o(l),[O,x]=o(f),[S,L]=o(p),{activeTab:C,focusIndex:D,orientation:E,setActiveTab:R,setCurrentTabId:B,setFocusIndex:N,size:W,errors:q,warnings:F,infos:U}=b(),G=C===a;i((()=>{G&&B(a)}),[a,G,B]),!s&&!u||"string"==typeof c||A||(v.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."),A=!0),i((()=>{if(D===a){const e=document.getElementById(a);null==e||e.focus()}}),[D,a,B]),i((()=>{let e=q[a],t=F[a],r=U[a];if(l&&!e&&(e={static:l}),f&&!t&&(t={static:f}),p&&!r&&(r={static:p}),!e)return void m(!1);const n=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),o=l||n.length>0;if(m(o),!t)return void x(!1);const i=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),c=f||i.length>0;if(x(c),!r)return void L(!1);const s=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),b=p||s.length>0;L(b)}),[l,a,q,F,f,U,p]);const H=()=>{const t=k(c);if(y||O||S){if(y)return e(w,{"data-role":"icon-error",type:"error",ariaLabel:g.tabs.error(t),color:"#db004e"});if(O)return e(w,{"data-role":"icon-warning",type:"warning",ariaLabel:g.tabs.warning(t),color:"#d64309"});if(S)return e(w,{"data-role":"icon-info",type:"info",ariaLabel:g.tabs.info(t),color:"#0060a7ff"})}return null};return e(_,{tabId:a,visible:!0,children:e(d,P(T({activeTab:C===a,"aria-controls":n,"aria-selected":G?"true":"false",error:y,info:S,id:a,onClick:()=>{R(a),N(a)},orientation:E,role:"tab",size:W,type:"button",tabIndex:C===a?0:-1,warning:O},I("tab",h)),{children:t("span","string"==typeof c?{className:"tab-title-content-wrapper",children:[s,c,u,H()]}:{className:"tab-title-content-wrapper",children:[c,H()]})}))})},D=n(((n,s)=>{var{ariaLabel:u,children:d,onTabChange:h}=n,v=z(n,["ariaLabel","children","onTabChange"]);const j=l(null),{activeTab:_,focusIndex:k,orientation:S,selectedTabId:L,setFocusIndex:A,setActiveTab:C,size:D}=b();a(s,(()=>({focusTab:e=>{var t;const r=null===(t=j.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),A(e),C(e)}})));const E=c((()=>{var e;const t=(null===(e=j.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);i((()=>{if(L)C(L);else if(!_){const e=E()[0];C(e)}}),[_,E,L,C]);const R=x(_);i((()=>{R&&R!==_&&(null==h||h(_))}),[_,h,R]);const B=c((e=>{const t=E(),r=t.indexOf(k||_),n=t.length-1;if(-1===r)return;let o=r;switch(e.key){case"Home":o=0;break;case"End":o=n;break;case"ArrowRight":o=(r+1)%t.length;break;case"ArrowLeft":o=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===S&&(o=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===S&&(o=(r+1)%t.length);break;case"Enter":case" ":return void C(_);case"Tab":return void A(_);default:return}A(t[o])}),[_,k,E,S,C,A]),[N,W]=o(!1),[q,F]=o(!1),[U,G]=o(!1),H=c((()=>{if(j.current){const e=j.current.scrollWidth-j.current.clientWidth-20;W(e>0),F(j.current.scrollLeft>=20),G(j.current.scrollLeft<=e)}}),[]);O(j,(()=>{H()})),i((()=>{j.current&&H()}),[H]);const K=e=>{j.current&&("left"===e?j.current.scrollLeft-=200:j.current.scrollLeft+=200,H())};return e(r,{children:t(f,{children:["vertical"!==S&&N?q?e(g,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>K("left"),size:D,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(w,{type:"chevron_left"})}):e(y,{size:D}):null,t(p,P(T({"aria-label":u,id:"tablist",onKeyDown:B,orientation:S,ref:j,role:"tablist",size:D,tabIndex:-1},I("tab-list",v)),{children:[d,e(m,{})]})),"vertical"!==S&&N?U?e(g,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>K("right"),size:D,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(w,{type:"chevron_right"})}):e(y,{size:D}):null]})})})),E=t=>{var{children:r,labelledBy:n="",orientation:o="horizontal",selectedTabId:i,size:l="medium"}=t,a=z(t,["children","labelledBy","orientation","selectedTabId","size"]);return e(s,{labelledBy:n,orientation:o,selectedTabId:i,size:l,children:e(u,P(T({id:"tabs-container",orientation:o},I("tabs",a)),{children:r}))})};export{C as Tab,D as TabList,L as TabPanel,E as Tabs,E as default};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{forwardRef as n,useRef as o,useImperativeHandle as i,useCallback as a,useEffect as l,useState as c}from"react";import{TabsProvider as s,useTabs as b}from"./tabs.context.js";import{StyledTabs as d,StyledTabListWrapper as u,StyledTabList as f,StyledTabPanel as h,StyledScrollButton as p,StyledScrollButtonPlaceholder as g,StyledTab as y,Spacer as v}from"./tabs.style.js";import m from"../../../__internal__/utils/logger/index.js";import O from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import j from"../../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../icon/icon.component.js";import{TabProvider as w}from"./tab.context.js";import x from"../../../hooks/__internal__/usePrevious/index.js";import k from"../../../__internal__/utils/helpers/guid/index.js";import I from"../../../__internal__/utils/helpers/tags/tags.js";import S from"../../../__internal__/utils/helpers/extract-text/index.js";function T(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){T(e,t,r[t])}))}return e}function $(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function P(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const z=t=>{var{children:r,id:n,tabId:o}=t,i=P(t,["children","id","tabId"]);const{activeTab:a}=b();return e(w,{tabId:o,visible:o===a,children:e(h,$(L({id:n,role:"tabpanel","aria-labelledby":o},I("tab-panel",i)),{children:r}))})};let A=!1;const C=t=>{var{controls:n,error:o=!1,id:i,label:a,leftSlot:s,rightSlot:d,warning:u=!1,info:f=!1,hasCustomLayout:h,headerWidth:p,href:g}=t,v=P(t,["controls","error","id","label","leftSlot","rightSlot","warning","info","hasCustomLayout","headerWidth","href"]);const O=j(),[x,k]=c(o),[T,z]=c(u),[C,W]=c(f),{activeTab:D,focusIndex:E,orientation:N,setActiveTab:R,setCurrentTabId:B,setFocusIndex:q,size:F,errors:U,warnings:G,infos:H}=b(),K=D===i;l((()=>{K&&B(i)}),[i,K,B]),!s&&!d||"string"==typeof a||A||(m.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."),A=!0),l((()=>{if(E===i){const e=document.getElementById(i);null==e||e.focus()}}),[E,i,B]),l((()=>{let e=U[i],t=G[i],r=H[i];if(o&&!e&&(e={static:o}),u&&!t&&(t={static:u}),f&&!r&&(r={static:f}),!e)return void k(!1);const n=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),a=o||!!n.length;if(k(a),!t)return void z(!1);const l=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),c=u||!!l.length;if(z(c),!r)return void W(!1);const s=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),b=f||!!s.length;W(b)}),[o,i,U,G,u,H,f]);const J=()=>{const t=S(a);if(x||T||C){if(x)return e(_,{"data-role":"icon-error",type:"error",ariaLabel:O.tabs.error(t),color:"#db004e"});if(T)return e(_,{"data-role":"icon-warning",type:"warning",ariaLabel:O.tabs.warning(t),color:"#d64309"});if(C)return e(_,{"data-role":"icon-info",type:"info",ariaLabel:O.tabs.info(t),color:"#0060a7ff"})}return null};return e(w,{tabId:i,visible:!0,children:e(y,$(L($(L({activeTab:D===i,className:D===i?"active-tab":"","aria-controls":n,"aria-selected":K?"true":"false",error:x,warning:T,info:C,id:i,onClick:()=>{R(i),q(i)},$orientation:N,role:"tab",$size:F,type:g?void 0:"button",tabIndex:D===i?0:-1,$hasCustomLayout:h,$headerWidth:p},I("tab",v)),{"data-tabid":i,as:g?"a":void 0}),g&&{href:g,target:"_blank",style:{textDecoration:"none",display:"block",boxSizing:"border-box"}}),{children:r("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[s,a,d,J()]}:{className:"tab-title-content-wrapper",children:[a,J()]})}))})},W=n(((n,s)=>{var{ariaLabel:d,children:h,onTabChange:y,headerWidth:m}=n,w=P(n,["ariaLabel","children","onTabChange","headerWidth"]);const S=o(null),{activeTab:T,focusIndex:z,orientation:A,selectedTabId:C,setFocusIndex:W,setActiveTab:D,size:E}=b(),N=o(k()),R=o(k()),B=o(k()),q=j();i(s,(()=>({focusTab:e=>{var t;const r=null===(t=S.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),W(e),D(e)}})));const F=a((()=>{var e;const t=(null===(e=S.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);l((()=>{if(C)D(C);else if(!T){const e=F()[0];D(e)}}),[T,F,C,D]);const U=x(T);l((()=>{U&&U!==T&&(null==y||y(T))}),[T,y,U]);const G=a((e=>{const t=F(),r=t.indexOf(z||T),n=t.length-1;if(-1===r)return;let o=r;switch(e.key){case"Home":o=0;break;case"End":o=n;break;case"ArrowRight":o=(r+1)%t.length;break;case"ArrowLeft":o=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===A&&(o=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===A&&(o=(r+1)%t.length);break;case"Enter":case" ":return void D(T);case"Tab":return void W(T);default:return}W(t[o])}),[T,z,F,A,D,W]),[H,K]=c(!1),[J,M]=c(!1),[Q,V]=c(!1),X=a((()=>{if(S.current){const e=S.current.scrollWidth-S.current.clientWidth-20;K(e>0),M(S.current.scrollLeft>=20),V(S.current.scrollLeft<=e)}}),[]);O(S,(()=>{X()})),l((()=>{S.current&&X()}),[X]);const Y=e=>{S.current&&("left"===e?S.current.scrollLeft-=200:S.current.scrollLeft+=200,X())};return e(t,{children:r(u,{$headerWidth:m,"data-role":"tab-list-wrapper",children:["vertical"!==A&&H?J?e(p,{"data-role":"tab-navigation-button-left",id:`tab-navigation-button-left-${N.current}`,onClick:()=>Y("left"),$size:E,tabIndex:-1,title:null===(Z=(ee=q.tabs).scrollLeftText)||void 0===Z?void 0:Z.call(ee),type:"button",children:e(_,{type:"chevron_left"})}):e(g,{$size:E}):null,r(f,$(L({"aria-label":d,id:`tablist-${B.current}`,onKeyDown:G,$orientation:A,ref:S,role:"tablist",tabIndex:-1},I("tab-list",w)),{children:[h,e(v,{})]})),(()=>{var t,r;return"vertical"!==A&&H?Q?e(p,{"data-role":"tab-navigation-button-right",id:`tab-navigation-button-right-${R.current}`,onClick:()=>Y("right"),$size:E,tabIndex:-1,title:null===(t=(r=q.tabs).scrollRightText)||void 0===t?void 0:t.call(r),type:"button",children:e(_,{type:"chevron_right"})}):e(g,{$size:E}):null})()]})});var Z,ee})),D=t=>{var{children:r,labelledBy:n="",orientation:i="horizontal",selectedTabId:a,size:l="medium"}=t,c=P(t,["children","labelledBy","orientation","selectedTabId","size"]);const b=o(k());return e(s,{labelledBy:n,orientation:i,selectedTabId:a,size:l,children:e(d,$(L({id:`tabs-container-${b.current}`,$orientation:i},I("tabs",c)),{children:r}))})};export{C as Tab,W as TabList,z as TabPanel,D as Tabs,D as default};

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useCallback as o}from"react";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){s(e,r,t[r])}))}return e}const a=t({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),c=()=>r(a),b=({children:r,isInTab:t=!0,labelledBy:s,orientation:c,selectedTabId:b="",size:l})=>{const[u,d]=n(b),[f,I]=n(b),[T,m]=n(""),[y,g]=n({}),[p,v]=n({}),[O,j]=n({}),w=o(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?i({},o,n):o)))}),[]),x=o(((e,r,t)=>{const n={[r]:{[e]:t}};v((o=>(o[r]||(o[r]={}),o[r][e]!==t?i({},o,n):o)))}),[]),h=o(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?i({},o,n):o)))}),[]);return e(a.Provider,{value:{activeTab:u,currentTabId:f,focusIndex:T,isInTab:t,labelledBy:s,orientation:c,setActiveTab:d,setCurrentTabId:I,setFocusIndex:m,setErrors:w,setWarnings:x,size:l,errors:y,warnings:p,infos:O,setInfos:h},children:r})};export{a as TabsContext,b as TabsProvider,c as useTabs};
+import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t,useState as n,useCallback as o,useEffect as s}from"react";import i from"../../../hooks/__internal__/usePrevious/index.js";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){a(e,r,t[r])}))}return e}const b=t({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),l=()=>r(b),u=({children:r,isInTab:t=!0,labelledBy:a,orientation:l,selectedTabId:u="",size:d})=>{const[f,I]=n(u),[m,T]=n(u),[y,p]=n(""),[v,g]=n({}),[O,j]=n({}),[x,h]=n({}),w=o(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),P=o(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),z=o(((e,r,t)=>{const n={[r]:{[e]:t}};h((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),_=i(u);return s((()=>{u&&u!==_&&(I(u),T(u))}),[u,_]),e(b.Provider,{value:{activeTab:f,currentTabId:m,focusIndex:y,isInTab:t,labelledBy:a,orientation:l,setActiveTab:I,setCurrentTabId:T,setFocusIndex:p,setErrors:w,setWarnings:P,size:d,errors:v,warnings:O,infos:x,setInfos:z},children:r})};export{b as TabsContext,u as TabsProvider,l as useTabs};

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

@@ -1,28 +1,31 @@
 import { TabProps } from "./tabs.types";
 interface StyledTabListProps {
-    orientation: "horizontal" | "vertical";
-    size: "medium" | "large";
+    $orientation: "horizontal" | "vertical";
 }
 export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTabList: import("styled-components").StyledComponent<"div", any, StyledTabListProps, never>;
-export declare const StyledTabListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabListWrapper: import("styled-components").StyledComponent<"div", any, {
+    $headerWidth?: string;
+}, never>;
 export declare const Spacer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledScrollButton: import("styled-components").StyledComponent<"button", any, {
-    size: "medium" | "large";
+    $size: "medium" | "large";
 }, never>;
 export declare const StyledScrollButtonPlaceholder: import("styled-components").StyledComponent<"div", any, {
-    size: "medium" | "large";
+    $size: "medium" | "large";
 }, never>;
 interface StyledTabProps extends Omit<TabProps, "controls" | "index" | "label"> {
     activeTab: boolean;
     error?: string | boolean;
     warning?: string | boolean;
-    orientation: "horizontal" | "vertical";
-    size: "medium" | "large";
+    $orientation: "horizontal" | "vertical";
+    $size: "medium" | "large";
+    $hasCustomLayout?: boolean;
+    $headerWidth?: string;
 }
 export declare const StyledTab: import("styled-components").StyledComponent<"button", any, StyledTabProps, never>;
 export declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {
-    orientation?: "horizontal" | "vertical";
+    $orientation?: "horizontal" | "vertical";
 }, never>;
 export declare const StyledTabProvider: import("styled-components").StyledComponent<"div", any, {
     visible: boolean;

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

@@ -1 +1 @@
-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-8e199877-0"})(["padding:0 6px;"]),r=o.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-8e199877-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"))),n=o.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-8e199877-2"})(["display:flex;z-index:6;"]),a=o.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-8e199877-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=o.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-8e199877-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-8e199877-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-8e199877-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:n,warning:a})=>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[n].paddingY-4,e[n].paddingX-2,e[n].paddingY,e[n].paddingX-2,(()=>t?"#db004e":a?"#d64309":d?"#0060a7ff":"black"))),(({activeTab:o,error:t,info:d,orientation:r,size:n,warning:a})=>"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"===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"))):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-8e199877-7"})(["display:flex;",""],(({orientation:o})=>i(["flex-direction:",";"],"horizontal"===o?"column":"row"))),g=o.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-8e199877-8"})(["",""],(({visible:o})=>i(["display:",";"],o?"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 t}from"styled-components";import i 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-75b008c3-0"})(["padding:0 6px;"]),r=o.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-75b008c3-1"})(["display:flex;"," width:100%;padding:6px;overflow-x:hidden;"],(({$orientation:o})=>t([""," ",""],"horizontal"===o&&t(["margin-bottom:8px;"]),"vertical"===o&&t(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"])))),a=o.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-75b008c3-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:o})=>o&&t(["width:",";"],o))),n=o.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-75b008c3-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=o.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-75b008c3-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-75b008c3-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-75b008c3-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;white-space:nowrap;height:fit-content;color:var(--colorsYin090);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:#00000010;cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:o})=>!o&&t(["align-items:center;display:flex;gap:8px;"])),(({activeTab:o,$orientation:i,$size:e,error:d,warning:r,info:a,$hasCustomLayout:n})=>o&&t([""," "," ",""],"horizontal"===i&&(d||r||a)&&t(["position:relative;top:1px;"]),"large"===e&&t(["margin-top:-4px;"]),n&&"horizontal"===i&&t(["position:relative;top:-2px;left:1px;"]))),(({$size:o,$hasCustomLayout:i})=>t(["font-size:","px;height:","px;",""],e[o].fontSize,e[o].height,i?t(["padding:0;"]):t(["padding:","px ","px;"],e[o].paddingY,e[o].paddingX))),(({activeTab:o,error:i,info:d,$orientation:r,$size:a,warning:n,$hasCustomLayout:p})=>o&&"horizontal"===r&&t(["background-color:white;border:2px solid #8b8b8bff;border-bottom:none;",' :hover{background-color:white;}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:2px;min-width:24px;}"],!p&&t(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],e[a].paddingY-4,e[a].paddingX-2,e[a].paddingY,e[a].paddingX-2),(()=>i?"#db004e":n?"#d64309":d?"#0060a7ff":"black"))),(({activeTab:o,error:i,info:d,$orientation:r,$size:a,warning:n,$hasCustomLayout:p,$headerWidth:b})=>"vertical"===r&&t(["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:",";width:",";"," ",""],null!=b?b:"200px",null!=b?b:"200px",b&&t(["white-space:normal;height:auto;"]),o&&t(["background-color:white;border:2px solid #8b8b8bff;border-right:none;"," :hover{background-color:white;}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:2px;min-height:24px;}}"],!p&&t(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===a?e.medium.paddingY-2:4,"medium"===a?e.medium.paddingY-2:e.large.paddingY,e[a].paddingX-2),b&&!p&&t(["padding-right:18px;"]),p&&t(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),p&&t(["top:20%;right:0px;"]),(()=>i?"#db004e":n?"#d64309":d?"#0060a7ff":"black")))),i(),(({$orientation:o})=>t(["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-75b008c3-7"})(["display:flex;",""],(({$orientation:o})=>t(["flex-direction:",";"],"horizontal"===o?"column":"row"))),h=o.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-75b008c3-8"})(["",""],(({visible:o})=>t(["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,h as StyledTabProvider,s as StyledTabs};

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

@@ -46,6 +46,10 @@ export interface TabListProps extends TagProps {
     children?: React.ReactNode;
     /** A callback for when the active tab is changed */
     onTabChange?: (tabId: string) => void;
+    /**
+     * @private @ignore @internal
+     */
+    headerWidth?: string;
 }
 export interface TabProps extends TagProps {
     /** The tab panel that this tab controls */
@@ -67,6 +71,14 @@ export interface TabProps extends TagProps {
      * @deprecated to be removed when legacy `Tabs` and `Tab` are removed
      * */
     info?: boolean | string;
+    /**
+     * @internal @private @ignore
+     */
+    hasCustomLayout?: boolean;
+    /** @private @ignore @internal */
+    headerWidth?: string;
+    /** @private @ignore @internal */
+    href?: string;
 }
 export interface TabsProps extends TagProps {
     /** The tab list to be rendered within this set of tabs  */

package/esm/components/tabs/index.d.ts

@@ -1,3 +1,4 @@
-export { Tabs, Tab } from "./tabs.component";
+export { Tabs } from "./tabs.component";
+export { default as Tab } from "./tab";
 export type { TabsProps, TabsHandle } from "./tabs.component";
 export type { TabProps } from "./tab";

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

@@ -1,32 +1,72 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface TabProps extends PaddingProps, TagProps {
+import type { TabProps as NextTabProps } from "../__next__";
+export type TabsHandle = {
+    /** Programmatically focus on a specific tab.
+     * @param tabId - The ID of the tab to focus. Must match the `tabId` prop of the target `Tab` component.
+     */
+    focusTab: (tabId: string) => void;
+} | null;
+export interface TabProps extends PaddingProps, TagProps, Partial<NextTabProps> {
+    /**
+     * The title of the Tab.
+     * @deprecated Support will be removed in a future release, it is recommended to use `label` prop instead.
+     */
     title?: string;
-    /** A unique ID to identify this specific tab. */
-    tabId: string;
+    /**
+     * A unique ID to identify this specific tab.
+     * @deprecated Support will be removed in a future release, it is recommended to use `id` instead.
+     * */
+    tabId?: string;
     /** The child elements of Tab component. */
     children?: React.ReactNode;
     /** @ignore @private Boolean indicating selected state of Tab. */
     isTabSelected?: boolean;
-    /** The position of the Tab. */
+    /**
+     * The position of the Tab.
+     * @deprecated Support will be removed in a future release.
+     * */
     position?: "top" | "left";
-    /** Message displayed when Tab has error */
+    /**
+     * @deprecated
+     * Message displayed when Tab has error
+     * The legacy validation pattern is being removed in a future release.
+     * */
     errorMessage?: string;
-    /** Message displayed when Tab has warning */
+    /**
+     * @deprecated
+     * Message displayed when Tab has warning
+     * The legacy validation pattern is being removed in a future release.
+     * */
     warningMessage?: string;
-    /** Message displayed when Tab has warning */
+    /**
+     * @deprecated
+     * Message displayed when Tab has info
+     * The legacy validation pattern is being removed in a future release.
+     * */
     infoMessage?: string;
-    /** Additional content to display with title */
+    /**
+     * Additional content to display with title
+     * @deprecated Support for siblings will be removed in a future release.
+     * It is recommended to use `label` prop to compose what you want.
+     * */
     siblings?: React.ReactNode;
-    /** Position title before or after siblings */
+    /**
+     * Position title before or after siblings
+     * @deprecated Support for titlePosition will be removed in a future release.
+     * It is recommended to use `label` prop to compose what you want.
+     * */
     titlePosition?: "before" | "after";
     /**
      * Allows Tab to be a link
      * @deprecated Using tabs as links is inaccessible; this prop will be deprecated in a future release.
      * */
     href?: string;
-    /** Overrides default layout with a one defined in this prop */
+    /**
+     * Overrides default layout with a one defined in this prop
+     * @deprecated Support for customLayout will be removed in a future release, it is recommended to use the `label` prop instead.
+     * */
     customLayout?: React.ReactNode;
     /** Additional props to be passed to the Tab's corresponding title. */
     titleProps?: {
@@ -37,12 +77,17 @@ export interface TabProps extends PaddingProps, TagProps {
     role?: string;
     /** @private @ignore */
     ariaLabelledby?: string;
-    /** @private @ignore */
-    updateErrors?: (id: string, errors: Record<string, undefined | string | boolean>) => void;
-    /** @private @ignore */
-    updateWarnings?: (id: string, warnings: Record<string, undefined | string | boolean>) => void;
-    /** @private @ignore */
-    updateInfos?: (id: string, infos: Record<string, undefined | string | boolean>) => void;
+    /** @private @ignore @internal */
+    validationStatusOverride?: {
+        error?: boolean;
+        warning?: boolean;
+        info?: boolean;
+    };
+    /** @private @ignore @internal */
+    headerWidth?: string;
 }
-export declare const Tab: ({ ariaLabelledby, children, isTabSelected, position, role, tabId, updateErrors, updateWarnings, updateInfos, href, title, titleProps, ...rest }: TabProps) => React.JSX.Element;
+export declare const Tab: {
+    ({ tabId, title, customLayout, siblings, titlePosition, validationStatusOverride, errorMessage, warningMessage, infoMessage, titleProps, controls, id, label, error, warning, info, ...rest }: TabProps): React.JSX.Element | null;
+    displayName: string;
+};
 export default Tab;

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useCallback as r,useEffect as n}from"react";import o from"./tab.style.js";import i from"../../../__internal__/utils/helpers/tags/tags.js";import{TabContext as a}from"./__internal__/tab.context.js";import l from"../../../__internal__/utils/logger/index.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let b=!1;const u=c=>{var{ariaLabelledby:u,children:f,isTabSelected:d,position:O="top",role:y="tabpanel",tabId:m,updateErrors:j,updateWarnings:g,updateInfos:h,href:P,title:v,titleProps:w}=c,_=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);void 0===P||b||(l.deprecate("The `href` prop is deprecated in the `Tab` component and will be removed in a future release."),b=!0);const[S,x]=t({}),[E,I]=t({}),[T,D]=t({}),k=r(((e,t)=>{x((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]),W=r(((e,t)=>{I((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]),L=r(((e,t)=>{D((r=>r[e]!==t?s(p({},r),{[e]:t}):r))}),[]);return n((()=>{j&&j(m,S)}),[m,S,j]),n((()=>{g&&g(m,E)}),[m,E,g]),n((()=>{h&&h(m,T)}),[m,T,h]),e(a.Provider,{value:{setError:k,setWarning:W,setInfo:L},children:e(o,s(p({role:y,isTabSelected:d,"aria-labelledby":u,position:O},_,i("tab",_)),{children:!P&&f}))})};export{u as Tab,u as default};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import"react";import{Tab as n}from"../__next__/tabs.component.js";import o from"../../../__internal__/utils/logger/index.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let a=!1;const l=l=>{var{tabId:s,title:u,customLayout:c,siblings:f,titlePosition:b,validationStatusOverride:g,errorMessage:d,warningMessage:p,infoMessage:m,titleProps:y,controls:O,id:v,label:w,error:h,warning:j,info:P}=l,_=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(l,["tabId","title","customLayout","siblings","titlePosition","validationStatusOverride","errorMessage","warningMessage","infoMessage","titleProps","controls","id","label","error","warning","info"]);a||(o.warn("Warning: This version of the `Tab` component is intended to help migration to the `next` version and will be removed in a future release."),a=!0);let x="";if(w)x=w;else if(c)x=c;else if(x=u,f){const n=e("span",{children:w||u});x=r(t,"after"===b?{children:[f,n]}:{children:[n,f]})}const{error:M,warning:S,info:T}=g||{},I=v||s;return I?e(n,function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){i(e,r,t[r])}))}return e}({id:I,controls:O||`${I}-panel`,label:x,error:h||M,warning:j||S,info:P||T,hasCustomLayout:!!c,"data-role":null==y?void 0:y["data-role"]},_)):null};l.displayName="Tab";export{l as Tab,l as default};

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

@@ -1,16 +1,17 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import Tab from "./tab";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export type TabsHandle = {
-    /**
-     * Programmatically focus on a specific tab.
+    /** Programmatically focus on a specific tab.
      * @param tabId - The ID of the tab to focus. Must match the `tabId` prop of the target `Tab` component.
      */
     focusTab: (tabId: string) => void;
 } | null;
 export interface TabsProps extends MarginProps, TagProps {
-    /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
+    /**
+     * Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered
+     * @deprecated Support for this prop will be removed in a future release. All tabs will be rendered by default.
+     * */
     renderHiddenTabs?: boolean;
     /** Allows manual control over the currently selected tab. */
     selectedTabId?: string;
@@ -18,7 +19,7 @@ export interface TabsProps extends MarginProps, TagProps {
     children: React.ReactNode;
     /**
      * Sets the alignment of the tab titles. Possible values include.
-     * @deprecated In a future release, support for right-aligned tab content will be removed.
+     * @deprecated Support for right-aligned tab content has been removed.
      */
     align?: "left" | "right";
     /** A callback for when a tab is changed. You can use this to manually control
@@ -33,18 +34,22 @@ export interface TabsProps extends MarginProps, TagProps {
     size?: "default" | "large";
     /**
      * Sets the divider of the tab titles header to extend the full width of the parent.
-     * @deprecated This prop will be deprecated in a future release
+     * @deprecated Support for extended lines in tab headers has been removed.
      * */
     extendedLine?: boolean;
     /**
      * Adds a combination of borders to the tab titles.
-     * @deprecated This prop will be deprecated in a future release
+     * @deprecated Support for configurable borders on tab titles has been removed.
      * */
     borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
-    /** Adds an alternate styling variant to the tab titles. */
+    /**
+     * Adds an alternate styling variant to the tab titles.
+     * @deprecated Support for alternate styling variants on tab titles has been removed.
+     */
     variant?: "default" | "alternate";
     /** sets width to the tab headers. Can be any valid CSS string.
      * The headerWidth prop works only for `position="left"`
+     * @deprecated Support will be removed in a future release.
      */
     headerWidth?: string;
     /** An object to support overriding validation statuses, when the Tabs have custom targets for example.
@@ -60,9 +65,9 @@ export interface TabsProps extends MarginProps, TagProps {
     /**
      * When this prop is set any string validation failures in the children of each Tab
      * will be summarised in the Tooltip next to the Tab title
-     * @deprecated This prop will be deprecated in a future release
+     * @deprecated Support for validation summaries has been removed.
      */
     showValidationsSummary?: boolean;
 }
-declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
-export { Tabs, Tab };
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
+export default Tabs;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useMemo as n,Children as i,createRef as o,useRef as a,useState as s,useContext as l,useCallback as d,useEffect as p,useImperativeHandle as c,createElement as b,cloneElement as u}from"react";export{Tab}from"./tab/tab.component.js";import f from"../../__internal__/utils/helpers/events/events.js";import g from"../../__internal__/utils/helpers/tags/tags.js";import h from"../../__internal__/utils/logger/index.js";import m from"./tabs.style.js";import y from"./__internal__/tabs-header/tabs-header.component.js";import v from"./__internal__/tab-title/tab-title.component.js";import O from"../drawer/__internal__/drawer-sidebar.context.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){w(e,t,r[t])}))}return e}function I(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let T=!1,_=!1,S=!1,P=!1,x=!1;const L=r(((r,w)=>{var{align:L="left",children:W,onTabChange:k,selectedTabId:E,renderHiddenTabs:D=!0,position:M="top",extendedLine:$=!0,size:K,borders:z="off",variant:B="default",validationStatusOverride:C,headerWidth:H,showValidationsSummary:R}=r,V=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);x||(h.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),x=!0),R&&!P&&(h.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),P=!0),"right"!==L||T||(h.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),T=!0),$||_||(h.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),_=!0),"off"===z||S||(h.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),S=!0),"left"!==M&&void 0!==H&&h.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const A=n((()=>i.toArray(W).filter((e=>e))),[W]),U=n((()=>A.map((e=>e.props.tabId))),[A]),q=n((()=>Array.from({length:A.length}).map((()=>o()))),[A.length]),F=a(E),[G,J]=s(E||A[0].props.tabId),{isInSidebar:N}=l(O),[Q,X]=s({}),[Y,Z]=s({}),[ee,te]=s({}),re=d(((e,t)=>{X((r=>I(j({},r),{[e]:t})))}),[]),ne=d(((e,t)=>{Z((r=>I(j({},r),{[e]:t})))}),[]),ie=d(((e,t)=>{te((r=>I(j({},r),{[e]:t})))}),[]),oe=d((e=>e===G),[G]),ae=d((e=>{oe(e)||J(e),k&&k(e)}),[k,oe]),se=d((()=>{const{current:e}=F,t=e?U.indexOf(e):-1;var r;-1!==t&&(null===(r=q[t].current)||void 0===r||r.blur())}),[U,q]);p((()=>{F.current!==E&&(E!==G&&(J(E),se()),F.current=E)}),[se,F,E,G]);const le=e=>t=>{f.isEventType(t,"keydown")||ae(e)},de=e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var i;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(i=e.current)||void 0===i||i.scrollIntoView({behavior:"auto",inline:"center"}))},pe=(e,t)=>{e.preventDefault();let r=t;t<0?r=U.length-1:t===U.length&&(r=0);const n=q[r];de(n)},ce=e=>t=>{const r=N||"left"===M,n=r&&f.isUpKey(t),i=r&&f.isDownKey(t),o=!r&&f.isLeftKey(t),a=!r&&f.isRightKey(t);n||o?pe(t,e-1):(i||a)&&pe(t,e+1)};return c(w,(()=>({focusTab(e){const t=q[A.findIndex((t=>t.props.tabId===e))];t&&de(t)}})),[A,q]),e(m,I(j({position:N?"left":M,"data-role":"tabs",isInSidebar:N,headerWidth:H},V,g("tabs",V)),{children:[(()=>{const e=A.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:p,titleProps:c}=e.props,u=`${r}-tab`,f=Q[r],g=Y[r],h=ee[r],m=f&&Object.entries(f).filter((e=>e[1])).length,y=g&&Object.entries(g).filter((e=>e[1])).length,O=h&&Object.entries(h).filter((e=>e[1])).length,w=C&&C[r],T=w&&C[r].error,_=w&&C[r].warning,S=w&&C[r].info,P=void 0!==T?T:!!m,x=void 0!==_?_:!!y&&!P,W=void 0!==S?S:!!O&&!P&&!x,k=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return R&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return b(v,I(j({},c),{position:N?"left":M,dataTabId:r,id:u,key:r,onClick:le(r),onKeyDown:ce(t),ref:q[t],tabIndex:oe(r)?0:-1,title:n,href:d,isTabSelected:oe(r),error:P,warning:x,info:W,size:K||"default",borders:"off"!==z,siblings:i,titlePosition:o,errorMessage:k(a,f),warningMessage:k(s,g),infoMessage:k(l,h),alternateStyling:"alternate"===B,noLeftBorder:["no left side","no sides"].includes(z),noRightBorder:["no right side","no sides"].includes(z),customLayout:p,isInSidebar:N,align:L}))}));return t(y,{align:L,position:N?"left":M,role:"tablist",extendedLine:$,noRightBorder:["no right side","no sides"].includes(z),isInSidebar:N,size:K||"default",children:e})})(),(()=>{if(N)return null;if(!D){const e=A.find((e=>oe(e.props.tabId)));return e&&u(e,I(j({},e.props),{role:"tabpanel",position:M,isTabSelected:oe(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:re,updateWarnings:ne,updateInfos:ie}))}return A.map((e=>u(e,I(j({},e.props),{role:"tabpanel",position:M,isTabSelected:oe(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:re,updateWarnings:ne,updateInfos:ie}))))})()]}))}));export{L as Tabs};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{forwardRef as n,useMemo as o,useState as i,useEffect as a,createElement as l}from"react";import{Tabs as s,TabList as d,TabPanel as p}from"./__next__/tabs.component.js";import{Tab as c}from"./tab/tab.component.js";import b from"../../__internal__/utils/logger/index.js";import u from"../drawer/__internal__/drawer-sidebar.context.js";import f from"../../hooks/__internal__/usePrevious/index.js";function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function h(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){m(e,r,t[r])}))}return e}function O(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}let y=!1;const g=n(((n,m)=>{var g,v,{children:j,selectedTabId:w,onTabChange:T,position:P="top",size:_="default",validationStatusOverride:I,align:x,headerWidth:S,renderHiddenTabs:W=!0}=n,E=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["children","selectedTabId","onTabChange","position","size","validationStatusOverride","align","headerWidth","renderHiddenTabs"]);y||(b.warn("Warning: This version of the `Tabs` component is intended to help migration to the `next` version and will be removed in a future release."),y=!0);const k=o((()=>{const e=[];return t.Children.forEach(j,(r=>{t.isValidElement(r)&&e.push({props:r.props})})),e}),[j]),[C,z]=i(w||(null===(g=k[0])||void 0===g?void 0:g.props.id)||(null===(v=k[0])||void 0===v?void 0:v.props.tabId)),D="default"===_?"medium":"large",{isInSidebar:H}=t.useContext(u),$=H||"left"===P?"vertical":"horizontal",q=W?k:k.filter((({props:e})=>e.isTabSelected||e.tabId===C)),L=f(w);return a((()=>{w!==L&&w!==C&&z(w)}),[w,L,C]),e(s,O(h({orientation:$,selectedTabId:C,size:D},E),{children:[r(d,{ref:m,ariaLabel:"Tabs",onTabChange:e=>{z(e),null==T||T(e)},headerWidth:H?"100%":void 0,children:k.map((({props:e})=>{const r=e.id||e.tabId;return r?l(c,O(h({headerWidth:H?"100%":S},e),{key:r})):(b.warn("Warning: Tab component is missing a unique identifier. Please provide an `id` prop to ensure proper functionality."),null)}))}),!H&&q.map((({props:e})=>{const t=e.id||e.tabId;return t?r(p,{id:`${t}-panel`,tabId:t,children:e.children},`${t}-panel`):(b.warn("Warning: Each `Tab` component must have an `id` or `tabId` prop to associate it with a TabPanel."),null)}))]}))}));g.displayName="Tabs";export{g as Tabs,g as default};