@progress/kendo-react-layout 14.5.0-develop.8 → 15.0.0-develop.1

package/MenuMcpWrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MenuHandle } from './menu/components/Menu.js';
+import { MenuProps } from './menu/MenuProps';
+/**
+ * Menu wrapper that integrates the Web MCP hook.
+ *
+ * @hidden
+ */
+import * as React from 'react';
+/** @hidden */
+export declare const MenuWrapper: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuHandle>>;

package/MenuMcpWrapper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 a=require("react"),i=require("./menu/components/Menu.js"),c=require("@progress/kendo-react-common");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=s(a),f=c.withIdHOC(i.Menu),u=o.forwardRef((e,n)=>{const[t,r]=c.useMergedRef(n);return c.useWebMcpRegister("menu",t,e,e.webMcp),o.createElement(f,{...e,ref:r})});u.displayName="KendoReactMenu";exports.MenuWrapper=u;

package/MenuMcpWrapper.mjs

@@ -0,0 +1,18 @@
+/**
+ * @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 { Menu as o } from "./menu/components/Menu.mjs";
+import { useMergedRef as f, useWebMcpRegister as a, withIdHOC as c } from "@progress/kendo-react-common";
+const i = c(o), u = r.forwardRef((e, t) => {
+  const [n, m] = f(t);
+  return a("menu", n, e, e.webMcp), /* @__PURE__ */ r.createElement(i, { ...e, ref: m });
+});
+u.displayName = "KendoReactMenu";
+export {
+  u as MenuWrapper
+};

package/README.md

@@ -1,4 +1,4 @@
-[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout&utm_content=banner)
+[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout&utm_content=banner)
 
 # KendoReact Layout Library for React
 
@@ -6,7 +6,7 @@
 >
 > -   This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout)—an enterprise-grade UI library with 120+ free and premium components.
 > -   It contains both free and premium KendoReact components and tools. To use the premium components, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-react-ui). You can use the free components without having to sign up or get a license key.
-> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
+> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
 > -   If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout) to learn how to configure your KendoReact licensing.
 > -   Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout).
 > -   The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
@@ -558,7 +558,7 @@ import { Timeline } from '@progress/kendo-react-layout';
 
 The following table outlines the key resources available with KendoReact and KendoReact Free.
 
-|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)                                                                                                                                | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
+|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)                                                                                                     | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
 | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | React components                 | 50+                                                                                                                                                                                                      | 120+                                                                                                                                                                                                     |
 | Four professional themes         | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
@@ -581,7 +581,7 @@ For any issues you might encounter while working with the KendoReact Layout, use
 ## Resources
 
 -   [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout)
