@progress/kendo-react-layout/tabstrip/TabStripNavigation.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ft=require("react"),l=require("prop-types"),ut=require("./TabStripNavigationItem.js"),M=require("@progress/kendo-react-common"),bt=require("@progress/kendo-react-buttons"),I=require("@progress/kendo-svg-icons"),dt=require("@progress/kendo-react-intl"),S=require("./messages/index.js");function mt(b){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const r in b)if(r!=="default"){const T=Object.getOwnPropertyDescriptor(b,r);Object.defineProperty(d,r,T.get?T:{enumerable:!0,get:()=>b[r]})}}return d.default=b,Object.freeze(d)}const n=mt(ft),vt=b=>Array.from({length:b}),C="smooth",v="prev",k="next",x=b=>{const{selected:d,tabPosition:r,tabAlignment:T,children:w,onSelect:y,onKeyDown:q,onScroll:P,navItemId:E,contentPanelId:F,renderAllContent:D,scrollable:H,scrollButtons:z,scrollButtonsPosition:m,tabIndex:_,buttonScrollSpeed:j,mouseScrollSpeed:W,prevButton:$,nextButton:K,dir:U,size:V,containerScrollPosition:h,itemsNavRef:ot}=b,nt=n.useRef(null),N=ot||nt,A=dt.useLocalization(),p=n.useCallback(()=>/top|bottom/.test(r||"top"),[r]),g=n.useCallback(()=>U==="rtl",[U]),X=n.useCallback(()=>{const t=N.current,e=t==null?void 0:t.children[d||0];if(e instanceof HTMLElement&&t instanceof HTMLElement){const s=p(),u=s?t.offsetWidth:t.offsetHeight,c=s?e.offsetWidth:e.offsetHeight,i=s?"left":"top";let o=s?t.scrollLeft:t.scrollTop,a=0;if(g()){const f=e.offsetLeft;o=o*-1,f<0?(a=f-c+t.offsetLeft,t.scrollTo({[i]:a,behavior:C})):f+c>u-o&&(a=o+f-c,t.scrollTo({[i]:a,behavior:C}))}else{const f=s?e.offsetLeft-t.offsetLeft:e.offsetTop-t.offsetTop;o+u<f+c?(a=f+c-u,t.scrollTo({[i]:a,behavior:C})):o>f&&(a=f,t.scrollTo({[i]:a,behavior:C}))}}},[N,d,p,g]);n.useEffect(()=>{H&&X()},[H,d,X]);const B=n.useCallback(()=>{P==null||P()},[P]),G=n.useCallback((t,e)=>{const s=N.current;if(!s)return;const u=p(),c=u?s.scrollWidth-s.offsetWidth:s.scrollHeight-s.offsetHeight,i=(e.type==="click"?j:W)||0;let o=u?s.scrollLeft:s.scrollTop;g()&&p()?(t===v&&o<0&&(o+=i),t===k&&o<c&&(o-=i),o=Math.min(0,Math.min(c,o))):(t===v&&o>0&&(o-=i),t===k&&o<c&&(o+=i),o=Math.max(0,Math.min(c,o)));const a=e.type==="click"?C:void 0;u?s.scrollTo({left:o,behavior:a}):s.scrollTo({top:o,behavior:a})},[N,p,g,j,W]),O=n.useCallback((t,e)=>{G(t,e)},[G]),J=n.useCallback(t=>{O(v,t)},[O]),Q=n.useCallback(t=>{O(k,t)},[O]),L=n.useCallback(t=>{const e=p(),s=g(),c=e?s?"chevron-right":"chevron-left":"chevron-up",i=s?I.chevronRightIcon:I.chevronLeftIcon,o=e?i:I.chevronUpIcon,f=e?s?"chevron-left":"chevron-right":"chevron-down",rt=s?I.chevronLeftIcon:I.chevronRightIcon,lt=e?rt:I.chevronDownIcon,R={prev:{arrowTab:"k-tabstrip-prev",fontIcon:c,svgIcon:o,title:A.toLanguageString(S.prevArrowTitle,S.messages[S.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:f,svgIcon:lt,title:A.toLanguageString(S.nextArrowTitle,S.messages[S.nextArrowTitle])}},ct=(t===v?$:K)||bt.Button,at=t===v?J:Q,it=h===null||t===v&&(h==="start"||h==="top")||t===k&&(h==="end"||h==="bottom");return n.createElement(ct,{disabled:it,className:M.classNames(`${R[t].arrowTab}`),onClick:at,icon:R[t].fontIcon,svgIcon:R[t].svgIcon,size:V,tabIndex:-1,fillMode:"flat",title:R[t].title})},[p,g,$,K,J,Q,h,V,A]),Y=n.Children.count(w),Z=n.Children.toArray(w),tt=n.useMemo(()=>w?vt(Y).map((t,e,s)=>{const u={active:d===e,disabled:Z[e].props.disabled,index:e,title:Z[e].props.title,first:e===0,last:e===s.length-1,contentPanelId:F,renderAllContent:D,id:E,onSelect:y,onScroll:B};return n.createElement(ut.TabStripNavigationItem,{key:`${E}-${e}`,...u})}):null,[w,Y,d,F,D,E,y,B]),st=n.useMemo(()=>M.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":r==="top"||r==="bottom","k-vstack":r==="left"||r==="right"}),[r]),et=n.useMemo(()=>M.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${T}`),[T]);return n.createElement("div",{className:st},H?n.createElement(n.Fragment,null,z!=="hidden"&&m&&["split","start","around","before"].includes(m)&&L(v),z!=="hidden"&&(m==="start"||m==="before")&&L(k),n.createElement("ul",{ref:N,className:et,role:"tablist",tabIndex:_,onKeyDown:q,onScroll:B,"aria-orientation":r==="left"||r==="right"?"vertical":void 0},tt),z!=="hidden"&&(m==="end"||m==="after")&&L(v),z!=="hidden"&&m&&["split","end","around","after"].includes(m)&&L(k)):n.createElement("ul",{className:et,role:"tablist",tabIndex:_,onKeyDown:q},tt))};x.propTypes={children:l.oneOfType([l.element,l.arrayOf(l.element)]),onSelect:l.func,onKeyDown:l.func,onScroll:l.func,selected:l.number,tabIndex:l.number,scrollable:l.bool,size:l.oneOf(["small","medium","large"]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:l.oneOf(["start","end","top","bottom","middle",null])};x.displayName="TabStripNavigation";exports.TabStripNavigation=x;