@progress/kendo-react-layout 8.1.0-develop.13 → 8.1.0-develop.15

package/stepper/Stepper.mjs

@@ -6,134 +6,152 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-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 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 * 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 ne, NO_ANIMATION as le } from "./contants.mjs";
-import { packageMetadata as ie } from "../package-metadata.mjs";
+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 M, messages as ue } from "./messages/index.mjs";
-const E = a.forwardRef((k, V) => {
-  te(ie);
+import { progBarAriaLabel as T, messages as ue } from "./messages/index.mjs";
+const F = n.forwardRef((x, M) => {
+  ee(ae);
   const {
-    animationDuration: b,
+    animationDuration: v,
     children: L,
-    className: D,
-    disabled: m,
-    errorIcon: z,
-    errorSVGIcon: G,
-    item: N,
-    items: d,
-    linear: p,
+    className: C,
+    disabled: f,
+    errorIcon: V,
+    errorSVGIcon: z,
+    item: S,
+    items: m,
+    linear: g,
     mode: K,
-    orientation: y,
-    style: R,
-    successIcon: _,
-    successSVGIcon: B,
-    onChange: h,
-    onFocus: C
-  } = k, H = ce().toLanguageString(M, ue[M]), g = a.useRef(null), w = a.useCallback(
+    orientation: I,
+    style: N,
+    successIcon: G,
+    successSVGIcon: H,
+    value: u = 0,
+    onChange: k,
+    onFocus: y
+  } = x, U = ce().toLanguageString(T, ue[T]), p = n.useRef(null), w = n.useCallback(
     () => {
-      g.current && se(g.current);
+      p.current && te(p.current);
     },
     []
-  ), I = a.useCallback(
+  ), E = n.useCallback(
     () => ({
-      element: g.current,
+      element: p.current,
       focus: w
     }),
     [w]
   );
-  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 === l - 1, i = s === l, $ = s === l + 1;
-      l !== s && h && !m && (!p || e || i || $) && (P(
-        h,
-        t,
-        I(),
-        { value: s }
-      ), n(s));
+  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.useEffect(() => {
+    a(u);
+  }, [u]);
+  const D = 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,
+        r,
+        E(),
+        { value: i }
+      ), a(i));
     },
-    [l, p, h, m, n]
-  ), j = a.useCallback(
-    (t) => {
-      let s = t.value, e = t.syntheticEvent;
-      v(e, s);
+    [u, g, k, f, a]
+  ), j = n.useCallback(
+    (r) => {
+      let i = r.value, e = r.syntheticEvent;
+      D(e, i);
     },
-    [v]
-  ), q = a.useCallback(
-    (t) => {
-      C && !m && P(
-        C,
-        t.syntheticEvent,
-        I(),
+    [D]
+  ), q = n.useCallback(
+    (r) => {
+      y && !f && O(
+        y,
+        r.syntheticEvent,
+        E(),
         void 0
       );
     },
-    [C, m]
-  ), x = a.useCallback(
-    (t) => {
-      v(t, f);
-    },
-    [v, f]
-  ), J = a.useCallback(
-    (t) => {
-      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 < i && n(e + 1);
-          break;
-        case u.right:
-          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 < 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(i);
-          break;
-        case u.space:
-          t.preventDefault();
-          break;
-        case u.enter:
-          t.preventDefault(), d[e].disabled || x(t);
-          break;
-      }
+    [y, f]
+  ), b = n.useMemo(
+    () => {
+      const r = h === "rtl", i = m.length - 1;
+      return new se({
+        root: p,
+        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), a(s - 1)) : !o && r && s < i && (t.focusNext(e), a(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));
+            },
+            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));
+            },
+            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));
+            },
+            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));
+            },
+            Home: (e, t, l) => {
+              l.preventDefault(), t.focusElement(t.first, e), a(0);
+            },
+            End: (e, t, l) => {
+              l.preventDefault(), t.focusElement(t.last, e), a(i);
+            },
+            Space: (e, t, l) => {
+              l.preventDefault(), e.children[0].click();
+            },
+            Enter: (e, t, l) => {
+              l.preventDefault(), e.children[0].click();
+            }
+          }
+        }
+      });
     },