--   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
+-   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
 -   [Getting Started with the KendoReact Layout](https://www.telerik.com/kendo-react-ui/components/layout/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout)
 -   [API Reference of the KendoReact Layout](https://www.telerik.com/kendo-react-ui/components/layout/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout)
 -   [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-layout)

package/actionsheet/ActionSheet.d.ts

@@ -187,6 +187,18 @@ export interface ActionSheetProps {
      * Specifies the styles of the ActionSheet component.
      */
     style?: React.CSSProperties;
+    /**
+     * Specifies the container element where the ActionSheet will be appended.
+     * Defaults to `null` (renders in place). Set to a DOM element (e.g. `document.body`)
+     * to escape CSS containing blocks created by `transform`, `backdrop-filter`, etc.
+     *
+     * @default null
+     * @example
+     * ```jsx
+     * <ActionSheet appendTo={document.body} />
+     * ```
+     */
+    appendTo?: HTMLElement | null;
 }
 /**
  * @hidden

package/actionsheet/ActionSheet.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 Q=require("react"),u=require("prop-types"),W=require("@progress/kendo-react-animation"),A=require("@progress/kendo-react-common"),K=require("./ActionSheetItem.js"),F=require("./ActionSheetHeader.js"),X=require("./ActionSheetFooter.js"),Y=require("./ActionSheetContent.js"),H=require("./ActionSheetView.js");function Z(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const f=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(d,r,f.get?f:{enumerable:!0,get:()=>e[r]})}}return d.default=e,Object.freeze(d)}const n=Z(Q),R=n.forwardRef((e,d)=>{var q,_;const{navigatableElements:r=k.navigatableElements,navigatable:f=k.navigatable,position:V=k.position,animationDuration:l=300,prefixActions:N,suffixActions:g,filter:w}=e,L=(t,a,i)=>{i.preventDefault(),i.shiftKey?a.focusPrevious(t):a.focusNext(t)},M=(t,a,i)=>{if(t.ariaDisabled)return;const s=t.className&&t.className.indexOf?t.className.indexOf("k-actionsheet-item")!==-1:!1,x=a.elements.filter(y=>y.className.indexOf("k-actionsheet-item")!==-1);if(s&&e.onItemSelect){i.preventDefault();const y=e.items[x.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:i,item:y,title:y&&y.title})}e.animation||h()},$=(t,a,i)=>{e.onClose&&(i.preventDefault(),e.onClose.call(void 0,i)),e.animation||h()},h=()=>{b({show:!1})},B=t=>{f&&v.current.triggerKeyboardEvent(t)},z=t=>{e.onClose&&e.onClose.call(void 0,t),e.animation||h()},C=t=>{e.onItemSelect&&e.onItemSelect.call(void 0,t),e.animation||h()},U=t=>{const a={},i=[];return n.Children.forEach(t,s=>{s&&(s.type.displayName===H.ActionSheetViewDisplayName?i.push(s):a[s.type.displayName]=s)}),i.length>0?i:a},I=n.useRef(null),E=n.useRef(null);n.useImperativeHandle(I,()=>({props:e,element:E.current})),n.useImperativeHandle(d,()=>I.current);const v=n.useRef(void 0),D=n.useRef({bottom:"0",width:"100%"}),O=n.useRef(void 0),[o,G]=n.useState({show:!1,slide:!1}),b=t=>{G(a=>({...a,...t}))};n.useEffect(()=>{e.expand&&!o.show&&b({show:!0})},[]),n.useEffect(()=>{const t=E.current;if(e.expand&&!o.show&&b({show:!0}),e.expand&&o.show&&!o.slide&&b({slide:!0}),!e.expand&&o.show&&o.slide&&b({slide:!1}),O!==o&&o.slide&&t&&!e.className&&(t.style.setProperty("--kendo-actionsheet-height","auto"),t.style.setProperty("--kendo-actionsheet-max-height","none")),t&&f){const i=[".k-actionsheet-item",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-view",".k-actionsheet-titlebar"].map(s=>A.FOCUSABLE_ELEMENTS.concat(r).map(x=>`${s} ${x}`)).flat()];v.current=new A.Navigation({tabIndex:e.tabIndex||0,root:E,rovingTabIndex:!1,selectors:i,keyboardEvents:{keydown:{Tab:L,Enter:M,Escape:$}}}),v.current.focusElement(v.current.first,null)}O.current={...o}});const T="k-actionsheet-title",P=T,c=(q=e.items)==null?void 0:q.filter(t=>!t.group||t.group==="top"),S=(_=e.items)==null?void 0:_.filter(t=>t.group==="bottom"),J=c&&c.length>0&&S&&S.length>0,m=U(e.children),j=o.slide&&n.createElement("div",{className:A.classNames(`k-actionsheet k-actionsheet-${V}`,e.className),role:"dialog","aria-modal":"true",style:e.style,"aria-hidden":!1,"aria-labelledby":P,ref:E,onKeyDown:B},Array.isArray(m)?n.createElement(n.Fragment,null,m.map(t=>t)):n.createElement(H.ActionSheetView,null,m[F.headerDisplayName]&&!e.title&&!e.subTitle&&m[F.headerDisplayName],(e.title||e.subTitle||N||g||w)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group"},N&&n.createElement("div",{className:"k-actionsheet-actions"},N),n.createElement("div",{className:T,id:P},n.createElement("div",{className:"k-text-center"},e.title),e.subTitle&&n.createElement("div",{className:"k-actionsheet-subtitle k-text-center"},e.subTitle)),g&&n.createElement("div",{className:"k-actionsheet-actions"},g)),w&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},w)),m[Y.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul",role:"group"},c&&c.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a,key:a,item:t,onClick:C})),J&&n.createElement("hr",{className:"k-hr"}),S&&S.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a+((c==null?void 0:c.length)||0),key:a,item:t,onClick:C})))),m[X.footerDisplayName]));return n.createElement(n.Fragment,null,e.expand||o.show?n.createElement("div",{className:"k-actionsheet-container"},n.createElement("div",{className:"k-overlay",onClick:z}),e.animation?n.createElement(W.Animation,{transitionName:o.slide?"slide-up":"slide-down",onExited:h,transitionEnterDuration:typeof l=="object"&&Object.keys(l).length>0&&l.openDuration?Number(l.openDuration):Number(l),transitionExitDuration:typeof l=="object"&&Object.keys(l).length>0&&l.closeDuration?Number(l.closeDuration):Number(l),animationEnteringStyle:e.animationStyles||D.current,animationEnteredStyle:e.animationStyles||D.current,animationExitingStyle:e.animationStyles||D.current,exit:!0,enter:!0,appear:!1},j):j):null)}),k={navigatable:!0,navigatableElements:[],position:"bottom"};R.propTypes={items:u.array,subTitle:u.node,title:u.node,navigatable:u.bool,navigatableElements:u.array,position:u.oneOf(["top","bottom","left","right","fullscreen"])};R.displayName="KendoReactActionSheet";exports.ActionSheet=R;exports.actionSheetDefaultProps=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),Y=require("react-dom"),r=require("prop-types"),Z=require("@progress/kendo-react-animation"),N=require("@progress/kendo-react-common"),K=require("./ActionSheetItem.js"),F=require("./ActionSheetHeader.js"),p=require("./ActionSheetFooter.js"),ee=require("./ActionSheetContent.js"),H=require("./ActionSheetView.js");function V(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const m in e)if(m!=="default"){const f=Object.getOwnPropertyDescriptor(e,m);Object.defineProperty(d,m,f.get?f:{enumerable:!0,get:()=>e[m]})}}return d.default=e,Object.freeze(d)}const n=V(X),te=V(Y),R=n.forwardRef((e,d)=>{var _,M;const{navigatableElements:m=g.navigatableElements,navigatable:f=g.navigatable,position:L=g.position,animationDuration:l=300,prefixActions:D,suffixActions:w,filter:x}=e,$=(t,a,i)=>{i.preventDefault(),i.shiftKey?a.focusPrevious(t):a.focusNext(t)},B=(t,a,i)=>{if(t.ariaDisabled)return;const c=t.className&&t.className.indexOf?t.className.indexOf("k-actionsheet-item")!==-1:!1,A=a.elements.filter(b=>b.className.indexOf("k-actionsheet-item")!==-1);if(c&&e.onItemSelect){i.preventDefault();const b=e.items[A.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:i,item:b,title:b&&b.title})}e.animation||h()},U=(t,a,i)=>{e.onClose&&(i.preventDefault(),e.onClose.call(void 0,i)),e.animation||h()},h=()=>{y({show:!1})},z=t=>{f&&v.current.triggerKeyboardEvent(t)},G=t=>{e.onClose&&e.onClose.call(void 0,t),e.animation||h()},O=t=>{e.onItemSelect&&e.onItemSelect.call(void 0,t),e.animation||h()},J=t=>{const a={},i=[];return n.Children.forEach(t,c=>{c&&(c.type.displayName===H.ActionSheetViewDisplayName?i.push(c):a[c.type.displayName]=c)}),i.length>0?i:a},T=n.useRef(null),E=n.useRef(null);n.useImperativeHandle(T,()=>({props:e,element:E.current})),n.useImperativeHandle(d,()=>T.current);const v=n.useRef(void 0),k=n.useRef({bottom:"0",width:"100%"}),C=n.useRef(void 0),[o,Q]=n.useState({show:!1,slide:!1}),y=t=>{Q(a=>({...a,...t}))};n.useEffect(()=>{e.expand&&!o.show&&y({show:!0})},[]),n.useEffect(()=>{const t=E.current;if(e.expand&&!o.show&&y({show:!0}),e.expand&&o.show&&!o.slide&&y({slide:!0}),!e.expand&&o.show&&o.slide&&y({slide:!1}),C!==o&&o.slide&&t&&!e.className&&(t.style.setProperty("--kendo-actionsheet-height","auto"),t.style.setProperty("--kendo-actionsheet-max-height","none")),t&&f){const i=[".k-actionsheet-item",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-view",".k-actionsheet-titlebar"].map(c=>N.FOCUSABLE_ELEMENTS.concat(m).map(A=>`${c} ${A}`)).flat()];v.current=new N.Navigation({tabIndex:e.tabIndex||0,root:E,rovingTabIndex:!1,selectors:i,keyboardEvents:{keydown:{Tab:$,Enter:B,Escape:U}}}),v.current.focusElement(v.current.first,null)}C.current={...o}});const I="k-actionsheet-title",P=I,s=(_=e.items)==null?void 0:_.filter(t=>!t.group||t.group==="top"),S=(M=e.items)==null?void 0:M.filter(t=>t.group==="bottom"),W=s&&s.length>0&&S&&S.length>0,u=J(e.children),q=o.slide&&n.createElement("div",{className:N.classNames(`k-actionsheet k-actionsheet-${L}`,e.className),role:"dialog","aria-modal":"true",style:e.style,"aria-labelledby":P,ref:E,onKeyDown:z},Array.isArray(u)?n.createElement(n.Fragment,null,u.map(t=>t)):n.createElement(H.ActionSheetView,null,u[F.headerDisplayName]&&!e.title&&!e.subTitle&&u[F.headerDisplayName],(e.title||e.subTitle||D||w||x)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group"},D&&n.createElement("div",{className:"k-actionsheet-actions"},D),n.createElement("div",{className:I,id:P},n.createElement("div",{className:"k-text-center"},e.title),e.subTitle&&n.createElement("div",{className:"k-actionsheet-subtitle k-text-center"},e.subTitle)),w&&n.createElement("div",{className:"k-actionsheet-actions"},w)),x&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},x)),u[ee.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul"},s&&s.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a,key:a,item:t,onClick:O})),W&&n.createElement("hr",{className:"k-hr"}),S&&S.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a+((s==null?void 0:s.length)||0),key:a,item:t,onClick:O})))),u[p.footerDisplayName])),j=n.createElement(n.Fragment,null,e.expand||o.show?n.createElement("div",{className:"k-actionsheet-container"},n.createElement("div",{className:"k-overlay",onClick:G}),e.animation?n.createElement(Z.Animation,{transitionName:o.slide?"slide-up":"slide-down",onExited:h,transitionEnterDuration:typeof l=="object"&&Object.keys(l).length>0&&l.openDuration?Number(l.openDuration):Number(l),transitionExitDuration:typeof l=="object"&&Object.keys(l).length>0&&l.closeDuration?Number(l.closeDuration):Number(l),animationEnteringStyle:e.animationStyles||k.current,animationEnteredStyle:e.animationStyles||k.current,animationExitingStyle:e.animationStyles||k.current,exit:!0,enter:!0,appear:!1},q):n.createElement("div",{className:"k-animation-container k-animation-container-shown"},n.createElement("div",{className:"k-child-animation-container",style:e.animationStyles||k.current},q))):null);return e.appendTo&&N.canUseDOM?te.createPortal(j,e.appendTo):j}),g={navigatable:!0,navigatableElements:[],position:"bottom"};R.propTypes={items:r.array,subTitle:r.node,title:r.node,navigatable:r.bool,navigatableElements:r.array,position:r.oneOf(["top","bottom","left","right","fullscreen"]),appendTo:r.any};R.displayName="KendoReactActionSheet";exports.ActionSheet=R;exports.actionSheetDefaultProps=g;

package/actionsheet/ActionSheet.mjs

@@ -6,87 +6,88 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as n from "react";
-import m from "prop-types";
-import { Animation as G } from "@progress/kendo-react-animation";
-import { FOCUSABLE_ELEMENTS as J, Navigation as Q, classNames as W } from "@progress/kendo-react-common";
-import { ActionSheetItem as P } from "./ActionSheetItem.mjs";
-import { headerDisplayName as K } from "./ActionSheetHeader.mjs";
-import { footerDisplayName as X } from "./ActionSheetFooter.mjs";
-import { contentDisplayName as Y } from "./ActionSheetContent.mjs";
-import { ActionSheetView as Z, ActionSheetViewDisplayName as p } from "./ActionSheetView.mjs";
-const j = n.forwardRef((e, _) => {
-  var T, O;
+import * as J from "react-dom";
+import r from "prop-types";
+import { Animation as Q } from "@progress/kendo-react-animation";
+import { FOCUSABLE_ELEMENTS as W, Navigation as X, classNames as Y, canUseDOM as Z } from "@progress/kendo-react-common";
+import { ActionSheetItem as K } from "./ActionSheetItem.mjs";
+import { headerDisplayName as j } from "./ActionSheetHeader.mjs";
+import { footerDisplayName as p } from "./ActionSheetFooter.mjs";
+import { contentDisplayName as ee } from "./ActionSheetContent.mjs";
+import { ActionSheetView as te, ActionSheetViewDisplayName as ne } from "./ActionSheetView.mjs";
+const _ = n.forwardRef((e, F) => {
+  var O, P;
   const {
-    navigatableElements: F = S.navigatableElements,
-    navigatable: x = S.navigatable,
-    position: H = S.position,
+    navigatableElements: H = g.navigatableElements,
+    navigatable: w = g.navigatable,
+    position: L = g.position,
     animationDuration: l = 300,
-    prefixActions: y,
-    suffixActions: v,
-    filter: k
-  } = e, L = (t, a, i) => {
+    prefixActions: v,
+    suffixActions: k,
+    filter: N
+  } = e, M = (t, a, i) => {
     i.preventDefault(), i.shiftKey ? a.focusPrevious(t) : a.focusNext(t);
   }, V = (t, a, i) => {
     if (t.ariaDisabled)
       return;
-    const s = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, g = a.elements.filter((d) => d.className.indexOf("k-actionsheet-item") !== -1);
+    const s = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, S = a.elements.filter((u) => u.className.indexOf("k-actionsheet-item") !== -1);
     if (s && e.onItemSelect) {
       i.preventDefault();
-      const d = e.items[g.indexOf(t)];
+      const u = e.items[S.indexOf(t)];
       e.onItemSelect.call(void 0, {
         syntheticEvent: i,
-        item: d,
-        title: d && d.title
+        item: u,
+        title: u && u.title
       });
     }
     e.animation || f();
   }, $ = (t, a, i) => {
     e.onClose && (i.preventDefault(), e.onClose.call(void 0, i)), e.animation || f();
   }, f = () => {
-    u({ show: !1 });
+    d({ show: !1 });
   }, B = (t) => {
-    x && E.current.triggerKeyboardEvent(t);
-  }, M = (t) => {
+    w && E.current.triggerKeyboardEvent(t);
+  }, U = (t) => {
     e.onClose && e.onClose.call(void 0, t), e.animation || f();
-  }, w = (t) => {
+  }, x = (t) => {
     e.onItemSelect && e.onItemSelect.call(void 0, t), e.animation || f();
-  }, U = (t) => {
+  }, q = (t) => {
     const a = {}, i = [];
     return n.Children.forEach(t, (s) => {
-      s && (s.type.displayName === p ? i.push(s) : a[s.type.displayName] = s);
+      s && (s.type.displayName === ne ? i.push(s) : a[s.type.displayName] = s);
     }), i.length > 0 ? i : a;
   }, D = n.useRef(null), h = n.useRef(null);
   n.useImperativeHandle(
     D,
     () => ({ props: e, element: h.current })
   ), n.useImperativeHandle(
-    _,
+    F,
     () => D.current
   );
-  const E = n.useRef(void 0), N = n.useRef({ bottom: "0", width: "100%" }), R = n.useRef(void 0), [o, q] = n.useState({ show: !1, slide: !1 }), u = (t) => {
-    q((a) => ({ ...a, ...t }));
+  const E = n.useRef(void 0), y = n.useRef({ bottom: "0", width: "100%" }), R = n.useRef(void 0), [o, z] = n.useState({ show: !1, slide: !1 }), d = (t) => {
+    z((a) => ({ ...a, ...t }));
   };
   n.useEffect(() => {
-    e.expand && !o.show && u({ show: !0 });
+    e.expand && !o.show && d({ show: !0 });
   }, []), n.useEffect(() => {
     const t = h.current;
-    if (e.expand && !o.show && u({ show: !0 }), e.expand && o.show && !o.slide && u({ slide: !0 }), !e.expand && o.show && o.slide && u({ slide: !1 }), R !== o && o.slide && t && !e.className && (t.style.setProperty("--kendo-actionsheet-height", "auto"), t.style.setProperty("--kendo-actionsheet-max-height", "none")), t && x) {
+    if (e.expand && !o.show && d({ show: !0 }), e.expand && o.show && !o.slide && d({ slide: !0 }), !e.expand && o.show && o.slide && d({ slide: !1 }), R !== o && o.slide && t && !e.className && (t.style.setProperty("--kendo-actionsheet-height", "auto"), t.style.setProperty("--kendo-actionsheet-max-height", "none")), t && w) {
       const i = [".k-actionsheet-item", ...[
         ".k-actionsheet-footer",
         ".k-actionsheet-content",
         ".k-actionsheet-view",
         ".k-actionsheet-titlebar"
-      ].map((s) => J.concat(F).map(
-        (g) => `${s} ${g}`
+      ].map((s) => W.concat(H).map(
+        (S) => `${s} ${S}`
       )).flat()];
-      E.current = new Q({
+      E.current = new X({
         tabIndex: e.tabIndex || 0,
         root: h,
         rovingTabIndex: !1,
         selectors: i,
         keyboardEvents: {
           keydown: {
-            Tab: L,
+            Tab: M,
             Enter: V,
             Escape: $
           }
@@ -95,73 +96,73 @@ const j = n.forwardRef((e, _) => {
     }
     R.current = { ...o };
   });
-  const C = "k-actionsheet-title", I = C, c = (T = e.items) == null ? void 0 : T.filter(
+  const T = "k-actionsheet-title", C = T, c = (O = e.items) == null ? void 0 : O.filter(
     (t) => !t.group || t.group === "top"
-  ), b = (O = e.items) == null ? void 0 : O.filter(
+  ), b = (P = e.items) == null ? void 0 : P.filter(
     (t) => t.group === "bottom"
-  ), z = c && c.length > 0 && b && b.length > 0, r = U(e.children), A = o.slide && /* @__PURE__ */ n.createElement(
+  ), G = c && c.length > 0 && b && b.length > 0, m = q(e.children), I = o.slide && /* @__PURE__ */ n.createElement(
     "div",
     {
-      className: W(`k-actionsheet k-actionsheet-${H}`, e.className),
+      className: Y(`k-actionsheet k-actionsheet-${L}`, e.className),
       role: "dialog",
       "aria-modal": "true",
       style: e.style,
-      "aria-hidden": !1,
-      "aria-labelledby": I,
+      "aria-labelledby": C,
       ref: h,
       onKeyDown: B
     },
-    Array.isArray(r) ? /* @__PURE__ */ n.createElement(n.Fragment, null, r.map((t) => t)) : /* @__PURE__ */ n.createElement(Z, null, r[K] && !e.title && !e.subTitle && r[K], (e.title || e.subTitle || y || v || k) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group" }, y && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, y), /* @__PURE__ */ n.createElement("div", { className: C, id: I }, /* @__PURE__ */ n.createElement("div", { className: "k-text-center" }, e.title), e.subTitle && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, e.subTitle)), v && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, v)), k && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, k)), r[Y] || /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ n.createElement("div", { className: "k-list-ul", role: "group" }, c && c.map((t, a) => /* @__PURE__ */ n.createElement(
-      P,
+    Array.isArray(m) ? /* @__PURE__ */ n.createElement(n.Fragment, null, m.map((t) => t)) : /* @__PURE__ */ n.createElement(te, null, m[j] && !e.title && !e.subTitle && m[j], (e.title || e.subTitle || v || k || N) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group" }, v && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, v), /* @__PURE__ */ n.createElement("div", { className: T, id: C }, /* @__PURE__ */ n.createElement("div", { className: "k-text-center" }, e.title), e.subTitle && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, e.subTitle)), k && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, k)), N && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, N)), m[ee] || /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ n.createElement("div", { className: "k-list-ul" }, c && c.map((t, a) => /* @__PURE__ */ n.createElement(
+      K,
       {
         ...t,
         id: a,
         key: a,
         item: t,
-        onClick: w
+        onClick: x
       }
-    )), z && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), b && b.map((t, a) => /* @__PURE__ */ n.createElement(
-      P,
+    )), G && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), b && b.map((t, a) => /* @__PURE__ */ n.createElement(
+      K,
       {
         ...t,
         id: a + ((c == null ? void 0 : c.length) || 0),
         key: a,
         item: t,
-        onClick: w
+        onClick: x
       }
-    )))), r[X])
-  );
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand || o.show ? /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ n.createElement("div", { className: "k-overlay", onClick: M }), e.animation ? /* @__PURE__ */ n.createElement(
-    G,
+    )))), m[p])
+  ), A = /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand || o.show ? /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ n.createElement("div", { className: "k-overlay", onClick: U }), e.animation ? /* @__PURE__ */ n.createElement(
+    Q,
     {
       transitionName: o.slide ? "slide-up" : "slide-down",
       onExited: f,
       transitionEnterDuration: typeof l == "object" && Object.keys(l).length > 0 && l.openDuration ? Number(l.openDuration) : Number(l),
       transitionExitDuration: typeof l == "object" && Object.keys(l).length > 0 && l.closeDuration ? Number(l.closeDuration) : Number(l),
-      animationEnteringStyle: e.animationStyles || N.current,
-      animationEnteredStyle: e.animationStyles || N.current,
-      animationExitingStyle: e.animationStyles || N.current,
+      animationEnteringStyle: e.animationStyles || y.current,
+      animationEnteredStyle: e.animationStyles || y.current,
+      animationExitingStyle: e.animationStyles || y.current,
       exit: !0,
       enter: !0,
       appear: !1
     },
-    A
-  ) : A) : null);
-}), S = {
+    I
+  ) : /* @__PURE__ */ n.createElement("div", { className: "k-animation-container k-animation-container-shown" }, /* @__PURE__ */ n.createElement("div", { className: "k-child-animation-container", style: e.animationStyles || y.current }, I))) : null);
+  return e.appendTo && Z ? J.createPortal(A, e.appendTo) : A;
+}), g = {
   navigatable: !0,
   navigatableElements: [],
   position: "bottom"
 };
