@progress/kendo-react-layout 7.4.0 → 7.5.0-develop.2

package/stepper/Step.mjs

@@ -14,66 +14,66 @@ import { useLocalization as se } from "@progress/kendo-react-intl";
 import { checkOutlineIcon as ne, exclamationCircleIcon as oe } from "@progress/kendo-svg-icons";
 import { DEFAULT_ANIMATION_DURATION as ce, NO_ANIMATION as le } from "./contants.mjs";
 import { messages as ie, optionalText as re } from "./messages/index.mjs";
-const g = e.forwardRef((R, V) => {
+const E = e.forwardRef((R, V) => {
   const {
     // content
     children: z,
-    className: E,
-    current: p,
+    className: h,
+    current: d,
     disabled: n,
-    focused: d,
-    icon: i,
-    svgIcon: h,
+    focused: u,
+    icon: r,
+    svgIcon: C,
     index: s,
     isValid: t,
-    label: r,
-    optional: u,
-    style: C,
-    tabIndex: y,
-    text: S,
+    label: o,
+    optional: m,
+    style: y,
+    tabIndex: S,
+    text: F,
     ...D
   } = R, {
     animationDuration: k,
     isVertical: b,
     item: H,
     linear: P,
-    mode: F,
-    numOfSteps: o,
-    value: c,
+    mode: A,
+    numOfSteps: c,
+    value: l,
     onChange: f,
     onFocus: I,
     successIcon: _,
     errorIcon: w,
     successSVGIcon: B,
     errorSVGIcon: G
-  } = e.useContext(Z), m = e.useRef(null), A = e.useCallback(
+  } = e.useContext(Z), p = e.useRef(null), M = e.useCallback(
     () => {
-      m.current && ee(m.current);
+      p.current && ee(p.current);
     },
     []
   ), v = e.useCallback(
     () => ({
-      element: m.current,
-      focus: A
+      element: p.current,
+      focus: M
     }),
-    [A]
+    [M]
   );
   e.useImperativeHandle(V, v);
-  const N = !P || s === c - 1 || s === c || s === c + 1, M = F === "labels" || !!i && !!r, U = se(), W = ((l) => U.toLanguageString(l, ie[l]))(re), $ = typeof k == "number" ? k : k !== !1 ? ce : le, j = e.useCallback(
-    (l) => {
+  const N = !P || s === l - 1 || s === l || s === l + 1, x = A === "labels" || !!r && !!o, U = se(), W = ((i) => U.toLanguageString(i, ie[i]))(re), $ = typeof k == "number" ? k : k !== !1 ? ce : le, j = e.useCallback(
+    (i) => {
       f && !n && L(
         f,
-        l,
+        i,
         v(),
         { value: s }
       );
     },
-    [f, c, n]
+    [f, l, n]
   ), K = e.useCallback(
-    (l) => {
+    (i) => {
       I && !n && L(
         I,
-        l,
+        i,
         v(),
         void 0
       );
@@ -84,29 +84,29 @@ const g = e.forwardRef((R, V) => {
       "k-step",
       {
         "k-step-first": s === 0,
-        "k-step-last": o && s === o - 1,
-        "k-step-done": s < c,
-        "k-step-current": p,
-        "k-step-optional": u,
+        "k-step-last": c && s === c - 1,
+        "k-step-done": s < l,
+        "k-step-current": d,
+        "k-step-optional": m,
         "k-step-error": t !== void 0 && !t,
         "k-step-success": t
       },
       {
         "k-disabled": n,
-        "k-focus": d
+        "k-focus": u
       },
-      E
+      h
     ),
-    [s, o, c, p, u, n, d, t, E]
+    [s, c, l, d, m, n, u, t, h]
   ), J = e.useMemo(
     () => ({
-      maxWidth: b ? void 0 : `calc(100% / ${o})`,
-      maxHeight: b ? `calc(100% / ${o})` : void 0,
+      maxWidth: b ? void 0 : `calc(100% / ${c})`,
+      maxHeight: b ? `calc(100% / ${c})` : void 0,
       pointerEvents: N ? void 0 : "none",
-      ...C
+      ...y
     }),
-    [b, o, C, N]
-  ), T = t ? _ : w, x = T ? /* @__PURE__ */ e.createElement(
+    [b, c, y, N]
+  ), T = t ? _ : w, g = T ? /* @__PURE__ */ e.createElement(
     "span",
     {
       className: "k-step-indicator-icon " + T,
@@ -119,19 +119,19 @@ const g = e.forwardRef((R, V) => {
       name: t ? "check-circle" : "exclamation-circle",
       icon: t ? B || ne : G || oe
     }
-  ), Q = /* @__PURE__ */ e.createElement(e.Fragment, null, F !== "labels" ? /* @__PURE__ */ e.createElement(
+  ), Q = /* @__PURE__ */ e.createElement(e.Fragment, null, A !== "labels" ? /* @__PURE__ */ e.createElement(
     "span",
     {
       className: "k-step-indicator",
       "aria-hidden": !0,
       style: { transitionDuration: $ + "ms" }
     },
-    i || h ? !M && t !== void 0 ? x : /* @__PURE__ */ e.createElement(O, { className: "k-step-indicator-icon", name: i && ae(i), icon: h }) : t !== void 0 ? x : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, S || s + 1)
-  ) : null), X = /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, r && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, r), M && t !== void 0 && x, u && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, W)), Y = /* @__PURE__ */ e.createElement(e.Fragment, null, Q, X);
+    r || C ? !x && t !== void 0 ? g : /* @__PURE__ */ e.createElement(O, { className: "k-step-indicator-icon", name: r && ae(r), icon: C }) : t !== void 0 ? g : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, F || s + 1)
+  ) : null), X = (o || x || m) && /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, o && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, o), x && t !== void 0 && g, m && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, W)), Y = /* @__PURE__ */ e.createElement(e.Fragment, null, Q, X);
   return /* @__PURE__ */ e.createElement(
     "li",
     {
-      ref: m,
+      ref: p,
       className: q,
       style: J,
       ...D
@@ -140,11 +140,11 @@ const g = e.forwardRef((R, V) => {
       "a",
       {
         className: "k-step-link",
-        title: r || void 0,
+        title: o || void 0,
         onClick: j,
         onFocus: K,
-        tabIndex: y || (d ? 0 : -1),
-        "aria-current": p,
+        tabIndex: S || (u ? 0 : -1),
+        "aria-current": d,
         "aria-disabled": n || !N || void 0,
         "aria-invalid": t !== void 0 && !t || void 0
       },
@@ -152,7 +152,7 @@ const g = e.forwardRef((R, V) => {
     )
   );
 });
-g.propTypes = {
+E.propTypes = {
   children: a.any,
   className: a.string,
   // content: PropTypes.any,
@@ -170,8 +170,8 @@ g.propTypes = {
 const me = {
   tabIndex: 0
 };
-g.defaultProps = me;
-g.displayName = "KendoStep";
+E.defaultProps = me;
+E.displayName = "KendoStep";
 export {
-  g as Step
+  E 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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),r=require("prop-types"),$=require("./context/StepperContext.js"),o=require("@progress/kendo-react-common"),ee=require("./Step.js"),te=require("@progress/kendo-react-progressbars"),K=require("./contants.js"),se=require("../package-metadata.js"),ae=require("@progress/kendo-react-intl"),N=require("./messages/index.js");function ne(l){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const u in l)if(u!=="default"){const v=Object.getOwnPropertyDescriptor(l,u);Object.defineProperty(b,u,v.get?v:{enumerable:!0,get:()=>l[u]})}}return b.default=l,Object.freeze(b)}const a=ne(Z),I=a.forwardRef((l,b)=>{o.validatePackage(se.packageMetadata);const{animationDuration:u,children:v,className:O,disabled:f,errorIcon:A,errorSVGIcon:F,item:w,items:m,linear:g,mode:L,orientation:S,style:P,successIcon:V,successSVGIcon:j,onChange:h,onFocus:E}=l,z=ae.useLocalization().toLanguageString(N.progBarAriaLabel,N.messages[N.progBarAriaLabel]),k=a.useRef(null),T=a.useCallback(()=>{k.current&&o.focusFirstFocusableChild(k.current)},[]),R=a.useCallback(()=>({element:k.current,focus:T}),[T]);a.useImperativeHandle(b,R);const i=l.value||M.value,[y,c]=a.useState(i),p=m?m.length:0,n=S==="vertical",D=o.useRtl(k,l.dir),_=typeof u=="number"?u:u!==!1?K.DEFAULT_ANIMATION_DURATION:K.NO_ANIMATION;a.useEffect(()=>{c(i)},[i]);const C=a.useCallback((t,s)=>{const e=s===i-1,d=s===i,Y=s===i+1;i!==s&&h&&!f&&(!g||e||d||Y)&&(o.dispatchEvent(h,t,R(),{value:s}),c(s))},[i,g,h,f,c]),G=a.useCallback(t=>{let s=t.value,e=t.syntheticEvent;C(e,s)},[C]),B=a.useCallback(t=>{E&&!f&&o.dispatchEvent(E,t.syntheticEvent,R(),void 0)},[E,f]),q=a.useCallback(t=>{C(t,y)},[C,y]),H=a.useCallback(t=>{const s=D==="rtl",e=y,d=m.length-1;switch(t.keyCode){case o.Keys.left:t.preventDefault(),!s&&e>0&&c(e-1),s&&e<d&&c(e+1);break;case o.Keys.right:t.preventDefault(),!s&&e<d&&c(e+1),s&&e>0&&c(e-1);break;case o.Keys.up:t.preventDefault(),!s&&e>0&&c(e-1),s&&e>0&&c(e-1);break;case o.Keys.down:t.preventDefault(),!s&&e<d&&c(e+1),s&&e<d&&c(e+1);break;case o.Keys.home:t.preventDefault(),c(0);break;case o.Keys.end:t.preventDefault(),c(d);break;case o.Keys.space:t.preventDefault();break;case o.Keys.enter:t.preventDefault(),m[e].disabled||q(t);break}},[m,c,y,D,q]),U=a.useMemo(()=>o.classNames("k-stepper",{"k-stepper-linear":g},O),[g,O]),J=a.useMemo(()=>({display:"grid",gridTemplateColumns:n?void 0:"repeat("+p*2+", 1fr)",gridTemplateRows:n?"repeat("+p+", 1fr)":void 0,...P}),[n,p,P]),Q=a.useMemo(()=>o.classNames("k-step-list",{"k-step-list-horizontal":!n,"k-step-list-vertical":n}),[n]),W=a.useMemo(()=>({gridColumnStart:n?void 0:1,gridColumnEnd:n?void 0:-1,gridRowStart:n?1:void 0,gridRowEnd:n?-1:void 0}),[n]),X=a.useMemo(()=>({gridColumnStart:n?void 0:2,gridColumnEnd:n?void 0:p*2,gridRowStart:n?1:void 0,gridRowEnd:n?p:void 0,top:n?17:void 0}),[n,p]),x=m&&m.map((t,s)=>{const e={index:s,disabled:f||t.disabled,focused:s===y,current:s===i,...t},d=w||ee.Step;return a.createElement(d,{key:s,...e})});return a.createElement($.StepperContext.Provider,{value:{animationDuration:u,isVertical:n,item:w,linear:g,mode:L,numOfSteps:p,value:i,successIcon:V,successSVGIcon:j,errorIcon:A,errorSVGIcon:F,onChange:G,onFocus:B}},a.createElement("nav",{className:U,style:J,dir:D,onKeyDown:H},a.createElement("ol",{className:Q,style:W},x||v),a.createElement(te.ProgressBar,{style:X,animation:{duration:_},ariaLabel:z,"aria-hidden":!0,max:p-1,labelVisible:!1,orientation:S,reverse:S==="vertical",value:i,disabled:f,tabIndex:-1})))});I.propTypes={animationDuration:r.oneOfType([r.bool,r.number]),children:r.any,className:r.string,dir:r.string,disabled:r.bool,errorIcon:r.string,errorSVGIcon:o.svgIconPropType,item:r.any,items:r.any,linear:r.bool,mode:r.oneOf(["steps","labels"]),orientation:r.oneOf(["horizontal","vertical"]),style:r.object,successIcon:r.string,successSVGIcon:o.svgIconPropType,value:r.number.isRequired,onChange:r.func,onFocus:r.func};const M={value:0};I.defaultProps=M;I.displayName="KendoStepper";exports.Stepper=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),r=require("prop-types"),$=require("./context/StepperContext.js"),o=require("@progress/kendo-react-common"),ee=require("./Step.js"),te=require("@progress/kendo-react-progressbars"),K=require("./contants.js"),se=require("../package-metadata.js"),ae=require("@progress/kendo-react-intl"),N=require("./messages/index.js");function ne(i){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const u in i)if(u!=="default"){const v=Object.getOwnPropertyDescriptor(i,u);Object.defineProperty(b,u,v.get?v:{enumerable:!0,get:()=>i[u]})}}return b.default=i,Object.freeze(b)}const a=ne(Z),I=a.forwardRef((i,b)=>{o.validatePackage(se.packageMetadata);const{animationDuration:u,children:v,className:O,disabled:f,errorIcon:A,errorSVGIcon:F,item:P,items:m,linear:g,mode:L,orientation:S,style:w,successIcon:V,successSVGIcon:j,onChange:h,onFocus:E}=i,z=ae.useLocalization().toLanguageString(N.progBarAriaLabel,N.messages[N.progBarAriaLabel]),k=a.useRef(null),T=a.useCallback(()=>{k.current&&o.focusFirstFocusableChild(k.current)},[]),R=a.useCallback(()=>({element:k.current,focus:T}),[T]);a.useImperativeHandle(b,R);const l=i.value||M.value,[y,c]=a.useState(l),p=m?m.length:0,n=S==="vertical",D=o.useRtl(k,i.dir),_=typeof u=="number"?u:u!==!1?K.DEFAULT_ANIMATION_DURATION:K.NO_ANIMATION;a.useEffect(()=>{c(l)},[l]);const C=a.useCallback((t,s)=>{const e=s===l-1,d=s===l,Y=s===l+1;l!==s&&h&&!f&&(!g||e||d||Y)&&(o.dispatchEvent(h,t,R(),{value:s}),c(s))},[l,g,h,f,c]),G=a.useCallback(t=>{let s=t.value,e=t.syntheticEvent;C(e,s)},[C]),B=a.useCallback(t=>{E&&!f&&o.dispatchEvent(E,t.syntheticEvent,R(),void 0)},[E,f]),q=a.useCallback(t=>{C(t,y)},[C,y]),H=a.useCallback(t=>{const s=D==="rtl",e=y,d=m.length-1;switch(t.keyCode){case o.Keys.left:t.preventDefault(),!s&&e>0&&c(e-1),s&&e<d&&c(e+1);break;case o.Keys.right:t.preventDefault(),!s&&e<d&&c(e+1),s&&e>0&&c(e-1);break;case o.Keys.up:t.preventDefault(),!s&&e>0&&c(e-1),s&&e>0&&c(e-1);break;case o.Keys.down:t.preventDefault(),!s&&e<d&&c(e+1),s&&e<d&&c(e+1);break;case o.Keys.home:t.preventDefault(),c(0);break;case o.Keys.end:t.preventDefault(),c(d);break;case o.Keys.space:t.preventDefault();break;case o.Keys.enter:t.preventDefault(),m[e].disabled||q(t);break}},[m,c,y,D,q]),U=a.useMemo(()=>o.classNames("k-stepper",{"k-stepper-linear":g},O),[g,O]),J=a.useMemo(()=>({display:"grid",gridTemplateColumns:n?void 0:"repeat("+p*2+", 1fr)",gridTemplateRows:n?"repeat("+p+", 1fr)":void 0,...w}),[n,p,w]),Q=a.useMemo(()=>o.classNames("k-step-list",{"k-step-list-horizontal":!n,"k-step-list-vertical":n}),[n]),W=a.useMemo(()=>({gridColumnStart:n?void 0:1,gridColumnEnd:n?void 0:-1,gridRowStart:n?1:void 0,gridRowEnd:n?-1:void 0}),[n]),X=a.useMemo(()=>({gridColumnStart:n?void 0:2,gridColumnEnd:n?void 0:p*2,gridRowStart:n?1:void 0,gridRowEnd:n?p:void 0,top:n?17:void 0}),[n,p]),x=m&&m.map((t,s)=>{const e={index:s,disabled:f||t.disabled,focused:s===y,current:s===l,...t},d=P||ee.Step;return a.createElement(d,{key:s,...e})});return a.createElement($.StepperContext.Provider,{value:{animationDuration:u,isVertical:n,item:P,linear:g,mode:L,numOfSteps:p,value:l,successIcon:V,successSVGIcon:j,errorIcon:A,errorSVGIcon:F,onChange:G,onFocus:B}},a.createElement("nav",{className:U,style:J,dir:D,onKeyDown:H},a.createElement("ol",{className:Q,style:W},x||v),a.createElement(te.ProgressBar,{style:X,labelPlacement:"start",animation:{duration:_},ariaLabel:z,"aria-hidden":!0,max:p-1,labelVisible:!1,orientation:S,reverse:S==="vertical",value:l,disabled:f,tabIndex:-1})))});I.propTypes={animationDuration:r.oneOfType([r.bool,r.number]),children:r.any,className:r.string,dir:r.string,disabled:r.bool,errorIcon:r.string,errorSVGIcon:o.svgIconPropType,item:r.any,items:r.any,linear:r.bool,mode:r.oneOf(["steps","labels"]),orientation:r.oneOf(["horizontal","vertical"]),style:r.object,successIcon:r.string,successSVGIcon:o.svgIconPropType,value:r.number.isRequired,onChange:r.func,onFocus:r.func};const M={value:0};I.defaultProps=M;I.displayName="KendoStepper";exports.Stepper=I;

package/stepper/Stepper.mjs

@@ -6,28 +6,28 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
+import * as a from "react";
 import r from "prop-types";
 import { StepperContext as ee } from "./context/StepperContext.mjs";
-import { validatePackage as te, focusFirstFocusableChild as se, useRtl as oe, dispatchEvent as A, Keys as u, classNames as F, svgIconPropType as M } from "@progress/kendo-react-common";
-import { Step as ae } from "./Step.mjs";
+import { validatePackage as te, focusFirstFocusableChild as se, useRtl as ae, dispatchEvent as P, Keys as u, classNames as A, svgIconPropType as F } from "@progress/kendo-react-common";
+import { Step as oe } from "./Step.mjs";
 import { ProgressBar as re } from "@progress/kendo-react-progressbars";
-import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as ie } from "./contants.mjs";
-import { packageMetadata as le } from "../package-metadata.mjs";
+import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as le } from "./contants.mjs";
+import { packageMetadata as ie } from "../package-metadata.mjs";
 import { useLocalization as ce } from "@progress/kendo-react-intl";
