@progress/kendo-react-layout 14.5.0-develop.7 → 14.5.0-develop.9

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"),k=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=N.navigatableElements,navigatable:f=N.navigatable,position:L=N.position,animationDuration:l=300,prefixActions:g,suffixActions:D,filter:w}=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(y=>y.className.indexOf("k-actionsheet-item")!==-1);if(c&&e.onItemSelect){i.preventDefault();const y=e.items[A.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:i,item:y,title:y&&y.title})}e.animation||h()},U=(t,a,i)=>{e.onClose&&(i.preventDefault(),e.onClose.call(void 0,i)),e.animation||h()},h=()=>{b({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),x=n.useRef({bottom:"0",width:"100%"}),C=n.useRef(void 0),[o,Q]=n.useState({show:!1,slide:!1}),b=t=>{Q(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}),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=>k.FOCUSABLE_ELEMENTS.concat(m).map(A=>`${c} ${A}`)).flat()];v.current=new k.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:k.classNames(`k-actionsheet k-actionsheet-${L}`,e.className),role:"dialog","aria-modal":"true",style:e.style,"aria-hidden":!1,"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||g||D||w)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group"},g&&n.createElement("div",{className:"k-actionsheet-actions"},g),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)),D&&n.createElement("div",{className:"k-actionsheet-actions"},D)),w&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},w)),u[ee.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul",role:"group"},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||x.current,animationEnteredStyle:e.animationStyles||x.current,animationExitingStyle:e.animationStyles||x.current,exit:!0,enter:!0,appear:!1},q):q):null);return e.appendTo&&k.canUseDOM?te.createPortal(j,e.appendTo):j}),N={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=N;

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: x = g.navigatable,
+    position: L = g.position,
     animationDuration: l = 300,
-    prefixActions: y,
+    prefixActions: b,
     suffixActions: v,
     filter: k
-  } = e, L = (t, a, i) => {
+  } = 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) => {
+  }, U = (t) => {
     e.onClose && e.onClose.call(void 0, t), e.animation || f();
   }, w = (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), N = 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 && x) {
       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,24 +96,24 @@ 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(
+  ), y = (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 && y && y.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 || b || v || k) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group" }, b && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, b), /* @__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)), v && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, v)), k && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, k)), m[ee] || /* @__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(
+      K,
       {
         ...t,
         id: a,
@@ -120,8 +121,8 @@ const j = n.forwardRef((e, _) => {
         item: t,
         onClick: w
       }
-    )), 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" }), y && y.map((t, a) => /* @__PURE__ */ n.createElement(
+      K,
       {
         ...t,
         id: a + ((c == null ? void 0 : c.length) || 0),
@@ -129,10 +130,9 @@ const j = n.forwardRef((e, _) => {
         item: t,
         onClick: w
       }
-    )))), 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,
@@ -145,23 +145,25 @@ const j = n.forwardRef((e, _) => {
       enter: !0,
       appear: !1
     },
-    A
-  ) : A) : null);
-}), S = {
+    I
+  ) : 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/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 _=require("react"),l=require("prop-types"),r=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&&r.focusFirstFocusableChild(n.current)},[]),m=o.useCallback(()=>({element:n.current,focus:c}),[c]);o.useImperativeHandle(i,m);const{positionMode:C=d.positionMode,itemFlow:M=d.itemFlow,border:S=d.border,className:k,items:s,item:I,itemRender:w,disabled:f,style:E,id:h,onSelect:b,onKeyDown:p}=e,O=r.useId(),D=r.useDir(n,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(()=>r.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":S,"k-disabled":f},k),[C,y,v,M,S,f,k]),u=o.useCallback((t,a)=>{s&&!s[a].disabled&&b&&r.dispatchEvent(b,t,m(),{itemTarget:s[a],itemIndex:a})},[s,b]),F=o.useCallback((t,a)=>{u(t,a)},[u]),T=o.useCallback((t,a)=>{switch(t.keyCode){case r.Keys.enter:case r.Keys.space:u(t,a),t.preventDefault();break}r.dispatchEvent(p,t,m(),void 0)},[u,p]);return o.createElement("nav",{ref:n,className:R,style:E,id:h||O,dir:D},s&&s.map((t,a)=>o.createElement(j.BottomNavigationItem,{...t,key:a,index:a,id:`${h||O}-${a}`,disabled:f||t.disabled,selected:t.selected,dataItem:t,item:I,render:w,onSelect:F,onKeyDown:T})))}),d={themeColor:void 0,fillMode:void 0,itemFlow:"vertical",positionMode:"fixed",border:!0};g.propTypes={className:l.string,style:l.object,id:l.string,dir:l.string,themeColor:l.oneOf(["base","primary","secondary","tertiary","inverse"]),fillMode:l.oneOf(["solid","flat"]),itemFlow:l.oneOf(["vertical","horizontal"]),border:l.bool,disabled:l.bool,selected:l.number,onSelect:l.func};g.displayName="KendoReactBottomNavigation";exports.BottomNavigation=g;

package/bottomnavigation/BottomNavigation.mjs

@@ -7,10 +7,10 @@
  */
 import * as o from "react";
 import l from "prop-types";
-import { focusFirstFocusableChild as T, useId as B, useDir as _, classNames as $, dispatchEvent as S, Keys as g } from "@progress/kendo-react-common";
+import { focusFirstFocusableChild as T, useId as B, useDir as _, classNames as $, dispatchEvent as S, Keys as I } from "@progress/kendo-react-common";
 import { POSITION_MODE_CLASSES as L, ITEM_FLOW_CLASSES as P } from "./models/utils.mjs";
 import { BottomNavigationItem as A } from "./BottomNavigationItem.mjs";
-const w = o.forwardRef((r, I) => {
+const w = o.forwardRef((a, E) => {
   const s = o.useRef(null), b = o.useCallback(() => {
     s.current && T(s.current);
   }, []), d = o.useCallback(
@@ -20,21 +20,21 @@ const w = o.forwardRef((r, I) => {
     }),
     [b]
   );
-  o.useImperativeHandle(I, d);
+  o.useImperativeHandle(E, d);
   const {
     positionMode: v = i.positionMode,
     itemFlow: C = i.itemFlow,
     border: M = i.border,
-    className: h,
-    items: a,
-    item: E,
-    itemRender: N,
+    className: y,
+    items: r,
+    item: N,
+    itemRender: g,
     disabled: c,
     style: F,
-    id: k,
+    id: h,
     onSelect: m,
-    onKeyDown: y
-  } = r, p = B(), O = _(s, r.dir), f = o.useMemo(() => r.fillMode === null ? null : r.fillMode || i.fillMode, [r.fillMode]), u = o.useMemo(() => r.themeColor || i.themeColor, [r.themeColor]), D = o.useMemo(
+    onKeyDown: k
+  } = a, p = B(), O = _(s, a.dir), f = o.useMemo(() => a.fillMode === null ? null : a.fillMode || i.fillMode, [a.fillMode]), u = o.useMemo(() => a.themeColor || i.themeColor, [a.themeColor]), D = o.useMemo(
     () => $(
       "k-bottom-nav",
       L[v],
@@ -45,17 +45,17 @@ const w = o.forwardRef((r, I) => {
         "k-bottom-nav-border": M,
         "k-disabled": c
       },
-      h
+      y
     ),
-    [v, u, f, C, M, c, h]
+    [v, u, f, C, M, c, y]
   ), n = o.useCallback(
     (e, t) => {
-      a && !a[t].disabled && m && S(m, e, d(), {
-        itemTarget: a[t],
+      r && !r[t].disabled && m && S(m, e, d(), {
+        itemTarget: r[t],
         itemIndex: t
       });
     },
-    [a, m]
+    [r, m]
   ), R = o.useCallback(
     (e, t) => {
       n(e, t);
@@ -64,32 +64,32 @@ const w = o.forwardRef((r, I) => {
   ), K = o.useCallback(
     (e, t) => {
       switch (e.keyCode) {
-        case g.enter:
-        case g.space:
+        case I.enter:
+        case I.space:
           n(e, t), e.preventDefault();
           break;
       }
       S(
-        y,
+        k,
         e,
         d(),
         void 0
       );
     },
-    [n, y]
+    [n, k]
   );
-  return /* @__PURE__ */ o.createElement("nav", { ref: s, className: D, style: F, id: k || p, dir: O }, a && a.map((e, t) => /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ o.createElement("nav", { ref: s, className: D, style: F, id: h || p, dir: O }, r && r.map((e, t) => /* @__PURE__ */ o.createElement(
     A,
     {
       ...e,
       key: t,
       index: t,
-      id: `${k || p}-${t}`,
+      id: `${h || p}-${t}`,
       disabled: c || e.disabled,
       selected: e.selected,
       dataItem: e,
-      item: E,
-      render: N,
+      item: N,
+      render: g,
       onSelect: R,
       onKeyDown: K
     }
@@ -106,18 +106,7 @@ w.propTypes = {
   style: l.object,
   id: l.string,
   dir: l.string,
-  themeColor: l.oneOf([
-    "primary",
-    "secondary",
-    "tertiary",
-    "info",
-    "success",
-    "warning",
-    "error",
-    "dark",
-    "light",
-    "inverse"
-  ]),
+  themeColor: l.oneOf(["base", "primary", "secondary", "tertiary", "inverse"]),
   fillMode: l.oneOf(["solid", "flat"]),
   itemFlow: l.oneOf(["vertical", "horizontal"]),
   border: l.bool,

package/bottomnavigation/BottomNavigationProps.d.ts

@@ -52,15 +52,10 @@ export interface BottomNavigationProps {
      * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)).
      *
      * The possible values are:
+     * * `base` — Applies coloring based on the base theme color.
      * * `primary` — Applies coloring based on the primary theme color.
      * * `secondary` — Applies coloring based on the secondary theme color.
      * * `tertiary` — Applies coloring based on the tertiary theme color.
-     * * `info` — Applies coloring based on the info theme color.
-     * * `success` — Applies coloring based on the success theme color.
-     * * `warning` — Applies coloring based on the warning theme color.
-     * * `error` — Applies coloring based on the error theme color.
-     * * `dark` — Applies coloring based on the dark theme color.
-     * * `light` — Applies coloring based on the light theme color.
      * * `inverse` — Applies coloring based on the inverted theme color.
      *
      * @default undefined (theme-controlled)
@@ -216,15 +211,10 @@ export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
  * * `primary` (Default) — Applies coloring based on the primary theme color.
  * * `secondary` — Applies coloring based on the secondary theme color.
  * * `tertiary` — Applies coloring based on the tertiary theme color.
- * * `info` — Applies coloring based on the info theme color.
- * * `success` — Applies coloring based on the success theme color.
- * * `warning` — Applies coloring based on the warning theme color.
- * * `error` — Applies coloring based on the error theme color.
- * * `dark` — Applies coloring based on the dark theme color.
- * * `light` — Applies coloring based on the light theme color.
+ * * `base` — Applies coloring based on the base theme color.
  * * `inverse` — Applies coloring based on the inverted theme color.
  */
-export type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type BottomNavigationThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | '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)).

package/card/Avatar.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 i=require("react"),o=require("prop-types"),t=require("@progress/kendo-react-common"),d=require("./interfaces/Enums.js");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(e,a,n.get?n:{enumerable:!0,get:()=>r[a]})}}return e.default=r,Object.freeze(e)}const s=c(i),l=r=>{const e={type:d.avatarType.TEXT,size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0,...r};return s.createElement("div",{style:e.style,className:t.classNames("k-avatar",{"k-avatar-bordered":e.border,[`k-rounded-${t.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-avatar-${t.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-avatar-${e.fillMode}`]:e.fillMode,[`k-avatar-${e.themeColor}`]:!!e.themeColor},e.className)},s.createElement("span",{className:`k-avatar-${e.type}`},e.children))};l.propTypes={className:o.string,type:o.oneOf(["text","image","icon"]),size:o.oneOf(["small","medium","large"]),rounded:o.oneOf(["small","medium","large","full","none"]),fillMode:o.oneOf(["solid","outline"]),themeColor:o.oneOf(["base","dark","error","info","inverse","light","primary","secondary","success","tertiary","warning"])};exports.Avatar=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),a=require("prop-types"),r=require("@progress/kendo-react-common"),i=require("./interfaces/Enums.js");function c(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const s=c(d),l=o=>{const e={type:i.avatarType.TEXT,size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0,...o};return s.createElement("div",{style:e.style,className:r.classNames("k-avatar",{"k-avatar-bordered":e.border,[`k-rounded-${r.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-avatar-${r.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-avatar-${e.fillMode}`]:e.fillMode,[`k-avatar-${e.themeColor}`]:!!e.themeColor},e.className)},s.createElement("span",{className:`k-avatar-${e.type}`},e.children))};l.propTypes={className:a.string,type:a.oneOf(["text","image","icon"]),size:a.oneOf(["small","medium","large"]),rounded:a.oneOf(["small","medium","large","full","none"]),fillMode:a.oneOf(["solid","outline"]),themeColor:a.oneOf(["base","primary","secondary","tertiary"])};exports.Avatar=l;

package/card/Avatar.mjs

@@ -5,58 +5,46 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
+import * as a from "react";
 import o from "prop-types";
-import { classNames as t, kendoThemeMaps as a } from "@progress/kendo-react-common";
-import { avatarType as d } from "./interfaces/Enums.mjs";
-const i = (s) => {
+import { classNames as d, kendoThemeMaps as r } from "@progress/kendo-react-common";
+import { avatarType as l } from "./interfaces/Enums.mjs";
+const s = (t) => {
   const e = {
-    type: d.TEXT,
+    type: l.TEXT,
     size: void 0,
     rounded: void 0,
     fillMode: void 0,
     themeColor: void 0,
-    ...s
+    ...t
   };
-  return /* @__PURE__ */ r.createElement(
+  return /* @__PURE__ */ a.createElement(
     "div",
     {
       style: e.style,
-      className: t(
+      className: d(
         "k-avatar",
         {
           "k-avatar-bordered": e.border,
-          [`k-rounded-${a.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          [`k-avatar-${a.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-rounded-${r.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          [`k-avatar-${r.sizeMap[e.size] || e.size}`]: e.size,
           [`k-avatar-${e.fillMode}`]: e.fillMode,
           [`k-avatar-${e.themeColor}`]: !!e.themeColor
         },
         e.className
       )
     },
-    /* @__PURE__ */ r.createElement("span", { className: `k-avatar-${e.type}` }, e.children)
+    /* @__PURE__ */ a.createElement("span", { className: `k-avatar-${e.type}` }, e.children)
   );
 };
-i.propTypes = {
+s.propTypes = {
   className: o.string,
   type: o.oneOf(["text", "image", "icon"]),
   size: o.oneOf(["small", "medium", "large"]),
   rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
   fillMode: o.oneOf(["solid", "outline"]),
-  themeColor: o.oneOf([
-    "base",
-    "dark",
-    "error",
-    "info",
-    "inverse",
-    "light",
-    "primary",
-    "secondary",
-    "success",
-    "tertiary",
-    "warning"
-  ])
+  themeColor: o.oneOf(["base", "primary", "secondary", "tertiary"])
 };
 export {
-  i as Avatar
+  s as Avatar
 };

package/card/interfaces/AvatarProps.d.ts

@@ -114,13 +114,6 @@ export interface AvatarProps {
      * - primary
      * - secondary
      * - tertiary
-     * - info
-     * - success
-     * - error
-     * - warning
-     * - dark
-     * - light
-     * - inverse
      *
      * @default undefined (theme-controlled)
      *
@@ -129,7 +122,7 @@ export interface AvatarProps {
      * <Avatar themeColor="primary">AB</Avatar>
      * ```
      */
-    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary';
     /**
      * Sets the URL for the image when type is 'image'.
      *