@progress/kendo-react-layout 7.4.0-develop.6 → 7.4.0-develop.8

package/index.d.mts

@@ -3792,6 +3792,7 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
         keepTabsMounted: boolean;
         buttonScrollSpeed: number;
         mouseScrollSpeed: number;
+        renderAllContent: boolean;
     };
     private _element;
     private get contentPanelId();
@@ -3834,8 +3835,9 @@ export declare class TabStripContent extends React_2.Component<TabStripContentPr
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX_2.Element | JSX_2.Element[] | null | undefined;
     private renderContent;
+    private renderAllContent;
     private renderChild;
     private childFactory;
 }
@@ -3864,6 +3866,10 @@ export declare interface TabStripContentProps {
      * @hidden
      */
     keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
     /**
      * @hidden
      */
@@ -3983,6 +3989,10 @@ export declare interface TabStripNavigationItemProps {
      * @hidden
      */
     contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
 }
 
 /**
@@ -4045,6 +4055,10 @@ export declare interface TabStripNavigationProps {
      * @hidden
      */
     navItemId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
 }
 
 /**
@@ -4101,6 +4115,12 @@ export declare interface TabStripProps extends KendoReactComponentBaseProps, Tab
      * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
      */
     keepTabsMounted?: boolean;
+    /**
+     * @default false
+     * Defines if the all component tabs will be rendered by default. Defaults to `false`.
+     * If set to `false`, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the [keepTabsMounted]({% slug api_layout_tabstripprops %}#toc-keeptabsmounted) prop.
+     */
+    renderAllContent?: boolean;
     /**
      * Fires each time the user makes a selection.
      */

package/index.d.ts

@@ -3792,6 +3792,7 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
         keepTabsMounted: boolean;
         buttonScrollSpeed: number;
         mouseScrollSpeed: number;
+        renderAllContent: boolean;
     };
     private _element;
     private get contentPanelId();
@@ -3834,8 +3835,9 @@ export declare class TabStripContent extends React_2.Component<TabStripContentPr
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX_2.Element | JSX_2.Element[] | null | undefined;
     private renderContent;
+    private renderAllContent;
     private renderChild;
     private childFactory;
 }
@@ -3864,6 +3866,10 @@ export declare interface TabStripContentProps {
      * @hidden
      */
     keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
     /**
      * @hidden
      */
@@ -3983,6 +3989,10 @@ export declare interface TabStripNavigationItemProps {
      * @hidden
      */
     contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
 }
 
 /**
@@ -4045,6 +4055,10 @@ export declare interface TabStripNavigationProps {
      * @hidden
      */
     navItemId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
 }
 
 /**
@@ -4101,6 +4115,12 @@ export declare interface TabStripProps extends KendoReactComponentBaseProps, Tab
      * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
      */
     keepTabsMounted?: boolean;
+    /**
+     * @default false
+     * Defines if the all component tabs will be rendered by default. Defaults to `false`.
+     * If set to `false`, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the [keepTabsMounted]({% slug api_layout_tabstripprops %}#toc-keeptabsmounted) prop.
+     */
+    renderAllContent?: boolean;
     /**
      * Fires each time the user makes a selection.
      */

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-layout",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1711442284,
+  publishDate: 1711458816,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "7.4.0-develop.6",
+  "version": "7.4.0-develop.8",
   "description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,11 +23,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.4.0-develop.6",
