carbon-react 162.12.0-beta.1 → 162.13.0

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

@@ -0,0 +1,94 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface SwitchProps extends MarginProps, TagProps {
+    /** Checked state of the switch */
+    checked: boolean;
+    /** OnChange event handler */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** OnBlur event handler */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** OnFocus event handler */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** If true, the input will auto-focus on mount */
+    autoFocus?: boolean;
+    /** The id attribute of the hidden input */
+    id?: string;
+    /** The name attribute of the hidden input */
+    name?: string;
+    /** The value attribute of the hidden input, passed on form submit */
+    value?: string;
+    /** Accessible text label rendered above the switch */
+    label?: React.ReactNode;
+    /** Disables the switch */
+    disabled?: boolean;
+    /** Triggers the loading state — hides On/Off text and shows a spinner */
+    loading?: boolean;
+    /** Text shown beside the spinner during loading. Defaults to "Processing..." */
+    processingLabel?: string;
+    /** When true, the processing label is rendered below the switch rather than to its right */
+    processingLabelBelowSwitch?: boolean;
+    /** Size of the switch track */
+    size?: "small" | "large";
+    /** When true, the label is displayed inline (beside the switch) rather than above it */
+    labelInline?: boolean;
+    /** Spacing between the label and switch when labelInline is true (multiplier of base spacing unit) */
+    labelSpacing?: 1 | 2;
+    /** Label width as a percentage when labelInline is true */
+    labelWidth?: number;
+    /** Hint text displayed below the switch */
+    inputHint?: React.ReactNode;
+    /** Whether the input is required */
+    required?: boolean;
+    /**
+     * @deprecated Use `inputHint` instead.
+     */
+    labelHelp?: React.ReactNode;
+    /**
+     * @deprecated Use `inputHint` instead.
+     */
+    fieldHelp?: React.ReactNode;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    isDarkBackground?: boolean;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    reverse?: boolean;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    error?: boolean | string;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    warning?: boolean | string;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    info?: boolean | string;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    validationOnLabel?: boolean;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    fieldHelpInline?: boolean;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    helpAriaLabel?: string;
+    /**
+     * @deprecated This prop is no longer supported.
+     */
+    validationMessagePositionTop?: boolean;
+}
+export declare const SwitchComponent: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export { SwitchComponent as Switch };
+export default SwitchComponent;

