@progress/kendo-react-layout/tabstrip/TabStrip.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 ce=require("react"),l=require("prop-types"),ne=require("./TabStripNavigation.js"),ae=require("./TabStripContent.js"),B=require("@progress/kendo-react-common");function ue(g){const C=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const u in g)if(u!=="default"){const p=Object.getOwnPropertyDescriptor(g,u);Object.defineProperty(C,u,p.get?p:{enumerable:!0,get:()=>g[u]})}}return C.default=g,Object.freeze(C)}const n=ue(ce),de={animation:!0,tabPosition:"top",tabAlignment:"start",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,scrollButtons:"auto",scrollButtonsPosition:"split",renderAllContent:!1},E=n.forwardRef((g,C)=>{const u=n.useMemo(()=>({...de,...g}),[g]),{id:p,animation:H,children:j,selected:d,onSelect:z,style:oe,tabContentStyle:q,tabPosition:f,tabAlignment:W,tabIndex:L,className:K,dir:x,renderAllContent:O,keepTabsMounted:_,size:k,scrollable:h,scrollButtons:R,scrollButtonsPosition:F,buttonScrollSpeed:U,mouseScrollSpeed:$,prevButton:G,nextButton:J}=u,[S,se]=n.useState(null),Q=n.useRef({props:u}),I=n.useRef(null),A=n.useRef(null),y=n.useRef(void 0),P=n.useRef(void 0),V=n.useCallback(()=>({props:u}),[u]);n.useImperativeHandle(Q,V),n.useImperativeHandle(C,V),B.useWebMcpRegister("tabstrip",Q,u,u.webMcp);const w=n.useMemo(()=>p?p+"-content-panel-id":void 0,[p]),M=n.useMemo(()=>p?p+"-nav-item-id":void 0,[p]),v=n.useMemo(()=>n.Children.toArray(j).filter(Boolean),[j]),X=n.useCallback(()=>/top|bottom/.test(f||"top"),[f]),T=n.useCallback(()=>{const s=X(),i=A.current;if(!i)return;const a=i.scrollLeft,t=i.clientWidth,e=i.scrollWidth,r=i.scrollTop,o=i.scrollHeight,b=i.clientHeight;let c=null;const ie=s?e>t:o>b,te=x==="rtl";ie?s?a+t===e||(te&&t-a)===e?c="end":a===0||te&&-a===0?c="start":a>0&&a+t<e||-a>0&&t-a<e?c="middle":c=null:o-(r+b)===0?c="bottom":r===0?c="top":r>0&&o-(r+b)>0?c="middle":c=null:c=null,se(c)},[X,x]),N=n.useCallback(s=>{d!==s&&z&&z({selected:s})},[d,z]),m=n.useCallback(s=>{var t,e;const i=v;((e=(t=i==null?void 0:i[s])==null?void 0:t.props)==null?void 0:e.disabled)||N(s)},[v,N]),Y=n.useCallback(s=>{P.current&&P.current.triggerKeyboardEvent(s)},[]);n.useEffect(()=>{var a;const s=I.current,i=s&&getComputedStyle(s).direction==="rtl"||!1;return s&&(P.current=new B.Navigation({tabIndex:0,root:I,rovingTabIndex:!0,focusClass:"k-focus",selectors:[".k-tabstrip .k-tabstrip-item"],keyboardEvents:{keydown:{ArrowLeft:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),b=o!==0?o-1:e.elements.length-1,c=o!==e.elements.length-1?o+1:0;i?(e.focusNext(t),m(c)):(e.focusPrevious(t),m(b))},ArrowRight:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),b=o!==0?o-1:e.elements.length-1,c=o!==e.elements.length-1?o+1:0;i?(e.focusPrevious(t),m(b)):(e.focusNext(t),m(c))},ArrowDown:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),b=o!==e.elements.length-1?o+1:0;e.focusNext(t),m(b)},ArrowUp:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),b=o!==0?o-1:e.elements.length-1;e.focusPrevious(t),m(b)},Home:(t,e,r)=>{r.preventDefault(),e.focusElement(e.first,t),m(0)},End:(t,e,r)=>{r.preventDefault(),e.focusElement(e.last,t),m(e.elements.length-1)}}}}),(a=P.current)==null||a.initializeRovingTab(d),T(),y.current=window.ResizeObserver&&new ResizeObserver(()=>T()),I.current&&y.current&&y.current.observe(I.current)),()=>{var t;(t=P.current)==null||t.removeFocusListener(),y.current&&y.current.disconnect()}},[d,m,T]);const re=n.useMemo(()=>{const s=n.Children.count(v);return d<s&&d>-1?n.createElement(ae.TabStripContent,{index:d,selected:d,contentPanelId:w,navItemId:M,animation:H,keepTabsMounted:_,renderAllContent:O,style:q},v):null},[d,v,w,M,H,_,O,q]),D=R==="hidden"||S===null&&R==="auto"?"hidden":"visible",Z=n.useMemo(()=>({itemsNavRef:A,children:v,selected:d,tabIndex:L,tabPosition:f,tabAlignment:W,size:k,scrollable:h,scrollButtons:D,scrollButtonsPosition:F,buttonScrollSpeed:U,mouseScrollSpeed:$,prevButton:G,nextButton:J,dir:x,contentPanelId:w,renderAllContent:O,navItemId:M,onKeyDown:Y,onSelect:N,onScroll:T,containerScrollPosition:S}),[A,v,d,L,f,W,k,h,D,F,U,$,G,J,x,w,O,M,Y,N,T,S]),ee=f==="bottom",le=n.useMemo(()=>B.classNames("k-tabstrip k-pos-relative",{[`k-tabstrip-${B.kendoThemeMaps.sizeMap[k||"medium"]||k}`]:k,"k-tabstrip-left":f==="left","k-tabstrip-right":f==="right","k-tabstrip-bottom":f==="bottom","k-tabstrip-top":f==="top","k-tabstrip-scrollable":h,"k-tabstrip-scrollable-start k-tabstrip-scrollable-end":h&&D==="visible","k-tabstrip-scrollable-start":h&&R==="auto"&&(S==="end"||S==="middle"),"k-tabstrip-scrollable-end":h&&R==="auto"&&(S==="start"||S==="middle")},K),[k,f,h,R,D,S,K]);return n.createElement("div",{id:p,ref:I,dir:x,className:le,style:oe,onScroll:T},!ee&&n.createElement(ne.TabStripNavigation,{...Z}),re,ee&&n.createElement(ne.TabStripNavigation,{...Z}))});E.displayName="TabStrip";E.propTypes={id:l.string,animation:l.bool,children:l.node,onSelect:l.func,selected:l.number,style:l.object,tabContentStyle:l.object,tabPosition:l.string,tabAlignment:l.string,tabIndex:l.number,className:l.string,dir:l.string,renderAllContent:l.bool,size:l.oneOf(["small","medium","large"]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"])};const be=E;exports.TabStrip=be;