@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
229 lines (228 loc) • 6.61 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 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 o from "prop-types";
import { StepperContext as le } from "./context/StepperContext.mjs";
import { useWebMcpRegister as ae, focusFirstFocusableChild as ce, useDir as ue, dispatchEvent as A, Navigation as de, classNames as P, svgIconPropType as V } from "@progress/kendo-react-common";
import { Step as me } from "./Step.mjs";
import { ProgressBar as pe } from "@progress/kendo-react-progressbars";
import { DEFAULT_ANIMATION_DURATION as fe, NO_ANIMATION as ge } from "./contants.mjs";
import { useLocalization as be } from "@progress/kendo-react-intl";
import { progressBarAriaLabel as z, messages as H, ariaLabel as K } from "./messages/index.mjs";
const G = e.forwardRef((v, _) => {
const {
animationDuration: k,
children: B,
className: N,
disabled: m,
errorIcon: U,
errorSVGIcon: j,
item: R,
items: p,
linear: g,
mode: q,
orientation: y,
selectOnFocus: b,
style: x,
successIcon: W,
successSVGIcon: J,
value: a = 0,
onChange: I,
onFocus: C
} = v, D = be(), Q = D.toLanguageString(z, H[z]), X = D.toLanguageString(K, H[K]), f = e.useRef(null), w = e.useRef(null);
ae("stepper", w, v, v.webMcp);
const L = e.useCallback(() => {
f.current && ce(f.current);
}, []), E = e.useCallback(
() => ({
element: f.current,
focus: L
}),
[L]
);
e.useImperativeHandle(_, E), e.useImperativeHandle(w, E);
const [Y, u] = e.useState(a), d = p ? p.length : 0, n = y === "vertical", S = ue(f, v.dir), Z = typeof k == "number" ? k : k !== !1 ? fe : ge;
e.useEffect(() => {
u(a);
}, [a]);
const T = e.useCallback(
(l, r) => {
const t = r === a - 1, s = r === a, i = r === a + 1;
a !== r && I && !m && (!g || t || s || i) && (A(I, l, E(), {
value: r
}), u(r));
},
[a, g, I, m, u]
), $ = e.useCallback(
(l) => {
const r = l.value, t = l.syntheticEvent;
T(t, r);
},
[T]
), ee = e.useCallback(
(l) => {
C && !m && A(
C,
l.syntheticEvent,
E(),
void 0
);
},
[C, m]
), h = e.useMemo(() => {
const l = S === "rtl", r = p.length - 1;
return new de({
root: f,
selectors: ["ol.k-step-list li.k-step a.k-step-link"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Tab: (t, s, i) => {
const c = s.elements.indexOf(t), F = s.previous(t).children[0], O = s.next(t).children[0];
i.shiftKey ? !l && c > 0 ? (i.preventDefault(), s.focusPrevious(t), u(c - 1), b && F.click()) : l && c < r && (i.preventDefault(), s.focusNext(t), u(c + 1), b && O.click()) : !l && c < r ? (i.preventDefault(), s.focusNext(t), u(c + 1), b && O.click()) : l && c > 0 && (i.preventDefault(), s.focusPrevious(t), u(c - 1), b && F.click());
},
Home: (t, s, i) => {
i.preventDefault(), s.focusElement(s.first, t), u(0);
},
End: (t, s, i) => {
i.preventDefault(), s.focusElement(s.last, t), u(r);
},
Space: (t, s, i) => {
i.preventDefault(), t.children[0].click();
},
Enter: (t, s, i) => {
i.preventDefault(), t.children[0].click();
}
}
}
});
}, [S, p.length, u, b]);
e.useEffect(() => (h.initializeRovingTab(a), () => h.removeFocusListener()), []);
const te = e.useCallback(h.triggerKeyboardEvent.bind(h), []), se = e.useMemo(
() => P(
"k-stepper",
{
"k-stepper-linear": g
},
N
),
[g, N]
), ne = e.useMemo(
() => ({
display: "grid",
gridTemplateColumns: n ? void 0 : "repeat(" + d * 2 + ", 1fr)",
gridTemplateRows: n ? "repeat(" + d + ", 1fr)" : void 0,
...x
}),
[n, d, x]
), oe = e.useMemo(
() => P("k-step-list", {
"k-step-list-horizontal": !n,
"k-step-list-vertical": n
}),
[n]
), re = e.useMemo(
() => ({
gridColumnStart: n ? void 0 : 1,
gridColumnEnd: n ? void 0 : -1,
gridRowStart: n ? 1 : void 0,
gridRowEnd: n ? -1 : void 0
}),
[n]
), ie = e.useMemo(
() => ({
gridColumnStart: n ? void 0 : 2,
gridColumnEnd: n ? void 0 : d * 2,
gridRowStart: n ? 1 : void 0,
gridRowEnd: n ? d : void 0,
top: n ? 17 : void 0
}),
[n, d]
), M = p && p.map((l, r) => {
const t = {
index: r,
disabled: m || l.disabled,
focused: r === Y,
current: r === a,
...l
}, s = R || me;
return /* @__PURE__ */ e.createElement(s, { key: r, ...t });
});
return /* @__PURE__ */ e.createElement(
le.Provider,
{
value: {
animationDuration: k,
isVertical: n,
item: R,
linear: g,
mode: q,
numOfSteps: d,
value: a,
successIcon: W,
successSVGIcon: J,
errorIcon: U,
errorSVGIcon: j,
onChange: $,
onFocus: ee
}
},
/* @__PURE__ */ e.createElement(
"nav",
{
className: se,
style: ne,
dir: S,
ref: f,
onKeyDown: te,
"aria-label": X
},
/* @__PURE__ */ e.createElement("ol", { className: oe, style: re }, M || B),
/* @__PURE__ */ e.createElement(
pe,
{
style: ie,
labelPlacement: "start",
animation: { duration: Z },
ariaLabel: Q,
"aria-hidden": !0,
labelVisible: !1,
orientation: y,
reverse: y === "vertical",
value: d > 1 ? Math.round(a / (d - 1) * 100) : 0,
disabled: m,
tabIndex: -1
}
)
)
);
});
G.propTypes = {
animationDuration: o.oneOfType([o.bool, o.number]),
children: o.any,
className: o.string,
dir: o.string,
disabled: o.bool,
errorIcon: o.string,
errorSVGIcon: V,
item: o.any,
items: o.any,
linear: o.bool,
mode: o.oneOf(["steps", "labels"]),
orientation: o.oneOf(["horizontal", "vertical"]),
style: o.object,
successIcon: o.string,
successSVGIcon: V,
value: o.number.isRequired,
onChange: o.func,
onFocus: o.func
};
G.displayName = "KendoStepper";
export {
G as Stepper
};