package/esm/components/switch/switch.component.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{useRef as t}from"react";import l from"../../__internal__/utils/helpers/guid/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import n from"../../style/utils/filter-styled-system-margin-props.js";import a from"../../hooks/__internal__/useLocale/useLocale.js";import o from"../../hooks/useMediaQuery/useMediaQuery.js";import{Loader as s}from"../loader/__next__/loader.component.js";import{StyledSwitch as c,StyledSwitchLabelWrapper as d,StyledSwitchLabel as p,StyledSwitchRow as u,StyledSwitchTrack as b,StyledSwitchInput as h,StyledSwitchLoaderWrapper as f,StyledSwitchThumb as m,StyledSwitchProcessingRow as g,StyledSwitchProcessingText as y,StyledSwitchStateText as w}from"./switch.style.js";import{HintText as O}from"../../__internal__/legacy-hint-text/hint-text.component.js";function $(e,r,i){return r in e?Object.defineProperty(e,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[r]=i,e}const j=i.forwardRef(((i,j)=>{var{checked:v,onChange:k,onBlur:P,onFocus:_,autoFocus:L,id:S,name:x,value:z,label:H,disabled:T,loading:B,processingLabel:I,processingLabelBelowSwitch:F=!1,size:D="small",labelInline:q=!1,labelSpacing:C,labelWidth:M,"data-element":E,"data-role":W,inputHint:A,required:Q,labelHelp:N,fieldHelp:R,isDarkBackground:G,reverse:J,error:K,warning:U,info:V,validationOnLabel:X,fieldHelpInline:Y,tooltipPosition:Z,helpAriaLabel:ee,validationMessagePositionTop:re}=i,ie=function(e,r){if(null==e)return{};var i,t,l=function(e,r){if(null==e)return{};var i,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)i=n[t],r.indexOf(i)>=0||(l[i]=e[i]);return l}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)i=n[t],r.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(l[i]=e[i])}return l}(i,["checked","onChange","onBlur","onFocus","autoFocus","id","name","value","label","disabled","loading","processingLabel","processingLabelBelowSwitch","size","labelInline","labelSpacing","labelWidth","data-element","data-role","inputHint","required","labelHelp","fieldHelp","isDarkBackground","reverse","error","warning","info","validationOnLabel","fieldHelpInline","tooltipPosition","helpAriaLabel","validationMessagePositionTop"]);const te=o("(prefers-reduced-motion: reduce)"),le=a(),ne=le.switch.on(),ae=le.switch.off(),oe=null!=I?I:le.switch.processingLabel(),se=t(l()),ce=S||se.current,de=t(`${l()}-label`),pe=t(`${l()}-hint`),ue=null!=A?A:N,be=n(ie);return e(c,(he=function(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{},t=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(i).filter((function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})))),t.forEach((function(r){$(e,r,i[r])}))}return e}({"data-component":"switch","data-element":E,"data-role":W,$labelInline:q},be),fe=null!=(fe={children:[(H||ue)&&e(d,{"data-role":"switch-label-wrapper",$labelInline:q,$labelWidth:q?M:void 0,children:[H&&r(p,{htmlFor:ce,$disabled:T,$inputHint:!!ue,$labelInline:q,$labelSpacing:q?C:void 0,$required:Q,$size:D,id:de.current,children:H}),ue&&r(O,{"data-element":"input-hint",id:pe.current,isLarge:"large"===D,marginTop:"2px",children:ue})]}),e(u,{$size:D,$processingLabelBelowSwitch:B&&F,children:[e(b,{"data-role":"switch-track",$checked:v,$disabled:T,$size:D,$loading:B,$disableTransitions:!!te,onClick:e=>{if(T||B)return;const r=e.currentTarget.querySelector("input");r&&e.target!==r&&r.click()},children:[r(h,{ref:j,type:"checkbox",role:"switch",id:ce,name:x,value:z,checked:v,disabled:T||B,autoFocus:L,"aria-checked":v,onChange:k,onBlur:P,onFocus:_,"aria-describedby":ue?pe.current:void 0,required:Q}),B?r(f,{"data-role":"switch-loader-wrapper",$checked:v,$size:D,$disableTransitions:!!te,children:r(s,{"data-role":"switch-loader",loaderType:"ring",size:"large"===D?"small":"extra-small",showLabel:!1,inverse:v})}):r(m,{"data-role":"switch-thumb",$checked:v,$disabled:T,$size:D,$disableTransitions:!!te})]}),B?r(g,{$below:F,"data-role":"switch-processing-row",children:r(y,{$size:D,children:oe})}):r(w,{"aria-hidden":!0,$disabled:T,$size:D,children:v?ne:ae})]}),R&&r(O,{marginTop:"8px","data-element":"field-help",isLarge:"large"===D,children:R})]})?fe:{},Object.getOwnPropertyDescriptors?Object.defineProperties(he,Object.getOwnPropertyDescriptors(fe)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r.push.apply(r,i)}return r}(Object(fe)).forEach((function(e){Object.defineProperty(he,e,Object.getOwnPropertyDescriptor(fe,e))})),he));var he,fe}));j.displayName="Switch";export{j as Switch,j as SwitchComponent,j as default};

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

