@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
132 lines (131 loc) • 4.63 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 r from "react";
import i from "prop-types";
import { useDir as O, classNames as w, kendoThemeMaps as x, dispatchEvent as C } from "@progress/kendo-react-common";
import { useLocalization as B } from "@progress/kendo-react-intl";
import { breadcrumbAriaLabel as S, messages as R } from "./messages/index.mjs";
import { BreadcrumbListItem as z } from "./BreadcrumbListItem.mjs";
import { BreadcrumbDelimiter as K } from "./BreadcrumbDelimiter.mjs";
import { BreadcrumbLink as N } from "./BreadcrumbLink.mjs";
import { BreadcrumbOrderedList as H } from "./BreadcrumbOrderedList.mjs";
const v = r.forwardRef((e, E) => {
const c = r.useRef(null), n = r.useRef(null), f = r.useMemo(
() => e.breadcrumbOrderedList || H,
[e.breadcrumbOrderedList]
), g = r.useMemo(
() => e.breadcrumbListItem || z,
[e.breadcrumbListItem]
), D = r.useMemo(
() => e.breadcrumbDelimiter || K,
[e.breadcrumbDelimiter]
), F = r.useMemo(() => e.breadcrumbLink || N, [e.breadcrumbLink]), h = r.useCallback(() => {
n.current && n.current.focus();
}, [n]), T = r.useMemo(() => e.disabled || !1, [e.disabled]);
r.useImperativeHandle(c, () => ({
element: n.current,
focus: h,
props: e
})), r.useImperativeHandle(E, () => c.current);
const M = B(), u = O(n, e.dir), L = (t) => {
c.current && C(e.onItemSelect, t, t.target, { id: t.target.id });
}, y = (t) => {
c.current && C(e.onKeyDown, t, t.target, { id: t.target.id });
}, I = e.valueField || o.valueField, k = e.iconField || o.iconField, d = e.iconClassField || o.iconClassField, m = e.textField || o.textField, b = e.size;
return /* @__PURE__ */ r.createElement(
"nav",
{
"aria-label": e.ariaLabel || M.toLanguageString(S, R[S]),
id: e.id,
style: e.style,
ref: n,
dir: u,
className: w(
"k-breadcrumb k-breadcrumb-wrap",
{
"k-rtl": u === "rtl",
"k-disabled": T,
[`k-breadcrumb-${x.sizeMap[b] || b}`]: b
},
e.className
)
},
/* @__PURE__ */ r.createElement(f, { rootItem: !0 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
const s = t[I];
if (a === 0)
return /* @__PURE__ */ r.createElement(g, { key: s, isFirstItem: !0, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(
F,
{
isLast: l.length - 1 === a,
isFirst: !0,
id: String(s),
icon: t[k] || void 0,
iconClass: t[d] ? String(t[d]) : void 0,
text: t[m] ? String(t[m]) : void 0,
disabled: t.disabled || !1,
onItemSelect: L,
onKeyDown: y,
...e
}
));
}))),
/* @__PURE__ */ r.createElement(f, { rootItem: !1 }, /* @__PURE__ */ r.createElement(r.Fragment, null, e.data.map((t, a, l) => {
const s = t[I];
if (a !== 0)
return /* @__PURE__ */ r.createElement(g, { key: s, isFirstItem: !1, isLastItem: l.length - 1 === a }, /* @__PURE__ */ r.createElement(D, { dir: u }), /* @__PURE__ */ r.createElement(
F,
{
isLast: l.length - 1 === a,
isFirst: !1,
id: String(s),
icon: t[k] || void 0,
iconClass: t[d] ? String(t[d]) : void 0,
text: t[m] ? String(t[m]) : void 0,
disabled: t.disabled || !1,
onItemSelect: L,
onKeyDown: y,
...e
}
));
})))
);
}), P = {
id: i.string,
style: i.object,
className: i.string,
breadcrumbOrderedList: i.elementType,
breadcrumbListItem: i.elementType,
breadcrumbDelimiter: i.elementType,
breadcrumbLink: i.elementType,
data: i.arrayOf(
i.shape({
id: i.string,
text: i.string,
icon: i.any,
iconClass: i.string
})
),
dir: i.oneOf(["ltr", "rtl"]),
disabled: i.bool,
valueField: i.string,
textField: i.string,
iconField: i.string,
iconClassField: i.string,
onItemSelect: i.func,
ariaLabel: i.string
}, o = {
valueField: "id",
textField: "text",
iconField: "icon",
iconClassField: "iconClass"
};
v.displayName = "KendoReactBreadcrumb";
v.propTypes = P;
export {
v as Breadcrumb
};