carbon-react 157.7.0 → 157.8.0

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

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

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

@@ -2,6 +2,13 @@ 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.
+     * @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 */
     renderHiddenTabs?: boolean;
@@ -57,5 +64,5 @@ export interface TabsProps extends MarginProps, TagProps {
      */
     showValidationsSummary?: boolean;
 }
-declare const Tabs: ({ align, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, showValidationsSummary, ...rest }: TabsProps) => React.JSX.Element;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
 export { Tabs, Tab };

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as r,Children as n,createRef as i,useRef as o,useState as a,useContext as s,useCallback as l,useEffect as d,createElement as p,cloneElement as c}from"react";export{Tab}from"./tab/tab.component.js";import b from"../../__internal__/utils/helpers/events/events.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import f from"../../__internal__/utils/logger/index.js";import g from"./tabs.style.js";import h from"./__internal__/tabs-header/tabs-header.component.js";import m from"./__internal__/tab-title/tab-title.component.js";import y from"../drawer/__internal__/drawer-sidebar.context.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(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){v(e,t,r[t])}))}return e}function w(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 j=!1,_=!1,I=!1,T=!1,S=!1;const P=v=>{var{align:P="left",children:x,onTabChange:L,selectedTabId:W,renderHiddenTabs:k=!0,position:E="top",extendedLine:D=!0,size:M,borders:$="off",variant:K="default",validationStatusOverride:z,headerWidth:B,showValidationsSummary:C}=v,H=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}(v,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);S||(f.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),S=!0),C&&!T&&(f.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),T=!0),"right"!==P||j||(f.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),j=!0),D||_||(f.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),_=!0),"off"===$||I||(f.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),I=!0),"left"!==E&&void 0!==B&&f.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const R=r((()=>n.toArray(x).filter((e=>e))),[x]),V=r((()=>R.map((e=>e.props.tabId))),[R]),A=r((()=>Array.from({length:R.length}).map((()=>i()))),[R.length]),U=o(W),[q,F]=a(W||R[0].props.tabId),{isInSidebar:G}=s(y),[J,N]=a({}),[Q,X]=a({}),[Y,Z]=a({}),ee=l(((e,t)=>{N((r=>w(O({},r),{[e]:t})))}),[]),te=l(((e,t)=>{X((r=>w(O({},r),{[e]:t})))}),[]),re=l(((e,t)=>{Z((r=>w(O({},r),{[e]:t})))}),[]),ne=l((e=>e===q),[q]),ie=l((e=>{ne(e)||F(e),L&&L(e)}),[L,ne]),oe=l((()=>{const{current:e}=U,t=e?V.indexOf(e):-1;var r;-1!==t&&(null===(r=A[t].current)||void 0===r||r.blur())}),[V,A]);d((()=>{U.current!==W&&(W!==q&&(F(W),oe()),U.current=W)}),[oe,U,W,q]);const ae=e=>t=>{b.isEventType(t,"keydown")||ie(e)},se=(e,t)=>{e.preventDefault();let r=t;t<0?r=V.length-1:t===V.length&&(r=0),(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"}))})(A[r])},le=e=>t=>{const r=G||"left"===E,n=r&&b.isUpKey(t),i=r&&b.isDownKey(t),o=!r&&b.isLeftKey(t),a=!r&&b.isRightKey(t);n||o?se(t,e-1):(i||a)&&se(t,e+1)};return e(g,w(O({position:G?"left":E,"data-role":"tabs",isInSidebar:G,headerWidth:B},H,u("tabs",H)),{children:[(()=>{const e=R.map(((e,t)=>{const{tabId:r,title:n,siblings:i,titlePosition:o,errorMessage:a,warningMessage:s,infoMessage:l,href:d,customLayout:c,titleProps:b}=e.props,u=`${r}-tab`,f=J[r],g=Q[r],h=Y[r],y=f&&Object.entries(f).filter((e=>e[1])).length,v=g&&Object.entries(g).filter((e=>e[1])).length,j=h&&Object.entries(h).filter((e=>e[1])).length,_=z&&z[r],I=_&&z[r].error,T=_&&z[r].warning,S=_&&z[r].info,x=void 0!==I?I:!!y,L=void 0!==T?T:!!v&&!x,W=void 0!==S?S:!!j&&!x&&!L,k=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return C&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return p(m,w(O({},b),{position:G?"left":E,dataTabId:r,id:u,key:r,onClick:ae(r),onKeyDown:le(t),ref:A[t],tabIndex:ne(r)?0:-1,title:n,href:d,isTabSelected:ne(r),error:x,warning:L,info:W,size:M||"default",borders:"off"!==$,siblings:i,titlePosition:o,errorMessage:k(a,f),warningMessage:k(s,g),infoMessage:k(l,h),alternateStyling:"alternate"===K,noLeftBorder:["no left side","no sides"].includes($),noRightBorder:["no right side","no sides"].includes($),customLayout:c,isInSidebar:G,align:P}))}));return t(h,{align:P,position:G?"left":E,role:"tablist",extendedLine:D,noRightBorder:["no right side","no sides"].includes($),isInSidebar:G,size:M||"default",children:e})})(),(()=>{if(G)return null;if(!k){const e=R.find((e=>ne(e.props.tabId)));return e&&c(e,w(O({},e.props),{role:"tabpanel",position:E,isTabSelected:ne(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:ee,updateWarnings:te,updateInfos:re}))}return R.map((e=>c(e,w(O({},e.props),{role:"tabpanel",position:E,isTabSelected:ne(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:ee,updateWarnings:te,updateInfos:re}))))})()]}))};export{P as Tabs};
+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};

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

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

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

@@ -2,6 +2,13 @@ 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.
+     * @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 */
     renderHiddenTabs?: boolean;
@@ -57,5 +64,5 @@ export interface TabsProps extends MarginProps, TagProps {
      */
     showValidationsSummary?: boolean;
 }
-declare const Tabs: ({ align, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, showValidationsSummary, ...rest }: TabsProps) => React.JSX.Element;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
 export { Tabs, Tab };

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

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab/tab.component.js"),n=require("../../__internal__/utils/helpers/events/events.js"),a=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/utils/logger/index.js"),o=require("./tabs.style.js"),s=require("./__internal__/tabs-header/tabs-header.component.js"),l=require("./__internal__/tab-title/tab-title.component.js"),d=require("../drawer/__internal__/drawer-sidebar.context.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){u(e,t,r[t])}))}return e}function b(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 p=!1,f=!1,h=!1,g=!1,m=!1;exports.Tab=r.Tab,exports.Tabs=r=>{var{align:u="left",children:y,onTabChange:v,selectedTabId:O,renderHiddenTabs:j=!0,position:w="top",extendedLine:T=!0,size:S,borders:_="off",variant:I="default",validationStatusOverride:x,headerWidth:P,showValidationsSummary:k}=r,C=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);m||(i.default.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),m=!0),k&&!g&&(i.default.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),g=!0),"right"!==u||p||(i.default.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),p=!0),T||f||(i.default.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),f=!0),"off"===_||h||(i.default.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),h=!0),"left"!==w&&void 0!==P&&i.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const E=t.useMemo((()=>t.Children.toArray(y).filter((e=>e))),[y]),q=t.useMemo((()=>E.map((e=>e.props.tabId))),[E]),L=t.useMemo((()=>Array.from({length:E.length}).map((()=>t.createRef()))),[E.length]),M=t.useRef(O),[W,D]=t.useState(O||E[0].props.tabId),{isInSidebar:R}=t.useContext(d.default),[$,K]=t.useState({}),[z,B]=t.useState({}),[H,V]=t.useState({}),A=t.useCallback(((e,t)=>{K((r=>b(c({},r),{[e]:t})))}),[]),U=t.useCallback(((e,t)=>{B((r=>b(c({},r),{[e]:t})))}),[]),F=t.useCallback(((e,t)=>{V((r=>b(c({},r),{[e]:t})))}),[]),G=t.useCallback((e=>e===W),[W]),J=t.useCallback((e=>{G(e)||D(e),v&&v(e)}),[v,G]),N=t.useCallback((()=>{const{current:e}=M,t=e?q.indexOf(e):-1;var r;-1!==t&&(null===(r=L[t].current)||void 0===r||r.blur())}),[q,L]);t.useEffect((()=>{M.current!==O&&(O!==W&&(D(O),N()),M.current=O)}),[N,M,O,W]);const Q=e=>t=>{n.default.isEventType(t,"keydown")||J(e)},X=(e,t)=>{e.preventDefault();let r=t;t<0?r=q.length-1:t===q.length&&(r=0),(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 a;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(a=e.current)||void 0===a||a.scrollIntoView({behavior:"auto",inline:"center"}))})(L[r])},Y=e=>t=>{const r=R||"left"===w,a=r&&n.default.isUpKey(t),i=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);a||o?X(t,e-1):(i||s)&&X(t,e+1)};return e.jsxs(o.default,b(c({position:R?"left":w,"data-role":"tabs",isInSidebar:R,headerWidth:P},C,a.default("tabs",C)),{children:[(()=>{const r=E.map(((e,r)=>{const{tabId:n,title:a,siblings:i,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:p,href:f,customLayout:h,titleProps:g}=e.props,m=`${n}-tab`,y=$[n],v=z[n],O=H[n],j=y&&Object.entries(y).filter((e=>e[1])).length,T=v&&Object.entries(v).filter((e=>e[1])).length,P=O&&Object.entries(O).filter((e=>e[1])).length,C=x&&x[n],E=C&&x[n].error,q=C&&x[n].warning,M=C&&x[n].info,W=void 0!==E?E:!!j,D=void 0!==q?q:!!T&&!W,K=void 0!==M?M:!!P&&!W&&!D,B=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return k&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,b(c({},g),{position:R?"left":w,dataTabId:n,id:m,key:n,onClick:Q(n),onKeyDown:Y(r),ref:L[r],tabIndex:G(n)?0:-1,title:a,href:f,isTabSelected:G(n),error:W,warning:D,info:K,size:S||"default",borders:"off"!==_,siblings:i,titlePosition:o,errorMessage:B(s,y),warningMessage:B(d,v),infoMessage:B(p,O),alternateStyling:"alternate"===I,noLeftBorder:["no left side","no sides"].includes(_),noRightBorder:["no right side","no sides"].includes(_),customLayout:h,isInSidebar:R,align:u}))}));return e.jsx(s.default,{align:u,position:R?"left":w,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(_),isInSidebar:R,size:S||"default",children:r})})(),(()=>{if(R)return null;if(!j){const e=E.find((e=>G(e.props.tabId)));return e&&t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:w,isTabSelected:G(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:A,updateWarnings:U,updateInfos:F}))}return E.map((e=>t.cloneElement(e,b(c({},e.props),{role:"tabpanel",position:w,isTabSelected:G(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:A,updateWarnings:U,updateInfos:F}))))})()]}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab/tab.component.js"),n=require("../../__internal__/utils/helpers/events/events.js"),a=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/utils/logger/index.js"),o=require("./tabs.style.js"),s=require("./__internal__/tabs-header/tabs-header.component.js"),l=require("./__internal__/tab-title/tab-title.component.js"),d=require("../drawer/__internal__/drawer-sidebar.context.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){u(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}let b=!1,f=!1,h=!1,g=!1,m=!1;const y=t.forwardRef(((r,u)=>{var{align:y="left",children:v,onTabChange:O,selectedTabId:j,renderHiddenTabs:w=!0,position:I="top",extendedLine:T=!0,size:S,borders:_="off",variant:x="default",validationStatusOverride:P,headerWidth:k,showValidationsSummary:C}=r,E=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);m||(i.default.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),m=!0),C&&!g&&(i.default.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),g=!0),"right"!==y||b||(i.default.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),b=!0),T||f||(i.default.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),f=!0),"off"===_||h||(i.default.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),h=!0),"left"!==I&&void 0!==k&&i.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const q=t.useMemo((()=>t.Children.toArray(v).filter((e=>e))),[v]),L=t.useMemo((()=>q.map((e=>e.props.tabId))),[q]),M=t.useMemo((()=>Array.from({length:q.length}).map((()=>t.createRef()))),[q.length]),W=t.useRef(j),[D,R]=t.useState(j||q[0].props.tabId),{isInSidebar:$}=t.useContext(d.default),[H,K]=t.useState({}),[z,B]=t.useState({}),[V,A]=t.useState({}),U=t.useCallback(((e,t)=>{K((r=>p(c({},r),{[e]:t})))}),[]),F=t.useCallback(((e,t)=>{B((r=>p(c({},r),{[e]:t})))}),[]),G=t.useCallback(((e,t)=>{A((r=>p(c({},r),{[e]:t})))}),[]),J=t.useCallback((e=>e===D),[D]),N=t.useCallback((e=>{J(e)||R(e),O&&O(e)}),[O,J]),Q=t.useCallback((()=>{const{current:e}=W,t=e?L.indexOf(e):-1;var r;-1!==t&&(null===(r=M[t].current)||void 0===r||r.blur())}),[L,M]);t.useEffect((()=>{W.current!==j&&(j!==D&&(R(j),Q()),W.current=j)}),[Q,W,j,D]);const X=e=>t=>{n.default.isEventType(t,"keydown")||N(e)},Y=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 a;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(a=e.current)||void 0===a||a.scrollIntoView({behavior:"auto",inline:"center"}))},Z=(e,t)=>{e.preventDefault();let r=t;t<0?r=L.length-1:t===L.length&&(r=0);const n=M[r];Y(n)},ee=e=>t=>{const r=$||"left"===I,a=r&&n.default.isUpKey(t),i=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);a||o?Z(t,e-1):(i||s)&&Z(t,e+1)};return t.useImperativeHandle(u,(()=>({focusTab(e){const t=M[q.findIndex((t=>t.props.tabId===e))];t&&Y(t)}})),[q,M]),e.jsxs(o.default,p(c({position:$?"left":I,"data-role":"tabs",isInSidebar:$,headerWidth:k},E,a.default("tabs",E)),{children:[(()=>{const r=q.map(((e,r)=>{const{tabId:n,title:a,siblings:i,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:u,href:b,customLayout:f,titleProps:h}=e.props,g=`${n}-tab`,m=H[n],v=z[n],O=V[n],j=m&&Object.entries(m).filter((e=>e[1])).length,w=v&&Object.entries(v).filter((e=>e[1])).length,T=O&&Object.entries(O).filter((e=>e[1])).length,k=P&&P[n],E=k&&P[n].error,q=k&&P[n].warning,L=k&&P[n].info,W=void 0!==E?E:!!j,D=void 0!==q?q:!!w&&!W,R=void 0!==L?L:!!T&&!W&&!D,K=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return C&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,p(c({},h),{position:$?"left":I,dataTabId:n,id:g,key:n,onClick:X(n),onKeyDown:ee(r),ref:M[r],tabIndex:J(n)?0:-1,title:a,href:b,isTabSelected:J(n),error:W,warning:D,info:R,size:S||"default",borders:"off"!==_,siblings:i,titlePosition:o,errorMessage:K(s,m),warningMessage:K(d,v),infoMessage:K(u,O),alternateStyling:"alternate"===x,noLeftBorder:["no left side","no sides"].includes(_),noRightBorder:["no right side","no sides"].includes(_),customLayout:f,isInSidebar:$,align:y}))}));return e.jsx(s.default,{align:y,position:$?"left":I,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(_),isInSidebar:$,size:S||"default",children:r})})(),(()=>{if($)return null;if(!w){const e=q.find((e=>J(e.props.tabId)));return e&&t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))}return q.map((e=>t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))))})()]}))}));exports.Tab=r.Tab,exports.Tabs=y;

package/package.json

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