-    "@progress/kendo-react-common": "7.4.0-develop.6",
-    "@progress/kendo-react-intl": "7.4.0-develop.6",
-    "@progress/kendo-react-popup": "7.4.0-develop.6",
-    "@progress/kendo-react-progressbars": "7.4.0-develop.6",
+    "@progress/kendo-react-animation": "7.4.0-develop.8",
+    "@progress/kendo-react-common": "7.4.0-develop.8",
+    "@progress/kendo-react-intl": "7.4.0-develop.8",
+    "@progress/kendo-react-popup": "7.4.0-develop.8",
+    "@progress/kendo-react-progressbars": "7.4.0-develop.8",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/tabstrip/TabStrip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("prop-types"),p=require("./TabStripNavigation.js"),y=require("./TabStripContent.js"),i=require("@progress/kendo-react-common"),b=require("../package-metadata.js");function f(c){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>c[e]})}}return n.default=c,Object.freeze(n)}const a=f(u),h=class h extends a.Component{constructor(n){super(n),this._element=null,this.showLicenseWatermark=!1,this.keyBinding={[i.Keys.left]:()=>this.prevNavigatableTab(),[i.Keys.right]:()=>this.nextNavigatableTab(),[i.Keys.down]:()=>this.nextNavigatableTab(),[i.Keys.up]:()=>this.prevNavigatableTab(),[i.Keys.home]:()=>0,[i.Keys.end]:()=>a.Children.count(this.props.children)-1},this.onSelect=e=>{this.props.selected!==e&&this.props.onSelect&&this.props.onSelect({selected:e})},this.onKeyDown=e=>{let t;switch(e.keyCode){case i.Keys.left:t=this.keyBinding[this.invertKeys(i.Keys.left,i.Keys.right)];break;case i.Keys.right:t=this.keyBinding[this.invertKeys(i.Keys.right,i.Keys.left)];break;case i.Keys.up:t=this.keyBinding[i.Keys.up];break;case i.Keys.down:t=this.keyBinding[i.Keys.down];break;case i.Keys.home:t=this.keyBinding[i.Keys.home];break;case i.Keys.end:t=this.keyBinding[i.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},this.renderContent=e=>{const{selected:t,children:s,tabContentStyle:r}=e,l=a.Children.count(s);return t<l&&t>-1?a.createElement(y.TabStripContent,{index:t,...e,style:r}):null},this.firstNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let s=0;s<t;s++)if(!e[s].props.disabled)return s}},this.lastNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let s=t-1;s>0;s--)if(!e[s].props.disabled)return s}},this.prevNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,s=t?t-1:-1;if(s<0)return this.lastNavigatableTab();if(e)for(let r=s;r>-1;r--){if(!e[r].props.disabled)return r;if(r===0)return this.lastNavigatableTab()}},this.nextNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,s=t?t+1:1,r=a.Children.count(e);if(s>=r)return this.firstNavigatableTab();if(e)for(let l=s;l<r;l++){if(!e[l].props.disabled)return l;if(l+1===r)return this.firstNavigatableTab()}},i.validatePackage(b.packageMetadata),this.showLicenseWatermark=i.shouldShowValidationUI(b.packageMetadata)}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}render(){const n={...this.props,children:this.children(),contentPanelId:this.contentPanelId,navItemId:this.navItemId,onKeyDown:this.onKeyDown,onSelect:this.onSelect},{tabPosition:e,tabIndex:t=0}=n,s=e==="bottom",r=i.classNames("k-tabstrip k-pos-relative",{"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top","k-tabstrip-scrollable":this.props.scrollable},this.props.className);return a.createElement("div",{id:this.props.id,ref:l=>this._element=l,dir:this.props.dir,className:r,style:this.props.style},!s&&a.createElement(p.TabStripNavigation,{...n,tabIndex:t}),this.renderContent(n),s&&a.createElement(p.TabStripNavigation,{...n,tabIndex:t}),this.showLicenseWatermark&&a.createElement(i.WatermarkOverlay,null))}invertKeys(n,e){return this._element&&getComputedStyle(this._element).direction==="rtl"||!1?e:n}children(){return a.Children.toArray(this.props.children).filter(n=>n)}};h.propTypes={animation:o.bool,children:o.node,onSelect:o.func,selected:o.number,style:o.object,tabContentStyle:o.object,tabPosition:o.string,tabIndex:o.number,className:o.string,dir:o.string},h.defaultProps={animation:!0,tabPosition:"top",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10};let d=h;exports.TabStrip=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("prop-types"),p=require("./TabStripNavigation.js"),y=require("./TabStripContent.js"),n=require("@progress/kendo-react-common"),b=require("../package-metadata.js");function f(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>c[e]})}}return s.default=c,Object.freeze(s)}const a=f(u),h=class h extends a.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.keyBinding={[n.Keys.left]:()=>this.prevNavigatableTab(),[n.Keys.right]:()=>this.nextNavigatableTab(),[n.Keys.down]:()=>this.nextNavigatableTab(),[n.Keys.up]:()=>this.prevNavigatableTab(),[n.Keys.home]:()=>0,[n.Keys.end]:()=>a.Children.count(this.props.children)-1},this.onSelect=e=>{this.props.selected!==e&&this.props.onSelect&&this.props.onSelect({selected:e})},this.onKeyDown=e=>{let t;switch(e.keyCode){case n.Keys.left:t=this.keyBinding[this.invertKeys(n.Keys.left,n.Keys.right)];break;case n.Keys.right:t=this.keyBinding[this.invertKeys(n.Keys.right,n.Keys.left)];break;case n.Keys.up:t=this.keyBinding[n.Keys.up];break;case n.Keys.down:t=this.keyBinding[n.Keys.down];break;case n.Keys.home:t=this.keyBinding[n.Keys.home];break;case n.Keys.end:t=this.keyBinding[n.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},this.renderContent=e=>{const{selected:t,children:i,tabContentStyle:r}=e,l=a.Children.count(i);return t<l&&t>-1?a.createElement(y.TabStripContent,{index:t,...e,style:r}):null},this.firstNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let i=0;i<t;i++)if(!e[i].props.disabled)return i}},this.lastNavigatableTab=()=>{const e=this.children(),t=a.Children.count(e);if(e){for(let i=t-1;i>0;i--)if(!e[i].props.disabled)return i}},this.prevNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,i=t?t-1:-1;if(i<0)return this.lastNavigatableTab();if(e)for(let r=i;r>-1;r--){if(!e[r].props.disabled)return r;if(r===0)return this.lastNavigatableTab()}},this.nextNavigatableTab=()=>{const e=this.children(),{selected:t}=this.props,i=t?t+1:1,r=a.Children.count(e);if(i>=r)return this.firstNavigatableTab();if(e)for(let l=i;l<r;l++){if(!e[l].props.disabled)return l;if(l+1===r)return this.firstNavigatableTab()}},n.validatePackage(b.packageMetadata),this.showLicenseWatermark=n.shouldShowValidationUI(b.packageMetadata)}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}render(){const s={...this.props,children:this.children(),contentPanelId:this.contentPanelId,renderAllContent:this.props.renderAllContent,navItemId:this.navItemId,onKeyDown:this.onKeyDown,onSelect:this.onSelect},{tabPosition:e,tabIndex:t=0}=s,i=e==="bottom",r=n.classNames("k-tabstrip k-pos-relative",{"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top","k-tabstrip-scrollable":this.props.scrollable},this.props.className);return a.createElement("div",{id:this.props.id,ref:l=>this._element=l,dir:this.props.dir,className:r,style:this.props.style},!i&&a.createElement(p.TabStripNavigation,{...s,tabIndex:t}),this.renderContent(s),i&&a.createElement(p.TabStripNavigation,{...s,tabIndex:t}),this.showLicenseWatermark&&a.createElement(n.WatermarkOverlay,null))}invertKeys(s,e){return this._element&&getComputedStyle(this._element).direction==="rtl"||!1?e:s}children(){return a.Children.toArray(this.props.children).filter(s=>s)}};h.propTypes={animation:o.bool,children:o.node,onSelect:o.func,selected:o.number,style:o.object,tabContentStyle:o.object,tabPosition:o.string,tabIndex:o.number,className:o.string,dir:o.string},h.defaultProps={animation:!0,tabPosition:"top",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,renderAllContent:!1};let d=h;exports.TabStrip=d;

