@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
76 lines (75 loc) • 2.08 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 t from "prop-types";
import { classNames as y } from "@progress/kendo-react-common";
const v = e.forwardRef((C, I) => {
const {
id: d,
active: o,
disabled: r,
title: g = "Untitled",
index: a,
renderAllContent: u,
first: b,
last: p,
contentPanelId: n,
onSelect: i
} = C, s = e.useRef(null), f = e.useCallback(() => {
var l;
(l = s.current) == null || l.focus();
}, []), c = e.useCallback(() => {
var l;
(l = s.current) == null || l.blur();
}, []), N = e.useCallback(
() => ({
focus: f,
blur: c
}),
[f, c]
);
e.useImperativeHandle(I, N);
const k = e.useCallback(() => {
i == null || i(a), s.current && (s.current.tabIndex = 0, s.current.focus());
}, [i, a]), m = e.useMemo(
() => u ? `${n}-${a.toString()}` : n,
[u, n, a]
), T = e.useMemo(
() => y("k-tabstrip-item", {
"k-disabled": r,
"k-active": o,
"k-first": b,
"k-last": p
}),
[r, o, b, p]
), x = e.useMemo(
() => ({
id: `${d}-${a.toString()}`,
"aria-selected": o,
"aria-controls": o ? m : void 0,
"aria-disabled": r,
role: "tab",
onClick: r ? void 0 : k
}),
[d, a, o, m, r, k]
);
return /* @__PURE__ */ e.createElement("li", { ...x, className: T, ref: s, onBlur: c, "aria-controls": m }, /* @__PURE__ */ e.createElement("span", { className: "k-link" }, g));
});
v.propTypes = {
active: t.bool,
disabled: t.bool,
index: t.number,
onSelect: t.func,
title: t.oneOfType([t.string, t.element]),
first: t.bool,
last: t.bool
};
v.displayName = "TabStripNavigationItem";
export {
v as TabStripNavigationItem
};