@progress/kendo-react-layout 13.3.0 → 13.4.0-develop.1

package/bottomnavigation/BottomNavigationProps.d.ts

@@ -0,0 +1,238 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BottomNavigationItemProps } from './BottomNavigationItemProps.js';
+import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events.js';
+/**
+ * Represents the props of the [KendoReact BottomNavigation component](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation).
+ */
+export interface BottomNavigationProps {
+    /**
+     * Sets additional CSS classes to the BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation style={{ backgroundColor: 'blue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root BottomNavigation element.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation id="bottomNav1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Represents the `dir` HTML attribute. Use this to switch from LTR to RTL.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Specifies the BottomNavigation theme color
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)).
+     *
+     * The possible values are:
+     * * `primary` &mdash; Applies coloring based on the primary theme color.
+     * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+     * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+     * * `info` &mdash; Applies coloring based on the info theme color.
+     * * `success` &mdash; Applies coloring based on the success theme color.
+     * * `warning` &mdash; Applies coloring based on the warning theme color.
+     * * `error` &mdash; Applies coloring based on the error theme color.
+     * * `dark` &mdash; Applies coloring based on the dark theme color.
+     * * `light` &mdash; Applies coloring based on the light theme color.
+     * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation themeColor="primary" />
+     * ```
+     */
+    themeColor?: BottomNavigationThemeColor;
+    /**
+     * The BottomNavigation fill style
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)).
+     *
+     * The possible values are:
+     * * `flat` &mdash; Sets the theme color as the text color. The background will be white.
+     * * `solid` &mdash; Sets the theme color as a background color.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation fillMode="solid" />
+     * ```
+     */
+    fillMode?: BottomNavigationFill;
+    /**
+     * Specifies the BottomNavigation position and behavior when the page is scrolled
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)).
+     *
+     * The possible values are:
+     * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+     * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
+     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+     *
+     * @default fixed
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation positionMode="sticky" />
+     * ```
+     */
+    positionMode?: BottomNavigationPositionMode;
+    /**
+     * Specifies how the icon and text label are positioned in each BottomNavigation item
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)).
+     *
+     * The possible values are:
+     * * `vertical`(Default) &mdash; Renders the text below the icon.
+     * * `horizontal` &mdash; Renders the text and the icon on the same line.
+     *
+     * @default vertical
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation itemFlow="horizontal" />
+     * ```
+     */
+    itemFlow?: BottomNavigationItemFlow;
+    /**
+     * Sets a border to the BottomNavigation.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation border={true} />
+     * ```
+     */
+    border?: boolean;
+    /**
+     * Disables the whole BottomNavigation.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * The collection of items that will be rendered in the BottomNavigation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation)).
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }];
+     * <BottomNavigation items={items} />
+     * ```
+     */
+    items?: Array<BottomNavigationItemProps>;
+    /**
+     * Overrides the default component's content responsible for visualizing a single item
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-custom-rendering)).
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     * <BottomNavigation item={CustomItem} />
+     * ```
+     */
+    item?: React.ComponentType<BottomNavigationItemProps>;
+    /**
+     * Fires when a BottomNavigation item is about to be rendered
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-item-render-property)).
+     * Used to override the default appearance of the items.
+     */
+    itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode;
+    /**
+     * Fires when a BottomNavigation item is selected.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation onSelect={(e) => console.log(e.item)} />
+     * ```
+     */
+    onSelect?: (event: BottomNavigationSelectEvent) => void;
+    /**
+     * Triggered on `onKeyDown` event.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />
+     * ```
+     */
+    onKeyDown?: (event: BottomNavigationEvent) => void;
+}
+/**
+ * The BottomNavigation fill style
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)).
+ *
+ * The possible values are:
+ * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
+ * * `solid` &mdash; Sets the theme color as a background color.
+ *
+ */
+export type BottomNavigationFill = 'solid' | 'flat';
+/**
+ * Specifies how the icon and text label are positioned in each BottomNavigation item
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)).
+ *
+ * The possible values are:
+ * * `vertical`(Default) &mdash; Renders the text below the icon.
+ * * `horizontal` &mdash; Renders the text and the icon on the same line.
+ */
+export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
+/**
+ * Specifies the BottomNavigation theme color.
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)).
+ *
+ * The possible values are:
+ * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
+ * * `secondary` &mdash; Applies coloring based on the secondary theme color.
+ * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
+ * * `info` &mdash; Applies coloring based on the info theme color.
+ * * `success` &mdash; Applies coloring based on the success theme color.
+ * * `warning` &mdash; Applies coloring based on the warning theme color.
+ * * `error` &mdash; Applies coloring based on the error theme color.
+ * * `dark` &mdash; Applies coloring based on the dark theme color.
+ * * `light` &mdash; Applies coloring based on the light theme color.
+ * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+ */
+export type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+/**
+ * Specifies the BottomNavigation position and behavior when the page is scrolled
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)).
+ *
+ * The possible values are:
+ * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
+ * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
+ * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
+ * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+ */
+export type BottomNavigationPositionMode = 'sticky' | 'fixed';

