@progress/kendo-react-dropdowns 7.2.0-develop.7 → 7.2.0-develop.9

package/index.mjs

@@ -5,14 +5,14 @@
 "use client";
 import * as o from "react";
 import l from "prop-types";
-import { IconWrap as Ce, classNames as B, Keys as g, svgIconPropType as gs, createPropsContext as Ke, withIdHOC as Et, withPropsContext as Dt, validatePackage as $e, canUseDOM as Me, getTabIndex as Gt, kendoThemeMaps as Ge, getActiveElement as Es, useCustomComponent as Ds, usePropsContext as Ut, getScrollbarWidth as Fs, getter as Ct, setScrollbarWidth as Ts, useId as ms, useRtl as vs, noop as Fe, mapTree as Ms, extendDataItem as Ns } from "@progress/kendo-react-common";
+import { IconWrap as Ce, classNames as B, Keys as g, svgIconPropType as fs, createPropsContext as Be, withIdHOC as Et, withPropsContext as Dt, validatePackage as $e, canUseDOM as Me, getTabIndex as Gt, kendoThemeMaps as Ge, getActiveElement as ws, useCustomComponent as Es, usePropsContext as Ut, getScrollbarWidth as Ds, getter as Ct, setScrollbarWidth as Fs, useId as gs, useRtl as ms, noop as Fe, mapTree as Ts, extendDataItem as Ms } from "@progress/kendo-react-common";
 import { FloatingLabel as Ue } from "@progress/kendo-react-labels";