@@ -0,0 +1,61 @@
+interface StyledSwitchProps {
+    $labelInline?: boolean;
+}
+declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {
+    theme: object;
+} & StyledSwitchProps, "theme">;
+interface StyledSwitchLabelWrapperProps {
+    $labelInline?: boolean;
+    $labelWidth?: number;
+}
+declare const StyledSwitchLabelWrapper: import("styled-components").StyledComponent<"div", any, StyledSwitchLabelWrapperProps, never>;
+interface StyledSwitchLabelProps {
+    $disabled?: boolean;
+    $inputHint?: boolean;
+    $labelInline?: boolean;
+    $labelSpacing?: 1 | 2;
+    $required?: boolean;
+    $size?: "small" | "large";
+}
+declare const StyledSwitchLabel: import("styled-components").StyledComponent<"label", any, StyledSwitchLabelProps, never>;
+interface StyledSwitchRowProps {
+    $size?: "small" | "large";
+    $processingLabelBelowSwitch?: boolean;
+}
+declare const StyledSwitchRow: import("styled-components").StyledComponent<"div", any, StyledSwitchRowProps, never>;
+interface StyledSwitchTrackProps {
+    $checked: boolean;
+    $disabled?: boolean;
+    $size?: "small" | "large";
+    $loading?: boolean;
+    $disableTransitions?: boolean;
+}
+declare const StyledSwitchTrack: import("styled-components").StyledComponent<"div", any, StyledSwitchTrackProps, never>;
+interface StyledSwitchThumbProps {
+    $checked: boolean;
+    $disabled?: boolean;
+    $size?: "small" | "large";
+    $disableTransitions?: boolean;
+}
+declare const StyledSwitchThumb: import("styled-components").StyledComponent<"span", any, StyledSwitchThumbProps, never>;
+interface StyledSwitchStateTextProps {
+    $disabled?: boolean;
+    $size?: "small" | "large";
+}
+declare const StyledSwitchStateText: import("styled-components").StyledComponent<"span", any, StyledSwitchStateTextProps, never>;
+interface StyledSwitchProcessingRowProps {
+    $below?: boolean;
+}
+declare const StyledSwitchProcessingRow: import("styled-components").StyledComponent<"div", any, StyledSwitchProcessingRowProps, never>;
+interface StyledSwitchProcessingTextProps {
+    $size?: "small" | "large";
+}
+declare const StyledSwitchProcessingText: import("styled-components").StyledComponent<"span", any, StyledSwitchProcessingTextProps, never>;
+interface StyledSwitchLoaderWrapperProps {
+    $checked: boolean;
+    $size?: "small" | "large";
+    $disableTransitions?: boolean;
+}
+declare const StyledSwitchLoaderWrapper: import("styled-components").StyledComponent<"span", any, StyledSwitchLoaderWrapperProps, never>;
+declare const StyledSwitchInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export { StyledSwitch, StyledSwitchLabel, StyledSwitchLabelWrapper, StyledSwitchRow, StyledSwitchTrack, StyledSwitchThumb, StyledSwitchStateText, StyledSwitchProcessingRow, StyledSwitchProcessingText, StyledSwitchInput, StyledSwitchLoaderWrapper, };

package/esm/components/switch/switch.style.js