package/bottomnavigation/models/events.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BottomNavigationHandle } from '../BottomNavigation.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onSelect` BottomNavigation event.
+ */
+export interface BottomNavigationSelectEvent extends BaseEvent<BottomNavigationHandle> {
+    /**
+     * A BottomNavigation item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected BottomNavigation item.
+     */
+    itemIndex: number;
+}
+/**
+ * Represents the return type of the BottomNavigation events.
+ */
+export interface BottomNavigationEvent extends BaseEvent<BottomNavigationHandle> {
+}

package/bottomnavigation/models/utils.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const THEME_COLOR_CLASSES: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    dark: string;
+    light: string;
+    inverse: string;
+};
+/**
+ * @hidden
+ */
+export declare const FILL_CLASSES: {
+    flat: string;
+    solid: string;
+};
+/**
+ * @hidden
+ */
+export declare const ITEM_FLOW_CLASSES: {
+    vertical: string;
+    horizontal: string;
+};
+/**
+ * @hidden
+ */
+export declare const POSITION_MODE_CLASSES: {
+    fixed: string;
+    sticky: string;
+};

package/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,276 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { BreadcrumbListItemProps } from './BreadcrumbListItem.js';
+import { BreadcrumbDelimiterProps } from './BreadcrumbDelimiter.js';
+import { BreadcrumbLinkHandle, BreadcrumbLinkProps } from './BreadcrumbLink.js';
+import { BreadcrumbOrderedListProps } from './BreadcrumbOrderedList.js';
+import * as React from 'react';
+/**
+ * Represents the props of [Breadcrumb](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumb) component.
+ */
+export interface BreadcrumbProps {
+    /**
+     * Sets the `id` property of the top `div` element of the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb id="breadcrumb1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb style={{ backgroundColor: 'lightgray' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb className="custom-breadcrumb" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Represents the Breadcrumb ordered list component.
+     *
+     * @example
+     * ```jsx
+     * const CustomOrderedList = (props) => <ol {...props} />;
+     * <Breadcrumb breadcrumbOrderedList={CustomOrderedList} />
+     * ```
+     */
+    breadcrumbOrderedList?: React.ComponentType<BreadcrumbOrderedListProps>;
+    /**
+     * Represents the Breadcrumb list item component.
+     *
+     * @example
+     * ```jsx
+     * const CustomListItem = (props) => <li {...props}>{props.children}</li>;
+     * <Breadcrumb breadcrumbListItem={CustomListItem} />
+     * ```
+     */
+    breadcrumbListItem?: React.ComponentType<BreadcrumbListItemProps>;
+    /**
+     * Represents the Breadcrumb delimiter component.
+     *
+     * @example
+     * ```jsx
+     * const CustomDelimiter = () => <span>/</span>;
+     * <Breadcrumb breadcrumbDelimiter={CustomDelimiter} />
+     * ```
+     */
+    breadcrumbDelimiter?: React.ComponentType<BreadcrumbDelimiterProps>;
+    /**
+     * Represents the Breadcrumb link component.
+     *
+     * @example
+     * ```jsx
+     * const CustomLink = (props) => <a {...props} />;
+     * <Breadcrumb breadcrumbLink={CustomLink} />
+     * ```
+     */
+    breadcrumbLink?: React.ComponentType<BreadcrumbLinkProps>;
+    /**
+     * Represents the data of the Breadcrumb from type DataModel.
+     *
+     * @example
+     * ```jsx
+     * const data = [{ id: '1', text: 'Home' }, { id: '2', text: 'Products' }];
+     * <Breadcrumb data={data} />
+     * ```
+     */
+    data: DataModel[];
+    /**
+     * Specifies the Breadcrumb padding for all elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The Breadcrumb direction `ltr` or `rtl`.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb dir="rtl" />
+     * ```
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Sets the `tabIndex` attribute to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
+     *
+     * @default id
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb valueField="customId" />
+     * ```
+     */
+    valueField?: string;
+    /**
+     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
+     *
+     * @default text
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb textField="customText" />
+     * ```
+     */
+    textField?: string;
+    /**
+     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
+     *
+     * @default icon
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb iconField="customIcon" />
+     * ```
+     */
+    iconField?: string;
+    /**
+     * Represents the `iconClass` field. Used for setting the `iconClass` inside the BreadcrumbLink component.
+     *
+     * @default iconClass
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb iconClassField="customIconClass" />
+     * ```
+     */
+    iconClassField?: string;
+    /**
+     * Represents the `onItemSelect` event. Triggered after click on the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb onItemSelect={(e) => console.log(e.id)} />
+     * ```
+     */
+    onItemSelect?: (event: BreadcrumbLinkMouseEvent) => void;
+    /**
+     * Represents the `onKeyDown` event. Triggered after keyboard click on the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb onKeyDown={(e) => console.log(e.id)} />
+     * ```
+     */
+    onKeyDown?: (event: BreadcrumbLinkKeyDownEvent) => void;
+    /**
+     * Represents the label of the Breadcrumb component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb ariaLabel="Breadcrumb navigation" />
+     * ```
+     */
+    ariaLabel?: string;
+}
+/**
+ * Represents the DataModel object type.
+ */
+export interface DataModel {
+    /**
+     * Represents the `id` of the data object.
+     * Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
+     */
+    id?: string;
+    /**
+     * Represents the `text` used inside the BreadcrumbLink component.
+     */
+    text?: string;
+    /**
+     * Represents the `icon` used inside the BreadcrumbLink component.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Represents the `iconClass` used inside the BreadcrumbLink component.
+     */
+    iconClass?: string;
+    /**
+     * @hidden
+     */
+    disabled?: boolean;
+}
+/**
+ * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
+ */
+export interface BreadcrumbHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Breadcrumb.
+     */
+    props: BreadcrumbProps;
+    /**
+     * The `focus` method of the Breadcrumb component.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the `BreadcrumbLinkMouseEvent`.
+ */
+export interface BreadcrumbLinkMouseEvent extends BaseEvent<BreadcrumbLinkHandle> {
+    /**
+     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
+     */
+    id?: string;
+}
+/**
+ * Represents the `BreadcrumbLinkKeyDownEvent`.
+ */
+export interface BreadcrumbLinkKeyDownEvent extends BaseEvent<BreadcrumbLinkHandle> {
+    /**
+     * Represents the `id` of the `BreadcrumbLinkKeyDownEvent`.
+     */
+    id?: string;
+}
+/**
+ * Represents the Breadcrumb component.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<BreadcrumbHandle | null>>;

package/breadcrumb/Breadcrumb.js

@@ -5,4 +5,4 @@
  * 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;
+"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,u=e.iconClassField||b.iconClassField,m=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-${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[u]?String(t[u]):void 0,text:t[m]?String(t[m]):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[u]?String(t[u]):void 0,text:t[m]?String(t[m]):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;

package/breadcrumb/Breadcrumb.mjs

@@ -48,7 +48,6 @@ const v = r.forwardRef((e, E) => {
         {
           "k-rtl": u === "rtl",
           "k-disabled": h,
-          "k-breadcrumb-md": !e.size,
           [`k-breadcrumb-${O.sizeMap[b] || b}`]: b
         },
         e.className

package/breadcrumb/BreadcrumbDelimiter.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @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 React from 'react';
+/**
+ * Represents the props of [BreadcrumbDelimiter](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumbdelimiter) component.
+ */
+export interface BreadcrumbDelimiterProps {
+    /**
+     * Sets the `id` property of the BreadcrumbDelimiter component.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the BreadcrumbDelimiter component.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbDelimiter component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
+     */
+    tabIndex?: number;
+    /**
+     * @hidden
+     */
+    dir?: string;
+}
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
+ */
+export interface BreadcrumbDelimiterHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * The props values of the BreadcrumbDelimiter.
+     */
+    props: BreadcrumbDelimiterProps;
+}
+/**
+ * Represents the BreadcrumbDelimiter component.
+ */
+export declare const BreadcrumbDelimiter: React.ForwardRefExoticComponent<BreadcrumbDelimiterProps & React.RefAttributes<BreadcrumbDelimiterHandle | null>>;