-import { searchIcon as Os, caretAltDownIcon as jt, xIcon as lt, plusIcon as Ps } from "@progress/kendo-svg-icons";
-import { Popup as Yt, PopupPropsContext as _s } from "@progress/kendo-react-popup";
-import { TextBox as Rs, InputPrefix as Vs } from "@progress/kendo-react-inputs";
-import { provideLocalizationService as We, registerForLocalization as bs, useLocalization as ys } from "@progress/kendo-react-intl";
-import { Button as Te, Chip as Bs } from "@progress/kendo-react-buttons";
-import { ActionSheet as Jt, ActionSheetHeader as Qt, ActionSheetContent as rt, ActionSheetFooter as Ks } from "@progress/kendo-react-layout";
+import { searchIcon as Ns, caretAltDownIcon as jt, xIcon as at, plusIcon as Os } from "@progress/kendo-svg-icons";
+import { Popup as Yt, PopupPropsContext as Ps } from "@progress/kendo-react-popup";
+import { TextBox as _s, InputPrefix as Rs } from "@progress/kendo-react-inputs";
+import { provideLocalizationService as We, registerForLocalization as vs, useLocalization as bs } from "@progress/kendo-react-intl";
+import { Button as Te, Chip as Vs } from "@progress/kendo-react-buttons";
+import { ActionSheet as Jt, ActionSheetHeader as Qt, ActionSheetContent as lt, ActionSheetFooter as Bs } from "@progress/kendo-react-layout";
 import { TreeView as kt } from "@progress/kendo-react-treeview";
 class Ft extends o.Component {
   render() {
@@ -40,7 +40,7 @@ const Xt = o.forwardRef((i, t) => {
     t,
     () => e.current
   ), /* @__PURE__ */ o.createElement("div", { className: "k-list-filter" }, /* @__PURE__ */ o.createElement(
-    Rs,
+    _s,
     {
       ...i,
       ref: e,
@@ -52,7 +52,7 @@ const Xt = o.forwardRef((i, t) => {
       size: i.size,
       fillMode: i.fillMode,
       rounded: i.rounded,
-      prefix: () => /* @__PURE__ */ o.createElement(Vs, null, /* @__PURE__ */ o.createElement(Ce, { name: "search", icon: Os }))
+      prefix: () => /* @__PURE__ */ o.createElement(Rs, null, /* @__PURE__ */ o.createElement(Ce, { name: "search", icon: Ns }))
     }
   ));
 });
@@ -66,7 +66,7 @@ Xt.propTypes = {
   fillMode: l.oneOf([null, "solid", "flat", "outline"])
 };
 Xt.displayName = "KendoReactListFilter";
-const Ve = Xt;
+const Re = Xt;
 class qe extends o.Component {
   render() {
     const {
@@ -77,27 +77,27 @@ class qe extends o.Component {
     return s !== void 0 ? s.call(void 0, n, this.props) : n;
   }
 }
-const U = (i) => i != null, Ls = (i, t) => {
+const U = (i) => i != null, Ks = (i, t) => {
   for (let e = 0; e < i.length; e++)
     if (i.charAt(e) !== t)
       return !1;
   return !0;
-}, zs = (i, t, e) => {
+}, Ls = (i, t, e) => {
   let s = i;
   return e && (s = [e].concat(s)), s.slice(t).concat(s.slice(0, t));
-}, as = (i, t, e) => {
+}, os = (i, t, e) => {
   if (!U(i))
     return !1;
   let s = String(i);
   return e && (s = s.toLowerCase()), s.indexOf(t) === 0;
-}, Hs = (i, t, e, s, n) => {
+}, zs = (i, t, e, s, n) => {
   const a = i.offsetHeight, p = t.children.item(e), c = p.offsetTop + (n ? s - i.scrollTop : 0), d = p.offsetHeight;
   if (n) {
     let r = 0;
     c + d > a ? r = c + d - a : c < 0 && (r = c), r !== 0 ? i.scrollTop += r : i.scrollTop === 0 && s !== 0 && (i.scrollTop = s);
   } else
     c + d > a + i.scrollTop ? i.scrollTop = c + d - a : c < i.scrollTop && (i.scrollTop -= i.scrollTop - c);
-}, Be = (i, t, e) => {
+}, Ve = (i, t, e) => {
   let s = -1;
   if (t) {
     t = t.toLowerCase();
@@ -127,7 +127,7 @@ const U = (i) => i != null, Ls = (i, t) => {
     return;
   const s = i.findIndex((n) => V(n, t) === e);
   return i[s];
-}, As = (i = [], t = [], e) => {
+}, Hs = (i = [], t = [], e) => {
   if (i === t)
     return !0;
   if (i.length !== t.length)
@@ -141,26 +141,26 @@ const U = (i) => i != null, Ls = (i, t) => {
     const n = i.findIndex((a) => R(a, s, e));
     n !== -1 && i.splice(n, 1);
   });
-}, R = (i, t, e) => i === t || U(i) === U(t) && V(i, e) === V(t, e), ls = (i, t, e) => {
+}, R = (i, t, e) => i === t || U(i) === U(t) && V(i, e) === V(t, e), as = (i, t, e) => {
   if (t) {
     const s = Lt(i, t, e, !0);
-    return s !== -1 ? i[s] : i[Be(i, t, e)];
+    return s !== -1 ? i[s] : i[Ve(i, t, e)];
   }
   return i[0];
-}, Ws = (i, t = [], e) => {
+}, As = (i, t = [], e) => {
   let s = "";
   if (i) {
-    const n = t[Be(t, i, e)];
+    const n = t[Ve(t, i, e)];
     if (n) {
       const a = V(n, e);
       i.toLowerCase() !== a.toLowerCase() && (s = a.substring(i.length));
     }
   }
   return s;
-}, qs = (i) => {
+}, Ws = (i) => {
   i.target.nodeName !== "INPUT" && i.preventDefault();
-}, St = (i, t, e) => !!i != !!t || i.text !== t.text ? !1 : i === t || As(i.data, t.data, e), $s = (i) => i.preventDefault();
-class Gs extends o.Component {
+}, St = (i, t, e) => !!i != !!t || i.text !== t.text ? !1 : i === t || Hs(i.data, t.data, e), qs = (i) => i.preventDefault();
+class $s extends o.Component {
   render() {
     const {
       selected: t,
@@ -171,7 +171,7 @@ class Gs extends o.Component {
       "div",
       {
         onClick: this.props.onClick,
-        onMouseDown: $s,
+        onMouseDown: qs,
         style: { position: "unset" },
         className: B("k-list-optionlabel", {
           "k-selected": t
@@ -181,7 +181,7 @@ class Gs extends o.Component {
     );
   }
 }
-class Us extends o.Component {
+class Gs extends o.Component {
   constructor() {
     super(...arguments), this.handleClick = (t) => this.props.onClick(this.props.index, t);
   }
@@ -216,7 +216,7 @@ class Us extends o.Component {
     return c !== void 0 ? c.call(void 0, d, this.props) : d;
   }
 }
-class js extends o.Component {
+class Us extends o.Component {
   render() {
     const {
       group: t,
@@ -236,14 +236,14 @@ class js extends o.Component {
     return s !== void 0 ? s.call(void 0, a, this.props) : a;
   }
 }
-const ve = "dropdowns.nodata", nt = "dropdowns.clear", zt = "dropdowns.comboArrowBtnAriaLabelExpand", Ht = "dropdowns.comboArrowBtnAriaLabelCollapse", At = "dropdowns.dropDownListArrowBtnAriaLabel", ot = "dropdowns.apply", at = "dropdowns.cancel", ce = {
-  [nt]: "clear",
+const ve = "dropdowns.nodata", it = "dropdowns.clear", zt = "dropdowns.comboArrowBtnAriaLabelExpand", Ht = "dropdowns.comboArrowBtnAriaLabelCollapse", At = "dropdowns.dropDownListArrowBtnAriaLabel", nt = "dropdowns.apply", ot = "dropdowns.cancel", ce = {
+  [it]: "clear",
   [ve]: "NO DATA FOUND.",
   [zt]: "expand combobox",
   [Ht]: "collapse combobox",
   [At]: "select",
-  [ot]: "Apply",
-  [at]: "Cancel"
+  [nt]: "Apply",
+  [ot]: "Cancel"
 };
 class je extends o.Component {
   renderItems() {
@@ -266,10 +266,10 @@ class je extends o.Component {
     let w = 0;
     return f.map((k, D) => {
       const O = c + D, N = c + D + w, _ = k.disabled ? !1 : h && (!b && R(k, u, e) || b && u.findIndex((E) => R(E, k, e)) !== -1);
-      let S, T, C;
-      return D > 0 && s !== void 0 && (T = V(k, s), C = V(f[D - 1], s), T && C && T !== C && (S = T)), S !== void 0 && n === "modern" && (w += 1), [
+      let S, F, C;
+      return D > 0 && s !== void 0 && (F = V(k, s), C = V(f[D - 1], s), F && C && F !== C && (S = F)), S !== void 0 && n === "modern" && (w += 1), [
         S !== void 0 && n === "modern" && /* @__PURE__ */ o.createElement(
-          js,
+          Us,
           {
             id: `option-${p}-${N}`,
             virtual: d,
@@ -280,7 +280,7 @@ class je extends o.Component {
           }
         ),
         /* @__PURE__ */ o.createElement(
-          Us,
+          Gs,
           {
             id: `option-${p}-${S !== void 0 && n === "modern" ? N + 1 : N}`,
             virtual: d,
@@ -344,9 +344,9 @@ class je extends o.Component {
     ) : this.renderNoValueElement(t);
   }
 }
-bs(je);
-const Ys = 1533915;
-class Js {
+vs(je);
+const js = 1533915;
+class Ys {
   constructor() {
     this.container = null, this.scrollElement = null, this.list = null, this.containerHeight = 0, this.skip = 0, this.total = 0, this.enabled = !1, this.pageSize = 0, this.itemHeight = 0, this.PageChange = null, this.prevScrollPos = 0, this.listTranslate = 0, this.scrollSyncing = !1, this.scrollerRef = (t) => {
       const e = this;
@@ -354,7 +354,7 @@ class Js {
     }, this.calcScrollElementHeight = () => {
       this.scrollSyncing = !0;
       let t = !1;
-      this.itemHeight = this.list ? this.list.children[0].offsetHeight : this.itemHeight, this.containerHeight = Math.min(Ys, this.itemHeight * this.total);
+      this.itemHeight = this.list ? this.list.children[0].offsetHeight : this.itemHeight, this.containerHeight = Math.min(js, this.itemHeight * this.total);
       const e = this.containerHeight;
       return this.scrollElement && (t = this.scrollElement.style.height !== e + "px", t && (this.scrollElement.style.height = e + "px")), this.scrollSyncing = !1, t;
     }, this.scrollHandler = this.scrollHandler.bind(this);
@@ -410,7 +410,7 @@ class Js {
     return t = Math.max(0, t), t = Math.min(this.containerHeight, t), t;
   }
 }
-class Qs {
+class Js {
   navigate(t) {
     const e = t.keyCode;
     if (e === g.up || e === g.left)
@@ -428,7 +428,7 @@ class Qs {
 }
 const Zt = class {
   constructor(i) {
-    this.wrapper = null, this.list = null, this.vs = new Js(), this.navigation = new Qs(), this.handleItemClick = (t, e) => {
+    this.wrapper = null, this.list = null, this.vs = new Ys(), this.navigation = new Js(), this.handleItemClick = (t, e) => {
       const s = this.initState();
       s.syntheticEvent = e, e.stopPropagation(), this.component.handleItemSelect(t, s), this.togglePopup(s), this.applyState(s);
     }, this.handleFocus = (t) => {
@@ -499,7 +499,7 @@ const Zt = class {
       this.scrollToItem(i, t, !0);
     }, 10), s && i >= 0) {
       const n = this.vs, a = n.container || s.parentNode, p = t !== void 0 ? t : n.enabled;
-      Hs(a, s, i, n.translate, p);
+      zs(a, s, i, n.translate, p);
     }
   }
   initState() {
@@ -610,10 +610,10 @@ const Ye = {
   name: "@progress/kendo-react-dropdowns",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1708335226,
+  publishDate: 1708420936,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
-}, wt = 500, we = 768, Xs = "Please select a value from the list!", { sizeMap: Kt, roundedMap: Zs } = Ge, Wt = class extends o.Component {
+}, wt = 500, Ee = 768, Qs = "Please select a value from the list!", { sizeMap: Kt, roundedMap: Xs } = Ge, Wt = class extends o.Component {
   constructor(i) {
     super(i), this.state = {}, this._element = null, this.base = new oe(this), this.searchState = { word: "", last: "" }, this._select = null, this._skipFocusEvent = !1, this._filterInput = null, this._navigated = !1, this._lastKeypressIsFilter = !1, this.itemHeight = 0, this.focus = () => {
       this.base.wrapper && this.base.wrapper.focus();
@@ -645,18 +645,16 @@ const Ye = {
         dir: s !== void 0 ? s : r.dirCalculated,
         width: f,
         popupSettings: {
+          ...h,
           popupClass: B(
             h.popupClass,
             "k-list-container",
             "k-dropdownlist-popup"
           ),
-          className: h.className,
-          animate: h.animate,
-          anchor: this.element,
+          anchor: h.anchor || this.element,
           show: u,
           onOpen: this.onPopupOpened,
-          onClose: this.onPopupClosed,
-          appendTo: h.appendTo
+          onClose: this.onPopupClosed
         },
         itemsCount: [n.length]
       };
@@ -733,7 +731,7 @@ const Ye = {
     }, this.renderListFilter = () => {
       const t = this.props.filter !== void 0 ? this.props.filter : this.state.text;
       return this.props.filterable && /* @__PURE__ */ o.createElement(
-        Ve,
+        Re,
         {
           value: t,
           ref: (e) => this._filterInput = e && e.element,
@@ -747,7 +745,7 @@ const Ye = {
     }, this.renderDefaultItem = () => {
       const { textField: t, defaultItem: e, dataItemKey: s } = this.props;
       return e !== void 0 && /* @__PURE__ */ o.createElement(
-        Gs,
+        $s,
         {
           defaultItem: e,
           textField: t,
@@ -761,13 +759,13 @@ const Ye = {
     }, this.selectNext = (t) => {
       const { data: e = [], dataItemKey: s } = this.props;
       let n = e.map((k, D) => ({ item: k, itemIndex: D }));
-      const a = this.searchState.word, p = this.searchState.last, c = Ls(a, p);
+      const a = this.searchState.word, p = this.searchState.last, c = Ks(a, p);
       let d = n.length, r = Math.max(0, e.findIndex((k) => R(k, this.value, s))), h;
-      this.props.defaultItem && (h = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += c ? 1 : 0, n = zs(n, r, h);
+      this.props.defaultItem && (h = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += c ? 1 : 0, n = Ls(n, r, h);
       let u, f, m, v = 0;
       const { textField: b, ignoreCase: w } = this.props;
       for (; v < d; v++)
-        if (u = V(n[v].item, b), f = c && as(u, p, w), m = as(u, a, w), f || m) {
+        if (u = V(n[v].item, b), f = c && os(u, p, w), m = os(u, a, w), f || m) {
           v = n[v].itemIndex;
           break;
         }
@@ -788,7 +786,7 @@ const Ye = {
         groupField: r = "",
         textField: h,
         skipDisabledItems: u = !0
-      } = this.props, f = this.value, m = e.findIndex((T) => R(T, f, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === g.home || b === g.end, k = b === g.up || b === g.down, D = !v && (t.altKey && b === g.down || b === g.enter || b === g.space), O = v && (t.altKey && b === g.up || b === g.esc), N = p && (b === g.left || b === g.right), _ = k || N && !s || w, S = this.base.initState();
+      } = this.props, f = this.value, m = e.findIndex((F) => R(F, f, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === g.home || b === g.end, k = b === g.up || b === g.down, D = !v && (t.altKey && b === g.down || b === g.enter || b === g.space), O = v && (t.altKey && b === g.up || b === g.esc), N = p && (b === g.left || b === g.right), _ = k || N && !s || w, S = this.base.initState();
       if (S.syntheticEvent = t, !n) {
         if (w && this.base.vs.enabled)
           b === g.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[0], S) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(S, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[e.length - 1], S);
@@ -797,8 +795,8 @@ const Ye = {
         else if (v && b === g.pageDown)
           this.base.scrollPopupByPageSize(1);
         else if (v && b === g.enter) {
-          const T = this.getFocusedIndex();
-          this.haveFocusedItemAndDataNotEmpty(e, T) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(T, S), this.base.togglePopup(S), t.preventDefault();
+          const F = this.getFocusedIndex();
+          this.haveFocusedItemAndDataNotEmpty(e, F) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(F, S), this.base.togglePopup(S), t.preventDefault();
         } else if (D || O)
           O && this.resetValueIfDisabledItem(), this.base.togglePopup(S), t.preventDefault();
         else if (_) {
@@ -806,56 +804,56 @@ const Ye = {
             if (!u && v)
               this.onNavigate(S, b);
             else {
-              let T;
+              let F;
               if (b === g.down || b === g.right) {
                 const C = e.slice(m + 1).find((E) => !E.disabled && E[h]);
-                T = C && e.findIndex((E) => E[h] === C[h]);
+                F = C && e.findIndex((E) => E[h] === C[h]);
               } else if (b === g.up || b === g.left) {
                 let C;
                 if (m === 0 && a)
-                  T = -1;
+                  F = -1;
                 else if (m === -1)
-                  C = e, T = e.findIndex((E) => !E.disabled && E[h]);
+                  C = e, F = e.findIndex((E) => !E.disabled && E[h]);
                 else {
                   C = e.slice(0, m);
                   let E = C.pop();
                   for (; E && E.disabled; )
                     E = C.pop();
-                  T = E && e.findIndex((M) => M[h] === E[h]);
+                  F = E && e.findIndex((M) => M[h] === E[h]);
                 }
               }
-              if (T !== void 0) {
-                const C = T - m;
+              if (F !== void 0) {
+                const C = F - m;
                 this.onNavigate(S, b, C);
               } else
-                T === void 0 && e.findIndex((C) => C[h] === f[h]) === e.length - 1 && this.onNavigate(S, b);
+                F === void 0 && e.findIndex((C) => C[h] === f[h]) === e.length - 1 && this.onNavigate(S, b);
             }
           else if (!u && v || w)
             this.onNavigate(S, b);
           else if (h) {
-            let T;
+            let F;
             if (b === g.down || b === g.right) {
               const C = e.slice(m + 1).find((E) => !E.disabled && E[h]);
-              T = C && e.findIndex((E) => E[h] === C[h]);
+              F = C && e.findIndex((E) => E[h] === C[h]);
             } else if (b === g.up || b === g.left) {
               let C;
               if (m === 0 && a)
-                T = -1;
+                F = -1;
               else if (m === -1)
-                C = e, T = e.find((E) => !E.disabled && E[h]);
+                C = e, F = e.find((E) => !E.disabled && E[h]);
               else {
                 C = e.slice(0, m);
                 let E = C.pop();
                 for (; E && E.disabled; )
                   E = C.pop();
-                T = E && e.findIndex((M) => M[h] === E[h]);
+                F = E && e.findIndex((M) => M[h] === E[h]);
               }
             }
-            if (T !== void 0) {
-              const C = T - m;
+            if (F !== void 0) {
+              const C = F - m;
               this.onNavigate(S, b, C);
             } else
-              T === void 0 && e.findIndex((C) => C[h] === f[h]) === e.length - 1 && this.onNavigate(S, b);
+              F === void 0 && e.findIndex((C) => C[h] === f[h]) === e.length - 1 && this.onNavigate(S, b);
           } else
             this.onNavigate(S, b);
           t.preventDefault();
@@ -869,7 +867,7 @@ const Ye = {
     }, this.handleBlur = (t) => {
       if (this._skipFocusEvent || !this.state.focused)
         return;
-      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: s } = this.props, { windowWidth: n = 0 } = this.state, a = n <= we && s, p = this.base.initState();
+      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: s } = this.props, { windowWidth: n = 0 } = this.state, a = n <= Ee && s, p = this.base.initState();
       p.syntheticEvent = t, p.data.focused = !1, p.events.push({ type: "onBlur" }), e && this.resetValueIfDisabledItem(), e && !a && this.base.togglePopup(p), this.applyState(p);
     }, this.handleDefaultItemClick = (t) => {
       const e = this.base.initState();
@@ -902,7 +900,7 @@ const Ye = {
       );
     }, this.setValidity = () => {
       this._select && this._select.setCustomValidity && this._select.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Xs
+        this.validity.valid ? "" : this.props.validationMessage || Qs
       );
     }, $e(Ye);
   }
@@ -970,9 +968,7 @@ const Ye = {
    */
   componentDidUpdate(i, t) {
     var u;
-    const { dataItemKey: e, virtual: s, groupField: n = "", textField: a } = this.props;
-    let { data: p = [] } = this.props;
-    const c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, h = !r && d;
+    const { dataItemKey: e, virtual: s, groupField: n = "", textField: a } = this.props, { data: p = [] } = this.props, c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, h = !r && d;
     if (this.base.getPopupSettings().animate || h && this.onPopupOpened(), s && s.total !== c)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
@@ -1000,7 +996,7 @@ const Ye = {
    * @hidden
    */
   render() {
-    const i = We(this).toLanguageString(At, ce[At]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, m = V(f, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, k = h <= we && r;
+    const i = We(this).toLanguageString(At, ce[At]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, m = V(f, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, k = h <= Ee && r;
     w.enabled = a !== void 0, a !== void 0 && (b.vs.skip = a.skip, b.vs.total = a.total, b.vs.pageSize = a.pageSize);
     const {
       dataItemKey: D,
@@ -1008,9 +1004,10 @@ const Ye = {
       disabled: N,
       tabIndex: _,
       loading: S,
-      iconClassName: T,
-      valueRender: C
-    } = this.props, { focused: E } = this.state, M = O.findIndex((Y) => R(Y, f, D)), H = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)), J = C !== void 0 ? C.call(void 0, H, f) : H, j = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+      iconClassName: F,
+      svgIcon: C,
+      valueRender: E
+    } = this.props, { focused: M } = this.state, A = O.findIndex((K) => R(K, f, D)), j = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)), Y = E !== void 0 ? E.call(void 0, j, f) : j, Z = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         ref: this.componentRef,
@@ -1019,9 +1016,9 @@ const Ye = {
           e,
           {
             [`k-picker-${Kt[p] || p}`]: p,
-            [`k-rounded-${Zs[c] || c}`]: c,
+            [`k-rounded-${Xs[c] || c}`]: c,
             [`k-picker-${d}`]: d,
-            "k-focus": E,
+            "k-focus": M,
             "k-disabled": N,
             "k-invalid": !v,
             "k-loading": S,
@@ -1030,8 +1027,8 @@ const Ye = {
         ),
         style: s ? { ...t, width: void 0 } : t,
         dir: n,
-        onMouseDown: u ? (Y) => {
-          Y.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), Y.preventDefault());
+        onMouseDown: u ? (K) => {
+          K.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), K.preventDefault());
         } : void 0,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
@@ -1046,14 +1043,14 @@ const Ye = {
         "aria-haspopup": "listbox",
         "aria-expanded": u || !1,
         "aria-owns": this._listboxId,
-        "aria-activedescendant": u ? "option-" + this._guid + "-" + (M + (a ? a.skip : 0)) : void 0,
+        "aria-activedescendant": u ? "option-" + this._guid + "-" + (A + (a ? a.skip : 0)) : void 0,
         "aria-label": this.props.ariaLabel || this.props.label,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy || this._inputId,
         id: this.props.id,
         title: this.props.title
       },
-      J,
+      Y,
       S && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
       /* @__PURE__ */ o.createElement(
         Te,
@@ -1064,13 +1061,13 @@ const Ye = {
           "aria-hidden": !0,
           size: p,
           fillMode: d,
-          iconClass: T,
+          iconClass: F,
           className: "k-input-button",
           rounded: null,
           themeColor: "base",
-          icon: T ? void 0 : "caret-alt-down",
-          svgIcon: T ? this.props.svgIcon : jt,
-          onMouseDown: (Y) => this.state.focused && Y.preventDefault()
+          icon: F ? void 0 : "caret-alt-down",
+          svgIcon: C || jt,
+          onMouseDown: (K) => this.state.focused && K.preventDefault()
         }
       ),
       this.dummySelect(f),
@@ -1084,9 +1081,9 @@ const Ye = {
         editorValid: v,
         editorDisabled: this.props.disabled,
         style: { width: t ? t.width : void 0 },
-        children: j
+        children: Z
       }
-    ) : j;
+    ) : Z;
   }
   /**
    * @hidden
@@ -1117,7 +1114,7 @@ const Ye = {
       className: i <= wt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
     let { group: u } = this.state;
-    return u === void 0 && a !== void 0 && (u = V(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Jt, { ...h }, /* @__PURE__ */ o.createElement(Qt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
+    return u === void 0 && a !== void 0 && (u = V(d[0], a)), /* @__PURE__ */ o.createElement(Jt, { ...h }, /* @__PURE__ */ o.createElement(Qt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
       Te,
       {
         tabIndex: 0,
@@ -1127,9 +1124,9 @@ const Ye = {
         fillMode: "flat",
         onClick: this.handleWrapperClick,
         icon: "x",
-        svgIcon: lt
+        svgIcon: at
       }
-    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
+    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
       "div",
       {
         className: B(
@@ -1143,7 +1140,7 @@ const Ye = {
       this.renderDefaultItem(),
       !c && u && d.length !== 0 && /* @__PURE__ */ o.createElement(qe, { group: u, groupMode: "modern", render: p }),
       this.renderList()
-    ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))));
+    ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e)));
   }
   getFocusedIndex() {
     const i = this.value, {
@@ -1151,7 +1148,7 @@ const Ye = {
       textField: e,
       dataItemKey: s,
       virtual: n = { skip: 0 },
-      focusedItemIndex: a = Be,
+      focusedItemIndex: a = Ve,
       filterable: p,
       skipDisabledItems: c = !0
     } = this.props, d = this.props.filter ? this.props.filter : this.state.text;
@@ -1167,7 +1164,7 @@ const Ye = {
     this.base.applyState(i), this._valueDuringOnChange = void 0;
   }
   calculateMedia(i) {
-    for (let t of i)
+    for (const t of i)
       this.setState({ windowWidth: t.target.clientWidth });
   }
   resetValueIfDisabledItem() {
@@ -1184,7 +1181,7 @@ Tt.propTypes = {
   delay: l.number,
   ignoreCase: l.bool,
   iconClassName: l.string,
-  svgIcon: gs,
+  svgIcon: fs,
   defaultItem: l.any,
   valueRender: l.func,
   valueMap: l.func,
@@ -1212,11 +1209,11 @@ Tt.defaultProps = {
   fillMode: "solid",
   groupMode: "modern"
 };
-const ei = Ke(), ti = Et(Dt(
-  ei,
+const Zs = Be(), ei = Et(Dt(
+  Zs,
   Tt
 ));
-ti.displayName = "KendoReactDropDownList";
+ei.displayName = "KendoReactDropDownList";
 class es extends o.Component {
   constructor() {
     super(...arguments), this._input = null;
@@ -1228,7 +1225,7 @@ class es extends o.Component {
     return this._input;
   }
   componentDidUpdate(t) {
-    const e = t.value, s = t.suggestedText, { value: n, suggestedText: a, focused: p } = this.props, c = this.input, d = e !== n || a !== s, r = d && e.startsWith(n) && !(s && a && s.endsWith(a)), h = Es(document);
+    const e = t.value, s = t.suggestedText, { value: n, suggestedText: a, focused: p } = this.props, c = this.input, d = e !== n || a !== s, r = d && e.startsWith(n) && !(s && a && s.endsWith(a)), h = ws(document);
     p && c && h !== c && c.focus(), a && d && !r && c && c.setSelectionRange(n.length - a.length, n.length);
   }
   render() {
@@ -1269,12 +1266,12 @@ class es extends o.Component {
     return n ? n.call(void 0, a) : a;
   }
 }
-class dt extends o.Component {
+class rt extends o.Component {
   constructor() {
     super(...arguments), this.onMouseDown = (t) => t.preventDefault();
   }
   render() {
-    const t = We(this).toLanguageString(nt, ce[nt]);
+    const t = We(this).toLanguageString(it, ce[it]);
     return /* @__PURE__ */ o.createElement(
       "span",
       {
@@ -1286,12 +1283,12 @@ class dt extends o.Component {
         title: t,
         key: "clearbutton"
       },
-      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: lt })
+      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: at })
     );
   }
 }
-bs(dt);
-const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, roundedMap: ni } = Ge, xt = class extends o.Component {
+vs(rt);
+const ti = Es, Ne = ti, si = "Please enter a valid value!", { sizeMap: yt, roundedMap: ii } = Ge, xt = class extends o.Component {
   constructor(i) {
     super(i), this.state = {}, this.base = new oe(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
@@ -1314,7 +1311,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
     }, this.renderMobileListFilter = () => {
       const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = V(this.value, this.props.textField), s = U(t) ? t : e;
       return /* @__PURE__ */ o.createElement(
-        Ve,
+        Re,
         {
           value: s,
           ref: (n) => this._adaptiveFilterInput = n && n.element,
@@ -1434,7 +1431,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
       e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ii
+        this.validity.valid ? "" : this.props.validationMessage || si
       );
     }, $e(Ye);
   }
@@ -1453,7 +1450,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= we && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= Ee && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -1545,19 +1542,20 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
       rounded: v,
       fillMode: b,
       opened: w = this.state.opened,
-      placeholder: k
-    } = this.props, { windowWidth: D = 0 } = this.state, O = !this.validityStyles || this.validity.valid, N = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, p), S = U(N) ? N : _, T = n && (!!S || U(this.value)), E = this.base.vs, M = this.props.id || this._inputId, H = D <= we && c;
-    E.enabled = f !== void 0, f !== void 0 && (E.skip = f.skip, E.total = f.total, E.pageSize = f.pageSize);
-    const [J, j] = Ne(this.props.prefix || o.Fragment), [Y, W] = Ne(this.props.suffix || o.Fragment), ge = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+      placeholder: k,
+      svgIcon: D
+    } = this.props, { windowWidth: O = 0 } = this.state, N = !this.validityStyles || this.validity.valid, _ = this.props.filter !== void 0 ? this.props.filter : this.state.text, S = V(this.value, p), F = U(_) ? _ : S, C = n && (!!F || U(this.value)), M = this.base.vs, A = this.props.id || this._inputId, j = O <= Ee && c;
+    M.enabled = f !== void 0, f !== void 0 && (M.skip = f.skip, M.total = f.total, M.pageSize = f.pageSize);
+    const [Y, Z] = Ne(this.props.prefix || o.Fragment), [K, be] = Ne(this.props.suffix || o.Fragment), X = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         className: B(
           "k-combobox k-input",
           {
             [`k-input-${yt[m] || m}`]: m,
-            [`k-rounded-${ni[v] || v}`]: v,
+            [`k-rounded-${ii[v] || v}`]: v,
             [`k-input-${b}`]: b,
-            "k-invalid": !O,
+            "k-invalid": !N,
             "k-loading": h,
             "k-required": this.required,
             "k-disabled": s
@@ -1568,11 +1566,11 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
         style: a ? { ...r, width: void 0 } : r,
         dir: e
       },
-      this.props.prefix && /* @__PURE__ */ o.createElement(J, { ...j }),
-      this.renderSearchBar(S || "", M, k),
-      T && !h && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.prefix && /* @__PURE__ */ o.createElement(Y, { ...Z }),
+      this.renderSearchBar(F || "", A, k),
+      C && !h && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick, key: "clearbutton" }),
       h && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
-      this.props.suffix && /* @__PURE__ */ o.createElement(Y, { ...W }),
+      this.props.suffix && /* @__PURE__ */ o.createElement(K, { ...be }),
       /* @__PURE__ */ o.createElement(
         Te,
         {
@@ -1580,7 +1578,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
           type: "button",
           "aria-label": w ? t : i,
           icon: u ? void 0 : "caret-alt-down",
-          svgIcon: u ? this.props.svgIcon : jt,
+          svgIcon: D || jt,
           iconClass: u,
           size: m,
           fillMode: b,
@@ -1588,23 +1586,23 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
           themeColor: "base",
           className: "k-input-button",
           onClick: this.toggleBtnClick,
-          onMouseDown: (Z) => Z.preventDefault()
+          onMouseDown: (Q) => Q.preventDefault()
         }
       ),
-      !H && this.renderListContainer()
-    ), H && this.renderAdaptiveListContainer());
+      !j && this.renderListContainer()
+    ), j && this.renderAdaptiveListContainer());
     return a ? /* @__PURE__ */ o.createElement(
       Ue,
       {
         label: a,
-        editorId: M,
-        editorValue: S,
-        editorValid: O,
+        editorId: A,
+        editorValue: F,
+        editorValid: N,
         editorDisabled: s,
         style: { width: r ? r.width : void 0 },
-        children: ge
+        children: X
       }
-    ) : ge;
+    ) : X;
   }
   /** @hidden */
   onNavigate(i, t, e) {
@@ -1639,7 +1637,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
     this.triggerOnChange(r, t), a && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
   applyValueOnRejectSuggestions(i, t) {
-    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = V(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= we;
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = V(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= Ee;
     if (this._suggested = "", i === p || i === "" && !U(p))
       return a && !c && this.base.togglePopup(t), this.applyState(t);
     const d = Lt(e, i, s, !0), r = d !== -1;
@@ -1647,7 +1645,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
     r ? h = e[d] : n && (h = i ? s ? { [s]: i } : i : null), this.triggerOnChange(h, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), a && !c && this.base.togglePopup(t), this.applyState(t);
   }
   selectFocusedItem(i, t) {
-    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: s = [], textField: n, virtual: a = { skip: 0 }, focusedItemIndex: p = Be } = this.props, c = a.skip, d = i === "" && c === 0 ? 0 : p(s, i, n);
+    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: s = [], textField: n, virtual: a = { skip: 0 }, focusedItemIndex: p = Ve } = this.props, c = a.skip, d = i === "" && c === 0 ? 0 : p(s, i, n);
     return d !== -1 ? this.handleItemSelect(d + c, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
   }
   renderAdaptiveListContainer() {
@@ -1673,9 +1671,9 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
         fillMode: "flat",
         onClick: this.toggleBtnClick,
         icon: "x",
-        svgIcon: lt
+        svgIcon: at
       }
-    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: B(
+    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: B(
       {
         "k-list": !c,
         "k-list-lg": !0,
@@ -1693,16 +1691,14 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
       {
         width: m,
         popupSettings: {
-          animate: f.animate,
-          anchor: this.element,
+          ...f,
+          anchor: f.anchor || this.element,
           show: u,
           popupClass: B(
             f.popupClass,
             "k-list-container",
             "k-combobox-popup"
-          ),
-          className: f.className,
-          appendTo: f.appendTo
+          )
         },
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
@@ -1751,7 +1747,7 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
         listRef: (D) => {
           r.list = this.base.list = D, this.itemHeight = 0;
         },
-        wrapperStyle: this.state.windowWidth && this.state.windowWidth > we ? { maxHeight: d.height } : {},
+        wrapperStyle: this.state.windowWidth && this.state.windowWidth > Ee ? { maxHeight: d.height } : {},
         wrapperCssClass: B(
           "k-list-content",
           {
@@ -1821,12 +1817,12 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
     !U(e) && !U(i) || R(e, i, this.props.dataItemKey) || (this.props.value === void 0 && (t.data.value = i), this._valueDuringOnChange = i, t.events.push({ type: "onChange" }));
   }
   getFocusedIndex() {
-    const i = this.value, { data: t = [], textField: e, dataItemKey: s, virtual: n = { skip: 0 }, focusedItemIndex: a = Be, skipDisabledItems: p } = this.props, c = this.props.filter ? this.props.filter : this.state.text;
+    const i = this.value, { data: t = [], textField: e, dataItemKey: s, virtual: n = { skip: 0 }, focusedItemIndex: a = Ve, skipDisabledItems: p } = this.props, c = this.props.filter ? this.props.filter : this.state.text;
     return U(i) && c === void 0 ? t.findIndex((d) => R(d, i, s)) : c ? a(t, c, e) : p && e && !c && n.skip === 0 ? t.findIndex((d) => !d.disabled && d[e]) : n.skip === 0 ? 0 : -1;
   }
   suggestValue(i) {
     const { data: t, textField: e } = this.props;
-    this._suggested = Ws(i, t, e);
+    this._suggested = As(i, t, e);
   }
   applyState(i) {
     this.base.applyState(i), this._valueDuringOnChange = void 0;
@@ -1836,9 +1832,9 @@ const si = Ds, Ne = si, ii = "Please enter a valid value!", { sizeMap: yt, round
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-let ct = xt;
-ct.displayName = "ComboBox";
-ct.propTypes = {
+let dt = xt;
+dt.displayName = "ComboBox";
+dt.propTypes = {
   ...oe.propTypes,
   size: l.oneOf([null, "small", "medium", "large"]),
   rounded: l.oneOf([null, "small", "medium", "large", "full"]),
@@ -1853,7 +1849,7 @@ ct.propTypes = {
   allowCustom: l.bool,
   clearButton: l.bool,
   iconClassName: l.string,
-  svgIcon: gs,
+  svgIcon: fs,
   validationMessage: l.string,
   required: l.bool,
   id: l.string,
@@ -1863,7 +1859,7 @@ ct.propTypes = {
   valueRender: l.func,
   skipDisabledItems: l.bool
 };
-ct.defaultProps = {
+dt.defaultProps = {
   ...oe.defaultProps,
   size: "medium",
   rounded: "medium",
@@ -1877,9 +1873,9 @@ ct.defaultProps = {
   prefix: void 0,
   suffix: void 0
 };
-const oi = Ke(), Is = Et(Dt(oi, ct));
-Is.displayName = "KendoReactComboBox";
-const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge, qt = class extends o.Component {
+const ni = Be(), ys = Et(Dt(ni, dt));
+ys.displayName = "KendoReactComboBox";
+const oi = "Please enter a valid value!", { sizeMap: ls, roundedMap: ai } = Ge, qt = class extends o.Component {
   constructor(i) {
     super(i), this.state = {}, this.base = new oe(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
@@ -1893,7 +1889,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
       this.base.togglePopup(t);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ai
+        this.validity.valid ? "" : this.props.validationMessage || oi
       );
     }, this.onScroll = (t) => {
       this._isScrolling = !0;
@@ -2082,8 +2078,8 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
           "k-autocomplete k-input",
           s,
           {
-            [`k-input-${rs[c] || c}`]: c,
-            [`k-rounded-${li[d] || d}`]: d,
+            [`k-input-${ls[c] || c}`]: c,
+            [`k-rounded-${ai[d] || d}`]: d,
             [`k-input-${r}`]: r,
             "k-invalid": !h,
             "k-loading": a,
@@ -2100,7 +2096,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
       this.props.prefix && /* @__PURE__ */ o.createElement(b, { ...w }),
       this.renderSearchBar(f || "", v),
       a && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
-      m && !a && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      m && !a && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick, key: "clearbutton" }),
       this.props.suffix && /* @__PURE__ */ o.createElement(k, { ...D }),
       this.renderListContainer()
     );
@@ -2121,7 +2117,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
    * @hidden
    */
   onNavigate(i, t, e) {
-    const s = this.value, { data: n = [], textField: a, focusedItemIndex: p } = this.props, c = this.state.focusedItem !== void 0 ? n.findIndex((r) => R(r, this.state.focusedItem, a)) : p ? p(n, s, a) : n.indexOf(ls(n, s, a)), d = this.base.navigation.navigate({
+    const s = this.value, { data: n = [], textField: a, focusedItemIndex: p } = this.props, c = this.state.focusedItem !== void 0 ? n.findIndex((r) => R(r, this.state.focusedItem, a)) : p ? p(n, s, a) : n.indexOf(as(n, s, a)), d = this.base.navigation.navigate({
       keyCode: t,
       current: c,
       max: n.length - 1,
@@ -2189,16 +2185,14 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
       {
         width: u,
         popupSettings: {
-          animate: r.animate,
-          anchor: this.element,
+          ...r,
+          anchor: r.anchor || this.element,
           show: h,
           popupClass: B(
             r.popupClass,
             "k-list-container",
             "k-autocomplete-popup"
-          ),
-          className: r.className,
-          appendTo: r.appendTo
+          )
         },
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
@@ -2210,7 +2204,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
           className: B(
             "k-list",
             {
-              [`k-list-${rs[a] || a}`]: a
+              [`k-list-${ls[a] || a}`]: a
             }
           )
         },
@@ -2262,7 +2256,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
   }
   suggestValue(i) {
     if (this._suggested = "", i) {
-      const { data: t = [], textField: e } = this.props, s = t[Be(t, i, e)];
+      const { data: t = [], textField: e } = this.props, s = t[Ve(t, i, e)];
       if (s) {
         const n = V(s, e);
         i.toLowerCase() !== n.toLowerCase() && (this._suggested = n.substring(i.length));
@@ -2276,7 +2270,7 @@ const ai = "Please enter a valid value!", { sizeMap: rs, roundedMap: li } = Ge,
     if (s)
       return s(t, a, e);
     {
-      const p = t.indexOf(ls(t, a, e));
+      const p = t.indexOf(as(t, a, e));
       return n && e && p === -1 ? t.findIndex((c) => !c.disabled && c[e]) : Math.max(0, p);
     }
   }
@@ -2313,10 +2307,10 @@ Mt.defaultProps = {
   prefix: void 0,
   suffix: void 0
 };
-const ri = Ke(), di = Et(Dt(ri, Mt));
-di.displayName = "KendoReactAutoComplete";
-const ci = (i) => i.syntheticEvent.preventDefault(), pi = (i) => i.syntheticEvent.stopPropagation();
-class xs extends o.Component {
+const li = Be(), ri = Et(Dt(li, Mt));
+ri.displayName = "KendoReactAutoComplete";
+const di = (i) => i.syntheticEvent.preventDefault(), ci = (i) => i.syntheticEvent.stopPropagation();
+class Is extends o.Component {
   render() {
     const { data: t, guid: e, focused: s, tagRender: n, tag: a, onTagDelete: p, size: c } = this.props;
     return /* @__PURE__ */ o.createElement(o.Fragment, null, t.map((d, r) => {
@@ -2330,7 +2324,7 @@ class xs extends o.Component {
           onTagDelete: p
         }
       ) : /* @__PURE__ */ o.createElement(
-        Bs,
+        Vs,
         {
           id: `tag-${e}-${d.text.replace(/\s+/g, "-")}`,
           "aria-selected": !0,
@@ -2340,8 +2334,8 @@ class xs extends o.Component {
           text: d.text,
           removable: !0,
           onRemove: (u) => p.call(void 0, d.data, u.syntheticEvent),
-          onMouseDown: ci,
-          onClick: pi,
+          onMouseDown: di,
+          onClick: ci,
           className: d === s ? "k-focus" : void 0,
           size: c
         }
@@ -2350,8 +2344,8 @@ class xs extends o.Component {
     }), this.props.children);
   }
 }
-var it = /* @__PURE__ */ ((i) => (i[i.PopupList = 0] = "PopupList", i[i.TagsList = 1] = "TagsList", i))(it || {});
-const ds = 500, ts = (i) => {
+var st = /* @__PURE__ */ ((i) => (i[i.PopupList = 0] = "PopupList", i[i.TagsList = 1] = "TagsList", i))(st || {});
+const rs = 500, ts = (i) => {
   const {
     footer: t,
     children: e,
@@ -2369,8 +2363,8 @@ const ds = 500, ts = (i) => {
     expand: p,
     animation: c !== !1,
     onClose: d,
-    animationStyles: s <= ds ? { top: 0, width: "100%", height: "100%" } : void 0,
-    className: s <= ds ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+    animationStyles: s <= rs ? { top: 0, width: "100%", height: "100%" } : void 0,
+    className: s <= rs ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
   };
   return /* @__PURE__ */ o.createElement(Jt, { ...u }, /* @__PURE__ */ o.createElement(Qt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, r)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
     Te,
@@ -2381,10 +2375,10 @@ const ds = 500, ts = (i) => {
       type: "button",
       fillMode: "flat",
       icon: "x",
-      svgIcon: lt,
+      svgIcon: at,
       onClick: d
     }
-  ))), h && /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, h)), e, t && /* @__PURE__ */ o.createElement(Ks, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ o.createElement(
+  ))), h && /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, h)), e, t && /* @__PURE__ */ o.createElement(Bs, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ o.createElement(
     Te,
     {
       size: "large",
@@ -2408,10 +2402,10 @@ const ds = 500, ts = (i) => {
     },
     t.applyText
   )));
-}, { sizeMap: It, roundedMap: hi } = Ge, ui = "Please enter a valid value!", cs = (i) => i.preventDefault(), ps = (i) => i === 2, $t = class extends o.Component {
+}, { sizeMap: It, roundedMap: pi } = Ge, hi = "Please enter a valid value!", ds = (i) => i.preventDefault(), cs = (i) => i === 2, $t = class extends o.Component {
   constructor(i) {
     super(i), this.state = {
-      activedescendant: it.PopupList,
+      activedescendant: st.PopupList,
       currentValue: []
     }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new oe(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.focus = () => {
       this._input && this._input.focus();
@@ -2427,7 +2421,7 @@ const ds = 500, ts = (i) => {
       bt(n, t, this.props.dataItemKey), this.triggerOnChange(n, s), this.applyState(s);
     }, this.itemFocus = (t, e) => {
       const { data: s = [], allowCustom: n, virtual: a } = this.props, p = a ? a.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), r = n && c, h = s[t - p];
-      h && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = it.PopupList) : r && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(h, e);
+      h && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = st.PopupList) : r && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(h, e);
     }, this.componentRef = (t) => {
       this._element = t, this.base.wrapper = t;
     }, this.searchbarRef = (t) => {
@@ -2530,16 +2524,16 @@ const ds = 500, ts = (i) => {
           }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: cs
+          onMouseDown: ds
         },
         /* @__PURE__ */ o.createElement(
           "div",
           {
-            className: B("k-list-item k-custom-item", { "k-focus": ps(h) }),
+            className: B("k-list-item k-custom-item", { "k-focus": cs(h) }),
             style: { fontStyle: "italic" }
           },
           r,
-          /* @__PURE__ */ o.createElement(Ce, { name: "plus", icon: Ps, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ o.createElement(Ce, { name: "plus", icon: Os, style: { position: "absolute", right: "0.5em" } })
         )
       );
       let { group: f } = this.state;
@@ -2562,18 +2556,16 @@ const ds = 500, ts = (i) => {
         dir: e !== void 0 ? e : t.dirCalculated,
         width: a,
         popupSettings: {
+          ...n,
           popupClass: B(
             n.popupClass,
             "k-list-container",
             "k-multiselect-popup"
           ),
-          className: n.className,
-          animate: n.animate,
-          anchor: this.element,
+          anchor: n.anchor || this.element,
           show: this.opened,
           onOpen: this.onPopupOpened,
-          onClose: this.onPopupClosed,
-          appendTo: n.appendTo
+          onClose: this.onPopupClosed
         },
         itemsCount: [s.length, this.value.length]
       };
@@ -2582,7 +2574,7 @@ const ds = 500, ts = (i) => {
       const { adaptiveTitle: t, filterable: e, filter: s } = this.props, { windowWidth: n = 0 } = this.state, a = s !== void 0 ? s : this.state.text;
       this.localization = We(this);
       const p = e ? /* @__PURE__ */ o.createElement(
-        Ve,
+        Re,
         {
           value: a,
           ref: (d) => this._adaptiveInput = d && d.element,
@@ -2599,13 +2591,13 @@ const ds = 500, ts = (i) => {
         windowWidth: n,
         mobileFilter: p,
         footer: {
-          cancelText: this.localization.toLanguageString(at, ce[at]),
+          cancelText: this.localization.toLanguageString(ot, ce[ot]),
           onCancel: this.onCancel,
-          applyText: this.localization.toLanguageString(ot, ce[ot]),
+          applyText: this.localization.toLanguageString(nt, ce[nt]),
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ o.createElement(ts, { ...c }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ o.createElement(ts, { ...c }, /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.closePopup = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onClose" });
@@ -2651,7 +2643,7 @@ const ds = 500, ts = (i) => {
           itemRender: n,
           groupHeaderItemRender: a,
           noDataRender: s,
-          onMouseDown: cs,
+          onMouseDown: ds,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
           wrapperRef: d.scrollerRef,
@@ -2707,7 +2699,7 @@ const ds = 500, ts = (i) => {
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ui
+        this.validity.valid ? "" : this.props.validationMessage || hi
       );
     }, $e(Ye);
   }
@@ -2738,7 +2730,7 @@ const ds = 500, ts = (i) => {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= we && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= Ee && this.props.adaptive);
   }
   /**
    * Represents the value of the MultiSelect.
@@ -2795,7 +2787,7 @@ const ds = 500, ts = (i) => {
   }
   /** @hidden */
   onNavigate(i, t, e) {
-    const { allowCustom: s, data: n = [] } = this.props, a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), d = s && a, r = ps(p), h = this.base, u = h.vs;
+    const { allowCustom: s, data: n = [] } = this.props, a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), d = s && a, r = cs(p), h = this.base, u = h.vs;
     if (this.opened && t === g.up && r)
       this.state.focusedIndex !== void 0 && (i.data.focusedIndex = void 0);
     else {
@@ -2830,13 +2822,13 @@ const ds = 500, ts = (i) => {
     k.enabled = c !== void 0, c !== void 0 && (k.skip = c.skip, k.total = c.total, k.pageSize = c.pageSize);
     const O = this.mobileMode && this.opened ? w : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const N = !this.validityStyles || this.validity.valid, _ = !!(f !== void 0 ? f : m) || O && O.length > 0, [S, T] = Ne(this.props.prefix || o.Fragment), [C, E] = Ne(this.props.suffix || o.Fragment), M = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    const N = !this.validityStyles || this.validity.valid, _ = !!(f !== void 0 ? f : m) || O && O.length > 0, [S, F] = Ne(this.props.prefix || o.Fragment), [C, E] = Ne(this.props.suffix || o.Fragment), M = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: this.componentRef,
         className: B("k-multiselect k-input", t, {
           [`k-input-${It[d] || d}`]: d,
-          [`k-rounded-${hi[r] || r}`]: r,
+          [`k-rounded-${pi[r] || r}`]: r,
           [`k-input-${h}`]: h,
           "k-focus": v && !n,
           "k-invalid": !N,
@@ -2849,9 +2841,9 @@ const ds = 500, ts = (i) => {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: qs
+        onMouseDown: Ws
       },
-      this.props.prefix && /* @__PURE__ */ o.createElement(S, { ...T }),
+      this.props.prefix && /* @__PURE__ */ o.createElement(S, { ...F }),
       /* @__PURE__ */ o.createElement("div", { className: B("k-input-values") }, /* @__PURE__ */ o.createElement(
         "div",
         {
@@ -2863,20 +2855,20 @@ const ds = 500, ts = (i) => {
           id: "tagslist-" + this.base.guid
         },
         O && O.length > 0 && /* @__PURE__ */ o.createElement(
-          xs,
+          Is,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
             data: O,
             guid: this.base.guid,
-            focused: b ? O.find((H) => St(H, b, p)) : void 0,
+            focused: b ? O.find((A) => St(A, b, p)) : void 0,
             size: d
           }
         )
       ), this.renderSearchBar(D)),
       u && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
       this.props.suffix && /* @__PURE__ */ o.createElement(C, { ...E }),
-      _ && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick }),
+      _ && /* @__PURE__ */ o.createElement(rt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
     return e ? /* @__PURE__ */ o.createElement(
@@ -2893,7 +2885,7 @@ const ds = 500, ts = (i) => {
     ) : M;
   }
   renderSearchBar(i) {
-    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: n, placeholder: a, ariaDescribedBy: p } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), r = this.value.length === 0 && !c ? a : void 0, h = s && s.length > 0 ? void 0 : a, u = t === it.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
+    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: n, placeholder: a, ariaDescribedBy: p } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), r = this.value.length === 0 && !c ? a : void 0, h = s && s.length > 0 ? void 0 : a, u = t === st.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
     return /* @__PURE__ */ o.createElement(
       es,
       {
@@ -2943,7 +2935,7 @@ const ds = 500, ts = (i) => {
         bt(r, h.data, a), this.triggerOnChange(r, t);
       }
     }
-    c !== s && (t.data.focusedTag = c, t.data.activedescendant = it.TagsList), this.applyState(t);
+    c !== s && (t.data.focusedTag = c, t.data.activedescendant = st.TagsList), this.applyState(t);
   }
   triggerOnChange(i, t) {
     this.props.value === void 0 && (t.data.value = [...i]), this._valueItemsDuringOnChange = [], this.setItems(i, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
@@ -2956,7 +2948,7 @@ const ds = 500, ts = (i) => {
     t.length = 0, t.push(...i);
   }
   getFocusedState() {
-    const { focusedIndex: i } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: e, data: s = [], dataItemKey: n, virtual: a, textField: p, focusedItemIndex: c = Be, skipDisabledItems: d } = this.props, r = a && a.skip || 0;
+    const { focusedIndex: i } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: e, data: s = [], dataItemKey: n, virtual: a, textField: p, focusedItemIndex: c = Ve, skipDisabledItems: d } = this.props, r = a && a.skip || 0;
     let h;
     if (i !== void 0)
       return {
@@ -3069,9 +3061,9 @@ Nt.defaultProps = {
   prefix: void 0,
   suffix: void 0
 };
-const fi = Ke(), gi = Et(Dt(fi, Nt));
-gi.displayName = "KendoReactMultiSelect";
-const mi = (i) => /* @__PURE__ */ o.createElement(
+const ui = Be(), fi = Et(Dt(ui, Nt));
+fi.displayName = "KendoReactMultiSelect";
+const gi = (i) => /* @__PURE__ */ o.createElement(
   je,
   {
     ...i,
@@ -3084,8 +3076,8 @@ const mi = (i) => /* @__PURE__ */ o.createElement(
     ),
     listStyle: { ...i.listStyle }
   }
-), vi = (i, t) => i ? typeof i == "number" ? i + "px" : i : t, bi = Ke(), ss = o.forwardRef((i, t) => {
-  const e = Ut(bi, i), s = o.useRef(null), n = o.useRef(null), a = Fs(), {
+), mi = (i, t) => i ? typeof i == "number" ? i + "px" : i : t, vi = Be(), ss = o.forwardRef((i, t) => {
+  const e = Ut(vi, i), s = o.useRef(null), n = o.useRef(null), a = Ds(), {
     columns: p = Ae.columns,
     popupSettings: c = Ae.popupSettings,
     className: d,
@@ -3120,95 +3112,95 @@ const mi = (i) => /* @__PURE__ */ o.createElement(
         return V(e.data[0], e.groupField);
     },
     [e.data, e.groupField]
-  ), [_, S] = o.useState(N), [T, C] = o.useState(!0), [E] = h ? Ne(e.prefix || o.Fragment) : [], [M] = u ? Ne(e.suffix || o.Fragment) : [], H = o.useMemo(
+  ), [_, S] = o.useState(N), [F, C] = o.useState(!0), [E] = h ? Ne(e.prefix || o.Fragment) : [], [M] = u ? Ne(e.suffix || o.Fragment) : [], A = o.useMemo(
     () => {
       const P = /* @__PURE__ */ o.createElement("th", { className: "k-table-th", colSpan: p.length }, _);
       return /* @__PURE__ */ o.createElement(o.Fragment, null, e.header, /* @__PURE__ */ o.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ o.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ o.createElement("colgroup", null, p.map(
-        (q, be) => /* @__PURE__ */ o.createElement(
+        (W, ge) => /* @__PURE__ */ o.createElement(
           "col",
           {
-            key: q.uniqueKey ? q.uniqueKey : be,
-            style: { width: q.width ? q.width : Ae.width }
+            key: W.uniqueKey ? W.uniqueKey : ge,
+            style: { width: W.width ? W.width : Ae.width }
           }
         )
-      )), /* @__PURE__ */ o.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ o.createElement("tr", { className: "k-table-row" }, p.map((q, be) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: q.uniqueKey ? q.uniqueKey : be }, q.header || " "))), _ && T && /* @__PURE__ */ o.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, P, {}) : P)))));
+      )), /* @__PURE__ */ o.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ o.createElement("tr", { className: "k-table-row" }, p.map((W, ge) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: W.uniqueKey ? W.uniqueKey : ge }, W.header || " "))), _ && F && /* @__PURE__ */ o.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, P, {}) : P)))));
     },
-    [e.header, p, _, T]
-  ), J = o.useMemo(
+    [e.header, p, _, F]
+  ), j = o.useMemo(
     () => (
       // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-      `calc(${p.map((P) => vi(P.width, Ae.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
+      `calc(${p.map((P) => mi(P.width, Ae.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
     ),
     [p, a]
-  ), j = e.virtual ? e.virtual.skip : 0, Y = o.useCallback(
-    (P, q) => {
-      const be = p.map((X, Je) => /* @__PURE__ */ o.createElement(
+  ), Y = e.virtual ? e.virtual.skip : 0, Z = o.useCallback(
+    (P, W) => {
+      const ge = p.map((ee, ct) => /* @__PURE__ */ o.createElement(
         "span",
         {
           className: e.itemRender ? void 0 : "k-table-td",
-          style: e.itemRender ? void 0 : { width: X.width ? X.width : Ae.width },
-          key: X.uniqueKey ? X.uniqueKey : Je
+          style: e.itemRender ? void 0 : { width: ee.width ? ee.width : Ae.width },
+          key: ee.uniqueKey ? ee.uniqueKey : ct
         },
-        X.field ? String(Ct(X.field)(q.dataItem)) : ""
+        ee.field ? String(Ct(ee.field)(W.dataItem)) : ""
       ));
-      let ke, L, Q, le, z = e.data || [];
-      const Ee = q.index - j;
-      e.groupField !== void 0 && (le = Ct(e.groupField), L = le(z[Ee]), Q = le(z[Ee - 1]), L && Q && L !== Q && (ke = L)), ke && e.groupMode === "classic" && be.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, ke)));
-      const re = o.cloneElement(P, {
+      let z, J, ke, le, q = e.data || [];
+      const re = W.index - Y;
+      e.groupField !== void 0 && (le = Ct(e.groupField), J = le(q[re]), ke = le(q[re - 1]), J && ke && J !== ke && (z = J)), z && e.groupMode === "classic" && ge.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, z)));
+      const Se = o.cloneElement(P, {
         ...P.props,
         className: B("k-table-row", {
-          "k-table-alt-row": q.index % 2 !== 0,
-          "k-focus": q.focused,
-          "k-selected": q.selected,
-          "k-first": !!ke,
-          "k-disabled": q.dataItem.disabled
+          "k-table-alt-row": W.index % 2 !== 0,
+          "k-focus": W.focused,
+          "k-selected": W.selected,
+          "k-first": !!z,
+          "k-disabled": W.dataItem.disabled
         })
-      }, be);
-      return e.itemRender ? e.itemRender.call(void 0, re, q) : re;
+      }, ge);
+      return e.itemRender ? e.itemRender.call(void 0, Se, W) : Se;
     },
-    [p, e.groupField, e.itemRender, e.data, j]
-  ), W = o.useCallback(
-    (P, q) => {
+    [p, e.groupField, e.itemRender, e.data, Y]
+  ), K = o.useCallback(
+    (P, W) => {
       P && P.call(void 0, {
-        ...q,
+        ...W,
         target: s.current
       });
     },
     []
-  ), ge = o.useCallback((P) => (e.virtual || S(N), W(f, P)), [W, f, e.virtual, N]), Z = o.useCallback((P) => W(m, P), [m]), ee = o.useCallback((P) => W(v, P), [v]), ae = o.useCallback((P) => W(b, P), [b]), Le = o.useCallback((P) => W(w, P), [w]), Oe = o.useCallback((P) => W(D, P), [D]), ze = o.useCallback((P) => (S(N), W(k, {
+  ), be = o.useCallback((P) => (e.virtual || S(N), K(f, P)), [K, f, e.virtual, N]), X = o.useCallback((P) => K(m, P), [m]), Q = o.useCallback((P) => K(v, P), [v]), ae = o.useCallback((P) => K(b, P), [b]), Ke = o.useCallback((P) => K(w, P), [w]), Oe = o.useCallback((P) => K(D, P), [D]), Le = o.useCallback((P) => (S(N), K(k, {
     ...P,
     mobileMode: P.target.mobileMode
-  })), [k]), A = o.useCallback(
+  })), [k]), H = o.useCallback(
     (P) => {
       S(P.group);
     },
     []
   );
   o.useEffect(() => {
-    Ts();
+    Fs();
   }), o.useEffect(() => {
     const P = e.data;
     S(N), P && P.length !== 0 ? C(!0) : C(!1);
   }, [e.data]);
-  const Pe = o.useCallback((P) => /* @__PURE__ */ o.createElement(mi, { ...P }), []);
+  const ze = o.useCallback((P) => /* @__PURE__ */ o.createElement(gi, { ...P }), []);
   return /* @__PURE__ */ o.createElement(
-    _s.Provider,
+    Ps.Provider,
     {
       value: (P) => ({ ...P, popupClass: `k-dropdowngrid-popup ${c.popupClass}` })
     },
     /* @__PURE__ */ o.createElement(
-      Is,
+      ys,
       {
         ...O,
-        list: Pe,
+        list: ze,
         popupSettings: {
-          width: J,
           ...c,
+          width: c.width || j,
           className: c.className
         },
         ref: n,
-        header: H,
-        itemRender: Y,
+        header: A,
+        itemRender: Z,
         groupHeaderItemRender: e.groupHeaderItemRender,
         size: e.size,
         rounded: e.rounded,
@@ -3216,14 +3208,14 @@ const mi = (i) => /* @__PURE__ */ o.createElement(
         groupMode: e.groupMode,
         groupField: e.groupField,
         isMultiColumn: !0,
-        onOpen: ge,
-        onClose: Z,
-        onFocus: ee,
+        onOpen: be,
+        onClose: X,
+        onFocus: Q,
         onBlur: ae,
-        onChange: Le,
-        onFilterChange: ze,
+        onChange: Ke,
+        onFilterChange: Le,
         onPageChange: Oe,
-        onGroupScroll: A,
+        onGroupScroll: H,
         className: B("k-dropdowngrid", d),
         required: e.required,
         adaptive: e.adaptive,
@@ -3236,8 +3228,8 @@ const mi = (i) => /* @__PURE__ */ o.createElement(
       }
     )
   );
-}), yi = {
-  ...ct.propTypes,
+}), bi = {
+  ...dt.propTypes,
   columns: l.any.isRequired
 }, Ae = {
   columns: [],
@@ -3248,9 +3240,9 @@ const mi = (i) => /* @__PURE__ */ o.createElement(
   fillMode: "solid"
 };
 ss.displayName = "KendoMultiColumnComboBox";
-ss.propTypes = yi;
+ss.propTypes = bi;
 ss.defaultProps = Ae;
-function Cs(i, t, e) {
+function yi(i, t, e) {
   const [s, n] = o.useState(t);
   return o.useEffect(
     () => {
@@ -3259,14 +3251,18 @@ function Cs(i, t, e) {
     e
   ), s;
 }
-const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, i.children)), { sizeMap: Ii, roundedMap: xi } = Ge, Ci = "Please select a value from the list!", ki = (i) => /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, i.children), hs = (i) => i.split("_").map((t) => parseInt(t, 10)), Si = (i, t) => {
+function xs(i, t, e, s) {
+  const n = e.width !== void 0 && e.width !== t.popupSettings.width, a = s.width !== void 0, p = n ? e.width : a ? s.width : t.popupSettings.width, c = yi(i, p);
+  return n || a ? p : c && c > t.popupSettings.width ? c : t.popupSettings.width;
+}
+const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, i.children)), { sizeMap: Ii, roundedMap: xi } = Ge, Ci = "Please select a value from the list!", ki = (i) => /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, i.children), ps = (i) => i.split("_").map((t) => parseInt(t, 10)), Si = (i, t) => {
   const { validationMessage: e, valid: s, required: n } = i;
   return {
     customError: e !== void 0,
     valid: !!(s !== void 0 ? s : !n || t),
     valueMissing: !t
   };
-}, us = {
+}, hs = {
   selectField: "selected",
   subItemsField: "items",
   popupSettings: {
@@ -3281,15 +3277,15 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
-}, wi = Ke(), Ss = o.forwardRef((i, t) => {
+}, wi = Be(), ks = o.forwardRef((i, t) => {
   $e(Ye);
   const e = Ut(wi, i), s = {
-    ...us,
+    ...hs,
     ...e
-  }, n = ms(), a = s.id || n, {
+  }, n = gs(), a = s.id || n, {
     data: p,
     dataItemKey: c,
-    popupSettings: d,
+    popupSettings: d = {},
     style: r,
     opened: h,
     disabled: u,
@@ -3304,27 +3300,27 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
     valid: N,
     required: _,
     validityStyles: S
-  } = s, T = Gt(s.tabIndex, u), C = o.useRef(null), E = o.useRef(null), M = o.useRef(null), H = o.useRef(null), J = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [W, ge] = o.useState(void 0), Z = s.value !== void 0, ee = Z ? s.value : W !== void 0 ? W : s.defaultValue, ae = U(ee), Le = ae ? V(ee, s.textField) : "", Oe = Si({ validationMessage: O, valid: N, required: _ }, ae), ze = o.useCallback(() => E.current && E.current.focus(), []);
+  } = s, F = Gt(s.tabIndex, u), C = o.useRef(null), E = o.useRef(null), M = o.useRef(null), A = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), Z = o.useRef(!1), [K, be] = o.useState(void 0), X = s.value !== void 0, Q = X ? s.value : K !== void 0 ? K : s.defaultValue, ae = U(Q), Ke = ae ? V(Q, s.textField) : "", Oe = Si({ validationMessage: O, valid: N, required: _ }, ae), Le = o.useCallback(() => E.current && E.current.focus(), []);
   o.useImperativeHandle(
     C,
     () => ({
       props: s,
       element: E.current,
-      focus: ze
+      focus: Le
     })
   ), o.useImperativeHandle(t, () => C.current);
-  const A = vs(E, s.dir), Pe = d.width !== void 0 ? d.width : r.width !== void 0 ? r.width : us.popupSettings.width, q = {
-    width: Cs(E, Pe),
-    ...A !== void 0 ? { direction: A } : {}
-  }, [be, ke] = o.useState(!1), L = h !== void 0 ? h : be, [Q, le] = o.useState(!1), [z, Ee] = o.useState(), re = !!(z && z <= we && s.adaptive), [X, Je] = o.useState(""), ns = o.useCallback(
+  const H = ms(E, s.dir), P = {
+    width: xs(E, hs, d, r),
+    ...H !== void 0 ? { direction: H } : {}
+  }, [W, ge] = o.useState(!1), z = h !== void 0 ? h : W, [J, ke] = o.useState(!1), [le, q] = o.useState(), re = !!(le && le <= Ee && s.adaptive), [Se, ee] = o.useState(""), ct = o.useCallback(
     () => {
-      J.current && J.current.setCustomValidity && J.current.setCustomValidity(
+      j.current && j.current.setCustomValidity && j.current.setCustomValidity(
         Oe.valid ? "" : O === void 0 ? Ci : O
       );
     },
     [O, Oe]
   );
-  o.useEffect(ns), o.useEffect(() => {
+  o.useEffect(ct), o.useEffect(() => {
     const I = Me && window.ResizeObserver && new window.ResizeObserver(Vt.bind(void 0));
     return document != null && document.body && I && I.observe(document.body), () => {
       document != null && document.body && I && I.disconnect();
@@ -3332,51 +3328,51 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   }, []);
   const pt = o.useCallback(
     (I) => {
-      if (!L) {
+      if (!z) {
         if (f) {
-          const F = { ...I };
-          f.call(void 0, F);
+          const T = { ...I };
+          f.call(void 0, T);
         }
-        h === void 0 && ke(!0);
+        h === void 0 && ge(!0);
       }
     },
-    [L, h, f]
-  ), Se = o.useCallback(
+    [z, h, f]
+  ), we = o.useCallback(
     (I) => {
-      if (L) {
+      if (z) {
         if (m) {
-          const F = { ...I };
-          m.call(void 0, F);
+          const T = { ...I };
+          m.call(void 0, T);
         }
-        h === void 0 && (ke(!1), re && setTimeout(() => {
-          var F;
-          $((F = H.current) == null ? void 0 : F.element);
+        h === void 0 && (ge(!1), re && setTimeout(() => {
+          var T;
+          $((T = A.current) == null ? void 0 : T.element);
         }, 300));
       }
     },
-    [L, h, m, re]
+    [z, h, m, re]
   ), Ot = o.useCallback(
     (I) => {
       if (!I.isDefaultPrevented() && C.current) {
-        le(!0);
-        const F = {
+        ke(!0);
+        const T = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
           target: C.current
         };
-        (L ? Se : pt)(F);
+        (z ? we : pt)(T);
       }
     },
-    [L, h, f, m]
+    [z, h, f, m]
   ), ne = o.useCallback(
     (I) => {
-      Y.current = !0, I(), window.setTimeout(() => Y.current = !1, 0);
+      Z.current = !0, I(), window.setTimeout(() => Z.current = !1, 0);
     },
     []
   ), He = o.useCallback(
     (I) => {
-      var x, K;
-      const { keyCode: F, altKey: G } = I, pe = j.current && j.current.element;
+      var x, L;
+      const { keyCode: T, altKey: G } = I, pe = Y.current && Y.current.element;
       if (!C.current || I.isDefaultPrevented() && ((x = M.current) == null ? void 0 : x.element) === I.target)
         return;
       const y = {
@@ -3384,11 +3380,11 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         nativeEvent: I.nativeEvent,
         target: C.current
       };
-      if (L)
-        if (F === g.esc || G && F === g.up)
-          I.preventDefault(), Se(y);
-        else if (pe && pe.querySelector(".k-focus") && (F === g.up || F === g.down || F === g.left || F === g.right || F === g.home || F === g.end)) {
-          if (F === g.up && ((K = M.current) != null && K.element)) {
+      if (z)
+        if (T === g.esc || G && T === g.up)
+          I.preventDefault(), we(y);
+        else if (pe && pe.querySelector(".k-focus") && (T === g.up || T === g.down || T === g.left || T === g.right || T === g.home || T === g.end)) {
+          if (T === g.up && ((L = M.current) != null && L.element)) {
             const se = Array.from(pe.querySelectorAll(".k-treeview-item")), Ie = [...se].reverse().find((xe) => !!(xe && xe.querySelector(".k-focus")));
             if (Ie && se.indexOf(Ie) === 0)
               return ne(() => {
@@ -3398,22 +3394,22 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
           }
           ne(Fe);
         } else
-          F === g.down && ne(() => {
+          T === g.down && ne(() => {
             var se;
             $(((se = M.current) == null ? void 0 : se.element) || pe);
           });
       else
-        G && F === g.down ? (I.preventDefault(), pt(y)) : L || F === g.esc && ft(I);
+        G && T === g.down ? (I.preventDefault(), pt(y)) : z || T === g.esc && ft(I);
     },
-    [L, h, f, m]
-  ), _e = o.useCallback(
+    [z, h, f, m]
+  ), Pe = o.useCallback(
     (I) => {
-      const { keyCode: F, altKey: G } = I;
-      G || F !== g.up && F !== g.down || (I.preventDefault(), ne(
-        F === g.up ? () => {
+      const { keyCode: T, altKey: G } = I;
+      G || T !== g.up && T !== g.down || (I.preventDefault(), ne(
+        T === g.up ? () => {
           $(E.current);
         } : () => {
-          $(j.current && j.current.element);
+          $(Y.current && Y.current.element);
         }
       ));
     },
@@ -3426,94 +3422,94 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   ), fe = o.useCallback(
     () => {
       var I;
-      !Q && L && !h ? Se({ target: C.current }) : e.filterable ? $((I = M.current) == null ? void 0 : I.element) : $(j.current && j.current.element);
+      !J && z && !h ? we({ target: C.current }) : e.filterable ? $((I = M.current) == null ? void 0 : I.element) : $(Y.current && Y.current.element);
     },
-    [m, e.filterable, Q, h, L]
+    [m, e.filterable, J, h, z]
   ), te = o.useCallback(
     () => {
-      Q && $(E.current);
+      J && $(E.current);
     },
-    [Q]
+    [J]
   ), Pt = o.useCallback(
     (I) => {
-      if (!Q && !Y.current && (le(!0), e.onFocus && C.current)) {
-        const F = {
+      if (!J && !Z.current && (ke(!0), e.onFocus && C.current)) {
+        const T = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
           target: C.current
         };
-        e.onFocus.call(void 0, F);
+        e.onFocus.call(void 0, T);
       }
     },
-    [Q, e.onFocus]
+    [J, e.onFocus]
   ), _t = o.useCallback(
     (I) => {
-      if (Q && !Y.current && C.current) {
-        le(!1);
-        const F = {
+      if (J && !Z.current && C.current) {
+        ke(!1);
+        const T = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
           target: C.current
         };
         if (e.onBlur) {
-          const G = { ...F };
+          const G = { ...T };
           e.onBlur.call(void 0, G);
         }
-        re || Se(F);
+        re || we(T);
       }
     },
-    [Q, e.onBlur, L, h, m]
+    [J, e.onBlur, z, h, m]
   ), Rt = o.useCallback(
     () => {
-      Q && ne(Fe), re && setTimeout(() => {
+      J && ne(Fe), re && setTimeout(() => {
         var I;
-        $((I = H.current) == null ? void 0 : I.element);
+        $((I = A.current) == null ? void 0 : I.element);
       }, 300);
     },
-    [Q, re]
+    [J, re]
   ), ht = o.useCallback(
-    (I, F, G) => {
+    (I, T, G) => {
       if (e.onChange) {
         const pe = {
-          value: F,
-          level: G ? hs(G) : [],
+          value: T,
+          level: G ? ps(G) : [],
           ...I
         };
         e.onChange.call(void 0, pe);
       }
-      Z || ge(F);
+      X || be(T);
     },
-    [e.onChange, Z]
+    [e.onChange, X]
   ), ut = o.useCallback(
     (I) => {
-      if (R(I.item, ee, c) || !C.current)
+      if (R(I.item, Q, c) || !C.current)
         return;
-      const { item: F, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
+      const { item: T, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
         syntheticEvent: y,
         nativeEvent: pe,
         target: C.current
       };
-      ht(x, F, G), Se(x);
+      ht(x, T, G), we(x);
     },
-    [Z, ee, e.onChange, c, L, h, m]
+    [X, Q, e.onChange, c, z, h, m]
   ), ft = o.useCallback(
     (I) => {
       if (!C.current)
         return;
-      const F = {
+      const T = {
         syntheticEvent: I,
         nativeEvent: I.nativeEvent,
         target: C.current
       };
-      ht(F, null), Se(F), I.preventDefault();
+      ht(T, null), we(T), I.preventDefault();
     },
-    [Z, e.onChange, L, h, m]
+    [X, e.onChange, z, h, m]
   ), gt = o.useCallback(
     (I) => {
       if (I.syntheticEvent.stopPropagation(), e.onExpandChange && C.current) {
-        const { item: F, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
-          level: hs(G),
-          item: F,
+        const { item: T, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
+          level: ps(G),
+          item: T,
           nativeEvent: pe,
           syntheticEvent: y,
           target: C.current
@@ -3522,7 +3518,7 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       }
     },
     [e.onExpandChange]
-  ), Qe = o.useCallback(
+  ), Je = o.useCallback(
     (I) => {
       if (e.onFilterChange && C.current) {
         const G = {
@@ -3531,35 +3527,35 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
           nativeEvent: I.nativeEvent,
           target: C.current
         };
-        e.onFilterChange.call(void 0, G), e.filter === void 0 && Je(I.target.value);
+        e.onFilterChange.call(void 0, G), e.filter === void 0 && ee(I.target.value);
       }
     },
     [e.onFilterChange, e.filter, e.textField]
-  ), Xe = () => {
+  ), Qe = () => {
     const I = s.filterable ? /* @__PURE__ */ o.createElement(
-      Ve,
+      Re,
       {
-        value: s.filter === void 0 ? X : s.filter,
-        ref: H,
-        onChange: Qe,
-        onKeyDown: _e,
+        value: s.filter === void 0 ? Se : s.filter,
+        ref: A,
+        onChange: Je,
+        onKeyDown: Pe,
         size: me,
         rounded: ye,
         fillMode: De
       }
-    ) : null, F = {
+    ) : null, T = {
       adaptiveTitle: s.adaptiveTitle,
-      expand: L,
-      onClose: (G) => Se(G),
-      windowWidth: z,
+      expand: z,
+      onClose: (G) => we(G),
+      windowWidth: le,
       mobileFilter: I
     };
-    return /* @__PURE__ */ o.createElement(ts, { ...F }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, p.length > 0 ? /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(ts, { ...T }, /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, p.length > 0 ? /* @__PURE__ */ o.createElement(
       kt,
       {
-        ref: j,
-        tabIndex: T,
-        data: Ze,
+        ref: Y,
+        tabIndex: F,
+        data: Xe,
         focusIdField: c,
         textField: s.textField,
         selectField: k,
@@ -3570,44 +3566,44 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         onExpandChange: gt,
         size: me,
         item: s.item,
-        dir: A
+        dir: H
       }
-    ) : /* @__PURE__ */ o.createElement(et, null, tt.toLanguageString(ve, ce[ve]))))));
+    ) : /* @__PURE__ */ o.createElement(Ze, null, et.toLanguageString(ve, ce[ve]))))));
   }, Vt = o.useCallback(
     (I) => {
-      for (let F of I)
-        Ee(F.target.clientWidth);
+      for (let T of I)
+        q(T.target.clientWidth);
     },
     []
-  ), Ze = o.useMemo(
-    () => Z || !ae ? p : Ms(
+  ), Xe = o.useMemo(
+    () => X || !ae ? p : Ts(
       p,
       D,
-      (I) => Ns(
+      (I) => Ms(
         I,
         D,
-        { [k]: R(I, ee, c) }
+        { [k]: R(I, Q, c) }
       )
     ),
-    [p, ee, Z, ae, k, D]
-  ), et = s.listNoData || ks, mt = s.valueHolder || ki, tt = ys(), vt = !S || Oe.valid, { size: me, rounded: ye, fillMode: De } = s, de = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    [p, Q, X, ae, k, D]
+  ), Ze = s.listNoData || Cs, mt = s.valueHolder || ki, et = bs(), vt = !S || Oe.valid, { size: me, rounded: ye, fillMode: De } = s, de = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
       className: B("k-dropdowntree k-picker", s.className, {
         [`k-picker-${Ii[me] || me}`]: me,
         [`k-rounded-${xi[ye] || ye}`]: ye,
         [`k-picker-${De}`]: De,
-        "k-focus": Q,
+        "k-focus": J,
         "k-invalid": !vt,
         "k-loading": s.loading,
         "k-required": _,
         "k-disabled": s.disabled
       }),
-      tabIndex: T,
+      tabIndex: F,
       accessKey: s.accessKey,
       id: a,
       style: b ? { ...r, width: void 0 } : r,
-      dir: A,
+      dir: H,
       ref: E,
       onKeyDown: u ? void 0 : He,
       onMouseDown: Rt,
@@ -3616,26 +3612,26 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       onBlur: _t,
       role: "combobox",
       "aria-haspopup": "tree",
-      "aria-expanded": L,
+      "aria-expanded": z,
       "aria-disabled": u,
       "aria-label": b,
       "aria-labelledby": s.ariaLabelledBy,
       "aria-describedby": s.ariaDescribedBy,
       "aria-required": _
     },
-    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement(mt, { item: ee }, Le || v)),
+    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement(mt, { item: Q }, Ke || v)),
     s.loading && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
     ae && !u && /* @__PURE__ */ o.createElement(
       "span",
       {
         onClick: ft,
         className: "k-clear-value",
-        title: tt.toLanguageString(nt, ce[nt]),
+        title: et.toLanguageString(it, ce[it]),
         role: "button",
         tabIndex: -1,
         onMouseDown: (I) => I.preventDefault()
       },
-      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: lt })
+      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: at })
     ),
     /* @__PURE__ */ o.createElement(
       Te,
@@ -3656,37 +3652,33 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       "select",
       {
         name: w,
-        ref: J,
+        ref: j,
         tabIndex: -1,
         "aria-hidden": !0,
         title: b,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
-      /* @__PURE__ */ o.createElement("option", { value: s.valueMap ? s.valueMap.call(void 0, ee) : ee })
+      /* @__PURE__ */ o.createElement("option", { value: s.valueMap ? s.valueMap.call(void 0, Q) : Q })
     ),
     !re && /* @__PURE__ */ o.createElement(
       Yt,
       {
-        className: B(d.className, { "k-rtl": A === "rtl" }),
-        popupClass: B(
-          d.popupClass,
-          "k-dropdowntree-popup"
-        ),
-        style: q,
-        animate: d.animate,
-        anchor: E.current,
-        show: L,
+        ...d,
+        className: B(d.className, { "k-rtl": H === "rtl" }),
+        popupClass: B(d.popupClass, "k-dropdowntree-popup"),
+        style: P,
+        anchor: d.anchor || E.current,
+        show: z,
         onOpen: fe,
-        onClose: te,
-        appendTo: d.appendTo
+        onClose: te
       },
       s.filterable && /* @__PURE__ */ o.createElement(
-        Ve,
+        Re,
         {
-          value: s.filter === void 0 ? X : s.filter,
+          value: s.filter === void 0 ? Se : s.filter,
           ref: M,
-          onChange: Qe,
-          onKeyDown: _e,
+          onChange: Je,
+          onKeyDown: Pe,
           size: me,
           rounded: ye,
           fillMode: De
@@ -3695,9 +3687,10 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
       p.length > 0 ? /* @__PURE__ */ o.createElement(
         kt,
         {
-          ref: j,
-          tabIndex: T,
-          data: Ze,
+          style: { height: d.height },
+          ref: Y,
+          tabIndex: F,
+          data: Xe,
           focusIdField: c,
           textField: s.textField,
           selectField: k,
@@ -3708,23 +3701,23 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
           onExpandChange: gt,
           size: me,
           item: s.item,
-          dir: A
+          dir: H
         }
-      ) : /* @__PURE__ */ o.createElement(et, null, tt.toLanguageString(ve, ce[ve]))
+      ) : /* @__PURE__ */ o.createElement(Ze, null, et.toLanguageString(ve, ce[ve]))
     )
-  ), re && Xe());
+  ), re && Qe());
   return b ? /* @__PURE__ */ o.createElement(
     Ue,
     {
       label: b,
-      editorValue: Le,
+      editorValue: Ke,
       editorPlaceholder: v,
       editorValid: vt,
       editorDisabled: u,
       editorId: a,
       style: { width: r ? r.width : void 0 },
       children: de,
-      dir: A
+      dir: H
     }
   ) : de;
 }), Ei = {
@@ -3780,16 +3773,16 @@ const ks = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   adaptiveTitle: l.string,
   adaptive: l.bool
 };
-Ss.displayName = "KendoReactDropDownTree";
-Ss.propTypes = Ei;
-const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi } = Ge, Ti = (i) => i.split("_").map((t) => parseInt(t, 10)), Mi = (i, t) => {
+ks.displayName = "KendoReactDropDownTree";
+ks.propTypes = Ei;
+const Di = "Please select a value from the list!", { sizeMap: us, roundedMap: Fi } = Ge, Ti = (i) => i.split("_").map((t) => parseInt(t, 10)), Mi = (i, t) => {
   const { validationMessage: e, valid: s, required: n } = i;
   return {
     customError: e !== void 0,
     valid: !!(s !== void 0 ? s : !n || t),
     valueMissing: !t
   };
-}, Re = {
+}, _e = {
   checkField: "checkField",
   checkIndeterminateField: "checkIndeterminateField",
   subItemsField: "items",
@@ -3803,10 +3796,10 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
   fillMode: "solid",
   required: !1,
   validityStyles: !0
-}, Ni = Ke(), is = o.forwardRef((i, t) => {
+}, Ni = Be(), is = o.forwardRef((i, t) => {
   const e = Ut(Ni, i);
   $e(Ye);
-  const s = ms(), n = e.id || s, {
+  const s = gs(), n = e.id || s, {
     data: a = [],
     dataItemKey: p,
     popupSettings: c = {},
@@ -3818,34 +3811,34 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
     placeholder: m,
     label: v,
     name: b,
-    checkField: w = Re.checkField,
-    checkIndeterminateField: k = Re.checkIndeterminateField,
-    subItemsField: D = Re.subItemsField,
+    checkField: w = _e.checkField,
+    checkIndeterminateField: k = _e.checkIndeterminateField,
+    subItemsField: D = _e.subItemsField,
     validationMessage: O,
     valid: N,
     tags: _,
     value: S,
-    required: T = Re.required,
-    validityStyles: C = Re.validityStyles
-  } = e, E = Gt(e.tabIndex, h), M = o.useRef(null), H = o.useRef(null), J = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), W = o.useRef(null), ge = o.useRef(!1), Z = o.useRef([]), ee = o.useRef(null), [ae, Le] = o.useState(), [Oe, ze] = o.useState(!1), [A, Pe] = o.useState(!1), [P, q] = o.useState(), [be, ke] = o.useState([]), [L, Q] = o.useState(""), le = !!(P && P <= we && e.adaptive), z = r !== void 0 ? r : Oe, Ee = !!(Array.isArray(S) && S.length), re = Mi({ validationMessage: O, valid: N, required: T }, Ee), X = vs(H, e.dir), Je = c.width !== void 0 ? c.width : d.width !== void 0 ? d.width : Re.popupSettings.width, pt = {
-    width: Cs(H, Je),
-    ...X !== void 0 ? { direction: X } : {}
-  }, Se = o.useCallback(() => H.current && H.current.focus(), []);
-  Z.current = _ === void 0 ? (S || []).map((y) => ({ text: V(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
+    required: F = _e.required,
+    validityStyles: C = _e.validityStyles
+  } = e, E = Gt(e.tabIndex, h), M = o.useRef(null), A = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), Z = o.useRef(null), K = o.useRef(null), be = o.useRef(!1), X = o.useRef([]), Q = o.useRef(null), [ae, Ke] = o.useState(), [Oe, Le] = o.useState(!1), [H, ze] = o.useState(!1), [P, W] = o.useState(), [ge, z] = o.useState([]), [J, ke] = o.useState(""), le = !!(P && P <= Ee && e.adaptive), q = r !== void 0 ? r : Oe, re = !!(Array.isArray(S) && S.length), Se = Mi({ validationMessage: O, valid: N, required: F }, re), ee = ms(A, e.dir), pt = {
+    width: xs(A, _e, c, d),
+    ...ee !== void 0 ? { direction: ee } : {}
+  }, we = o.useCallback(() => A.current && A.current.focus(), []);
+  X.current = _ === void 0 ? (S || []).map((y) => ({ text: V(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
     M,
     () => ({
       props: e,
-      element: H.current,
-      focus: Se
+      element: A.current,
+      focus: we
     })
   ), o.useImperativeHandle(t, () => M.current);
   const Ot = o.useCallback(
     () => {
-      Y.current && Y.current.setCustomValidity && Y.current.setCustomValidity(
-        re.valid ? "" : O === void 0 ? Di : O
+      Z.current && Z.current.setCustomValidity && Z.current.setCustomValidity(
+        Se.valid ? "" : O === void 0 ? Di : O
       );
     },
-    [O, re]
+    [O, Se]
   );
   o.useEffect(Ot), o.useEffect(() => {
     const y = Me && window.ResizeObserver && new window.ResizeObserver(vt.bind(void 0));
@@ -3854,16 +3847,16 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
     };
   }, []), o.useEffect(
     () => {
-      ee.current && z && ee.current.setPosition(ee.current._popup);
+      Q.current && q && Q.current.setPosition(Q.current._popup);
     },
-    [S, z]
+    [S, q]
   );
   const ne = o.useCallback(
-    (y, x, K) => {
+    (y, x, L) => {
       if (e.onChange) {
         const se = {
           items: x,
-          operation: K,
+          operation: L,
           ...y
         };
         e.onChange.call(void 0, se);
@@ -3874,42 +3867,42 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
     (y) => {
       if (R(y.item, S, p) || !M.current)
         return;
-      const { item: x, nativeEvent: K, syntheticEvent: se } = y, Ie = {
+      const { item: x, nativeEvent: L, syntheticEvent: se } = y, Ie = {
         syntheticEvent: se,
-        nativeEvent: K,
+        nativeEvent: L,
         target: M.current
       };
       ne(Ie, [x], "toggle");
     },
     [S, p, ne]
-  ), _e = o.useCallback(
+  ), Pe = o.useCallback(
     (y) => {
-      if (!z) {
+      if (!q) {
         if (u) {
           const x = { ...y };
           u.call(void 0, x);
         }
-        r === void 0 && (ze(!0), ke(S || []), le && setTimeout(() => {
+        r === void 0 && (Le(!0), z(S || []), le && setTimeout(() => {
           var x;
-          te((x = j.current) == null ? void 0 : x.element);
+          te((x = Y.current) == null ? void 0 : x.element);
         }, 300));
       }
     },
-    [z, r, u, le, j]
+    [q, r, u, le, Y]
   ), $ = o.useCallback(
     (y) => {
-      if (z) {
+      if (q) {
         if (f) {
           const x = { ...y };
           f.call(void 0, x);
         }
-        r === void 0 && ze(!1);
+        r === void 0 && Le(!1);
       }
     },
-    [z, r, f]
+    [q, r, f]
   ), fe = o.useCallback(
     (y) => {
-      ge.current = !0, y(), window.setTimeout(() => ge.current = !1, 0);
+      be.current = !0, y(), window.setTimeout(() => be.current = !1, 0);
     },
     []
   ), te = o.useCallback(
@@ -3920,17 +3913,17 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
   ), Pt = o.useCallback(
     () => {
       var y;
-      !A && z ? $({ target: M.current }) : e.filterable ? te((y = J.current) == null ? void 0 : y.element) : te(W.current && W.current.element);
+      !H && q ? $({ target: M.current }) : e.filterable ? te((y = j.current) == null ? void 0 : y.element) : te(K.current && K.current.element);
     },
-    [A, z, te, $, e.filterable]
+    [H, q, te, $, e.filterable]
   ), _t = o.useCallback(
     () => {
-      A && te(H.current);
+      H && te(A.current);
     },
-    [A, te]
+    [H, te]
   ), Rt = o.useCallback(
     (y) => {
-      if (!A && !ge.current && (Pe(!0), e.onFocus && M.current)) {
+      if (!H && !be.current && (ze(!0), e.onFocus && M.current)) {
         const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
@@ -3939,47 +3932,47 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
         e.onFocus.call(void 0, x);
       }
     },
-    [A, e.onFocus]
+    [H, e.onFocus]
   ), ht = o.useCallback(
     (y) => {
-      if (A && !ge.current && M.current) {
-        Pe(!1);
+      if (H && !be.current && M.current) {
+        ze(!1);
         const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
         if (e.onBlur) {
-          const K = { ...x };
-          e.onBlur.call(void 0, K);
+          const L = { ...x };
+          e.onBlur.call(void 0, L);
         }
         le || $(x);
       }
     },
-    [A, e.onBlur, z, r, f]
+    [H, e.onBlur, q, r, f]
   ), ut = o.useCallback(
     () => {
-      A && fe(Fe);
+      H && fe(Fe);
     },
-    [A, fe]
+    [H, fe]
   ), ft = o.useCallback(
     (y) => {
       if (!y.isDefaultPrevented() && M.current) {
-        Pe(!0);
+        ze(!0);
         const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        z || _e(x);
+        q || Pe(x);
       }
     },
-    [z, _e]
+    [q, Pe]
   ), gt = o.useCallback(
     (y) => {
-      var xe, os;
-      const { keyCode: x, altKey: K } = y, se = W.current && W.current.element;
-      if (!M.current || y.isDefaultPrevented() && ((xe = J.current) == null ? void 0 : xe.element) === y.target)
+      var xe, ns;
+      const { keyCode: x, altKey: L } = y, se = K.current && K.current.element;
+      if (!M.current || y.isDefaultPrevented() && ((xe = j.current) == null ? void 0 : xe.element) === y.target)
         return;
       const Ie = {
         syntheticEvent: y,
@@ -3987,46 +3980,46 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
         target: M.current
       };
       if (S && S.length > 0 && (x === g.left || x === g.right || x === g.home || x === g.end || x === g.delete)) {
-        const ie = Z.current;
-        let he = ae ? ie.findIndex((ws) => St(ws, ae, p)) : -1, ue;
+        const ie = X.current;
+        let he = ae ? ie.findIndex((Ss) => St(Ss, ae, p)) : -1, ue;
         const Bt = he !== -1;
-        x === g.left ? (Bt ? he = Math.max(0, he - 1) : he = ie.length - 1, ue = ie[he]) : x === g.right ? he === ie.length - 1 ? ue = void 0 : Bt && (he = Math.min(ie.length - 1, he + 1), ue = ie[he]) : x === g.home ? ue = ie[0] : x === g.end ? ue = ie[ie.length - 1] : x === g.delete && Bt && ne(Ie, ie[he].data, "delete"), ue !== ae && Le(ue);
+        x === g.left ? (Bt ? he = Math.max(0, he - 1) : he = ie.length - 1, ue = ie[he]) : x === g.right ? he === ie.length - 1 ? ue = void 0 : Bt && (he = Math.min(ie.length - 1, he + 1), ue = ie[he]) : x === g.home ? ue = ie[0] : x === g.end ? ue = ie[ie.length - 1] : x === g.delete && Bt && ne(Ie, ie[he].data, "delete"), ue !== ae && Ke(ue);
       }
-      if (z)
-        if (x === g.esc || K && x === g.up)
+      if (q)
+        if (x === g.esc || L && x === g.up)
           y.preventDefault(), $(Ie);
         else if (se && se.querySelector(".k-focus") && (x === g.up || x === g.down || x === g.left || x === g.right || x === g.home || x === g.end)) {
-          if (x === g.up && ((os = J.current) != null && os.element)) {
+          if (x === g.up && ((ns = j.current) != null && ns.element)) {
             const ie = Array.from(se.querySelectorAll(".k-treeview-item")), he = [...ie].reverse().find((ue) => !!(ue && ue.querySelector(".k-focus")));
             if (he && ie.indexOf(he) === 0)
               return fe(() => {
                 var ue;
-                te((ue = J.current) == null ? void 0 : ue.element);
+                te((ue = j.current) == null ? void 0 : ue.element);
               });
           }
           fe(Fe);
         } else
           x === g.down && fe(() => {
             var ie;
-            te(((ie = J.current) == null ? void 0 : ie.element) || se);
+            te(((ie = j.current) == null ? void 0 : ie.element) || se);
           });
       else
-        K && x === g.down && (y.preventDefault(), _e(Ie));
+        L && x === g.down && (y.preventDefault(), Pe(Ie));
     },
-    [z, $, te, fe, _e, ae, p, S, ne]
-  ), Qe = o.useCallback(
+    [q, $, te, fe, Pe, ae, p, S, ne]
+  ), Je = o.useCallback(
     (y) => {
-      const { keyCode: x, altKey: K } = y;
-      K || x !== g.up && x !== g.down || (y.preventDefault(), fe(
+      const { keyCode: x, altKey: L } = y;
+      L || x !== g.up && x !== g.down || (y.preventDefault(), fe(
         x === g.up ? () => {
-          te(H.current);
+          te(A.current);
         } : () => {
-          te(W.current && W.current.element);
+          te(K.current && K.current.element);
         }
       ));
     },
     [te, fe]
-  ), Xe = o.useCallback(
+  ), Qe = o.useCallback(
     (y) => {
       if (!M.current)
         return;
@@ -4040,19 +4033,19 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
     [ne, $]
   ), Vt = o.useCallback(
     (y, x) => {
-      var K;
-      $({ target: M.current }), A || te((K = J.current) == null ? void 0 : K.element), ne({
+      var L;
+      $({ target: M.current }), H || te((L = j.current) == null ? void 0 : L.element), ne({
         syntheticEvent: x,
         nativeEvent: x.nativeEvent,
         target: M.current
       }, y, "delete");
     },
-    [ne, $, te, A]
-  ), Ze = o.useCallback(
+    [ne, $, te, H]
+  ), Xe = o.useCallback(
     (y) => {
       if (e.onExpandChange && M.current) {
-        const { item: x, itemHierarchicalIndex: K, nativeEvent: se, syntheticEvent: Ie } = y, xe = {
-          level: Ti(K),
+        const { item: x, itemHierarchicalIndex: L, nativeEvent: se, syntheticEvent: Ie } = y, xe = {
+          level: Ti(L),
           item: x,
           nativeEvent: se,
           syntheticEvent: Ie,
@@ -4062,16 +4055,16 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
       }
     },
     [e.onExpandChange]
-  ), et = o.useCallback(
+  ), Ze = o.useCallback(
     (y) => {
       if (e.onFilterChange && M.current) {
-        const K = {
+        const L = {
           filter: { field: e.textField, operator: "contains", value: y.target.value },
           syntheticEvent: y.syntheticEvent,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        e.onFilterChange.call(void 0, K), e.filter === void 0 && Q(y.target.value);
+        e.onFilterChange.call(void 0, L), e.filter === void 0 && ke(y.target.value);
       }
     },
     [e.onFilterChange, e.filter, e.textField]
@@ -4087,35 +4080,35 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
       e.onCancel && e.onCancel.call(void 0, x), $(x), y.preventDefault();
     },
     [e.onCancel, $]
-  ), tt = () => {
+  ), et = () => {
     const y = e.filterable ? /* @__PURE__ */ o.createElement(
-      Ve,
+      Re,
       {
-        value: e.filter === void 0 ? L : e.filter,
-        ref: j,
-        onChange: et,
-        onKeyDown: Qe,
+        value: e.filter === void 0 ? J : e.filter,
+        ref: Y,
+        onChange: Ze,
+        onKeyDown: Je,
         size: de,
         rounded: I,
-        fillMode: F
+        fillMode: T
       }
     ) : null, x = {
       adaptiveTitle: e.adaptiveTitle,
-      expand: z,
-      onClose: (K) => e.onCancel ? mt(K) : Xe(K),
+      expand: q,
+      onClose: (L) => e.onCancel ? mt(L) : Qe(L),
       windowWidth: P,
       mobileFilter: y,
       footer: {
-        cancelText: ye.toLanguageString(at, ce[at]),
-        onCancel: (K) => e.onCancel ? mt(K) : Xe(K),
-        applyText: ye.toLanguageString(ot, ce[ot]),
-        onApply: (K) => $(K)
+        cancelText: ye.toLanguageString(ot, ce[ot]),
+        onCancel: (L) => e.onCancel ? mt(L) : Qe(L),
+        applyText: ye.toLanguageString(nt, ce[nt]),
+        onApply: (L) => $(L)
       }
     };
-    return /* @__PURE__ */ o.createElement(ts, { ...x }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, a.length > 0 ? /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(ts, { ...x }, /* @__PURE__ */ o.createElement(lt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, a.length > 0 ? /* @__PURE__ */ o.createElement(
       kt,
       {
-        ref: W,
+        ref: K,
         tabIndex: E,
         data: a,
         focusIdField: p,
@@ -4127,45 +4120,45 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
         expandIcons: !0,
         onItemClick: He,
         onCheckChange: He,
-        onExpandChange: Ze,
+        onExpandChange: Xe,
         checkboxes: !0,
         size: de,
         item: e.item,
-        dir: X
+        dir: ee
       }
     ) : /* @__PURE__ */ o.createElement(me, null, ye.toLanguageString(ve, ce[ve]))))));
   }, vt = o.useCallback(
     (y) => {
       for (let x of y)
-        q(x.target.clientWidth);
+        W(x.target.clientWidth);
     },
     []
-  ), me = e.listNoData || ks, ye = ys(), De = !C || re.valid, { size: de, rounded: I, fillMode: F } = e, G = le && z ? be : Z.current, pe = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+  ), me = e.listNoData || Cs, ye = bs(), De = !C || Se.valid, { size: de, rounded: I, fillMode: T } = e, G = le && q ? ge : X.current, pe = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
       className: B("k-multiselecttree k-input", e.className, {
-        [`k-input-${fs[de] || de}`]: de,
+        [`k-input-${us[de] || de}`]: de,
         [`k-rounded-${Fi[I] || I}`]: I,
-        [`k-input-${F}`]: F,
-        "k-focus": A && !h,
+        [`k-input-${T}`]: T,
+        "k-focus": H && !h,
         "k-invalid": !De,
         "k-disabled": h,
         "k-loading": e.loading,
-        "k-required": T
+        "k-required": F
       }),
       tabIndex: E,
       accessKey: e.accessKey,
       id: n,
       style: v ? { ...d, width: void 0 } : d,
-      dir: X,
-      ref: H,
+      dir: ee,
+      ref: A,
       onKeyDown: h ? void 0 : gt,
       onMouseDown: ut,
       onFocus: Rt,
       onBlur: ht,
       role: "combobox",
       "aria-haspopup": "tree",
-      "aria-expanded": z,
+      "aria-expanded": q,
       "aria-disabled": h,
       "aria-label": v,
       "aria-labelledby": e.ariaLabelledBy,
@@ -4178,29 +4171,29 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
       {
         id: "tagslist-" + n,
         className: B("k-input-values k-chip-list k-selection-multiple", {
-          [`k-chip-list-${fs[de] || de}`]: de
+          [`k-chip-list-${us[de] || de}`]: de
         })
       },
       G.length > 0 && /* @__PURE__ */ o.createElement(
-        xs,
+        Is,
         {
           tag: e.tag,
           onTagDelete: Vt,
           data: G,
           guid: n,
-          focused: ae ? Z.current.find((y) => St(y, ae, p)) : void 0,
+          focused: ae ? X.current.find((y) => St(y, ae, p)) : void 0,
           size: de
         }
       )
     ),
     /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, G.length === 0 && /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)),
     e.loading && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
-    Ee && !h && G.length > 0 && /* @__PURE__ */ o.createElement(dt, { onClick: Xe }),
+    re && !h && G.length > 0 && /* @__PURE__ */ o.createElement(rt, { onClick: Qe }),
     /* @__PURE__ */ o.createElement(
       "select",
       {
         name: b,
-        ref: Y,
+        ref: Z,
         tabIndex: -1,
         "aria-hidden": !0,
         title: v,
@@ -4216,37 +4209,37 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
     !le && /* @__PURE__ */ o.createElement(
       Yt,
       {
+        ...c,
         popupClass: B(
           c.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: B(c.className, { "k-rtl": X === "rtl" }),
+        className: B(c.className, { "k-rtl": ee === "rtl" }),
         style: pt,
-        animate: c.animate,
-        anchor: H.current,
-        show: z,
+        anchor: c.anchor || A.current,
+        show: q,
         onOpen: Pt,
         onClose: _t,
-        appendTo: c.appendTo,
-        ref: ee
+        ref: Q
       },
       e.filterable && /* @__PURE__ */ o.createElement(
-        Ve,
+        Re,
         {
-          value: e.filter === void 0 ? L : e.filter,
-          ref: J,
-          onChange: et,
-          onKeyDown: Qe,
+          value: e.filter === void 0 ? J : e.filter,
+          ref: j,
+          onChange: Ze,
+          onKeyDown: Je,
           tabIndex: E,
           size: de,
           rounded: I,
-          fillMode: F
+          fillMode: T
         }
       ),
       a.length > 0 ? /* @__PURE__ */ o.createElement(
         kt,
         {
-          ref: W,
+          style: { height: c.height },
+          ref: K,
           tabIndex: E,
           data: a,
           focusIdField: p,
@@ -4258,27 +4251,27 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
           expandIcons: !0,
           onItemClick: He,
           onCheckChange: He,
-          onExpandChange: Ze,
+          onExpandChange: Xe,
           checkboxes: !0,
           size: de,
           item: e.item,
-          dir: X
+          dir: ee
         }
       ) : /* @__PURE__ */ o.createElement(me, null, ye.toLanguageString(ve, ce[ve]))
     )
-  ), le && tt());
+  ), le && et());
   return v ? /* @__PURE__ */ o.createElement(
     Ue,
     {
       label: v,
-      editorValue: Ee,
+      editorValue: re,
       editorPlaceholder: m,
       editorValid: De,
       editorDisabled: h,
       editorId: n,
       style: { width: d ? d.width : void 0 },
       children: pe,
-      dir: X
+      dir: ee
     }
   ) : pe;
 }), Oi = {
@@ -4340,9 +4333,9 @@ const Di = "Please select a value from the list!", { sizeMap: fs, roundedMap: Fi
   adaptive: l.bool
 };
 is.displayName = "KendoReactMultiSelectTree";
-is.defaultProps = Re;
+is.defaultProps = _e;
 is.propTypes = Oi;
-const st = (i, t) => {
+const tt = (i, t) => {
   const e = {};
   return i && i.length && i.forEach((s) => {
     e[t(s)] = !0;
@@ -4354,11 +4347,11 @@ const st = (i, t) => {
     value: n,
     subItemsField: a = "items",
     operation: p
-  } = t, c = Ct(s), d = st(n, c);
+  } = t, c = Ct(s), d = tt(n, c);
   if (p === "clear")
     return [];
   if (p === "delete") {
-    const N = st(e, c);
+    const N = tt(e, c);
     return n.filter((_) => !N[c(_)]);
   }
   const r = e[0], h = c(r), u = Ct(a), f = [...i], m = [];
@@ -4385,18 +4378,18 @@ const st = (i, t) => {
   const D = !d[h], O = [];
   if (D) {
     O.push(...n), O.push(b), O.push(...k.filter((S) => !d[c(S)]));
-    const N = v.filter((S) => !d[c(S)]), _ = st(O, c);
+    const N = v.filter((S) => !d[c(S)]), _ = tt(O, c);
     for (let S = N.length - 1; S > -1; S--) {
-      const T = N[S], C = u(T);
+      const F = N[S], C = u(F);
       if (C.filter((M) => _[c(M)]).length < C.length)
         break;
-      O.push(T), _[c(T)] = !0;
+      O.push(F), _[c(F)] = !0;
     }
   } else {
-    const N = c(b), _ = st(k, c), S = st(v, c);
+    const N = c(b), _ = tt(k, c), S = tt(v, c);
     O.push(
-      ...n.filter((T) => {
-        const C = c(T);
+      ...n.filter((F) => {
+        const C = c(F);
         return !_[C] && N !== C && !S[C];
       })
     );
@@ -4404,36 +4397,36 @@ const st = (i, t) => {
   return O;
 };
 export {
-  di as AutoComplete,
-  ri as AutoCompletePropsContext,
+  ri as AutoComplete,
+  li as AutoCompletePropsContext,
   Mt as AutoCompleteWithoutContext,
-  Is as ComboBox,
-  oi as ComboBoxPropsContext,
-  ct as ComboBoxWithoutContext,
-  ti as DropDownList,
+  ys as ComboBox,
+  ni as ComboBoxPropsContext,
+  dt as ComboBoxWithoutContext,
+  ei as DropDownList,
   Tt as DropDownListClassComponent,
-  ei as DropDownListPropsContext,
+  Zs as DropDownListPropsContext,
   Tt as DropDownListWithoutContext,
-  Ss as DropDownTree,
+  ks as DropDownTree,
   wi as DropDownTreePropsContext,
   je as List,
   Ft as ListContainer,
-  Ve as ListFilter,
-  Us as ListItem,
+  Re as ListFilter,
+  Gs as ListItem,
   ss as MultiColumnComboBox,
-  bi as MultiColumnComboBoxPropsContext,
-  gi as MultiSelect,
-  fi as MultiSelectPropsContext,
+  vi as MultiColumnComboBoxPropsContext,
+  fi as MultiSelect,
+  ui as MultiSelectPropsContext,
   is as MultiSelectTree,
   Ni as MultiSelectTreePropsContext,
   Nt as MultiSelectWithoutContext,
   es as SearchBar,
-  xs as TagList,
+  Is as TagList,
   ce as dropdownsMessages,
   Wi as findByFieldValue,
   V as getItemValue,
   qi as getMultiSelectTreeValue,
-  st as getValueMap,
+  tt as getValueMap,
   ve as nodata,
-  Hs as scrollToItem
+  zs as scrollToItem
 };