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

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

@@ -7,66 +7,66 @@
  */
 import * as e from "react";
 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) => {
+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: k,
-    children: K,
-    className: x,
+    children: B,
+    className: N,
     disabled: m,
-    errorIcon: G,
-    errorSVGIcon: _,
-    item: N,
+    errorIcon: U,
+    errorSVGIcon: j,
+    item: R,
     items: p,
     linear: g,
-    mode: B,
-    orientation: h,
-    selectOnFocus: v,
-    style: R,
-    successIcon: U,
-    successSVGIcon: j,
+    mode: q,
+    orientation: y,
+    selectOnFocus: b,
+    style: x,
+    successIcon: W,
+    successSVGIcon: J,
     value: a = 0,
     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);
+  } = 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: w
+      focus: L
     }),
-    [w]
+    [L]
   );
-  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.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 T = e.useCallback(
     (l, r) => {
-      const t = r === a - 1, n = r === a, i = r === a + 1;
-      a !== r && I && !m && (!g || t || n || i) && (L(I, l, E(), {
+      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, I, m, u]
-  ), Q = e.useCallback(
+  ), $ = e.useCallback(
     (l) => {
       const r = l.value, t = l.syntheticEvent;
       T(t, r);
     },
     [T]
-  ), X = e.useCallback(
+  ), ee = e.useCallback(
     (l) => {
-      C && !m && L(
+      C && !m && A(
         C,
         l.syntheticEvent,
         E(),
@@ -74,128 +74,127 @@ const z = e.forwardRef((b, H) => {
       );
     },
     [C, m]
-  ), y = e.useMemo(() => {
+  ), h = e.useMemo(() => {
     const l = S === "rtl", r = p.length - 1;
-    return new le({
+    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), 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());
+          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();
           }
         }
       }
     });
-  }, [S, p.length, u, v]);
-  e.useEffect(() => (y.initializeRovingTab(a), () => y.removeFocusListener()), []);
-  const Y = e.useCallback(y.triggerKeyboardEvent.bind(y), []), Z = 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]
-  ), $ = e.useMemo(
+    [g, N]
+  ), ne = e.useMemo(
     () => ({
       display: "grid",
-      gridTemplateColumns: s ? void 0 : "repeat(" + d * 2 + ", 1fr)",
-      gridTemplateRows: s ? "repeat(" + d + ", 1fr)" : void 0,
-      ...R
+      gridTemplateColumns: n ? void 0 : "repeat(" + d * 2 + ", 1fr)",
+      gridTemplateRows: n ? "repeat(" + d + ", 1fr)" : void 0,
+      ...x
     }),
-    [s, d, R]
-  ), ee = e.useMemo(
-    () => A("k-step-list", {
-      "k-step-list-horizontal": !s,
-      "k-step-list-vertical": s
+    [n, d, x]
+  ), oe = e.useMemo(
+    () => P("k-step-list", {
+      "k-step-list-horizontal": !n,
+      "k-step-list-vertical": n
     }),
-    [s]
-  ), te = e.useMemo(
+    [n]
+  ), re = e.useMemo(
     () => ({
-      gridColumnStart: s ? void 0 : 1,
-      gridColumnEnd: s ? void 0 : -1,
-      gridRowStart: s ? 1 : void 0,
-      gridRowEnd: s ? -1 : void 0
+      gridColumnStart: n ? void 0 : 1,
+      gridColumnEnd: n ? void 0 : -1,
+      gridRowStart: n ? 1 : void 0,
+      gridRowEnd: n ? -1 : void 0
     }),
-    [s]
-  ), ne = e.useMemo(
+    [n]
+  ), ie = e.useMemo(
     () => ({
-      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
+      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
     }),
-    [s, d]
-  ), F = p && p.map((l, r) => {
+    [n, d]
+  ), M = p && p.map((l, r) => {
     const t = {
       index: r,
       disabled: m || l.disabled,
-      focused: r === W,
+      focused: r === Y,
       current: r === a,
       ...l
-    }, n = N || ae;
-    return /* @__PURE__ */ e.createElement(n, { key: r, ...t });
+    }, s = R || me;
+    return /* @__PURE__ */ e.createElement(s, { key: r, ...t });
   });
   return /* @__PURE__ */ e.createElement(
-    se.Provider,
+    le.Provider,
     {
       value: {
         animationDuration: k,
-        isVertical: s,
-        item: N,
+        isVertical: n,
+        item: R,
         linear: g,
-        mode: B,
+        mode: q,
         numOfSteps: d,
         value: a,
-        successIcon: U,
-        successSVGIcon: j,
-        errorIcon: G,
-        errorSVGIcon: _,
-        onChange: Q,
-        onFocus: X
+        successIcon: W,
+        successSVGIcon: J,
+        errorIcon: U,
+        errorSVGIcon: j,
+        onChange: $,
+        onFocus: ee
       }
     },
     /* @__PURE__ */ e.createElement(
       "nav",
       {
-        className: Z,
-        style: $,
+        className: se,
+        style: ne,
         dir: S,
-        role: "navigation",
         ref: f,
-        onKeyDown: Y
+        onKeyDown: te,
+        "aria-label": X
       },
-      /* @__PURE__ */ e.createElement("ol", { className: ee, style: te }, F || K),
+      /* @__PURE__ */ e.createElement("ol", { className: oe, style: re }, M || B),
       /* @__PURE__ */ e.createElement(
-        ce,
+        pe,
         {
-          style: ne,
+          style: ie,
           labelPlacement: "start",
-          animation: { duration: J },
-          ariaLabel: q,
+          animation: { duration: Z },
+          ariaLabel: Q,
           "aria-hidden": !0,
-          max: d - 1,
           labelVisible: !1,
-          orientation: h,
-          reverse: h === "vertical",
-          value: a,
+          orientation: y,
+          reverse: y === "vertical",
+          value: d > 1 ? Math.round(a / (d - 1) * 100) : 0,
           disabled: m,
           tabIndex: -1
         }
@@ -203,14 +202,14 @@ const z = e.forwardRef((b, H) => {
     )
   );
 });
-z.propTypes = {
+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: P,
+  errorSVGIcon: V,
   item: o.any,
   items: o.any,
   linear: o.bool,
@@ -218,12 +217,12 @@ z.propTypes = {
   orientation: o.oneOf(["horizontal", "vertical"]),
   style: o.object,
   successIcon: o.string,
-  successSVGIcon: P,
+  successSVGIcon: V,
   value: o.number.isRequired,
   onChange: o.func,
   onFocus: o.func
 };
-z.displayName = "KendoStepper";
+G.displayName = "KendoStepper";
 export {
-  z as Stepper
+  G as Stepper
 };

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
 };