-import { progBarAriaLabel as O, messages as ue } from "./messages/index.mjs";
-const E = o.forwardRef((k, V) => {
-  te(le);
+import { progBarAriaLabel as M, messages as ue } from "./messages/index.mjs";
+const E = a.forwardRef((k, V) => {
+  te(ie);
   const {
     animationDuration: b,
     children: L,
     className: D,
-    disabled: p,
+    disabled: m,
     errorIcon: z,
     errorSVGIcon: G,
     item: N,
     items: d,
-    linear: m,
+    linear: p,
     mode: K,
     orientation: y,
     style: R,
@@ -35,76 +35,76 @@ const E = o.forwardRef((k, V) => {
     successSVGIcon: B,
     onChange: h,
     onFocus: C
-  } = k, H = ce().toLanguageString(O, ue[O]), g = o.useRef(null), w = o.useCallback(
+  } = k, H = ce().toLanguageString(M, ue[M]), g = a.useRef(null), w = a.useCallback(
     () => {
       g.current && se(g.current);
     },
     []
-  ), I = o.useCallback(
+  ), I = a.useCallback(
     () => ({
       element: g.current,
       focus: w
     }),
     [w]
   );
-  o.useImperativeHandle(V, I);
-  const i = k.value || P.value, [f, n] = o.useState(i), c = d ? d.length : 0, a = y === "vertical", S = oe(g, k.dir), U = typeof b == "number" ? b : b !== !1 ? ne : ie;
-  o.useEffect(() => {
-    n(i);
-  }, [i]);
-  const v = o.useCallback(
+  a.useImperativeHandle(V, I);
+  const l = k.value || O.value, [f, n] = a.useState(l), c = d ? d.length : 0, o = y === "vertical", S = ae(g, k.dir), U = typeof b == "number" ? b : b !== !1 ? ne : le;
+  a.useEffect(() => {
+    n(l);
+  }, [l]);
+  const v = a.useCallback(
     (t, s) => {
-      const e = s === i - 1, l = s === i, $ = s === i + 1;
-      i !== s && h && !p && (!m || e || l || $) && (A(
+      const e = s === l - 1, i = s === l, $ = s === l + 1;
+      l !== s && h && !m && (!p || e || i || $) && (P(
         h,
         t,
         I(),
         { value: s }
       ), n(s));
     },
-    [i, m, h, p, n]
-  ), j = o.useCallback(
+    [l, p, h, m, n]
+  ), j = a.useCallback(
     (t) => {
       let s = t.value, e = t.syntheticEvent;
       v(e, s);
     },
     [v]
-  ), q = o.useCallback(
+  ), q = a.useCallback(
     (t) => {
-      C && !p && A(
+      C && !m && P(
         C,
         t.syntheticEvent,
         I(),
         void 0
       );
     },
-    [C, p]
-  ), x = o.useCallback(
+    [C, m]
+  ), x = a.useCallback(
     (t) => {
       v(t, f);
     },
     [v, f]
-  ), J = o.useCallback(
+  ), J = a.useCallback(
     (t) => {
-      const s = S === "rtl", e = f, l = d.length - 1;
+      const s = S === "rtl", e = f, i = d.length - 1;
       switch (t.keyCode) {
         case u.left:
-          t.preventDefault(), !s && e > 0 && n(e - 1), s && e < l && n(e + 1);
+          t.preventDefault(), !s && e > 0 && n(e - 1), s && e < i && n(e + 1);
           break;
         case u.right:
-          t.preventDefault(), !s && e < l && n(e + 1), s && e > 0 && n(e - 1);
+          t.preventDefault(), !s && e < i && n(e + 1), s && e > 0 && n(e - 1);
           break;
         case u.up:
           t.preventDefault(), !s && e > 0 && n(e - 1), s && e > 0 && n(e - 1);
           break;
         case u.down:
-          t.preventDefault(), !s && e < l && n(e + 1), s && e < l && n(e + 1);
+          t.preventDefault(), !s && e < i && n(e + 1), s && e < i && n(e + 1);
           break;
         case u.home:
           t.preventDefault(), n(0);
           break;
         case u.end:
-          t.preventDefault(), n(l);
+          t.preventDefault(), n(i);
           break;
         case u.space:
           t.preventDefault();
@@ -115,70 +115,70 @@ const E = o.forwardRef((k, V) => {
       }
     },
     [d, n, f, S, x]
-  ), Q = o.useMemo(
-    () => F(
+  ), Q = a.useMemo(
+    () => A(
       "k-stepper",
       {
-        "k-stepper-linear": m
+        "k-stepper-linear": p
       },
       D
     ),
-    [m, D]
-  ), W = o.useMemo(
+    [p, D]
+  ), W = a.useMemo(
     () => ({
       display: "grid",
-      gridTemplateColumns: a ? void 0 : "repeat(" + c * 2 + ", 1fr)",
-      gridTemplateRows: a ? "repeat(" + c + ", 1fr)" : void 0,
+      gridTemplateColumns: o ? void 0 : "repeat(" + c * 2 + ", 1fr)",
+      gridTemplateRows: o ? "repeat(" + c + ", 1fr)" : void 0,
       ...R
     }),
-    [a, c, R]
-  ), X = o.useMemo(
-    () => F(
+    [o, c, R]
+  ), X = a.useMemo(
+    () => A(
       "k-step-list",
       {
-        "k-step-list-horizontal": !a,
-        "k-step-list-vertical": a
+        "k-step-list-horizontal": !o,
+        "k-step-list-vertical": o
       }
     ),
-    [a]
-  ), Y = o.useMemo(
+    [o]
+  ), Y = a.useMemo(
     () => ({
-      gridColumnStart: a ? void 0 : 1,
-      gridColumnEnd: a ? void 0 : -1,
-      gridRowStart: a ? 1 : void 0,
-      gridRowEnd: a ? -1 : void 0
+      gridColumnStart: o ? void 0 : 1,
+      gridColumnEnd: o ? void 0 : -1,
+      gridRowStart: o ? 1 : void 0,
+      gridRowEnd: o ? -1 : void 0
     }),
-    [a]
-  ), Z = o.useMemo(
+    [o]
+  ), Z = a.useMemo(
     () => ({
-      gridColumnStart: a ? void 0 : 2,
-      gridColumnEnd: a ? void 0 : c * 2,
-      gridRowStart: a ? 1 : void 0,
-      gridRowEnd: a ? c : void 0,
-      top: a ? 17 : void 0
+      gridColumnStart: o ? void 0 : 2,
+      gridColumnEnd: o ? void 0 : c * 2,
+      gridRowStart: o ? 1 : void 0,
+      gridRowEnd: o ? c : void 0,
+      top: o ? 17 : void 0
     }),
-    [a, c]
+    [o, c]
   ), T = d && d.map((t, s) => {
     const e = {
       index: s,
-      disabled: p || t.disabled,
+      disabled: m || t.disabled,
       focused: s === f,
-      current: s === i,
+      current: s === l,
       ...t
-    }, l = N || ae;
-    return /* @__PURE__ */ o.createElement(l, { key: s, ...e });
+    }, i = N || oe;
+    return /* @__PURE__ */ a.createElement(i, { key: s, ...e });
   });
-  return /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ a.createElement(
     ee.Provider,
     {
       value: {
         animationDuration: b,
-        isVertical: a,
+        isVertical: o,
         item: N,
-        linear: m,
+        linear: p,
         mode: K,
         numOfSteps: c,
-        value: i,
+        value: l,
         successIcon: _,
         successSVGIcon: B,
         errorIcon: z,
@@ -187,7 +187,7 @@ const E = o.forwardRef((k, V) => {
         onFocus: q
       }
     },
-    /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ a.createElement(
       "nav",
       {
         className: Q,
@@ -195,7 +195,7 @@ const E = o.forwardRef((k, V) => {
         dir: S,
         onKeyDown: J
       },
-      /* @__PURE__ */ o.createElement(
+      /* @__PURE__ */ a.createElement(
         "ol",
         {
           className: X,
@@ -203,10 +203,11 @@ const E = o.forwardRef((k, V) => {
         },
         T || L
       ),
-      /* @__PURE__ */ o.createElement(
+      /* @__PURE__ */ a.createElement(
         re,
         {
           style: Z,
+          labelPlacement: "start",
           animation: { duration: U },
           ariaLabel: H,
           "aria-hidden": !0,
@@ -214,8 +215,8 @@ const E = o.forwardRef((k, V) => {
           labelVisible: !1,
           orientation: y,
           reverse: y === "vertical",
-          value: i,
-          disabled: p,
+          value: l,
+          disabled: m,
           tabIndex: -1
         }
       )
@@ -229,7 +230,7 @@ E.propTypes = {
   dir: r.string,
   disabled: r.bool,
   errorIcon: r.string,
-  errorSVGIcon: M,
+  errorSVGIcon: F,
   item: r.any,
   items: r.any,
   linear: r.bool,
@@ -237,15 +238,15 @@ E.propTypes = {
   orientation: r.oneOf(["horizontal", "vertical"]),
   style: r.object,
   successIcon: r.string,
-  successSVGIcon: M,
+  successSVGIcon: F,
   value: r.number.isRequired,
   onChange: r.func,
   onFocus: r.func
 };
-const P = {
+const O = {
   value: 0
 };
-E.defaultProps = P;
+E.defaultProps = O;
 E.displayName = "KendoStepper";
 export {
   E as Stepper

package/timeline/TimelineCard.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),b=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),r=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),S=require("@progress/kendo-svg-icons");function R(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=R(N),v=e=>{const{title:l,subtitle:c,actions:o,images:d,description:E}=e.eventData,[s,C]=t.useState(e.eventData.opened||!1),[u,m]=t.useState(e.eventData.opened||!!e.collapsible),f=n=>{if(C(!s),e.onChange){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,a)}},g=n=>{if(e.onActionClick){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,a)}},k=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,E),d&&d.map((n,a)=>t.createElement(T.CardImage,{key:a,src:n.src})))),t.createElement(h.CardActions,null,o&&o.map((n,a)=>t.createElement("a",{key:a,href:n.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},n.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:r.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&u})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&u,className:"k-card-with-callout",onClick:n=>f(n)},t.createElement("span",{style:e.calloutStyle,className:r.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement("span",{className:"k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"},t.createElement(r.SvgIcon,{icon:S.chevronRightIcon}))),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>m(!1),onAfterExited:()=>m(!0)},s?k():null):k())))};v.propTypes={onChange:b.func,onActionClick:b.func};exports.TimelineCard=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),k=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),v=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:C}=e.eventData,[d,b]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=n=>{if(b(!d),e.onChange){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,a)}},g=n=>{if(e.onActionClick){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,a)}},m=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,C),o&&o.map((n,a)=>t.createElement(T.CardImage,{key:a,src:n.src})))),r&&t.createElement(h.CardActions,null,r.map((n,a)=>t.createElement("a",{key:a,href:n.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},n.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:v.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&s,className:"k-card-with-callout",onClick:n=>f(n)},t.createElement("span",{style:e.calloutStyle,className:v.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:k.func,onActionClick:k.func};exports.TimelineCard=E;

package/timeline/TimelineCard.mjs

@@ -8,19 +8,20 @@
 "use client";
 import * as t from "react";
 import s from "prop-types";
-import { Card as C } from "../card/Card.mjs";
-import { CardHeader as N } from "../card/CardHeader.mjs";
+import { Card as N } from "../card/Card.mjs";
+import { CardHeader as b } from "../card/CardHeader.mjs";
 import { CardTitle as A } from "../card/CardTitle.mjs";
 import { CardSubtitle as D } from "../card/CardSubtitle.mjs";
 import { CardBody as h } from "../card/CardBody.mjs";
 import { CardImage as I } from "../card/CardImage.mjs";
 import { CardActions as g } from "../card/CardActions.mjs";
-import { classNames as u, SvgIcon as y } from "@progress/kendo-react-common";
-import { Reveal as T } from "@progress/kendo-react-animation";
-import { chevronRightIcon as O } from "@progress/kendo-svg-icons";
+import { classNames as u } from "@progress/kendo-react-common";
+import { Reveal as y } from "@progress/kendo-react-animation";
+import { chevronRightIcon as T } from "@progress/kendo-svg-icons";
+import { Button as O } from "@progress/kendo-react-buttons";
 const x = (e) => {
-  const { title: k, subtitle: l, actions: i, images: o, description: E } = e.eventData, [c, v] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
-    if (v(!c), e.onChange) {
+  const { title: E, subtitle: l, actions: i, images: c, description: v } = e.eventData, [o, k] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
+    if (k(!o), e.onChange) {
       const n = {
         syntheticEvent: a,
         nativeEvent: a.nativeEvent,
@@ -28,7 +29,7 @@ const x = (e) => {
       };
       e.onChange.call(void 0, n);
     }
-  }, b = (a) => {
+  }, C = (a) => {
     if (e.onActionClick) {
       const n = {
         syntheticEvent: a,
@@ -37,13 +38,13 @@ const x = (e) => {
       };
       e.onActionClick.call(void 0, n);
     }
-  }, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, E), o && o.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), /* @__PURE__ */ t.createElement(g, null, i && i.map((a, n) => /* @__PURE__ */ t.createElement(
+  }, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, v), c && c.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), i && /* @__PURE__ */ t.createElement(g, null, i.map((a, n) => /* @__PURE__ */ t.createElement(
     "a",
     {
       key: n,
       href: a.url,
       className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
-      onClick: b
+      onClick: C
     },
     a.text
   ))));
@@ -57,7 +58,7 @@ const x = (e) => {
       )
     },
     /* @__PURE__ */ t.createElement(
-      C,
+      N,
       {
         "aria-live": "polite",
         "aria-describedby": e.id,
@@ -81,21 +82,15 @@ const x = (e) => {
           )
         }
       ),
-      /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, k), e.collapsible && /* @__PURE__ */ t.createElement(
-        "span",
-        {
-          className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"
-        },
-        /* @__PURE__ */ t.createElement(y, { icon: O })
-      )), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
-        T,
+      /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, E), e.collapsible && /* @__PURE__ */ t.createElement(O, { className: "k-event-collapse", fillMode: "flat", svgIcon: T })), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
+        y,
         {
           transitionEnterDuration: e.transitionDuration || 400,
           transitionExitDuration: e.transitionDuration || 400,
           onBeforeEnter: () => m(!1),
           onAfterExited: () => m(!0)
         },
-        c ? d() : null
+        o ? d() : null
       ) : d())
     )
   );