carbon-react 158.25.2 → 158.26.1

package/README.md

@@ -51,4 +51,4 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
 
 Carbon is licensed under the [Apache-2.0 licence](LICENSE).
 
-Copyright (c) 2018-2025 Sage Group Plc. All rights reserved.
+Copyright (c) 2018-2026 Sage Group Plc. All rights reserved.

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as l,useEffect as a}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as f}from"../keyboard-navigation/index.js";import b from"./submenu.context.js";import y from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as h,SCROLLABLE_BLOCK as v,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import S from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as j}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(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){x(e,t,n[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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const A=n.forwardRef(((n,x)=>{var{children:A,className:_,title:T,icon:k,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:E=!0,clickToOpen:F,href:M,maxWidth:q,asPassiveItem:W,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=n,$=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[B,U]=r(null),z=o(y()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,te]=r(null),[ne,re]=r([]),[oe,ie]=r(""),[ue,le]=r(!1),[ae,se]=r(!1),ce=ne.length,{submenuMaxHeight:me}=i(S),pe=w(R),de=u((()=>{const e=null==B?void 0:B.querySelectorAll(h);if(e&&Y&&ce){const t=Array.from(e),n=null==B?void 0:B.querySelector(`[data-component='${v}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,ce,B]),fe=o(null),be=l((()=>{fe.current=setTimeout((()=>{ie("")}),1500)}),[]),ye=l((()=>{fe.current&&clearTimeout(fe.current),be()}),[be]);a((()=>()=>{fe.current&&clearTimeout(fe.current)}),[]);const he=l((()=>{Z(!0),Q(z.current)}),[Q]),ve=o();a((()=>{Y&&B&&(()=>{var e;if(!B)return;const t=Array.from(B.querySelectorAll("[data-component='menu-item']")||[]),n=t.length>0?t[t.length-1]:null;ve.current=null!=n?n:void 0,B.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(B.querySelectorAll("ul:not([data-component='submenu'])")||[]);if(0===r.length)return le(!1),void se(!1);const o=r[r.length-1],i=(null==o||null===(e=o.parentElement)||void 0===e?void 0:e.dataset.component)===v,u=Array.from(o.querySelectorAll("[data-component='menu-item']")||[]),l=u.length>0?u[u.length-1]:null;let a=!1;l&&o&&(a=l.getBoundingClientRect().bottom<o.getBoundingClientRect().bottom);const s=!!l&&!!n&&l===n;le(s),se(s&&!i||s&&i&&!a)})()}),[Y,B,ce]),a((()=>{Y&&pe&&pe()}),[Y,pe]);const ge=l((()=>{Z(!1),te(null),V&&V(),ie("")}),[V]);a((()=>{J&&J!==z.current&&ge()}),[J,ge]);const Oe=l((e=>ne.findIndex((t=>t===e))),[ne]),we=l((e=>{const t=p.isEnterKey(e)||p.isSpaceKey(e);if(!t&&!p.isDownKey(e)||Y||(e.preventDefault(),he()),Y){const n=Oe(ee);let r=n;if(ee||((t&&!M||p.isSpaceKey(e)&&M)&&(e.preventDefault(),ge()),p.isShiftKey(e)&&p.isTabKey(e)&&ge()),p.isDownKey(e)&&(e.preventDefault(),r<ce-1&&(r+=1)),p.isUpKey(e)&&(e.preventDefault(),le(!1),r>0&&(r-=1)),p.isEscKey(e))return null==K||K(e),void ge();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ce-1),1===e.key.length?(e.stopPropagation(),fe.current?ye():be(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||p.isEnterKey(e)&&setTimeout((()=>ge()),0),r!==n&&te(ne[r])}}),[ne,Y,M,ce,ee,Oe,he,ge,K,oe,ye,be]);return a((()=>{if(B&&A){const e=null==B?void 0:B.querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(j))).map((e=>e.getAttribute("id"))))}}),[A,Y,B]),a((()=>{const e=null==B?void 0:B.querySelectorAll(O);if(e&&""!==oe){const t=Array.from(e),n=f(oe,t);n&&te(n.id)}}),[B,oe,ne]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:W,menuType:X,children:[t(s,P(D({},$),{onClick:W?void 0:H,className:_,menuType:X,ref:x,href:M,menuItemVariant:C,inFullscreenView:G,asDiv:W,children:T})),t(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:ae,children:t(b.Provider,{value:{handleKeyDown:we,blockIndex:de,updateFocusId:te},children:A})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:F?void 0:()=>he(),onMouseLeave:()=>ge(),isSubmenuOpen:Y,ref:U,children:[t(s,P(D({},$),{className:_,menuType:X,ref:x,icon:k,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:E,onKeyDown:we,onClick:e=>{he(),H&&H(e)},clickToOpen:F,href:M,maxWidth:q,"aria-expanded":Y,"data-role":"submenu-parent-item",children:T})),Y&&t(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===de?"presentation":"list",maxHeight:me,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:ae,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ge()},children:t(b.Provider,{value:{submenuFocusId:ee,handleKeyDown:we,blockIndex:de,updateFocusId:te,submenuHasMaxWidth:!!L},children:A})})]})}));A.displayName="submenu";export{A as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useContext as i,useMemo as u,useCallback as l,useEffect as a}from"react";import s from"../../menu-item/menu-item.style.js";import{StyledSubmenuWrapper as c,StyledSubmenu as m}from"./submenu.style.js";import p from"../../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as d}from"../strict-menu.context.js";import{characterNavigation as b}from"../keyboard-navigation/index.js";import f from"./submenu.context.js";import y from"../../../../__internal__/utils/helpers/guid/index.js";import{BLOCK_INDEX_SELECTOR as h,SCROLLABLE_BLOCK as v,SCROLLABLE_BLOCK_PARENT as g,ALL_CHILDREN_SELECTOR as O}from"../locators.js";import{useStableCallback as w}from"../../../../hooks/__internal__/useStableCallback/useStableCallback.js";import S from"../../../navigation-bar/__internal__/fixed-navigation-bar.context.js";import{defaultFocusableSelectors as j}from"../../../../__internal__/focus-trap/focus-trap-utils.js";function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(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){x(e,t,n[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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const A=n.forwardRef(((n,x)=>{var{children:A,className:_,title:T,icon:k,submenuDirection:I="right",onKeyDown:K,variant:C="default",showDropdownArrow:E=!0,clickToOpen:F,href:M,maxWidth:q,asPassiveItem:W,onSubmenuOpen:R,onSubmenuClose:V,onClick:H,submenuMaxWidth:L,submenuMinWidth:N}=n,$=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[B,U]=r(null),z=o(y()),{inFullscreenView:G,openSubmenuId:J,setOpenSubmenuId:Q,menuType:X}=d(),[Y,Z]=r(!1),[ee,te]=r(null),[ne,re]=r([]),[oe,ie]=r(""),[ue,le]=r(!1),[ae,se]=r(!1),ce=ne.length,{submenuMaxHeight:me}=i(S),pe=w(R),de=u((()=>{const e=null==B?void 0:B.querySelectorAll(h);if(e&&Y&&ce){const t=Array.from(e),n=null==B?void 0:B.querySelector(`[data-component='${v}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${g}']`))?r+1:r}return-1}),[Y,ce,B]),be=o(null),fe=l((()=>{be.current=setTimeout((()=>{ie("")}),1500)}),[]),ye=l((()=>{be.current&&clearTimeout(be.current),fe()}),[fe]);a((()=>()=>{be.current&&clearTimeout(be.current)}),[]);const he=l((()=>{Z(!0),Q(z.current)}),[Q]),ve=o();a((()=>{Y&&B&&(()=>{var e;if(!B)return;const t=Array.from(B.querySelectorAll("[data-component='menu-item']")||[]),n=t.length>0?t[t.length-1]:null;ve.current=null!=n?n:void 0,B.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(B.querySelectorAll("ul:not([data-component='submenu'])")||[]);if(0===r.length)return le(!1),void se(!1);const o=r[r.length-1],i=(null==o||null===(e=o.parentElement)||void 0===e?void 0:e.dataset.component)===v,u=Array.from(o.querySelectorAll("[data-component='menu-item']")||[]),l=u.length>0?u[u.length-1]:null;let a=!1;l&&o&&(a=l.getBoundingClientRect().bottom<o.getBoundingClientRect().bottom);const s=!!l&&!!n&&l===n;le(s),se(s&&!i||s&&i&&!a)})()}),[Y,B,ce]),a((()=>{Y&&pe&&pe()}),[Y,pe]);const ge=l((()=>{Z(!1),te(null),V&&V(),ie("")}),[V]);a((()=>{J&&J!==z.current&&ge()}),[J,ge]);const Oe=l((e=>ne.findIndex((t=>t===e))),[ne]),we=l((e=>{const t=p.isEnterKey(e)||p.isSpaceKey(e);if(!t&&!p.isDownKey(e)||Y||(e.preventDefault(),he()),Y){const n=Oe(ee);let r=n;if(ee||((t&&!M||p.isSpaceKey(e)&&M)&&(e.preventDefault(),ge()),p.isShiftKey(e)&&p.isTabKey(e)&&ge()),p.isDownKey(e)&&(e.preventDefault(),r<ce-1&&(r+=1)),p.isUpKey(e)&&(e.preventDefault(),le(!1),r>0&&(r-=1)),p.isEscKey(e))return null==K||K(e),void ge();p.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),p.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ce-1),1===e.key.length?(e.stopPropagation(),be.current?ye():fe(),ie(`${oe}${e.key.toLowerCase()}`)):ie(""),p.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||p.isEnterKey(e)&&setTimeout((()=>ge()),0),r!==n&&te(ne[r])}}),[ne,Y,M,ce,ee,Oe,he,ge,K,oe,ye,fe]);return a((()=>{if(B&&A){const e=null==B?void 0:B.querySelectorAll(O);e&&re(Array.from(e).filter((e=>e.querySelector(j))).map((e=>e.getAttribute("id"))))}}),[A,Y,B]),a((()=>{const e=null==B?void 0:B.querySelectorAll(O);if(e&&""!==oe){const t=Array.from(e),n=b(oe,t);n&&te(n.id)}}),[B,oe,ne]),e(c,G?{"data-component":"submenu-wrapper",inFullscreenView:G,asPassiveItem:W,menuType:X,children:[t(s,P(D({},$),{onClick:W?void 0:H,className:_,menuType:X,ref:x,href:M,menuItemVariant:C,inFullscreenView:G,asDiv:W,children:T})),t(m,{"data-component":"submenu",variant:C,menuType:X,inFullscreenView:G,ref:U,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:ae,children:t(f.Provider,{value:{handleKeyDown:we,blockIndex:de,updateFocusId:te},children:A})})]}:{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:F?void 0:()=>he(),onMouseLeave:()=>ge(),isSubmenuOpen:Y,ref:U,children:[t(s,P(D({},$),{className:_,menuType:X,ref:x,icon:k,tabIndex:-1,menuItemVariant:C,isOpen:Y,hasSubmenu:!0,showDropdownArrow:E,onKeyDown:we,onClick:e=>{he(),H&&H(e)},clickToOpen:F,href:M,maxWidth:q,"aria-expanded":Y,"data-role":"submenu-parent-item",children:T})),Y&&t(m,{"data-component":"submenu",submenuDirection:I,variant:C,menuType:X,role:0===de?"presentation":"list",maxHeight:me,applyFocusRadiusStyling:ue,applyFocusRadiusStylingToLastItem:ae,submenuMaxWidth:L,submenuMinWidth:N,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ge()},children:t(f.Provider,{value:{submenuFocusId:ee,handleKeyDown:we,blockIndex:de,updateFocusId:te,submenuHasMaxWidth:!!L,closeSubmenu:ge},children:A})})]})}));A.displayName="submenu";export{A as default};

package/esm/components/menu/__internal__/submenu/submenu.context.d.ts

@@ -5,6 +5,7 @@ export interface SubmenuContextProps {
     handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     blockIndex?: number;
     submenuHasMaxWidth?: boolean;
+    closeSubmenu?: () => void;
 }
 declare const SubmenuContext: React.Context<SubmenuContextProps>;
 export default SubmenuContext;

package/esm/components/menu/menu-item/menu-item.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import n,{forwardRef as t,useRef as r,useContext as o,useState as i,useLayoutEffect as u,useEffect as l,useImperativeHandle as s}from"react";import a from"invariant";import{defaultFocusableSelectors as c}from"../../../__internal__/focus-trap/focus-trap-utils.js";import m from"../../../style/utils/filter-styled-system-padding-props.js";import d from"./menu-item.style.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as b}from"../__internal__/strict-menu.context.js";import f from"../__internal__/submenu/submenu.component.js";import h from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as y}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as v}from"../menu.style.js";import O from"../../../__internal__/utils/helpers/guid/index.js";function g(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){g(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const _=t(((t,g)=>{var{submenu:_,submenuMaxWidth:x,submenuMinWidth:S,children:P,href:D,onClick:k,target:I,submenuDirection:W="right",icon:C,selected:F,onKeyDown:M,variant:T="default",showDropdownArrow:V=!0,ariaLabel:E,clickToOpen:L,maxWidth:K,onSubmenuOpen:A,onSubmenuClose:q,overrideColor:H,rel:N,as:Y,"data-element":z,"data-role":B}=t,G=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);a(C||P,"Either prop `icon` must be defined or this node must have `children`."),a(P||E||_||"string"==typeof _&&_.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),a("boolean"==typeof _||void 0===_||n.isValidElement(_)||P&&"string"==typeof _&&_.length,"You should not pass `children` when `submenu` is an empty string");const J=r(O()),{isChildOfSegment:Q,overriddenVariant:R}=o(y),{inFullscreenView:U,registerItem:X,unregisterItem:Z,focusId:$,updateFocusId:ee,menuType:ne}=b(),te=o(h),re=Object.keys(te).length>0,{submenuFocusId:oe,updateFocusId:ie,handleKeyDown:ue,submenuHasMaxWidth:le}=te,se=$===J.current,ae=oe?oe===J.current:void 0,[ce,me]=i(null),[de,pe]=i(null);u((()=>{var e;const n=null!==(e=null==ce?void 0:ce.querySelector(c))&&void 0!==e?e:null;n!==de&&pe(n)}),[de,ce]),l((()=>{const e=J.current;return X&&X(e),()=>{Z&&Z(e)}}),[X,Z]),l((()=>{if(se&&!ae||ae){if(de)return void de.focus();null==ce||ce.focus()}}),[de,se,ae,ce]),s(g,(()=>({focus(){null==ce||ce.focus()}})),[ce]);const be=e=>{re?(e.stopPropagation(),null==ie||ie(J.current)):null==ee||ee(J.current)},fe={className:D||k?"carbon-menu-item--has-link":"",href:de?void 0:D,onClick:de?void 0:k,target:I,rel:N,icon:C,removeAriaLabelOnIcon:!0,selected:F,onKeyDown:U?void 0:e=>{null==M||M(e),p.isEscKey(e)&&(null==ce||ce.focus()),null==ue||ue(e)},overrideColor:H,ref:me};"alternate"===R&&Q&&"alternate"===T&&["white","black"].includes(ne)&&(fe.overrideColor=!0);const he=e=>K&&"string"==typeof e?e:void 0,ye=U?void 0:K,ve=!(k||D||de);if(_)return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,title:he(_),maxWidth:ye},G),{inFullscreenView:U,id:J.current,as:Y,onFocus:be,children:e(f,w(j(w(j(w(j({},"boolean"!=typeof _&&{title:_}),{submenuDirection:W,showDropdownArrow:V,clickToOpen:L,maxWidth:K,asPassiveItem:ve,ariaLabel:E,onSubmenuOpen:A,onSubmenuClose:q,submenuMaxWidth:x,submenuMinWidth:S}),fe),{variant:T}),G),{children:P}))}));const Oe=m(G),ge=!!(null==ce?void 0:ce.querySelector("[data-element='input']"));return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,inSubmenu:re,title:he(P),maxWidth:ye},G),{inFullscreenView:U&&!Object.keys(te).length,id:J.current,as:Y,onFocus:be,children:e(d,w(j(w(j({menuType:ne,"data-role":"menu-item-wrapper"},fe),{menuItemVariant:T,ariaLabel:E,maxWidth:le?void 0:ye,inFullscreenView:U,asPassiveItem:ve}),Oe),{asDiv:ge||"div"===Y,hasFocusableChild:!!de,hasInput:ge,inSubmenu:re,children:P}))}))}));export{_ as MenuItem,_ as default};
+import{jsx as e}from"react/jsx-runtime";import n,{forwardRef as t,useRef as r,useContext as o,useState as i,useLayoutEffect as u,useEffect as l,useImperativeHandle as s}from"react";import a from"invariant";import{defaultFocusableSelectors as c}from"../../../__internal__/focus-trap/focus-trap-utils.js";import m from"../../../style/utils/filter-styled-system-padding-props.js";import d from"./menu-item.style.js";import p from"../../../__internal__/utils/helpers/events/events.js";import{useStrictMenuContext as b}from"../__internal__/strict-menu.context.js";import f from"../__internal__/submenu/submenu.component.js";import h from"../__internal__/submenu/submenu.context.js";import{MenuSegmentContext as y}from"../menu-segment-title/menu-segment-title.context.js";import{StyledMenuItem as v}from"../menu.style.js";import O from"../../../__internal__/utils/helpers/guid/index.js";function g(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){g(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const _=t(((t,g)=>{var{submenu:_,submenuMaxWidth:x,submenuMinWidth:S,children:P,href:D,onClick:k,target:I,submenuDirection:W="right",icon:C,selected:F,onKeyDown:M,variant:T="default",showDropdownArrow:V=!0,ariaLabel:E,clickToOpen:L,maxWidth:K,onSubmenuOpen:A,onSubmenuClose:q,overrideColor:H,rel:N,as:Y,"data-element":z,"data-role":B}=t,G=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);a(C||P,"Either prop `icon` must be defined or this node must have `children`."),a(P||E||_||"string"==typeof _&&_.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),a("boolean"==typeof _||void 0===_||n.isValidElement(_)||P&&"string"==typeof _&&_.length,"You should not pass `children` when `submenu` is an empty string");const J=r(O()),{isChildOfSegment:Q,overriddenVariant:R}=o(y),{inFullscreenView:U,registerItem:X,unregisterItem:Z,focusId:$,updateFocusId:ee,menuType:ne}=b(),te=o(h),re=Object.keys(te).length>0,{submenuFocusId:oe,updateFocusId:ie,handleKeyDown:ue,submenuHasMaxWidth:le,closeSubmenu:se}=te,ae=$===J.current,ce=oe?oe===J.current:void 0,[me,de]=i(null),[pe,be]=i(null);u((()=>{var e;const n=null!==(e=null==me?void 0:me.querySelector(c))&&void 0!==e?e:null;n!==pe&&be(n)}),[pe,me]),l((()=>{const e=J.current;return X&&X(e),()=>{Z&&Z(e)}}),[X,Z]),l((()=>{if(ae&&!ce||ce){if(pe)return void pe.focus();null==me||me.focus()}}),[pe,ae,ce,me]),s(g,(()=>({focus(){null==me||me.focus()}})),[me]);const fe=e=>{re?(e.stopPropagation(),null==ie||ie(J.current)):null==ee||ee(J.current)},he={className:D||k?"carbon-menu-item--has-link":"",href:pe?void 0:D,onClick:pe||!D&&!k?void 0:e=>{null==k||k(e),null==se||se()},target:I,rel:N,icon:C,removeAriaLabelOnIcon:!0,selected:F,onKeyDown:U?void 0:e=>{null==M||M(e),p.isEscKey(e)&&(null==me||me.focus()),null==ue||ue(e)},overrideColor:H,ref:de};"alternate"===R&&Q&&"alternate"===T&&["white","black"].includes(ne)&&(he.overrideColor=!0);const ye=e=>K&&"string"==typeof e?e:void 0,ve=U?void 0:K,Oe=!(k||D||pe);if(_)return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,title:ye(_),maxWidth:ve},G),{inFullscreenView:U,id:J.current,as:Y,onFocus:fe,children:e(f,w(j(w(j(w(j({},"boolean"!=typeof _&&{title:_}),{submenuDirection:W,showDropdownArrow:V,clickToOpen:L,maxWidth:K,asPassiveItem:Oe,ariaLabel:E,onSubmenuOpen:A,onSubmenuClose:q,submenuMaxWidth:x,submenuMinWidth:S}),he),{variant:T}),G),{children:P}))}));const ge=m(G),je=!!(null==me?void 0:me.querySelector("[data-element='input']"));return e(v,w(j({"data-component":"menu-item","data-element":z,"data-role":B,menuType:ne,inSubmenu:re,title:ye(P),maxWidth:ve},G),{inFullscreenView:U&&!Object.keys(te).length,id:J.current,as:Y,onFocus:fe,children:e(d,w(j(w(j({menuType:ne,"data-role":"menu-item-wrapper"},he),{menuItemVariant:T,ariaLabel:E,maxWidth:le?void 0:ve,inFullscreenView:U,asPassiveItem:Oe}),ge),{asDiv:je||"div"===Y,hasFocusableChild:!!pe,hasInput:je,inSubmenu:re,children:P}))}))}));export{_ as MenuItem,_ 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 }: TabPanelProps) => React.JSX.Element;
-export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
+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 TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<TabsHandle>>;
-export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
+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 i,useEffect as o,useRef as l,useImperativeHandle as a,useCallback as s}from"react";import{TabsProvider as c,useTabs as d}from"./tabs.context.js";import{StyledTabs as b,StyledTab as u,StyledTabListWrapper as f,StyledTabList as h,Spacer as g,StyledTabPanel as p,StyledScrollButton as m,StyledScrollButtonPlaceholder as v}from"./tabs.style.js";import y from"../../../__internal__/utils/logger/index.js";import _ from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import w from"../../../hooks/__internal__/useLocale/useLocale.js";import I from"../../icon/icon.component.js";import{TabProvider as k}from"./tab.context.js";import x from"../../../hooks/__internal__/usePrevious/index.js";const T=({children:t,id:r,tabId:n})=>{const{activeTab:i}=d();return e(k,{tabId:n,visible:n===i,children:e(p,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})};let z=!1;const j=({controls:r,error:n=!1,id:l,label:a,leftSlot:s,rightSlot:c,warning:b=!1,info:f=!1})=>{const h=w(),[g,p]=i(n),[m,v]=i(b),[_,x]=i(f),{activeTab:T,focusIndex:j,orientation:L,setActiveTab:S,setCurrentTabId:A,setFocusIndex:O,size:C,errors:R,warnings:N,infos:B}=d(),E=T===l;o((()=>{E&&A(l)}),[l,E,A]),!s&&!c||"string"==typeof a||z||(y.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),z=!0),o((()=>{if(j===l){const e=document.getElementById(l);null==e||e.focus()}}),[j,l,A]),o((()=>{let e=R[l],t=N[l],r=B[l];if(n&&!e&&(e={static:n}),b&&!t&&(t={static:b}),f&&!r&&(r={static:f}),!e)return void p(!1);const i=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),o=n||i.length>0;if(p(o),!t)return void v(!1);const a=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=b||a.length>0;if(v(s),!r)return void x(!1);const c=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),d=f||c.length>0;x(d)}),[n,l,R,N,b,B,f]);const W=()=>{if(g||m||_){if(g)return e(I,{"data-role":"icon-error",type:"error",ariaLabel:h.tabs.error(),color:"#db004e"});if(m)return e(I,{"data-role":"icon-warning",type:"warning",ariaLabel:h.tabs.warning(),color:"#d64309"});if(_)return e(I,{"data-role":"icon-info",type:"info",ariaLabel:h.tabs.info(),color:"#0060a7ff"})}return null};return e(k,{tabId:l,visible:!0,children:e(u,{activeTab:T===l,"aria-controls":r,"aria-selected":E?"true":"false",error:g,info:_,id:l,onClick:()=>{S(l),O(l)},orientation:L,role:"tab",size:C,type:"button",tabIndex:T===l?0:-1,warning:m,children:t("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[s,a,c,W()]}:{className:"tab-title-content-wrapper",children:[a,W()]})})})},L=n((({ariaLabel:n,children:c,onTabChange:b},u)=>{const p=l(null),{activeTab:y,focusIndex:w,orientation:k,selectedTabId:T,setFocusIndex:z,setActiveTab:j,size:L}=d();a(u,(()=>({focusTab:e=>{var t;const r=null===(t=p.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),z(e),j(e)}})));const S=s((()=>{var e;const t=(null===(e=p.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);o((()=>{if(T)j(T);else if(!y){const e=S()[0];j(e)}}),[y,S,T,j]);const A=x(y);o((()=>{A&&A!==y&&(null==b||b(y))}),[y,b,A]);const[O,C]=i(!1),[R,N]=i(!1),[B,E]=i(!1),W=s((()=>{if(p.current){const e=p.current.scrollWidth-p.current.clientWidth-20;C(e>0),N(p.current.scrollLeft>=20),E(p.current.scrollLeft<=e)}}),[]);_(p,(()=>{W()})),o((()=>{p.current&&W()}),[W]);const q=e=>{p.current&&("left"===e?p.current.scrollLeft-=200:p.current.scrollLeft+=200,W())};return e(r,{children:t(f,{children:["vertical"!==k&&O?R?e(m,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>q("left"),size:L,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(I,{type:"chevron_left"})}):e(v,{size:L}):null,t(h,{"aria-label":n,id:"tablist",onKeyDown:e=>{const t=S(),r=t.indexOf(w||y),n=t.length-1;if(-1===r)return;let i=r;switch(e.key){case"Home":i=0;break;case"End":i=n;break;case"ArrowRight":i=(r+1)%t.length;break;case"ArrowLeft":i=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===k&&(i=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===k&&(i=(r+1)%t.length);break;case"Enter":case" ":return void j(y);default:return}z(t[i])},orientation:k,ref:p,role:"tablist",size:L,tabIndex:-1,children:[c,e(g,{})]}),"vertical"!==k&&O?B?e(m,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>q("right"),size:L,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(I,{type:"chevron_right"})}):e(v,{size:L}):null]})})})),S=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:o="medium"})=>e(c,{labelledBy:r,orientation:n,selectedTabId:i,size:o,children:e(b,{id:"tabs-container",orientation:n,children:t})});export{j as Tab,L as TabList,T as TabPanel,S as Tabs,S as default};
+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 I from"../../../hooks/__internal__/usePrevious/index.js";import k from"../../../__internal__/utils/helpers/tags/tags.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(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){x(e,t,r[t])}))}return e}function T(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:l}=b();return e(_,{tabId:o,visible:o===l,children:e(h,T(S({id:n,role:"tabpanel","aria-labelledby":o},k("tab-panel",i)),{children:r}))})};let L=!1;const A=r=>{var{controls:n,error:l=!1,id:a,label:c,leftSlot:s,rightSlot:u,warning:f=!1,info:p=!1}=r,h=P(r,["controls","error","id","label","leftSlot","rightSlot","warning","info"]);const g=j(),[y,m]=o(l),[O,I]=o(f),[x,z]=o(p),{activeTab:A,focusIndex:C,orientation:D,setActiveTab:E,setCurrentTabId:R,setFocusIndex:B,size:N,errors:W,warnings:q,infos:F}=b(),U=A===a;i((()=>{U&&R(a)}),[a,U,R]),!s&&!u||"string"==typeof c||L||(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."),L=!0),i((()=>{if(C===a){const e=document.getElementById(a);null==e||e.focus()}}),[C,a,R]),i((()=>{let e=W[a],t=q[a],r=F[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 I(!1);const i=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),c=f||i.length>0;if(I(c),!r)return void z(!1);const s=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),b=p||s.length>0;z(b)}),[l,a,W,q,f,F,p]);const G=()=>{if(y||O||x){if(y)return e(w,{"data-role":"icon-error",type:"error",ariaLabel:g.tabs.error(),color:"#db004e"});if(O)return e(w,{"data-role":"icon-warning",type:"warning",ariaLabel:g.tabs.warning(),color:"#d64309"});if(x)return e(w,{"data-role":"icon-info",type:"info",ariaLabel:g.tabs.info(),color:"#0060a7ff"})}return null};return e(_,{tabId:a,visible:!0,children:e(d,T(S({activeTab:A===a,"aria-controls":n,"aria-selected":U?"true":"false",error:y,info:x,id:a,onClick:()=>{E(a),B(a)},orientation:D,role:"tab",size:N,type:"button",tabIndex:A===a?0:-1,warning:O},k("tab",h)),{children:t("span","string"==typeof c?{className:"tab-title-content-wrapper",children:[s,c,u,G()]}:{className:"tab-title-content-wrapper",children:[c,G()]})}))})},C=n(((n,s)=>{var{ariaLabel:u,children:d,onTabChange:h}=n,v=P(n,["ariaLabel","children","onTabChange"]);const j=l(null),{activeTab:_,focusIndex:x,orientation:z,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=I(_);i((()=>{R&&R!==_&&(null==h||h(_))}),[_,h,R]);const[B,N]=o(!1),[W,q]=o(!1),[F,U]=o(!1),G=c((()=>{if(j.current){const e=j.current.scrollWidth-j.current.clientWidth-20;N(e>0),q(j.current.scrollLeft>=20),U(j.current.scrollLeft<=e)}}),[]);O(j,(()=>{G()})),i((()=>{j.current&&G()}),[G]);const H=e=>{j.current&&("left"===e?j.current.scrollLeft-=200:j.current.scrollLeft+=200,G())};return e(r,{children:t(f,{children:["vertical"!==z&&B?W?e(g,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>H("left"),size:D,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(w,{type:"chevron_left"})}):e(y,{size:D}):null,t(p,T(S({"aria-label":u,id:"tablist",onKeyDown:e=>{const t=E(),r=t.indexOf(x||_),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"===z&&(o=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===z&&(o=(r+1)%t.length);break;case"Enter":case" ":return void C(_);default:return}A(t[o])},orientation:z,ref:j,role:"tablist",size:D,tabIndex:-1},k("tab-list",v)),{children:[d,e(m,{})]})),"vertical"!==z&&B?F?e(g,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>H("right"),size:D,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(w,{type:"chevron_right"})}):e(y,{size:D}):null]})})})),D=t=>{var{children:r,labelledBy:n="",orientation:o="horizontal",selectedTabId:i,size:l="medium"}=t,a=P(t,["children","labelledBy","orientation","selectedTabId","size"]);return e(s,{labelledBy:n,orientation:o,selectedTabId:i,size:l,children:e(u,T(S({id:"tabs-container",orientation:o},k("tabs",a)),{children:r}))})};export{A as Tab,C as TabList,z as TabPanel,D as Tabs,D as default};

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

@@ -1,4 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export type TabValidationRecord = Record<string, string | boolean>;
 export type ValidationRecord = Record<string, TabValidationRecord>;
 export interface TabContextProps {
@@ -30,7 +31,7 @@ export interface TabsContextProps {
     infos: ValidationRecord;
     setInfos: (childId: string, tabId: string, info: string | boolean) => void;
 }
-export interface TabPanelProps {
+export interface TabPanelProps extends TagProps {
     /** The content to be shown in the tab panel */
     children?: React.ReactNode;
     /** The ID of the tab panel */
@@ -38,7 +39,7 @@ export interface TabPanelProps {
     /** The ID of the controlling tab */
     tabId: string;
 }
-export interface TabListProps {
+export interface TabListProps extends TagProps {
     /** The label read out when the tab list gains focus */
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
@@ -46,7 +47,7 @@ export interface TabListProps {
     /** A callback for when the active tab is changed */
     onTabChange?: (tabId: string) => void;
 }
-export interface TabProps {
+export interface TabProps extends TagProps {
     /** The tab panel that this tab controls */
     controls: string;
     /** The ID of the tab */
@@ -67,7 +68,7 @@ export interface TabProps {
      * */
     info?: boolean | string;
 }
-export interface TabsProps {
+export interface TabsProps extends TagProps {
     /** The tab list to be rendered within this set of tabs  */
     children?: React.ReactNode;
     /** The label associated with this set of tabs, for assistive technologies */

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),a=require("../strict-menu.context.js"),l=require("../keyboard-navigation/index.js"),o=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),m=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(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){p(e,t,n[t])}))}return e}function y(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const S=f(t).default.forwardRef(((f,p)=>{var{children:S,className:v,title:h,icon:O,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:A,onSubmenuOpen:D,onSubmenuClose:L,onClick:k,submenuMaxWidth:P,submenuMinWidth:q}=f,T=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(f,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=a.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.useStableCallback(D),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,ee,K]),ue=t.useRef(null),ae=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),le=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),ae()}),[ae]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const oe=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;if(!K)return;const t=Array.from(K.querySelectorAll("[data-component='menu-item']")||[]),n=t.length>0?t[t.length-1]:null;ie.current=null!=n?n:void 0,K.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(K.querySelectorAll("ul:not([data-component='submenu'])")||[]);if(0===r.length)return Q(!1),void Z(!1);const u=r[r.length-1],a=(null==u||null===(e=u.parentElement)||void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK,l=Array.from(u.querySelectorAll("[data-component='menu-item']")||[]),o=l.length>0?l[l.length-1]:null;let i=!1;o&&u&&(i=o.getBoundingClientRect().bottom<u.getBoundingClientRect().bottom);const c=!!o&&!!n&&o===n;Q(c),Z(c&&!a||c&&a&&!i)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),L&&L(),G("")}),[L]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)||u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)||N||(e.preventDefault(),oe()),N){const n=ce(V);let r=n;if(V||((t&&!C||u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j||j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.current?le():ae(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||u.default.isEnterKey(e)&&setTimeout((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,oe,se,j,z,le,ae]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(m.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=l.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:A,menuType:B,children:[e.jsx(n.default,y(b({},T),{onClick:A?void 0:k,className:v,menuType:B,ref:p,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:A,children:h})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(o.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>oe(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},T),{className:v,menuType:B,ref:p,icon:O,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{oe(),k&&k(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:h})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:q,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||se()},children:e.jsx(o.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P},children:S})})]})}));S.displayName="submenu",exports.default=S;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../menu-item/menu-item.style.js"),r=require("./submenu.style.js"),u=require("../../../../__internal__/utils/helpers/events/events.js"),a=require("../strict-menu.context.js"),l=require("../keyboard-navigation/index.js"),o=require("./submenu.context.js"),i=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../locators.js"),c=require("../../../../hooks/__internal__/useStableCallback/useStableCallback.js"),d=require("../../../navigation-bar/__internal__/fixed-navigation-bar.context.js"),m=require("../../../../__internal__/focus-trap/focus-trap-utils.js");function f(e){return e&&e.__esModule?e:{default:e}}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(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){p(e,t,n[t])}))}return e}function y(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const S=f(t).default.forwardRef(((f,p)=>{var{children:S,className:v,title:h,icon:O,submenuDirection:g="right",onKeyDown:j,variant:w="default",showDropdownArrow:x=!0,clickToOpen:_,href:C,maxWidth:E,asPassiveItem:A,onSubmenuOpen:D,onSubmenuClose:L,onClick:k,submenuMaxWidth:P,submenuMinWidth:q}=f,T=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(f,["children","className","title","icon","submenuDirection","onKeyDown","variant","showDropdownArrow","clickToOpen","href","maxWidth","asPassiveItem","onSubmenuOpen","onSubmenuClose","onClick","submenuMaxWidth","submenuMinWidth"]);const[K,I]=t.useState(null),R=t.useRef(i.default()),{inFullscreenView:M,openSubmenuId:F,setOpenSubmenuId:W,menuType:B}=a.useStrictMenuContext(),[N,H]=t.useState(!1),[V,$]=t.useState(null),[U,X]=t.useState([]),[z,G]=t.useState(""),[J,Q]=t.useState(!1),[Y,Z]=t.useState(!1),ee=U.length,{submenuMaxHeight:te}=t.useContext(d.default),ne=c.useStableCallback(D),re=t.useMemo((()=>{const e=null==K?void 0:K.querySelectorAll(s.BLOCK_INDEX_SELECTOR);if(e&&N&&ee){const t=Array.from(e),n=null==K?void 0:K.querySelector(`[data-component='${s.SCROLLABLE_BLOCK}']`),r=n?t.indexOf(n):-1;return(null==n?void 0:n.querySelector(`[data-component='${s.SCROLLABLE_BLOCK_PARENT}']`))?r+1:r}return-1}),[N,ee,K]),ue=t.useRef(null),ae=t.useCallback((()=>{ue.current=setTimeout((()=>{G("")}),1500)}),[]),le=t.useCallback((()=>{ue.current&&clearTimeout(ue.current),ae()}),[ae]);t.useEffect((()=>()=>{ue.current&&clearTimeout(ue.current)}),[]);const oe=t.useCallback((()=>{H(!0),W(R.current)}),[W]),ie=t.useRef();t.useEffect((()=>{N&&K&&(()=>{var e;if(!K)return;const t=Array.from(K.querySelectorAll("[data-component='menu-item']")||[]),n=t.length>0?t[t.length-1]:null;ie.current=null!=n?n:void 0,K.querySelectorAll("[data-last-visible-menu-item]").forEach((e=>e.removeAttribute("data-last-visible-menu-item"))),n&&n.setAttribute("data-last-visible-menu-item","true");const r=Array.from(K.querySelectorAll("ul:not([data-component='submenu'])")||[]);if(0===r.length)return Q(!1),void Z(!1);const u=r[r.length-1],a=(null==u||null===(e=u.parentElement)||void 0===e?void 0:e.dataset.component)===s.SCROLLABLE_BLOCK,l=Array.from(u.querySelectorAll("[data-component='menu-item']")||[]),o=l.length>0?l[l.length-1]:null;let i=!1;o&&u&&(i=o.getBoundingClientRect().bottom<u.getBoundingClientRect().bottom);const c=!!o&&!!n&&o===n;Q(c),Z(c&&!a||c&&a&&!i)})()}),[N,K,ee]),t.useEffect((()=>{N&&ne&&ne()}),[N,ne]);const se=t.useCallback((()=>{H(!1),$(null),L&&L(),G("")}),[L]);t.useEffect((()=>{F&&F!==R.current&&se()}),[F,se]);const ce=t.useCallback((e=>U.findIndex((t=>t===e))),[U]),de=t.useCallback((e=>{const t=u.default.isEnterKey(e)||u.default.isSpaceKey(e);if(!t&&!u.default.isDownKey(e)||N||(e.preventDefault(),oe()),N){const n=ce(V);let r=n;if(V||((t&&!C||u.default.isSpaceKey(e)&&C)&&(e.preventDefault(),se()),u.default.isShiftKey(e)&&u.default.isTabKey(e)&&se()),u.default.isDownKey(e)&&(e.preventDefault(),r<ee-1&&(r+=1)),u.default.isUpKey(e)&&(e.preventDefault(),Q(!1),r>0&&(r-=1)),u.default.isEscKey(e))return null==j||j(e),void se();u.default.isHomeKey(e)&&(e.preventDefault(),e.stopPropagation(),r=0),u.default.isEndKey(e)&&(e.preventDefault(),e.stopPropagation(),r=ee-1),1===e.key.length?(e.stopPropagation(),ue.current?le():ae(),G(`${z}${e.key.toLowerCase()}`)):G(""),u.default.composedPath(e.nativeEvent).find((e=>e instanceof HTMLElement&&("input"===e.getAttribute("data-element")||"input-icon-toggle"===e.getAttribute("data-element"))))||u.default.isEnterKey(e)&&setTimeout((()=>se()),0),r!==n&&$(U[r])}}),[U,N,C,ee,V,ce,oe,se,j,z,le,ae]);return t.useEffect((()=>{if(K&&S){const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);e&&X(Array.from(e).filter((e=>e.querySelector(m.defaultFocusableSelectors))).map((e=>e.getAttribute("id"))))}}),[S,N,K]),t.useEffect((()=>{const e=null==K?void 0:K.querySelectorAll(s.ALL_CHILDREN_SELECTOR);if(e&&""!==z){const t=Array.from(e),n=l.characterNavigation(z,t);n&&$(n.id)}}),[K,z,U]),M?e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper",inFullscreenView:M,asPassiveItem:A,menuType:B,children:[e.jsx(n.default,y(b({},T),{onClick:A?void 0:k,className:v,menuType:B,ref:p,href:C,menuItemVariant:w,inFullscreenView:M,asDiv:A,children:h})),e.jsx(r.StyledSubmenu,{"data-component":"submenu",variant:w,menuType:B,inFullscreenView:M,ref:I,applyFocusRadiusStyling:!1,applyFocusRadiusStylingToLastItem:Y,children:e.jsx(o.default.Provider,{value:{handleKeyDown:de,blockIndex:re,updateFocusId:$},children:S})})]}):e.jsxs(r.StyledSubmenuWrapper,{"data-component":"submenu-wrapper","data-role":"submenu-wrapper",onMouseOver:_?void 0:()=>oe(),onMouseLeave:()=>se(),isSubmenuOpen:N,ref:I,children:[e.jsx(n.default,y(b({},T),{className:v,menuType:B,ref:p,icon:O,tabIndex:-1,menuItemVariant:w,isOpen:N,hasSubmenu:!0,showDropdownArrow:x,onKeyDown:de,onClick:e=>{oe(),k&&k(e)},clickToOpen:_,href:C,maxWidth:E,"aria-expanded":N,"data-role":"submenu-parent-item",children:h})),N&&e.jsx(r.StyledSubmenu,{"data-component":"submenu",submenuDirection:g,variant:w,menuType:B,role:0===re?"presentation":"list",maxHeight:te,applyFocusRadiusStyling:J,applyFocusRadiusStylingToLastItem:Y,submenuMaxWidth:P,submenuMinWidth:q,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||se()},children:e.jsx(o.default.Provider,{value:{submenuFocusId:V,handleKeyDown:de,blockIndex:re,updateFocusId:$,submenuHasMaxWidth:!!P,closeSubmenu:se},children:S})})]})}));S.displayName="submenu",exports.default=S;

package/lib/components/menu/__internal__/submenu/submenu.context.d.ts

@@ -5,6 +5,7 @@ export interface SubmenuContextProps {
     handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     blockIndex?: number;
     submenuHasMaxWidth?: boolean;
+    closeSubmenu?: () => void;
 }
 declare const SubmenuContext: React.Context<SubmenuContextProps>;
 export default SubmenuContext;

package/lib/components/menu/menu-item/menu-item.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),o=require("./menu-item.style.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function v(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:I,selected:P,onKeyDown:C,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,clickToOpen:k,maxWidth:W,onSubmenuOpen:F,onSubmenuClose:E,overrideColor:L,rel:T,as:V,"data-element":K,"data-role":A}=n,H=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(I||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const R=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:Y}=t.useContext(c.MenuSegmentContext),{inFullscreenView:z,registerItem:B,unregisterItem:G,focusId:J,updateFocusId:Q,menuType:U}=l.useStrictMenuContext(),X=t.useContext(a.default),Z=Object.keys(X).length>0,{submenuFocusId:$,updateFocusId:ee,handleKeyDown:te,submenuHasMaxWidth:ne}=X,re=J===R.current,ue=$?$===R.current:void 0,[oe,ie]=t.useState(null),[le,se]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==oe?void 0:oe.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==le&&se(t)}),[le,oe]),t.useEffect((()=>{const e=R.current;return B&&B(e),()=>{G&&G(e)}}),[B,G]),t.useEffect((()=>{if(re&&!ue||ue){if(le)return void le.focus();null==oe||oe.focus()}}),[le,re,ue,oe]),t.useImperativeHandle(f,(()=>({focus(){null==oe||oe.focus()}})),[oe]);const ae=e=>{Z?(e.stopPropagation(),null==ee||ee(R.current)):null==Q||Q(R.current)},ce={className:w||x?"carbon-menu-item--has-link":"",href:le?void 0:w,onClick:le?void 0:x,target:_,rel:T,icon:I,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:z?void 0:e=>{null==C||C(e),i.default.isEscKey(e)&&(null==oe||oe.focus()),null==te||te(e)},overrideColor:L,ref:ie};"alternate"===Y&&N&&"alternate"===q&&["white","black"].includes(U)&&(ce.overrideColor=!0);const de=e=>W&&"string"==typeof e?e:void 0,me=z?void 0:W,fe=!(x||w||le);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,title:de(h),maxWidth:me},H),{inFullscreenView:z,id:R.current,as:V,onFocus:ae,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:k,maxWidth:W,asPassiveItem:fe,ariaLabel:M,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:O,submenuMinWidth:g}),ce),{variant:q}),H),{children:j}))}));const be=u.default(H),pe=!!(null==oe?void 0:oe.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,inSubmenu:Z,title:de(j),maxWidth:me},H),{inFullscreenView:z&&!Object.keys(X).length,id:R.current,as:V,onFocus:ae,children:e.jsx(o.default,v(y(v(y({menuType:U,"data-role":"menu-item-wrapper"},ce),{menuItemVariant:q,ariaLabel:M,maxWidth:ne?void 0:me,inFullscreenView:z,asPassiveItem:fe}),be),{asDiv:pe||"div"===V,hasFocusableChild:!!le,hasInput:pe,inSubmenu:Z,children:j}))}))}));exports.MenuItem=O,exports.default=O;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("../../../__internal__/focus-trap/focus-trap-utils.js"),u=require("../../../style/utils/filter-styled-system-padding-props.js"),o=require("./menu-item.style.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),l=require("../__internal__/strict-menu.context.js"),s=require("../__internal__/submenu/submenu.component.js"),a=require("../__internal__/submenu/submenu.context.js"),c=require("../menu-segment-title/menu-segment-title.context.js"),d=require("../menu.style.js"),m=require("../../../__internal__/utils/helpers/guid/index.js");function f(e){return e&&e.__esModule?e:{default:e}}var b=f(t),p=f(n);function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y(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){h(e,t,n[t])}))}return e}function v(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const O=t.forwardRef(((n,f)=>{var{submenu:h,submenuMaxWidth:O,submenuMinWidth:g,children:j,href:w,onClick:x,target:_,submenuDirection:S="right",icon:I,selected:P,onKeyDown:C,variant:q="default",showDropdownArrow:D=!0,ariaLabel:M,clickToOpen:k,maxWidth:W,onSubmenuOpen:F,onSubmenuClose:E,overrideColor:L,rel:T,as:V,"data-element":K,"data-role":A}=n,H=function(e,t){if(null==e)return{};var n,r,u=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(u[n]=e[n]);return u}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(u[n]=e[n])}return u}(n,["submenu","submenuMaxWidth","submenuMinWidth","children","href","onClick","target","submenuDirection","icon","selected","onKeyDown","variant","showDropdownArrow","ariaLabel","clickToOpen","maxWidth","onSubmenuOpen","onSubmenuClose","overrideColor","rel","as","data-element","data-role"]);p.default(I||j,"Either prop `icon` must be defined or this node must have `children`."),p.default(j||M||h||"string"==typeof h&&h.length,"If no text or node is provided via the `submenu` prop, an `ariaLabel` should be given to facilitate accessibility."),p.default("boolean"==typeof h||void 0===h||b.default.isValidElement(h)||j&&"string"==typeof h&&h.length,"You should not pass `children` when `submenu` is an empty string");const R=t.useRef(m.default()),{isChildOfSegment:N,overriddenVariant:Y}=t.useContext(c.MenuSegmentContext),{inFullscreenView:z,registerItem:B,unregisterItem:G,focusId:J,updateFocusId:Q,menuType:U}=l.useStrictMenuContext(),X=t.useContext(a.default),Z=Object.keys(X).length>0,{submenuFocusId:$,updateFocusId:ee,handleKeyDown:te,submenuHasMaxWidth:ne,closeSubmenu:re}=X,ue=J===R.current,oe=$?$===R.current:void 0,[ie,le]=t.useState(null),[se,ae]=t.useState(null);t.useLayoutEffect((()=>{var e;const t=null!==(e=null==ie?void 0:ie.querySelector(r.defaultFocusableSelectors))&&void 0!==e?e:null;t!==se&&ae(t)}),[se,ie]),t.useEffect((()=>{const e=R.current;return B&&B(e),()=>{G&&G(e)}}),[B,G]),t.useEffect((()=>{if(ue&&!oe||oe){if(se)return void se.focus();null==ie||ie.focus()}}),[se,ue,oe,ie]),t.useImperativeHandle(f,(()=>({focus(){null==ie||ie.focus()}})),[ie]);const ce=e=>{Z?(e.stopPropagation(),null==ee||ee(R.current)):null==Q||Q(R.current)},de={className:w||x?"carbon-menu-item--has-link":"",href:se?void 0:w,onClick:se||!w&&!x?void 0:e=>{null==x||x(e),null==re||re()},target:_,rel:T,icon:I,removeAriaLabelOnIcon:!0,selected:P,onKeyDown:z?void 0:e=>{null==C||C(e),i.default.isEscKey(e)&&(null==ie||ie.focus()),null==te||te(e)},overrideColor:L,ref:le};"alternate"===Y&&N&&"alternate"===q&&["white","black"].includes(U)&&(de.overrideColor=!0);const me=e=>W&&"string"==typeof e?e:void 0,fe=z?void 0:W,be=!(x||w||se);if(h)return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,title:me(h),maxWidth:fe},H),{inFullscreenView:z,id:R.current,as:V,onFocus:ce,children:e.jsx(s.default,v(y(v(y(v(y({},"boolean"!=typeof h&&{title:h}),{submenuDirection:S,showDropdownArrow:D,clickToOpen:k,maxWidth:W,asPassiveItem:be,ariaLabel:M,onSubmenuOpen:F,onSubmenuClose:E,submenuMaxWidth:O,submenuMinWidth:g}),de),{variant:q}),H),{children:j}))}));const pe=u.default(H),he=!!(null==ie?void 0:ie.querySelector("[data-element='input']"));return e.jsx(d.StyledMenuItem,v(y({"data-component":"menu-item","data-element":K,"data-role":A,menuType:U,inSubmenu:Z,title:me(j),maxWidth:fe},H),{inFullscreenView:z&&!Object.keys(X).length,id:R.current,as:V,onFocus:ce,children:e.jsx(o.default,v(y(v(y({menuType:U,"data-role":"menu-item-wrapper"},de),{menuItemVariant:q,ariaLabel:M,maxWidth:ne?void 0:fe,inFullscreenView:z,asPassiveItem:be}),pe),{asDiv:he||"div"===V,hasFocusableChild:!!se,hasInput:he,inSubmenu:Z,children:j}))}))}));exports.MenuItem=O,exports.default=O;

package/lib/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 }: TabPanelProps) => React.JSX.Element;
-export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
+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 TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<TabsHandle>>;
-export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, ...rest }: TabsProps) => React.JSX.Element;
 export default Tabs;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tabs.context.js"),a=require("./tabs.style.js"),n=require("../../../__internal__/utils/logger/index.js"),l=require("../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),i=require("../../../hooks/__internal__/useLocale/useLocale.js"),s=require("../../icon/icon.component.js"),o=require("./tab.context.js"),c=require("../../../hooks/__internal__/usePrevious/index.js");let u=!1;const d=t.forwardRef((({ariaLabel:n,children:i,onTabChange:o},u)=>{const d=t.useRef(null),{activeTab:b,focusIndex:f,orientation:h,selectedTabId:x,setFocusIndex:g,setActiveTab:p,size:v}=r.useTabs();t.useImperativeHandle(u,(()=>({focusTab:e=>{var t;const r=null===(t=d.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),g(e),p(e)}})));const j=t.useCallback((()=>{var e;const t=(null===(e=d.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);t.useEffect((()=>{if(x)p(x);else if(!b){const e=j()[0];p(e)}}),[b,j,x,p]);const y=c.default(b);t.useEffect((()=>{y&&y!==b&&(null==o||o(b))}),[b,o,y]);const[S,T]=t.useState(!1),[_,k]=t.useState(!1),[w,I]=t.useState(!1),m=t.useCallback((()=>{if(d.current){const e=d.current.scrollWidth-d.current.clientWidth-20;T(e>0),k(d.current.scrollLeft>=20),I(d.current.scrollLeft<=e)}}),[]);l.default(d,(()=>{m()})),t.useEffect((()=>{d.current&&m()}),[m]);const L=e=>{d.current&&("left"===e?d.current.scrollLeft-=200:d.current.scrollLeft+=200,m())};return e.jsx(e.Fragment,{children:e.jsxs(a.StyledTabListWrapper,{children:["vertical"!==h&&S?_?e.jsx(a.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>L("left"),size:v,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(s.default,{type:"chevron_left"})}):e.jsx(a.StyledScrollButtonPlaceholder,{size:v}):null,e.jsxs(a.StyledTabList,{"aria-label":n,id:"tablist",onKeyDown:e=>{const t=j(),r=t.indexOf(f||b),a=t.length-1;if(-1===r)return;let n=r;switch(e.key){case"Home":n=0;break;case"End":n=a;break;case"ArrowRight":n=(r+1)%t.length;break;case"ArrowLeft":n=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===h&&(n=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===h&&(n=(r+1)%t.length);break;case"Enter":case" ":return void p(b);default:return}g(t[n])},orientation:h,ref:d,role:"tablist",size:v,tabIndex:-1,children:[i,e.jsx(a.Spacer,{})]}),"vertical"!==h&&S?w?e.jsx(a.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>L("right"),size:v,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(s.default,{type:"chevron_right"})}):e.jsx(a.StyledScrollButtonPlaceholder,{size:v}):null]})})})),b=({children:t,labelledBy:n="",orientation:l="horizontal",selectedTabId:i,size:s="medium"})=>e.jsx(r.TabsProvider,{labelledBy:n,orientation:l,selectedTabId:i,size:s,children:e.jsx(a.StyledTabs,{id:"tabs-container",orientation:l,children:t})});exports.Tab=({controls:l,error:c=!1,id:d,label:b,leftSlot:f,rightSlot:h,warning:x=!1,info:g=!1})=>{const p=i.default(),[v,j]=t.useState(c),[y,S]=t.useState(x),[T,_]=t.useState(g),{activeTab:k,focusIndex:w,orientation:I,setActiveTab:m,setCurrentTabId:L,setFocusIndex:z,size:q,errors:P,warnings:A,infos:E}=r.useTabs(),B=k===d;t.useEffect((()=>{B&&L(d)}),[d,B,L]),!f&&!h||"string"==typeof b||u||(n.default.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),u=!0),t.useEffect((()=>{if(w===d){const e=document.getElementById(d);null==e||e.focus()}}),[w,d,L]),t.useEffect((()=>{let e=P[d],t=A[d],r=E[d];if(c&&!e&&(e={static:c}),x&&!t&&(t={static:x}),g&&!r&&(r={static:g}),!e)return void j(!1);const a=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),n=c||a.length>0;if(j(n),!t)return void S(!1);const l=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),i=x||l.length>0;if(S(i),!r)return void _(!1);const s=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),o=g||s.length>0;_(o)}),[c,d,P,A,x,E,g]);const C=()=>{if(v||y||T){if(v)return e.jsx(s.default,{"data-role":"icon-error",type:"error",ariaLabel:p.tabs.error(),color:"#db004e"});if(y)return e.jsx(s.default,{"data-role":"icon-warning",type:"warning",ariaLabel:p.tabs.warning(),color:"#d64309"});if(T)return e.jsx(s.default,{"data-role":"icon-info",type:"info",ariaLabel:p.tabs.info(),color:"#0060a7ff"})}return null};return e.jsx(o.TabProvider,{tabId:d,visible:!0,children:e.jsx(a.StyledTab,{activeTab:k===d,"aria-controls":l,"aria-selected":B?"true":"false",error:v,info:T,id:d,onClick:()=>{m(d),z(d)},orientation:I,role:"tab",size:q,type:"button",tabIndex:k===d?0:-1,warning:y,children:"string"==typeof b?e.jsxs("span",{className:"tab-title-content-wrapper",children:[f,b,h,C()]}):e.jsxs("span",{className:"tab-title-content-wrapper",children:[b,C()]})})})},exports.TabList=d,exports.TabPanel=({children:t,id:n,tabId:l})=>{const{activeTab:i}=r.useTabs();return e.jsx(o.TabProvider,{tabId:l,visible:l===i,children:e.jsx(a.StyledTabPanel,{id:n,role:"tabpanel","aria-labelledby":l,children:t})})},exports.Tabs=b,exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tabs.context.js"),n=require("./tabs.style.js"),a=require("../../../__internal__/utils/logger/index.js"),l=require("../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),i=require("../../../hooks/__internal__/useLocale/useLocale.js"),o=require("../../icon/icon.component.js"),s=require("./tab.context.js"),c=require("../../../hooks/__internal__/usePrevious/index.js"),u=require("../../../__internal__/utils/helpers/tags/tags.js");function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(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){b(e,t,r[t])}))}return e}function f(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,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}let h=!1;const y=t.forwardRef(((a,i)=>{var{ariaLabel:s,children:b,onTabChange:h}=a,y=p(a,["ariaLabel","children","onTabChange"]);const g=t.useRef(null),{activeTab:j,focusIndex:v,orientation:x,selectedTabId:S,setFocusIndex:O,setActiveTab:T,size:w}=r.useTabs();t.useImperativeHandle(i,(()=>({focusTab:e=>{var t;const r=null===(t=g.current)||void 0===t?void 0:t.querySelector(`#${e}`);null==r||r.focus(),O(e),T(e)}})));const m=t.useCallback((()=>{var e;const t=(null===(e=g.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);t.useEffect((()=>{if(S)T(S);else if(!j){const e=m()[0];T(e)}}),[j,m,S,T]);const _=c.default(j);t.useEffect((()=>{_&&_!==j&&(null==h||h(j))}),[j,h,_]);const[P,k]=t.useState(!1),[I,L]=t.useState(!1),[z,q]=t.useState(!1),E=t.useCallback((()=>{if(g.current){const e=g.current.scrollWidth-g.current.clientWidth-20;k(e>0),L(g.current.scrollLeft>=20),q(g.current.scrollLeft<=e)}}),[]);l.default(g,(()=>{E()})),t.useEffect((()=>{g.current&&E()}),[E]);const A=e=>{g.current&&("left"===e?g.current.scrollLeft-=200:g.current.scrollLeft+=200,E())};return e.jsx(e.Fragment,{children:e.jsxs(n.StyledTabListWrapper,{children:["vertical"!==x&&P?I?e.jsx(n.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>A("left"),size:w,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(o.default,{type:"chevron_left"})}):e.jsx(n.StyledScrollButtonPlaceholder,{size:w}):null,e.jsxs(n.StyledTabList,f(d({"aria-label":s,id:"tablist",onKeyDown:e=>{const t=m(),r=t.indexOf(v||j),n=t.length-1;if(-1===r)return;let a=r;switch(e.key){case"Home":a=0;break;case"End":a=n;break;case"ArrowRight":a=(r+1)%t.length;break;case"ArrowLeft":a=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===x&&(a=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===x&&(a=(r+1)%t.length);break;case"Enter":case" ":return void T(j);default:return}O(t[a])},orientation:x,ref:g,role:"tablist",size:w,tabIndex:-1},u.default("tab-list",y)),{children:[b,e.jsx(n.Spacer,{})]})),"vertical"!==x&&P?z?e.jsx(n.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>A("right"),size:w,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(o.default,{type:"chevron_right"})}):e.jsx(n.StyledScrollButtonPlaceholder,{size:w}):null]})})})),g=t=>{var{children:a,labelledBy:l="",orientation:i="horizontal",selectedTabId:o,size:s="medium"}=t,c=p(t,["children","labelledBy","orientation","selectedTabId","size"]);return e.jsx(r.TabsProvider,{labelledBy:l,orientation:i,selectedTabId:o,size:s,children:e.jsx(n.StyledTabs,f(d({id:"tabs-container",orientation:i},u.default("tabs",c)),{children:a}))})};exports.Tab=l=>{var{controls:c,error:b=!1,id:y,label:g,leftSlot:j,rightSlot:v,warning:x=!1,info:S=!1}=l,O=p(l,["controls","error","id","label","leftSlot","rightSlot","warning","info"]);const T=i.default(),[w,m]=t.useState(b),[_,P]=t.useState(x),[k,I]=t.useState(S),{activeTab:L,focusIndex:z,orientation:q,setActiveTab:E,setCurrentTabId:A,setFocusIndex:B,size:C,errors:R,warnings:D,infos:N}=r.useTabs(),W=L===y;t.useEffect((()=>{W&&A(y)}),[y,W,A]),!j&&!v||"string"==typeof g||h||(a.default.warn("[WARNING] Using `leftSlot` and/or `rightSlot` is not supported when `label` is not a string. Please use `leftSlot` and/or `rightSlot` alongside a string `label`, or use the `label` prop exclusively."),h=!0),t.useEffect((()=>{if(z===y){const e=document.getElementById(y);null==e||e.focus()}}),[z,y,A]),t.useEffect((()=>{let e=R[y],t=D[y],r=N[y];if(b&&!e&&(e={static:b}),x&&!t&&(t={static:x}),S&&!r&&(r={static:S}),!e)return void m(!1);const n=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),a=b||n.length>0;if(m(a),!t)return void P(!1);const l=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),i=x||l.length>0;if(P(i),!r)return void I(!1);const o=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),s=S||o.length>0;I(s)}),[b,y,R,D,x,N,S]);const F=()=>{if(w||_||k){if(w)return e.jsx(o.default,{"data-role":"icon-error",type:"error",ariaLabel:T.tabs.error(),color:"#db004e"});if(_)return e.jsx(o.default,{"data-role":"icon-warning",type:"warning",ariaLabel:T.tabs.warning(),color:"#d64309"});if(k)return e.jsx(o.default,{"data-role":"icon-info",type:"info",ariaLabel:T.tabs.info(),color:"#0060a7ff"})}return null};return e.jsx(s.TabProvider,{tabId:y,visible:!0,children:e.jsx(n.StyledTab,f(d({activeTab:L===y,"aria-controls":c,"aria-selected":W?"true":"false",error:w,info:k,id:y,onClick:()=>{E(y),B(y)},orientation:q,role:"tab",size:C,type:"button",tabIndex:L===y?0:-1,warning:_},u.default("tab",O)),{children:"string"==typeof g?e.jsxs("span",{className:"tab-title-content-wrapper",children:[j,g,v,F()]}):e.jsxs("span",{className:"tab-title-content-wrapper",children:[g,F()]})}))})},exports.TabList=y,exports.TabPanel=t=>{var{children:a,id:l,tabId:i}=t,o=p(t,["children","id","tabId"]);const{activeTab:c}=r.useTabs();return e.jsx(s.TabProvider,{tabId:i,visible:i===c,children:e.jsx(n.StyledTabPanel,f(d({id:l,role:"tabpanel","aria-labelledby":i},u.default("tab-panel",o)),{children:a}))})},exports.Tabs=g,exports.default=g;

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

@@ -1,4 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export type TabValidationRecord = Record<string, string | boolean>;
 export type ValidationRecord = Record<string, TabValidationRecord>;
 export interface TabContextProps {
@@ -30,7 +31,7 @@ export interface TabsContextProps {
     infos: ValidationRecord;
     setInfos: (childId: string, tabId: string, info: string | boolean) => void;
 }
-export interface TabPanelProps {
+export interface TabPanelProps extends TagProps {
     /** The content to be shown in the tab panel */
     children?: React.ReactNode;
     /** The ID of the tab panel */
@@ -38,7 +39,7 @@ export interface TabPanelProps {
     /** The ID of the controlling tab */
     tabId: string;
 }
-export interface TabListProps {
+export interface TabListProps extends TagProps {
     /** The label read out when the tab list gains focus */
     ariaLabel: string;
     /** The tabs to be shown in the tab list */
@@ -46,7 +47,7 @@ export interface TabListProps {
     /** A callback for when the active tab is changed */
     onTabChange?: (tabId: string) => void;
 }
-export interface TabProps {
+export interface TabProps extends TagProps {
     /** The tab panel that this tab controls */
     controls: string;
     /** The ID of the tab */
@@ -67,7 +68,7 @@ export interface TabProps {
      * */
     info?: boolean | string;
 }
-export interface TabsProps {
+export interface TabsProps extends TagProps {
     /** The tab list to be rendered within this set of tabs  */
     children?: React.ReactNode;
     /** The label associated with this set of tabs, for assistive technologies */

package/package.json

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