@progress/kendo-react-layout 14.5.0-develop.12 → 14.5.0-develop.14

package/stepper/Stepper.mjs

@@ -6,83 +6,85 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as e from "react";
-import s from "prop-types";
-import { StepperContext as ne } from "./context/StepperContext.mjs";
-import { focusFirstFocusableChild as oe, useDir as se, dispatchEvent as L, Navigation as re, classNames as A, svgIconPropType as M } from "@progress/kendo-react-common";
-import { Step as ie } from "./Step.mjs";
-import { ProgressBar as le } from "@progress/kendo-react-progressbars";
-import { DEFAULT_ANIMATION_DURATION as ae, NO_ANIMATION as ce } from "./contants.mjs";
-import { useLocalization as ue } from "@progress/kendo-react-intl";
-import { progBarAriaLabel as P, messages as de } from "./messages/index.mjs";
-const V = e.forwardRef((S, z) => {
+import o from "prop-types";
+import { StepperContext as se } from "./context/StepperContext.mjs";
+import { useWebMcpRegister as oe, focusFirstFocusableChild as re, useDir as ie, dispatchEvent as L, Navigation as le, classNames as A, svgIconPropType as P } from "@progress/kendo-react-common";
+import { Step as ae } from "./Step.mjs";
+import { ProgressBar as ce } from "@progress/kendo-react-progressbars";
+import { DEFAULT_ANIMATION_DURATION as ue, NO_ANIMATION as de } from "./contants.mjs";
+import { useLocalization as me } from "@progress/kendo-react-intl";
+import { progBarAriaLabel as V, messages as pe } from "./messages/index.mjs";
+const z = e.forwardRef((b, H) => {
   const {
-    animationDuration: b,
+    animationDuration: k,
     children: K,
     className: x,
     disabled: m,
     errorIcon: G,
-    errorSVGIcon: H,
+    errorSVGIcon: _,
     item: N,
     items: p,
     linear: g,
-    mode: _,
-    orientation: E,
+    mode: B,
+    orientation: h,
     selectOnFocus: v,
-    style: D,
-    successIcon: B,
-    successSVGIcon: U,
+    style: R,
+    successIcon: U,
+    successSVGIcon: j,
     value: a = 0,
-    onChange: y,
-    onFocus: h
-  } = S, j = ue().toLanguageString(P, de[P]), f = e.useRef(null), R = e.useCallback(() => {
-    f.current && oe(f.current);
-  }, []), I = e.useCallback(
+    onChange: I,
+    onFocus: C
+  } = b, q = me().toLanguageString(V, pe[V]), f = e.useRef(null), D = e.useRef(null);
+  oe("stepper", D, b, b.webMcp);
+  const w = e.useCallback(() => {
+    f.current && re(f.current);
+  }, []), E = e.useCallback(
     () => ({
       element: f.current,
-      focus: R
+      focus: w
     }),
-    [R]
+    [w]
   );
-  e.useImperativeHandle(z, I);
-  const [q, u] = e.useState(a), d = p ? p.length : 0, o = E === "vertical", C = se(f, S.dir), J = typeof b == "number" ? b : b !== !1 ? ae : ce;
+  e.useImperativeHandle(H, E), e.useImperativeHandle(D, E);
+  const [W, u] = e.useState(a), d = p ? p.length : 0, s = h === "vertical", S = ie(f, b.dir), J = typeof k == "number" ? k : k !== !1 ? ue : de;
   e.useEffect(() => {
     u(a);
   }, [a]);
-  const w = e.useCallback(
+  const T = e.useCallback(
     (l, r) => {
       const t = r === a - 1, n = r === a, i = r === a + 1;
-      a !== r && y && !m && (!g || t || n || i) && (L(y, l, I(), {
+      a !== r && I && !m && (!g || t || n || i) && (L(I, l, E(), {
         value: r
       }), u(r));
     },
-    [a, g, y, m, u]
+    [a, g, I, m, u]
   ), Q = e.useCallback(
     (l) => {
       const r = l.value, t = l.syntheticEvent;
-      w(t, r);
+      T(t, r);
     },
-    [w]
-  ), W = e.useCallback(
+    [T]
+  ), X = e.useCallback(
     (l) => {
-      h && !m && L(
-        h,
+      C && !m && L(
+        C,
         l.syntheticEvent,
-        I(),
+        E(),
         void 0
       );
     },
-    [h, m]
-  ), k = e.useMemo(() => {
-    const l = C === "rtl", r = p.length - 1;
-    return new re({
+    [C, m]
+  ), y = e.useMemo(() => {
+    const l = S === "rtl", r = p.length - 1;
+    return new le({
       root: f,
       selectors: ["ol.k-step-list li.k-step a.k-step-link"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
           Tab: (t, n, i) => {
-            const c = n.elements.indexOf(t), F = n.previous(t).children[0], O = n.next(t).children[0];
-            i.shiftKey ? !l && c > 0 ? (i.preventDefault(), n.focusPrevious(t), u(c - 1), v && F.click()) : l && c < r && (i.preventDefault(), n.focusNext(t), u(c + 1), v && O.click()) : !l && c < r ? (i.preventDefault(), n.focusNext(t), u(c + 1), v && O.click()) : l && c > 0 && (i.preventDefault(), n.focusPrevious(t), u(c - 1), v && F.click());
+            const c = n.elements.indexOf(t), M = n.previous(t).children[0], O = n.next(t).children[0];
+            i.shiftKey ? !l && c > 0 ? (i.preventDefault(), n.focusPrevious(t), u(c - 1), v && M.click()) : l && c < r && (i.preventDefault(), n.focusNext(t), u(c + 1), v && O.click()) : !l && c < r ? (i.preventDefault(), n.focusNext(t), u(c + 1), v && O.click()) : l && c > 0 && (i.preventDefault(), n.focusPrevious(t), u(c - 1), v && M.click());
           },
           Home: (t, n, i) => {
             i.preventDefault(), n.focusElement(n.first, t), u(0);
@@ -99,9 +101,9 @@ const V = e.forwardRef((S, z) => {
         }
       }
     });
-  }, [C, p.length, u, v]);
-  e.useEffect(() => (k.initializeRovingTab(a), () => k.removeFocusListener()), []);
-  const X = e.useCallback(k.triggerKeyboardEvent.bind(k), []), Y = e.useMemo(
+  }, [S, p.length, u, v]);
+  e.useEffect(() => (y.initializeRovingTab(a), () => y.removeFocusListener()), []);
+  const Y = e.useCallback(y.triggerKeyboardEvent.bind(y), []), Z = e.useMemo(
     () => A(
       "k-stepper",
       {
@@ -110,89 +112,89 @@ const V = e.forwardRef((S, z) => {
       x
     ),
     [g, x]
-  ), Z = e.useMemo(
+  ), $ = e.useMemo(
     () => ({
       display: "grid",
-      gridTemplateColumns: o ? void 0 : "repeat(" + d * 2 + ", 1fr)",
-      gridTemplateRows: o ? "repeat(" + d + ", 1fr)" : void 0,
-      ...D
+      gridTemplateColumns: s ? void 0 : "repeat(" + d * 2 + ", 1fr)",
+      gridTemplateRows: s ? "repeat(" + d + ", 1fr)" : void 0,
+      ...R
     }),
-    [o, d, D]
-  ), $ = e.useMemo(
+    [s, d, R]
+  ), ee = e.useMemo(
     () => A("k-step-list", {
-      "k-step-list-horizontal": !o,
-      "k-step-list-vertical": o
+      "k-step-list-horizontal": !s,
+      "k-step-list-vertical": s
     }),
-    [o]
-  ), ee = e.useMemo(
+    [s]
+  ), te = e.useMemo(
     () => ({
-      gridColumnStart: o ? void 0 : 1,
-      gridColumnEnd: o ? void 0 : -1,
-      gridRowStart: o ? 1 : void 0,
-      gridRowEnd: o ? -1 : void 0
+      gridColumnStart: s ? void 0 : 1,
+      gridColumnEnd: s ? void 0 : -1,
+      gridRowStart: s ? 1 : void 0,
+      gridRowEnd: s ? -1 : void 0
     }),
-    [o]
-  ), te = e.useMemo(
+    [s]
+  ), ne = e.useMemo(
     () => ({
-      gridColumnStart: o ? void 0 : 2,
-      gridColumnEnd: o ? void 0 : d * 2,
-      gridRowStart: o ? 1 : void 0,
-      gridRowEnd: o ? d : void 0,
-      top: o ? 17 : void 0
+      gridColumnStart: s ? void 0 : 2,
+      gridColumnEnd: s ? void 0 : d * 2,
+      gridRowStart: s ? 1 : void 0,
+      gridRowEnd: s ? d : void 0,
+      top: s ? 17 : void 0
     }),
-    [o, d]
-  ), T = p && p.map((l, r) => {
+    [s, d]
+  ), F = p && p.map((l, r) => {
     const t = {
       index: r,
       disabled: m || l.disabled,
-      focused: r === q,
+      focused: r === W,
       current: r === a,
       ...l
-    }, n = N || ie;
+    }, n = N || ae;
     return /* @__PURE__ */ e.createElement(n, { key: r, ...t });
   });
   return /* @__PURE__ */ e.createElement(
-    ne.Provider,
+    se.Provider,
     {
       value: {
-        animationDuration: b,
-        isVertical: o,
+        animationDuration: k,
+        isVertical: s,
         item: N,
         linear: g,
-        mode: _,
+        mode: B,
         numOfSteps: d,
         value: a,
-        successIcon: B,
-        successSVGIcon: U,
+        successIcon: U,
+        successSVGIcon: j,
         errorIcon: G,
-        errorSVGIcon: H,
+        errorSVGIcon: _,
         onChange: Q,
-        onFocus: W
+        onFocus: X
       }
     },
     /* @__PURE__ */ e.createElement(
       "nav",
       {
-        className: Y,
-        style: Z,
-        dir: C,
+        className: Z,
+        style: $,
+        dir: S,
         role: "navigation",
         ref: f,
-        onKeyDown: X
+        onKeyDown: Y
       },
-      /* @__PURE__ */ e.createElement("ol", { className: $, style: ee }, T || K),
+      /* @__PURE__ */ e.createElement("ol", { className: ee, style: te }, F || K),
       /* @__PURE__ */ e.createElement(
-        le,
+        ce,
         {
-          style: te,
+          style: ne,
           labelPlacement: "start",
           animation: { duration: J },
-          ariaLabel: j,
+          ariaLabel: q,
           "aria-hidden": !0,
           max: d - 1,
           labelVisible: !1,
-          orientation: E,
-          reverse: E === "vertical",
+          orientation: h,
+          reverse: h === "vertical",
           value: a,
           disabled: m,
           tabIndex: -1
@@ -201,27 +203,27 @@ const V = e.forwardRef((S, z) => {
     )
   );
 });
-V.propTypes = {
-  animationDuration: s.oneOfType([s.bool, s.number]),
-  children: s.any,
-  className: s.string,
-  dir: s.string,
-  disabled: s.bool,
-  errorIcon: s.string,
-  errorSVGIcon: M,
-  item: s.any,
-  items: s.any,
-  linear: s.bool,
-  mode: s.oneOf(["steps", "labels"]),
-  orientation: s.oneOf(["horizontal", "vertical"]),
-  style: s.object,
-  successIcon: s.string,
-  successSVGIcon: M,
-  value: s.number.isRequired,
-  onChange: s.func,
-  onFocus: s.func
+z.propTypes = {
+  animationDuration: o.oneOfType([o.bool, o.number]),
+  children: o.any,
+  className: o.string,
+  dir: o.string,
+  disabled: o.bool,
+  errorIcon: o.string,
+  errorSVGIcon: P,
+  item: o.any,
+  items: o.any,
+  linear: o.bool,
+  mode: o.oneOf(["steps", "labels"]),
+  orientation: o.oneOf(["horizontal", "vertical"]),
+  style: o.object,
+  successIcon: o.string,
+  successSVGIcon: P,
+  value: o.number.isRequired,
+  onChange: o.func,
+  onFocus: o.func
 };
-V.displayName = "KendoStepper";
+z.displayName = "KendoStepper";
 export {
-  V as Stepper
+  z as Stepper
 };

package/stepper/interfaces/StepperProps.d.ts

@@ -8,7 +8,7 @@
 import { StepProps } from './StepProps';
 import { StepperChangeEvent } from './StepperChangeEvent';
 import { StepperFocusEvent } from './StepperFocusEvent';
-import { SVGIcon } from '@progress/kendo-react-common';
+import { SVGIcon, WebMcpProps } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represents the props of the [KendoReact Stepper component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
@@ -213,4 +213,11 @@ export interface StepperProps {
      * ```
      */
     onFocus?: (event: StepperFocusEvent) => void;
+    /**
+     * Enables Web MCP tool registration so AI agents can interact with this Stepper.
+     * 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;
 }

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;