carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 6.7 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("react"),r=require("./tab/tab.component.js"),n=require("../../__internal__/utils/helpers/events/events.js"),a=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../../__internal__/utils/logger/index.js"),o=require("./tabs.style.js"),s=require("./__internal__/tabs-header/tabs-header.component.js"),l=require("./__internal__/tab-title/tab-title.component.js"),d=require("../drawer/__internal__/drawer-sidebar.context.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){u(e,t,r[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let b=!1,f=!1,h=!1,g=!1,m=!1;const y=t.forwardRef(((r,u)=>{var{align:y="left",children:v,onTabChange:O,selectedTabId:j,renderHiddenTabs:w=!0,position:I="top",extendedLine:T=!0,size:S,borders:_="off",variant:x="default",validationStatusOverride:P,headerWidth:k,showValidationsSummary:C}=r,E=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(r,["align","children","onTabChange","selectedTabId","renderHiddenTabs","position","extendedLine","size","borders","variant","validationStatusOverride","headerWidth","showValidationsSummary"]);m||(i.default.deprecate("The current implementation of the `Tabs` component is deprecated and will be changing in a future release."),m=!0),C&&!g&&(i.default.deprecate("The `showValidationsSummary` prop in the `Tabs` component is deprecated and will be removed in a future release."),g=!0),"right"!==y||b||(i.default.deprecate("Support for the `right` value of `align` in the `Tabs` component is deprecated and will be removed in a future release."),b=!0),T||f||(i.default.deprecate("The `extendedLine` prop in the `Tabs` component is deprecated and will be removed in a future release."),f=!0),"off"===_||h||(i.default.deprecate("The `borders` prop in the `Tabs` component is deprecated and will be removed in a future release."),h=!0),"left"!==I&&void 0!==k&&i.default.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");const q=t.useMemo((()=>t.Children.toArray(v).filter((e=>e))),[v]),L=t.useMemo((()=>q.map((e=>e.props.tabId))),[q]),M=t.useMemo((()=>Array.from({length:q.length}).map((()=>t.createRef()))),[q.length]),W=t.useRef(j),[D,R]=t.useState(j||q[0].props.tabId),{isInSidebar:$}=t.useContext(d.default),[H,K]=t.useState({}),[z,B]=t.useState({}),[V,A]=t.useState({}),U=t.useCallback(((e,t)=>{K((r=>p(c({},r),{[e]:t})))}),[]),F=t.useCallback(((e,t)=>{B((r=>p(c({},r),{[e]:t})))}),[]),G=t.useCallback(((e,t)=>{A((r=>p(c({},r),{[e]:t})))}),[]),J=t.useCallback((e=>e===D),[D]),N=t.useCallback((e=>{J(e)||R(e),O&&O(e)}),[O,J]),Q=t.useCallback((()=>{const{current:e}=W,t=e?L.indexOf(e):-1;var r;-1!==t&&(null===(r=M[t].current)||void 0===r||r.blur())}),[L,M]);t.useEffect((()=>{W.current!==j&&(j!==D&&(R(j),Q()),W.current=j)}),[Q,W,j,D]);const X=e=>t=>{n.default.isEventType(t,"keydown")||N(e)},Y=e=>{var t,r;null===(t=e.current)||void 0===t||t.focus();const n=null===(r=e.current)||void 0===r?void 0:r.getBoundingClientRect();var a;n&&(n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)||null===(a=e.current)||void 0===a||a.scrollIntoView({behavior:"auto",inline:"center"}))},Z=(e,t)=>{e.preventDefault();let r=t;t<0?r=L.length-1:t===L.length&&(r=0);const n=M[r];Y(n)},ee=e=>t=>{const r=$||"left"===I,a=r&&n.default.isUpKey(t),i=r&&n.default.isDownKey(t),o=!r&&n.default.isLeftKey(t),s=!r&&n.default.isRightKey(t);a||o?Z(t,e-1):(i||s)&&Z(t,e+1)};return t.useImperativeHandle(u,(()=>({focusTab(e){const t=M[q.findIndex((t=>t.props.tabId===e))];t&&Y(t)}})),[q,M]),e.jsxs(o.default,p(c({position:$?"left":I,"data-role":"tabs",isInSidebar:$,headerWidth:k},E,a.default("tabs",E)),{children:[(()=>{const r=q.map(((e,r)=>{const{tabId:n,title:a,siblings:i,titlePosition:o,errorMessage:s,warningMessage:d,infoMessage:u,href:b,customLayout:f,titleProps:h}=e.props,g=`${n}-tab`,m=H[n],v=z[n],O=V[n],j=m&&Object.entries(m).filter((e=>e[1])).length,w=v&&Object.entries(v).filter((e=>e[1])).length,T=O&&Object.entries(O).filter((e=>e[1])).length,k=P&&P[n],E=k&&P[n].error,q=k&&P[n].warning,L=k&&P[n].info,W=void 0!==E?E:!!j,D=void 0!==q?q:!!w&&!W,R=void 0!==L?L:!!T&&!W&&!D,K=(e,t={})=>{const r=Object.values(t).filter((e=>e&&"string"==typeof e));return C&&r.length?1===r.length?r[0]:r.map((e=>`• ${e}`)).join("\n"):e};return t.createElement(l.default,p(c({},h),{position:$?"left":I,dataTabId:n,id:g,key:n,onClick:X(n),onKeyDown:ee(r),ref:M[r],tabIndex:J(n)?0:-1,title:a,href:b,isTabSelected:J(n),error:W,warning:D,info:R,size:S||"default",borders:"off"!==_,siblings:i,titlePosition:o,errorMessage:K(s,m),warningMessage:K(d,v),infoMessage:K(u,O),alternateStyling:"alternate"===x,noLeftBorder:["no left side","no sides"].includes(_),noRightBorder:["no right side","no sides"].includes(_),customLayout:f,isInSidebar:$,align:y}))}));return e.jsx(s.default,{align:y,position:$?"left":I,role:"tablist",extendedLine:T,noRightBorder:["no right side","no sides"].includes(_),isInSidebar:$,size:S||"default",children:r})})(),(()=>{if($)return null;if(!w){const e=q.find((e=>J(e.props.tabId)));return e&&t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))}return q.map((e=>t.cloneElement(e,p(c({},e.props),{role:"tabpanel",position:I,isTabSelected:J(e.props.tabId),key:`${e.props.tabId}-tab`,ariaLabelledby:`${e.props.tabId}-tab`,updateErrors:U,updateWarnings:F,updateInfos:G}))))})()]}))}));exports.Tab=r.Tab,exports.Tabs=y;