@progress/kendo-react-layout 9.0.0-develop.8 → 9.0.0

package/stepper/Stepper.mjs

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