-j.propTypes = {
-  items: m.array,
-  subTitle: m.node,
-  title: m.node,
-  navigatable: m.bool,
-  navigatableElements: m.array,
-  position: m.oneOf(["top", "bottom", "left", "right", "fullscreen"])
+_.propTypes = {
+  items: r.array,
+  subTitle: r.node,
+  title: r.node,
+  navigatable: r.bool,
+  navigatableElements: r.array,
+  position: r.oneOf(["top", "bottom", "left", "right", "fullscreen"]),
+  appendTo: r.any
 };
-j.displayName = "KendoReactActionSheet";
+_.displayName = "KendoReactActionSheet";
 export {
-  j as ActionSheet,
-  S as actionSheetDefaultProps
+  _ as ActionSheet,
+  g as actionSheetDefaultProps
 };

package/actionsheet/ActionSheetItem.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 s=require("react"),c=require("prop-types"),o=require("@progress/kendo-react-common");function m(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,a.get?a:{enumerable:!0,get:()=>e[i]})}}return n.default=e,Object.freeze(n)}const t=m(s),l=e=>{const n=t.useRef(null),i=t.useCallback(a=>{e.onClick&&e.onClick.call(void 0,{syntheticEvent:a,item:e.item,title:e.title})},[e.item,e.title,e.onClick]);return t.useEffect(()=>{n.current&&e.focused&&n.current.focus()},[e.focused]),t.createElement("span",{style:e.style,tabIndex:e.tabIndex,className:o.classNames("k-actionsheet-item","k-cursor-pointer",e.disabled&&"k-disabled",e.className),ref:n,role:"button","aria-disabled":e.disabled,onClick:i},t.createElement("span",{className:"k-actionsheet-action"},e.icon&&t.createElement("span",{className:"k-icon-wrap"},e.icon),(e.title||e.description)&&t.createElement("span",{className:"k-actionsheet-item-text"},e.title&&t.createElement("span",{className:"k-actionsheet-item-title"},e.title),e.description&&t.createElement("span",{className:"k-actionsheet-item-description"},e.description))))};l.propTypes={className:c.string,style:c.object,description:c.string,disabled:c.bool,group:c.oneOf(["top","bottom"]),icon:c.element,title:c.string};exports.ActionSheetItem=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),c=require("prop-types"),o=require("@progress/kendo-react-common");function m(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,a.get?a:{enumerable:!0,get:()=>e[i]})}}return n.default=e,Object.freeze(n)}const t=m(s),l=e=>{const n=t.useRef(null),i=t.useCallback(a=>{e.onClick&&e.onClick.call(void 0,{syntheticEvent:a,item:e.item,title:e.title})},[e.item,e.title,e.onClick]);return t.useEffect(()=>{n.current&&e.focused&&n.current.focus()},[e.focused]),t.createElement("span",{style:e.style,tabIndex:e.tabIndex,className:o.classNames("k-actionsheet-item",e.disabled&&"k-disabled",e.className),ref:n,"aria-disabled":e.disabled||void 0,onClick:i},t.createElement("span",{className:"k-actionsheet-action"},e.icon&&t.createElement("span",{className:"k-icon-wrap"},e.icon),(e.title||e.description)&&t.createElement("span",{className:"k-actionsheet-item-text"},e.title&&t.createElement("span",{className:"k-actionsheet-item-title"},e.title),e.description&&t.createElement("span",{className:"k-actionsheet-item-description"},e.description))))};l.propTypes={className:c.string,style:c.object,description:c.string,disabled:c.bool,group:c.oneOf(["top","bottom"]),icon:c.element,title:c.string};exports.ActionSheetItem=l;

