@progress/kendo-react-layout 8.1.0-develop.9 → 8.1.1-develop.1

package/splitter/SplitterBar.mjs

@@ -6,14 +6,14 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
-import { Keys as n, classNames as m, Draggable as v, IconWrap as g } from "@progress/kendo-react-common";
-import { caretAltLeftIcon as c, caretAltRightIcon as h, caretAltDownIcon as b, caretAltUpIcon as d } from "@progress/kendo-svg-icons";
-class k extends a.Component {
-  constructor(o) {
-    super(o), this.draggable = null, this.onDrag = (t, e, l) => {
-      const { event: s } = t, { onDrag: i, index: r } = this.props, p = this.draggable && this.draggable.element;
-      p && !this.isStatic && this.isDraggable && i(s, p, r, e, l);
+import * as o from "react";
+import { Navigation as d, classNames as f, Draggable as u, IconWrap as g } from "@progress/kendo-react-common";
+import { caretAltLeftIcon as n, caretAltRightIcon as p, caretAltDownIcon as h, caretAltUpIcon as b } from "@progress/kendo-svg-icons";
+class v extends o.Component {
+  constructor(a) {
+    super(a), this.draggable = null, this.spliterBarRef = o.createRef(), this.onDrag = (s, e, l) => {
+      const { event: i } = s, { onDrag: r, index: t } = this.props, c = this.draggable && this.draggable.element;
+      c && !this.isStatic && this.isDraggable && r(i, c, t, e, l);
     }, this.onFocus = () => {
       this.setState({
         focused: !0
@@ -22,62 +22,88 @@ class k extends a.Component {
       this.setState({
         focused: !1
       });
-    }, this.onToggle = (t) => {
-      const { onToggle: e, index: l, prev: s, next: i } = this.props;
-      (s.collapsible || i.collapsible) && e(s.collapsible ? l : l + 1, t);
-    }, this.onPrevToggle = (t) => {
-      const { onToggle: e, index: l, prev: s } = this.props;
-      s.collapsible && e(l, t);
-    }, this.onNextToggle = (t) => {
-      const { onToggle: e, index: l, next: s } = this.props;
-      s.collapsible && e(l + 1, t);
-    }, this.onKeyDown = (t) => {
-      const e = t && t.keyCode, l = this.isHorizontal, { index: s } = this.props, i = this.draggable && this.draggable.element, r = (p, f, u) => {
-        t.preventDefault(), this.props.onKeyboardResize(p, f, u, t);
-      };
-      i && (e === n.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (l && e === n.left ? r(i, s, -10) : l && e === n.right ? r(i, s, 10) : !l && e === n.up ? r(i, s, -10) : !l && e === n.down && r(i, s, 10)));
+    }, this.onToggle = (s) => {
+      const { onToggle: e, index: l, prev: i, next: r } = this.props;
+      (i.collapsible || r.collapsible) && e(i.collapsible ? l : l + 1, s);
+    }, this.onPrevToggle = (s) => {
+      const { onToggle: e, index: l, prev: i } = this.props;
+      i.collapsible && e(l, s);
+    }, this.onNextToggle = (s) => {
+      const { onToggle: e, index: l, next: i } = this.props;
+      i.collapsible && e(l + 1, s);
+    }, this.onKeyDown = (s) => {
+      this.navigation.triggerKeyboardEvent(s);
     }, this.state = {
       focused: !1
     };
   }
   get isStatic() {
-    const { prev: o, next: t } = this.props, e = o.resizable && t.resizable, l = o.collapsible || t.collapsible;
+    const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, l = a.collapsible || s.collapsible;
     return !e && !l;
   }
   get isDraggable() {
-    const { prev: o, next: t } = this.props, e = o.resizable && t.resizable, l = o.collapsed || t.collapsed;
+    const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, l = a.collapsed || s.collapsed;
     return !!e && !l;
   }
   get isHorizontal() {
     return this.props.orientation === "horizontal";
   }
+  /** @hidden */
+  componentDidMount() {
+    const a = this.draggable && this.draggable.element, { index: s, onKeyboardResize: e } = this.props, l = this.isHorizontal;
+    a && (this.navigation = new d({
+      tabIndex: 0,
+      root: this.spliterBarRef,
+      selectors: [".k-splitter .k-splitbar"],
+      keyboardEvents: {
+        keydown: {
+          ArrowLeft: (i, r, t) => {
+            l && (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
+          },
+          ArrowRight: (i, r, t) => {
+            l && (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
+          },
+          ArrowDown: (i, r, t) => {
+            l || (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
+          },
+          ArrowUp: (i, r, t) => {
+            l || (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
+          },
+          Enter: (i, r, t) => {
+            t.preventDefault(), this.onToggle(t);
+          }
+        }
+      }
+    }));
+  }
   render() {
-    const o = this.isDraggable, t = this.isStatic, e = this.isHorizontal, l = m(
+    const a = this.isDraggable, s = this.isStatic, e = this.isHorizontal, l = f(
       "k-splitbar",
       {
         "k-focus": this.state.focused,
         "k-splitbar-horizontal": e,
         "k-splitbar-vertical": !e,
-        "k-splitbar-draggable-horizontal": e && o,
-        "k-splitbar-draggable-vertical": !e && o,
-        "k-splitbar-static-horizontal": e && t,
-        "k-splitbar-static-vertical": !e && t
+        "k-splitbar-draggable-horizontal": e && a,
+        "k-splitbar-draggable-vertical": !e && a,
+        "k-splitbar-static-horizontal": e && s,
+        "k-splitbar-static-vertical": !e && s
       }
     );
-    return /* @__PURE__ */ a.createElement(
-      v,
+    return /* @__PURE__ */ o.createElement(
+      u,
       {
-        onPress: (s) => this.onDrag(s, !0, !1),
-        onDrag: (s) => this.onDrag(s, !1, !1),
-        onRelease: (s) => this.onDrag(s, !1, !0),
-        ref: (s) => {
-          this.draggable = s;
+        onPress: (i) => this.onDrag(i, !0, !1),
+        onDrag: (i) => this.onDrag(i, !1, !1),
+        onRelease: (i) => this.onDrag(i, !1, !0),
+        ref: (i) => {
+          this.draggable = i;
         }
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ o.createElement(
         "div",
         {
-          tabIndex: t ? -1 : 0,
+          ref: this.spliterBarRef,
+          tabIndex: s ? -1 : 0,
           role: "separator",
           "aria-valuenow": 0,
           "aria-label": this.props.ariaLabel,
@@ -89,33 +115,33 @@ class k extends a.Component {
           onDoubleClick: this.onToggle,
           onKeyDown: this.onKeyDown
         },
-        this.props.prev.collapsible && /* @__PURE__ */ a.createElement(
+        this.props.prev.collapsible && /* @__PURE__ */ o.createElement(
           "div",
           {
             className: "k-collapse-prev",
             onClick: this.onPrevToggle
           },
-          /* @__PURE__ */ a.createElement(
+          /* @__PURE__ */ o.createElement(
             g,
             {
               name: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.prev.collapsed ? "caret-alt-down" : "caret-alt-up" : void 0,
-              icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? c : h : this.props.isRtl ? h : c : this.props.prev.collapsed ? b : d : void 0,
+              icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? n : p : this.props.isRtl ? p : n : this.props.prev.collapsed ? h : b : void 0,
               size: "xsmall"
             }
           )
         ),
-        /* @__PURE__ */ a.createElement("div", { className: "k-resize-handle" }),
-        this.props.next.collapsible && /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ o.createElement("div", { className: "k-resize-handle" }),
+        this.props.next.collapsible && /* @__PURE__ */ o.createElement(
           "div",
           {
             className: "k-collapse-next",
             onClick: this.onNextToggle
           },
-          /* @__PURE__ */ a.createElement(
+          /* @__PURE__ */ o.createElement(
             g,
             {
               name: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.next.collapsed ? "caret-alt-up" : "caret-alt-down" : void 0,
-              icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? h : c : this.props.isRtl ? c : h : this.props.next.collapsed ? d : b : void 0,
+              icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? p : n : this.props.isRtl ? n : p : this.props.next.collapsed ? b : h : void 0,
               size: "xsmall"
             }
           )
@@ -125,5 +151,5 @@ class k extends a.Component {
   }
 }
 export {
-  k as SplitterBar
+  v as SplitterBar
 };

package/stacklayout/StackLayout.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 j=require("react"),n=require("prop-types"),O=require("../package-metadata.js"),d=require("@progress/kendo-react-common");function z(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(s,c,l.get?l:{enumerable:!0,get:()=>t[c]})}}return s.default=t,Object.freeze(s)}const i=z(j),g=i.forwardRef((t,s)=>{d.validatePackage(O.packageMetadata);const c=i.useRef(null),l=i.useCallback(()=>({element:c.current}),[]);i.useImperativeHandle(s,l);const{className:m,style:f,id:y,children:k}=t,h=d.useId(),r=i.useMemo(()=>t.orientation||u.orientation,[t.orientation]),e=r==="horizontal",a=i.useMemo(()=>t.align&&t.align.horizontal?t.align.horizontal:u.hAlign,[t.align]),o=i.useMemo(()=>t.align&&t.align.vertical?t.align.vertical:u.vAlign,[t.align]),b=i.useMemo(()=>d.classNames("k-stack-layout",{"k-hstack":r==="horizontal","k-vstack":r==="vertical","k-justify-content-start":e&&a==="start"||!e&&o==="top","k-justify-content-center":e&&a==="center"||!e&&o==="middle","k-justify-content-end":e&&a==="end"||!e&&o==="bottom","k-justify-content-stretch":e&&a==="stretch"||!e&&o==="stretch","k-align-items-start":!e&&a==="start"||e&&o==="top","k-align-items-center":!e&&a==="center"||e&&o==="middle","k-align-items-end":!e&&a==="end"||e&&o==="bottom","k-align-items-stretch":!e&&a==="stretch"||e&&o==="stretch"},m),[r,e,a,o,m]),v={gap:`${typeof t.gap=="number"?t.gap+"px":t.gap}`,...f};return i.createElement("div",{ref:c,className:b,style:v,id:y||h},k)}),u={orientation:"horizontal",hAlign:"stretch",vAlign:"stretch"};g.propTypes={className:n.string,style:n.object,children:n.any,id:n.string,orientation:n.oneOf(["horizontal","vertical"]),gap:n.oneOfType([n.string,n.number]),align:n.shape({vertical:n.oneOf(["top","middle","bottom","stretch"]),horizontal:n.oneOf(["start","center","end","stretch"])})};g.defaultProps=u;g.displayName="KendoReactStackLayout";exports.StackLayout=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),n=require("prop-types"),O=require("../package-metadata.js"),u=require("@progress/kendo-react-common");function z(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(s,c,l.get?l:{enumerable:!0,get:()=>t[c]})}}return s.default=t,Object.freeze(s)}const i=z(j),d=i.forwardRef((t,s)=>{u.validatePackage(O.packageMetadata);const c=i.useRef(null),l=i.useCallback(()=>({element:c.current}),[]);i.useImperativeHandle(s,l);const{className:m,style:y,id:f,children:k}=t,h=u.useId(),r=i.useMemo(()=>t.orientation||g.orientation,[t.orientation]),e=r==="horizontal",a=i.useMemo(()=>t.align&&t.align.horizontal?t.align.horizontal:g.hAlign,[t.align]),o=i.useMemo(()=>t.align&&t.align.vertical?t.align.vertical:g.vAlign,[t.align]),b=i.useMemo(()=>u.classNames("k-stack-layout",{"k-hstack":r==="horizontal","k-vstack":r==="vertical","k-justify-content-start":e&&a==="start"||!e&&o==="top","k-justify-content-center":e&&a==="center"||!e&&o==="middle","k-justify-content-end":e&&a==="end"||!e&&o==="bottom","k-justify-content-stretch":e&&a==="stretch"||!e&&o==="stretch","k-align-items-start":!e&&a==="start"||e&&o==="top","k-align-items-center":!e&&a==="center"||e&&o==="middle","k-align-items-end":!e&&a==="end"||e&&o==="bottom","k-align-items-stretch":!e&&a==="stretch"||e&&o==="stretch"},m),[r,e,a,o,m]),v={gap:`${typeof t.gap=="number"?t.gap+"px":t.gap}`,...y};return i.createElement("div",{ref:c,className:b,style:v,id:f||h},k)}),g={orientation:"horizontal",hAlign:"stretch",vAlign:"stretch"};d.propTypes={className:n.string,style:n.object,children:n.any,id:n.string,orientation:n.oneOf(["horizontal","vertical"]),gap:n.oneOfType([n.string,n.number]),align:n.shape({vertical:n.oneOf(["top","middle","bottom","stretch"]),horizontal:n.oneOf(["start","center","end","stretch"])})};d.displayName="KendoReactStackLayout";exports.StackLayout=d;

package/stacklayout/StackLayout.mjs

@@ -10,16 +10,16 @@ import * as o from "react";
 import n from "prop-types";
 import { packageMetadata as z } from "../package-metadata.mjs";
 import { validatePackage as b, useId as A, classNames as j } from "@progress/kendo-react-common";
-const c = o.forwardRef((e, g) => {
+const m = o.forwardRef((e, g) => {
   b(z);
-  const r = o.useRef(null), d = o.useCallback(
+  const c = o.useRef(null), d = o.useCallback(
     () => ({
-      element: r.current
+      element: c.current
     }),
     []
   );
   o.useImperativeHandle(g, d);
-  const { className: m, style: u, id: h, children: k } = e, f = A(), s = o.useMemo(
+  const { className: r, style: u, id: h, children: k } = e, y = A(), s = o.useMemo(
     () => e.orientation || l.orientation,
     [e.orientation]
   ), t = s === "horizontal", a = o.useMemo(
@@ -28,7 +28,7 @@ const c = o.forwardRef((e, g) => {
   ), i = o.useMemo(
     () => e.align && e.align.vertical ? e.align.vertical : l.vAlign,
     [e.align]
-  ), y = o.useMemo(
+  ), f = o.useMemo(
     () => j(
       "k-stack-layout",
       {
@@ -43,9 +43,9 @@ const c = o.forwardRef((e, g) => {
         "k-align-items-end": !t && a === "end" || t && i === "bottom",
         "k-align-items-stretch": !t && a === "stretch" || t && i === "stretch"
       },
-      m
+      r
     ),
-    [s, t, a, i, m]
+    [s, t, a, i, r]
   ), v = {
     gap: `${typeof e.gap == "number" ? e.gap + "px" : e.gap}`,
     ...u
@@ -53,10 +53,10 @@ const c = o.forwardRef((e, g) => {
   return /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: r,
-      className: y,
+      ref: c,
+      className: f,
       style: v,
-      id: h || f
+      id: h || y
     },
     k
   );
@@ -65,7 +65,7 @@ const c = o.forwardRef((e, g) => {
   hAlign: "stretch",
   vAlign: "stretch"
 };
-c.propTypes = {
+m.propTypes = {
   className: n.string,
   style: n.object,
   children: n.any,
@@ -77,8 +77,7 @@ c.propTypes = {
     horizontal: n.oneOf(["start", "center", "end", "stretch"])
   })
 };
-c.defaultProps = l;
-c.displayName = "KendoReactStackLayout";
+m.displayName = "KendoReactStackLayout";
 export {
-  c as StackLayout
+  m as StackLayout
 };

package/stepper/Step.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 te=require("react"),n=require("prop-types"),ne=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ae=require("@progress/kendo-react-intl"),D=require("@progress/kendo-svg-icons"),L=require("./contants.js"),P=require("./messages/index.js");function se(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const m=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(p,l,m.get?m:{enumerable:!0,get:()=>s[l]})}}return p.default=s,Object.freeze(p)}const e=se(te),v=e.forwardRef((s,p)=>{const{children:l,className:m,current:I,disabled:o,focused:g,icon:b,svgIcon:M,index:a,isValid:t,label:i,optional:k,style:T,tabIndex:q,text:F,..._}=s,{animationDuration:N,isVertical:x,item:z,linear:V,mode:R,numOfSteps:r,value:u,onChange:E,onFocus:C,successIcon:w,errorIcon:H,successSVGIcon:W,errorSVGIcon:$}=e.useContext(ne.StepperContext),f=e.useRef(null),A=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),S=e.useCallback(()=>({element:f.current,focus:A}),[A]);e.useImperativeHandle(p,S);const h=!V||a===u-1||a===u||a===u+1,y=R==="labels"||!!b&&!!i,B=ae.useLocalization(),G=(d=>B.toLanguageString(d,P.messages[d]))(P.optionalText),U=typeof N=="number"?N:N!==!1?L.DEFAULT_ANIMATION_DURATION:L.NO_ANIMATION,K=e.useCallback(d=>{E&&!o&&c.dispatchEvent(E,d,S(),{value:a})},[E,u,o]),J=e.useCallback(d=>{C&&!o&&c.dispatchEvent(C,d,S(),void 0)},[C,o]),Q=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<u,"k-step-current":I,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t},{"k-disabled":o,"k-focus":g},m),[a,r,u,I,k,o,g,t,m]),X=e.useMemo(()=>({maxWidth:x?void 0:`calc(100% / ${r})`,maxHeight:x?`calc(100% / ${r})`:void 0,pointerEvents:h?void 0:"none",...T}),[x,r,T,h]),j=t?w:H,O=j?e.createElement("span",{className:"k-step-indicator-icon "+j,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?W||D.checkOutlineIcon:$||D.exclamationCircleIcon}),Y=e.createElement(e.Fragment,null,R!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:U+"ms"}},b||M?!y&&t!==void 0?O:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?O:e.createElement("span",{className:"k-step-indicator-text"},F||a+1)):null),Z=(i||y||k)&&e.createElement("span",{className:"k-step-label"},i&&e.createElement("span",{className:"k-step-text"},i),y&&t!==void 0&&O,k&&e.createElement("span",{className:"k-step-label-optional"},G)),ee=e.createElement(e.Fragment,null,Y,Z);return e.createElement("li",{ref:f,className:Q,style:X,..._},e.createElement("a",{className:"k-step-link",title:i||void 0,onClick:K,onFocus:J,tabIndex:q||(g?0:-1),"aria-current":I,"aria-disabled":o||!h||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?l:ee))});v.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const oe={tabIndex:0};v.defaultProps=oe;v.displayName="KendoStep";exports.Step=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),n=require("prop-types"),te=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ne=require("@progress/kendo-react-intl"),j=require("@progress/kendo-svg-icons"),D=require("./contants.js"),L=require("./messages/index.js");function ae(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const m=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(p,i,m.get?m:{enumerable:!0,get:()=>s[i]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),y=e.forwardRef((s,p)=>{const{children:i,className:m,current:v,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:l,optional:k,style:T,tabIndex:oe=se.tabIndex,text:q,..._}=s,{animationDuration:I,isVertical:g,item:z,linear:P,mode:F,numOfSteps:r,value:d,onChange:N,onFocus:x,successIcon:V,errorIcon:w,successSVGIcon:H,errorSVGIcon:W}=e.useContext(te.StepperContext),f=e.useRef(null),R=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),E=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,E);const C=!P||a===d-1||a===d||a===d+1,S=F==="labels"||!!b&&!!l,$=ne.useLocalization(),B=(u=>$.toLanguageString(u,L.messages[u]))(L.optionalText),G=typeof I=="number"?I:I!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(u=>{N&&!o&&c.dispatchEvent(N,u,E(),{value:a})},[N,d,o]),K=e.useCallback(u=>{x&&!o&&c.dispatchEvent(x,u,E(),void 0)},[x,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<d,"k-step-current":v,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,d,v,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:g?void 0:`calc(100% / ${r})`,maxHeight:g?`calc(100% / ${r})`:void 0,pointerEvents:C?void 0:"none",...T}),[g,r,T,C]),A=t?V:w,h=A?e.createElement("span",{className:"k-step-indicator-icon "+A,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?H||j.checkOutlineIcon:W||j.exclamationCircleIcon}),X=e.createElement(e.Fragment,null,F!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:G+"ms"}},b||M?!S&&t!==void 0?h:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?h:e.createElement("span",{className:"k-step-indicator-text"},q||a+1)):null),Y=(l||S||k)&&e.createElement("span",{className:"k-step-label"},l&&e.createElement("span",{className:"k-step-text"},l),S&&t!==void 0&&h,k&&e.createElement("span",{className:"k-step-label-optional"},B)),Z=e.createElement(e.Fragment,null,X,Y);return e.createElement("li",{ref:f,className:J,style:Q,..._},e.createElement("a",{className:"k-step-link",title:l||void 0,onClick:U,onFocus:K,"aria-current":v?"step":void 0,"aria-disabled":o||!C||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?i:Z))});y.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const se={tabIndex:0};y.displayName="KendoStep";exports.Step=y;

package/stepper/Step.mjs

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