carbon-react 158.28.0 → 158.30.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/icon/icon-config.js

@@ -1 +1 @@
-const e={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],i=["small","medium","large","extra-large"],l=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_up","arrows_left_right","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_last","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clock","close","cloud_co2","coins","collaborate","computer_clock","connect","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","folder","form_refresh","framerate","fullscreen","gift","go","graduation_hat","graph","grid","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_cloud","link_on","list_view","locked","location","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{l as ICONS,i as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
+const e={backgroundSize:{"extra-small":"16px",small:"24px",medium:"32px",large:"40px","extra-large":"56px"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--sizing250)",medium:"var(--sizing300)",large:"var(--sizing400)","extra-large":"var(--sizing600)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],i=["small","medium","large","extra-large"],l=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_last","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clock","close","cloud_co2","coins","collaborate","computer_clock","connect","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","folder","form_refresh","framerate","fullscreen","gift","go","graduation_hat","graph","grid","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{l as ICONS,i as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};

package/esm/components/icon/icon-type.d.ts

@@ -1 +1 @@
-export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_first" | "chevron_last" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_hover" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "hierarchy" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "placeholder" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "true_tick" | "u_turn_left" | "u_turn_right" | "underline" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";
+export type IconType = "accessibility_web" | "add" | "admin" | "airplay" | "alert" | "alert_on" | "analysis" | "app_facebook" | "app_instagram" | "app_tiktok" | "app_twitter" | "app_youtube" | "apps" | "arrow" | "arrow_bottom_right_circle" | "arrow_down" | "arrow_left" | "arrow_left_boxed" | "arrow_left_right_small" | "arrow_left_small" | "arrow_right" | "arrow_right_small" | "arrow_top_left_circle" | "arrow_up" | "arrows_left_right" | "at_sign" | "attach" | "bank" | "bank_with_card" | "basket" | "basket_with_squares" | "batch" | "bed" | "bill_paid" | "bill_unpaid" | "bin" | "biometric" | "blocked" | "blocked_square" | "block_arrow_right" | "bold" | "box_arrow_left" | "box_arrow_right" | "boxed_shapes" | "bulk_destroy" | "bullet_list" | "bullet_list_dotted" | "bullet_list_numbers" | "business" | "calendar" | "calendar_pay_date" | "calendar_today" | "call" | "camera" | "car_lock" | "car_money" | "car_repair" | "card_wallet" | "card_view" | "caret_down" | "caret_left" | "caret_right" | "caret_up" | "caret_large_down" | "caret_large_left" | "caret_large_right" | "caret_large_up" | "cart" | "cash" | "chat" | "chart_bar" | "chart_line" | "chart_pie" | "chat_notes" | "check_all" | "check_none" | "chevron_down" | "chevron_first" | "chevron_last" | "chevron_left" | "chevron_right" | "chevron_up" | "chevron_down_thick" | "chevron_left_thick" | "chevron_right_thick" | "chevron_up_thick" | "chromecast" | "circle_with_dots" | "circles_connection" | "clock" | "close" | "cloud_co2" | "coins" | "collaborate" | "computer_clock" | "connect" | "connect_off" | "construction" | "contacts" | "contact_card" | "copy" | "create" | "credit_card" | "credit_card_slash" | "cross" | "cross_circle" | "csv" | "dashboard" | "delete" | "delivery" | "disputed" | "disconnect" | "document_right_align" | "document_tick" | "document_vertical_lines" | "download" | "drag" | "drag_hover" | "drag_vertical" | "draft" | "drill" | "dropdown" | "duplicate" | "edit" | "edited" | "email" | "email_switch" | "entry" | "envelope_dollar" | "envelope_euro" | "ellipsis_horizontal" | "ellipsis_vertical" | "error" | "error_square" | "euro" | "expand" | "export" | "factory" | "favourite" | "favourite_lined" | "fax" | "feedback" | "file_excel" | "file_generic" | "file_image" | "file_pdf" | "file_word" | "files_leaning" | "filter" | "filter_new" | "fit_height" | "fit_width" | "flag" | "folder" | "form_refresh" | "framerate" | "fullscreen" | "gift" | "go" | "graduation_hat" | "graph" | "grid" | "hand_cash_coins" | "hand_cash_note" | "heart_pulse" | "help" | "hide" | "hierarchy" | "home" | "image" | "import" | "in_progress" | "in_transit" | "individual" | "info" | "intranet" | "italic" | "job_seeked" | "key" | "laptop" | "leaf" | "ledger" | "ledger_arrow_left" | "ledger_arrow_right" | "like" | "like_no" | "link" | "lightbulb_off" | "lightbulb_on" | "link_card" | "link_cloud" | "link_on" | "list_view" | "locked" | "location" | "logout" | "lookup" | "marker" | "message" | "microphone" | "minimise" | "minus" | "minus_large" | "mobile" | "money_bag" | "mute" | "none" | "normalscreen" | "old_warning" | "page" | "palm_tree" | "pause" | "pause_circle" | "pdf" | "pin" | "people" | "people_switch" | "percentage_boxed" | "person" | "person_info" | "person_tick" | "petrol_pump" | "phone" | "picture_in_picture" | "piggy_bank" | "placeholder" | "plane" | "play" | "play_circle" | "plus" | "plus_large" | "pound" | "print" | "progress" | "progressed" | "protect" | "question" | "question_hollow" | "question_mark" | "recruiting" | "refresh" | "refresh_clock" | "remove" | "replay" | "sage_coin" | "save" | "scan" | "send" | "search" | "services" | "settings" | "settings_old" | "share" | "shield_with_tick" | "shield_with_tick_outline" | "shop" | "sort_down" | "sort_up" | "spanner" | "speaker" | "split" | "split_container" | "squares_nine" | "stacked_boxes" | "stacked_squares" | "stop" | "stop_circle" | "subtitles" | "support_online" | "submitted" | "sync" | "tag" | "talk" | "target" | "target_man" | "theatre_masks" | "three_boxes" | "tick" | "tick_circle" | "tick_thick" | "time_zone" | "true_tick" | "u_turn_left" | "u_turn_right" | "underline" | "undo" | "unlocked" | "upload" | "uploaded" | "video" | "view" | "volume_high" | "volume_low" | "volume_medium" | "volunteering" | "warning" | "website" | "welfare" | "worldwide_location";

package/esm/components/icon/icon-unicodes.d.ts

@@ -179,6 +179,9 @@ declare namespace iconUnicodes {
     export let chevron_first: string;
     export let chevron_last: string;
     export let drag_hover: string;
+    export let at_sign: string;
+    export let link_card: string;
+    export let time_zone: string;
     export let error: string;
     export let warning: string;
     export let tick: string;

package/esm/components/icon/icon-unicodes.js

@@ -1 +1 @@
-function e(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const r={call:"\\e93d",mobile:"\\e932",fax:"\\e925",email:"\\e922",email_switch:"\\e996",marker:"\\e93f"},t={person:"\\e93c",person_info:"\\e994",person_tick:"\\e97b",people:"\\e93b",people_switch:"\\e995",business:"\\e90d",shop:"\\e947",bank:"\\e977"},a={home:"\\e929",dashboard:"\\f007",settings:"\\e91a",search:"\\e92f",feedback:"\\e930",logout:"\\e92e",alert:"\\e90b",alert_on:"\\f001",talk:"\\e95a"},o={calendar:"\\e90e",calendar_today:"\\e970",dropdown:"\\e910",caret_up:"\\e9a8",caret_left:"\\e9a6",caret_right:"\\e9a7",caret_large_down:"\\e9a4",caret_large_up:"\\e9a5",caret_large_left:"\\e9a2",caret_large_right:"\\e9a3",plus:"\\e940",plus_large:"\\e967",minus:"\\e931",minus_large:"\\e968",edit:"\\e93a",edited:"\\e938",favourite:"\\e94f",favourite_lined:"\\e94e",credit_card:"\\e91c",credit_card_slash:"\\e966",save:"\\e926",uploaded:"\\e905",arrow_left_boxed:"\\e988",question:"\\e943",info:"\\e92a",download:"\\e900",upload:"\\e906",share:"\\e946",close:"\\e91e",cross:"\\e91d",cross_circle:"\\e992",filter:"\\e928",refresh:"\\e945",computer_clock:"\\e997",refresh_clock:"\\e986",sync:"\\e944",attach:"\\e937",camera:"\\e90f",image:"\\e93e",folder:"\\e927",help:"\\e951",connect:"\\e955",disconnect:"\\e953",split:"\\e952",filter_new:"\\e954",delivery:"\\e959",chat:"\\e914",chat_notes:"\\e956",bullet_list:"\\e95b",bullet_list_numbers:"\\e989",bullet_list_dotted:"\\e98a",view:"\\e957",hide:"\\e998",video:"\\e95e",play:"\\e95f",pause:"\\e96d",play_circle:"\\e96c",pause_circle:"\\e96b",scan:"\\e96e",lookup:"\\e96f",bold:"\\e98c",italic:"\\e98b",undo:"\\e9aa",box_arrow_left:"\\f006"},i={cart:"\\e90a",basket_with_squares:"\\e975",delete:"\\e90c",print:"\\e942",csv:"\\e94a",pdf:"\\e91f",duplicate:"\\e921",copy:"\\e91b",check_all:"\\f028",check_none:"\\f029"},l={chevron_up:"\\e918",chevron_down:"\\e915",chevron_right:"\\e917",chevron_left:"\\e916",chevron_up_thick:"\\e99d",chevron_down_thick:"\\e99c",chevron_left_thick:"\\e99f",chevron_right_thick:"\\e99e",link:"\\e92d",list_view:"\\e92c",card_view:"\\e94b",sort_down:"\\e948",sort_up:"\\e949",arrow_left:"\\e902",arrow_right:"\\e904",arrow_down:"\\e901",arrow_up:"\\e907",arrow_left_right_small:"\\e964",arrow_left_small:"\\e963",arrow_right_small:"\\e962",block_arrow_right:"\\e97e",drag_vertical:"\\e94d",drag:"\\e94c",fit_height:"\\e909",fit_width:"\\e908",ellipsis_horizontal:"\\e960",ellipsis_vertical:"\\e961",u_turn_left:"\\f004",u_turn_right:"\\f005"},c={error:"\\e923",warning:"\\e924",tick:"\\e950",tick_circle:"\\e993",tick_thick:"\\f003",draft:"\\e939",progressed:"\\e903",in_progress:"\\e920",clock:"\\e919",locked:"\\e935",unlocked:"\\e936",gift:"\\e941",blocked:"\\e933",key:"\\e92b",chart_line:"\\e912",chart_pie:"\\e913",chart_bar:"\\e911",blocked_square:"\\e934",disputed:"\\e958",lightbulb_on:"\\e95d",lightbulb_off:"\\e95c"},_={boxed_shapes:"\\e982",circles_connection:"\\e979",document_right_align:"\\e981",document_tick:"\\e980",document_vertical_lines:"\\e978",error_square:"\\e97f",factory:"\\e976",files_leaning:"\\e97a",ledger:"\\e973",ledger_arrow_left:"\\e971",ledger_arrow_right:"\\e972",money_bag:"\\e974",spanner:"\\e984",split_container:"\\e987",stacked_boxes:"\\e97c",tag:"\\e985",three_boxes:"\\e97d",circle_with_dots:"\\e965",squares_nine:"\\e969",coins:"\\e96a",file_generic:"\\e991",file_pdf:"\\e990",file_excel:"\\e98e",file_word:"\\e98f",file_image:"\\e98d",euro:"\\e9a0",pound:"\\e9a1",stacked_squares:"\\e983",expand:"\\e99b",flag:"\\e999",placeholder:"\\e99a",envelope_dollar:"\\e9ab",envelope_euro:"\\e9a9",sage_coin:"\\e9ac",palm_tree:"\\f002",arrow_bottom_right_circle:"\\f014",arrow_top_left_circle:"\\f017",arrows_left_right:"\\f027",bank_with_card:"\\f019",bed:"\\f010",car_lock:"\\f021",car_money:"\\f011",car_repair:"\\f022",cash:"\\f020",construction:"\\f008",drill:"\\f015",form_refresh:"\\f018",graduation_hat:"\\f013",hand_cash_coins:"\\f009",hand_cash_note:"\\f024",laptop:"\\f012",percentage_boxed:"\\f016",petrol_pump:"\\f026",plane:"\\f025",theatre_masks:"\\f023",accessibility_web:"\\f045",app_facebook:"\\f052",app_instagram:"\\f046",app_tiktok:"\\f035",app_twitter:"\\f041",app_youtube:"\\f047",apps:"\\f040",bill_paid:"\\f049",bill_unpaid:"\\f063",box_arrow_right:"\\f057",calendar_pay_date:"\\f038",card_wallet:"\\f030",connect_off:"\\f053",heart_pulse:"\\f031",intranet:"\\f048",job_seeked:"\\f037",like:"\\f056",link_cloud:"\\f036",link_on:"\\f043",microphone:"\\f054",protect:"\\f044",recruiting:"\\f033",send:"\\f055",support_online:"\\f032",target_man:"\\f050",target:"\\f042",volunteering:"\\f039",website:"\\f051",welfare:"\\f034",contact_card:"\\f059",cloud_co2:"\\f060",leaf:"\\f061",like_no:"\\f058",minimise:"\\f062",pin:"\\f064",biometric:"\\f067",import:"\\f066",export:"\\f065",shield_with_tick:"\\f070",shield_with_tick_outline:"\\f071",stop:"\\f068",stop_circle:"\\f069",worldwide_location:"\\f072",airplay:"\\f073",batch:"\\f074",chromecast:"\\f075",framerate:"\\f076",fullscreen:"\\f077",mute:"\\f078",normalscreen:"\\f079",page:"\\f080",picture_in_picture:"\\f081",replay:"\\f082",speaker:"\\f083",subtitles:"\\f084",volume_high:"\\f087",volume_low:"\\f085",volume_medium:"\\f086",hierarchy:"\\f088",underline:"\\f089",chevron_first:"\\f090",chevron_last:"\\f091",drag_hover:"\\f092"},n=(f=function(r){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{},o=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),o.forEach((function(t){e(r,t,a[t])}))}return r}({},r,t,a,o,i,l,c,_,{add:o.plus,create:o.plus,services:o.plus,admin:o.favourite,analysis:c.chart_line,graph:c.chart_line,basket:i.cart,bin:i.delete,bulk_destroy:i.delete,caret_down:o.dropdown,collaborate:o.share,contacts:t.people,entry:l.list_view,go:c.progressed,submitted:c.progressed,grid:o.split,individual:t.person,location:r.marker,message:r.email,old_warning:c.warning,phone:r.call,piggy_bank:o.save,question_hollow:o.video,question_mark:o.question,remove:o.minus,settings_old:a.settings,true_tick:c.tick,arrow:l.arrow_right,in_transit:l.arrow_left_right_small,progress:_.circle_with_dots}),s=null!=(s={none:""})?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(s)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(s)).forEach((function(e){Object.defineProperty(f,e,Object.getOwnPropertyDescriptor(s,e))})),f);var f,s;export{n as default};
+function e(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const r={call:"\\e93d",mobile:"\\e932",fax:"\\e925",email:"\\e922",email_switch:"\\e996",marker:"\\e93f"},t={person:"\\e93c",person_info:"\\e994",person_tick:"\\e97b",people:"\\e93b",people_switch:"\\e995",business:"\\e90d",shop:"\\e947",bank:"\\e977"},a={home:"\\e929",dashboard:"\\f007",settings:"\\e91a",search:"\\e92f",feedback:"\\e930",logout:"\\e92e",alert:"\\e90b",alert_on:"\\f001",talk:"\\e95a"},o={calendar:"\\e90e",calendar_today:"\\e970",dropdown:"\\e910",caret_up:"\\e9a8",caret_left:"\\e9a6",caret_right:"\\e9a7",caret_large_down:"\\e9a4",caret_large_up:"\\e9a5",caret_large_left:"\\e9a2",caret_large_right:"\\e9a3",plus:"\\e940",plus_large:"\\e967",minus:"\\e931",minus_large:"\\e968",edit:"\\e93a",edited:"\\e938",favourite:"\\e94f",favourite_lined:"\\e94e",credit_card:"\\e91c",credit_card_slash:"\\e966",save:"\\e926",uploaded:"\\e905",arrow_left_boxed:"\\e988",question:"\\e943",info:"\\e92a",download:"\\e900",upload:"\\e906",share:"\\e946",close:"\\e91e",cross:"\\e91d",cross_circle:"\\e992",filter:"\\e928",refresh:"\\e945",computer_clock:"\\e997",refresh_clock:"\\e986",sync:"\\e944",attach:"\\e937",camera:"\\e90f",image:"\\e93e",folder:"\\e927",help:"\\e951",connect:"\\e955",disconnect:"\\e953",split:"\\e952",filter_new:"\\e954",delivery:"\\e959",chat:"\\e914",chat_notes:"\\e956",bullet_list:"\\e95b",bullet_list_numbers:"\\e989",bullet_list_dotted:"\\e98a",view:"\\e957",hide:"\\e998",video:"\\e95e",play:"\\e95f",pause:"\\e96d",play_circle:"\\e96c",pause_circle:"\\e96b",scan:"\\e96e",lookup:"\\e96f",bold:"\\e98c",italic:"\\e98b",undo:"\\e9aa",box_arrow_left:"\\f006"},i={cart:"\\e90a",basket_with_squares:"\\e975",delete:"\\e90c",print:"\\e942",csv:"\\e94a",pdf:"\\e91f",duplicate:"\\e921",copy:"\\e91b",check_all:"\\f028",check_none:"\\f029"},l={chevron_up:"\\e918",chevron_down:"\\e915",chevron_right:"\\e917",chevron_left:"\\e916",chevron_up_thick:"\\e99d",chevron_down_thick:"\\e99c",chevron_left_thick:"\\e99f",chevron_right_thick:"\\e99e",link:"\\e92d",list_view:"\\e92c",card_view:"\\e94b",sort_down:"\\e948",sort_up:"\\e949",arrow_left:"\\e902",arrow_right:"\\e904",arrow_down:"\\e901",arrow_up:"\\e907",arrow_left_right_small:"\\e964",arrow_left_small:"\\e963",arrow_right_small:"\\e962",block_arrow_right:"\\e97e",drag_vertical:"\\e94d",drag:"\\e94c",fit_height:"\\e909",fit_width:"\\e908",ellipsis_horizontal:"\\e960",ellipsis_vertical:"\\e961",u_turn_left:"\\f004",u_turn_right:"\\f005"},c={error:"\\e923",warning:"\\e924",tick:"\\e950",tick_circle:"\\e993",tick_thick:"\\f003",draft:"\\e939",progressed:"\\e903",in_progress:"\\e920",clock:"\\e919",locked:"\\e935",unlocked:"\\e936",gift:"\\e941",blocked:"\\e933",key:"\\e92b",chart_line:"\\e912",chart_pie:"\\e913",chart_bar:"\\e911",blocked_square:"\\e934",disputed:"\\e958",lightbulb_on:"\\e95d",lightbulb_off:"\\e95c"},_={boxed_shapes:"\\e982",circles_connection:"\\e979",document_right_align:"\\e981",document_tick:"\\e980",document_vertical_lines:"\\e978",error_square:"\\e97f",factory:"\\e976",files_leaning:"\\e97a",ledger:"\\e973",ledger_arrow_left:"\\e971",ledger_arrow_right:"\\e972",money_bag:"\\e974",spanner:"\\e984",split_container:"\\e987",stacked_boxes:"\\e97c",tag:"\\e985",three_boxes:"\\e97d",circle_with_dots:"\\e965",squares_nine:"\\e969",coins:"\\e96a",file_generic:"\\e991",file_pdf:"\\e990",file_excel:"\\e98e",file_word:"\\e98f",file_image:"\\e98d",euro:"\\e9a0",pound:"\\e9a1",stacked_squares:"\\e983",expand:"\\e99b",flag:"\\e999",placeholder:"\\e99a",envelope_dollar:"\\e9ab",envelope_euro:"\\e9a9",sage_coin:"\\e9ac",palm_tree:"\\f002",arrow_bottom_right_circle:"\\f014",arrow_top_left_circle:"\\f017",arrows_left_right:"\\f027",bank_with_card:"\\f019",bed:"\\f010",car_lock:"\\f021",car_money:"\\f011",car_repair:"\\f022",cash:"\\f020",construction:"\\f008",drill:"\\f015",form_refresh:"\\f018",graduation_hat:"\\f013",hand_cash_coins:"\\f009",hand_cash_note:"\\f024",laptop:"\\f012",percentage_boxed:"\\f016",petrol_pump:"\\f026",plane:"\\f025",theatre_masks:"\\f023",accessibility_web:"\\f045",app_facebook:"\\f052",app_instagram:"\\f046",app_tiktok:"\\f035",app_twitter:"\\f041",app_youtube:"\\f047",apps:"\\f040",bill_paid:"\\f049",bill_unpaid:"\\f063",box_arrow_right:"\\f057",calendar_pay_date:"\\f038",card_wallet:"\\f030",connect_off:"\\f053",heart_pulse:"\\f031",intranet:"\\f048",job_seeked:"\\f037",like:"\\f056",link_cloud:"\\f036",link_on:"\\f043",microphone:"\\f054",protect:"\\f044",recruiting:"\\f033",send:"\\f055",support_online:"\\f032",target_man:"\\f050",target:"\\f042",volunteering:"\\f039",website:"\\f051",welfare:"\\f034",contact_card:"\\f059",cloud_co2:"\\f060",leaf:"\\f061",like_no:"\\f058",minimise:"\\f062",pin:"\\f064",biometric:"\\f067",import:"\\f066",export:"\\f065",shield_with_tick:"\\f070",shield_with_tick_outline:"\\f071",stop:"\\f068",stop_circle:"\\f069",worldwide_location:"\\f072",airplay:"\\f073",batch:"\\f074",chromecast:"\\f075",framerate:"\\f076",fullscreen:"\\f077",mute:"\\f078",normalscreen:"\\f079",page:"\\f080",picture_in_picture:"\\f081",replay:"\\f082",speaker:"\\f083",subtitles:"\\f084",volume_high:"\\f087",volume_low:"\\f085",volume_medium:"\\f086",hierarchy:"\\f088",underline:"\\f089",chevron_first:"\\f090",chevron_last:"\\f091",drag_hover:"\\f092",at_sign:"\\f093",link_card:"\\f094",time_zone:"\\f095"},n=(f=function(r){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{},o=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),o.forEach((function(t){e(r,t,a[t])}))}return r}({},r,t,a,o,i,l,c,_,{add:o.plus,create:o.plus,services:o.plus,admin:o.favourite,analysis:c.chart_line,graph:c.chart_line,basket:i.cart,bin:i.delete,bulk_destroy:i.delete,caret_down:o.dropdown,collaborate:o.share,contacts:t.people,entry:l.list_view,go:c.progressed,submitted:c.progressed,grid:o.split,individual:t.person,location:r.marker,message:r.email,old_warning:c.warning,phone:r.call,piggy_bank:o.save,question_hollow:o.video,question_mark:o.question,remove:o.minus,settings_old:a.settings,true_tick:c.tick,arrow:l.arrow_right,in_transit:l.arrow_left_right_small,progress:_.circle_with_dots}),s=null!=(s={none:""})?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(s)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(s)).forEach((function(e){Object.defineProperty(f,e,Object.getOwnPropertyDescriptor(s,e))})),f);var f,s;export{n as default};

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};