@progress/kendo-react-layout 8.2.1-develop.5 → 8.3.0-develop.10

package/stepper/Stepper.mjs

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