@progress/kendo-react-layout 8.1.0-develop.2 → 8.1.0-develop.21

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 T, classNames as ee, IconWrap as L, toIconName as te } from "@progress/kendo-react-common";
+import { useLocalization as ae } from "@progress/kendo-react-intl";
+import { checkOutlineIcon 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 x = e.forwardRef((O, R) => {
   const {
     // content
-    children: z,
-    className: h,
+    children: V,
+    className: E,
     current: d,
-    disabled: n,
-    focused: u,
+    disabled: o,
+    focused: h,
     icon: r,
     svgIcon: C,
     index: s,
     isValid: t,
-    label: o,
+    label: n,
     optional: m,
     style: y,
-    tabIndex: S,
-    text: F,
-    ...D
-  } = R, {
-    animationDuration: k,
-    isVertical: b,
-    item: H,
-    linear: P,
-    mode: A,
+    tabIndex: me,
+    text: S,
+    ...z
+  } = O, {
+    animationDuration: u,
+    isVertical: k,
+    item: D,
+    linear: H,
+    mode: F,
     numOfSteps: c,
     value: l,
-    onChange: f,
-    onFocus: I,
-    successIcon: _,
-    errorIcon: w,
-    successSVGIcon: B,
-    errorSVGIcon: G
-  } = e.useContext(Z), p = e.useRef(null), M = e.useCallback(
+    onChange: b,
+    onFocus: f,
+    successIcon: P,
+    errorIcon: _,
+    successSVGIcon: w,
+    errorSVGIcon: B
+  } = e.useContext(Y), p = e.useRef(null), A = e.useCallback(
     () => {
-      p.current && ee(p.current);
+      p.current && Z(p.current);
     },
     []
   ), v = e.useCallback(
     () => ({
       element: p.current,
-      focus: M
+      focus: A
     }),
-    [M]
+    [A]
   );
-  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 = F === "labels" || !!r && !!n, G = ae(), U = ((i) => G.toLanguageString(i, le[i]))(ie), W = typeof u == "number" ? u : u !== !1 ? ne : ce, $ = e.useCallback(
     (i) => {
-      f && !n && L(
-        f,
+      b && !o && T(
+        b,
         i,
         v(),
         { value: s }
       );
     },
-    [f, l, n]
-  ), K = e.useCallback(
+    [b, l, o]
+  ), j = e.useCallback(
     (i) => {
-      I && !n && L(
-        I,
+      f && !o && T(
+        f,
         i,
         v(),
         void 0
       );
     },
-    [I, n]
-  ), q = e.useMemo(
-    () => te(
+    [f, o]
+  ), 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": o,
+        "k-focus": h
       },
-      {
-        "k-disabled": n,
-        "k-focus": u
-      },
-      h
+      E
     ),
-    [s, c, l, d, m, n, u, t, h]
-  ), J = e.useMemo(
+    [s, c, l, d, m, o, h, t, E]
+  ), q = e.useMemo(
     () => ({
-      maxWidth: b ? void 0 : `calc(100% / ${c})`,
-      maxHeight: b ? `calc(100% / ${c})` : void 0,
-      pointerEvents: N ? void 0 : "none",
+      maxWidth: k ? void 0 : `calc(100% / ${c})`,
+      maxHeight: k ? `calc(100% / ${c})` : void 0,
+      pointerEvents: I ? void 0 : "none",
       ...y
     }),
-    [b, c, y, N]
-  ), T = t ? _ : w, g = T ? /* @__PURE__ */ e.createElement(
+    [k, c, y, I]
+  ), M = t ? P : _, g = M ? /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: "k-step-indicator-icon " + T,
+      className: "k-step-indicator-icon " + M,
       "aria-hidden": "true"
     }
   ) : /* @__PURE__ */ e.createElement(
-    O,
+    L,
     {
       className: "k-step-indicator-icon",
       name: t ? "check-circle" : "exclamation-circle",
-      icon: t ? B || ne : G || oe
+      icon: t ? w || se : B || oe
     }
-  ), Q = /* @__PURE__ */ e.createElement(e.Fragment, null, A !== "labels" ? /* @__PURE__ */ e.createElement(
+  ), J = /* @__PURE__ */ e.createElement(e.Fragment, null, F !== "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 || C ? !N && t !== void 0 ? g : /* @__PURE__ */ e.createElement(L, { className: "k-step-indicator-icon", name: r && te(r), icon: C }) : t !== void 0 ? g : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, S || 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 && g, 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,
+        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
       },
-      H ? z : Y
+      D ? V : X
     )
   );
 });
-E.propTypes = {
+x.propTypes = {
   children: a.any,
   className: a.string,
   // content: PropTypes.any,
@@ -167,11 +164,11 @@ E.propTypes = {
   tabIndex: a.number,
   text: a.string
 };
-const me = {
+const re = {
   tabIndex: 0
 };
-E.defaultProps = me;
-E.displayName = "KendoStep";
+x.defaultProps = re;
+x.displayName = "KendoStep";
 export {
-  E as Step
+  x 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;