@progress/kendo-react-layout 14.5.0-develop.8 → 15.0.0-develop.1

package/stepper/messages/index.d.ts

@@ -12,11 +12,21 @@ export declare const optionalText = "stepper.optionalText";
 /**
  * @hidden
  */
-export declare const progBarAriaLabel = "stepper.progBarAriaLabel";
+export declare const progressBarAriaLabel = "stepper.progressBarAriaLabel";
+/**
+ * @hidden
+ */
+export declare const ariaLabel = "stepper.ariaLabel";
+/**
+ * @hidden
+ */
+export declare const stepAriaLabel = "stepper.stepAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "stepper.optionalText": string;
-    "stepper.progBarAriaLabel": string;
+    "stepper.progressBarAriaLabel": string;
+    "stepper.ariaLabel": string;
+    "stepper.stepAriaLabel": string;
 };

package/stepper/messages/index.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="stepper.optionalText",a="stepper.progBarAriaLabel",o={[e]:"(Optional)",[a]:"progressbar"};exports.messages=o;exports.optionalText=e;exports.progBarAriaLabel=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="stepper.optionalText",a="stepper.progressBarAriaLabel",r="stepper.ariaLabel",s="stepper.stepAriaLabel",t={[e]:"(Optional)",[a]:"progressbar",[r]:"Stepper",[s]:"Step"};exports.ariaLabel=r;exports.messages=t;exports.optionalText=e;exports.progressBarAriaLabel=a;exports.stepAriaLabel=s;

package/stepper/messages/index.mjs

