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

package/appbar/interfaces/AppBarProps.d.ts

@@ -0,0 +1,143 @@
+/**
+ * @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 the [KendoReact AppBar component](https://www.telerik.com/kendo-react-ui/components/layout/appbar).
+ * Used to display information, actions, branding titles and additional navigation on the current screen.
+ */
+export interface AppBarProps {
+    /**
+     * Represents the child elements that are passed to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar>
+     *   <div>Custom Content</div>
+     * </AppBar>
+     * ```
+     */
+    children?: any;
+    /**
+     * Sets additional CSS classes to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar style={{ backgroundColor: 'blue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root AppBar element.
+     *
+     * @example
+     * ```jsx
+     * <AppBar id="appbar1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Specifies the AppBar position ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position)).
+     *
+     * * The possible values are:
+     * * 'top' (Default)
+     * * 'bottom'
+     *
+     * @default top
+     *
+     * @example
+     * ```jsx
+     * <AppBar position="bottom" />
+     * ```
+     */
+    position?: AppBarPosition;
+    /**
+     * Specifies the AppBar position mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position-mode)).
+     *
+     * * The possible values are:
+     * * 'static' (Default)
+     * * 'sticky'
+     * * 'fixed'
+     *
+     * @default static
+     *
+     * @example
+     * ```jsx
+     * <AppBar positionMode="sticky" />
+     * ```
+     */
+    positionMode?: AppBarPositionMode;
+    /**
+     * Specifies the AppBar theme color ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/appearance)).
+     *
+     * * The possible values are:
+     * * 'light'
+     * * 'primary'
+     * * 'secondary'
+     * * 'tertiary'
+     * * 'info'
+     * * 'success'
+     * * 'warning'
+     * * 'error'
+     * * 'dark'
+     * * 'inherit'
+     * * 'inverse'
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <AppBar themeColor="primary" />
+     * ```
+     */
+    themeColor?: AppBarThemeColor;
+}
+/**
+ * Specifies the AppBar position ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position)).
+ *
+ * * The possible values are:
+ * * 'top' (Default)
+ * * 'bottom'
+ *
+ */
+export type AppBarPosition = 'top' | 'bottom';
+/**
+ * Specifies the AppBar position mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position-mode)).
+ *
+ * * The possible values are:
+ * * 'static' (Default)
+ * * 'sticky'
+ * * 'fixed'
+ */
+export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
+/**
+ * Specifies the AppBar theme color ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/appearance)).
+ *
+ * * The possible values are:
+ * * `light` (Default)
+ * * 'primary'
+ * * 'secondary'
+ * * 'tertiary'
+ * * 'info'
+ * * 'success'
+ * * 'warning'
+ * * 'error'
+ * * 'dark'
+ * * 'inherit'
+ * * 'inverse'
+ *
+ */
+export type AppBarThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inherit' | 'inverse';

package/appbar/interfaces/AppBarSectionProps.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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 the [KendoReact AppBarSection component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-sections).
+ */
+export interface AppBarSectionProps {
+    /**
+     * Represents the child elements that are passed to the AppBarSection.
+     */
+    children?: any;
+    /**
+     * Sets additional CSS classes to the AppBarSection.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBarSection.
+     */
+    style?: React.CSSProperties;
+}