package/actionsheet/ActionSheetItem.mjs

@@ -28,13 +28,11 @@ const s = (e) => {
       tabIndex: e.tabIndex,
       className: l(
         "k-actionsheet-item",
-        "k-cursor-pointer",
         e.disabled && "k-disabled",
         e.className
       ),
       ref: a,
-      role: "button",
-      "aria-disabled": e.disabled,
+      "aria-disabled": e.disabled || void 0,
       onClick: c
     },
     /* @__PURE__ */ t.createElement("span", { className: "k-actionsheet-action" }, e.icon && /* @__PURE__ */ t.createElement("span", { className: "k-icon-wrap" }, e.icon), (e.title || e.description) && /* @__PURE__ */ t.createElement("span", { className: "k-actionsheet-item-text" }, e.title && /* @__PURE__ */ t.createElement("span", { className: "k-actionsheet-item-title" }, e.title), e.description && /* @__PURE__ */ t.createElement("span", { className: "k-actionsheet-item-description" }, e.description)))

package/appbar/interfaces/AppBarProps.d.ts

@@ -84,16 +84,10 @@ export interface AppBarProps {
      * Specifies the AppBar theme color ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/appearance)).
      *
      * * The possible values are:
-     * * 'light'
+     * * 'base'
      * * 'primary'
      * * 'secondary'
      * * 'tertiary'
-     * * 'info'
-     * * 'success'
-     * * 'warning'
-     * * 'error'
-     * * 'dark'
-     * * 'inherit'
      * * 'inverse'
      *
      * @default undefined (theme-controlled)
@@ -131,13 +125,7 @@ export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
  * * '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';
+export type AppBarThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'inverse';

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