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

package/drawer/Drawer.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerProps } from './interfaces/DrawerProps.js';
+import * as React from 'react';
+/**
+ * The Drawer ref.
+ */
+export interface DrawerHandle {
+    /**
+     * The Drawer element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focuses the Drawer component.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items = [
+ *       { text: 'Inbox', icon: 'k-i-inbox', selected: true },
+ *       { separator: true },
+ *       { text: 'Notifications', icon: 'k-i-bell', disabled: true },
+ *       { text: 'Calendar', icon: 'k-i-calendar' },
+ *       { separator: true },
+ *       { text: 'Attachments', icon: 'k-i-hyperlink-email' },
+ *       { text: 'Favourites', icon: 'k-i-star-outline' }
+ *   ];
+ *
+ *   const [expanded, setExpanded] = React.useState(true);
+ *   const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *   return (
+ *       <Drawer expanded={expanded} position='start' mode='push' items={items}>
+ *           <DrawerContent>
+ *               <Button onClick={handleClick}>Toggle the drawer state</Button>
+ *           </DrawerContent>
+ *       </Drawer>
+ *   );
+ * };
+ * ```
+ */
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerHandle | null>>;

package/drawer/DrawerContent.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerContentProps } from './interfaces/DrawerContentProps.js';
+import * as React from 'react';
+/**
+ * The DrawerContent ref.
+ */
+export interface DrawerContentHandle {
+    /**
+     * The DrawerContent element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items = [
+ *       { text: 'Inbox', icon: 'k-i-inbox', selected: true },
+ *       { separator: true },
+ *       { text: 'Notifications', icon: 'k-i-bell', disabled: true },
+ *       { text: 'Calendar', icon: 'k-i-calendar' },
+ *       { separator: true },
+ *       { text: 'Attachments', icon: 'k-i-hyperlink-email' },
+ *       { text: 'Favourites', icon: 'k-i-star-outline' }
+ *   ];
+ *
+ *   const [expanded, setExpanded] = React.useState(true);
+ *   const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *   return (
+ *       <Drawer expanded={expanded} position='start' mode='push' items={items}>
+ *           <DrawerContent>
+ *               <Button onClick={handleClick}>Toggle the drawer state</Button>
+ *           </DrawerContent>
+ *       </Drawer>
+ *   );
+ * };
+ * ```
+ */
+export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<DrawerContentHandle | null>>;

package/drawer/DrawerItem.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerItemHandle } from './interfaces/DrawerItemHandle.js';
+import { DrawerItemProps } from './interfaces/DrawerItemProps.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ *
+ * @example
+ * ```jsx
+ *    const App = () => {
+ *      const [stateVisible, setStateVisible] = React.useState(true);
+ *      const handleClick = () => { setStateVisible(prevState => !prevState); };
+ *
+ *      return (
+ *        <Drawer expanded={stateVisible} mode={'push'}>
+ *            <DrawerNavigation>
+ *                <DrawerItem text="Inbox" icon="k-i-inbox" />
+ *                <DrawerItem separator={true} />
+ *                <DrawerItem text="Notifications" icon="k-i-bell" disabled={true}/>
+ *                <DrawerItem text="Calendar" icon="k-i-calendar"/>
+ *                <DrawerItem separator={true} />
+ *                <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
+ *                <DrawerItem text="Favourites" icon="k-i-star-outline"/>
+ *            </DrawerNavigation>
+ *            <DrawerContent><Button onClick={handleClick}>Toggle the drawer state</Button></DrawerContent>
+ *        </Drawer>
+ *      );
+ *    };
+ * ```
+ */
+export declare const DrawerItem: React.ForwardRefExoticComponent<Omit<DrawerItemProps, "ref"> & React.RefAttributes<DrawerItemHandle | null>>;