@@ -0,0 +1 @@
+import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import i from"../../style/utils/add-focus-styling.js";import l from"../../style/themes/apply-base-theme.js";const o=e.div.attrs(l).withConfig({displayName:"switch.style__StyledSwitch",componentId:"carbon_v162_12_0__sc-f7e060fe-0"})([""," display:",";flex-direction:",";"],t,(({$labelInline:e})=>e?"flex":"inline-flex"),(({$labelInline:e})=>e?"row":"column")),r=e.div.withConfig({displayName:"switch.style__StyledSwitchLabelWrapper",componentId:"carbon_v162_12_0__sc-f7e060fe-1"})(["",""],(({$labelInline:e,$labelWidth:t})=>a(["display:flex;flex-direction:column;margin-right:var(--global-space-comp-s);",""],e&&t&&a(["width:","%;"],t)))),s=e.label.withConfig({displayName:"switch.style__StyledSwitchLabel",componentId:"carbon_v162_12_0__sc-f7e060fe-2"})(["",""],(({$disabled:e,$inputHint:t,$labelInline:i,$labelSpacing:l,$required:o,$size:r})=>a(["display:flex;color:",";font:",";cursor:pointer;"," "," "," ",""],e?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-default)","large"===r?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-medium-m)",o&&a(['::after{content:"*";color:var(--input-labelset-label-required);font:',";margin-left:var(--global-space-comp-xs);}"],"large"===r?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-medium-m)"),!t&&a(["margin-bottom:var(--global-space-comp-s);"]),i&&a(["margin-bottom:0;"]),(i||t)&&a(["margin-right:",";"],l?8*l+"px":"var(--global-space-comp-s)")))),n=e.div.withConfig({displayName:"switch.style__StyledSwitchRow",componentId:"carbon_v162_12_0__sc-f7e060fe-3"})(["",""],(({$size:e,$processingLabelBelowSwitch:t})=>a(["display:flex;flex-direction:",";align-items:",";gap:var(--global-space-comp-s);",""],t?"column":"row",t?"flex-start":"center","large"===e&&a(["margin-top:var(--global-space-comp-xs);"])))),c=e.div.withConfig({displayName:"switch.style__StyledSwitchTrack",componentId:"carbon_v162_12_0__sc-f7e060fe-4"})(["",""],(({$checked:e,$disabled:t,$size:l,$loading:o,$disableTransitions:r})=>a(["position:relative;display:inline-flex;align-items:center;flex-shrink:0;width:",";height:",";border-radius:var(--global-radius-container-circle,999px);border:var(--global-borderwidth-s) solid var(--input-switch-border-default);box-sizing:border-box;transition:",";cursor:",";background-color:transparent;border-color:",";"," "," "," &:focus-within{","}"],"large"===l?"var(--global-size-3-xl)":"var(--global-size-m)","large"===l?"var(--global-size-m)":"var(--global-size-xs)",r?"none":"background-color 0.2s ease, border-color 0.2s ease",t?"not-allowed":"pointer",t?"var(--input-switch-border-disabled)":"var(--input-switch-border-default)",e&&!t&&a(["border-radius:var(--global-radius-container-circle,999px);border:var(--global-borderwidth-s) solid var(--input-switch-border-active);background:var(--input-switch-bg-active);"]),t&&e&&a(["background-color:var(--input-switch-bg-activate-disabled);border-color:transparent;"]),o&&a(["&::after{display:none;}"]),i()))),d=e.span.withConfig({displayName:"switch.style__StyledSwitchThumb",componentId:"carbon_v162_12_0__sc-f7e060fe-5"})(["",""],(({$checked:e,$disabled:t,$size:i,$disableTransitions:l})=>a(["position:absolute;left:",";width:",";height:",";border-radius:50%;background-color:",";transition:",";transform:",";"," ",""],"large"===i?"4px":"3px","large"===i?"28px":"var(--global-size-3-xs)","large"===i?"28px":"var(--global-size-3-xs)",t?"var(--input-switch-fg-disabled)":"var(--input-switch-fg-default)",l?"none":"transform 0.2s ease, background-color 0.2s ease",e?"large"===i?"translateX(32px)":"translateX(15px)":"translateX(0)",e&&!t&&a(["background-color:var(--input-switch-fg-active);"]),e&&t&&a(["background-color:var(--input-switch-fg-activate-disabled);"])))),p=e.span.withConfig({displayName:"switch.style__StyledSwitchStateText",componentId:"carbon_v162_12_0__sc-f7e060fe-6"})(["",""],(({$disabled:e,$size:t})=>a(["color:",";font:",";"],e?"var(--input-switch-label-disabled)":"var(--input-switch-label-default)","large"===t?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-medium-m)"))),b=e.div.withConfig({displayName:"switch.style__StyledSwitchProcessingRow",componentId:"carbon_v162_12_0__sc-f7e060fe-7"})(["",""],(({$below:e})=>a(["display:flex;align-items:",";flex-direction:",";gap:",";"],e?"flex-start":"center",e?"column":"row",e?"var(--global-space-comp-s)":"var(--global-space-comp-m)"))),m=e.span.withConfig({displayName:"switch.style__StyledSwitchProcessingText",componentId:"carbon_v162_12_0__sc-f7e060fe-8"})(["",""],(({$size:e})=>a(["color:var(--input-switch-label-default);font:",";"],"large"===e?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-medium-m)"))),g=e.span.withConfig({displayName:"switch.style__StyledSwitchLoaderWrapper",componentId:"carbon_v162_12_0__sc-f7e060fe-9"})(["",""],(({$checked:e,$size:t,$disableTransitions:i})=>a(["position:absolute;left:2px;display:flex;align-items:center;justify-content:center;transition:",";transform:",";"],i?"none":"transform 0.2s ease",e?"large"===t?"translateX(32px)":"translateX(15px)":"translateX(0)"))),f=e.input.withConfig({displayName:"switch.style__StyledSwitchInput",componentId:"carbon_v162_12_0__sc-f7e060fe-10"})(["position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:2;-webkit-appearance:none;appearance:none;"]);export{o as StyledSwitch,f as StyledSwitchInput,s as StyledSwitchLabel,r as StyledSwitchLabelWrapper,g as StyledSwitchLoaderWrapper,b as StyledSwitchProcessingRow,m as StyledSwitchProcessingText,n as StyledSwitchRow,p as StyledSwitchStateText,d as StyledSwitchThumb,c as StyledSwitchTrack};

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

@@ -0,0 +1,2 @@
+export { Tabs, Tab, TabList, TabPanel } from "./tabs.component";
+export type { TabsProps, TabProps, TabsHandle } from "./tabs.types";

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

@@ -0,0 +1 @@
+export{Tab,TabList,TabPanel,Tabs}from"./tabs.component.js";

package/esm/components/tabs/__next__/tab.context.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { TabContextProps } from "./tabs.types";
+export declare const TabContext: React.Context<TabContextProps>;
+interface TabProviderProps {
+    children?: React.ReactNode;
+    tabId: string;
+    visible: boolean;
+}
+export declare const TabProvider: ({ children, tabId, visible }: TabProviderProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{createContext as e}from"react";import{StyledTabProvider as t}from"./tabs.style.js";const i=e({tabId:""}),o=({children:e,tabId:o,visible:a})=>r(i.Provider,{value:{tabId:o},children:r(t,{visible:a,role:"presentation",children:e})});export{i as TabContext,o as TabProvider};

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

@@ -0,0 +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, 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

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{useRef as n,forwardRef 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 u,StyledTabListWrapper as d,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 w from"../../icon/icon.component.js";import"../../icon/icon.style.js";import{TabProvider as _}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 $(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 L(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(_,{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:u,warning:d=!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(d),[C,W]=c(f),{activeTab:D,focusIndex:E,orientation:R,setActiveTab:N,setCurrentTabId:B,setFocusIndex:q,size:F,errors:U,warnings:G,infos:H}=b(),K=D===i;l((()=>{K&&B(i)}),[i,K,B]),!s&&!u||"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(),null==e||e.scrollIntoView({block:"nearest",inline:"center"})}}),[E,i,B]),l((()=>{let e=U[i],t=G[i],r=H[i];if(o&&!e&&(e={static:o}),d&&!t&&(t={static:d}),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=d||!!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,d,H,f]);const V=()=>{const t=S(a);if(x||T||C){if(x)return e(w,{"data-role":"icon-error",type:"error",ariaLabel:O.tabs.error(t),color:"negative"});if(T)return e(w,{"data-role":"icon-warning",type:"warning",ariaLabel:O.tabs.warning(t),color:"caution"});if(C)return e(w,{"data-role":"icon-info",type:"info",ariaLabel:O.tabs.info(t),color:"info"})}return null};return e(_,{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:()=>{N(i),q(i)},$orientation:R,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,u,V()]}:{className:"tab-title-content-wrapper",children:[a,V()]})}))})},W=o(((o,s)=>{var{ariaLabel:u,children:h,onTabChange:y,headerWidth:m}=o,_=P(o,["ariaLabel","children","onTabChange","headerWidth"]);const S=n(null),{activeTab:T,focusIndex:z,orientation:A,selectedTabId:C,setFocusIndex:W,setActiveTab:D,size:E}=b(),R=n(k()),N=n(k()),B=n(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),[V,J]=c(!1),[M,Q]=c(!1),X=a((()=>{if(S.current){const e=S.current.scrollWidth-S.current.clientWidth-20;K(e>0),J(S.current.scrollLeft>=20),Q(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(d,{$headerWidth:m,"data-role":"tab-list-wrapper",children:["vertical"!==A&&H?V?e(p,{"data-role":"tab-navigation-button-left",id:`tab-navigation-button-left-${R.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(w,{type:"chevron_left"})}):e(g,{$size:E}):null,r(f,L($({"aria-label":u,id:`tablist-${B.current}`,onKeyDown:G,onScroll:X,$orientation:A,$scrollRequired:H,ref:S,role:"tablist",tabIndex:-1},I("tab-list",_)),{children:[h,e(v,{})]})),(()=>{var t,r;return"vertical"!==A&&H?M?e(p,{"data-role":"tab-navigation-button-right",id:`tab-navigation-button-right-${N.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(w,{type:"chevron_right"})}):e(g,{$size:E}):null})()]})});var Z,ee})),D=t=>{var{children:r,labelledBy:o="",orientation:i="horizontal",selectedTabId:a,size:l="medium"}=t,c=P(t,["children","labelledBy","orientation","selectedTabId","size"]);const b=n(k());return e(s,{labelledBy:o,orientation:i,selectedTabId:a,size:l,children:e(u,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.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { TabsContextProps } from "./tabs.types";
+export declare const TabsContext: React.Context<TabsContextProps>;
+export declare const useTabs: () => TabsContextProps;
+interface TabsProviderProps {
+    children?: React.ReactNode;
+    isInTab?: boolean;
+    labelledBy?: string;
+    orientation: "horizontal" | "vertical";
+    selectedTabId?: string;
+    size: "medium" | "large";
+}
+export declare const TabsProvider: ({ children, isInTab, labelledBy, orientation, selectedTabId, size, }: TabsProviderProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t,useCallback as n,useEffect as o,useContext 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=r({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),l=()=>s(b),u=({children:r,isInTab:s=!0,labelledBy:a,orientation:l,selectedTabId:u="",size:d})=>{const[f,I]=t(u),[m,T]=t(u),[y,p]=t(""),[v,g]=t({}),[O,j]=t({}),[x,h]=t({}),w=n(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),P=n(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),z=n(((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 o((()=>{u&&u!==_&&(I(u),T(u))}),[u,_]),e(b.Provider,{value:{activeTab:f,currentTabId:m,focusIndex:y,isInTab:s,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

@@ -0,0 +1,35 @@
+import { TabProps } from "./tabs.types";
+export declare const TAB_LIST_FOCUS_PADDING = 6;
+interface StyledTabListProps {
+    $orientation: "horizontal" | "vertical";
+    $scrollRequired: boolean;
+}
+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, {
+    $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";
+}, never>;
+export declare const StyledScrollButtonPlaceholder: import("styled-components").StyledComponent<"div", any, {
+    $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";
+    $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";
+}, never>;
+export declare const StyledTabProvider: import("styled-components").StyledComponent<"div", any, {
+    visible: boolean;
+}, never>;
+export {};

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

@@ -0,0 +1 @@
+import a,{css as o}from"styled-components";import i from"../../../style/utils/add-focus-styling.js";const t=6,r={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}},e=a.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"carbon_v162_12_0__sc-e5240158-0"})(["padding:0 6px;"]),d=a.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"carbon_v162_12_0__sc-e5240158-1"})(["display:flex;"," width:100%;padding:","px;overflow-x:hidden;"],(({$orientation:a,$scrollRequired:i})=>o([""," ",""],"horizontal"===a&&o(["margin-bottom:8px;",""],i&&o(["margin-inline:-","px;"],6)),"vertical"===a&&o(["flex-direction:column;flex-wrap:wrap;margin-right:8px;"]))),6),n=a.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"carbon_v162_12_0__sc-e5240158-2"})(["display:flex;z-index:6;",";"],(({$headerWidth:a})=>a&&o(["width:",";"],a))),l=a.div.withConfig({displayName:"tabs.style__Spacer",componentId:"carbon_v162_12_0__sc-e5240158-3"})(["align-self:flex-end;background:var(--tab-border-active-alt);flex-grow:1;height:2px;"]),b=a.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"carbon_v162_12_0__sc-e5240158-4"})(["height:",";width:",";border-radius:var(--global-radius-none);border-top-right-radius:var(--global-radius-action-m);border-top-left-radius:var(--global-radius-action-m);border-color:var(--tab-border-active-alt);background:white;border:none;border-bottom:2px solid var(--tab-border-active-alt);top:6px;position:relative;z-index:2;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),p=a.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"carbon_v162_12_0__sc-e5240158-5"})(["height:",";width:",";border-radius:var(--global-radius-none);border-color:var(--tab-border-active-alt);border:none;border-bottom:2px solid var(--tab-border-active-alt);top:4px;position:relative;"],(({$size:a})=>"medium"===a?"40px":"48px"),(({$size:a})=>"medium"===a?"40px":"48px")),s=a.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"carbon_v162_12_0__sc-e5240158-6"})(["background-color:transparent;border:none;border-bottom:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) var(--global-radius-action-m) 0 0;white-space:nowrap;height:fit-content;color:var(--tab-label-default);font-weight:var(--fontWeights500);line-height:var(--lineHeights500);position:relative;.tab-title-content-wrapper{"," ","}:hover{background-color:var(--tab-bg-hover);cursor:pointer;}",";",";"," :focus{"," z-index:1;","}"],(({$hasCustomLayout:a})=>!a&&o(["align-items:center;display:flex;gap:8px;"])),(({activeTab:a,$orientation:i,$size:t,error:r,warning:e,info:d,$hasCustomLayout:n})=>a&&o([""," "," ",""],"horizontal"===i&&(r||e||d)&&o(["position:relative;top:1px;"]),"large"===t&&o(["margin-top:-4px;"]),n&&"horizontal"===i&&o(["position:relative;top:-2px;left:1px;"]))),(({$size:a,$hasCustomLayout:i})=>o(["font-size:","px;height:","px;",""],r[a].fontSize,r[a].height,i?o(["padding:0;"]):o(["padding:","px ","px;"],r[a].paddingY,r[a].paddingX))),(({activeTab:a,error:i,info:t,$orientation:e,$size:d,warning:n,$hasCustomLayout:l})=>a&&"horizontal"===e&&o(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-bottom:none;color:var(--tab-label-active);",' :hover{background-color:var(--tab-bg-active);}::after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:4px;background-color:',";border-radius:var(--global-radius-container-2-xs);min-width:24px;}"],!l&&o(["padding-top:","px;padding-right:","px;padding-bottom:","px;padding-left:","px;"],r[d].paddingY-4,r[d].paddingX-2,r[d].paddingY,r[d].paddingX-2),(()=>i?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":t?"#0060a7ff":"black"))),(({activeTab:a,error:i,info:t,$orientation:e,$size:d,warning:n,$hasCustomLayout:l,$headerWidth:b})=>"vertical"===e&&o(["border:none;border-right:2px solid var(--tab-border-default);border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);max-width:",";width:",";"," ",""],null!=b?b:"200px",null!=b?b:"200px",b&&o(["white-space:normal;height:auto;"]),a&&o(["background-color:var(--tab-bg-active);border:2px solid var(--tab-border-active-alt);border-right:none;"," :hover{background-color:var(--tab-bg-active);}.tab-title-content-wrapper{"," ",' ::after{content:"";position:absolute;right:0;width:4px;'," height:60%;background-color:",";border-radius:var(--global-radius-container-2-xs);min-height:24px;}}"],!l&&o(["padding-top:","px;padding-right:var(--global-space-none);padding-bottom:","px;padding-left:","px;"],"medium"===d?r.medium.paddingY-2:4,"medium"===d?r.medium.paddingY-2:r.large.paddingY,r[d].paddingX-2),b&&!l&&o(["padding-right:18px;"]),l&&o(["width:100%;> *{position:relative;left:-2px;top:-2px;}"]),l&&o(["top:20%;right:0px;"]),(()=>i?"var(--tab-validation-border-error)":n?"var(--tab-validation-border-warning)":t?"#0060a7ff":"black")))),i(),(({$orientation:a})=>o(["border-top-left-radius:var(--global-radius-action-m);border-top-right-radius:",";border-bottom-left-radius:",";border-bottom-right-radius:var(--global-radius-none);"],"horizontal"===a?"var(--global-radius-action-m)":"var(--global-radius-none)","horizontal"===a?"var(--global-radius-none)":"var(--global-radius-action-m)"))),g=a.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"carbon_v162_12_0__sc-e5240158-7"})(["display:flex;",""],(({$orientation:a})=>o(["flex-direction:",";"],"horizontal"===a?"column":"row"))),c=a.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"carbon_v162_12_0__sc-e5240158-8"})(["",""],(({visible:a})=>o(["display:",";"],a?"block":"none")));export{l as Spacer,b as StyledScrollButton,p as StyledScrollButtonPlaceholder,s as StyledTab,d as StyledTabList,n as StyledTabListWrapper,e as StyledTabPanel,c as StyledTabProvider,g as StyledTabs,t as TAB_LIST_FOCUS_PADDING};

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

@@ -0,0 +1,94 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export type TabValidationRecord = Record<string, string | boolean>;
+export type ValidationRecord = Record<string, TabValidationRecord>;
+export interface TabContextProps {
+    tabId?: string;
+}
+export type TabsHandle = {
+    /**
+     * Programmatically focus on a specific tab.
+     * @param id - The ID of the tab to focus. Must match the `id` prop of the target `Tab` component.
+     */
+    focusTab: (id: string) => void;
+};
+export interface TabsContextProps {
+    activeTab: string;
+    currentTabId?: string;
+    focusIndex: string;
+    isInTab?: boolean;
+    labelledBy?: string;
+    orientation: "horizontal" | "vertical";
+    selectedTabId?: string;
+    setActiveTab: Dispatch<SetStateAction<string>>;
+    setFocusIndex: Dispatch<SetStateAction<string>>;
+    setCurrentTabId: Dispatch<SetStateAction<string>>;
+    setErrors: (childId: string, tabId: string, error: string | boolean) => void;
+    setWarnings: (childId: string, tabId: string, warning: string | boolean) => void;
+    errors: ValidationRecord;
+    warnings: ValidationRecord;
+    size: "medium" | "large";
+    infos: ValidationRecord;
+    setInfos: (childId: string, tabId: string, info: string | boolean) => void;
+}
+export interface TabPanelProps extends TagProps {
+    /** The content to be shown in the tab panel */
+    children?: React.ReactNode;
+    /** The ID of the tab panel */
+    id: string;
+    /** The ID of the controlling tab */
+    tabId: string;
+}
+export interface TabListProps extends TagProps {
+    /** The label read out when the tab list gains focus */
+    ariaLabel: string;
+    /** The tabs to be shown in the tab list */
+    children?: React.ReactNode;
+    /** A callback for when the active tab is changed */
+    onTabChange?: (tabId: string) => void;
+    /**
+     * @private @ignore @internal
+     */
+    headerWidth?: string;
+}
+export interface TabProps extends TagProps {
+    /** The tab panel that this tab controls */
+    controls: string;
+    /** The ID of the tab */
+    id: string;
+    /** The error state of the tab */
+    error?: boolean | string;
+    /** The label shown on the tab */
+    label: React.ReactNode;
+    /** The item shown to the left of the label */
+    leftSlot?: React.ReactNode;
+    /** The item shown to the right of the label */
+    rightSlot?: React.ReactNode;
+    /** The warning state of the tab */
+    warning?: boolean | string;
+    /**
+     * The info state of the tab
+     * @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  */
+    children?: React.ReactNode;
+    /** The label associated with this set of tabs, for assistive technologies */
+    labelledBy?: string;
+    /** The orientation of the tabs */
+    orientation?: "horizontal" | "vertical";
+    /** The pre-selected tab to show e.g when restoring from URL  */
+    selectedTabId?: string;
+    /** The size of the tabs to use */
+    size?: "medium" | "large";
+}

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

@@ -0,0 +1,4 @@
+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/index.js

@@ -0,0 +1 @@
+export{Tabs}from"./tabs.component.js";export{Tab}from"./tab/tab.component.js";

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

@@ -0,0 +1,2 @@
+export { default } from "./tab.component";
+export type { TabProps } from "./tab.component";

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

@@ -0,0 +1 @@
+export{Tab as default}from"./tab.component.js";

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+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.
+     * @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.
+     * @deprecated Support will be removed in a future release.
+     * */
+    position?: "top" | "left";
+    /**
+     * @deprecated
+     * Message displayed when Tab has error
+     * The legacy validation pattern is being removed in a future release.
+     * */
+    errorMessage?: string;
+    /**
+     * @deprecated
+     * Message displayed when Tab has warning
+     * The legacy validation pattern is being removed in a future release.
+     * */
+    warningMessage?: string;
+    /**
+     * @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
+     * @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
+     * @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
+     * @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?: {
+        /** Identifier used for testing purposes */
+        "data-role"?: string;
+    };
+    /** @private @ignore */
+    role?: string;
+    /** @private @ignore */
+    ariaLabelledby?: string;
+    /** @private @ignore @internal */
+    validationStatusOverride?: {
+        error?: boolean;
+        warning?: boolean;
+        info?: boolean;
+    };
+    /** @private @ignore @internal */
+    headerWidth?: string;
+}
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,73 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+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
+     * @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;
+    /** The child elements of Tabs need to be Tab components. */
+    children: React.ReactNode;
+    /**
+     * Sets the alignment of the tab titles. Possible values include.
+     * @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
+     * tab changing or to fire other events when a tab is changed.
+     */
+    onTabChange?: (tabId: string) => void;
+    /**
+     * The position of the tab title.
+     * */
+    position?: "top" | "left";
+    /** Sets size of the tab titles. */
+    size?: "default" | "large";
+    /**
+     * Sets the divider of the tab titles header to extend the full width of the parent.
+     * @deprecated Support for extended lines in tab headers has been removed.
+     * */
+    extendedLine?: boolean;
+    /**
+     * Adds a combination of borders to the tab titles.
+     * @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.
+     * @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.
+     * The `id` property should match the `tabId`s for the rendered Tabs.
+     */
+    validationStatusOverride?: {
+        [id: string]: {
+            error?: boolean;
+            warning?: boolean;
+            info?: boolean;
+        };
+    };
+    /**
+     * 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 Support for validation summaries has been removed.
+     */
+    showValidationsSummary?: boolean;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsHandle>>;
+export default Tabs;

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

@@ -0,0 +1 @@
+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};