@progress/kendo-react-layout 14.5.0-develop.9 → 15.0.0-develop.2

package/stepper/Step.mjs

@@ -7,127 +7,121 @@
  */
 import * as e from "react";
 import a from "prop-types";
-import { StepperContext as Y } from "./context/StepperContext.mjs";
-import { focusFirstFocusableChild as Z, dispatchEvent as M, classNames as ee, IconWrap as T, toIconName as te } from "@progress/kendo-react-common";
-import { useLocalization as ae } from "@progress/kendo-react-intl";
-import { checkIcon as se, exclamationCircleIcon as oe } from "@progress/kendo-svg-icons";
-import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as ce } from "./contants.mjs";
-import { messages as le, optionalText as ie } from "./messages/index.mjs";
-const L = e.forwardRef((O, R) => {
+import { StepperContext as te } from "./context/StepperContext.mjs";
+import { focusFirstFocusableChild as ae, dispatchEvent as O, classNames as se, IconWrap as R, toIconName as oe } from "@progress/kendo-react-common";
+import { useLocalization as ne } from "@progress/kendo-react-intl";
+import { checkIcon as le, exclamationCircleIcon as ce } from "@progress/kendo-svg-icons";
+import { DEFAULT_ANIMATION_DURATION as ie, NO_ANIMATION as re } from "./contants.mjs";
+import { messages as me, optionalText as pe, stepAriaLabel as de } from "./messages/index.mjs";
+const V = e.forwardRef((D, $) => {
   const {
     // content
-    children: V,
-    className: g,
-    current: d,
+    children: z,
+    className: h,
+    current: b,
     disabled: o,
-    focused: E,
-    icon: r,
-    svgIcon: h,
+    focused: y,
+    icon: l,
+    svgIcon: k,
     index: s,
     isValid: t,
     label: n,
     optional: m,
-    style: C,
-    tabIndex: me = re.tabIndex,
-    text: y,
-    ...z
-  } = O, {
-    animationDuration: u,
-    isVertical: k,
-    item: D,
-    linear: H,
-    mode: S,
+    style: S,
+    tabIndex: be = ue.tabIndex,
+    text: p,
+    ...H
+  } = D, {
+    animationDuration: f,
+    isVertical: v,
+    item: _,
+    linear: w,
+    mode: A,
     numOfSteps: c,
-    value: l,
-    onChange: b,
-    onFocus: f,
-    successIcon: _,
-    errorIcon: w,
-    successSVGIcon: B,
-    errorSVGIcon: G
-  } = e.useContext(Y), p = e.useRef(null), F = e.useCallback(() => {
-    p.current && Z(p.current);
-  }, []), v = e.useCallback(
+    value: i,
+    onChange: I,
+    onFocus: N,
+    successIcon: B,
+    errorIcon: G,
+    successSVGIcon: P,
+    errorSVGIcon: U
+  } = e.useContext(te), d = e.useRef(null), F = e.useCallback(() => {
+    d.current && ae(d.current);
+  }, []), x = e.useCallback(
     () => ({
-      element: p.current,
+      element: d.current,
       focus: F
     }),
     [F]
   );
-  e.useImperativeHandle(R, v);
-  const I = !H || s === l - 1 || s === l || s === l + 1, N = S === "labels" || !!r && !!n, P = ae(), U = ((i) => P.toLanguageString(i, le[i]))(ie), W = typeof u == "number" ? u : u !== !1 ? ne : ce, $ = e.useCallback(
-    (i) => {
-      b && !o && M(b, i, v(), { value: s });
+  e.useImperativeHandle($, x);
+  const g = !w || s === i - 1 || s === i || s === i + 1, E = A === "labels" || !!l && !!n, W = ne(), L = (r) => W.toLanguageString(r, me[r]), j = L(pe), K = typeof f == "number" ? f : f !== !1 ? ie : re, q = e.useCallback(
+    (r) => {
+      I && !o && O(I, r, x(), { value: s });
     },
-    [b, l, o]
-  ), j = e.useCallback(
-    (i) => {
-      f && !o && M(f, i, v(), void 0);
+    [I, i, o]
+  ), J = e.useCallback(
+    (r) => {
+      N && !o && O(N, r, x(), void 0);
     },
-    [f, o]
-  ), K = e.useMemo(
-    () => ee(
+    [N, o]
+  ), Q = e.useMemo(
+    () => se(
       "k-step",
       {
         "k-step-first": s === 0,
         "k-step-last": c && s === c - 1,
-        "k-step-done": s < l,
-        "k-step-current": d,
+        "k-step-done": s < i,
+        "k-step-current": b,
         "k-step-optional": m,
         "k-step-error": t !== void 0 && !t,
         "k-step-success": t,
         "k-disabled": o,
-        "k-focus": E
+        "k-focus": y
       },
-      g
+      h
     ),
-    [s, c, l, d, m, o, E, t, g]
-  ), q = e.useMemo(
+    [s, c, i, b, m, o, y, t, h]
+  ), X = e.useMemo(
     () => ({
-      maxWidth: k ? void 0 : `calc(100% / ${c})`,
-      maxHeight: k ? `calc(100% / ${c})` : void 0,
-      pointerEvents: I ? void 0 : "none",
-      ...C
+      maxWidth: v ? void 0 : `calc(100% / ${c})`,
+      maxHeight: v ? `calc(100% / ${c})` : void 0,
+      pointerEvents: g ? void 0 : "none",
+      ...S
     }),
-    [k, c, C, I]
-  ), A = t ? _ : w, x = A ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-icon " + A, "aria-hidden": "true" }) : /* @__PURE__ */ e.createElement(
-    T,
+    [v, c, S, g]
+  ), M = t ? B : G, C = M ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-icon " + M, "aria-hidden": "true" }) : /* @__PURE__ */ e.createElement(
+    R,
     {
       className: "k-step-indicator-icon",
       name: t ? "check-circle" : "exclamation-circle",
-      icon: t ? B || se : G || oe
+      icon: t ? P || le : U || ce
     }
-  ), J = /* @__PURE__ */ e.createElement(e.Fragment, null, S !== "labels" ? /* @__PURE__ */ e.createElement(
-    "span",
+  ), Y = /* @__PURE__ */ e.createElement(e.Fragment, null, A !== "labels" ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator", style: { transitionDuration: K + "ms" } }, l || k ? !E && t !== void 0 ? C : /* @__PURE__ */ e.createElement(
+    R,
     {
-      className: "k-step-indicator",
-      "aria-hidden": !0,
-      style: { transitionDuration: W + "ms" }
-    },
-    r || h ? !N && t !== void 0 ? x : /* @__PURE__ */ e.createElement(
-      T,
-      {
-        className: "k-step-indicator-icon",
-        name: r && te(r),
-        icon: h
-      }
-    ) : t !== void 0 ? x : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, y || s + 1)
-  ) : null), Q = (n || N || m) && /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, n && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, n), N && t !== void 0 && x, m && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, U)), X = /* @__PURE__ */ e.createElement(e.Fragment, null, J, Q);
-  return /* @__PURE__ */ e.createElement("li", { ref: p, className: K, style: q, ...z }, /* @__PURE__ */ e.createElement(
+      className: "k-step-indicator-icon",
+      name: l && oe(l),
+      icon: k
+    }
+  ) : t !== void 0 ? C : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, p || s + 1)) : null), Z = (n || E || m) && /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, n && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, n), E && t !== void 0 && C, m && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, j)), ee = /* @__PURE__ */ e.createElement(e.Fragment, null, Y, Z), T = L(de);
+  let u = n;
+  return u || (p ? u = `${T} ${p}` : (l || k) && (u = T)), /* @__PURE__ */ e.createElement("li", { ref: d, className: Q, style: X, ...H }, /* @__PURE__ */ e.createElement(
     "a",
     {
       className: "k-step-link",
       title: n || void 0,
-      onClick: $,
-      onFocus: j,
-      "aria-current": d ? "step" : void 0,
-      "aria-disabled": o || !I || void 0,
-      "aria-invalid": t !== void 0 && !t || void 0
+      onClick: q,
+      onFocus: J,
+      "aria-current": b ? "step" : void 0,
+      "aria-disabled": o || !g || void 0,
+      "aria-invalid": t !== void 0 && !t || void 0,
+      "aria-label": u
     },
-    D ? V : X
+    _ ? z : ee
   ));
 });
