carbon-react 158.0.0 → 158.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/esm/__internal__/form-field/form-field.component.js +1 -1
  2. package/esm/components/drawer/drawer.style.js +1 -1
  3. package/esm/components/icon/icon.component.js +1 -1
  4. package/esm/components/tabs/__internal__/tab-title/tab-title.style.js +1 -1
  5. package/esm/components/tabs/__next__/index.d.ts +2 -0
  6. package/esm/components/tabs/__next__/index.js +1 -0
  7. package/esm/components/tabs/__next__/tab.context.d.ts +10 -0
  8. package/esm/components/tabs/__next__/tab.context.js +1 -0
  9. package/esm/components/tabs/__next__/tabs.component.d.ts +7 -0
  10. package/esm/components/tabs/__next__/tabs.component.js +1 -0
  11. package/esm/components/tabs/__next__/tabs.context.d.ts +14 -0
  12. package/esm/components/tabs/__next__/tabs.context.js +1 -0
  13. package/esm/components/tabs/__next__/tabs.style.d.ts +30 -0
  14. package/esm/components/tabs/__next__/tabs.style.js +1 -0
  15. package/esm/components/tabs/__next__/tabs.types.d.ts +51 -0
  16. package/esm/components/tabs/tab/__internal__/tab.context.d.ts +2 -2
  17. package/esm/components/tabs/tab/__internal__/tab.context.js +1 -1
  18. package/esm/components/tabs/tab/tab.component.js +1 -1
  19. package/lib/__internal__/form-field/form-field.component.js +1 -1
  20. package/lib/components/drawer/drawer.style.js +1 -1
  21. package/lib/components/icon/icon.component.js +1 -1
  22. package/lib/components/tabs/__internal__/tab-title/tab-title.style.js +1 -1
  23. package/lib/components/tabs/__next__/index.d.ts +2 -0
  24. package/lib/components/tabs/__next__/index.js +1 -0
  25. package/lib/components/tabs/__next__/package.json +6 -0
  26. package/lib/components/tabs/__next__/tab.context.d.ts +10 -0
  27. package/lib/components/tabs/__next__/tab.context.js +1 -0
  28. package/lib/components/tabs/__next__/tabs.component.d.ts +7 -0
  29. package/lib/components/tabs/__next__/tabs.component.js +1 -0
  30. package/lib/components/tabs/__next__/tabs.context.d.ts +14 -0
  31. package/lib/components/tabs/__next__/tabs.context.js +1 -0
  32. package/lib/components/tabs/__next__/tabs.style.d.ts +30 -0
  33. package/lib/components/tabs/__next__/tabs.style.js +1 -0
  34. package/lib/components/tabs/__next__/tabs.types.d.ts +51 -0
  35. package/lib/components/tabs/tab/__internal__/tab.context.d.ts +2 -2
  36. package/lib/components/tabs/tab/__internal__/tab.context.js +1 -1
  37. package/lib/components/tabs/tab/tab.component.js +1 -1
  38. package/package.json +1 -1
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as l,useLayoutEffect as i,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"../../components/tabs/tab/__internal__/tab.context.js";import u 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";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const O=O=>{var{maxWidth:g,children:I,"data-component":j,disabled:h,loading:v,fieldHelp:w,fieldHelpInline:P,error:H,warning:k,info:x,tooltipId:S,fieldHelpId:_,label:W,labelId:A,labelAlign:R,labelHelp:q,labelHelpIcon:B,labelInline:D,labelSpacing:E=2,labelWidth:F,labelAs:V,id:L,reverse:N,useValidationIcon:U,adaptiveLabelBreakpoint:$,isRequired:z,validationIconId:C,validationRedesignOptIn:G}=O,J=function(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(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)&&(l[n]=e[n])}return l}(O,["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 K=n((()=>{const e={error:!!H,warning:!!k,info:!!x};if(h&&!v)return Object.keys(e).find((t=>e[t]))}),[H,k,x,h,v]);a(void 0===K,`Prop \`${K}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const M=u($);let Q=D;$&&(Q=M);const{setError:T,setWarning:X,setInfo:Y}=r(f),Z=m(J),ee=l(!1);i((()=>(ee.current=!0,()=>{ee.current=!1})),[]),o((()=>(T&&T(L,H),X&&X(L,k),Y&&Y(L,x),()=>{ee.current||(T&&H&&T(L,!1),X&&k&&X(L,!1),Y&&x&&Y(L,!1))})),[L,T,X,Y,H,k,x]);const te=w?t(c,{labelInline:Q,labelWidth:F,id:_,children:w}):null;return e(s,(ne=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){y(e,t,n[t])}))}return e}({},b(j,J),Z),re=null!=(re={children:[e(d,{"data-role":"field-line",inline:Q,maxWidth:g,children:[N&&I,W&&t(p,{labelId:A,align:R,disabled:h,error:!G&&H,warning:!G&&k,info:!G&&x,help:q,tooltipId:S,htmlFor:L,helpIcon:B,inline:Q,width:F,useValidationIcon:U,pr:N?void 0:E,pl:N?E:void 0,isRequired:z,validationIconId:C,as:V,children:W}),P&&te,!N&&I]}),!P&&te]})?re:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ne,Object.getOwnPropertyDescriptors(re)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(re)).forEach((function(e){Object.defineProperty(ne,e,Object.getOwnPropertyDescriptor(re,e))})),ne));var ne,re};O.displayName="FormField";export{O as default};
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};
@@ -1 +1 @@
1
- import i,{css as t,keyframes as o}from"styled-components";import a from"../tabs/tabs.style.js";import{Box as e}from"../box/box.component.js";import n from"../../__internal__/sticky-footer/sticky-footer.style.js";import r from"../../style/utils/add-focus-styling.js";import d from"../../style/themes/apply-base-theme.js";const s="var(--sizing500)",l=i.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-62cbf750-0"})(["",""],(({isExpanded:i})=>t(["position:sticky;top:0;",""],i&&t(["border-bottom:var(--sizing010) solid #ccd6db;"])))),p=i.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-62cbf750-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),c=i.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-62cbf750-2"})(["flex:1;margin-left:1px;overflow:auto;"]),m=i(e).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-62cbf750-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:i,isExpanded:o})=>t([""," "," ",""],!o&&t(["display:none;opacity:0;"]),o&&t(["display:flex;flex-direction:column;flex:1 1 0%;"]),i&&t(["","{margin-top:48px;","}"],a,!o&&t(["display:none;"]))))),y=()=>o(["0%{float:right;}100%{float:right;}"]),h=()=>o(["0%{float:right;}80%{float:right;}100%{float:left;}"]),f=i.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-62cbf750-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],s,s,(({backgroundColor:i})=>t(["background-color:",";border-right:1px solid ",";"],i||"var(--colorsUtilityMajor040)",i||"var(--colorsUtilityMajor075)")),(({expandedWidth:i})=>i),m,p,(({animationDuration:i,expandedWidth:a})=>t([""," ",""],(i=>o(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],s,s,i))(a),i)),m,p,(()=>o(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:i})=>i),m,p,n,(({animationDuration:i,expandedWidth:a})=>t([""," ",""],(i=>o(["0%{width:",";}100%{width:",";}"],i,s))(a),i)),m,p,n,(()=>o(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:i})=>i)),g=i.button.attrs(d).attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-62cbf750-5"})(["",""],(({animationDuration:i,isExpanded:o})=>t(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],i,h,i,r(),o&&t(["transform:scaleX(-1);animation:"," "," ease-in-out;"],y,i)))),w=i.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-62cbf750-6"})(["display:flex;height:",";"],(({height:i})=>i));export{c as StyledDrawerChildren,f as StyledDrawerContent,m as StyledDrawerSidebar,w as StyledDrawerWrapper,l as StyledSidebarHeader,p as StyledSidebarTitle,g as StyledSidebarToggleButton};
1
+ import i,{css as t,keyframes as o}from"styled-components";import{StyledTabs as a}from"../tabs/__next__/tabs.style.js";import{Box as e}from"../box/box.component.js";import n from"../../__internal__/sticky-footer/sticky-footer.style.js";import r from"../../style/utils/add-focus-styling.js";import d from"../../style/themes/apply-base-theme.js";const s="var(--sizing500)",l=i.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-b4625785-0"})(["",""],(({isExpanded:i})=>t(["position:sticky;top:0;",""],i&&t(["border-bottom:var(--sizing010) solid #ccd6db;"])))),p=i.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-b4625785-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),c=i.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-b4625785-2"})(["flex:1;margin-left:1px;overflow:auto;"]),m=i(e).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-b4625785-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:i,isExpanded:o})=>t([""," "," ",""],!o&&t(["display:none;opacity:0;"]),o&&t(["display:flex;flex-direction:column;flex:1 1 0%;"]),i&&t(["","{margin-top:48px;","}"],a,!o&&t(["display:none;"]))))),y=()=>o(["0%{float:right;}100%{float:right;}"]),h=()=>o(["0%{float:right;}80%{float:right;}100%{float:left;}"]),g=i.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-b4625785-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],s,s,(({backgroundColor:i})=>t(["background-color:",";border-right:1px solid ",";"],i||"var(--colorsUtilityMajor040)",i||"var(--colorsUtilityMajor075)")),(({expandedWidth:i})=>i),m,p,(({animationDuration:i,expandedWidth:a})=>t([""," ",""],(i=>o(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],s,s,i))(a),i)),m,p,(()=>o(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:i})=>i),m,p,n,(({animationDuration:i,expandedWidth:a})=>t([""," ",""],(i=>o(["0%{width:",";}100%{width:",";}"],i,s))(a),i)),m,p,n,(()=>o(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:i})=>i)),f=i.button.attrs(d).attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-b4625785-5"})(["",""],(({animationDuration:i,isExpanded:o})=>t(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],i,h,i,r(),o&&t(["transform:scaleX(-1);animation:"," "," ease-in-out;"],y,i)))),w=i.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-b4625785-6"})(["display:flex;height:",";"],(({height:i})=>i));export{c as StyledDrawerChildren,g as StyledDrawerContent,m as StyledDrawerSidebar,w as StyledDrawerWrapper,l as StyledSidebarHeader,p as StyledSidebarTitle,f as StyledSidebarToggleButton};
@@ -1 +1 @@
1
- import{jsx as t}from"react/jsx-runtime";import e,{useContext as o,useMemo as i}from"react";import r from"invariant";import{Tooltip as n}from"../tooltip/tooltip.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipContext as a}from"../../__internal__/tooltip-provider/index.js";import s from"./icon.style.js";import{ICON_TOOLTIP_POSITIONS as p}from"./icon-config.js";import c from"../tabs/__internal__/tab-title/tab-title.context.js";function d(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function f(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),i.forEach((function(e){d(t,e,o[e])}))}return t}const b=e.forwardRef(((e,d)=>{var{"aria-hidden":b,ariaLabel:u,bg:m,bgShape:g,bgSize:y,className:O,color:v,"data-element":j,"data-role":h,disabled:S,focusable:I=!0,fontSize:P="small",id:w,inputSize:x,isPartOfInput:z,tabIndex:_,tooltipMessage:C,tooltipPosition:F,tooltipVisible:N,tooltipBgColor:V,tooltipFontColor:k,tooltipFlipOverrides:T,tooltipId:A,type:B,role:E}=e,L=function(t,e){if(null==t)return{};var o,i,r=function(t,e){if(null==t)return{};var o,i,r={},n=Object.keys(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||(r[o]=t[o]);return r}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(r[o]=t[o])}return r}(e,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const M=Array.isArray(T)&&T.every((t=>p.includes(t)));T&&r(M,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const q=!!C&&!S,{tooltipPosition:D,focusable:R,tooltipVisible:G,disabled:H,target:J}=o(a),{isInTab:K}=o(c),Q=i((()=>{switch(B){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return B}}),[B]),U=!S&&!H&&!!C&&(void 0!==R?R:I),W=i((()=>{if(!K)return U&&void 0===_?0:_}),[K,U,_]),X=f({"aria-hidden":b,"aria-label":u,bg:m,bgSize:y||P,bgShape:g,className:O||void 0,color:v,"data-component":"icon","data-element":null!=j?j:Q,"data-role":null!=h?h:"icon",disabled:H||S,fontSize:P,hasTooltip:U,id:w,isInteractive:q,ref:d,role:E,tabIndex:W,type:Q},l(L));return C?t(n,{message:C,position:D||F,type:B,id:A,isVisible:!S&&(void 0!==G?G:N),isPartOfInput:z,inputSize:x,bgColor:V,fontColor:k,flipOverrides:T,target:J,children:t(s,f({},X))}):t(s,f({},X))}));b.displayName="Icon";export{b as default};
1
+ import{jsx as t}from"react/jsx-runtime";import e,{useContext as o,useMemo as i}from"react";import r from"invariant";import{Tooltip as n}from"../tooltip/tooltip.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipContext as a}from"../../__internal__/tooltip-provider/index.js";import s from"./icon.style.js";import{ICON_TOOLTIP_POSITIONS as p}from"./icon-config.js";import{useTabs as c}from"../tabs/__next__/tabs.context.js";function d(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function f(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),i.forEach((function(e){d(t,e,o[e])}))}return t}const u=e.forwardRef(((e,d)=>{var{"aria-hidden":u,ariaLabel:b,bg:m,bgShape:g,bgSize:y,className:O,color:v,"data-element":j,"data-role":h,disabled:S,focusable:I=!0,fontSize:P="small",id:x,inputSize:w,isPartOfInput:z,tabIndex:_,tooltipMessage:C,tooltipPosition:F,tooltipVisible:N,tooltipBgColor:V,tooltipFontColor:k,tooltipFlipOverrides:T,tooltipId:A,type:B,role:E}=e,L=function(t,e){if(null==t)return{};var o,i,r=function(t,e){if(null==t)return{};var o,i,r={},n=Object.keys(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||(r[o]=t[o]);return r}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(i=0;i<n.length;i++)o=n[i],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(r[o]=t[o])}return r}(e,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const M=Array.isArray(T)&&T.every((t=>p.includes(t)));T&&r(M,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const q=!!C&&!S,{tooltipPosition:D,focusable:R,tooltipVisible:G,disabled:H,target:J}=o(a),{isInTab:K}=c(),Q=i((()=>{switch(B){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return B}}),[B]),U=!S&&!H&&!!C&&(void 0!==R?R:I),W=i((()=>{if(!K)return U&&void 0===_?0:_}),[K,U,_]),X=f({"aria-hidden":u,"aria-label":b,bg:m,bgSize:y||P,bgShape:g,className:O||void 0,color:v,"data-component":"icon","data-element":null!=j?j:Q,"data-role":null!=h?h:"icon",disabled:H||S,fontSize:P,hasTooltip:U,id:x,isInteractive:q,ref:d,role:E,tabIndex:W,type:Q},l(L));return C?t(n,{message:C,position:D||F,type:B,id:A,isVisible:!S&&(void 0!==G?G:N),isPartOfInput:z,inputSize:w,bgColor:V,fontColor:k,flipOverrides:T,target:J,children:t(s,f({},X))}):t(s,f({},X))}));u.displayName="Icon";export{u as default};
@@ -1 +1 @@
1
- import o,{css as r}from"styled-components";import t from"../../../icon/icon.style.js";import i from"../../../../__internal__/validations/validation-icon.style.js";const e=o.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-6f1d665d-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:o,error:t,warning:i,info:e,size:n,isTabSelected:a,hasSiblings:d,borders:l=!1,position:p="top",noLeftBorder:s,noRightBorder:c,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:f})=>r(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===p&&r(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===p&&f&&r(["justify-content:space-between;"]),"top"===p&&r(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&r(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&r(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),l&&r(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===p&&r(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),s&&r(["border-left:none;",""],!c&&r(["border-right:1px solid var(--colorsActionMinor100);"])),c&&r(["border-right:none;"])),"large"===n&&"top"===p&&r(["padding:14px 24px;"," font-size:16px;"],l&&"padding-bottom: 9px;"),"large"===n&&"left"===p&&r(["font-size:16px;padding:14px 24px;"]),"default"===n&&r(["padding:10px 16px;",""],l&&"padding-bottom: 9px;"),(i||e)&&r(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],f?1:2,e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),t&&r(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],f?1:2,"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),d&&!o&&"top"===p&&r(["height:20px;"]),o&&r(["display:flex;"," ",""],"left"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-right:0px;"]),(t||i||e)&&r(["padding-right:",";"],"large"===n?"26px":"18px")),"top"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-bottom:0px;"]),(t||i||e)&&r(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===n?"4px":"2px","large"===n?"18px":"14px","large"===n?"4px":"2px")))))),n=r(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:o})=>r(["",""],"left"===o&&r(["border-top-right-radius:var(--borderRadius000);"]))),(({size:o,position:i="top",borders:n=!1,noRightBorder:a,noLeftBorder:d,isTabSelected:l,alternateStyling:p,error:s,warning:c,info:g,isInSidebar:b,validationRedesignOptIn:x})=>r(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===o?"var(--sizing600)":"var(--sizing500)","top"===i&&r(["",""],n&&!(a||d)&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&r(["",""],n&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!l&&r(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&r(["background:transparent;"]),x&&r(["background:var(--colorsUtilityMajor100);"])),l&&r(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(s||c||g)&&r(["padding-bottom:0px;"]),p?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),r("top"===i?["bottom:2px;left:2px;right:1px;"]:["bottom:2px;right:1px;"]),"left"===i&&r(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!s&&r(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",p?"1px":"var(--border-right-value)"),!n&&r(["","{border-bottom:none;}"],e),p&&"border-right-color: var(--colorsActionMinor100)",(c||g)&&r(["border-right:none;"]),!l&&r(["border-right-color:var(--colorsActionMinor100);"]),l&&r([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],p&&r(["border-right-color:var(--colorsActionMinor100);"]),!p&&r(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],e,!(s||c||g)&&!x&&"margin-right: 2px;"),p&&"border-right-color: var(--colorsActionMinor100);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);")),p&&r(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],l?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",l&&r(["background-color:var(--colorsActionMinor200);"])),t,x?"margin-top: 10px;":"margin-top: 2px;"))),a=o.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-6f1d665d-1"})(["",""],n),d=o.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-6f1d665d-2"})(["",""],n),l=o.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-6f1d665d-3"})(["",""],(({hasCustomLayout:o,titlePosition:e="before",hasCustomSibling:n,validationRedesignOptIn:a})=>r([""," ",""],o&&r(["flex-grow:2;"]),!o&&r(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],n&&r(["left:4px;"]),!n&&r(["",""],"before"===e?"left: 8px;":"right: 8px;"),t,i,t,a?"0px":"16px")))),p=o.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-6f1d665d-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),s=o.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-6f1d665d-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(o=>r(["",""],o&&r(["z-index:2;"]))),(({position:o="top",warning:t,error:i})=>r(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&r(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&r(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===o&&r(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===o&&r(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));export{l as StyledLayoutWrapper,s as StyledSelectedIndicator,a as StyledTabTitleButton,d as StyledTabTitleLink,e as StyledTitleContent,p as StyledVerticalIndicator};
1
+ import o,{css as r}from"styled-components";import t from"../../../icon/icon.style.js";import i from"../../../../__internal__/validations/validation-icon.style.js";const e=o.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-a4fb41f5-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:o,error:t,warning:i,info:e,size:n,isTabSelected:a,hasSiblings:l,borders:d=!1,position:p="top",noLeftBorder:s,noRightBorder:c,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:f})=>r(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===p&&r(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===p&&f&&r(["justify-content:space-between;"]),"top"===p&&r(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&r(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&r(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),d&&r(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===p&&r(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),s&&r(["border-left:none;",""],!c&&r(["border-right:1px solid var(--colorsActionMinor100);"])),c&&r(["border-right:none;"])),"large"===n&&"top"===p&&r(["padding:14px 24px;"," font-size:16px;"],d&&"padding-bottom: 9px;"),"large"===n&&"left"===p&&r(["font-size:16px;padding:14px 24px;"]),"default"===n&&r(["padding:10px 16px;",""],d&&"padding-bottom: 9px;"),(i||e)&&r(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],f?1:2,e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),e&&!i&&r(["outline-color:var(--colorsSemanticInfo500);"]),i&&r(["outline-color:var(--colorsSemanticCaution500);"]),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),t&&r(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],f?1:2,"top"===p&&r(["border-bottom-color:transparent;"]),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px"),"top"===p&&r(["border-bottom-color:transparent;",""],o&&r(["padding-bottom:2px;"])),"left"===p&&r(["border-right-color:transparent;padding-right:",";"],"large"===n?"26px":"18px")),l&&!o&&"top"===p&&r(["height:20px;"]),o&&r(["display:flex;"," ",""],"left"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-right:0px;"]),(t||i||e)&&r(["padding-right:",";"],"large"===n?"26px":"18px")),"top"===p&&r(["padding:",";"," ",""],"large"===n?"2px":"0px",a&&r(["padding-bottom:0px;"]),(t||i||e)&&r(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===n?"4px":"2px","large"===n?"18px":"14px","large"===n?"4px":"2px")))))),n=r(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:o})=>r(["",""],"left"===o&&r(["border-top-right-radius:var(--borderRadius000);"]))),(({size:o,position:i="top",borders:n=!1,noRightBorder:a,noLeftBorder:l,isTabSelected:d,alternateStyling:p,error:s,warning:c,info:g,isInSidebar:b,validationRedesignOptIn:x})=>r(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===o?"var(--sizing600)":"var(--sizing500)","top"===i&&r(["",""],n&&!(a||l)&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&r(["",""],n&&r(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!d&&r(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&r(["background:transparent;"]),x&&r(["background:var(--colorsUtilityMajor100);"])),d&&r(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(s||c||g)&&r(["padding-bottom:0px;"]),p?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px",r("top"===i?["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]:["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),r("top"===i?["bottom:2px;left:2px;right:1px;"]:["bottom:2px;right:1px;"]),"left"===i&&r(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!s&&r(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",p?"1px":"var(--border-right-value)"),!n&&r(["","{border-bottom:none;}"],e),p&&"border-right-color: var(--colorsActionMinor100)",(c||g)&&r(["border-right:none;"]),!d&&r(["border-right-color:var(--colorsActionMinor100);"]),d&&r([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],p&&r(["border-right-color:var(--colorsActionMinor100);"]),!p&&r(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],e,!(s||c||g)&&!x&&"margin-right: 2px;"),p&&"border-right-color: var(--colorsActionMinor100);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);",(s||c||g)&&"border-right-color: var(--colorsSemanticNegative500);")),p&&r(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],d?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",d&&r(["background-color:var(--colorsActionMinor200);"])),t,x?"margin-top: 10px;":"margin-top: 2px;"))),a=o.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-a4fb41f5-1"})(["",""],n),l=o.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-a4fb41f5-2"})(["",""],n),d=o.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-a4fb41f5-3"})(["",""],(({hasCustomLayout:o,titlePosition:e="before",hasCustomSibling:n,validationRedesignOptIn:a})=>r([""," ",""],o&&r(["flex-grow:2;"]),!o&&r(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],n&&r(["left:4px;"]),!n&&r(["",""],"before"===e?"left: 8px;":"right: 8px;"),t,i,t,a?"0px":"16px")))),p=o.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-a4fb41f5-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),s=o.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-a4fb41f5-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(o=>r(["",""],o&&r(["z-index:2;"]))),(({position:o="top",warning:t,error:i})=>r(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&r(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&r(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===o&&r(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===o&&r(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));export{d as StyledLayoutWrapper,s as StyledSelectedIndicator,a as StyledTabTitleButton,l as StyledTabTitleLink,e as StyledTitleContent,p as StyledVerticalIndicator};
@@ -0,0 +1,2 @@
1
+ export { Tabs, Tab, TabList, TabPanel } from "./tabs.component";
2
+ export type { TabsProps, TabProps } from "./tabs.types";
@@ -0,0 +1 @@
1
+ export{Tab,TabList,TabPanel,Tabs}from"./tabs.component.js";
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import { TabContextProps } from "./tabs.types";
3
+ export declare const TabContext: React.Context<TabContextProps>;
4
+ interface TabProviderProps {
5
+ children?: React.ReactNode;
6
+ tabId: string;
7
+ visible: boolean;
8
+ }
9
+ export declare const TabProvider: ({ children, tabId, visible }: TabProviderProps) => React.JSX.Element;
10
+ export {};
@@ -0,0 +1 @@
1
+ import{jsx as r}from"react/jsx-runtime";import{createContext as t}from"react";import{StyledTabProvider as e}from"./tabs.style.js";const i=t({tabId:""}),o=({children:t,tabId:o,visible:a})=>r(i.Provider,{value:{tabId:o},children:r(e,{visible:a,children:t})});export{i as TabContext,o as TabProvider};
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import { TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
3
+ export declare const TabPanel: ({ children, id, tabId }: TabPanelProps) => React.JSX.Element;
4
+ export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
5
+ export declare const TabList: ({ ariaLabel, children }: TabListProps) => React.JSX.Element;
6
+ export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
7
+ export default Tabs;
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{useState as i,useEffect as o,useCallback as l}from"react";import{Typography as a}from"../../typography/typography.component.js";import{TabsProvider as s,useTabs as c}from"./tabs.context.js";import{StyledTabs as d,StyledTab as b,StyledTabListWrapper as f,StyledTabList as u,Spacer as h,StyledTabPanel as p,StyledScrollButton as g,StyledScrollButtonPlaceholder as m}from"./tabs.style.js";import y from"../../../__internal__/utils/logger/index.js";import v from"../../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import I from"../../icon/icon.component.js";import{TabProvider as w}from"./tab.context.js";const x=({children:t,id:r,tabId:n})=>{const{activeTab:i}=c();return e(w,{tabId:n,visible:n===i,children:e(p,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})};let k=!1;const z=({controls:r,error:n=!1,id:l,label:a,leftSlot:s,rightSlot:d,warning:f=!1,info:u=!1})=>{const[h,p]=i(n),[g,m]=i(f),[v,x]=i(u),{activeTab:z,focusIndex:T,orientation:j,setActiveTab:_,setCurrentTabId:A,setFocusIndex:S,size:L,errors:O,warnings:R,infos:C}=c(),N=z===l;o((()=>{N&&A(l)}),[l,N,A]),!s&&!d||"string"==typeof a||k||(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."),k=!0),o((()=>{if(T===l){const e=document.getElementById(l);null==e||e.focus()}}),[T,l,A]),o((()=>{let e=O[l],t=R[l],r=C[l];if(n&&!e&&(e={static:n}),f&&!t&&(t={static:f}),u&&!r&&(r={static:u}),!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 m(!1);const a=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=f||a.length>0;if(m(s),!r)return void x(!1);const c=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),d=u||c.length>0;x(d)}),[n,l,O,R,f,C,u]);const B=()=>{if(h||g||v){if(h)return e(I,{"data-role":"icon-error",type:"error",color:"#db004e"});if(g)return e(I,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(v)return e(I,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e(w,{tabId:l,visible:!0,children:e(b,{activeTab:z===l,"aria-controls":r,"aria-selected":N?"true":"false",error:h,info:v,id:l,onClick:()=>{_(l),S(l)},orientation:j,role:"tab",size:L,type:"button",tabIndex:z===l?0:-1,warning:g,children:t("span","string"==typeof a?{className:"tab-title-content-wrapper",children:[s,a,d,B()]}:{className:"tab-title-content-wrapper",children:[a,B()]})})})},T=({ariaLabel:s,children:d})=>{const b=n.useRef(null),{activeTab:p,focusIndex:y,orientation:w,selectedTabId:x,setFocusIndex:k,setActiveTab:z,size:T}=c(),j=l((()=>{var e;const t=(null===(e=b.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);o((()=>{if(x)z(x);else if(!p){const e=j()[0];z(e)}}),[p,j,x,z]);const[_,A]=i(!1),[S,L]=i(!1),[O,R]=i(!1),C=l((()=>{if(b.current){const e=b.current.scrollWidth-b.current.clientWidth-20;A(e>0),L(b.current.scrollLeft>=20),R(b.current.scrollLeft<=e)}}),[]);v(b,(()=>{C()})),o((()=>{b.current&&C()}),[C]);const N=e=>{b.current&&("left"===e?b.current.scrollLeft-=200:b.current.scrollLeft+=200,C())};return t(r,{children:[e(a,{id:"tablist-aria-label",screenReaderOnly:!0,children:s}),t(f,{children:["vertical"!==w&&_?S?e(g,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>N("left"),size:T,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e(I,{type:"chevron_left"})}):e(m,{size:T}):null,t(u,{ariaLabel:s,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=j(),r=t.indexOf(y||p),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"===w&&(i=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===w&&(i=(r+1)%t.length);break;case"Enter":case" ":return void z(p);default:return}k(t[i])},orientation:w,ref:b,role:"tablist",size:T,tabIndex:-1,children:[d,e(h,{})]}),"vertical"!==w&&_?O?e(g,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>N("right"),size:T,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e(I,{type:"chevron_right"})}):e(m,{size:T}):null]})]})},j=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:o="medium"})=>e(s,{labelledBy:r,orientation:n,selectedTabId:i,size:o,children:e(d,{id:"tabs-container",orientation:n,children:t})});export{z as Tab,T as TabList,x as TabPanel,j as Tabs,j as default};
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { TabsContextProps } from "./tabs.types";
3
+ export declare const TabsContext: React.Context<TabsContextProps>;
4
+ export declare const useTabs: () => TabsContextProps;
5
+ interface TabsProviderProps {
6
+ children?: React.ReactNode;
7
+ isInTab?: boolean;
8
+ labelledBy?: string;
9
+ orientation: "horizontal" | "vertical";
10
+ selectedTabId?: string;
11
+ size: "medium" | "large";
12
+ }
13
+ export declare const TabsProvider: ({ children, isInTab, labelledBy, orientation, selectedTabId, size, }: TabsProviderProps) => React.JSX.Element;
14
+ export {};
@@ -0,0 +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};
@@ -0,0 +1,30 @@
1
+ import { TabListProps, TabProps } from "./tabs.types";
2
+ interface StyledTabListProps extends TabListProps {
3
+ orientation: "horizontal" | "vertical";
4
+ size: "medium" | "large";
5
+ }
6
+ export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const StyledTabList: import("styled-components").StyledComponent<"div", any, StyledTabListProps, never>;
8
+ export declare const StyledTabListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const Spacer: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const StyledScrollButton: import("styled-components").StyledComponent<"button", any, {
11
+ size: "medium" | "large";
12
+ }, never>;
13
+ export declare const StyledScrollButtonPlaceholder: import("styled-components").StyledComponent<"div", any, {
14
+ size: "medium" | "large";
15
+ }, never>;
16
+ interface StyledTabProps extends Omit<TabProps, "controls" | "index" | "label"> {
17
+ activeTab: boolean;
18
+ error?: string | boolean;
19
+ warning?: string | boolean;
20
+ orientation: "horizontal" | "vertical";
21
+ size: "medium" | "large";
22
+ }
23
+ export declare const StyledTab: import("styled-components").StyledComponent<"button", any, StyledTabProps, never>;
24
+ export declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {
25
+ orientation?: "horizontal" | "vertical";
26
+ }, never>;
27
+ export declare const StyledTabProvider: import("styled-components").StyledComponent<"div", any, {
28
+ visible: boolean;
29
+ }, never>;
30
+ export {};
@@ -0,0 +1 @@
1
+ import i,{css as o}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=i.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-4305491c-0"})(["padding:0 6px;"]),r=i.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-4305491c-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:i})=>o(["flex-direction:",";",":8px;"],"vertical"===i?"column":"row","horizontal"===i?"margin-bottom":"margin-right"))),n=i.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-4305491c-2"})(["display:flex;z-index:6;"]),a=i.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-4305491c-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),p=i.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-4305491c-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:i})=>"medium"===i?"40px":"48px"),(({size:i})=>"medium"===i?"40px":"48px")),b=i.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-4305491c-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:i})=>"medium"===i?"40px":"48px"),(({size:i})=>"medium"===i?"40px":"48px")),l=i.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-4305491c-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;border-radius:8px;}"],(({activeTab:i,size:t})=>i&&"large"===t&&o(["margin-top:-4px;"])),(({size:i})=>o(["font-size:","px;height:","px;padding:","px ","px;"],e[i].fontSize,e[i].height,e[i].paddingY,e[i].paddingX)),(({activeTab:i,error:t,info:d,orientation:r,size:n,warning:a})=>i&&"horizontal"===r&&o(["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:i,error:t,info:d,orientation:r,size:n,warning:a})=>"vertical"===r?o(["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,i&&o(["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"))):o([""])),t()),s=i.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-4305491c-7"})(["display:flex;",""],(({orientation:i})=>o(["flex-direction:",";"],"horizontal"===i?"column":"row"))),g=i.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-4305491c-8"})(["",""],(({visible:i})=>o(["display:",";"],i?"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};
@@ -0,0 +1,51 @@
1
+ import React, { Dispatch, SetStateAction } from "react";
2
+ export type TabValidationRecord = Record<string, string | boolean>;
3
+ export type ValidationRecord = Record<string, TabValidationRecord>;
4
+ export interface TabContextProps {
5
+ tabId?: string;
6
+ }
7
+ export interface TabsContextProps {
8
+ activeTab: string;
9
+ currentTabId?: string;
10
+ focusIndex: string;
11
+ isInTab?: boolean;
12
+ labelledBy?: string;
13
+ orientation: "horizontal" | "vertical";
14
+ selectedTabId?: string;
15
+ setActiveTab: Dispatch<SetStateAction<string>>;
16
+ setFocusIndex: Dispatch<SetStateAction<string>>;
17
+ setCurrentTabId: Dispatch<SetStateAction<string>>;
18
+ setErrors: (childId: string, tabId: string, error: string | boolean) => void;
19
+ setWarnings: (childId: string, tabId: string, warning: string | boolean) => void;
20
+ errors: ValidationRecord;
21
+ warnings: ValidationRecord;
22
+ size: "medium" | "large";
23
+ infos: ValidationRecord;
24
+ setInfos: (childId: string, tabId: string, info: string | boolean) => void;
25
+ }
26
+ export interface TabPanelProps {
27
+ children?: React.ReactNode;
28
+ id: string;
29
+ tabId: string;
30
+ }
31
+ export interface TabListProps {
32
+ ariaLabel: string;
33
+ children?: React.ReactNode;
34
+ }
35
+ export interface TabProps {
36
+ controls: string;
37
+ id: string;
38
+ error?: boolean | string;
39
+ label: React.ReactNode;
40
+ leftSlot?: React.ReactNode;
41
+ rightSlot?: React.ReactNode;
42
+ warning?: boolean | string;
43
+ info?: boolean | string;
44
+ }
45
+ export interface TabsProps {
46
+ children?: React.ReactNode;
47
+ labelledBy?: string;
48
+ orientation?: "horizontal" | "vertical";
49
+ selectedTabId?: string;
50
+ size?: "medium" | "large";
51
+ }
@@ -4,5 +4,5 @@ export interface TabContextProps {
4
4
  setWarning?: (childId: string, warning?: boolean | string) => void;
5
5
  setInfo?: (childId: string, info?: boolean | string) => void;
6
6
  }
7
- declare const _default: React.Context<TabContextProps>;
8
- export default _default;
7
+ export declare const TabContext: React.Context<TabContextProps>;
8
+ export default TabContext;
@@ -1 +1 @@
1
- import t from"react";var e=t.createContext({});export{e as default};
1
+ import t from"react";const e=t.createContext({});export{e as TabContext,e as default};
@@ -1 +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 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};
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};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),l=require("./form-field.style.js"),n=require("../label/label.component.js"),i=require("../field-help/field-help.component.js"),o=require("../utils/helpers/tags/tags.js"),a=require("../../components/tabs/tab/__internal__/tab.context.js"),s=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js");require("../../style/utils/filter-styled-system-padding-props.js");var d=require("../../style/utils/filter-styled-system-margin-props.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(r);function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=r=>{var{maxWidth:u,children:b,"data-component":f,disabled:y,loading:O,fieldHelp:j,fieldHelpInline:g,error:v,warning:I,info:h,tooltipId:m,fieldHelpId:w,label:q,labelId:P,labelAlign:x,labelHelp:_,labelHelpIcon:H,labelInline:k,labelSpacing:S=2,labelWidth:W,labelAs:A,id:E,reverse:R,useValidationIcon:F,adaptiveLabelBreakpoint:B,isRequired:D,validationIconId:L,validationRedesignOptIn:M}=r,V=function(e,t){if(null==e)return{};var r,l,n=function(e,t){if(null==e)return{};var r,l,n={},i=Object.keys(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["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 C=t.useMemo((()=>{const e={error:!!v,warning:!!I,info:!!h};if(y&&!O)return Object.keys(e).find((t=>e[t]))}),[v,I,h,y,O]);c.default(void 0===C,`Prop \`${C}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const N=s.default(B);let U=k;B&&(U=N);const{setError:$,setWarning:z,setInfo:G}=t.useContext(a.default),J=d.default(V),K=t.useRef(!1);t.useLayoutEffect((()=>(K.current=!0,()=>{K.current=!1})),[]),t.useEffect((()=>($&&$(E,v),z&&z(E,I),G&&G(E,h),()=>{K.current||($&&v&&$(E,!1),z&&I&&z(E,!1),G&&h&&G(E,!1))})),[E,$,z,G,v,I,h]);const Q=j?e.jsx(i.FieldHelp,{labelInline:U,labelWidth:W,id:w,children:j}):null;return e.jsxs(l.default,(T=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},l=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),l.forEach((function(t){p(e,t,r[t])}))}return e}({},o.default(f,V),J),X=null!=(X={children:[e.jsxs(l.FieldLineStyle,{"data-role":"field-line",inline:U,maxWidth:u,children:[R&&b,q&&e.jsx(n.default,{labelId:P,align:x,disabled:y,error:!M&&v,warning:!M&&I,info:!M&&h,help:_,tooltipId:m,htmlFor:E,helpIcon:H,inline:U,width:W,useValidationIcon:F,pr:R?void 0:S,pl:R?S:void 0,isRequired:D,validationIconId:L,as:A,children:q}),g&&Q,!R&&b]}),!g&&Q]})?X:{},Object.getOwnPropertyDescriptors?Object.defineProperties(T,Object.getOwnPropertyDescriptors(X)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(X)).forEach((function(e){Object.defineProperty(T,e,Object.getOwnPropertyDescriptor(X,e))})),T));var T,X};b.displayName="FormField",exports.default=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("./form-field.style.js"),l=require("../label/label.component.js"),i=require("../field-help/field-help.component.js"),o=require("../utils/helpers/tags/tags.js"),a=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js");require("../../style/utils/filter-styled-system-padding-props.js");var s=require("../../style/utils/filter-styled-system-margin-props.js"),d=require("../../components/tabs/tab/__internal__/tab.context.js"),c=require("../../components/tabs/__next__/tabs.context.js"),u=require("../../components/tabs/__next__/tab.context.js");function b(e){return e&&e.__esModule?e:{default:e}}var p=b(n);function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const y=n=>{var{maxWidth:b,children:y,"data-component":j,disabled:O,loading:g,fieldHelp:I,fieldHelpInline:v,error:h,warning:m,info:x,tooltipId:_,fieldHelpId:w,label:q,labelId:P,labelAlign:H,labelHelp:k,labelHelpIcon:S,labelInline:E,labelSpacing:W=2,labelWidth:A,labelAs:C,id:R,reverse:F,useValidationIcon:B,adaptiveLabelBreakpoint:D,isRequired:L,validationIconId:M,validationRedesignOptIn:T}=n,V=function(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(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)&&(l[n]=e[n])}return l}(n,["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 N=t.useMemo((()=>{const e={error:!!h,warning:!!m,info:!!x};if(O&&!g)return Object.keys(e).find((t=>e[t]))}),[h,m,x,O,g]);p.default(void 0===N,`Prop \`${N}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const U=a.default(D);let $=E;D&&($=U);const{setErrors:z,setWarnings:G,setInfos:J}=t.useContext(c.TabsContext),{tabId:K}=t.useContext(u.TabContext),{setError:Q,setWarning:X,setInfo:Y}=t.useContext(d.TabContext),Z=s.default(V),ee=t.useRef(!1);t.useLayoutEffect((()=>(ee.current=!0,()=>{ee.current=!1})),[]),t.useEffect((()=>(z&&z(R,K||"",h||!1),G&&G(R,K||"",m||!1),J&&J(R,K||"",x||!1),()=>{ee.current||(z&&z(R,K||"",!1),G&&G(R,K||"",!1),J&&J(R,K||"",!1))})),[R,z,G,h,m,x,K,J]),t.useEffect((()=>(Q&&Q(R,h),X&&X(R,m),Y&&Y(R,x),()=>{ee.current||(Q&&h&&Q(R,!1),X&&m&&X(R,!1),Y&&x&&Y(R,!1))})),[R,Q,X,Y,h,m,x]);const te=I?e.jsx(i.FieldHelp,{labelInline:$,labelWidth:A,id:w,children:I}):null;return e.jsxs(r.default,(ne=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){f(e,t,n[t])}))}return e}({},o.default(j,V),Z),re=null!=(re={children:[e.jsxs(r.FieldLineStyle,{"data-role":"field-line",inline:$,maxWidth:b,children:[F&&y,q&&e.jsx(l.default,{labelId:P,align:H,disabled:O,error:!T&&h,warning:!T&&m,info:!T&&x,help:k,tooltipId:_,htmlFor:R,helpIcon:S,inline:$,width:A,useValidationIcon:B,pr:F?void 0:W,pl:F?W:void 0,isRequired:L,validationIconId:M,as:C,children:q}),v&&te,!F&&y]}),!v&&te]})?re:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ne,Object.getOwnPropertyDescriptors(re)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(re)).forEach((function(e){Object.defineProperty(ne,e,Object.getOwnPropertyDescriptor(re,e))})),ne));var ne,re};y.displayName="FormField",exports.default=y;
@@ -1 +1 @@
1
- "use strict";var e=require("styled-components"),t=require("../tabs/tabs.style.js"),i=require("../box/box.component.js"),a=require("../../__internal__/sticky-footer/sticky-footer.style.js"),o=require("../../style/utils/add-focus-styling.js"),r=require("../../style/themes/apply-base-theme.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const d="var(--sizing500)",l=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-62cbf750-0"})(["",""],(({isExpanded:t})=>e.css(["position:sticky;top:0;",""],t&&e.css(["border-bottom:var(--sizing010) solid #ccd6db;"])))),c=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-62cbf750-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),p=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-62cbf750-2"})(["flex:1;margin-left:1px;overflow:auto;"]),y=s.default(i.Box).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-62cbf750-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:i,isExpanded:a})=>e.css([""," "," ",""],!a&&e.css(["display:none;opacity:0;"]),a&&e.css(["display:flex;flex-direction:column;flex:1 1 0%;"]),i&&e.css(["","{margin-top:48px;","}"],t.default,!a&&e.css(["display:none;"]))))),f=()=>e.keyframes(["0%{float:right;}100%{float:right;}"]),u=()=>e.keyframes(["0%{float:right;}80%{float:right;}100%{float:left;}"]),h=s.default.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-62cbf750-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],d,d,(({backgroundColor:t})=>e.css(["background-color:",";border-right:1px solid ",";"],t||"var(--colorsUtilityMajor040)",t||"var(--colorsUtilityMajor075)")),(({expandedWidth:e})=>e),y,c,(({animationDuration:t,expandedWidth:i})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],d,d,t))(i),t)),y,c,(()=>e.keyframes(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:e})=>e),y,c,a.default,(({animationDuration:t,expandedWidth:i})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";}100%{width:",";}"],t,d))(i),t)),y,c,a.default,(()=>e.keyframes(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:e})=>e)),m=s.default.button.attrs(r.default).attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-62cbf750-5"})(["",""],(({animationDuration:t,isExpanded:i})=>e.css(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],t,u,t,o.default(),i&&e.css(["transform:scaleX(-1);animation:"," "," ease-in-out;"],f,t)))),g=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-62cbf750-6"})(["display:flex;height:",";"],(({height:e})=>e));exports.StyledDrawerChildren=p,exports.StyledDrawerContent=h,exports.StyledDrawerSidebar=y,exports.StyledDrawerWrapper=g,exports.StyledSidebarHeader=l,exports.StyledSidebarTitle=c,exports.StyledSidebarToggleButton=m;
1
+ "use strict";var e=require("styled-components"),t=require("../tabs/__next__/tabs.style.js"),i=require("../box/box.component.js"),a=require("../../__internal__/sticky-footer/sticky-footer.style.js"),o=require("../../style/utils/add-focus-styling.js"),r=require("../../style/themes/apply-base-theme.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const d="var(--sizing500)",l=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-b4625785-0"})(["",""],(({isExpanded:t})=>e.css(["position:sticky;top:0;",""],t&&e.css(["border-bottom:var(--sizing010) solid #ccd6db;"])))),p=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-b4625785-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),c=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-b4625785-2"})(["flex:1;margin-left:1px;overflow:auto;"]),y=s.default(i.Box).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-b4625785-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:i,isExpanded:a})=>e.css([""," "," ",""],!a&&e.css(["display:none;opacity:0;"]),a&&e.css(["display:flex;flex-direction:column;flex:1 1 0%;"]),i&&e.css(["","{margin-top:48px;","}"],t.StyledTabs,!a&&e.css(["display:none;"]))))),u=()=>e.keyframes(["0%{float:right;}100%{float:right;}"]),f=()=>e.keyframes(["0%{float:right;}80%{float:right;}100%{float:left;}"]),h=s.default.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-b4625785-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],d,d,(({backgroundColor:t})=>e.css(["background-color:",";border-right:1px solid ",";"],t||"var(--colorsUtilityMajor040)",t||"var(--colorsUtilityMajor075)")),(({expandedWidth:e})=>e),y,p,(({animationDuration:t,expandedWidth:i})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],d,d,t))(i),t)),y,p,(()=>e.keyframes(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:e})=>e),y,p,a.default,(({animationDuration:t,expandedWidth:i})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";}100%{width:",";}"],t,d))(i),t)),y,p,a.default,(()=>e.keyframes(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:e})=>e)),m=s.default.button.attrs(r.default).attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-b4625785-5"})(["",""],(({animationDuration:t,isExpanded:i})=>e.css(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],t,f,t,o.default(),i&&e.css(["transform:scaleX(-1);animation:"," "," ease-in-out;"],u,t)))),g=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-b4625785-6"})(["display:flex;height:",";"],(({height:e})=>e));exports.StyledDrawerChildren=c,exports.StyledDrawerContent=h,exports.StyledDrawerSidebar=y,exports.StyledDrawerWrapper=g,exports.StyledSidebarHeader=l,exports.StyledSidebarTitle=p,exports.StyledSidebarToggleButton=m;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("invariant"),r=require("../tooltip/tooltip.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var i=require("../../style/utils/filter-styled-system-margin-props.js"),l=require("../../__internal__/tooltip-provider/index.js"),n=require("./icon.style.js"),a=require("./icon-config.js"),s=require("../tabs/__internal__/tab-title/tab-title.context.js");function u(e){return e&&e.__esModule?e:{default:e}}var p=u(t),c=u(o);function d(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function f(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){d(e,t,o[t])}))}return e}const b=p.default.forwardRef(((o,u)=>{var{"aria-hidden":p,ariaLabel:d,bg:b,bgShape:g,bgSize:y,className:m,color:O,"data-element":v,"data-role":j,disabled:S,focusable:I=!0,fontSize:h="small",id:x,inputSize:P,isPartOfInput:_,tabIndex:q,tooltipMessage:C,tooltipPosition:w,tooltipVisible:z,tooltipBgColor:T,tooltipFontColor:M,tooltipFlipOverrides:N,tooltipId:F,type:V,role:k}=o,L=function(e,t){if(null==e)return{};var o,r,i=function(e,t){if(null==e)return{};var o,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)o=l[r],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)o=l[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}(o,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const A=Array.isArray(N)&&N.every((e=>a.ICON_TOOLTIP_POSITIONS.includes(e)));N&&c.default(A,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const B=!!C&&!S,{tooltipPosition:E,focusable:D,tooltipVisible:R,disabled:G,target:H}=t.useContext(l.TooltipContext),{isInTab:J}=t.useContext(s.default),K=t.useMemo((()=>{switch(V){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return V}}),[V]),Q=!S&&!G&&!!C&&(void 0!==D?D:I),U=t.useMemo((()=>{if(!J)return Q&&void 0===q?0:q}),[J,Q,q]),W=f({"aria-hidden":p,"aria-label":d,bg:b,bgSize:y||h,bgShape:g,className:m||void 0,color:O,"data-component":"icon","data-element":null!=v?v:K,"data-role":null!=j?j:"icon",disabled:G||S,fontSize:h,hasTooltip:Q,id:x,isInteractive:B,ref:u,role:k,tabIndex:U,type:K},i.default(L));if(C){const t=!S&&(void 0!==R?R:z);return e.jsx(r.Tooltip,{message:C,position:E||w,type:V,id:F,isVisible:t,isPartOfInput:_,inputSize:P,bgColor:T,fontColor:M,flipOverrides:N,target:H,children:e.jsx(n.default,f({},W))})}return e.jsx(n.default,f({},W))}));b.displayName="Icon",exports.default=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("invariant"),r=require("../tooltip/tooltip.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var i=require("../../style/utils/filter-styled-system-margin-props.js"),n=require("../../__internal__/tooltip-provider/index.js"),l=require("./icon.style.js"),a=require("./icon-config.js"),s=require("../tabs/__next__/tabs.context.js");function u(e){return e&&e.__esModule?e:{default:e}}var p=u(t),c=u(o);function d(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function b(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){d(e,t,o[t])}))}return e}const f=p.default.forwardRef(((o,u)=>{var{"aria-hidden":p,ariaLabel:d,bg:f,bgShape:g,bgSize:y,className:m,color:O,"data-element":v,"data-role":j,disabled:S,focusable:I=!0,fontSize:h="small",id:x,inputSize:P,isPartOfInput:_,tabIndex:q,tooltipMessage:w,tooltipPosition:z,tooltipVisible:C,tooltipBgColor:T,tooltipFontColor:M,tooltipFlipOverrides:N,tooltipId:F,type:V,role:k}=o,L=function(e,t){if(null==e)return{};var o,r,i=function(e,t){if(null==e)return{};var o,r,i={},n=Object.keys(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}(o,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const A=Array.isArray(N)&&N.every((e=>a.ICON_TOOLTIP_POSITIONS.includes(e)));N&&c.default(A,'The tooltipFlipOverrides prop supplied to `Icon` must be an array containing some or all of ["top", "bottom", "left", "right"].');const B=!!w&&!S,{tooltipPosition:E,focusable:D,tooltipVisible:R,disabled:G,target:H}=t.useContext(n.TooltipContext),{isInTab:J}=s.useTabs(),K=t.useMemo((()=>{switch(V){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return V}}),[V]),Q=!S&&!G&&!!w&&(void 0!==D?D:I),U=t.useMemo((()=>{if(!J)return Q&&void 0===q?0:q}),[J,Q,q]),W=b({"aria-hidden":p,"aria-label":d,bg:f,bgSize:y||h,bgShape:g,className:m||void 0,color:O,"data-component":"icon","data-element":null!=v?v:K,"data-role":null!=j?j:"icon",disabled:G||S,fontSize:h,hasTooltip:Q,id:x,isInteractive:B,ref:u,role:k,tabIndex:U,type:K},i.default(L));if(w){const t=!S&&(void 0!==R?R:C);return e.jsx(r.Tooltip,{message:w,position:E||z,type:V,id:F,isVisible:t,isPartOfInput:_,inputSize:P,bgColor:T,fontColor:M,flipOverrides:N,target:H,children:e.jsx(l.default,b({},W))})}return e.jsx(l.default,b({},W))}));f.displayName="Icon",exports.default=f;
@@ -1 +1 @@
1
- "use strict";var o=require("styled-components"),r=require("../../../icon/icon.style.js"),t=require("../../../../__internal__/validations/validation-icon.style.js");function i(o){return o&&o.__esModule?o:{default:o}}var e=i(o);const s=e.default.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-6f1d665d-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:r,error:t,warning:i,info:e,size:s,isTabSelected:a,hasSiblings:n,borders:d=!1,position:l="top",noLeftBorder:c,noRightBorder:p,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:u})=>o.css(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===l&&o.css(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===l&&u&&o.css(["justify-content:space-between;"]),"top"===l&&o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&o.css(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&o.css(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),d&&o.css(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===l&&o.css(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),c&&o.css(["border-left:none;",""],!p&&o.css(["border-right:1px solid var(--colorsActionMinor100);"])),p&&o.css(["border-right:none;"])),"large"===s&&"top"===l&&o.css(["padding:14px 24px;"," font-size:16px;"],d&&"padding-bottom: 9px;"),"large"===s&&"left"===l&&o.css(["font-size:16px;padding:14px 24px;"]),"default"===s&&o.css(["padding:10px 16px;",""],d&&"padding-bottom: 9px;"),(i||e)&&o.css(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],u?1:2,e&&!i&&o.css(["outline-color:var(--colorsSemanticInfo500);"]),i&&o.css(["outline-color:var(--colorsSemanticCaution500);"]),"top"===l&&o.css(["border-bottom-color:transparent;"]),"left"===l&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px"),e&&!i&&o.css(["outline-color:var(--colorsSemanticInfo500);"]),i&&o.css(["outline-color:var(--colorsSemanticCaution500);"]),"top"===l&&o.css(["border-bottom-color:transparent;",""],r&&o.css(["padding-bottom:2px;"])),"left"===l&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px")),t&&o.css(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],u?1:2,"top"===l&&o.css(["border-bottom-color:transparent;"]),"left"===l&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px"),"top"===l&&o.css(["border-bottom-color:transparent;",""],r&&o.css(["padding-bottom:2px;"])),"left"===l&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px")),n&&!r&&"top"===l&&o.css(["height:20px;"]),r&&o.css(["display:flex;"," ",""],"left"===l&&o.css(["padding:",";"," ",""],"large"===s?"2px":"0px",a&&o.css(["padding-right:0px;"]),(t||i||e)&&o.css(["padding-right:",";"],"large"===s?"26px":"18px")),"top"===l&&o.css(["padding:",";"," ",""],"large"===s?"2px":"0px",a&&o.css(["padding-bottom:0px;"]),(t||i||e)&&o.css(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===s?"4px":"2px","large"===s?"18px":"14px","large"===s?"4px":"2px")))))),a=o.css(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:r})=>o.css(["",""],"left"===r&&o.css(["border-top-right-radius:var(--borderRadius000);"]))),(({size:t,position:i="top",borders:e=!1,noRightBorder:a,noLeftBorder:n,isTabSelected:d,alternateStyling:l,error:c,warning:p,info:g,isInSidebar:b,validationRedesignOptIn:x})=>o.css(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===t?"var(--sizing600)":"var(--sizing500)","top"===i&&o.css(["",""],e&&!(a||n)&&o.css(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&o.css(["",""],e&&o.css(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!d&&o.css(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&o.css(["background:transparent;"]),x&&o.css(["background:var(--colorsUtilityMajor100);"])),d&&o.css(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(c||p||g)&&o.css(["padding-bottom:0px;"]),l?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;","top"===i?o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]):o.css(["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px","top"===i?o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]):o.css(["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?o.css(["bottom:2px;left:2px;right:1px;"]):o.css(["bottom:2px;right:1px;"]),"left"===i&&o.css(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!c&&o.css(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",l?"1px":"var(--border-right-value)"),!e&&o.css(["","{border-bottom:none;}"],s),l&&"border-right-color: var(--colorsActionMinor100)",(p||g)&&o.css(["border-right:none;"]),!d&&o.css(["border-right-color:var(--colorsActionMinor100);"]),d&&o.css([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],l&&o.css(["border-right-color:var(--colorsActionMinor100);"]),!l&&o.css(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],s,!(c||p||g)&&!x&&"margin-right: 2px;"),l&&"border-right-color: var(--colorsActionMinor100);",(c||p||g)&&"border-right-color: var(--colorsSemanticNegative500);",(c||p||g)&&"border-right-color: var(--colorsSemanticNegative500);")),l&&o.css(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],d?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",d&&o.css(["background-color:var(--colorsActionMinor200);"])),r.default,x?"margin-top: 10px;":"margin-top: 2px;"))),n=e.default.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-6f1d665d-1"})(["",""],a),d=e.default.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-6f1d665d-2"})(["",""],a),l=e.default.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-6f1d665d-3"})(["",""],(({hasCustomLayout:i,titlePosition:e="before",hasCustomSibling:s,validationRedesignOptIn:a})=>o.css([""," ",""],i&&o.css(["flex-grow:2;"]),!i&&o.css(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],s&&o.css(["left:4px;"]),!s&&o.css(["",""],"before"===e?"left: 8px;":"right: 8px;"),r.default,t.default,r.default,a?"0px":"16px")))),c=e.default.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-6f1d665d-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),p=e.default.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-6f1d665d-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(r=>o.css(["",""],r&&o.css(["z-index:2;"]))),(({position:r="top",warning:t,error:i})=>o.css(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&o.css(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&o.css(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===r&&o.css(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===r&&o.css(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));exports.StyledLayoutWrapper=l,exports.StyledSelectedIndicator=p,exports.StyledTabTitleButton=n,exports.StyledTabTitleLink=d,exports.StyledTitleContent=s,exports.StyledVerticalIndicator=c;
1
+ "use strict";var o=require("styled-components"),r=require("../../../icon/icon.style.js"),t=require("../../../../__internal__/validations/validation-icon.style.js");function i(o){return o&&o.__esModule?o:{default:o}}var e=i(o);const s=e.default.span.withConfig({displayName:"tab-title.style__StyledTitleContent",componentId:"sc-a4fb41f5-0"})(["outline:none;display:flex;align-items:flex-start;line-height:20px;margin:0;position:relative;",""],(({hasCustomLayout:r,error:t,warning:i,info:e,size:s,isTabSelected:a,hasSiblings:n,borders:l=!1,position:c="top",noLeftBorder:d,noRightBorder:p,hasHref:g,alternateStyling:b,align:x,validationRedesignOptIn:f})=>o.css(["text-align:",";"," "," "," "," "," "," "," "," "," "," "," "," ",""],x,"left"===c&&o.css(["display:flex;width:100%;justify-content:",";border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-top-right-radius:var(--borderRadius000);"],"right"===x?"flex-end":"flex-start"),"left"===c&&f&&o.css(["justify-content:space-between;"]),"top"===c&&o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"]),g&&o.css(['color:var(--colorsActionMinorYin090);display:block;text-decoration:none;[type="link"]{width:16px;margin-left:8px;height:16px;color:inherit;margin-top:-2px;}']),!g&&o.css(['[data-component="icon"]:not([color]){color:var(--colorsActionMinorYin065);}']),l&&o.css(["border-top:1px solid var(--colorsActionMinor100);border-left:1px solid var(--colorsActionMinor100);border-right:1px solid var(--colorsActionMinor100);"," "," ",""],"left"===c&&o.css(["border-bottom:1px solid var(--colorsActionMinor100);",""],!b&&"margin-right: -1px;"),d&&o.css(["border-left:none;",""],!p&&o.css(["border-right:1px solid var(--colorsActionMinor100);"])),p&&o.css(["border-right:none;"])),"large"===s&&"top"===c&&o.css(["padding:14px 24px;"," font-size:16px;"],l&&"padding-bottom: 9px;"),"large"===s&&"left"===c&&o.css(["font-size:16px;padding:14px 24px;"]),"default"===s&&o.css(["padding:10px 16px;",""],l&&"padding-bottom: 9px;"),(i||e)&&o.css(["outline:1px solid;outline-offset:-1px;z-index:",";"," "," "," "," &:hover{outline:1px solid;outline-offset:-1px;"," "," "," ","}"],f?1:2,e&&!i&&o.css(["outline-color:var(--colorsSemanticInfo500);"]),i&&o.css(["outline-color:var(--colorsSemanticCaution500);"]),"top"===c&&o.css(["border-bottom-color:transparent;"]),"left"===c&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px"),e&&!i&&o.css(["outline-color:var(--colorsSemanticInfo500);"]),i&&o.css(["outline-color:var(--colorsSemanticCaution500);"]),"top"===c&&o.css(["border-bottom-color:transparent;",""],r&&o.css(["padding-bottom:2px;"])),"left"===c&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px")),t&&o.css(["outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;z-index:",";"," "," &:hover{outline:2px solid var(--colorsSemanticNegative500);outline-offset:-2px;"," ","}"],f?1:2,"top"===c&&o.css(["border-bottom-color:transparent;"]),"left"===c&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px"),"top"===c&&o.css(["border-bottom-color:transparent;",""],r&&o.css(["padding-bottom:2px;"])),"left"===c&&o.css(["border-right-color:transparent;padding-right:",";"],"large"===s?"26px":"18px")),n&&!r&&"top"===c&&o.css(["height:20px;"]),r&&o.css(["display:flex;"," ",""],"left"===c&&o.css(["padding:",";"," ",""],"large"===s?"2px":"0px",a&&o.css(["padding-right:0px;"]),(t||i||e)&&o.css(["padding-right:",";"],"large"===s?"26px":"18px")),"top"===c&&o.css(["padding:",";"," ",""],"large"===s?"2px":"0px",a&&o.css(["padding-bottom:0px;"]),(t||i||e)&&o.css(["padding-bottom:",";padding-right:",";&:hover{padding-bottom:",";}"],"large"===s?"4px":"2px","large"===s?"18px":"14px","large"===s?"4px":"2px")))))),a=o.css(["background-color:transparent;display:inline-block;border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);font-weight:500;position:relative;border:none;cursor:pointer;font-size:14px;padding:0px;text-decoration:none;outline-offset:0px;margin:0;",";"," a:visited{color:inherit;}",""],(({position:o})=>"top"===o&&"white-space: nowrap"),(({position:r})=>o.css(["",""],"left"===r&&o.css(["border-top-right-radius:var(--borderRadius000);"]))),(({size:t,position:i="top",borders:e=!1,noRightBorder:a,noLeftBorder:n,isTabSelected:l,alternateStyling:c,error:d,warning:p,info:g,isInSidebar:b,validationRedesignOptIn:x})=>o.css(["height:",";"," "," "," ",' &:focus{outline:4px solid black;top:-2px;z-index:6;> span[data-role="tab-title-content"]{outline:none;',"}",' ::before{content:"";position:absolute;top:0;left 0;bottom:0;right:',";outline:3px solid var(--colorsSemanticFocus500);",' outline-offset:-2px;z-index:5;}> [data-element="tab-selected-indicator"]{z-index:4;',"}}}"," "," & ","{{","}"],"large"===t?"var(--sizing600)":"var(--sizing500)","top"===i&&o.css(["",""],e&&!(a||n)&&o.css(["&:nth-of-type(n + 1):not(:first-of-type){margin-left:-1px;}&:first-child{margin-left:0;}"])),"left"===i&&o.css(["",""],e&&o.css(["&:nth-of-type(n + 1):not(:first-of-type){margin-top:-1px;}&:first-child{margin-top:0;}"])),!l&&o.css(["color:var(--colorsActionMinorYin090);"," &:hover{background:var(--colorsActionMinor100);"," color:var(--colorsActionMinorYin090);outline:none;}&:focus{color:var(--colorsActionMinorYin090);outline:none;}"],x&&o.css(["background:transparent;"]),x&&o.css(["background:var(--colorsUtilityMajor100);"])),l&&o.css(["color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMajorYang100);"," &:hover{background-color:var(--colorsActionMajorYang100);border-bottom-color:",";color:var(--colorsActionMajorYin090);cursor:default;}"],(d||p||g)&&o.css(["padding-bottom:0px;"]),c?"var(--colorsActionMinor100)":"var(--colorsActionMajor500)"),"top"===i&&"top: 2px;","top"===i?o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]):o.css(["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?"0":"-1px","top"===i?o.css(["border-top-left-radius:var(--borderRadius100);border-top-right-radius:var(--borderRadius100);"]):o.css(["border-top-left-radius:var(--borderRadius100);border-bottom-left-radius:var(--borderRadius100);"]),"top"===i?o.css(["bottom:2px;left:2px;right:1px;"]):o.css(["bottom:2px;right:1px;"]),"left"===i&&o.css(["background-color:transparent;border-bottom:0px;"," "," display:flex;height:auto;margin-left:0px;&:first-child{margin-top:0;}&:hover{","}"," "," ",""],!b&&!d&&o.css(["--border-right-value:",";border-right:"," solid var(--colorsActionMinor100);"],x?"0px":"2px",c?"1px":"var(--border-right-value)"),!e&&o.css(["","{border-bottom:none;}"],s),c&&"border-right-color: var(--colorsActionMinor100)",(p||g)&&o.css(["border-right:none;"]),!l&&o.css(["border-right-color:var(--colorsActionMinor100);"]),l&&o.css([""," "," background-color:var(--colorsActionMajorYang100);&:hover{"," background-color:var(--colorsActionMajorYang100);","}&:focus{","}"],c&&o.css(["border-right-color:var(--colorsActionMinor100);"]),!c&&o.css(["border-right:none;padding-bottom:0px;","{"," border-right:none;}"],s,!(d||p||g)&&!x&&"margin-right: 2px;"),c&&"border-right-color: var(--colorsActionMinor100);",(d||p||g)&&"border-right-color: var(--colorsSemanticNegative500);",(d||p||g)&&"border-right-color: var(--colorsSemanticNegative500);")),c&&o.css(["&:focus{background-color:var(--colorsActionMinor200);}&:hover{background-color:",";}",""],l?"var(--colorsActionMinor200)":"var(--colorsActionMinor250)",l&&o.css(["background-color:var(--colorsActionMinor200);"])),r.default,x?"margin-top: 10px;":"margin-top: 2px;"))),n=e.default.button.withConfig({displayName:"tab-title.style__StyledTabTitleButton",componentId:"sc-a4fb41f5-1"})(["",""],a),l=e.default.a.withConfig({displayName:"tab-title.style__StyledTabTitleLink",componentId:"sc-a4fb41f5-2"})(["",""],a),c=e.default.div.withConfig({displayName:"tab-title.style__StyledLayoutWrapper",componentId:"sc-a4fb41f5-3"})(["",""],(({hasCustomLayout:i,titlePosition:e="before",hasCustomSibling:s,validationRedesignOptIn:a})=>o.css([""," ",""],i&&o.css(["flex-grow:2;"]),!i&&o.css(["display:inline-flex;position:relative;top:-1px;"," "," ","{height:20px;}","{z-index:10;","{height:",";left:-2px;}}"],s&&o.css(["left:4px;"]),!s&&o.css(["",""],"before"===e?"left: 8px;":"right: 8px;"),r.default,t.default,r.default,a?"0px":"16px")))),d=e.default.div.withConfig({displayName:"tab-title.style__StyledVerticalIndicator",componentId:"sc-a4fb41f5-4"})(["position:absolute;top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--colorsActionMinor100);width:2px;z-index:1;"]),p=e.default.div.withConfig({displayName:"tab-title.style__StyledSelectedIndicator",componentId:"sc-a4fb41f5-5"})(["position:absolute;z-index:1;"," "," &:focus{bottom:3px;left:3px;right:3px;}"],(r=>o.css(["",""],r&&o.css(["z-index:2;"]))),(({position:r="top",warning:t,error:i})=>o.css(["--selected-indicator-color:var(--colorsActionMajor500);"," "," "," ",""],t&&o.css(["--selected-indicator-color:var(--colorsSemanticCaution500);"]),i&&o.css(["--selected-indicator-color:var(--colorsSemanticNegative500);"]),"top"===r&&o.css(["bottom:-1px;left:0px;right:0px;box-shadow:inset 0px calc(-1 * var(--sizing050)) 0px var(--selected-indicator-color);height:var(--sizing050);"]),"left"===r&&o.css(["top:0px;bottom:0px;right:0px;box-shadow:inset calc(-1 * var(--sizing050)) 0px 0px 0px var(--selected-indicator-color);width:var(--sizing050);"]))));exports.StyledLayoutWrapper=c,exports.StyledSelectedIndicator=p,exports.StyledTabTitleButton=n,exports.StyledTabTitleLink=l,exports.StyledTitleContent=s,exports.StyledVerticalIndicator=d;
@@ -0,0 +1,2 @@
1
+ export { Tabs, Tab, TabList, TabPanel } from "./tabs.component";
2
+ export type { TabsProps, TabProps } from "./tabs.types";
@@ -0,0 +1 @@
1
+ "use strict";var a=require("./tabs.component.js");exports.Tab=a.Tab,exports.TabList=a.TabList,exports.TabPanel=a.TabPanel,exports.Tabs=a.Tabs;
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../../esm/components/tabs/__next__/index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import { TabContextProps } from "./tabs.types";
3
+ export declare const TabContext: React.Context<TabContextProps>;
4
+ interface TabProviderProps {
5
+ children?: React.ReactNode;
6
+ tabId: string;
7
+ visible: boolean;
8
+ }
9
+ export declare const TabProvider: ({ children, tabId, visible }: TabProviderProps) => React.JSX.Element;
10
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./tabs.style.js");const i=r.createContext({tabId:""});exports.TabContext=i,exports.TabProvider=({children:r,tabId:s,visible:a})=>e.jsx(i.Provider,{value:{tabId:s},children:e.jsx(t.StyledTabProvider,{visible:a,children:r})});
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import { TabListProps, TabPanelProps, TabProps, TabsProps } from "./tabs.types";
3
+ export declare const TabPanel: ({ children, id, tabId }: TabPanelProps) => React.JSX.Element;
4
+ export declare const Tab: ({ controls, error, id, label, leftSlot, rightSlot, warning, info, }: TabProps) => React.JSX.Element;
5
+ export declare const TabList: ({ ariaLabel, children }: TabListProps) => React.JSX.Element;
6
+ export declare const Tabs: ({ children, labelledBy, orientation, selectedTabId, size, }: TabsProps) => React.JSX.Element;
7
+ export default Tabs;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../typography/typography.component.js"),a=require("./tabs.context.js"),l=require("./tabs.style.js"),n=require("../../../__internal__/utils/logger/index.js"),i=require("../../../hooks/__internal__/useResizeObserver/useResizeObserver.js"),s=require("../../icon/icon.component.js"),o=require("./tab.context.js");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(t);let u=!1;const b=({children:t,labelledBy:r="",orientation:n="horizontal",selectedTabId:i,size:s="medium"})=>e.jsx(a.TabsProvider,{labelledBy:r,orientation:n,selectedTabId:i,size:s,children:e.jsx(l.StyledTabs,{id:"tabs-container",orientation:n,children:t})});exports.Tab=({controls:r,error:i=!1,id:c,label:d,leftSlot:b,rightSlot:f,warning:h=!1,info:p=!1})=>{const[x,g]=t.useState(i),[y,j]=t.useState(h),[v,S]=t.useState(p),{activeTab:T,focusIndex:I,orientation:k,setActiveTab:m,setCurrentTabId:w,setFocusIndex:_,size:z,errors:L,warnings:q,infos:A}=a.useTabs(),P=T===c;t.useEffect((()=>{P&&w(c)}),[c,P,w]),!b&&!f||"string"==typeof d||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(I===c){const e=document.getElementById(c);null==e||e.focus()}}),[I,c,w]),t.useEffect((()=>{let e=L[c],t=q[c],r=A[c];if(i&&!e&&(e={static:i}),h&&!t&&(t={static:h}),p&&!r&&(r={static:p}),!e)return void g(!1);const a=Object.keys(e).map((t=>e[t])).filter((e=>!1!==e)),l=i||a.length>0;if(g(l),!t)return void j(!1);const n=Object.keys(t).map((e=>t[e])).filter((e=>!1!==e)),s=h||n.length>0;if(j(s),!r)return void S(!1);const o=Object.keys(r).map((e=>r[e])).filter((e=>!1!==e)),d=p||o.length>0;S(d)}),[i,c,L,q,h,A,p]);const E=()=>{if(x||y||v){if(x)return e.jsx(s.default,{"data-role":"icon-error",type:"error",color:"#db004e"});if(y)return e.jsx(s.default,{"data-role":"icon-warning",type:"warning",color:"#d64309"});if(v)return e.jsx(s.default,{"data-role":"icon-info",type:"info",color:"#0060a7ff"})}return null};return e.jsx(o.TabProvider,{tabId:c,visible:!0,children:e.jsx(l.StyledTab,{activeTab:T===c,"aria-controls":r,"aria-selected":P?"true":"false",error:x,info:v,id:c,onClick:()=>{m(c),_(c)},orientation:k,role:"tab",size:z,type:"button",tabIndex:T===c?0:-1,warning:y,children:"string"==typeof d?e.jsxs("span",{className:"tab-title-content-wrapper",children:[b,d,f,E()]}):e.jsxs("span",{className:"tab-title-content-wrapper",children:[d,E()]})})})},exports.TabList=({ariaLabel:n,children:o})=>{const c=d.default.useRef(null),{activeTab:u,focusIndex:b,orientation:f,selectedTabId:h,setFocusIndex:p,setActiveTab:x,size:g}=a.useTabs(),y=t.useCallback((()=>{var e;const t=(null===(e=c.current)||void 0===e?void 0:e.querySelectorAll("[role='tab']"))||[];return Array.from(t).map((e=>e.id)).filter((e=>e))}),[]);t.useEffect((()=>{if(h)x(h);else if(!u){const e=y()[0];x(e)}}),[u,y,h,x]);const[j,v]=t.useState(!1),[S,T]=t.useState(!1),[I,k]=t.useState(!1),m=t.useCallback((()=>{if(c.current){const e=c.current.scrollWidth-c.current.clientWidth-20;v(e>0),T(c.current.scrollLeft>=20),k(c.current.scrollLeft<=e)}}),[]);i.default(c,(()=>{m()})),t.useEffect((()=>{c.current&&m()}),[m]);const w=e=>{c.current&&("left"===e?c.current.scrollLeft-=200:c.current.scrollLeft+=200,m())};return e.jsxs(e.Fragment,{children:[e.jsx(r.Typography,{id:"tablist-aria-label",screenReaderOnly:!0,children:n}),e.jsxs(l.StyledTabListWrapper,{children:["vertical"!==f&&j?S?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-left",id:"tab-navigation-button-left",onClick:()=>w("left"),size:g,tabIndex:-1,title:"Scroll Tabs Left",type:"button",children:e.jsx(s.default,{type:"chevron_left"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:g}):null,e.jsxs(l.StyledTabList,{ariaLabel:n,"aria-labelledby":"tablist-aria-label",id:"tablist",onKeyDown:e=>{const t=y(),r=t.indexOf(b||u),a=t.length-1;if(-1===r)return;let l=r;switch(e.key){case"Home":l=0;break;case"End":l=a;break;case"ArrowRight":l=(r+1)%t.length;break;case"ArrowLeft":l=(r-1+t.length)%t.length;break;case"ArrowUp":"vertical"===f&&(l=(r-1+t.length)%t.length);break;case"ArrowDown":"vertical"===f&&(l=(r+1)%t.length);break;case"Enter":case" ":return void x(u);default:return}p(t[l])},orientation:f,ref:c,role:"tablist",size:g,tabIndex:-1,children:[o,e.jsx(l.Spacer,{})]}),"vertical"!==f&&j?I?e.jsx(l.StyledScrollButton,{"data-role":"tab-navigation-button-right",id:"tab-navigation-button-right",onClick:()=>w("right"),size:g,tabIndex:-1,title:"Scroll Tabs Right",type:"button",children:e.jsx(s.default,{type:"chevron_right"})}):e.jsx(l.StyledScrollButtonPlaceholder,{size:g}):null]})]})},exports.TabPanel=({children:t,id:r,tabId:n})=>{const{activeTab:i}=a.useTabs();return e.jsx(o.TabProvider,{tabId:n,visible:n===i,children:e.jsx(l.StyledTabPanel,{id:r,role:"tabpanel","aria-labelledby":n,children:t})})},exports.Tabs=b,exports.default=b;
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { TabsContextProps } from "./tabs.types";
3
+ export declare const TabsContext: React.Context<TabsContextProps>;
4
+ export declare const useTabs: () => TabsContextProps;
5
+ interface TabsProviderProps {
6
+ children?: React.ReactNode;
7
+ isInTab?: boolean;
8
+ labelledBy?: string;
9
+ orientation: "horizontal" | "vertical";
10
+ selectedTabId?: string;
11
+ size: "medium" | "large";
12
+ }
13
+ export declare const TabsProvider: ({ children, isInTab, labelledBy, orientation, selectedTabId, size, }: TabsProviderProps) => React.JSX.Element;
14
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("react");function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),s.forEach((function(t){r(e,t,n[t])}))}return e}const s={activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}},a=t.createContext(s);exports.TabsContext=a,exports.TabsProvider=({children:r,isInTab:s=!0,labelledBy:o,orientation:i,selectedTabId:c="",size:u})=>{const[b,l]=t.useState(c),[d,f]=t.useState(c),[T,I]=t.useState(""),[x,v]=t.useState({}),[y,g]=t.useState({}),[p,C]=t.useState({}),O=t.useCallback(((e,t,r)=>{const s={[t]:{[e]:r}};v((a=>(a[t]||(a[t]={}),a[t][e]!==r?n({},a,s):a)))}),[]),S=t.useCallback(((e,t,r)=>{const s={[t]:{[e]:r}};g((a=>(a[t]||(a[t]={}),a[t][e]!==r?n({},a,s):a)))}),[]),j=t.useCallback(((e,t,r)=>{const s={[t]:{[e]:r}};C((a=>(a[t]||(a[t]={}),a[t][e]!==r?n({},a,s):a)))}),[]);return e.jsx(a.Provider,{value:{activeTab:b,currentTabId:d,focusIndex:T,isInTab:s,labelledBy:o,orientation:i,setActiveTab:l,setCurrentTabId:f,setFocusIndex:I,setErrors:O,setWarnings:S,size:u,errors:x,warnings:y,infos:p,setInfos:j},children:r})},exports.useTabs=()=>t.useContext(a);
@@ -0,0 +1,30 @@
1
+ import { TabListProps, TabProps } from "./tabs.types";
2
+ interface StyledTabListProps extends TabListProps {
3
+ orientation: "horizontal" | "vertical";
4
+ size: "medium" | "large";
5
+ }
6
+ export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const StyledTabList: import("styled-components").StyledComponent<"div", any, StyledTabListProps, never>;
8
+ export declare const StyledTabListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const Spacer: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const StyledScrollButton: import("styled-components").StyledComponent<"button", any, {
11
+ size: "medium" | "large";
12
+ }, never>;
13
+ export declare const StyledScrollButtonPlaceholder: import("styled-components").StyledComponent<"div", any, {
14
+ size: "medium" | "large";
15
+ }, never>;
16
+ interface StyledTabProps extends Omit<TabProps, "controls" | "index" | "label"> {
17
+ activeTab: boolean;
18
+ error?: string | boolean;
19
+ warning?: string | boolean;
20
+ orientation: "horizontal" | "vertical";
21
+ size: "medium" | "large";
22
+ }
23
+ export declare const StyledTab: import("styled-components").StyledComponent<"button", any, StyledTabProps, never>;
24
+ export declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {
25
+ orientation?: "horizontal" | "vertical";
26
+ }, never>;
27
+ export declare const StyledTabProvider: import("styled-components").StyledComponent<"div", any, {
28
+ visible: boolean;
29
+ }, never>;
30
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";var t=require("styled-components"),e=require("../../../style/utils/add-focus-styling.js");function o(t){return t&&t.__esModule?t:{default:t}}var i=o(t);const d={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}},r=i.default.div.withConfig({displayName:"tabs.style__StyledTabPanel",componentId:"sc-4305491c-0"})(["padding:0 6px;"]),a=i.default.div.withConfig({displayName:"tabs.style__StyledTabList",componentId:"sc-4305491c-1"})(["display:flex;"," width:100%;height:fit-content;white-space:nowrap;padding:6px;overflow-x:hidden;"],(({orientation:e})=>t.css(["flex-direction:",";",":8px;"],"vertical"===e?"column":"row","horizontal"===e?"margin-bottom":"margin-right"))),n=i.default.div.withConfig({displayName:"tabs.style__StyledTabListWrapper",componentId:"sc-4305491c-2"})(["display:flex;z-index:6;"]),p=i.default.div.withConfig({displayName:"tabs.style__Spacer",componentId:"sc-4305491c-3"})(["align-self:flex-end;background:#8b8b8bff;flex-grow:1;height:2px;"]),s=i.default.button.withConfig({displayName:"tabs.style__StyledScrollButton",componentId:"sc-4305491c-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:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),l=i.default.div.withConfig({displayName:"tabs.style__StyledScrollButtonPlaceholder",componentId:"sc-4305491c-5"})(["height:",";width:",";border-radius:0;border-color:#8b8b8bff;border:none;border-bottom:2px solid #8b8b8bff;top:4px;position:relative;"],(({size:t})=>"medium"===t?"40px":"48px"),(({size:t})=>"medium"===t?"40px":"48px")),b=i.default.button.withConfig({displayName:"tabs.style__StyledTab",componentId:"sc-4305491c-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;border-radius:8px;}"],(({activeTab:e,size:o})=>e&&"large"===o&&t.css(["margin-top:-4px;"])),(({size:e})=>t.css(["font-size:","px;height:","px;padding:","px ","px;"],d[e].fontSize,d[e].height,d[e].paddingY,d[e].paddingX)),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>e&&"horizontal"===r&&t.css(["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;}"],d[a].paddingY-4,d[a].paddingX-2,d[a].paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))),(({activeTab:e,error:o,info:i,orientation:r,size:a,warning:n})=>"vertical"===r?t.css(["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,e&&t.css(["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"===a?d.medium.paddingY-2:4,d[a].paddingX-2,"medium"===a?d.medium.paddingY-2:d.large.paddingY,d[a].paddingX-2,(()=>o?"#db004e":n?"#d64309":i?"#0060a7ff":"black"))):t.css([""])),e.default()),c=i.default.div.withConfig({displayName:"tabs.style__StyledTabs",componentId:"sc-4305491c-7"})(["display:flex;",""],(({orientation:e})=>t.css(["flex-direction:",";"],"horizontal"===e?"column":"row"))),g=i.default.div.withConfig({displayName:"tabs.style__StyledTabProvider",componentId:"sc-4305491c-8"})(["",""],(({visible:e})=>t.css(["display:",";"],e?"block":"none")));exports.Spacer=p,exports.StyledScrollButton=s,exports.StyledScrollButtonPlaceholder=l,exports.StyledTab=b,exports.StyledTabList=a,exports.StyledTabListWrapper=n,exports.StyledTabPanel=r,exports.StyledTabProvider=g,exports.StyledTabs=c;
@@ -0,0 +1,51 @@
1
+ import React, { Dispatch, SetStateAction } from "react";
2
+ export type TabValidationRecord = Record<string, string | boolean>;
3
+ export type ValidationRecord = Record<string, TabValidationRecord>;
4
+ export interface TabContextProps {
5
+ tabId?: string;
6
+ }
7
+ export interface TabsContextProps {
8
+ activeTab: string;
9
+ currentTabId?: string;
10
+ focusIndex: string;
11
+ isInTab?: boolean;
12
+ labelledBy?: string;
13
+ orientation: "horizontal" | "vertical";
14
+ selectedTabId?: string;
15
+ setActiveTab: Dispatch<SetStateAction<string>>;
16
+ setFocusIndex: Dispatch<SetStateAction<string>>;
17
+ setCurrentTabId: Dispatch<SetStateAction<string>>;
18
+ setErrors: (childId: string, tabId: string, error: string | boolean) => void;
19
+ setWarnings: (childId: string, tabId: string, warning: string | boolean) => void;
20
+ errors: ValidationRecord;
21
+ warnings: ValidationRecord;
22
+ size: "medium" | "large";
23
+ infos: ValidationRecord;
24
+ setInfos: (childId: string, tabId: string, info: string | boolean) => void;
25
+ }
26
+ export interface TabPanelProps {
27
+ children?: React.ReactNode;
28
+ id: string;
29
+ tabId: string;
30
+ }
31
+ export interface TabListProps {
32
+ ariaLabel: string;
33
+ children?: React.ReactNode;
34
+ }
35
+ export interface TabProps {
36
+ controls: string;
37
+ id: string;
38
+ error?: boolean | string;
39
+ label: React.ReactNode;
40
+ leftSlot?: React.ReactNode;
41
+ rightSlot?: React.ReactNode;
42
+ warning?: boolean | string;
43
+ info?: boolean | string;
44
+ }
45
+ export interface TabsProps {
46
+ children?: React.ReactNode;
47
+ labelledBy?: string;
48
+ orientation?: "horizontal" | "vertical";
49
+ selectedTabId?: string;
50
+ size?: "medium" | "large";
51
+ }
@@ -4,5 +4,5 @@ export interface TabContextProps {
4
4
  setWarning?: (childId: string, warning?: boolean | string) => void;
5
5
  setInfo?: (childId: string, info?: boolean | string) => void;
6
6
  }
7
- declare const _default: React.Context<TabContextProps>;
8
- export default _default;
7
+ export declare const TabContext: React.Context<TabContextProps>;
8
+ export default TabContext;
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")).default.createContext({});exports.default=t;
1
+ "use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).default.createContext({});exports.TabContext=t,exports.default=t;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/tab.context.js"),o=require("../../../__internal__/utils/logger/index.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){l(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 u=!1;const c=l=>{var{ariaLabelledby:c,children:b,isTabSelected:p,position:f="top",role:d="tabpanel",tabId:O,updateErrors:y,updateWarnings:j,updateInfos:g,href:P,title:h,titleProps:v}=l,_=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(l,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);void 0===P||u||(o.default.deprecate("The `href` prop is deprecated in the `Tab` component and will be removed in a future release."),u=!0);const[m,w]=t.useState({}),[S,x]=t.useState({}),[E,k]=t.useState({}),q=t.useCallback(((e,t)=>{w((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),I=t.useCallback(((e,t)=>{x((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),T=t.useCallback(((e,t)=>{k((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]);return t.useEffect((()=>{y&&y(O,m)}),[O,m,y]),t.useEffect((()=>{j&&j(O,S)}),[O,S,j]),t.useEffect((()=>{g&&g(O,E)}),[O,E,g]),e.jsx(a.default.Provider,{value:{setError:q,setWarning:I,setInfo:T},children:e.jsx(r.default,s(i({role:d,isTabSelected:p,"aria-labelledby":c,position:f},_,n.default("tab",_)),{children:!P&&b}))})};exports.Tab=c,exports.default=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("./__internal__/tab.context.js"),o=require("../../../__internal__/utils/logger/index.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){l(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 u=!1;const c=l=>{var{ariaLabelledby:c,children:b,isTabSelected:p,position:f="top",role:d="tabpanel",tabId:O,updateErrors:y,updateWarnings:j,updateInfos:g,href:P,title:h,titleProps:v}=l,_=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(l,["ariaLabelledby","children","isTabSelected","position","role","tabId","updateErrors","updateWarnings","updateInfos","href","title","titleProps"]);void 0===P||u||(o.default.deprecate("The `href` prop is deprecated in the `Tab` component and will be removed in a future release."),u=!0);const[m,w]=t.useState({}),[S,x]=t.useState({}),[E,T]=t.useState({}),k=t.useCallback(((e,t)=>{w((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),q=t.useCallback(((e,t)=>{x((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]),I=t.useCallback(((e,t)=>{T((r=>r[e]!==t?s(i({},r),{[e]:t}):r))}),[]);return t.useEffect((()=>{y&&y(O,m)}),[O,m,y]),t.useEffect((()=>{j&&j(O,S)}),[O,S,j]),t.useEffect((()=>{g&&g(O,E)}),[O,E,g]),e.jsx(a.TabContext.Provider,{value:{setError:k,setWarning:q,setInfo:I},children:e.jsx(r.default,s(i({role:d,isTabSelected:p,"aria-labelledby":c,position:f},_,n.default("tab",_)),{children:!P&&b}))})};exports.Tab=c,exports.default=c;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "158.0.0",
3
+ "version": "158.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",