package/tabstrip/TabStrip.mjs

@@ -7,14 +7,14 @@
  */
 "use client";
 import * as r from "react";
-import o from "prop-types";
+import a from "prop-types";
 import { TabStripNavigation as c } from "./TabStripNavigation.mjs";
 import { TabStripContent as b } from "./TabStripContent.mjs";
 import { Keys as n, validatePackage as m, shouldShowValidationUI as f, classNames as u, WatermarkOverlay as g } from "@progress/kendo-react-common";
 import { packageMetadata as d } from "../package-metadata.mjs";
 const h = class h extends r.Component {
-  constructor(a) {
-    super(a), this._element = null, this.showLicenseWatermark = !1, this.keyBinding = {
+  constructor(o) {
+    super(o), this._element = null, this.showLicenseWatermark = !1, this.keyBinding = {
       [n.left]: () => this.prevNavigatableTab(),
       [n.right]: () => this.nextNavigatableTab(),
       [n.down]: () => this.nextNavigatableTab(),
@@ -99,14 +99,15 @@ const h = class h extends r.Component {
    * @hidden
    */
   render() {
-    const a = {
+    const o = {
       ...this.props,
       children: this.children(),
       contentPanelId: this.contentPanelId,
+      renderAllContent: this.props.renderAllContent,
       navItemId: this.navItemId,
       onKeyDown: this.onKeyDown,
       onSelect: this.onSelect
-    }, { tabPosition: t, tabIndex: e = 0 } = a, i = t === "bottom", s = u(
+    }, { tabPosition: t, tabIndex: e = 0 } = o, i = t === "bottom", s = u(
       "k-tabstrip k-pos-relative",
       {
         "k-tabstrip-left": t === "left",
@@ -126,36 +127,37 @@ const h = class h extends r.Component {
         className: s,
         style: this.props.style
       },
-      !i && /* @__PURE__ */ r.createElement(c, { ...a, tabIndex: e }),
-      this.renderContent(a),
-      i && /* @__PURE__ */ r.createElement(c, { ...a, tabIndex: e }),
+      !i && /* @__PURE__ */ r.createElement(c, { ...o, tabIndex: e }),
+      this.renderContent(o),
+      i && /* @__PURE__ */ r.createElement(c, { ...o, tabIndex: e }),
       this.showLicenseWatermark && /* @__PURE__ */ r.createElement(g, null)
     );
   }
-  invertKeys(a, t) {
-    return this._element && getComputedStyle(this._element).direction === "rtl" || !1 ? t : a;
+  invertKeys(o, t) {
+    return this._element && getComputedStyle(this._element).direction === "rtl" || !1 ? t : o;
   }
   children() {
-    return r.Children.toArray(this.props.children).filter((a) => a);
+    return r.Children.toArray(this.props.children).filter((o) => o);
   }
 };
 h.propTypes = {
-  animation: o.bool,
-  children: o.node,
-  onSelect: o.func,
-  selected: o.number,
-  style: o.object,
-  tabContentStyle: o.object,
-  tabPosition: o.string,
-  tabIndex: o.number,
-  className: o.string,
-  dir: o.string
+  animation: a.bool,
+  children: a.node,
+  onSelect: a.func,
+  selected: a.number,
+  style: a.object,
+  tabContentStyle: a.object,
+  tabPosition: a.string,
+  tabIndex: a.number,
+  className: a.string,
+  dir: a.string
 }, h.defaultProps = {
   animation: !0,
   tabPosition: "top",
   keepTabsMounted: !1,
   buttonScrollSpeed: 100,
-  mouseScrollSpeed: 10
+  mouseScrollSpeed: 10,
+  renderAllContent: !1
 };
 let p = h;
 export {

package/tabstrip/TabStripContent.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),s=require("prop-types"),u=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-common");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const r=y(h),p=class p extends r.Component{constructor(){super(...arguments),this.contentId=this.props.contentPanelId,this.childFactory=e=>r.cloneElement(e,{...e.props,in:e.props.children.props.id===String(this.contentId+this.props.selected)})}render(){const{children:e,selected:t,contentPanelId:n,keepTabsMounted:i,navItemId:a}=this.props,l=e&&typeof t=="number"&&r.Children.toArray(e)[t],d=m.classNames("k-tabstrip-content","k-active",l&&l.props.contentClassName);return r.createElement("div",{className:d,style:this.props.style,id:n,role:"tabpanel","aria-hidden":i,"aria-labelledby":`${a}-${(t==null?void 0:t.toString())||""}`},this.renderContent(e))}renderContent(e){return this.props.keepTabsMounted?r.Children.map(this.props.children,(t,n)=>this.renderChild(t,n)):this.renderChild(r.Children.toArray(e)[this.props.selected],this.props.selected)}renderChild(e,t){const n=t===this.props.selected,i={style:{display:n?void 0:"none"}},a={position:"initial",display:n?void 0:"none"};return e.props.disabled?null:this.props.animation?r.createElement(u.Fade,{appear:!0,exit:this.props.keepTabsMounted,style:a,childFactory:this.props.keepTabsMounted?this.childFactory:void 0},r.createElement("div",{...i,id:String(this.contentId+t),key:t},e.props.children)):r.createElement("div",{...i,key:t},e.props.children)}};p.propTypes={animation:s.bool,children:s.oneOfType([s.element,s.arrayOf(s.element)]),selected:s.number,style:s.object};let c=p;exports.TabStripContent=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),i=require("prop-types"),h=require("@progress/kendo-react-animation"),u=require("@progress/kendo-react-common");function b(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const r=b(y),c=class c extends r.Component{constructor(){super(...arguments),this.contentId=this.props.contentPanelId,this.childFactory=e=>r.cloneElement(e,{...e.props,in:e.props.children.props.id===String(this.contentId+this.props.selected)})}render(){const{children:e,selected:t,contentPanelId:n,keepTabsMounted:s,navItemId:o,renderAllContent:l}=this.props,d=e&&typeof t=="number"&&r.Children.toArray(e)[t],m=u.classNames("k-tabstrip-content","k-active",d&&d.props.contentClassName);return l?this.renderAllContent(e):r.createElement("div",{className:m,style:this.props.style,id:n,role:"tabpanel","aria-hidden":s,"aria-labelledby":`${o}-${(t==null?void 0:t.toString())||""}`},this.renderContent(e))}renderContent(e){return this.props.keepTabsMounted?r.Children.map(this.props.children,(t,n)=>this.renderChild(t,n)):this.renderChild(r.Children.toArray(e)[this.props.selected],this.props.selected)}renderAllContent(e){return r.Children.map(e,(t,n)=>{const s=t,o=n===this.props.selected,l=u.classNames("k-tabstrip-content",{"k-active":o},s.props.contentClassName);return r.createElement("div",{className:l,style:this.props.style,id:`${this.props.contentPanelId}-${n}`,role:"tabpanel","aria-hidden":!o,hidden:!o,"aria-labelledby":`${this.props.navItemId}-${n}`},this.props.animation?r.createElement(h.Fade,{key:`${n}-${o}`,appear:!0,enter:!0,exit:!1},s.props.children):s.props.children)})}renderChild(e,t){const n=t===this.props.selected,s={style:{display:n?void 0:"none"}},o={position:"initial",display:n?void 0:"none"};return e.props.disabled?null:this.props.animation?r.createElement(h.Fade,{appear:!0,exit:this.props.keepTabsMounted,style:o,childFactory:this.props.keepTabsMounted?this.childFactory:void 0},r.createElement("div",{...s,id:String(this.contentId+t),key:t},e.props.children)):r.createElement("div",{...s,key:t},e.props.children)}};c.propTypes={animation:i.bool,children:i.oneOfType([i.element,i.arrayOf(i.element)]),selected:i.number,style:i.object};let p=c;exports.TabStripContent=p;

package/tabstrip/TabStripContent.mjs

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as r from "react";
-import n from "prop-types";
-import { Fade as c } from "@progress/kendo-react-animation";
-import { classNames as h } from "@progress/kendo-react-common";
-const p = class p extends r.Component {
+import * as n from "react";
+import i from "prop-types";
+import { Fade as d } from "@progress/kendo-react-animation";
+import { classNames as c } from "@progress/kendo-react-common";
+const l = class l extends n.Component {
   constructor() {
-    super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => r.cloneElement(e, {
+    super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => n.cloneElement(e, {
       ...e.props,
       in: e.props.children.props.id === String(this.contentId + this.props.selected)
     });
@@ -21,61 +21,92 @@ const p = class p extends r.Component {
    * @hidden
    */
   render() {
-    const { children: e, selected: t, contentPanelId: s, keepTabsMounted: o, navItemId: i } = this.props, l = e && typeof t == "number" && r.Children.toArray(e)[t], d = h(
+    const { children: e, selected: t, contentPanelId: r, keepTabsMounted: s, navItemId: o, renderAllContent: p } = this.props, a = e && typeof t == "number" && n.Children.toArray(e)[t], m = c(
       "k-tabstrip-content",
       "k-active",
-      l && l.props.contentClassName
+      a && a.props.contentClassName
     );
-    return /* @__PURE__ */ r.createElement(
+    return p ? this.renderAllContent(e) : /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: d,
+        className: m,
         style: this.props.style,
-        id: s,
+        id: r,
         role: "tabpanel",
-        "aria-hidden": o,
-        "aria-labelledby": `${i}-${(t == null ? void 0 : t.toString()) || ""}`
+        "aria-hidden": s,
+        "aria-labelledby": `${o}-${(t == null ? void 0 : t.toString()) || ""}`
       },
       this.renderContent(e)
     );
   }
   renderContent(e) {
-    return this.props.keepTabsMounted ? r.Children.map(this.props.children, (t, s) => this.renderChild(t, s)) : this.renderChild(
-      r.Children.toArray(e)[this.props.selected],
+    return this.props.keepTabsMounted ? n.Children.map(this.props.children, (t, r) => this.renderChild(t, r)) : this.renderChild(
+      n.Children.toArray(e)[this.props.selected],
       this.props.selected
     );
   }
+  renderAllContent(e) {
+    return n.Children.map(e, (t, r) => {
+      const s = t, o = r === this.props.selected, p = c(
+        "k-tabstrip-content",
+        { "k-active": o },
+        s.props.contentClassName
+      );
+      return /* @__PURE__ */ n.createElement(
+        "div",
+        {
+          className: p,
+          style: this.props.style,
+          id: `${this.props.contentPanelId}-${r}`,
+          role: "tabpanel",
+          "aria-hidden": !o,
+          hidden: !o,
+          "aria-labelledby": `${this.props.navItemId}-${r}`
+        },
+        this.props.animation ? /* @__PURE__ */ n.createElement(
+          d,
+          {
+            key: `${r}-${o}`,
+            appear: !0,
+            enter: !0,
+            exit: !1
+          },
+          s.props.children
+        ) : s.props.children
+      );
+    });
+  }
   renderChild(e, t) {
-    const s = t === this.props.selected, o = {
+    const r = t === this.props.selected, s = {
       style: {
-        display: s ? void 0 : "none"
+        display: r ? void 0 : "none"
       }
-    }, i = {
+    }, o = {
       position: "initial",
-      display: s ? void 0 : "none"
+      display: r ? void 0 : "none"
     };
-    return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ r.createElement(
-      c,
+    return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ n.createElement(
+      d,
       {
         appear: !0,
         exit: this.props.keepTabsMounted,
-        style: i,
+        style: o,
         childFactory: this.props.keepTabsMounted ? this.childFactory : void 0
       },
-      /* @__PURE__ */ r.createElement("div", { ...o, id: String(this.contentId + t), key: t }, e.props.children)
-    ) : /* @__PURE__ */ r.createElement("div", { ...o, key: t }, e.props.children);
+      /* @__PURE__ */ n.createElement("div", { ...s, id: String(this.contentId + t), key: t }, e.props.children)
+    ) : /* @__PURE__ */ n.createElement("div", { ...s, key: t }, e.props.children);
   }
 };
-p.propTypes = {
-  animation: n.bool,
-  children: n.oneOfType([
-    n.element,
-    n.arrayOf(n.element)
+l.propTypes = {
+  animation: i.bool,
+  children: i.oneOfType([
+    i.element,
+    i.arrayOf(i.element)
   ]),
-  selected: n.number,
-  style: n.object
+  selected: i.number,
+  style: i.object
 };
-let a = p;
+let h = l;
 export {
-  a as TabStripContent
+  h as TabStripContent
 };

package/tabstrip/TabStripNavigation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),d=require("prop-types"),C=require("./TabStripNavigationItem.js"),k=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),u=require("@progress/kendo-svg-icons");function M(h){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(l,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return l.default=h,Object.freeze(l)}const a=M(R),x=h=>Array.apply(null,Array(h)),L=h=>h.preventDefault(),v="smooth",b="prev",S="next",I=class I extends a.Component{constructor(l){super(l),this.itemsNavRef=a.createRef(),this.isRtl=()=>this.props.dir==="rtl",this.onWheel=t=>{t.stopPropagation();const s=t.deltaY<0?b:S;this.setNewScrollPosition(s,t)},this.arrowClickPrev=t=>{this.handleArrowClick(b,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,s)=>{this.setNewScrollPosition(t,s)},this.setNewScrollPosition=(t,s)=>{const e=this.itemsNavRef.current;if(!e)return;const n=this.horizontalScroll(),c=n?e.scrollWidth-e.offsetWidth:e.scrollHeight-e.offsetHeight,r=(s.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let o=n?e.scrollLeft:e.scrollTop,i=n?e.scrollWidth-e.scrollLeft:e.scrollHeight-e.scrollTop,f=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===b&&o<0&&(o+=r,f+=r),t===S&&o<c&&(o-=r,f-=r),o=Math.min(0,Math.min(c,o))):(t===b&&o>0&&(o-=r,i+=r),t===S&&o<c&&(o+=r,i-=r),o=Math.max(0,Math.min(c,o)));const g=o===0,m=s.type==="click"?v:void 0;if(n){const P=this.isRtl()?Math.round(f)<=e.clientWidth||Math.floor(f)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:g,disabledNext:P}),e.scrollTo({left:o,behavior:m})}else this.setState({disabledPrev:g,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:m})},this.renderArrow=(t,s)=>{const e=this.horizontalScroll(),n={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?u.caretAltRightIcon:u.caretAltLeftIcon:u.caretAltUpIcon},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?u.caretAltLeftIcon:u.caretAltRightIcon:u.caretAltDownIcon}},c=(t===b?this.props.prevButton:this.props.nextButton)||A.Button,r=t===b?this.arrowClickPrev:this.arrowClickNext;return a.createElement(c,{disabled:s,className:`${n[t].arrowTab}`,onClick:r,icon:n[t].fontIcon,svgIcon:n[t].svgIcon,onMouseDown:L,tabIndex:-1,fillMode:"flat"})},this.state={disabledPrev:this.props.selected===0,disabledNext:this.props.selected===a.Children.count(this.props.children)-1}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(l){const{scrollable:t,selected:s}=this.props;t&&l.selected!==s&&(this.scrollToSelected(),this.setState({disabledPrev:s===0,disabledNext:s===a.Children.count(this.props.children)-1}))}render(){const{selected:l,tabPosition:t,children:s,onSelect:e,onKeyDown:n,navItemId:c,contentPanelId:r}=this.props,o=a.Children.count(s),i=a.Children.toArray(s);let f;s&&(f=x(o).map((P,p,w)=>{const N={active:l===p,disabled:i[p].props.disabled,index:p,title:i[p].props.title,first:p===0,last:p===w.length-1,contentPanelId:r,id:c,onSelect:e};return a.createElement(C.TabStripNavigationItem,{key:p,...N})}));const g=k.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),m=k.classNames("k-tabstrip-items","k-reset");return a.createElement("div",{className:g},this.props.scrollable?a.createElement(a.Fragment,null,this.renderArrow(b,this.state.disabledPrev),a.createElement("ul",{ref:this.itemsNavRef,className:m,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},f),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:m,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},f))}scrollToSelected(){const l=this.itemsNavRef.current,t=l&&l.children[this.props.selected||0];if(t instanceof HTMLElement&&l instanceof HTMLElement){const s=this.horizontalScroll(),e=s?l.offsetWidth:l.offsetHeight,n=s?t.offsetWidth:t.offsetHeight,c=s?"left":"top";let r=s?l.scrollLeft:l.scrollTop,o=0;if(this.isRtl()){const i=t.offsetLeft;r=r*-1,i<0?(o=i-n+l.offsetLeft,l.scrollTo({[c]:o,behavior:v})):i+n>e-r&&(o=r+i-n,l.scrollTo({[c]:o,behavior:v}))}else{const i=s?t.offsetLeft-l.offsetLeft:t.offsetTop-l.offsetTop;r+e<i+n?(o=i+n-e,l.scrollTo({[c]:o,behavior:v})):r>i&&(o=i,l.scrollTo({[c]:o,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};I.propTypes={children:d.oneOfType([d.element,d.arrayOf(d.element)]),onSelect:d.func,onKeyDown:d.func,selected:d.number,tabIndex:d.number};let T=I;exports.TabStripNavigation=T;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),f=require("prop-types"),C=require("./TabStripNavigationItem.js"),k=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons");function M(h){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(l,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return l.default=h,Object.freeze(l)}const a=M(R),x=h=>Array.apply(null,Array(h)),L=h=>h.preventDefault(),v="smooth",b="prev",S="next",P=class P extends a.Component{constructor(l){super(l),this.itemsNavRef=a.createRef(),this.isRtl=()=>this.props.dir==="rtl",this.onWheel=t=>{t.stopPropagation();const s=t.deltaY<0?b:S;this.setNewScrollPosition(s,t)},this.arrowClickPrev=t=>{this.handleArrowClick(b,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,s)=>{this.setNewScrollPosition(t,s)},this.setNewScrollPosition=(t,s)=>{const e=this.itemsNavRef.current;if(!e)return;const n=this.horizontalScroll(),c=n?e.scrollWidth-e.offsetWidth:e.scrollHeight-e.offsetHeight,r=(s.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let o=n?e.scrollLeft:e.scrollTop,i=n?e.scrollWidth-e.scrollLeft:e.scrollHeight-e.scrollTop,d=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===b&&o<0&&(o+=r,d+=r),t===S&&o<c&&(o-=r,d-=r),o=Math.min(0,Math.min(c,o))):(t===b&&o>0&&(o-=r,i+=r),t===S&&o<c&&(o+=r,i-=r),o=Math.max(0,Math.min(c,o)));const u=o===0,g=s.type==="click"?v:void 0;if(n){const T=this.isRtl()?Math.round(d)<=e.clientWidth||Math.floor(d)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:u,disabledNext:T}),e.scrollTo({left:o,behavior:g})}else this.setState({disabledPrev:u,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:g})},this.renderArrow=(t,s)=>{const e=this.horizontalScroll(),n={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?m.caretAltRightIcon:m.caretAltLeftIcon:m.caretAltUpIcon},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?m.caretAltLeftIcon:m.caretAltRightIcon:m.caretAltDownIcon}},c=(t===b?this.props.prevButton:this.props.nextButton)||A.Button,r=t===b?this.arrowClickPrev:this.arrowClickNext;return a.createElement(c,{disabled:s,className:`${n[t].arrowTab}`,onClick:r,icon:n[t].fontIcon,svgIcon:n[t].svgIcon,onMouseDown:L,tabIndex:-1,fillMode:"flat"})},this.state={disabledPrev:this.props.selected===0,disabledNext:this.props.selected===a.Children.count(this.props.children)-1}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(l){const{scrollable:t,selected:s}=this.props;t&&l.selected!==s&&(this.scrollToSelected(),this.setState({disabledPrev:s===0,disabledNext:s===a.Children.count(this.props.children)-1}))}render(){const{selected:l,tabPosition:t,children:s,onSelect:e,onKeyDown:n,navItemId:c,contentPanelId:r,renderAllContent:o}=this.props,i=a.Children.count(s),d=a.Children.toArray(s);let u;s&&(u=x(i).map((y,p,w)=>{const N={active:l===p,disabled:d[p].props.disabled,index:p,title:d[p].props.title,first:p===0,last:p===w.length-1,contentPanelId:r,renderAllContent:o,id:c,onSelect:e};return a.createElement(C.TabStripNavigationItem,{key:p,...N})}));const g=k.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),T=k.classNames("k-tabstrip-items","k-reset");return a.createElement("div",{className:g},this.props.scrollable?a.createElement(a.Fragment,null,this.renderArrow(b,this.state.disabledPrev),a.createElement("ul",{ref:this.itemsNavRef,className:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},u),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},u))}scrollToSelected(){const l=this.itemsNavRef.current,t=l&&l.children[this.props.selected||0];if(t instanceof HTMLElement&&l instanceof HTMLElement){const s=this.horizontalScroll(),e=s?l.offsetWidth:l.offsetHeight,n=s?t.offsetWidth:t.offsetHeight,c=s?"left":"top";let r=s?l.scrollLeft:l.scrollTop,o=0;if(this.isRtl()){const i=t.offsetLeft;r=r*-1,i<0?(o=i-n+l.offsetLeft,l.scrollTo({[c]:o,behavior:v})):i+n>e-r&&(o=r+i-n,l.scrollTo({[c]:o,behavior:v}))}else{const i=s?t.offsetLeft-l.offsetLeft:t.offsetTop-l.offsetTop;r+e<i+n?(o=i+n-e,l.scrollTo({[c]:o,behavior:v})):r>i&&(o=i,l.scrollTo({[c]:o,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};P.propTypes={children:f.oneOfType([f.element,f.arrayOf(f.element)]),onSelect:f.func,onKeyDown:f.func,selected:f.number,tabIndex:f.number};let I=P;exports.TabStripNavigation=I;

package/tabstrip/TabStripNavigation.mjs

@@ -7,12 +7,12 @@
  */
 "use client";
 import * as a from "react";
-import f from "prop-types";
-import { TabStripNavigationItem as C } from "./TabStripNavigationItem.mjs";
+import h from "prop-types";
+import { TabStripNavigationItem as g } from "./TabStripNavigationItem.mjs";
 import { classNames as I } from "@progress/kendo-react-common";
 import { Button as x } from "@progress/kendo-react-buttons";
 import { caretAltRightIcon as P, caretAltLeftIcon as k, caretAltUpIcon as A, caretAltDownIcon as M } from "@progress/kendo-svg-icons";
-const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b = "smooth", d = "prev", u = "next", w = class w extends a.Component {
+const E = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b = "smooth", d = "prev", u = "next", T = class T extends a.Component {
   constructor(l) {
     super(l), this.itemsNavRef = a.createRef(), this.isRtl = () => this.props.dir === "rtl", this.onWheel = (t) => {
       t.stopPropagation();
@@ -29,20 +29,20 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
       if (!e)
         return;
       const n = this.horizontalScroll(), c = n ? e.scrollWidth - e.offsetWidth : e.scrollHeight - e.offsetHeight, r = (s.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
-      let o = n ? e.scrollLeft : e.scrollTop, i = n ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop, h = e.scrollWidth - e.scrollLeft * -1;
-      this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += r, h += r), t === u && o < c && (o -= r, h -= r), o = Math.min(0, Math.min(c, o))) : (t === d && o > 0 && (o -= r, i += r), t === u && o < c && (o += r, i -= r), o = Math.max(0, Math.min(c, o)));
-      const v = o === 0, m = s.type === "click" ? b : void 0;
+      let o = n ? e.scrollLeft : e.scrollTop, i = n ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop, f = e.scrollWidth - e.scrollLeft * -1;
+      this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += r, f += r), t === u && o < c && (o -= r, f -= r), o = Math.min(0, Math.min(c, o))) : (t === d && o > 0 && (o -= r, i += r), t === u && o < c && (o += r, i -= r), o = Math.max(0, Math.min(c, o)));
+      const m = o === 0, v = s.type === "click" ? b : void 0;
       if (n) {
-        const T = this.isRtl() ? Math.round(h) <= e.clientWidth || Math.floor(h) <= e.clientWidth : Math.round(i) <= e.clientWidth || Math.floor(i) <= e.clientWidth;
+        const S = this.isRtl() ? Math.round(f) <= e.clientWidth || Math.floor(f) <= e.clientWidth : Math.round(i) <= e.clientWidth || Math.floor(i) <= e.clientWidth;
         this.setState({
-          disabledPrev: v,
-          disabledNext: T
-        }), e.scrollTo({ left: o, behavior: m });
+          disabledPrev: m,
+          disabledNext: S
+        }), e.scrollTo({ left: o, behavior: v });
       } else
         this.setState({
-          disabledPrev: v,
+          disabledPrev: m,
           disabledNext: Math.round(i) <= e.clientHeight || Math.floor(i) <= e.clientHeight
-        }), e.scrollTo({ top: o, behavior: m });
+        }), e.scrollTo({ top: o, behavior: v });
     }, this.renderArrow = (t, s) => {
       const e = this.horizontalScroll(), n = {
         prev: {
@@ -94,47 +94,48 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
    * @hidden
    */
   render() {
-    const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r } = this.props, o = a.Children.count(s), i = a.Children.toArray(s);
-    let h;
-    s && (h = E(o).map((T, p, R) => {
-      const g = {
+    const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r, renderAllContent: o } = this.props, i = a.Children.count(s), f = a.Children.toArray(s);
+    let m;
+    s && (m = E(i).map((W, p, C) => {
+      const R = {
         active: l === p,
-        disabled: i[p].props.disabled,
+        disabled: f[p].props.disabled,
         index: p,
-        title: i[p].props.title,
+        title: f[p].props.title,
         first: p === 0,
-        last: p === R.length - 1,
+        last: p === C.length - 1,
         contentPanelId: r,
+        renderAllContent: o,
         id: c,
         onSelect: e
       };
-      return /* @__PURE__ */ a.createElement(C, { key: p, ...g });
+      return /* @__PURE__ */ a.createElement(g, { key: p, ...R });
     }));
     const v = I("k-tabstrip-items-wrapper", {
       "k-hstack": t === "top" || t === "bottom",
       "k-vstack": t === "left" || t === "right"
-    }), m = I("k-tabstrip-items", "k-reset");
+    }), S = I("k-tabstrip-items", "k-reset");
     return /* @__PURE__ */ a.createElement("div", { className: v }, this.props.scrollable ? /* @__PURE__ */ a.createElement(a.Fragment, null, this.renderArrow(d, this.state.disabledPrev), /* @__PURE__ */ a.createElement(
       "ul",
       {
         ref: this.itemsNavRef,
-        className: m,
+        className: S,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: n,
         onWheel: this.onWheel,
         "aria-orientation": t === "left" || t === "right" ? "vertical" : void 0
       },
-      h
+      m
     ), this.renderArrow(u, this.state.disabledNext)) : /* @__PURE__ */ a.createElement(
       "ul",
       {
-        className: m,
+        className: S,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: n
       },
-      h
+      m
     ));
   }
   scrollToSelected() {
@@ -155,17 +156,17 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
     return /top|bottom/.test(this.props.tabPosition || "top");
   }
 };
-w.propTypes = {
-  children: f.oneOfType([
-    f.element,
-    f.arrayOf(f.element)
+T.propTypes = {
+  children: h.oneOfType([
+    h.element,
+    h.arrayOf(h.element)
   ]),
-  onSelect: f.func,
-  onKeyDown: f.func,
-  selected: f.number,
-  tabIndex: f.number
+  onSelect: h.func,
+  onKeyDown: h.func,
+  selected: h.number,
+  tabIndex: h.number
 };
-let N = w;
+let N = T;
 export {
   N as TabStripNavigation
 };

package/tabstrip/TabStripNavigationItem.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),e=require("prop-types"),b=require("@progress/kendo-react-common");function h(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(o,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return o.default=s,Object.freeze(o)}const n=h(p),l=class l extends n.Component{constructor(){super(...arguments),this.itemRef=null,this.focus=()=>{this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())},this.blur=()=>{this.itemRef&&(this.itemRef.tabIndex=-1,this.itemRef.blur())},this.onClick=()=>{this.props.onSelect&&this.props.onSelect(this.props.index),this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())}}render(){const{id:o,active:t,disabled:i,title:a="Untitled",contentPanelId:c,index:f}=this.props,d={id:`${o}-${f.toString()}`,"aria-selected":t,"aria-controls":t?c:void 0,"aria-disabled":i,role:"tab",onClick:i?void 0:this.onClick},u=b.classNames("k-item","k-tabstrip-item",{"k-disabled":i,"k-active":t});return n.createElement("li",{...d,className:u,ref:m=>this.itemRef=m,onBlur:this.blur,"aria-controls":c},n.createElement("span",{className:"k-link"},a))}};l.propTypes={active:e.bool,disabled:e.bool,index:e.number,onSelect:e.func,title:e.oneOfType([e.string,e.element]),first:e.bool,last:e.bool};let r=l;exports.TabStripNavigationItem=r;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),e=require("prop-types"),h=require("@progress/kendo-react-common");function R(s){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return n.default=s,Object.freeze(n)}const o=R(b),l=class l extends o.Component{constructor(){super(...arguments),this.itemRef=null,this.focus=()=>{this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())},this.blur=()=>{this.itemRef&&(this.itemRef.tabIndex=-1,this.itemRef.blur())},this.onClick=()=>{this.props.onSelect&&this.props.onSelect(this.props.index),this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())}}render(){const{id:n,active:t,disabled:i,title:d="Untitled",index:c,renderAllContent:f}=this.props,a=f?`${this.props.contentPanelId}-${c.toString()}`:this.props.contentPanelId,u={id:`${n}-${c.toString()}`,"aria-selected":t,"aria-controls":t?a:void 0,"aria-disabled":i,role:"tab",onClick:i?void 0:this.onClick},p=h.classNames("k-item","k-tabstrip-item",{"k-disabled":i,"k-active":t});return o.createElement("li",{...u,className:p,ref:m=>this.itemRef=m,onBlur:this.blur,"aria-controls":a},o.createElement("span",{className:"k-link"},d))}};l.propTypes={active:e.bool,disabled:e.bool,index:e.number,onSelect:e.func,title:e.oneOfType([e.string,e.element]),first:e.bool,last:e.bool};let r=l;exports.TabStripNavigationItem=r;