@@ -5,12 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const e = "stepper.optionalText", o = "stepper.progBarAriaLabel", r = {
+const e = "stepper.optionalText", a = "stepper.progressBarAriaLabel", r = "stepper.ariaLabel", p = "stepper.stepAriaLabel", s = {
   [e]: "(Optional)",
-  [o]: "progressbar"
+  [a]: "progressbar",
+  [r]: "Stepper",
+  [p]: "Step"
 };
 export {
-  r as messages,
+  r as ariaLabel,
+  s as messages,
   e as optionalText,
-  o as progBarAriaLabel
+  a as progressBarAriaLabel,
+  p as stepAriaLabel
 };

package/tabstrip/TabStrip.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { KendoReactComponentBaseProps, WebMcpProps } from '@progress/kendo-react-common';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import * as React from 'react';
 /**
@@ -208,6 +208,13 @@ export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScr
      * ```
      */
     onSelect?: (e: TabStripSelectEventArguments) => void;
+    /**
+     * Enables Web MCP tool registration so AI agents can interact with this TabStrip.
+     * Set to `true` to use the provider-level `dataName`, or pass a config object to override.
+     *
+     * Requires a `WebMcpProvider` ancestor from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
 }
 /**
  * @hidden

package/tabstrip/TabStrip.js

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

package/tabstrip/TabStrip.mjs

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

package/tabstrip/TabStripNavigation.js

@@ -5,4 +5,4 @@
  * 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"),r=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 s in b)if(s!=="default"){const T=Object.getOwnPropertyDescriptor(b,s);Object.defineProperty(d,s,T.get?T:{enumerable:!0,get:()=>b[s]})}}return d.default=b,Object.freeze(d)}const n=mt(ft),pt=b=>Array.from({length:b}),C="smooth",p="prev",k="next",x=b=>{const{selected:d,tabPosition:s,tabAlignment:T,children:w,onSelect:y,onKeyDown:q,onScroll:A,navItemId:R,contentPanelId:F,renderAllContent:D,scrollable:E,scrollButtons:P,scrollButtonsPosition:m,tabIndex:_,buttonScrollSpeed:j,mouseScrollSpeed:W,prevButton:$,nextButton:K,dir:U,size:V,containerScrollPosition:v,itemsNavRef:ot}=b,nt=n.useRef(null),N=ot||nt,H=dt.useLocalization(),g=n.useCallback(()=>/top|bottom/.test(s||"top"),[s]),h=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 l=g(),u=l?t.offsetWidth:t.offsetHeight,c=l?e.offsetWidth:e.offsetHeight,i=l?"left":"top";let o=l?t.scrollLeft:t.scrollTop,a=0;if(h()){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=l?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,g,h]);n.useEffect(()=>{E&&X()},[E,d,X]);const B=n.useCallback(()=>{A==null||A()},[A]),G=n.useCallback((t,e)=>{const l=N.current;if(!l)return;const u=g(),c=u?l.scrollWidth-l.offsetWidth:l.scrollHeight-l.offsetHeight,i=(e.type==="click"?j:W)||0;let o=u?l.scrollLeft:l.scrollTop;h()&&g()?(t===p&&o<0&&(o+=i),t===k&&o<c&&(o-=i),o=Math.min(0,Math.min(c,o))):(t===p&&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?l.scrollTo({left:o,behavior:a}):l.scrollTo({top:o,behavior:a})},[N,g,h,j,W]),z=n.useCallback((t,e)=>{G(t,e)},[G]),J=n.useCallback(t=>{z(p,t)},[z]),Q=n.useCallback(t=>{z(k,t)},[z]),O=n.useCallback(t=>{const e=g(),l=h(),c=e?l?"caret-alt-right":"caret-alt-left":"caret-alt-up",i=l?I.caretAltRightIcon:I.caretAltLeftIcon,o=e?i:I.caretAltUpIcon,f=e?l?"caret-alt-left":"caret-alt-right":"caret-alt-down",st=l?I.caretAltLeftIcon:I.caretAltRightIcon,rt=e?st:I.caretAltDownIcon,L={prev:{arrowTab:"k-tabstrip-prev",fontIcon:c,svgIcon:o,title:H.toLanguageString(S.prevArrowTitle,S.messages[S.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:f,svgIcon:rt,title:H.toLanguageString(S.nextArrowTitle,S.messages[S.nextArrowTitle])}},ct=(t===p?$:K)||bt.Button,at=t===p?J:Q,it=v===null||t===p&&(v==="start"||v==="top")||t===k&&(v==="end"||v==="bottom");return n.createElement(ct,{disabled:it,className:M.classNames(`${L[t].arrowTab}`),onClick:at,icon:L[t].fontIcon,svgIcon:L[t].svgIcon,size:V,tabIndex:-1,fillMode:"flat",title:L[t].title})},[g,h,$,K,J,Q,v,V,H]),Y=n.Children.count(w),Z=n.Children.toArray(w),tt=n.useMemo(()=>w?pt(Y).map((t,e,l)=>{const u={active:d===e,disabled:Z[e].props.disabled,index:e,title:Z[e].props.title,first:e===0,last:e===l.length-1,contentPanelId:F,renderAllContent:D,id:R,onSelect:y,onScroll:B};return n.createElement(ut.TabStripNavigationItem,{key:`${R}-${e}`,...u})}):null,[w,Y,d,F,D,R,y,B]),lt=n.useMemo(()=>M.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":s==="top"||s==="bottom","k-vstack":s==="left"||s==="right"}),[s]),et=n.useMemo(()=>M.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${T}`),[T]);return n.createElement("div",{className:lt},E?n.createElement(n.Fragment,null,P!=="hidden"&&m&&["split","start","around","before"].includes(m)&&O(p),P!=="hidden"&&(m==="start"||m==="before")&&O(k),n.createElement("ul",{ref:N,className:et,role:"tablist",tabIndex:_,onKeyDown:q,onScroll:B,"aria-orientation":s==="left"||s==="right"?"vertical":void 0},tt),P!=="hidden"&&(m==="end"||m==="after")&&O(p),P!=="hidden"&&m&&["split","end","around","after"].includes(m)&&O(k)):n.createElement("ul",{className:et,role:"tablist",tabIndex:_,onKeyDown:q},tt))};x.propTypes={children:r.oneOfType([r.element,r.arrayOf(r.element)]),onSelect:r.func,onKeyDown:r.func,onScroll:r.func,selected:r.number,tabIndex:r.number,scrollable:r.bool,size:r.oneOf(["small","medium","large"]),scrollButtons:r.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:r.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:r.oneOf(["start","end","top","bottom","middle",null])};x.displayName="TabStripNavigation";exports.TabStripNavigation=x;
+"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;