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