@progress/kendo-react-layout/breadcrumb/Breadcrumb.js

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),i=require("prop-types"),o=require("@progress/kendo-react-common"),h=require("./BreadcrumbListItem.js"),T=require("./BreadcrumbDelimiter.js"),M=require("./BreadcrumbLink.js"),R=require("./BreadcrumbOrderedList.js");function q(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(l,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return l.default=e,Object.freeze(l)}const r=q(B),F=r.forwardRef((e,l)=>{const n=r.useRef(null),a=r.useRef(null),y=r.useMemo(()=>e.breadcrumbOrderedList||R.BreadcrumbOrderedList,[e.breadcrumbOrderedList]),L=r.useMemo(()=>e.breadcrumbListItem||h.BreadcrumbListItem,[e.breadcrumbListItem]),O=r.useMemo(()=>e.breadcrumbDelimiter||T.BreadcrumbDelimiter,[e.breadcrumbDelimiter]),I=r.useMemo(()=>e.breadcrumbLink||M.BreadcrumbLink,[e.breadcrumbLink]),D=r.useCallback(()=>{a.current&&a.current.focus()},[a]),E=r.useMemo(()=>e.disabled||!1,[e.disabled]);r.useImperativeHandle(n,()=>({element:a.current,focus:D,props:e})),r.useImperativeHandle(l,()=>n.current);const g=o.useDir(a,e.dir),k=t=>{n.current&&o.dispatchEvent(e.onItemSelect,t,t.target,{id:t.target.id})},C=t=>{n.current&&o.dispatchEvent(e.onKeyDown,t,t.target,{id:t.target.id})},S=e.valueField||b.valueField,v=e.iconField||b.iconField,m=e.iconClassField||b.iconClassField,u=e.textField||b.textField,f=e.size||"medium";return r.createElement("nav",{"aria-label":e.ariaLabel,id:e.id,style:e.style,ref:a,dir:g,className:o.classNames("k-breadcrumb k-breadcrumb-wrap",{"k-rtl":g==="rtl","k-disabled":E,"k-breadcrumb-md":!e.size,[`k-breadcrumb-${o.kendoThemeMaps.sizeMap[f]||f}`]:f},e.className)},r.createElement(y,{rootItem:!0},r.createElement(r.Fragment,null,e.data.map((t,c,s)=>{const d=t[S];if(c===0)return r.createElement(L,{key:d,isFirstItem:!0,isLastItem:s.length-1===c},r.createElement(I,{isLast:s.length-1===c,isFirst:!0,id:String(d),icon:t[v]||void 0,iconClass:t[m]?String(t[m]):void 0,text:t[u]?String(t[u]):void 0,disabled:t.disabled||!1,onItemSelect:k,onKeyDown:C,...e}))}))),r.createElement(y,{rootItem:!1},r.createElement(r.Fragment,null,e.data.map((t,c,s)=>{const d=t[S];if(c!==0)return r.createElement(L,{key:d,isFirstItem:!1,isLastItem:s.length-1===c},r.createElement(O,{dir:g}),r.createElement(I,{isLast:s.length-1===c,isFirst:!1,id:String(d),icon:t[v]||void 0,iconClass:t[m]?String(t[m]):void 0,text:t[u]?String(t[u]):void 0,disabled:t.disabled||!1,onItemSelect:k,onKeyDown:C,...e}))}))))}),w={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},b={valueField:"id",textField:"text",iconField:"icon",iconClassField:"iconClass"};F.displayName="KendoReactBreadcrumb";F.propTypes=w;exports.Breadcrumb=F;