package/drawer/DrawerNavigation.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerNavigationProps } from './interfaces/DrawerNavigationProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface DrawerNavigationHandle {
+    element: HTMLDivElement | null;
+    focus: () => void;
+}
+/**
+ * Represents the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ *
+ * @example
+ * ```jsx
+ *   const App = () => {
+ *       const [expanded, setExpanded] = React.useState(true);
+ *       const handleClick = () => setExpanded(prevState => !prevState);
+ *
+ *       return (
+ *           <Drawer expanded={expanded} position='start' mode='push'>
+ *               <DrawerNavigation>
+ *                   <ul className="k-drawer-items">
+ *                       <li className="k-drawer-item k-selected">
+ *                           <span className="k-item-text">Home</span>
+ *                       </li>
+ *                       <li className="k-drawer-item">
+ *                           <span className="k-item-text">Products</span>
+ *                       </li>
+ *                       <li className="k-drawer-item">
+ *                           <span className="k-item-text">About</span>
+ *                       </li>
+ *                   </ul>
+ *               </DrawerNavigation>
+ *               <DrawerContent>
+ *                   <Button onClick={handleClick}>Toggle the drawer state</Button>
+ *               </DrawerContent>
+ *           </Drawer>
+ *       );
+ *   };
+ * ```
+ */
+export declare const DrawerNavigation: React.ForwardRefExoticComponent<DrawerNavigationProps & React.RefAttributes<DrawerNavigationHandle | null>>;