package/appbar/interfaces/AppBarSpacerProps.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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 the [KendoReact AppBarSpacer component](https://www.telerik.com/kendo-react-ui/components/layout/appbar/content-arrangement#toc-spacings).
+ * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
+ */
+export interface AppBarSpacerProps {
+    /**
+     * Sets additional CSS classes to the AppBarSpacer.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the AppBarSpacer.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the child nodes.
+     */
+    children?: React.ReactNode;
+}

package/bottomnavigation/BottomNavigation.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BottomNavigationProps } from './BottomNavigationProps.js';
+import * as React from 'react';
+/**
+ * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
+ * callback of the BottomNavigation component.
+ */
+export interface BottomNavigationHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLElement | null;
+    /**
+     * Focus the BottomNavigation first item.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact BottomNavigation component](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation).
+ * Used to switch between primary destinations in an application.
+ *
+ * @example
+ * ```jsx
+ * const items = [
+ *    { text: 'Photos', icon: 'photo', selected: true },
+ *    { text: 'Albums', icon: 'folder' },
+ *    { text: 'Search', icon: 'search' },
+ *    { text: 'More', icon: 'more-horizontal' },
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <BottomNavigation items={items} />
+ *   );
+ * };
+ * ```
+ */
+export declare const BottomNavigation: React.ForwardRefExoticComponent<BottomNavigationProps & React.RefAttributes<BottomNavigationHandle | null>>;