-    [d, n, f, S, x]
-  ), Q = a.useMemo(
-    () => A(
+    [h, m.length, o, a]
+  );
+  n.useEffect(() => (b.initializeRovingTab(u), () => b.removeFocusListener()), []);
+  const J = n.useCallback(b.triggerKeyboardEvent.bind(b), []), Q = n.useMemo(
+    () => P(
       "k-stepper",
       {
-        "k-stepper-linear": p
+        "k-stepper-linear": g
       },
-      D
+      C
     ),
-    [p, D]
-  ), W = a.useMemo(
+    [g, C]
+  ), W = n.useMemo(
     () => ({
       display: "grid",
-      gridTemplateColumns: o ? void 0 : "repeat(" + c * 2 + ", 1fr)",
-      gridTemplateRows: o ? "repeat(" + c + ", 1fr)" : void 0,
-      ...R
+      gridTemplateColumns: o ? void 0 : "repeat(" + d * 2 + ", 1fr)",
+      gridTemplateRows: o ? "repeat(" + d + ", 1fr)" : void 0,
+      ...N
     }),
-    [o, c, R]
-  ), X = a.useMemo(
-    () => A(
+    [o, d, N]
+  ), X = n.useMemo(
+    () => P(
       "k-step-list",
       {
         "k-step-list-horizontal": !o,
@@ -141,7 +159,7 @@ const E = a.forwardRef((k, V) => {
       }
     ),
     [o]
-  ), Y = a.useMemo(
+  ), Y = n.useMemo(
     () => ({
       gridColumnStart: o ? void 0 : 1,
       gridColumnEnd: o ? void 0 : -1,
@@ -149,105 +167,103 @@ const E = a.forwardRef((k, V) => {
       gridRowEnd: o ? -1 : void 0
     }),
     [o]
-  ), Z = a.useMemo(
+  ), Z = n.useMemo(
     () => ({
       gridColumnStart: o ? void 0 : 2,
-      gridColumnEnd: o ? void 0 : c * 2,
+      gridColumnEnd: o ? void 0 : d * 2,
       gridRowStart: o ? 1 : void 0,
-      gridRowEnd: o ? c : void 0,
+      gridRowEnd: o ? d : void 0,
       top: o ? 17 : void 0
     }),
-    [o, c]
-  ), T = d && d.map((t, s) => {
+    [o, d]
+  ), R = m && m.map((r, i) => {
     const e = {
-      index: s,
-      disabled: m || t.disabled,
-      focused: s === f,
-      current: s === l,
-      ...t
-    }, i = N || oe;
-    return /* @__PURE__ */ a.createElement(i, { key: s, ...e });
+      index: i,
+      disabled: f || r.disabled,
+      focused: i === _,
+      current: i === u,
+      ...r
+    }, t = S || ne;
+    return /* @__PURE__ */ n.createElement(t, { key: i, ...e });
   });
-  return /* @__PURE__ */ a.createElement(
-    ee.Provider,
+  return /* @__PURE__ */ n.createElement(
+    $.Provider,
     {
       value: {
-        animationDuration: b,
+        animationDuration: v,
         isVertical: o,
-        item: N,
-        linear: p,
+        item: S,
+        linear: g,
         mode: K,
-        numOfSteps: c,
-        value: l,
-        successIcon: _,
-        successSVGIcon: B,
-        errorIcon: z,
-        errorSVGIcon: G,
+        numOfSteps: d,
+        value: u,
+        successIcon: G,
+        successSVGIcon: H,
+        errorIcon: V,
+        errorSVGIcon: z,
         onChange: j,
         onFocus: q
       }
     },
-    /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ n.createElement(
       "nav",
       {
         className: Q,
         style: W,
-        dir: S,
+        dir: h,
+        role: "navigation",
+        ref: p,
         onKeyDown: J
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ n.createElement(
         "ol",
         {
           className: X,
           style: Y
         },
-        T || L
+        R || L
       ),
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ n.createElement(
         re,
         {
           style: Z,
           labelPlacement: "start",
-          animation: { duration: U },
-          ariaLabel: H,
+          animation: { duration: B },
+          ariaLabel: U,
           "aria-hidden": !0,
-          max: c - 1,
+          max: d - 1,
           labelVisible: !1,
-          orientation: y,
-          reverse: y === "vertical",
-          value: l,
-          disabled: m,
+          orientation: I,
+          reverse: I === "vertical",
+          value: u,
+          disabled: f,
           tabIndex: -1
         }
       )
     )
   );
 });
-E.propTypes = {
-  animationDuration: r.oneOfType([r.bool, r.number]),
-  children: r.any,
-  className: r.string,
-  dir: r.string,
-  disabled: r.bool,
-  errorIcon: r.string,
-  errorSVGIcon: F,
-  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: F,
-  value: r.number.isRequired,
-  onChange: r.func,
-  onFocus: r.func
-};
-const O = {
-  value: 0
+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
 };
-E.defaultProps = O;
-E.displayName = "KendoStepper";
+F.displayName = "KendoStepper";
 export {
-  E as Stepper
+  F as Stepper
 };