package/drawer/DrawerNavigation.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"),u=require("prop-types"),G=require("./context/DrawerContext.js"),J=require("./DrawerItem.js"),v=require("@progress/kendo-react-common");function Q(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(i,o,d.get?d:{enumerable:!0,get:()=>n[o]})}}return i.default=n,Object.freeze(i)}const t=Q(B),V=240,Y={type:"slide",duration:200},Z={type:"slide",duration:0},b=t.forwardRef((n,i)=>{const{children:o,className:d,style:I}=n,{animation:f,expanded:p,mode:y,position:l,onOverlayClick:O,mini:c,dir:k,width:N,miniWidth:D,items:g,item:C,onSelect:W}=t.useContext(G.DrawerContext),m=t.useRef(null),x=t.useCallback(()=>{m.current&&m.current.focus()},[]),e=typeof f!="boolean"?f:f===!1?Z:Y,A=N||V;t.useImperativeHandle(i,()=>({element:m.current,focus:x}));const P=t.useMemo(()=>"k-drawer "+v.classNames({"k-drawer-start":l==="start","k-drawer-end":l==="end"},d),[l]),S={opacity:1,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},_={opacity:1,transform:"translateX(0px)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},M={opacity:c?1:0,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},R={opacity:0,transform:"translateX(-100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},j={opacity:0,transform:"translateX(100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},T={transform:"translateX(0%)",WebkitTransitionDuration:(e&&e.duration)+"ms",transitionDuration:(e&&e.duration)+"ms"},q=p?y==="push"?S:_:y==="push"?M:k==="ltr"&&l==="start"||k==="rtl"&&l==="end"?c?T:R:c?T:j,h=t.useMemo(()=>new v.Navigation({root:m,selectors:["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],keyboardEvents:{keydown:{ArrowDown:(a,r,s)=>{s.preventDefault(),r.focusNext(a)},ArrowUp:(a,r,s)=>{s.preventDefault(),r.focusPrevious(a)},Enter:(a,r,s)=>{s.preventDefault(),a.click()}}},tabIndex:0,rovingTabIndex:!0}),[]),X=t.useCallback(h.triggerKeyboardEvent.bind(h),[]),F=g&&t.createElement("ul",{className:"k-drawer-items",role:"menubar","aria-orientation":"vertical",onKeyDown:X},g.map((a,r)=>{const{className:s,level:w,...L}=a,U=w!=null?w:0,H=v.classNames(s,c?"":`k-level-${U}`),z={index:r,className:H,...L,onSelect:W},$=C||J.DrawerItem;return t.createElement($,{key:r,...z})})),K=()=>{let a;const r=!p;return p&&(a={width:A}),r&&(c?D!==void 0?a={width:D}:a={}:a={width:0}),e?{...q,...a}:a},E=t.createElement("div",{style:I,className:P,ref:m},t.createElement("div",{className:"k-drawer-wrapper",style:K()},F||o));return y==="overlay"?t.createElement(t.Fragment,null,p&&t.createElement("div",{className:"k-overlay",onClick:O}),E):E});b.propTypes={children:u.any,className:u.string,style:u.object,item:u.any,tabIndex:u.number};b.displayName="KendoDrawerNavigation";exports.DrawerNavigation=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),u=require("prop-types"),G=require("./context/DrawerContext.js"),J=require("./DrawerItem.js"),v=require("@progress/kendo-react-common");function Q(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(i,o,d.get?d:{enumerable:!0,get:()=>n[o]})}}return i.default=n,Object.freeze(i)}const t=Q(B),V=240,Y={duration:200},Z={duration:0},b=t.forwardRef((n,i)=>{const{children:o,className:d,style:I}=n,{animation:f,expanded:p,mode:w,position:l,onOverlayClick:O,mini:c,dir:k,width:N,miniWidth:D,items:g,item:C,onSelect:W}=t.useContext(G.DrawerContext),m=t.useRef(null),x=t.useCallback(()=>{m.current&&m.current.focus()},[]),e=typeof f!="boolean"?f:f===!1?Z:Y,A=N||V;t.useImperativeHandle(i,()=>({element:m.current,focus:x}));const P=t.useMemo(()=>"k-drawer "+v.classNames({"k-drawer-start":l==="start","k-drawer-end":l==="end"},d),[l]),S={opacity:1,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},_={opacity:1,transform:"translateX(0px)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},M={opacity:c?1:0,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},R={opacity:0,transform:"translateX(-100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},j={opacity:0,transform:"translateX(100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},T={transform:"translateX(0%)",WebkitTransitionDuration:(e&&e.duration)+"ms",transitionDuration:(e&&e.duration)+"ms"},q=p?w==="push"?S:_:w==="push"?M:k==="ltr"&&l==="start"||k==="rtl"&&l==="end"?c?T:R:c?T:j,h=t.useMemo(()=>new v.Navigation({root:m,selectors:["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],keyboardEvents:{keydown:{ArrowDown:(a,r,s)=>{s.preventDefault(),r.focusNext(a)},ArrowUp:(a,r,s)=>{s.preventDefault(),r.focusPrevious(a)},Enter:(a,r,s)=>{s.preventDefault(),a.click()}}},tabIndex:0,rovingTabIndex:!0}),[]),X=t.useCallback(h.triggerKeyboardEvent.bind(h),[]),F=g&&t.createElement("ul",{className:"k-drawer-items",role:"menubar","aria-orientation":"vertical",onKeyDown:X},g.map((a,r)=>{const{className:s,level:y,...L}=a,U=y!=null?y:0,H=v.classNames(s,c?"":`k-level-${U}`),z={index:r,className:H,...L,onSelect:W},$=C||J.DrawerItem;return t.createElement($,{key:r,...z})})),K=()=>{let a;const r=!p;return p&&(a={width:A}),r&&(c?D!==void 0?a={width:D}:a={}:a={width:0}),e?{...q,...a}:a},E=t.createElement("div",{style:I,className:P,ref:m},t.createElement("div",{className:"k-drawer-wrapper",style:K()},F||o));return w==="overlay"?t.createElement(t.Fragment,null,p&&t.createElement("div",{className:"k-overlay",onClick:O}),E):E});b.propTypes={children:u.any,className:u.string,style:u.object,item:u.any,tabIndex:u.number};b.displayName="KendoDrawerNavigation";exports.DrawerNavigation=b;

package/drawer/DrawerNavigation.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
+import * as e from "react";
 import l from "prop-types";
 import { DrawerContext as B } from "./context/DrawerContext.mjs";
 import { DrawerItem as G } from "./DrawerItem.mjs";
 import { classNames as b, Navigation as J } from "@progress/kendo-react-common";
-const Q = 240, V = { type: "slide", duration: 200 }, Y = { type: "slide", duration: 0 }, D = t.forwardRef(
+const Q = 240, V = { duration: 200 }, Y = { duration: 0 }, D = e.forwardRef(
   (h, E) => {
     const { children: T, className: g, style: I } = h, {
       animation: m,
@@ -21,21 +21,21 @@ const Q = 240, V = { type: "slide", duration: 200 }, Y = { type: "slide", durati
       mini: o,
       dir: p,
       width: f,
-      miniWidth: y,
-      items: v,
+      miniWidth: v,
+      items: w,
       item: x,
       onSelect: A
-    } = t.useContext(B), i = t.useRef(null), C = t.useCallback(() => {
+    } = e.useContext(B), i = e.useRef(null), C = e.useCallback(() => {
       i.current && i.current.focus();
-    }, []), e = typeof m != "boolean" ? m : m === !1 ? Y : V, O = f || Q;
-    t.useImperativeHandle(
+    }, []), t = typeof m != "boolean" ? m : m === !1 ? Y : V, O = f || Q;
+    e.useImperativeHandle(
       E,
       () => ({
         element: i.current,
         focus: C
       })
     );
-    const P = t.useMemo(
+    const P = e.useMemo(
       () => "k-drawer " + b(
         {
           "k-drawer-start": s === "start",
@@ -46,32 +46,32 @@ const Q = 240, V = { type: "slide", duration: 200 }, Y = { type: "slide", durati
       [s]
     ), M = {
       opacity: 1,
-      WebkitTransition: "all " + (e && e.duration) + "ms",
-      transition: "all " + (e && e.duration) + "ms"
+      WebkitTransition: "all " + (t && t.duration) + "ms",
+      transition: "all " + (t && t.duration) + "ms"
     }, R = {
       opacity: 1,
       transform: "translateX(0px)",
-      WebkitTransition: "all " + (e && e.duration) + "ms",
-      transition: "all " + (e && e.duration) + "ms"
+      WebkitTransition: "all " + (t && t.duration) + "ms",
+      transition: "all " + (t && t.duration) + "ms"
     }, X = {
       opacity: o ? 1 : 0,
-      WebkitTransition: "all " + (e && e.duration) + "ms",
-      transition: "all " + (e && e.duration) + "ms"
+      WebkitTransition: "all " + (t && t.duration) + "ms",
+      transition: "all " + (t && t.duration) + "ms"
     }, _ = {
       opacity: 0,
       transform: "translateX(-100%)",
-      WebkitTransition: "all " + (e && e.duration) + "ms",
-      transition: "all " + (e && e.duration) + "ms"
+      WebkitTransition: "all " + (t && t.duration) + "ms",
+      transition: "all " + (t && t.duration) + "ms"
     }, S = {
       opacity: 0,
       transform: "translateX(100%)",
-      WebkitTransition: "all " + (e && e.duration) + "ms",
-      transition: "all " + (e && e.duration) + "ms"
-    }, w = {
+      WebkitTransition: "all " + (t && t.duration) + "ms",
+      transition: "all " + (t && t.duration) + "ms"
+    }, y = {
       transform: "translateX(0%)",
-      WebkitTransitionDuration: (e && e.duration) + "ms",
-      transitionDuration: (e && e.duration) + "ms"
-    }, F = c ? d === "push" ? M : R : d === "push" ? X : p === "ltr" && s === "start" || p === "rtl" && s === "end" ? o ? w : _ : o ? w : S, k = t.useMemo(
+      WebkitTransitionDuration: (t && t.duration) + "ms",
+      transitionDuration: (t && t.duration) + "ms"
+    }, F = c ? d === "push" ? M : R : d === "push" ? X : p === "ltr" && s === "start" || p === "rtl" && s === "end" ? o ? y : _ : o ? y : S, k = e.useMemo(
       () => new J({
         root: i,
         selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
@@ -92,20 +92,20 @@ const Q = 240, V = { type: "slide", duration: 200 }, Y = { type: "slide", durati
         rovingTabIndex: !0
       }),
       []
-    ), K = t.useCallback(k.triggerKeyboardEvent.bind(k), []), L = v && /* @__PURE__ */ t.createElement("ul", { className: "k-drawer-items", role: "menubar", "aria-orientation": "vertical", onKeyDown: K }, v.map((a, r) => {
+    ), K = e.useCallback(k.triggerKeyboardEvent.bind(k), []), L = w && /* @__PURE__ */ e.createElement("ul", { className: "k-drawer-items", role: "menubar", "aria-orientation": "vertical", onKeyDown: K }, w.map((a, r) => {
       const { className: n, level: u, ...H } = a, j = u != null ? u : 0, $ = b(n, o ? "" : `k-level-${j}`), q = {
         index: r,
         className: $,
         ...H,
         onSelect: A
       }, z = x || G;
-      return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
+      return /* @__PURE__ */ e.createElement(z, { key: r, ...q });
     })), U = () => {
       let a;
       const r = !c;
-      return c && (a = { width: O }), r && (o ? y !== void 0 ? a = { width: y } : a = {} : a = { width: 0 }), e ? { ...F, ...a } : a;
-    }, N = /* @__PURE__ */ t.createElement("div", { style: I, className: P, ref: i }, /* @__PURE__ */ t.createElement("div", { className: "k-drawer-wrapper", style: U() }, L || T));
-    return d === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, c && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: W }), N) : N;
+      return c && (a = { width: O }), r && (o ? v !== void 0 ? a = { width: v } : a = {} : a = { width: 0 }), t ? { ...F, ...a } : a;
+    }, N = /* @__PURE__ */ e.createElement("div", { style: I, className: P, ref: i }, /* @__PURE__ */ e.createElement("div", { className: "k-drawer-wrapper", style: U() }, L || T));
+    return d === "overlay" ? /* @__PURE__ */ e.createElement(e.Fragment, null, c && /* @__PURE__ */ e.createElement("div", { className: "k-overlay", onClick: W }), N) : N;
   }
 );
 D.propTypes = {

package/drawer/context/DrawerContext.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 { DrawerAnimation } from '../interfaces/DrawerAnimation.js';
+import { DrawerItemProps } from '../interfaces/DrawerItemProps.js';
+import * as React from 'react';
+/** @hidden */
+export type DrawerContextType = {
+    animation?: boolean | DrawerAnimation;
+    expanded?: boolean;
+    mode?: 'overlay' | 'push';
+    position?: 'start' | 'end';
+    mini?: boolean;
+    dir?: string;
+    items?: Array<DrawerItemProps>;
+    item?: React.ComponentType<DrawerItemProps>;
+    width?: number;
+    miniWidth?: number;
+    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onSelect?: (target: any, idx: number, event: React.SyntheticEvent<HTMLElement>) => void;
+};
+/** @hidden */
+export declare const DrawerContext: React.Context<DrawerContextType>;

package/drawer/interfaces/DrawerAnimation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the animation settings of the Drawer.
+ *
+ */
+export interface DrawerAnimation {
+    /**
+     * Specifies the type of the Drawer animation.
+     */
+    type?: 'slide';
+    /**
+     * Specifies the duration of the Drawer animation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/display_modes#toc-expand-modes)) .
+     */
+    duration: number;
+}

package/drawer/interfaces/DrawerContentProps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The properties of the [KendoReact DrawerContent component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ */
+export interface DrawerContentProps {
+    /**
+     * Sets the DrawerContent items declaratively.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerContent element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the DrawerContent.
+     */
+    style?: React.CSSProperties;
+}

package/drawer/interfaces/DrawerItemHandle.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The DrawerItem ref.
+ */
+export interface DrawerItemHandle {
+    /**
+     * The DrawerItem element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the DrawerItem.
+     */
+    focus: () => void;
+    /**
+     * The props of the DrawerItem.
+     */
+    props: any;
+}

package/drawer/interfaces/DrawerItemProps.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @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';
+/**
+ * An interface for the Drawer items.
+ */
+export interface DrawerItemProps {
+    /**
+     * Represents the children that are passed to the DrawerItem.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem>Item Content</DrawerItem>
+     * ```
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerItem element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the Drawer item.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies if the Drawer item is disabled.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem disabled={true} />
+     * ```
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem icon="home" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon of the item.
+     *
+     * Example:
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <DrawerItem svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies if the Drawer item is initially selected.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem selected={true} />
+     * ```
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Specifies if this is a separator item.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem separator={true} />
+     * ```
+     *
+     * @default false
+     */
+    separator?: boolean;
+    /**
+     * Specifies the text content of the Drawer item.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem text="Dashboard" />
+     * ```
+     */
+    text?: string;
+    /**
+     * Sets the index of the DrawerItem that is used to identify it.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem index={0} />
+     * ```
+     */
+    index?: number;
+    /**
+     * Sets the `tabIndex` property of the DrawerItem.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem tabIndex={1} />
+     * ```
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
+     */
+    [customProp: string]: any;
+    /**
+     * This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem level={1} />
+     * ```
+     */
+    level?: number;
+    /**
+     * @hidden
+     */
+    onSelect?(target?: any, idx?: number, event?: React.SyntheticEvent<Element>): void;
+}

package/drawer/interfaces/DrawerNavigationProps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The properties of the [KendoReact DrawerNavigation component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ */
+export interface DrawerNavigationProps {
+    /**
+     * Sets the DrawerNavigation items declaratively.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the DrawerNavigation element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the DrawerNavigation.
+     */
+    style?: React.CSSProperties;
+}