-L.propTypes = {
+V.propTypes = {
   children: a.any,
   className: a.string,
   // content: PropTypes.any,
@@ -142,10 +136,10 @@ L.propTypes = {
   tabIndex: a.number,
   text: a.string
 };
-const re = {
+const ue = {
   tabIndex: 0
 };
-L.displayName = "KendoStep";
+V.displayName = "KendoStep";
 export {
-  L as Step
+  V as Step
 };

package/stepper/Stepper.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 te=require("react"),o=require("prop-types"),ne=require("./context/StepperContext.js"),p=require("@progress/kendo-react-common"),se=require("./Step.js"),oe=require("@progress/kendo-react-progressbars"),z=require("./contants.js"),re=require("@progress/kendo-react-intl"),R=require("./messages/index.js");function ie(m){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const d in m)if(d!=="default"){const h=Object.getOwnPropertyDescriptor(m,d);Object.defineProperty(k,d,h.get?h:{enumerable:!0,get:()=>m[d]})}}return k.default=m,Object.freeze(k)}const e=ie(te),O=e.forwardRef((m,k)=>{const{animationDuration:d,children:h,className:T,disabled:g,errorIcon:V,errorSVGIcon:j,item:w,items:b,linear:y,mode:_,orientation:S,selectOnFocus:E,style:P,successIcon:K,successSVGIcon:G,value:a=0,onChange:C,onFocus:N}=m,B=re.useLocalization().toLanguageString(R.progBarAriaLabel,R.messages[R.progBarAriaLabel]),v=e.useRef(null),q=e.useCallback(()=>{v.current&&p.focusFirstFocusableChild(v.current)},[]),x=e.useCallback(()=>({element:v.current,focus:q}),[q]);e.useImperativeHandle(k,x);const[H,u]=e.useState(a),f=b?b.length:0,s=S==="vertical",D=p.useDir(v,m.dir),U=typeof d=="number"?d:d!==!1?z.DEFAULT_ANIMATION_DURATION:z.NO_ANIMATION;e.useEffect(()=>{u(a)},[a]);const F=e.useCallback((c,r)=>{const t=r===a-1,n=r===a,i=r===a+1;a!==r&&C&&!g&&(!y||t||n||i)&&(p.dispatchEvent(C,c,x(),{value:r}),u(r))},[a,y,C,g,u]),J=e.useCallback(c=>{const r=c.value,t=c.syntheticEvent;F(t,r)},[F]),Q=e.useCallback(c=>{N&&!g&&p.dispatchEvent(N,c.syntheticEvent,x(),void 0)},[N,g]),I=e.useMemo(()=>{const c=D==="rtl",r=b.length-1;return new p.Navigation({root:v,selectors:["ol.k-step-list li.k-step a.k-step-link"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,n,i)=>{const l=n.elements.indexOf(t),M=n.previous(t).children[0],A=n.next(t).children[0];i.shiftKey?!c&&l>0?(i.preventDefault(),n.focusPrevious(t),u(l-1),E&&M.click()):c&&l<r&&(i.preventDefault(),n.focusNext(t),u(l+1),E&&A.click()):!c&&l<r?(i.preventDefault(),n.focusNext(t),u(l+1),E&&A.click()):c&&l>0&&(i.preventDefault(),n.focusPrevious(t),u(l-1),E&&M.click())},Home:(t,n,i)=>{i.preventDefault(),n.focusElement(n.first,t),u(0)},End:(t,n,i)=>{i.preventDefault(),n.focusElement(n.last,t),u(r)},Space:(t,n,i)=>{i.preventDefault(),t.children[0].click()},Enter:(t,n,i)=>{i.preventDefault(),t.children[0].click()}}}})},[D,b.length,u,E]);e.useEffect(()=>(I.initializeRovingTab(a),()=>I.removeFocusListener()),[]);const W=e.useCallback(I.triggerKeyboardEvent.bind(I),[]),X=e.useMemo(()=>p.classNames("k-stepper",{"k-stepper-linear":y},T),[y,T]),Y=e.useMemo(()=>({display:"grid",gridTemplateColumns:s?void 0:"repeat("+f*2+", 1fr)",gridTemplateRows:s?"repeat("+f+", 1fr)":void 0,...P}),[s,f,P]),Z=e.useMemo(()=>p.classNames("k-step-list",{"k-step-list-horizontal":!s,"k-step-list-vertical":s}),[s]),$=e.useMemo(()=>({gridColumnStart:s?void 0:1,gridColumnEnd:s?void 0:-1,gridRowStart:s?1:void 0,gridRowEnd:s?-1:void 0}),[s]),ee=e.useMemo(()=>({gridColumnStart:s?void 0:2,gridColumnEnd:s?void 0:f*2,gridRowStart:s?1:void 0,gridRowEnd:s?f:void 0,top:s?17:void 0}),[s,f]),L=b&&b.map((c,r)=>{const t={index:r,disabled:g||c.disabled,focused:r===H,current:r===a,...c},n=w||se.Step;return e.createElement(n,{key:r,...t})});return e.createElement(ne.StepperContext.Provider,{value:{animationDuration:d,isVertical:s,item:w,linear:y,mode:_,numOfSteps:f,value:a,successIcon:K,successSVGIcon:G,errorIcon:V,errorSVGIcon:j,onChange:J,onFocus:Q}},e.createElement("nav",{className:X,style:Y,dir:D,role:"navigation",ref:v,onKeyDown:W},e.createElement("ol",{className:Z,style:$},L||h),e.createElement(oe.ProgressBar,{style:ee,labelPlacement:"start",animation:{duration:U},ariaLabel:B,"aria-hidden":!0,max:f-1,labelVisible:!1,orientation:S,reverse:S==="vertical",value:a,disabled:g,tabIndex:-1})))});O.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.svgIconPropType,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.svgIconPropType,value:o.number.isRequired,onChange:o.func,onFocus:o.func};O.displayName="KendoStepper";exports.Stepper=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const oe=require("react"),o=require("prop-types"),re=require("./context/StepperContext.js"),p=require("@progress/kendo-react-common"),ae=require("./Step.js"),ie=require("@progress/kendo-react-progressbars"),z=require("./contants.js"),ce=require("@progress/kendo-react-intl"),k=require("./messages/index.js");function le(u){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const m in u)if(m!=="default"){const I=Object.getOwnPropertyDescriptor(u,m);Object.defineProperty(y,m,I.get?I:{enumerable:!0,get:()=>u[m]})}}return y.default=u,Object.freeze(y)}const e=le(oe),O=e.forwardRef((u,y)=>{const{animationDuration:m,children:I,className:T,disabled:g,errorIcon:_,errorSVGIcon:H,item:w,items:b,linear:E,mode:K,orientation:R,selectOnFocus:h,style:L,successIcon:G,successSVGIcon:B,value:c=0,onChange:N,onFocus:D}=u,M=ce.useLocalization(),U=M.toLanguageString(k.progressBarAriaLabel,k.messages[k.progressBarAriaLabel]),W=M.toLanguageString(k.ariaLabel,k.messages[k.ariaLabel]),v=e.useRef(null),P=e.useRef(null);p.useWebMcpRegister("stepper",P,u,u.webMcp);const q=e.useCallback(()=>{v.current&&p.focusFirstFocusableChild(v.current)},[]),S=e.useCallback(()=>({element:v.current,focus:q}),[q]);e.useImperativeHandle(y,S),e.useImperativeHandle(P,S);const[J,d]=e.useState(c),f=b?b.length:0,s=R==="vertical",x=p.useDir(v,u.dir),Q=typeof m=="number"?m:m!==!1?z.DEFAULT_ANIMATION_DURATION:z.NO_ANIMATION;e.useEffect(()=>{d(c)},[c]);const A=e.useCallback((i,r)=>{const t=r===c-1,n=r===c,a=r===c+1;c!==r&&N&&!g&&(!E||t||n||a)&&(p.dispatchEvent(N,i,S(),{value:r}),d(r))},[c,E,N,g,d]),X=e.useCallback(i=>{const r=i.value,t=i.syntheticEvent;A(t,r)},[A]),Y=e.useCallback(i=>{D&&!g&&p.dispatchEvent(D,i.syntheticEvent,S(),void 0)},[D,g]),C=e.useMemo(()=>{const i=x==="rtl",r=b.length-1;return new p.Navigation({root:v,selectors:["ol.k-step-list li.k-step a.k-step-link"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,n,a)=>{const l=n.elements.indexOf(t),V=n.previous(t).children[0],j=n.next(t).children[0];a.shiftKey?!i&&l>0?(a.preventDefault(),n.focusPrevious(t),d(l-1),h&&V.click()):i&&l<r&&(a.preventDefault(),n.focusNext(t),d(l+1),h&&j.click()):!i&&l<r?(a.preventDefault(),n.focusNext(t),d(l+1),h&&j.click()):i&&l>0&&(a.preventDefault(),n.focusPrevious(t),d(l-1),h&&V.click())},Home:(t,n,a)=>{a.preventDefault(),n.focusElement(n.first,t),d(0)},End:(t,n,a)=>{a.preventDefault(),n.focusElement(n.last,t),d(r)},Space:(t,n,a)=>{a.preventDefault(),t.children[0].click()},Enter:(t,n,a)=>{a.preventDefault(),t.children[0].click()}}}})},[x,b.length,d,h]);e.useEffect(()=>(C.initializeRovingTab(c),()=>C.removeFocusListener()),[]);const Z=e.useCallback(C.triggerKeyboardEvent.bind(C),[]),$=e.useMemo(()=>p.classNames("k-stepper",{"k-stepper-linear":E},T),[E,T]),ee=e.useMemo(()=>({display:"grid",gridTemplateColumns:s?void 0:"repeat("+f*2+", 1fr)",gridTemplateRows:s?"repeat("+f+", 1fr)":void 0,...L}),[s,f,L]),te=e.useMemo(()=>p.classNames("k-step-list",{"k-step-list-horizontal":!s,"k-step-list-vertical":s}),[s]),ne=e.useMemo(()=>({gridColumnStart:s?void 0:1,gridColumnEnd:s?void 0:-1,gridRowStart:s?1:void 0,gridRowEnd:s?-1:void 0}),[s]),se=e.useMemo(()=>({gridColumnStart:s?void 0:2,gridColumnEnd:s?void 0:f*2,gridRowStart:s?1:void 0,gridRowEnd:s?f:void 0,top:s?17:void 0}),[s,f]),F=b&&b.map((i,r)=>{const t={index:r,disabled:g||i.disabled,focused:r===J,current:r===c,...i},n=w||ae.Step;return e.createElement(n,{key:r,...t})});return e.createElement(re.StepperContext.Provider,{value:{animationDuration:m,isVertical:s,item:w,linear:E,mode:K,numOfSteps:f,value:c,successIcon:G,successSVGIcon:B,errorIcon:_,errorSVGIcon:H,onChange:X,onFocus:Y}},e.createElement("nav",{className:$,style:ee,dir:x,ref:v,onKeyDown:Z,"aria-label":W},e.createElement("ol",{className:te,style:ne},F||I),e.createElement(ie.ProgressBar,{style:se,labelPlacement:"start",animation:{duration:Q},ariaLabel:U,"aria-hidden":!0,labelVisible:!1,orientation:R,reverse:R==="vertical",value:f>1?Math.round(c/(f-1)*100):0,disabled:g,tabIndex:-1})))});O.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.svgIconPropType,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.svgIconPropType,value:o.number.isRequired,onChange:o.func,onFocus:o.func};O.displayName="KendoStepper";exports.Stepper=O;

package/stepper/Stepper.mjs

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