package/bottomnavigation/BottomNavigation.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 _=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),N=require("./models/utils.js"),j=require("./BottomNavigationItem.js");function B(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const o=B(_),g=o.forwardRef((e,i)=>{const n=o.useRef(null),c=o.useCallback(()=>{n.current&&l.focusFirstFocusableChild(n.current)},[]),f=o.useCallback(()=>({element:n.current,focus:c}),[c]);o.useImperativeHandle(i,f);const{positionMode:C=u.positionMode,itemFlow:M=u.itemFlow,border:k=u.border,className:S,items:s,item:w,itemRender:I,disabled:b,style:E,id:h,onSelect:v,onKeyDown:p}=e,O=l.useId(),D=l.useDir(n,e.dir),d=o.useMemo(()=>e.fillMode===null?null:e.fillMode||u.fillMode,[e.fillMode]),y=o.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),R=o.useMemo(()=>l.classNames("k-bottom-nav",N.POSITION_MODE_CLASSES[C],N.ITEM_FLOW_CLASSES[M],{[`k-bottom-nav-${d}`]:d,[`k-bottom-nav-${d}-${y}`]:!!(d&&y),"k-bottom-nav-border":k,"k-disabled":b},S),[C,y,d,M,k,b,S]),m=o.useCallback((t,r)=>{s&&!s[r].disabled&&v&&l.dispatchEvent(v,t,f(),{itemTarget:s[r],itemIndex:r})},[s,v]),F=o.useCallback((t,r)=>{m(t,r)},[m]),T=o.useCallback((t,r)=>{switch(t.keyCode){case l.Keys.enter:case l.Keys.space:m(t,r),t.preventDefault();break}l.dispatchEvent(p,t,f(),void 0)},[m,p]);return o.createElement("nav",{ref:n,className:R,style:E,id:h||O,dir:D},s&&s.map((t,r)=>o.createElement(j.BottomNavigationItem,{...t,key:r,index:r,id:`${h||O}-${r}`,disabled:b||t.disabled,selected:t.selected,dataItem:t,item:w,render:I,onSelect:F,onKeyDown:T})))}),u={themeColor:"primary",fillMode:"flat",itemFlow:"vertical",positionMode:"fixed",border:!0};g.propTypes={className:a.string,style:a.object,id:a.string,dir:a.string,themeColor:a.oneOf(["primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),fillMode:a.oneOf(["solid","flat"]),itemFlow:a.oneOf(["vertical","horizontal"]),border:a.bool,disabled:a.bool,selected:a.number,onSelect:a.func};g.displayName="KendoReactBottomNavigation";exports.BottomNavigation=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),r=require("prop-types"),l=require("@progress/kendo-react-common"),N=require("./models/utils.js"),j=require("./BottomNavigationItem.js");function B(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(s,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return s.default=e,Object.freeze(s)}const o=B(_),g=o.forwardRef((e,s)=>{const a=o.useRef(null),c=o.useCallback(()=>{a.current&&l.focusFirstFocusableChild(a.current)},[]),f=o.useCallback(()=>({element:a.current,focus:c}),[c]);o.useImperativeHandle(s,f);const{positionMode:C=u.positionMode,itemFlow:M=u.itemFlow,border:k=u.border,className:S,items:i,item:w,itemRender:I,disabled:b,style:E,id:h,onSelect:v,onKeyDown:p}=e,O=l.useId(),D=l.useDir(a,e.dir),d=o.useMemo(()=>e.fillMode===null?null:e.fillMode||u.fillMode,[e.fillMode]),y=o.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),R=o.useMemo(()=>l.classNames("k-bottom-nav",N.POSITION_MODE_CLASSES[C],N.ITEM_FLOW_CLASSES[M],{[`k-bottom-nav-${d}`]:d,[`k-bottom-nav-${d}-${y}`]:!!(d&&y),"k-bottom-nav-border":k,"k-disabled":b},S),[C,y,d,M,k,b,S]),m=o.useCallback((t,n)=>{i&&!i[n].disabled&&v&&l.dispatchEvent(v,t,f(),{itemTarget:i[n],itemIndex:n})},[i,v]),F=o.useCallback((t,n)=>{m(t,n)},[m]),T=o.useCallback((t,n)=>{switch(t.keyCode){case l.Keys.enter:case l.Keys.space:m(t,n),t.preventDefault();break}l.dispatchEvent(p,t,f(),void 0)},[m,p]);return o.createElement("nav",{ref:a,className:R,style:E,id:h||O,dir:D},i&&i.map((t,n)=>o.createElement(j.BottomNavigationItem,{...t,key:n,index:n,id:`${h||O}-${n}`,disabled:b||t.disabled,selected:t.selected,dataItem:t,item:w,render:I,onSelect:F,onKeyDown:T})))}),u={themeColor:void 0,fillMode:void 0,itemFlow:"vertical",positionMode:"fixed",border:!0};g.propTypes={className:r.string,style:r.object,id:r.string,dir:r.string,themeColor:r.oneOf(["primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),fillMode:r.oneOf(["solid","flat"]),itemFlow:r.oneOf(["vertical","horizontal"]),border:r.bool,disabled:r.bool,selected:r.number,onSelect:r.func};g.displayName="KendoReactBottomNavigation";exports.BottomNavigation=g;

package/bottomnavigation/BottomNavigation.mjs

@@ -24,16 +24,16 @@ const w = o.forwardRef((r, I) => {
   const {
     positionMode: v = n.positionMode,
     itemFlow: C = n.itemFlow,
-    border: y = n.border,
-    className: M,
+    border: M = n.border,
+    className: h,
     items: a,
     item: E,
     itemRender: N,
     disabled: m,
     style: F,
-    id: h,
+    id: k,
     onSelect: f,
-    onKeyDown: k
+    onKeyDown: y
   } = r, p = $(), O = B(s, r.dir), i = o.useMemo(() => r.fillMode === null ? null : r.fillMode || n.fillMode, [r.fillMode]), u = o.useMemo(() => r.themeColor || n.themeColor, [r.themeColor]), D = o.useMemo(
     () => _(
       "k-bottom-nav",
@@ -42,12 +42,12 @@ const w = o.forwardRef((r, I) => {
       {
         [`k-bottom-nav-${i}`]: i,
         [`k-bottom-nav-${i}-${u}`]: !!(i && u),
-        "k-bottom-nav-border": y,
+        "k-bottom-nav-border": M,
         "k-disabled": m
       },
-      M
+      h
     ),
-    [v, u, i, C, y, m, M]
+    [v, u, i, C, M, m, h]
   ), d = o.useCallback(
     (e, t) => {
       a && !a[t].disabled && f && S(f, e, c(), {
@@ -70,21 +70,21 @@ const w = o.forwardRef((r, I) => {
           break;
       }
       S(
-        k,
+        y,
         e,
         c(),
         void 0
       );
     },
-    [d, k]
+    [d, y]
   );
-  return /* @__PURE__ */ o.createElement("nav", { ref: s, className: D, style: F, id: h || p, dir: O }, a && a.map((e, t) => /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ o.createElement("nav", { ref: s, className: D, style: F, id: k || p, dir: O }, a && a.map((e, t) => /* @__PURE__ */ o.createElement(
     A,
     {
       ...e,
       key: t,
       index: t,
-      id: `${h || p}-${t}`,
+      id: `${k || p}-${t}`,
       disabled: m || e.disabled,
       selected: e.selected,
       dataItem: e,
@@ -95,8 +95,8 @@ const w = o.forwardRef((r, I) => {
     }
   )));
 }), n = {
-  themeColor: "primary",
-  fillMode: "flat",
+  themeColor: void 0,
+  fillMode: void 0,
   itemFlow: "vertical",
   positionMode: "fixed",
   border: !0

package/bottomnavigation/BottomNavigationItem.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 '../index.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface BottomNavigationItemHandle {
+    element: HTMLElement | null;
+}
+/**
+ * Represents the [KendoReact BottomNavigationItem component](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation).
+ */
+export declare const BottomNavigationItem: React.ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & React.RefAttributes<BottomNavigationItemHandle | null>>;

package/bottomnavigation/BottomNavigationItem.mjs

@@ -7,7 +7,7 @@
  */
 import * as e from "react";
 import t from "prop-types";
-import { classNames as D, svgIconPropType as P, IconWrap as T } from "@progress/kendo-react-common";
+import { classNames as D, IconWrap as P, svgIconPropType as T } from "@progress/kendo-react-common";
 const f = e.forwardRef(
   (m, g) => {
     const i = e.useRef(null);
@@ -67,7 +67,7 @@ const f = e.forwardRef(
         "aria-current": a,
         "aria-disabled": n
       },
-      v ? /* @__PURE__ */ e.createElement(v, { itemIndex: o, item: N }) : /* @__PURE__ */ e.createElement(e.Fragment, null, (d || b) && /* @__PURE__ */ e.createElement(T, { className: "k-bottom-nav-item-icon", name: d, icon: b, size: "xlarge" }), p && /* @__PURE__ */ e.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
+      v ? /* @__PURE__ */ e.createElement(v, { itemIndex: o, item: N }) : /* @__PURE__ */ e.createElement(e.Fragment, null, (d || b) && /* @__PURE__ */ e.createElement(P, { className: "k-bottom-nav-item-icon", name: d, icon: b, size: "xlarge" }), p && /* @__PURE__ */ e.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
     );
     return I !== void 0 ? I.call(void 0, u, m) : u;
   }
@@ -81,7 +81,7 @@ f.propTypes = {
   disabled: t.bool,
   selected: t.bool,
   icon: t.string,
-  svgIcon: P,
+  svgIcon: T,
   text: t.string,
   tabIndex: t.number
 };

package/bottomnavigation/BottomNavigationItemProps.d.ts

@@ -0,0 +1,120 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-react-common';
+/**
+ * The interface for describing items that can be passed to the `items` prop of the BottomNavigation component.
+ */
+export interface BottomNavigationItemProps {
+    /**
+     * Sets additional CSS classes to the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem style={{ color: 'red' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Disables the BottomNavigationItem.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the BottomNavigationItem is selected.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem selected={true} />
+     * ```
+     */
+    selected?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the BottomNavigationItem by a `span.k-icon` element.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem icon="home" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Defines an SVG icon.
+     * The icon is rendered inside the BottomNavigationItem.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <BottomNavigationItem svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies the text content of the BottomNavigationItem.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem text="Home" />
+     * ```
+     */
+    text?: React.ReactNode;
+    /**
+     * Sets the `tabIndex` prop of the BottomNavigationItem.
+     *
+     * @default 0
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem tabIndex={-1} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom prop. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem customProp="customValue" />
+     * ```
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+}