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