carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.94 kB
JavaScript
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as o,useRef as i,useContext as a}from"react";import{StyledTitleContent as l,StyledLayoutWrapper as s,StyledVerticalIndicator as c,StyledSelectedIndicator as d,StyledTabTitleLink as p,StyledTabTitleButton as b}from"./tab-title.style.js";import f from"../../../../__internal__/utils/helpers/tags/tags.js";import{ValidationIcon as u}from"../../../../__internal__/validations/validation-icon.component.js";import g from"../../../icon/icon.component.js";import m from"../../../../__internal__/utils/helpers/events/events.js";import{TooltipProvider as y}from"../../../../__internal__/tooltip-provider/index.js";import O from"./tab-title.context.js";import{Typography as h}from"../../../typography/typography.component.js";import v from"../../../carbon-provider/__internal__/new-validation.context.js";function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(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){j(e,t,r[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=n.forwardRef(((j,S)=>{var{isTabSelected:P,dataTabId:I,"data-role":k,title:x,position:R,error:B,warning:L,info:T,size:D="default",onClick:M,titlePosition:C="before",siblings:E,errorMessage:z="",warningMessage:K="",infoMessage:$="",borders:F,alternateStyling:H=!1,noLeftBorder:N=!1,noRightBorder:V=!1,customLayout:q,isInSidebar:A,href:G,onKeyDown:J,align:Q,tabIndex:U,id:W}=j,X=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}(j,["isTabSelected","dataTabId","data-role","title","position","error","warning","info","size","onClick","titlePosition","siblings","errorMessage","warningMessage","infoMessage","borders","alternateStyling","noLeftBorder","noRightBorder","customLayout","isInSidebar","href","onKeyDown","align","tabIndex","id"]);const Y=!!G,Z=H||A,ee=B||L||T,[te,re]=o(!1),ne=i(!1),{validationRedesignOptIn:oe}=a(v);let ie="";B?ie=z:L&&(ie=K);const ae=()=>{re(!0)},le=()=>{"object"!=typeof S||(null==S?void 0:S.current)===document.activeElement||ne.current||re(!1)},se=e(t,{children:[e(l,{"data-role":"tab-title-content",error:B,warning:L,info:T,position:R,size:D,noLeftBorder:N,noRightBorder:V,borders:F,hasSiblings:!!E,isTabSelected:P,hasCustomLayout:!!q,alternateStyling:Z,align:Q,hasHref:!!G,validationRedesignOptIn:oe,children:[(()=>{if(q)return r(s,{hasCustomLayout:!0,children:q});if(!E)return x;const e=r(n.Fragment,{children:x},"title"),t=r(s,{titlePosition:C,children:E},"title-siblings");return"before"===C?[e,t]:[t,e]})(),Y&&r(g,{type:"link"}),ee&&e(s,{position:R,hasCustomSibling:!!q,validationRedesignOptIn:oe,children:[B&&r(u,{tooltipPosition:"top",error:z}),!B&&L&&r(u,{tooltipPosition:"top",warning:K}),!L&&!B&&T&&r(u,{tooltipPosition:"top",info:$})]})]}),oe&&"left"===R&&r(c,{}),(!(ee||Z)||oe)&&P&&r(d,{warning:L,error:B,"data-element":"tab-selected-indicator","data-role":"tab-selected-indicator",position:R})]}),ce=_(w(_(w({"aria-selected":P,"data-element":"select-tab","data-tabid":I,"data-role":k,role:"tab",position:R,isTabSelected:P,error:B,warning:L,info:T,noRightBorder:V,noLeftBorder:N,alternateStyling:H||A,borders:F,isInSidebar:A,tabIndex:U,id:W},X,f("tab-header",w({id:W},X))),{onKeyDown:e=>G&&m.isEnterOrSpaceKey(e)?window.open(G,"_blank"):J(e),onClick:e=>{return e.preventDefault(),G?(M(e),window.open(G,"_blank")):("object"==typeof S&&(null==S||null===(t=S.current)||void 0===t||t.focus({preventScroll:!0})),M(e));var t},size:D,onMouseOver:()=>{ne.current=!0,ae()},onMouseLeave:()=>{ne.current=!1,le()},onFocus:ae,onBlur:le}),oe&&ee&&{"aria-invalid":!0,"aria-errormessage":`${W}-message`,"aria-describedby":`${W}-message`}),{validationRedesignOptIn:oe}),de=Y?r(p,_(w({},ce),{ref:S,href:G,target:"_blank",children:se})):r(b,_(w({},ce),{type:"button",ref:S,children:se}));return e(y,{tooltipVisible:!oe&&te,children:[r(O.Provider,{value:{isInTab:!0},children:de}),oe&&ee&&r(h,{screenReaderOnly:!0,id:`${W}-message`,children:ie})]})}));S.displayName="TabTitle";export{S as default};