@progress/kendo-react-layout/stepper/Step.mjs

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as e from "react";
import a from "prop-types";
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 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 L = e.forwardRef((O, R) => {
  const {
    // content
    children: V,
    className: g,
    current: d,
    disabled: o,
    focused: E,
    icon: r,
    svgIcon: h,
    index: s,
    isValid: t,
    label: n,
    optional: m,
    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: b,
    onFocus: f,
    successIcon: _,
    errorIcon: w,
    successSVGIcon: B,
    errorSVGIcon: G
  } = e.useContext(Y), p = e.useRef(null), F = e.useCallback(() => {
    p.current && Z(p.current);
  }, []), v = e.useCallback(
    () => ({
      element: p.current,
      focus: F
    }),
    [F]
  );
  e.useImperativeHandle(R, v);
  const I = !H || s === l - 1 || s === l || s === l + 1, N = S === "labels" || !!r && !!n, P = ae(), U = ((i) => P.toLanguageString(i, le[i]))(ie), W = typeof u == "number" ? u : u !== !1 ? ne : ce, $ = e.useCallback(
    (i) => {
      b && !o && M(b, i, v(), { value: s });
    },
    [b, l, o]
  ), j = e.useCallback(
    (i) => {
      f && !o && M(f, i, v(), void 0);
    },
    [f, o]
  ), K = e.useMemo(
    () => ee(
      "k-step",
      {
        "k-step-first": s === 0,
        "k-step-last": c && s === c - 1,
        "k-step-done": s < l,
        "k-step-current": d,
        "k-step-optional": m,
        "k-step-error": t !== void 0 && !t,
        "k-step-success": t,
        "k-disabled": o,
        "k-focus": E
      },
      g
    ),
    [s, c, l, d, m, o, E, t, g]
  ), q = e.useMemo(
    () => ({
      maxWidth: k ? void 0 : `calc(100% / ${c})`,
      maxHeight: k ? `calc(100% / ${c})` : void 0,
      pointerEvents: I ? void 0 : "none",
      ...C
    }),
    [k, c, C, I]
  ), A = t ? _ : w, x = A ? /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-icon " + A, "aria-hidden": "true" }) : /* @__PURE__ */ e.createElement(
    T,
    {
      className: "k-step-indicator-icon",
      name: t ? "check-circle" : "exclamation-circle",
      icon: t ? B || se : G || oe
    }
  ), J = /* @__PURE__ */ e.createElement(e.Fragment, null, S !== "labels" ? /* @__PURE__ */ e.createElement(
    "span",
    {
      className: "k-step-indicator",
      "aria-hidden": !0,
      style: { transitionDuration: W + "ms" }
    },
    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 = (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 && 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: K, style: q, ...z }, /* @__PURE__ */ e.createElement(
    "a",
    {
      className: "k-step-link",
      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
    },
    D ? V : X
  ));
});
L.propTypes = {
  children: a.any,
  className: a.string,
  // content: PropTypes.any,
  current: a.bool,
  disabled: a.bool,
  icon: a.string,
  index: a.number,
  isValid: a.bool,
  label: a.string,
  optional: a.bool,
  style: a.object,
  tabIndex: a.number,
  text: a.string
};
const re = {
  tabIndex: 0
};
L.displayName = "KendoStep";
export {
  L as Step
};